@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/esm/components/BaseInput/BaseInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.js","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n  Input as MuiInput,\n  InputBaseProps,\n} from \"@mui/material\";\n\nimport { css as emotionCss, Global } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"@core/components/Forms\";\n\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<MuiInputProps, \"onChange\" | \"classes\">,\n    HvBaseProps<\n      HTMLDivElement,\n      | \"onChange\"\n      | \"color\"\n      | \"onBlur\"\n      | \"onFocus\"\n      | \"onInvalid\"\n      | \"onKeyDown\"\n      | \"onKeyUp\"\n    > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: string;\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: string;\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: string;\n  /** Label inside the input used to help user. */\n  placeholder?: string;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** Allows passing a ref to the underlying input */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = ({\n  classes: classesProp,\n  className = \"\",\n  id,\n  name,\n  value,\n  defaultValue,\n  required,\n  readOnly,\n  disabled,\n  onChange,\n  type = \"text\",\n  placeholder,\n  multiline = false,\n  resizable = false,\n  invalid = false,\n  inputRef,\n  inputProps = {},\n  ...others\n}: HvBaseInputProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["baseInputStyles","emotionCss","WebkitBoxShadow","theme","colors","atmo1","WebkitTextFillColor","secondary","WebkitAppearance","margin","MozAppearance","display","process","env","NODE_ENV","HvBaseInput","classes","classesProp","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","cx","useClasses","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","localInvalid","status","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","_Fragment","children","_jsx","Global","styles","_jsxs","root","MuiInput","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","rows","role","inputBorderContainer"],"mappings":"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"}
+{"version":3,"file":"BaseInput.js","sources":["../../../../src/components/BaseInput/BaseInput.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport {\n  InputBaseComponentProps as MuiInputBaseComponentProps,\n  InputProps as MuiInputProps,\n  Input as MuiInput,\n  InputBaseProps,\n} from \"@mui/material\";\n\nimport { css as emotionCss, Global } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvFormElementContext,\n  HvFormElementDescriptorsContext,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n} from \"@core/components/Forms\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseInput.styles\";\n\nexport { staticClasses as baseInputClasses };\n\nexport type HvBaseInputClasses = ExtractNames<typeof useClasses>;\n\n// Global styles for the base input.\nconst baseInputStyles = emotionCss({\n  \"input:-webkit-autofill\": {\n    WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n    WebkitTextFillColor: theme.colors.secondary,\n  },\n\n  // Clears number input up/down arrows in Chrome and Firefox\n  \"input::-webkit-outer-spin-button,input::-webkit-inner-spin-button\": {\n    WebkitAppearance: \"none\",\n    margin: 0,\n  },\n  \"input[type=number]\": {\n    MozAppearance: \"textfield\",\n  },\n\n  // Clears time input clock in Chrome\n  \"input::-webkit-calendar-picker-indicator\": {\n    display: \"none\",\n  },\n\n  // Clears search input clear button in Chrome\n  \"input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration\":\n    {\n      display: \"none\",\n    },\n});\n\nexport interface HvBaseInputProps\n  extends Omit<MuiInputProps, \"onChange\" | \"classes\">,\n    HvBaseProps<\n      HTMLDivElement,\n      | \"onChange\"\n      | \"color\"\n      | \"onBlur\"\n      | \"onFocus\"\n      | \"onInvalid\"\n      | \"onKeyDown\"\n      | \"onKeyUp\"\n    > {\n  /** The input name. */\n  name?: string;\n  /** The value of the input, when controlled. */\n  value?: string;\n  /** The initial value of the input, when uncontrolled. */\n  defaultValue?: string;\n  /** If `true` the input is disabled. */\n  disabled?: boolean;\n  /** Indicates that the input is not editable. */\n  readOnly?: boolean;\n  /** If true, the input element will be required. */\n  required?: boolean;\n  /** The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it. */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: string;\n  /** Label inside the input used to help user. */\n  placeholder?: string;\n  /** If true, a textarea element will be rendered. */\n  multiline?: boolean;\n  /** If true and multiline is also true the textarea element will be resizable. */\n  resizable?: boolean;\n  /** Denotes if the input is in an invalid state. */\n  invalid?: boolean;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /** Allows passing a ref to the underlying input */\n  inputRef?: InputBaseProps[\"inputRef\"];\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBaseInputClasses;\n}\n\n/**\n * An Input component that only posses the most basic functionalities.\n * It should be used alongside the other form elements to construct a proper accessible form.\n */\nexport const HvBaseInput = (props: HvBaseInputProps) => {\n  const {\n    classes: classesProp,\n    className = \"\",\n    id,\n    name,\n    value,\n    defaultValue,\n    required,\n    readOnly,\n    disabled,\n    onChange,\n    type = \"text\",\n    placeholder,\n    multiline = false,\n    resizable = false,\n    invalid = false,\n    inputRef,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvBaseInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const formElementContext = useContext(HvFormElementContext);\n  const formElementProps = buildFormElementPropsFromContext(\n    name,\n    disabled,\n    readOnly,\n    required,\n    formElementContext\n  );\n\n  const localInvalid = invalid || formElementProps.status === \"invalid\";\n\n  const formElementDescriptorsContext = useContext(\n    HvFormElementDescriptorsContext\n  );\n  const ariaProps = buildAriaPropsFromContext(\n    inputProps,\n    formElementDescriptorsContext,\n    localInvalid,\n    id\n  );\n\n  const onChangeHandler: MuiInputProps[\"onChange\"] = (event) => {\n    onChange?.(event, event.target.value);\n  };\n\n  return (\n    <>\n      <Global styles={baseInputStyles} />\n      <div\n        className={cx(classes.root, className, {\n          [classes.disabled]: formElementProps.disabled,\n          [classes.invalid]: localInvalid,\n          [classes.resizable]: multiline && resizable,\n          [classes.readOnly]: formElementProps.readOnly,\n        })}\n      >\n        <MuiInput\n          id={id}\n          name={formElementProps.name}\n          value={value}\n          defaultValue={defaultValue}\n          type={type}\n          placeholder={placeholder}\n          readOnly={!!formElementProps.readOnly}\n          disabled={formElementProps.disabled}\n          onChange={onChangeHandler}\n          className={cx({\n            [classes.inputRootInvalid]: localInvalid,\n            [classes.inputRootReadOnly]: formElementProps.readOnly,\n          })}\n          classes={{\n            root: classes.inputRoot,\n            focused: classes.inputRootFocused,\n            disabled: classes.inputRootDisabled,\n            multiline: classes.inputRootMultiline,\n            input: cx(classes.input, {\n              [classes.inputResizable]: !formElementProps.disabled && resizable,\n              [classes.inputDisabled]: formElementProps.disabled,\n              [classes.inputReadOnly]: formElementProps.readOnly,\n            }),\n          }}\n          inputProps={{\n            // Avoid the required attribute at the root node\n            required: formElementProps.required,\n            ...inputProps,\n            ...ariaProps,\n          }}\n          inputRef={inputRef}\n          multiline={multiline}\n          rows={10}\n          {...others}\n        />\n        {!multiline && (\n          <div role=\"presentation\" className={classes.inputBorderContainer} />\n        )}\n      </div>\n    </>\n  );\n};\n"],"names":["baseInputStyles","emotionCss","WebkitBoxShadow","theme","colors","atmo1","WebkitTextFillColor","secondary","WebkitAppearance","margin","MozAppearance","display","process","env","NODE_ENV","HvBaseInput","props","classes","classesProp","className","id","name","value","defaultValue","required","readOnly","disabled","onChange","type","placeholder","multiline","resizable","invalid","inputRef","inputProps","others","useDefaultProps","cx","useClasses","formElementContext","useContext","HvFormElementContext","formElementProps","buildFormElementPropsFromContext","localInvalid","status","formElementDescriptorsContext","HvFormElementDescriptorsContext","ariaProps","buildAriaPropsFromContext","onChangeHandler","event","target","_Fragment","children","_jsx","Global","styles","_jsxs","root","MuiInput","inputRootInvalid","inputRootReadOnly","inputRoot","focused","inputRootFocused","inputRootDisabled","inputRootMultiline","input","inputResizable","inputDisabled","inputReadOnly","rows","role","inputBorderContainer"],"mappings":"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"}

