@hitachivantara/uikit-react-core 5.23.0 → 5.24.1

package/dist/cjs/components/BaseRadio/BaseRadio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.cjs","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,sCACGC,uCAAqB;AAAA,MACpBJ;AAAAA,MACAK,WAAWC,KAAAA,KAAKC,iBAAAA,QAAiBC,MAAMX,mCAASW,IAAI;AAAA,IAAA,CACrD;AAAA,IAEHC,6CACGC,qCAAmB;AAAA,MAClBV,OAAOE;AAAAA,MACPG,WAAWC,KAAAA,KAAKC,iBAAAA,QAAiBC,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,gBAAA,eAAeb,KAAK;AAExC,QAAM,CAACc,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBL,qDAAiBS;AAAAA,EAAG,GAEtB,CAACT,cAAc,CACjB;AAEMU,QAAAA,iBAAiBF,kBACrB,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,kBACpB,CAACC,QAA6C;AAC5C,QAAId,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWW,KAAKA,IAAII,OAAOjB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,wCACGqB,iBAAAA,aAAW;AAAA,IACVvB;AAAAA,IACAC;AAAAA,IACAT,WAAWC,KAAAA,KACTD,WACAE,iBAAAA,QAAiB8B,MACjBxC,mCAASwC,MACTvC,YAAYQ,UAAKC,iBAAAA,QAAiBT,UAAUD,mCAASC,QAAQ,GAC7D4B,gBACEpB,KAAAA,KAAKC,iBAAAA,QAAiBmB,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.cjs","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,sCAAQC,uCAAqB;AAAA,MAACJ;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IACtEC,6CACGC,qCAAmB;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,gBAAA,eAAed,KAAK;AAElC,QAAA;AAAA,IAAEb;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWf,WAAW;AAE9C,QAAM,CAACgB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,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,kBACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,wCACGuB,kBAAAA,SAAQ;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/cjs/components/BaseRadio/BaseRadio.styles.cjs

