Spaces:
Sleeping
Sleeping
| 'use client'; | |
| import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; | |
| import _extends from "@babel/runtime/helpers/esm/extends"; | |
| const _excluded = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"]; | |
| import * as React from 'react'; | |
| import PropTypes from 'prop-types'; | |
| import clsx from 'clsx'; | |
| import composeClasses from '@mui/utils/composeClasses'; | |
| import formControlState from '../FormControl/formControlState'; | |
| import useFormControl from '../FormControl/useFormControl'; | |
| import capitalize from '../utils/capitalize'; | |
| import { useDefaultProps } from '../DefaultPropsProvider'; | |
| import styled from '../styles/styled'; | |
| import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; | |
| import { jsxs as _jsxs } from "react/jsx-runtime"; | |
| const useUtilityClasses = ownerState => { | |
| const { | |
| classes, | |
| color, | |
| focused, | |
| disabled, | |
| error, | |
| filled, | |
| required | |
| } = ownerState; | |
| const slots = { | |
| root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', filled && 'filled', focused && 'focused', required && 'required'], | |
| asterisk: ['asterisk', error && 'error'] | |
| }; | |
| return composeClasses(slots, getFormLabelUtilityClasses, classes); | |
| }; | |
| export const FormLabelRoot = styled('label', { | |
| name: 'MuiFormLabel', | |
| slot: 'Root', | |
| overridesResolver: ({ | |
| ownerState | |
| }, styles) => { | |
| return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled); | |
| } | |
| })(({ | |
| theme, | |
| ownerState | |
| }) => _extends({ | |
| color: (theme.vars || theme).palette.text.secondary | |
| }, theme.typography.body1, { | |
| lineHeight: '1.4375em', | |
| padding: 0, | |
| position: 'relative', | |
| [`&.${formLabelClasses.focused}`]: { | |
| color: (theme.vars || theme).palette[ownerState.color].main | |
| }, | |
| [`&.${formLabelClasses.disabled}`]: { | |
| color: (theme.vars || theme).palette.text.disabled | |
| }, | |
| [`&.${formLabelClasses.error}`]: { | |
| color: (theme.vars || theme).palette.error.main | |
| } | |
| })); | |
| const AsteriskComponent = styled('span', { | |
| name: 'MuiFormLabel', | |
| slot: 'Asterisk', | |
| overridesResolver: (props, styles) => styles.asterisk | |
| })(({ | |
| theme | |
| }) => ({ | |
| [`&.${formLabelClasses.error}`]: { | |
| color: (theme.vars || theme).palette.error.main | |
| } | |
| })); | |
| const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref) { | |
| const props = useDefaultProps({ | |
| props: inProps, | |
| name: 'MuiFormLabel' | |
| }); | |
| const { | |
| children, | |
| className, | |
| component = 'label' | |
| } = props, | |
| other = _objectWithoutPropertiesLoose(props, _excluded); | |
| const muiFormControl = useFormControl(); | |
| const fcs = formControlState({ | |
| props, | |
| muiFormControl, | |
| states: ['color', 'required', 'focused', 'disabled', 'error', 'filled'] | |
| }); | |
| const ownerState = _extends({}, props, { | |
| color: fcs.color || 'primary', | |
| component, | |
| disabled: fcs.disabled, | |
| error: fcs.error, | |
| filled: fcs.filled, | |
| focused: fcs.focused, | |
| required: fcs.required | |
| }); | |
| const classes = useUtilityClasses(ownerState); | |
| return /*#__PURE__*/_jsxs(FormLabelRoot, _extends({ | |
| as: component, | |
| ownerState: ownerState, | |
| className: clsx(classes.root, className), | |
| ref: ref | |
| }, other, { | |
| children: [children, fcs.required && /*#__PURE__*/_jsxs(AsteriskComponent, { | |
| ownerState: ownerState, | |
| "aria-hidden": true, | |
| className: classes.asterisk, | |
| children: ["\u2009", '*'] | |
| })] | |
| })); | |
| }); | |
| process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = { | |
| // βββββββββββββββββββββββββββββββ Warning βββββββββββββββββββββββββββββββ | |
| // β These PropTypes are generated from the TypeScript type definitions. β | |
| // β To update them, edit the d.ts file and run `pnpm proptypes`. β | |
| // βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | |
| /** | |
| * The content of the component. | |
| */ | |
| children: PropTypes.node, | |
| /** | |
| * Override or extend the styles applied to the component. | |
| */ | |
| classes: PropTypes.object, | |
| /** | |
| * @ignore | |
| */ | |
| className: PropTypes.string, | |
| /** | |
| * The color of the component. | |
| * It supports both default and custom theme colors, which can be added as shown in the | |
| * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors). | |
| */ | |
| color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']), PropTypes.string]), | |
| /** | |
| * The component used for the root node. | |
| * Either a string to use a HTML element or a component. | |
| */ | |
| component: PropTypes.elementType, | |
| /** | |
| * If `true`, the label should be displayed in a disabled state. | |
| */ | |
| disabled: PropTypes.bool, | |
| /** | |
| * If `true`, the label is displayed in an error state. | |
| */ | |
| error: PropTypes.bool, | |
| /** | |
| * If `true`, the label should use filled classes key. | |
| */ | |
| filled: PropTypes.bool, | |
| /** | |
| * If `true`, the input of this label is focused (used by `FormGroup` components). | |
| */ | |
| focused: PropTypes.bool, | |
| /** | |
| * If `true`, the label will indicate that the `input` is required. | |
| */ | |
| required: PropTypes.bool, | |
| /** | |
| * The system prop that allows defining system overrides as well as additional CSS styles. | |
| */ | |
| sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]) | |
| } : void 0; | |
| export default FormLabel; |