package/dist/esm/components/BaseRadio/BaseRadio.js

@@ -1,8 +1,9 @@
 import { useState, useCallback } from "react";
-import { clsx } from "clsx";
+import MuiRadio from "@mui/material/Radio";
 import { RadioButtonUnselected, RadioButtonSelected } from "@hitachivantara/uikit-react-icons";
-import { StyledRadio } from "./BaseRadio.styles.js";
-import baseRadioClasses from "./baseRadioClasses.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseRadio.styles.js";
+import { staticClasses } from "./BaseRadio.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const getSelectorIcons = (options, classes) => {
   const {
@@ -14,17 +15,17 @@ const getSelectorIcons = (options, classes) => {
   return {
     radio: /* @__PURE__ */ jsx(RadioButtonUnselected, {
       color,
-      className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon)
+      className: classes.icon
     }),
     radioChecked: /* @__PURE__ */ jsx(RadioButtonSelected, {
       color: checkedColor,
-      className: clsx(baseRadioClasses.icon, classes == null ? void 0 : classes.icon)
+      className: classes.icon
     })
   };
 };
 const HvBaseRadio = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -40,7 +41,11 @@ const HvBaseRadio = (props) => {
     onFocusVisible,
     onBlur,
     ...others
-  } = props;
+  } = useDefaultProps("HvBaseRadio", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
   const onFocusVisibleCallback = useCallback((evt) => {
     setFocusVisible(true);
@@ -60,11 +65,13 @@ const HvBaseRadio = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsx(StyledRadio, {
+  return /* @__PURE__ */ jsx(MuiRadio, {
     id,
     name,
-    className: clsx(className, baseRadioClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseRadioClasses.disabled, classes == null ? void 0 : classes.disabled), focusVisible && clsx(baseRadioClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.focusVisible]: focusVisible
+    }, className),
     icon: icons.radio,
     checkedIcon: icons.radioChecked,
     color: "default",
@@ -84,6 +91,7 @@ const HvBaseRadio = (props) => {
 };
 export {
   HvBaseRadio,
+  staticClasses as baseRadioClasses,
   getSelectorIcons
 };
 //# sourceMappingURL=BaseRadio.js.map

package/dist/esm/components/BaseRadio/BaseRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledRadio } from \"./BaseRadio.styles\";\nimport baseRadioClasses, { HvBaseRadioClasses } from \"./baseRadioClasses\";\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes?: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: (\n      <RadioButtonUnselected\n        color={color}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n    radioChecked: (\n      <RadioButtonSelected\n        color={checkedColor}\n        className={clsx(baseRadioClasses.icon, classes?.icon)}\n      />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledRadio\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseRadioClasses.root,\n        classes?.root,\n        disabled && clsx(baseRadioClasses.disabled, classes?.disabled),\n        focusVisible &&\n          clsx(baseRadioClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","RadioButtonUnselected","className","clsx","baseRadioClasses","icon","radioChecked","RadioButtonSelected","HvBaseRadio","props","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","StyledRadio","root","$focusVisible","checkedIcon","disableRipple"],"mappings":";;;;;;AA0FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,2BACGC,uBAAqB;AAAA,MACpBJ;AAAAA,MACAK,WAAWC,KAAKC,iBAAiBC,MAAMX,mCAASW,IAAI;AAAA,IAAA,CACrD;AAAA,IAEHC,kCACGC,qBAAmB;AAAA,MAClBV,OAAOE;AAAAA,MACPG,WAAWC,KAAKC,iBAAiBC,MAAMX,mCAASW,IAAI;AAAA,IAAA,CACrD;AAAA,EAAA;AAGP;AAQaG,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJf;AAAAA,IACAQ;AAAAA,IACAQ;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXnB,WAAW;AAAA,IACXoB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACArB,WAAW;AAAA,IACXsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDZ,IAAAA;AAEJ,QAAM,CAACa,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CACjB;AAEMS,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CACT;AAEA,QAAMS,QAAQrC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDoC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIb,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWU,KAAKA,IAAII,OAAOhB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,6BACGoB,aAAW;AAAA,IACVtB;AAAAA,IACAC;AAAAA,IACAT,WAAWC,KACTD,WACAE,iBAAiB6B,MACjBvC,mCAASuC,MACTtC,YAAYQ,KAAKC,iBAAiBT,UAAUD,mCAASC,QAAQ,GAC7D2B,gBACEnB,KAAKC,iBAAiBkB,cAAc5B,mCAAS4B,YAAY,CAC7D;AAAA,IACAY,eAAeZ;AAAAA,IACfjB,MAAMwB,MAAM7B;AAAAA,IACZmC,aAAaN,MAAMvB;AAAAA,IACnBT,OAAM;AAAA,IACNF;AAAAA,IACAkB;AAAAA,IACAC;AAAAA,IACAsB,eAAa;AAAA,IACbnB,UAAUa;AAAAA,IACVlB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,gBAAgBM;AAAAA,IAChBL,QAAQQ;AAAAA,IAAe,GACnBP;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvBaseRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <MuiRadio\n      id={id}\n      name={name}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n        },\n        className\n      )}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","RadioButtonUnselected","className","icon","radioChecked","RadioButtonSelected","HvBaseRadio","props","classesProp","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","MuiRadio","root","checkedIcon","disableRipple"],"mappings":";;;;;;;AA6FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,2BAAQC,uBAAqB;AAAA,MAACJ;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IACtEC,kCACGC,qBAAmB;AAAA,MAACR,OAAOE;AAAAA,MAAcG,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,EAAA;AAG1E;AAQaG,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJb,SAASc;AAAAA,IACTN;AAAAA,IACAO;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXlB,WAAW;AAAA,IACXmB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACApB,WAAW;AAAA,IACXqB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAed,KAAK;AAElC,QAAA;AAAA,IAAEb;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,WAAWf,WAAW;AAE9C,QAAM,CAACgB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQvC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDsC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,6BACGuB,UAAQ;AAAA,IACPzB;AAAAA,IACAC;AAAAA,IACAR,WAAWoB,GACT5B,QAAQyC,MACR;AAAA,MACE,CAACzC,QAAQC,QAAQ,GAAGA;AAAAA,MACpB,CAACD,QAAQ8B,YAAY,GAAGA;AAAAA,OAE1BtB,SACF;AAAA,IACAC,MAAM4B,MAAM/B;AAAAA,IACZoC,aAAaL,MAAM3B;AAAAA,IACnBP,OAAM;AAAA,IACNF;AAAAA,IACAiB;AAAAA,IACAC;AAAAA,IACAwB,eAAa;AAAA,IACbrB,UAAUgB;AAAAA,IACVrB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,gBAAgBS;AAAAA,IAChBR,QAAQW;AAAAA,IAAe,GACnBV;AAAAA,EAAAA,CACL;AAEL;"}

package/dist/esm/components/BaseRadio/BaseRadio.styles.js

@@ -1,38 +1,20 @@
-import _styled from "@emotion/styled/base";
-import { Radio, radioClasses } from "@mui/material";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-import { transientOptions } from "../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledRadio = /* @__PURE__ */ _styled(Radio, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1sbb5xr0"
-}, transientOptions) : _extends({}, {
-  target: "e1sbb5xr0",
-  label: "StyledRadio"
-}, transientOptions))(({
-  $focusVisible
-}) => ({
-  padding: 0,
-  cursor: "pointer",
-  "&:hover": {
-    backgroundColor: theme.baseRadio.hoverColor,
-    borderRadius: theme.baseRadio.hoverBorderRadius
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvBaseRadio", {
+  root: {
+    padding: 0,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.baseRadio.hoverColor,
+      borderRadius: theme.baseRadio.hoverBorderRadius
+    },
+    borderRadius: 0
   },
-  borderRadius: 0,
-  [`&.${radioClasses.disabled}`]: {
+  disabled: {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
@@ -41,14 +23,16 @@ const StyledRadio = /* @__PURE__ */ _styled(Radio, process.env.NODE_ENV === "pro
       }
     }
   },
-  ...$focusVisible && {
+  focusVisible: {
     "& svg": {
       borderRadius: "8px",
       ...outlineStyles
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVJhZGlvL0Jhc2VSYWRpby5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVkyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Jhc2VSYWRpby9CYXNlUmFkaW8uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIFJhZGlvIGFzIE11aVJhZGlvLFxuICByYWRpb0NsYXNzZXMgYXMgTXVpUmFkaW9DbGFzc2VzLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUmFkaW8gPSBzdHlsZWQoXG4gIE11aVJhZGlvLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmb2N1c1Zpc2libGUgfTogeyAkZm9jdXNWaXNpYmxlOiBib29sZWFuIH0pID0+ICh7XG4gIHBhZGRpbmc6IDAsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlUmFkaW8uaG92ZXJDb2xvcixcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VSYWRpby5ob3ZlckJvcmRlclJhZGl1cyxcbiAgfSxcbiAgYm9yZGVyUmFkaXVzOiAwLFxuXG4gIFtgJi4ke011aVJhZGlvQ2xhc3Nlcy5kaXNhYmxlZH1gXToge1xuICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgIHBvaW50ZXJFdmVudHM6IFwiaW5pdGlhbFwiLFxuICAgIFwiJiBzdmdcIjoge1xuICAgICAgXCImIHBhdGg6bnRoLW9mLXR5cGUoMilcIjoge1xuICAgICAgICBmaWxsOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxuICAuLi4oJGZvY3VzVmlzaWJsZSAmJiB7XG4gICAgXCImIHN2Z1wiOiB7XG4gICAgICBib3JkZXJSYWRpdXM6IFwiOHB4XCIsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG4gIH0pLFxufSkpO1xuIl19 */");
+  },
+  icon: {}
+});
 export {
-  StyledRadio
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=BaseRadio.styles.js.map

package/dist/esm/components/BaseRadio/BaseRadio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.js","sources":["../../../../src/components/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import {\n  Radio as MuiRadio,\n  radioClasses as MuiRadioClasses,\n} from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRadio = styled(\n  MuiRadio,\n  transientOptions\n)(({ $focusVisible }: { $focusVisible: boolean }) => ({\n  padding: 0,\n  cursor: \"pointer\",\n  \"&:hover\": {\n    backgroundColor: theme.baseRadio.hoverColor,\n    borderRadius: theme.baseRadio.hoverBorderRadius,\n  },\n  borderRadius: 0,\n\n  [`&.${MuiRadioClasses.disabled}`]: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  ...($focusVisible && {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  }),\n}));\n"],"names":["StyledRadio","MuiRadio","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","padding","cursor","backgroundColor","theme","baseRadio","hoverColor","borderRadius","hoverBorderRadius","MuiRadioClasses","disabled","pointerEvents","fill","colors","secondary_60","outlineStyles"],"mappings":";;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,sCACXC,OAAQC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACRC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA0C,OAAO;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACR,WAAW;AAAA,IACTC,iBAAiBC,MAAMC,UAAUC;AAAAA,IACjCC,cAAcH,MAAMC,UAAUG;AAAAA,EAChC;AAAA,EACAD,cAAc;AAAA,EAEd,CAAE,KAAIE,aAAgBC,UAAU,GAAG;AAAA,IACjCR,QAAQ;AAAA,IACRS,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMR,MAAMS,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,GAAId,iBAAiB;AAAA,IACnB,SAAS;AAAA,MACPO,cAAc;AAAA,MACd,GAAGQ;AAAAA,IACL;AAAA,EACF;AACF,IAAEtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6vDAAA;"}
+{"version":3,"file":"BaseRadio.styles.js","sources":["../../../../src/components/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.baseRadio.hoverColor,\n      borderRadius: theme.baseRadio.hoverBorderRadius,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","cursor","backgroundColor","theme","baseRadio","hoverColor","borderRadius","hoverBorderRadius","disabled","pointerEvents","fill","colors","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,UAAUC;AAAAA,MACjCC,cAAcH,MAAMC,UAAUG;AAAAA,IAChC;AAAA,IACAD,cAAc;AAAA,EAChB;AAAA,EACAE,UAAU;AAAA,IACRP,QAAQ;AAAA,IACRQ,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMP,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/components/BaseSwitch/BaseSwitch.js

@@ -1,11 +1,12 @@
 import { useState, useCallback } from "react";
-import { clsx } from "clsx";
-import { StyledSwitch } from "./BaseSwitch.styles.js";
-import baseSwitchClasses from "./baseSwitchClasses.js";
+import MuiSwitch from "@mui/material/Switch";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useClasses } from "./BaseSwitch.styles.js";
+import { staticClasses } from "./BaseSwitch.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvBaseSwitch = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -20,7 +21,11 @@ const HvBaseSwitch = (props) => {
     onFocusVisible,
     onBlur,
     ...others
-  } = props;
+  } = useDefaultProps("HvBaseSwitch", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
   const onFocusVisibleCallback = useCallback((evt) => {
     setFocusVisible(true);
@@ -36,13 +41,14 @@ const HvBaseSwitch = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsx(StyledSwitch, {
+  return /* @__PURE__ */ jsx(MuiSwitch, {
     id,
     name,
-    className: clsx(className, baseSwitchClasses.root, classes == null ? void 0 : classes.root, disabled && clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled), readOnly && clsx(baseSwitchClasses.readOnly, classes == null ? void 0 : classes.readOnly), focusVisible && clsx(baseSwitchClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
-    $readOnly: readOnly,
-    $disabled: disabled,
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.readOnly]: readOnly,
+      [classes.focusVisible]: focusVisible
+    }, className),
     color: "default",
     disabled,
     required,
@@ -53,12 +59,12 @@ const HvBaseSwitch = (props) => {
     checked,
     defaultChecked,
     classes: {
-      root: clsx(baseSwitchClasses.switch, classes == null ? void 0 : classes.switch),
-      switchBase: clsx(baseSwitchClasses.switchBase, classes == null ? void 0 : classes.switchBase),
-      checked: clsx(baseSwitchClasses.checked, classes == null ? void 0 : classes.checked),
-      track: clsx(baseSwitchClasses.track, classes == null ? void 0 : classes.track),
-      thumb: clsx(baseSwitchClasses.thumb, classes == null ? void 0 : classes.thumb),
-      disabled: clsx(baseSwitchClasses.disabled, classes == null ? void 0 : classes.disabled)
+      root: classes.switch,
+      switchBase: classes.switchBase,
+      checked: classes.checked,
+      track: classes.track,
+      thumb: classes.thumb,
+      disabled: classes.disabled
     },
     inputProps,
     onFocusVisible: onFocusVisibleCallback,
@@ -67,6 +73,7 @@ const HvBaseSwitch = (props) => {
   });
 };
 export {
-  HvBaseSwitch
+  HvBaseSwitch,
+  staticClasses as baseSwitchClasses
 };
 //# sourceMappingURL=BaseSwitch.js.map

package/dist/esm/components/BaseSwitch/BaseSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport { clsx } from \"clsx\";\n\nimport { SwitchProps as MuiSwitchProps } from \"@mui/material\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledSwitch } from \"./BaseSwitch.styles\";\nimport baseSwitchClasses, { HvBaseSwitchClasses } from \"./baseSwitchClasses\";\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = (props: HvBaseSwitchProps) => {\n  const {\n    classes,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = props;\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <StyledSwitch\n      id={id}\n      name={name}\n      className={clsx(\n        className,\n        baseSwitchClasses.root,\n        classes?.root,\n        disabled && clsx(baseSwitchClasses.disabled, classes?.disabled),\n        readOnly && clsx(baseSwitchClasses.readOnly, classes?.readOnly),\n        focusVisible &&\n          clsx(baseSwitchClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      $readOnly={readOnly}\n      $disabled={disabled}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: clsx(baseSwitchClasses.switch, classes?.switch),\n        switchBase: clsx(baseSwitchClasses.switchBase, classes?.switchBase),\n        checked: clsx(baseSwitchClasses.checked, classes?.checked),\n        track: clsx(baseSwitchClasses.track, classes?.track),\n        thumb: clsx(baseSwitchClasses.thumb, classes?.thumb),\n        disabled: clsx(baseSwitchClasses.disabled, classes?.disabled),\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["HvBaseSwitch","props","classes","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","StyledSwitch","clsx","baseSwitchClasses","root","$focusVisible","$readOnly","$disabled","color","disableRipple","switch","switchBase","track","thumb"],"mappings":";;;;;AAsFaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEA,GAAGC;AAAAA,EACDf,IAAAA;AAEJ,QAAM,CAACgB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBJ,qDAAiBQ;AAAAA,EAAG,GAEtB,CAACR,cAAc,CACjB;AAEMS,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBH,qCAASO;AAAAA,EAAG,GAEd,CAACP,MAAM,CACT;AAEMS,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAId,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWU,KAAKA,IAAIG,OAAOf,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,6BACGoB,cAAY;AAAA,IACXtB;AAAAA,IACAC;AAAAA,IACAF,WAAWwB,KACTxB,WACAyB,kBAAkBC,MAClB3B,mCAAS2B,MACTpB,YAAYkB,KAAKC,kBAAkBnB,UAAUP,mCAASO,QAAQ,GAC9DD,YAAYmB,KAAKC,kBAAkBpB,UAAUN,mCAASM,QAAQ,GAC9DS,gBACEU,KAAKC,kBAAkBX,cAAcf,mCAASe,YAAY,CAC9D;AAAA,IACAa,eAAeb;AAAAA,IACfc,WAAWvB;AAAAA,IACXwB,WAAWvB;AAAAA,IACXwB,OAAM;AAAA,IACNxB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACA0B,eAAa;AAAA,IACbtB,UAAUY;AAAAA,IACVlB;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IACAT,SAAS;AAAA,MACP2B,MAAMF,KAAKC,kBAAkBO,QAAQjC,mCAASiC,MAAM;AAAA,MACpDC,YAAYT,KAAKC,kBAAkBQ,YAAYlC,mCAASkC,UAAU;AAAA,MAClE1B,SAASiB,KAAKC,kBAAkBlB,SAASR,mCAASQ,OAAO;AAAA,MACzD2B,OAAOV,KAAKC,kBAAkBS,OAAOnC,mCAASmC,KAAK;AAAA,MACnDC,OAAOX,KAAKC,kBAAkBU,OAAOpC,mCAASoC,KAAK;AAAA,MACnD7B,UAAUkB,KAAKC,kBAAkBnB,UAAUP,mCAASO,QAAQ;AAAA,IAC9D;AAAA,IACAI;AAAAA,IACAC,gBAAgBM;AAAAA,IAChBL,QAAQQ;AAAAA,IAAe,GACnBP;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"BaseSwitch.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = (props: HvBaseSwitchProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = useDefaultProps(\"HvBaseSwitch\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <MuiSwitch\n      id={id}\n      name={name}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n          [classes.focusVisible]: focusVisible,\n        },\n        className\n      )}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: classes.switch,\n        switchBase: classes.switchBase,\n        checked: classes.checked,\n        track: classes.track,\n        thumb: classes.thumb,\n        disabled: classes.disabled,\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["HvBaseSwitch","props","classes","classesProp","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","MuiSwitch","root","color","disableRipple","switch","switchBase","track","thumb"],"mappings":";;;;;;AAyFaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBjB,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,WAAWjB,WAAW;AAE9C,QAAM,CAACkB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEMY,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAIjB,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWa,KAAKA,IAAIG,OAAOlB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,6BACGuB,WAAS;AAAA,IACRzB;AAAAA,IACAC;AAAAA,IACAF,WAAWe,GACTjB,QAAQ6B,MACR;AAAA,MACE,CAAC7B,QAAQQ,QAAQ,GAAGA;AAAAA,MACpB,CAACR,QAAQO,QAAQ,GAAGA;AAAAA,MACpB,CAACP,QAAQmB,YAAY,GAAGA;AAAAA,OAE1BjB,SACF;AAAA,IACA4B,OAAM;AAAA,IACNtB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACAwB,eAAa;AAAA,IACbpB,UAAUe;AAAAA,IACVrB;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IACAV,SAAS;AAAA,MACP6B,MAAM7B,QAAQgC;AAAAA,MACdC,YAAYjC,QAAQiC;AAAAA,MACpBxB,SAAST,QAAQS;AAAAA,MACjByB,OAAOlC,QAAQkC;AAAAA,MACfC,OAAOnC,QAAQmC;AAAAA,MACf3B,UAAUR,QAAQQ;AAAAA,IACpB;AAAA,IACAI;AAAAA,IACAC,gBAAgBS;AAAAA,IAChBR,QAAQW;AAAAA,IAAe,GACnBV;AAAAA,EAAAA,CACL;AAEL;"}

package/dist/esm/components/BaseSwitch/BaseSwitch.styles.js

@@ -1,66 +1,62 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { Switch, switchClasses } from "@mui/material";
 import { outlineStyles } from "../../utils/focusUtils.js";
-import { transientOptions } from "../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvBaseSwitch", {
+  root: {
+    padding: theme.baseSwitch.padding,
+    cursor: "pointer",
+    width: theme.baseSwitch.width,
+    height: theme.baseSwitch.height,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.baseSwitch.borderRadius,
+    "&:hover": {
+      backgroundColor: theme.baseSwitch.hoverBackgroundColor
+    },
+    // Higher CSS specificity here
+    "& $switchBase": {
+      "&:hover": {
+        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor
+      },
+      "&$checked": {
+        transform: "translateX(16px)",
+        "& + $track": {
+          opacity: theme.baseSwitch.checkedOpacity,
+          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor
+        },
+        "&:hover": {
+          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor
+        }
+      }
+    },
+    // Higher CSS specificity here
+    "&$disabled": {
+      "& $switchBase": {
+        "& + $track": {
+          opacity: theme.baseSwitch.disabled.trackOpacity,
+          backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,
+          border: theme.baseSwitch.disabled.trackBorder
         }
       }
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledSwitch = /* @__PURE__ */ _styled(Switch, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1hgtekf0"
-}, transientOptions) : _extends({}, {
-  target: "e1hgtekf0",
-  label: "StyledSwitch"
-}, transientOptions))(({
-  $focusVisible,
-  $readOnly,
-  $disabled
-}) => ({
-  padding: theme.baseSwitch.padding,
-  cursor: "pointer",
-  width: theme.baseSwitch.width,
-  height: theme.baseSwitch.height,
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    backgroundColor: theme.baseSwitch.hoverBackgroundColor
   },
-  borderRadius: theme.baseSwitch.borderRadius,
-  [`&.${switchClasses.root}`]: {
+  switch: {
     width: theme.baseSwitch.width,
     height: theme.baseSwitch.height,
-    padding: theme.baseSwitch.padding
+    padding: theme.baseSwitch.padding,
+    "&$readOnly $switchBase": {
+      cursor: "default"
+    }
   },
-  [`& .${switchClasses.switchBase}`]: {
+  switchBase: {
     width: theme.baseSwitch.width,
     height: theme.baseSwitch.height,
-    padding: theme.baseSwitch.padding,
-    "&:hover": {
-      backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor
-    },
-    [`&.${switchClasses.checked}`]: {
-      transform: "translateX(16px)",
-      [`& + .${switchClasses.track}`]: {
-        opacity: theme.baseSwitch.checkedOpacity,
-        backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor
-      },
-      "&:hover": {
-        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor
-      }
-    }
+    padding: theme.baseSwitch.padding
   },
-  [`.${switchClasses.track}`]: {
+  track: {
     opacity: theme.baseSwitch.track.opacity,
     borderRadius: theme.baseSwitch.track.borderRadius,
     height: theme.baseSwitch.track.height,
@@ -68,7 +64,7 @@ const StyledSwitch = /* @__PURE__ */ _styled(Switch, process.env.NODE_ENV === "p
     border: theme.baseSwitch.track.border,
     backgroundColor: theme.baseSwitch.track.backgroundColor
   },
-  [`.${switchClasses.thumb}`]: {
+  thumb: {
     position: "relative",
     left: theme.baseSwitch.thumb.left,
     width: theme.baseSwitch.thumb.width,
@@ -79,33 +75,25 @@ const StyledSwitch = /* @__PURE__ */ _styled(Switch, process.env.NODE_ENV === "p
     marginTop: theme.baseSwitch.thumb.marginTop,
     boxShadow: theme.baseSwitch.thumb.boxShadow
   },
-  [`.${switchClasses.disabled}`]: {
-    [`& .${switchClasses.thumb}`]: {
+  checked: {},
+  disabled: {
+    cursor: "not-allowed",
+    "& $switch": {
+      cursor: "not-allowed"
+    },
+    "& $thumb": {
       backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,
       border: theme.baseSwitch.disabled.thumbBorder
-    },
-    [`&.${switchClasses.switchBase} + .${switchClasses.track}`]: {
-      opacity: theme.baseSwitch.disabled.trackOpacity,
-      backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,
-      border: theme.baseSwitch.disabled.trackBorder
-    }
-  },
-  ...$readOnly && {
-    [`.${switchClasses.switchBase}`]: {
-      cursor: "default"
     }
   },
-  ...$focusVisible && {
+  readOnly: {},
+  focusVisible: {
     borderRadius: theme.baseSwitch.focusBorderRadius,
     ...outlineStyles
-  },
-  ...$disabled && {
-    [`&.${switchClasses.root}`]: {
-      cursor: "not-allowed"
-    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBTd2l0Y2ggYXMgTXVpU3dpdGNoLFxuICBzd2l0Y2hDbGFzc2VzIGFzIE11aVN3aXRjaENsYXNzZXMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTd2l0Y2ggPSBzdHlsZWQoXG4gIE11aVN3aXRjaCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZm9jdXNWaXNpYmxlLFxuICAgICRyZWFkT25seSxcbiAgICAkZGlzYWJsZWQsXG4gIH06IHtcbiAgICAkZm9jdXNWaXNpYmxlOiBib29sZWFuO1xuICAgICRyZWFkT25seTogYm9vbGVhbjtcbiAgICAkZGlzYWJsZWQ6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgcGFkZGluZzogdGhlbWUuYmFzZVN3aXRjaC5wYWRkaW5nLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IHRoZW1lLmJhc2VTd2l0Y2gud2lkdGgsXG4gICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guaG92ZXJCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guYm9yZGVyUmFkaXVzLFxuXG4gICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5yb290fWBdOiB7XG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC5oZWlnaHQsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5iYXNlU3dpdGNoLnBhZGRpbmcsXG4gICAgfSxcblxuICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgIHdpZHRoOiB0aGVtZS5iYXNlU3dpdGNoLndpZHRoLFxuICAgICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICAgIHBhZGRpbmc6IHRoZW1lLmJhc2VTd2l0Y2gucGFkZGluZyxcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5ob3ZlckJhc2VCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9LFxuICAgICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5jaGVja2VkfWBdOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDE2cHgpXCIsXG4gICAgICAgIFtgJiArIC4ke011aVN3aXRjaENsYXNzZXMudHJhY2t9YF06IHtcbiAgICAgICAgICBvcGFjaXR5OiB0aGVtZS5iYXNlU3dpdGNoLmNoZWNrZWRPcGFjaXR5LFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5jaGVja2VkVHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLmhvdmVyQmFzZUJhY2tncm91bmRDb2xvcixcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFtgLiR7TXVpU3dpdGNoQ2xhc3Nlcy50cmFja31gXToge1xuICAgICAgb3BhY2l0eTogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5vcGFjaXR5LFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5iYXNlU3dpdGNoLnRyYWNrLmJvcmRlclJhZGl1cyxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5oZWlnaHQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay53aWR0aCxcbiAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5ib3JkZXIsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2gudHJhY2suYmFja2dyb3VuZENvbG9yLFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMudGh1bWJ9YF06IHtcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBsZWZ0OiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmxlZnQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5oZWlnaHQsXG4gICAgICBib3JkZXI6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm9yZGVyLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmJhY2tncm91bmRDb2xvcixcbiAgICAgIG1hcmdpbkxlZnQ6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIubWFyZ2luTGVmdCxcbiAgICAgIG1hcmdpblRvcDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5tYXJnaW5Ub3AsXG4gICAgICBib3hTaGFkb3c6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm94U2hhZG93LFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRodW1ifWBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50aHVtYkJhY2tncm91bmRDb2xvcixcbiAgICAgICAgYm9yZGVyOiB0aGVtZS5iYXNlU3dpdGNoLmRpc2FibGVkLnRodW1iQm9yZGVyLFxuICAgICAgfSxcbiAgICAgIFtgJi4ke011aVN3aXRjaENsYXNzZXMuc3dpdGNoQmFzZX0gKyAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRyYWNrfWBdOiB7XG4gICAgICAgIG9wYWNpdHk6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tPcGFjaXR5LFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50cmFja0JvcmRlcixcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIC4uLigkcmVhZE9ubHkgJiYge1xuICAgICAgW2AuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGZvY3VzVmlzaWJsZSAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guZm9jdXNCb3JkZXJSYWRpdXMsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0pLFxuXG4gICAgLi4uKCRkaXNhYmxlZCAmJiB7XG4gICAgICBbYCYuJHtNdWlTd2l0Y2hDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */");
+});
 export {
-  StyledSwitch
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=BaseSwitch.styles.js.map

package/dist/esm/components/BaseSwitch/BaseSwitch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  Switch as MuiSwitch,\n  switchClasses as MuiSwitchClasses,\n} from \"@mui/material\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledSwitch = styled(\n  MuiSwitch,\n  transientOptions\n)(\n  ({\n    $focusVisible,\n    $readOnly,\n    $disabled,\n  }: {\n    $focusVisible: boolean;\n    $readOnly: boolean;\n    $disabled: boolean;\n  }) => ({\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    [`&.${MuiSwitchClasses.root}`]: {\n      width: theme.baseSwitch.width,\n      height: theme.baseSwitch.height,\n      padding: theme.baseSwitch.padding,\n    },\n\n    [`& .${MuiSwitchClasses.switchBase}`]: {\n      width: theme.baseSwitch.width,\n      height: theme.baseSwitch.height,\n      padding: theme.baseSwitch.padding,\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n      [`&.${MuiSwitchClasses.checked}`]: {\n        transform: \"translateX(16px)\",\n        [`& + .${MuiSwitchClasses.track}`]: {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    [`.${MuiSwitchClasses.track}`]: {\n      opacity: theme.baseSwitch.track.opacity,\n      borderRadius: theme.baseSwitch.track.borderRadius,\n      height: theme.baseSwitch.track.height,\n      width: theme.baseSwitch.track.width,\n      border: theme.baseSwitch.track.border,\n      backgroundColor: theme.baseSwitch.track.backgroundColor,\n    },\n\n    [`.${MuiSwitchClasses.thumb}`]: {\n      position: \"relative\",\n      left: theme.baseSwitch.thumb.left,\n      width: theme.baseSwitch.thumb.width,\n      height: theme.baseSwitch.thumb.height,\n      border: theme.baseSwitch.thumb.border,\n      backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n      marginLeft: theme.baseSwitch.thumb.marginLeft,\n      marginTop: theme.baseSwitch.thumb.marginTop,\n      boxShadow: theme.baseSwitch.thumb.boxShadow,\n    },\n\n    [`.${MuiSwitchClasses.disabled}`]: {\n      [`& .${MuiSwitchClasses.thumb}`]: {\n        backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n        border: theme.baseSwitch.disabled.thumbBorder,\n      },\n      [`&.${MuiSwitchClasses.switchBase} + .${MuiSwitchClasses.track}`]: {\n        opacity: theme.baseSwitch.disabled.trackOpacity,\n        backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n        border: theme.baseSwitch.disabled.trackBorder,\n      },\n    },\n\n    ...($readOnly && {\n      [`.${MuiSwitchClasses.switchBase}`]: {\n        cursor: \"default\",\n      },\n    }),\n\n    ...($focusVisible && {\n      borderRadius: theme.baseSwitch.focusBorderRadius,\n      ...outlineStyles,\n    }),\n\n    ...($disabled && {\n      [`&.${MuiSwitchClasses.root}`]: {\n        cursor: \"not-allowed\",\n      },\n    }),\n  })\n);\n"],"names":["StyledSwitch","MuiSwitch","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","$readOnly","$disabled","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","backgroundColor","hoverBackgroundColor","borderRadius","MuiSwitchClasses","root","switchBase","hoverBaseBackgroundColor","checked","transform","track","opacity","checkedOpacity","checkedTrackBackgroundColor","border","thumb","position","left","marginLeft","marginTop","boxShadow","disabled","thumbBackgroundColor","thumbBorder","trackOpacity","trackBackgroundColor","trackBorder","focusBorderRadius","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"BaseSwitch.styles.js","sources":["../../../../src/components/BaseSwitch/BaseSwitch.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseSwitch\", {\n  root: {\n    padding: theme.baseSwitch.padding,\n    cursor: \"pointer\",\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: theme.baseSwitch.borderRadius,\n\n    \"&:hover\": {\n      backgroundColor: theme.baseSwitch.hoverBackgroundColor,\n    },\n\n    // Higher CSS specificity here\n    \"& $switchBase\": {\n      \"&:hover\": {\n        backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n      },\n\n      \"&$checked\": {\n        transform: \"translateX(16px)\",\n        \"& + $track\": {\n          opacity: theme.baseSwitch.checkedOpacity,\n          backgroundColor: theme.baseSwitch.checkedTrackBackgroundColor,\n        },\n        \"&:hover\": {\n          backgroundColor: theme.baseSwitch.hoverBaseBackgroundColor,\n        },\n      },\n    },\n\n    // Higher CSS specificity here\n    \"&$disabled\": {\n      \"& $switchBase\": {\n        \"& + $track\": {\n          opacity: theme.baseSwitch.disabled.trackOpacity,\n          backgroundColor: theme.baseSwitch.disabled.trackBackgroundColor,\n          border: theme.baseSwitch.disabled.trackBorder,\n        },\n      },\n    },\n  },\n  switch: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n\n    \"&$readOnly $switchBase\": {\n      cursor: \"default\",\n    },\n  },\n  switchBase: {\n    width: theme.baseSwitch.width,\n    height: theme.baseSwitch.height,\n    padding: theme.baseSwitch.padding,\n  },\n  track: {\n    opacity: theme.baseSwitch.track.opacity,\n    borderRadius: theme.baseSwitch.track.borderRadius,\n    height: theme.baseSwitch.track.height,\n    width: theme.baseSwitch.track.width,\n    border: theme.baseSwitch.track.border,\n    backgroundColor: theme.baseSwitch.track.backgroundColor,\n  },\n  thumb: {\n    position: \"relative\",\n    left: theme.baseSwitch.thumb.left,\n    width: theme.baseSwitch.thumb.width,\n    height: theme.baseSwitch.thumb.height,\n    border: theme.baseSwitch.thumb.border,\n    backgroundColor: theme.baseSwitch.thumb.backgroundColor,\n    marginLeft: theme.baseSwitch.thumb.marginLeft,\n    marginTop: theme.baseSwitch.thumb.marginTop,\n    boxShadow: theme.baseSwitch.thumb.boxShadow,\n  },\n  checked: {},\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $switch\": {\n      cursor: \"not-allowed\",\n    },\n\n    \"& $thumb\": {\n      backgroundColor: theme.baseSwitch.disabled.thumbBackgroundColor,\n      border: theme.baseSwitch.disabled.thumbBorder,\n    },\n  },\n  readOnly: {},\n  focusVisible: {\n    borderRadius: theme.baseSwitch.focusBorderRadius,\n    ...outlineStyles,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","baseSwitch","cursor","width","height","alignItems","justifyContent","borderRadius","backgroundColor","hoverBackgroundColor","hoverBaseBackgroundColor","transform","opacity","checkedOpacity","checkedTrackBackgroundColor","disabled","trackOpacity","trackBackgroundColor","border","trackBorder","switch","switchBase","track","thumb","position","left","marginLeft","marginTop","boxShadow","checked","thumbBackgroundColor","thumbBorder","readOnly","focusVisible","focusBorderRadius","outlineStyles"],"mappings":"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"}