@@ -1,42 +1,22 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
-const material = require("@mui/material");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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__default.default(material.Radio, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1sbb5xr0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1sbb5xr0",
-  label: "StyledRadio"
-}, transientOptions.transientOptions))(({
-  $focusVisible
-}) => ({
-  padding: 0,
-  cursor: "pointer",
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.baseRadio.hoverColor,
-    borderRadius: uikitStyles.theme.baseRadio.hoverBorderRadius
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBaseRadio", {
+  root: {
+    padding: 0,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.baseRadio.hoverColor,
+      borderRadius: uikitStyles.theme.baseRadio.hoverBorderRadius
+    },
+    borderRadius: 0
   },
-  borderRadius: 0,
-  [`&.${material.radioClasses.disabled}`]: {
+  disabled: {
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
@@ -45,12 +25,14 @@ const StyledRadio = /* @__PURE__ */ _styled__default.default(material.Radio, pro
       }
     }
   },
-  ...$focusVisible && {
+  focusVisible: {
     "& svg": {
       borderRadius: "8px",
       ...focusUtils.outlineStyles
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVJhZGlvL0Jhc2VSYWRpby5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVkyQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0Jhc2VSYWRpby9CYXNlUmFkaW8uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIFJhZGlvIGFzIE11aVJhZGlvLFxuICByYWRpb0NsYXNzZXMgYXMgTXVpUmFkaW9DbGFzc2VzLFxufSBmcm9tIFwiQG11aS9tYXRlcmlhbFwiO1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkUmFkaW8gPSBzdHlsZWQoXG4gIE11aVJhZGlvLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmb2N1c1Zpc2libGUgfTogeyAkZm9jdXNWaXNpYmxlOiBib29sZWFuIH0pID0+ICh7XG4gIHBhZGRpbmc6IDAsXG4gIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlUmFkaW8uaG92ZXJDb2xvcixcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VSYWRpby5ob3ZlckJvcmRlclJhZGl1cyxcbiAgfSxcbiAgYm9yZGVyUmFkaXVzOiAwLFxuXG4gIFtgJi4ke011aVJhZGlvQ2xhc3Nlcy5kaXNhYmxlZH1gXToge1xuICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgIHBvaW50ZXJFdmVudHM6IFwiaW5pdGlhbFwiLFxuICAgIFwiJiBzdmdcIjoge1xuICAgICAgXCImIHBhdGg6bnRoLW9mLXR5cGUoMilcIjoge1xuICAgICAgICBmaWxsOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxuICAuLi4oJGZvY3VzVmlzaWJsZSAmJiB7XG4gICAgXCImIHN2Z1wiOiB7XG4gICAgICBib3JkZXJSYWRpdXM6IFwiOHB4XCIsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0sXG4gIH0pLFxufSkpO1xuIl19 */");
-exports.StyledRadio = StyledRadio;
+  },
+  icon: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BaseRadio.styles.cjs.map

package/dist/cjs/components/BaseRadio/BaseRadio.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.cjs","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,uDACXC,SAAAA,OAAQC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACRC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA0C,OAAO;AAAA,EACpDC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACR,WAAW;AAAA,IACTC,iBAAiBC,YAAAA,MAAMC,UAAUC;AAAAA,IACjCC,cAAcH,YAAAA,MAAMC,UAAUG;AAAAA,EAChC;AAAA,EACAD,cAAc;AAAA,EAEd,CAAE,KAAIE,sBAAgBC,UAAU,GAAG;AAAA,IACjCR,QAAQ;AAAA,IACRS,eAAe;AAAA,IACf,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMR,YAAAA,MAAMS,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,GAAId,iBAAiB;AAAA,IACnB,SAAS;AAAA,MACPO,cAAc;AAAA,MACd,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AACF,IAAEtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,6vDAAA;;"}
+{"version":3,"file":"BaseRadio.styles.cjs","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,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBC,YAAAA,MAAMC,UAAUC;AAAAA,MACjCC,cAAcH,YAAAA,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,YAAAA,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACPP,cAAc;AAAA,MACd,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/BaseSwitch/BaseSwitch.cjs

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const clsx = require("clsx");
+const MuiSwitch = require("@mui/material/Switch");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
-const baseSwitchClasses = require("./baseSwitchClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
 const HvBaseSwitch = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     name,
@@ -24,6 +25,10 @@ const HvBaseSwitch = (props) => {
     onBlur,
     ...others
   } = useDefaultProps.useDefaultProps("HvBaseSwitch", props);
+  const {
+    classes,
+    cx
+  } = BaseSwitch_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
   const onFocusVisibleCallback = React.useCallback((evt) => {
     setFocusVisible(true);
@@ -39,13 +44,14 @@ const HvBaseSwitch = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseSwitch_styles.StyledSwitch, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiSwitch__default.default, {
     id,
     name,
-    className: clsx.clsx(className, baseSwitchClasses.default.root, classes == null ? void 0 : classes.root, disabled && clsx.clsx(baseSwitchClasses.default.disabled, classes == null ? void 0 : classes.disabled), readOnly && clsx.clsx(baseSwitchClasses.default.readOnly, classes == null ? void 0 : classes.readOnly), focusVisible && clsx.clsx(baseSwitchClasses.default.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,
@@ -56,12 +62,12 @@ const HvBaseSwitch = (props) => {
     checked,
     defaultChecked,
     classes: {
-      root: clsx.clsx(baseSwitchClasses.default.switch, classes == null ? void 0 : classes.switch),
-      switchBase: clsx.clsx(baseSwitchClasses.default.switchBase, classes == null ? void 0 : classes.switchBase),
-      checked: clsx.clsx(baseSwitchClasses.default.checked, classes == null ? void 0 : classes.checked),
-      track: clsx.clsx(baseSwitchClasses.default.track, classes == null ? void 0 : classes.track),
-      thumb: clsx.clsx(baseSwitchClasses.default.thumb, classes == null ? void 0 : classes.thumb),
-      disabled: clsx.clsx(baseSwitchClasses.default.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,
@@ -69,5 +75,6 @@ const HvBaseSwitch = (props) => {
     ...others
   });
 };
+exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
 exports.HvBaseSwitch = HvBaseSwitch;
 //# sourceMappingURL=BaseSwitch.cjs.map

package/dist/cjs/components/BaseSwitch/BaseSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.cjs","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,gBAAA,gBAAgBhB,KAAK;AAEzC,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBL,qDAAiBS;AAAAA,EAAG,GAEtB,CAACT,cAAc,CACjB;AAEMU,QAAAA,iBAAiBF,kBACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBJ,qCAASQ;AAAAA,EAAG,GAEd,CAACR,MAAM,CACT;AAEMU,QAAAA,gBAAgBH,kBACpB,CAACC,QAA6C;AAC5C,QAAIf,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWW,KAAKA,IAAIG,OAAOhB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,wCACGqB,kBAAAA,cAAY;AAAA,IACXvB;AAAAA,IACAC;AAAAA,IACAF,WAAWyB,KAAAA,KACTzB,WACA0B,kBAAkBC,QAAAA,MAClB5B,mCAAS4B,MACTrB,YAAYmB,KAAAA,KAAKC,kBAAAA,QAAkBpB,UAAUP,mCAASO,QAAQ,GAC9DD,YAAYoB,KAAKC,KAAAA,kBAAAA,QAAkBrB,UAAUN,mCAASM,QAAQ,GAC9DU,gBACEU,KAAAA,KAAKC,kBAAAA,QAAkBX,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,KAAAA,KAAKC,kBAAAA,QAAkBO,QAAQlC,mCAASkC,MAAM;AAAA,MACpDC,YAAYT,KAAAA,KAAKC,kBAAAA,QAAkBQ,YAAYnC,mCAASmC,UAAU;AAAA,MAClE3B,SAASkB,KAAAA,KAAKC,kBAAAA,QAAkBnB,SAASR,mCAASQ,OAAO;AAAA,MACzD4B,OAAOV,KAAAA,KAAKC,kBAAAA,QAAkBS,OAAOpC,mCAASoC,KAAK;AAAA,MACnDC,OAAOX,KAAAA,KAAKC,kBAAAA,QAAkBU,OAAOrC,mCAASqC,KAAK;AAAA,MACnD9B,UAAUmB,KAAAA,KAAKC,kBAAAA,QAAkBpB,UAAUP,mCAASO,QAAQ;AAAA,IAC9D;AAAA,IACAI;AAAAA,IACAC,gBAAgBO;AAAAA,IAChBN,QAAQS;AAAAA,IAAe,GACnBR;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"BaseSwitch.cjs","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,gBAAA,gBAAgBjB,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWjB,WAAW;AAE9C,QAAM,CAACkB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEMY,QAAAA,gBAAgBH,kBACpB,CAACC,QAA6C;AAC5C,QAAIjB,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWa,KAAKA,IAAIG,OAAOlB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,wCACGuB,mBAAAA,SAAS;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/cjs/components/BaseSwitch/BaseSwitch.styles.cjs

@@ -1,70 +1,64 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const material = require("@mui/material");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const transientOptions = require("../../utils/transientOptions.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-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];
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBaseSwitch", {
+  root: {
+    padding: uikitStyles.theme.baseSwitch.padding,
+    cursor: "pointer",
+    width: uikitStyles.theme.baseSwitch.width,
+    height: uikitStyles.theme.baseSwitch.height,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: uikitStyles.theme.baseSwitch.borderRadius,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.baseSwitch.hoverBackgroundColor
+    },
+    // Higher CSS specificity here
+    "& $switchBase": {
+      "&:hover": {
+        backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+      },
+      "&$checked": {
+        transform: "translateX(16px)",
+        "& + $track": {
+          opacity: uikitStyles.theme.baseSwitch.checkedOpacity,
+          backgroundColor: uikitStyles.theme.baseSwitch.checkedTrackBackgroundColor
+        },
+        "&:hover": {
+          backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
+        }
+      }
+    },
+    // Higher CSS specificity here
+    "&$disabled": {
+      "& $switchBase": {
+        "& + $track": {
+          opacity: uikitStyles.theme.baseSwitch.disabled.trackOpacity,
+          backgroundColor: uikitStyles.theme.baseSwitch.disabled.trackBackgroundColor,
+          border: uikitStyles.theme.baseSwitch.disabled.trackBorder
         }
       }
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1hgtekf0"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "e1hgtekf0",
-  label: "StyledSwitch"
-}, transientOptions.transientOptions))(({
-  $focusVisible,
-  $readOnly,
-  $disabled
-}) => ({
-  padding: uikitStyles.theme.baseSwitch.padding,
-  cursor: "pointer",
-  width: uikitStyles.theme.baseSwitch.width,
-  height: uikitStyles.theme.baseSwitch.height,
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.baseSwitch.hoverBackgroundColor
   },
-  borderRadius: uikitStyles.theme.baseSwitch.borderRadius,
-  [`&.${material.switchClasses.root}`]: {
+  switch: {
     width: uikitStyles.theme.baseSwitch.width,
     height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding
+    padding: uikitStyles.theme.baseSwitch.padding,
+    "&$readOnly $switchBase": {
+      cursor: "default"
+    }
   },
-  [`& .${material.switchClasses.switchBase}`]: {
+  switchBase: {
     width: uikitStyles.theme.baseSwitch.width,
     height: uikitStyles.theme.baseSwitch.height,
-    padding: uikitStyles.theme.baseSwitch.padding,
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
-    },
-    [`&.${material.switchClasses.checked}`]: {
-      transform: "translateX(16px)",
-      [`& + .${material.switchClasses.track}`]: {
-        opacity: uikitStyles.theme.baseSwitch.checkedOpacity,
-        backgroundColor: uikitStyles.theme.baseSwitch.checkedTrackBackgroundColor
-      },
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.baseSwitch.hoverBaseBackgroundColor
-      }
-    }
+    padding: uikitStyles.theme.baseSwitch.padding
   },
-  [`.${material.switchClasses.track}`]: {
+  track: {
     opacity: uikitStyles.theme.baseSwitch.track.opacity,
     borderRadius: uikitStyles.theme.baseSwitch.track.borderRadius,
     height: uikitStyles.theme.baseSwitch.track.height,
@@ -72,7 +66,7 @@ const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, p
     border: uikitStyles.theme.baseSwitch.track.border,
     backgroundColor: uikitStyles.theme.baseSwitch.track.backgroundColor
   },
-  [`.${material.switchClasses.thumb}`]: {
+  thumb: {
     position: "relative",
     left: uikitStyles.theme.baseSwitch.thumb.left,
     width: uikitStyles.theme.baseSwitch.thumb.width,
@@ -83,31 +77,23 @@ const StyledSwitch = /* @__PURE__ */ _styled__default.default(material.Switch, p
     marginTop: uikitStyles.theme.baseSwitch.thumb.marginTop,
     boxShadow: uikitStyles.theme.baseSwitch.thumb.boxShadow
   },
-  [`.${material.switchClasses.disabled}`]: {
-    [`& .${material.switchClasses.thumb}`]: {
+  checked: {},
+  disabled: {
+    cursor: "not-allowed",
+    "& $switch": {
+      cursor: "not-allowed"
+    },
+    "& $thumb": {
       backgroundColor: uikitStyles.theme.baseSwitch.disabled.thumbBackgroundColor,
       border: uikitStyles.theme.baseSwitch.disabled.thumbBorder
-    },
-    [`&.${material.switchClasses.switchBase} + .${material.switchClasses.track}`]: {
-      opacity: uikitStyles.theme.baseSwitch.disabled.trackOpacity,
-      backgroundColor: uikitStyles.theme.baseSwitch.disabled.trackBackgroundColor,
-      border: uikitStyles.theme.baseSwitch.disabled.trackBorder
-    }
-  },
-  ...$readOnly && {
-    [`.${material.switchClasses.switchBase}`]: {
-      cursor: "default"
     }
   },
-  ...$focusVisible && {
+  readOnly: {},
+  focusVisible: {
     borderRadius: uikitStyles.theme.baseSwitch.focusBorderRadius,
     ...focusUtils.outlineStyles
-  },
-  ...$disabled && {
-    [`&.${material.switchClasses.root}`]: {
-      cursor: "not-allowed"
-    }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTRCIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZVN3aXRjaC9CYXNlU3dpdGNoLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBTd2l0Y2ggYXMgTXVpU3dpdGNoLFxuICBzd2l0Y2hDbGFzc2VzIGFzIE11aVN3aXRjaENsYXNzZXMsXG59IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTd2l0Y2ggPSBzdHlsZWQoXG4gIE11aVN3aXRjaCxcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZm9jdXNWaXNpYmxlLFxuICAgICRyZWFkT25seSxcbiAgICAkZGlzYWJsZWQsXG4gIH06IHtcbiAgICAkZm9jdXNWaXNpYmxlOiBib29sZWFuO1xuICAgICRyZWFkT25seTogYm9vbGVhbjtcbiAgICAkZGlzYWJsZWQ6IGJvb2xlYW47XG4gIH0pID0+ICh7XG4gICAgcGFkZGluZzogdGhlbWUuYmFzZVN3aXRjaC5wYWRkaW5nLFxuICAgIGN1cnNvcjogXCJwb2ludGVyXCIsXG4gICAgd2lkdGg6IHRoZW1lLmJhc2VTd2l0Y2gud2lkdGgsXG4gICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICBhbGlnbkl0ZW1zOiBcImNlbnRlclwiLFxuICAgIGp1c3RpZnlDb250ZW50OiBcImNlbnRlclwiLFxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guaG92ZXJCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guYm9yZGVyUmFkaXVzLFxuXG4gICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5yb290fWBdOiB7XG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC5oZWlnaHQsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5iYXNlU3dpdGNoLnBhZGRpbmcsXG4gICAgfSxcblxuICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgIHdpZHRoOiB0aGVtZS5iYXNlU3dpdGNoLndpZHRoLFxuICAgICAgaGVpZ2h0OiB0aGVtZS5iYXNlU3dpdGNoLmhlaWdodCxcbiAgICAgIHBhZGRpbmc6IHRoZW1lLmJhc2VTd2l0Y2gucGFkZGluZyxcbiAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5ob3ZlckJhc2VCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9LFxuICAgICAgW2AmLiR7TXVpU3dpdGNoQ2xhc3Nlcy5jaGVja2VkfWBdOiB7XG4gICAgICAgIHRyYW5zZm9ybTogXCJ0cmFuc2xhdGVYKDE2cHgpXCIsXG4gICAgICAgIFtgJiArIC4ke011aVN3aXRjaENsYXNzZXMudHJhY2t9YF06IHtcbiAgICAgICAgICBvcGFjaXR5OiB0aGVtZS5iYXNlU3dpdGNoLmNoZWNrZWRPcGFjaXR5LFxuICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5jaGVja2VkVHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIH0sXG4gICAgICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLmhvdmVyQmFzZUJhY2tncm91bmRDb2xvcixcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFtgLiR7TXVpU3dpdGNoQ2xhc3Nlcy50cmFja31gXToge1xuICAgICAgb3BhY2l0eTogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5vcGFjaXR5LFxuICAgICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5iYXNlU3dpdGNoLnRyYWNrLmJvcmRlclJhZGl1cyxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5oZWlnaHQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50cmFjay53aWR0aCxcbiAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC50cmFjay5ib3JkZXIsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2gudHJhY2suYmFja2dyb3VuZENvbG9yLFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMudGh1bWJ9YF06IHtcbiAgICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG4gICAgICBsZWZ0OiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmxlZnQsXG4gICAgICB3aWR0aDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi53aWR0aCxcbiAgICAgIGhlaWdodDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5oZWlnaHQsXG4gICAgICBib3JkZXI6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm9yZGVyLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5iYXNlU3dpdGNoLnRodW1iLmJhY2tncm91bmRDb2xvcixcbiAgICAgIG1hcmdpbkxlZnQ6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIubWFyZ2luTGVmdCxcbiAgICAgIG1hcmdpblRvcDogdGhlbWUuYmFzZVN3aXRjaC50aHVtYi5tYXJnaW5Ub3AsXG4gICAgICBib3hTaGFkb3c6IHRoZW1lLmJhc2VTd2l0Y2gudGh1bWIuYm94U2hhZG93LFxuICAgIH0sXG5cbiAgICBbYC4ke011aVN3aXRjaENsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAgIFtgJiAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRodW1ifWBdOiB7XG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50aHVtYkJhY2tncm91bmRDb2xvcixcbiAgICAgICAgYm9yZGVyOiB0aGVtZS5iYXNlU3dpdGNoLmRpc2FibGVkLnRodW1iQm9yZGVyLFxuICAgICAgfSxcbiAgICAgIFtgJi4ke011aVN3aXRjaENsYXNzZXMuc3dpdGNoQmFzZX0gKyAuJHtNdWlTd2l0Y2hDbGFzc2VzLnRyYWNrfWBdOiB7XG4gICAgICAgIG9wYWNpdHk6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tPcGFjaXR5LFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VTd2l0Y2guZGlzYWJsZWQudHJhY2tCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICAgIGJvcmRlcjogdGhlbWUuYmFzZVN3aXRjaC5kaXNhYmxlZC50cmFja0JvcmRlcixcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIC4uLigkcmVhZE9ubHkgJiYge1xuICAgICAgW2AuJHtNdWlTd2l0Y2hDbGFzc2VzLnN3aXRjaEJhc2V9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcImRlZmF1bHRcIixcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJGZvY3VzVmlzaWJsZSAmJiB7XG4gICAgICBib3JkZXJSYWRpdXM6IHRoZW1lLmJhc2VTd2l0Y2guZm9jdXNCb3JkZXJSYWRpdXMsXG4gICAgICAuLi5vdXRsaW5lU3R5bGVzLFxuICAgIH0pLFxuXG4gICAgLi4uKCRkaXNhYmxlZCAmJiB7XG4gICAgICBbYCYuJHtNdWlTd2l0Y2hDbGFzc2VzLnJvb3R9YF06IHtcbiAgICAgICAgY3Vyc29yOiBcIm5vdC1hbGxvd2VkXCIsXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcbiJdfQ== */");
-exports.StyledSwitch = StyledSwitch;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BaseSwitch.styles.cjs.map

package/dist/cjs/components/BaseSwitch/BaseSwitch.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.styles.cjs","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":";;;;;;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,wDACXC,SAAAA,QAASC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACTC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAAAA,EACAC;AAKF,OAAO;AAAA,EACLC,SAASC,YAAAA,MAAMC,WAAWF;AAAAA,EAC1BG,QAAQ;AAAA,EACRC,OAAOH,YAAAA,MAAMC,WAAWE;AAAAA,EACxBC,QAAQJ,YAAAA,MAAMC,WAAWG;AAAAA,EACzBC,YAAY;AAAA,EACZC,gBAAgB;AAAA,EAChB,WAAW;AAAA,IACTC,iBAAiBP,YAAAA,MAAMC,WAAWO;AAAAA,EACpC;AAAA,EACAC,cAAcT,YAAAA,MAAMC,WAAWQ;AAAAA,EAE/B,CAAE,KAAIC,uBAAiBC,MAAM,GAAG;AAAA,IAC9BR,OAAOH,YAAAA,MAAMC,WAAWE;AAAAA,IACxBC,QAAQJ,YAAAA,MAAMC,WAAWG;AAAAA,IACzBL,SAASC,YAAAA,MAAMC,WAAWF;AAAAA,EAC5B;AAAA,EAEA,CAAE,MAAKW,uBAAiBE,YAAY,GAAG;AAAA,IACrCT,OAAOH,YAAAA,MAAMC,WAAWE;AAAAA,IACxBC,QAAQJ,YAAAA,MAAMC,WAAWG;AAAAA,IACzBL,SAASC,YAAAA,MAAMC,WAAWF;AAAAA,IAC1B,WAAW;AAAA,MACTQ,iBAAiBP,YAAAA,MAAMC,WAAWY;AAAAA,IACpC;AAAA,IACA,CAAE,KAAIH,uBAAiBI,SAAS,GAAG;AAAA,MACjCC,WAAW;AAAA,MACX,CAAE,QAAOL,uBAAiBM,OAAO,GAAG;AAAA,QAClCC,SAASjB,YAAAA,MAAMC,WAAWiB;AAAAA,QAC1BX,iBAAiBP,YAAAA,MAAMC,WAAWkB;AAAAA,MACpC;AAAA,MACA,WAAW;AAAA,QACTZ,iBAAiBP,YAAAA,MAAMC,WAAWY;AAAAA,MACpC;AAAA,IACF;AAAA,EACF;AAAA,EAEA,CAAE,IAAGH,uBAAiBM,OAAO,GAAG;AAAA,IAC9BC,SAASjB,YAAMC,MAAAA,WAAWe,MAAMC;AAAAA,IAChCR,cAAcT,YAAMC,MAAAA,WAAWe,MAAMP;AAAAA,IACrCL,QAAQJ,YAAMC,MAAAA,WAAWe,MAAMZ;AAAAA,IAC/BD,OAAOH,YAAMC,MAAAA,WAAWe,MAAMb;AAAAA,IAC9BiB,QAAQpB,YAAMC,MAAAA,WAAWe,MAAMI;AAAAA,IAC/Bb,iBAAiBP,YAAMC,MAAAA,WAAWe,MAAMT;AAAAA,EAC1C;AAAA,EAEA,CAAE,IAAGG,uBAAiBW,OAAO,GAAG;AAAA,IAC9BC,UAAU;AAAA,IACVC,MAAMvB,YAAMC,MAAAA,WAAWoB,MAAME;AAAAA,IAC7BpB,OAAOH,YAAMC,MAAAA,WAAWoB,MAAMlB;AAAAA,IAC9BC,QAAQJ,YAAMC,MAAAA,WAAWoB,MAAMjB;AAAAA,IAC/BgB,QAAQpB,YAAMC,MAAAA,WAAWoB,MAAMD;AAAAA,IAC/Bb,iBAAiBP,YAAMC,MAAAA,WAAWoB,MAAMd;AAAAA,IACxCiB,YAAYxB,YAAMC,MAAAA,WAAWoB,MAAMG;AAAAA,IACnCC,WAAWzB,YAAMC,MAAAA,WAAWoB,MAAMI;AAAAA,IAClCC,WAAW1B,YAAMC,MAAAA,WAAWoB,MAAMK;AAAAA,EACpC;AAAA,EAEA,CAAE,IAAGhB,uBAAiBiB,UAAU,GAAG;AAAA,IACjC,CAAE,MAAKjB,uBAAiBW,OAAO,GAAG;AAAA,MAChCd,iBAAiBP,YAAMC,MAAAA,WAAW0B,SAASC;AAAAA,MAC3CR,QAAQpB,YAAMC,MAAAA,WAAW0B,SAASE;AAAAA,IACpC;AAAA,IACA,CAAE,KAAInB,uBAAiBE,iBAAiBF,SAAAA,cAAiBM,OAAO,GAAG;AAAA,MACjEC,SAASjB,YAAMC,MAAAA,WAAW0B,SAASG;AAAAA,MACnCvB,iBAAiBP,YAAMC,MAAAA,WAAW0B,SAASI;AAAAA,MAC3CX,QAAQpB,YAAMC,MAAAA,WAAW0B,SAASK;AAAAA,IACpC;AAAA,EACF;AAAA,EAEA,GAAInC,aAAa;AAAA,IACf,CAAE,IAAGa,uBAAiBE,YAAY,GAAG;AAAA,MACnCV,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,GAAIN,iBAAiB;AAAA,IACnBa,cAAcT,YAAAA,MAAMC,WAAWgC;AAAAA,IAC/B,GAAGC,WAAAA;AAAAA,EACL;AAAA,EAEA,GAAIpC,aAAa;AAAA,IACf,CAAE,KAAIY,uBAAiBC,MAAM,GAAG;AAAA,MAC9BT,QAAQ;AAAA,IACV;AAAA,EACF;AACF,IAAEb,QAAAC,IAAAC,sgKACJ;;"}
+{"version":3,"file":"BaseSwitch.styles.cjs","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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"}

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
-const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const isNil = require("lodash/isNil");
 const React = require("react");
-const breadCrumbClasses = require("./breadCrumbClasses.cjs");
+const isNil = require("lodash/isNil");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const BreadCrumb_styles = require("./BreadCrumb.styles.cjs");
 const utils = require("./utils.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const PathElement = require("./PathElement/PathElement.cjs");
 const Page = require("./Page/Page.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
 const HvBreadCrumb = (props) => {
   const {
-    classes,
+    classes: classesProp,
     className,
     id,
     listRoute = [],
@@ -25,6 +24,10 @@ const HvBreadCrumb = (props) => {
     dropDownMenuProps,
     ...others
   } = useDefaultProps.useDefaultProps("HvBreadCrumb", props);
+  const {
+    classes,
+    cx
+  } = BreadCrumb_styles.useClasses(classesProp);
   const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
   let listPath = listRoute.slice();
   if (!isNil__default.default(url)) {
@@ -38,30 +41,30 @@ const HvBreadCrumb = (props) => {
     }));
   }
   const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? utils.pathWithSubMenu(id, listPath, maxVisibleElem, onClick, dropDownMenuProps) : listPath;
-  return /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledRoot, {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", {
     id,
-    className: clsx.clsx(breadCrumbClasses.default.root, classes == null ? void 0 : classes.root, className),
+    className: cx(classes.root, className),
     ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledOrderedList, {
-      className: clsx.clsx(breadCrumbClasses.default.orderedList, classes == null ? void 0 : classes.orderedList),
+    children: /* @__PURE__ */ jsxRuntime.jsx("ol", {
+      className: classes.orderedList,
       children: listPath.map((elem, index) => {
         const key = `key_${index}`;
         const isLast = index === breadcrumbPath.length - 1;
         return /* @__PURE__ */ jsxRuntime.jsx(PathElement.HvPathElement, {
           classes: {
-            centerContainer: clsx.clsx(breadCrumbClasses.default.centerContainer, classes == null ? void 0 : classes.centerContainer),
-            separatorContainer: clsx.clsx(breadCrumbClasses.default.separatorContainer, classes == null ? void 0 : classes.separatorContainer)
+            centerContainer: classes.centerContainer,
+            separatorContainer: classes.separatorContainer
           },
           last: isLast,
-          children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(BreadCrumb_styles.StyledTypography, {
-            className: clsx.clsx(breadCrumbClasses.default.currentPage, classes == null ? void 0 : classes.currentPage),
+          children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+            className: classes.currentPage,
             variant: "body",
             children: utils.removeExtension(elem.label)
           }) || /* @__PURE__ */ jsxRuntime.jsx(Page.HvPage, {
             elem,
             classes: {
-              a: clsx.clsx(breadCrumbClasses.default.a, classes == null ? void 0 : classes.a),
-              link: clsx.clsx(breadCrumbClasses.default.link, classes == null ? void 0 : classes.link)
+              a: classes.a,
+              link: classes.link
             },
             component,
             onClick
@@ -71,5 +74,6 @@ const HvBreadCrumb = (props) => {
     })
   });
 };
+exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
 exports.HvBreadCrumb = HvBreadCrumb;
 //# sourceMappingURL=BreadCrumb.cjs.map

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { isValidElement, MouseEvent } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\n\nimport breadCrumbClasses, { HvBreadCrumbClasses } from \"./breadCrumbClasses\";\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport {\n  StyledOrderedList,\n  StyledRoot,\n  StyledTypography,\n} from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(breadCrumbClasses.root, classes?.root, className)}\n      {...others}\n    >\n      <StyledOrderedList\n        className={clsx(breadCrumbClasses.orderedList, classes?.orderedList)}\n      >\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: clsx(\n                  breadCrumbClasses.centerContainer,\n                  classes?.centerContainer\n                ),\n                separatorContainer: clsx(\n                  breadCrumbClasses.separatorContainer,\n                  classes?.separatorContainer\n                ),\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <StyledTypography\n                    className={clsx(\n                      breadCrumbClasses.currentPage,\n                      classes?.currentPage\n                    )}\n                    variant=\"body\"\n                  >\n                    {removeExtension(elem.label)}\n                  </StyledTypography>\n                )) || (\n                  <HvPage\n                    elem={elem}\n                    classes={{\n                      a: clsx(breadCrumbClasses.a, classes?.a),\n                      link: clsx(breadCrumbClasses.link, classes?.link),\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </StyledOrderedList>\n    </StyledRoot>\n  );\n};\n"],"names":["HvBreadCrumb","props","classes","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","useDefaultProps","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","StyledRoot","clsx","breadCrumbClasses","root","children","StyledOrderedList","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","StyledTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;;;;;;AA0CaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY,CAAE;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBX,KAAK;AAEzC,QAAMY,iBAAiBP,cAAcA,aAAa,IAAI,IAAIA;AACtDQ,MAAAA,WAAWT,UAAUU;AAGrB,MAAA,CAACC,eAAAA,QAAMT,GAAG,GAAG;AACfO,eAAW,CAAA;AAGLG,UAAAA,UAAUV,IAAIW,MAAM,cAAc;AAGxC,UAAMC,mBAAmBZ,IAAIa,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACE/B,IACAU,UACAD,gBACAL,SACAE,iBACF,IACAI;AAEN,wCACGsB,kBAAAA,YAAU;AAAA,IACThC;AAAAA,IACAD,WAAWkC,KAAKC,KAAAA,kBAAAA,QAAkBC,MAAMrC,mCAASqC,MAAMpC,SAAS;AAAA,IAAE,GAC9DQ;AAAAA,IAAM6B,yCAETC,qCAAiB;AAAA,MAChBtC,WAAWkC,KAAAA,KAAKC,kBAAAA,QAAkBI,aAAaxC,mCAASwC,WAAW;AAAA,MAAEF,UAEpE1B,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMgB,MAAO,OAAMhB;AACbiB,cAAAA,SAASjB,UAAUM,eAAeC,SAAS;AAEjD,8CACGW,YAAAA,eAAa;AAAA,UACZ3C,SAAS;AAAA,YACP4C,iBAAiBT,KAAAA,KACfC,kBAAAA,QAAkBQ,iBAClB5C,mCAAS4C,eACX;AAAA,YACAC,oBAAoBV,KAAAA,KAClBC,kBAAAA,QAAkBS,oBAClB7C,mCAAS6C,kBACX;AAAA,UACF;AAAA,UAEAC,MAAMJ;AAAAA,UAAOJ,UAEXS,MAAevB,eAAAA,IAAI,KAAKA,QACvBkB,yCACEM,oCAAgB;AAAA,YACf/C,WAAWkC,KAAAA,KACTC,kBAAAA,QAAkBa,aAClBjD,mCAASiD,WACX;AAAA,YACAC,SAAQ;AAAA,YAAMZ,UAEba,MAAAA,gBAAgB3B,KAAKG,KAAK;AAAA,UAAA,CACX,KAElByB,2BAAAA,IAACC,aAAM;AAAA,YACL7B;AAAAA,YACAxB,SAAS;AAAA,cACPsD,GAAGnB,KAAAA,KAAKC,kBAAAA,QAAkBkB,GAAGtD,mCAASsD,CAAC;AAAA,cACvCC,MAAMpB,KAAAA,KAAKC,kBAAAA,QAAkBmB,MAAMvD,mCAASuD,IAAI;AAAA,YAClD;AAAA,YACAhD;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAvBAmC,GAyBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACgB;AAAA,EAAA,CACT;AAEhB;;"}
+{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement, MouseEvent } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["HvBreadCrumb","props","classes","classesProp","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","useDefaultProps","cx","useClasses","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","root","children","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","last","isValidElement","HvTypography","currentPage","variant","removeExtension","_jsx","HvPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY,CAAE;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBZ,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWZ,WAAW;AAE9C,QAAMa,iBAAiBT,cAAcA,aAAa,IAAI,IAAIA;AACtDU,MAAAA,WAAWX,UAAUY;AAGrB,MAAA,CAACC,eAAAA,QAAMX,GAAG,GAAG;AACfS,eAAW,CAAA;AAGLG,UAAAA,UAAUZ,IAAIa,MAAM,cAAc;AAGxC,UAAMC,mBAAmBd,IAAIe,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,WAAWI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG;AAAA,IAC3D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACEjC,IACAY,UACAD,gBACAP,SACAE,iBACF,IACAM;AAEN,wCACE,OAAA;AAAA,IAAKZ;AAAAA,IAAQD,WAAWU,GAAGZ,QAAQqC,MAAMnC,SAAS;AAAA,IAAE,GAAKQ;AAAAA,IAAM4B,yCAC7D,MAAA;AAAA,MAAIpC,WAAWF,QAAQuC;AAAAA,MAAYD,UAChCvB,SAASW,IAAI,CAACC,MAAMC,UAAU;AAC7B,cAAMY,MAAO,OAAMZ;AACba,cAAAA,SAASb,UAAUM,eAAeC,SAAS;AAEjD,8CACGO,YAAAA,eAAa;AAAA,UACZ1C,SAAS;AAAA,YACP2C,iBAAiB3C,QAAQ2C;AAAAA,YACzBC,oBAAoB5C,QAAQ4C;AAAAA,UAC9B;AAAA,UAEAC,MAAMJ;AAAAA,UAAOH,UAEXQ,MAAenB,eAAAA,IAAI,KAAKA,QACvBc,yCACEM,yBAAY;AAAA,YAAC7C,WAAWF,QAAQgD;AAAAA,YAAaC,SAAQ;AAAA,YAAMX,UACzDY,MAAAA,gBAAgBvB,KAAKG,KAAK;AAAA,UAAA,CACf,KAEdqB,2BAAAA,IAACC,aAAM;AAAA,YACLzB;AAAAA,YACA3B,SAAS;AAAA,cACPqD,GAAGrD,QAAQqD;AAAAA,cACXC,MAAMtD,QAAQsD;AAAAA,YAChB;AAAA,YACA9C;AAAAA,YACAD;AAAAA,UAAAA,CACD;AAAA,WAjBAiC,GAmBQ;AAAA,MAAA,CAElB;AAAA,IAAA,CACC;AAAA,EAAA,CACD;AAET;;;"}