@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"@emotion/serialize\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledRoot = styled(\"div\")({\n  width: \"100%\",\n  position: \"relative\",\n});\n\nexport const StyledAnchor = styled(\n  \"div\",\n  transientOptions\n)(({ $disabled }: { $disabled: boolean }) => ({\n  display: \"inline-block\",\n  width: \"100%\",\n\n  ...($disabled && {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  }),\n}));\n\nexport const StyledHeaderRoot = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $disabled,\n    $readOnly,\n    $opened,\n    $openedUp,\n    $openedDown,\n  }: {\n    $disabled: boolean;\n    $readOnly: boolean;\n    $opened: boolean;\n    $openedUp: boolean;\n    $openedDown: boolean;\n  }) => ({\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.baseDropdown.borderColor}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n\n    ...($disabled && {\n      cursor: \"not-allowed\",\n      pointerEvents: \"none\",\n      border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n      background: theme.baseDropdown.disabledBackgroundColor,\n      \"&:hover\": {\n        border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n      },\n    }),\n\n    ...($readOnly && {\n      cursor: \"not-allowed\",\n      pointerEvents: \"none\",\n      border: theme.baseDropdown.readOnlyBorder,\n      background: theme.baseDropdown.readOnlyBackgroundColor,\n      userSelect: \"text\",\n      \"&:focus-visible\": {\n        outline: \"none\",\n        border: theme.baseDropdown.readOnlyBorder,\n      },\n    }),\n\n    ...($opened && {\n      border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n      boxShadow: theme.baseDropdown.shadow,\n      \"&:hover\": {\n        border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n        boxShadow: theme.baseDropdown.shadow,\n      },\n    }),\n\n    ...($openedUp && {\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n    }),\n\n    ...($openedDown && {\n      borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    }),\n  })\n);\n\nexport const StyledSelection = styled(\"div\")({\n  display: \"flex\",\n  alignItems: \"center\",\n  height: \"30px\",\n  boxSizing: \"border-box\",\n  paddingLeft: theme.space.xs,\n});\n\nexport const StyledPlaceholder = styled(\n  HvTypography,\n  transientOptions\n)(({ $disabled }: { $disabled: boolean }) => ({\n  display: \"block\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  ...(theme.typography.body as CSSProperties),\n  color: theme.baseDropdown.placeholderColor,\n\n  ...($disabled && {\n    color: theme.colors.secondary_60,\n  }),\n}));\n\nexport const StyledAdornment = styled(\"div\")({\n  position: \"absolute\",\n  pointerEvents: \"none\",\n  top: -1,\n  right: -1,\n});\n\nexport const StyledContainer = styled(\"div\")({\n  zIndex: theme.zIndices.popover,\n  width: \"auto\",\n});\n\nexport const StyledExtension = styled(\n  \"div\",\n  transientOptions\n)(\n  ({\n    $leftPosition,\n    $openShadow,\n    $floatLeft,\n    $floatRight,\n  }: {\n    $leftPosition: boolean;\n    $openShadow: boolean;\n    $floatLeft: boolean;\n    $floatRight: boolean;\n  }) => ({\n    height: theme.dropDownMenu.extensionHeight,\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\n    borderLeft: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\n\n    ...($leftPosition && {\n      marginLeft: \"auto\",\n    }),\n\n    ...($openShadow && {\n      boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n    }),\n\n    ...($floatLeft && {\n      float: \"left\",\n    }),\n\n    ...($floatRight && {\n      float: \"right\",\n    }),\n  })\n);\n\nexport const StyledPanel = styled(\n  \"div\",\n  transientOptions\n)(({ $popperPlacement }: { $popperPlacement: string }) => ({\n  position: \"relative\",\n  boxShadow: theme.baseDropdown.shadow,\n  backgroundColor: theme.colors.atmo1,\n  border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n  ...($popperPlacement === \"top\" && {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  }),\n  ...($popperPlacement === \"bottom\" && {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  }),\n}));\n"],"names":["StyledRoot","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledAnchor","_extends","transientOptions","$disabled","display","width","cursor","outline","StyledHeaderRoot","$readOnly","$opened","$openedUp","$openedDown","userSelect","position","background","theme","colors","atmo1","boxSizing","border","baseDropdown","borderColor","borderRadius","radii","base","hoverBorderColor","outlineStyles","pointerEvents","disabledBorderColor","disabledBackgroundColor","readOnlyBorder","readOnlyBackgroundColor","openBorderColor","boxShadow","shadow","StyledSelection","alignItems","height","paddingLeft","space","xs","StyledPlaceholder","HvTypography","overflow","textOverflow","whiteSpace","typography","body","color","placeholderColor","secondary_60","StyledAdornment","top","right","StyledContainer","zIndex","zIndices","popover","StyledExtension","$leftPosition","$openShadow","$floatLeft","$floatRight","dropDownMenu","extensionHeight","backgroundColor","borderTop","borderBottom","borderRight","extensionBorderColor","borderLeft","marginLeft","float","StyledPanel","$popperPlacement"],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../../src/components/BaseDropdown/BaseDropdown.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 { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.baseDropdown.borderColor}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.baseDropdown.hoverBorderColor}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n    boxShadow: theme.baseDropdown.shadow,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n      boxShadow: theme.baseDropdown.shadow,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n    background: theme.baseDropdown.disabledBackgroundColor,\n    \"&:hover\": {\n      border: `1px solid ${theme.baseDropdown.disabledBorderColor}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    border: theme.baseDropdown.readOnlyBorder,\n    background: theme.baseDropdown.readOnlyBackgroundColor,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: theme.baseDropdown.readOnlyBorder,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n  },\n  placeholder: {\n    display: \"block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    color: theme.baseDropdown.placeholderColor,\n  },\n  selectionDisabled: { color: theme.colors.secondary_60 },\n  panel: {\n    position: \"relative\",\n    boxShadow: theme.baseDropdown.shadow,\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.baseDropdown.openBorderColor}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: theme.dropDownMenu.extensionHeight,\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\n    borderLeft: `1px solid ${theme.dropDownMenu.extensionBorderColor}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","width","position","rootDisabled","cursor","outline","anchor","display","container","zIndex","theme","zIndices","popover","header","userSelect","background","colors","atmo1","boxSizing","border","baseDropdown","borderColor","borderRadius","radii","base","hoverBorderColor","outlineStyles","headerOpen","openBorderColor","boxShadow","shadow","headerOpenUp","headerOpenDown","headerDisabled","pointerEvents","disabledBorderColor","disabledBackgroundColor","headerReadOnly","readOnlyBorder","readOnlyBackgroundColor","arrowContainer","top","right","arrow","selection","alignItems","height","paddingLeft","space","xs","placeholder","overflow","textOverflow","whiteSpace","typography","body","color","placeholderColor","selectionDisabled","secondary_60","panel","backgroundColor","panelOpenedUp","panelOpenedDown","inputExtensionOpen","dropDownMenu","extensionHeight","borderTop","borderBottom","borderRight","extensionBorderColor","borderLeft","inputExtensionLeftPosition","marginLeft","inputExtensionOpenShadow","inputExtensionFloatRight","float","inputExtensionFloatLeft"],"mappings":"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"}

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

@@ -1,9 +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 { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { StyledRadio } from "./BaseRadio.styles.js";
-import baseRadioClasses from "./baseRadioClasses.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 {
@@ -15,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,
@@ -42,6 +42,10 @@ const HvBaseRadio = (props) => {
     onBlur,
     ...others
   } = useDefaultProps("HvBaseRadio", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
   const onFocusVisibleCallback = useCallback((evt) => {
     setFocusVisible(true);
@@ -61,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",
@@ -85,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 { useDefaultProps } from \"@core/hooks/useDefaultProps\";\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  } = useDefaultProps(\"HvBaseRadio\", 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","useDefaultProps","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","StyledRadio","root","$focusVisible","checkedIcon","disableRipple"],"mappings":";;;;;;;AA2FaA,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,EAAAA,IACDC,gBAAgB,eAAeb,KAAK;AAExC,QAAM,CAACc,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBL,qDAAiBS;AAAAA,EAAG,GAEtB,CAACT,cAAc,CACjB;AAEMU,QAAAA,iBAAiBF,YACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBJ,qCAASQ;AAAAA,EAAG,GAEd,CAACR,MAAM,CACT;AAEA,QAAMU,QAAQtC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDqC,QAAAA,gBAAgBJ,YACpB,CAACC,QAA6C;AAC5C,QAAId,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWW,KAAKA,IAAII,OAAOjB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,6BACGqB,aAAW;AAAA,IACVvB;AAAAA,IACAC;AAAAA,IACAT,WAAWC,KACTD,WACAE,iBAAiB8B,MACjBxC,mCAASwC,MACTvC,YAAYQ,KAAKC,iBAAiBT,UAAUD,mCAASC,QAAQ,GAC7D4B,gBACEpB,KAAKC,iBAAiBmB,cAAc7B,mCAAS6B,YAAY,CAC7D;AAAA,IACAY,eAAeZ;AAAAA,IACflB,MAAMyB,MAAM9B;AAAAA,IACZoC,aAAaN,MAAMxB;AAAAA,IACnBT,OAAM;AAAA,IACNF;AAAAA,IACAkB;AAAAA,IACAC;AAAAA,IACAuB,eAAa;AAAA,IACbpB,UAAUc;AAAAA,IACVnB;AAAAA,IACAG;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC,gBAAgBO;AAAAA,IAChBN,QAAQS;AAAAA,IAAe,GACnBR;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,12 +1,12 @@
 import { useState, useCallback } from "react";
-import { clsx } from "clsx";
+import MuiSwitch from "@mui/material/Switch";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { StyledSwitch } from "./BaseSwitch.styles.js";
-import baseSwitchClasses from "./baseSwitchClasses.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,
@@ -22,6 +22,10 @@ const HvBaseSwitch = (props) => {
     onBlur,
     ...others
   } = useDefaultProps("HvBaseSwitch", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
   const onFocusVisibleCallback = useCallback((evt) => {
     setFocusVisible(true);
@@ -37,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,
@@ -54,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,
@@ -68,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\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\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  } = useDefaultProps(\"HvBaseSwitch\", 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","useDefaultProps","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","StyledSwitch","clsx","baseSwitchClasses","root","$focusVisible","$readOnly","$disabled","color","disableRipple","switch","switchBase","track","thumb"],"mappings":";;;;;;AAuFaA,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,EAAAA,IACDC,gBAAgB,gBAAgBhB,KAAK;AAEzC,QAAM,CAACiB,cAAcC,eAAe,IAAIC,SAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,YAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBL,qDAAiBS;AAAAA,EAAG,GAEtB,CAACT,cAAc,CACjB;AAEMU,QAAAA,iBAAiBF,YACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBJ,qCAASQ;AAAAA,EAAG,GAEd,CAACR,MAAM,CACT;AAEMU,QAAAA,gBAAgBH,YACpB,CAACC,QAA6C;AAC5C,QAAIf,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWW,KAAKA,IAAIG,OAAOhB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,6BACGqB,cAAY;AAAA,IACXvB;AAAAA,IACAC;AAAAA,IACAF,WAAWyB,KACTzB,WACA0B,kBAAkBC,MAClB5B,mCAAS4B,MACTrB,YAAYmB,KAAKC,kBAAkBpB,UAAUP,mCAASO,QAAQ,GAC9DD,YAAYoB,KAAKC,kBAAkBrB,UAAUN,mCAASM,QAAQ,GAC9DU,gBACEU,KAAKC,kBAAkBX,cAAchB,mCAASgB,YAAY,CAC9D;AAAA,IACAa,eAAeb;AAAAA,IACfc,WAAWxB;AAAAA,IACXyB,WAAWxB;AAAAA,IACXyB,OAAM;AAAA,IACNzB;AAAAA,IACAF;AAAAA,IACAC;AAAAA,IACA2B,eAAa;AAAA,IACbvB,UAAUa;AAAAA,IACVnB;AAAAA,IACAI;AAAAA,IACAC;AAAAA,IACAT,SAAS;AAAA,MACP4B,MAAMF,KAAKC,kBAAkBO,QAAQlC,mCAASkC,MAAM;AAAA,MACpDC,YAAYT,KAAKC,kBAAkBQ,YAAYnC,mCAASmC,UAAU;AAAA,MAClE3B,SAASkB,KAAKC,kBAAkBnB,SAASR,mCAASQ,OAAO;AAAA,MACzD4B,OAAOV,KAAKC,kBAAkBS,OAAOpC,mCAASoC,KAAK;AAAA,MACnDC,OAAOX,KAAKC,kBAAkBU,OAAOrC,mCAASqC,KAAK;AAAA,MACnD9B,UAAUmB,KAAKC,kBAAkBpB,UAAUP,mCAASO,QAAQ;AAAA,IAC9D;AAAA,IACAI;AAAAA,IACAC,gBAAgBO;AAAAA,IAChBN,QAAQS;AAAAA,IAAe,GACnBR;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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"}