@hitachivantara/uikit-react-core 5.22.1 → 5.24.0

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const clsx = require("clsx");
 const React = require("react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
+const MuiCheckbox = require("@mui/material/Checkbox");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
-const baseCheckBoxClasses = require("./baseCheckBoxClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
 const getSelectorIcons = (options, classes) => {
   const {
     disabled,
@@ -16,37 +18,42 @@ const getSelectorIcons = (options, classes) => {
   return {
     checkbox: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
       color,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     }),
     checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxPartial, {
       color,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     }),
     checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, {
       color: checkedColor,
-      className: clsx.clsx(classes == null ? void 0 : classes.icon, baseCheckBoxClasses.default.icon)
+      className: classes.icon
     })
   };
 };
-const HvBaseCheckBox = ({
-  id,
-  classes,
-  className,
-  name,
-  inputProps,
-  onChange,
-  onFocusVisible,
-  onBlur,
-  checked,
-  indeterminate,
-  defaultChecked,
-  value = "on",
-  required = false,
-  readOnly = false,
-  disabled = false,
-  semantic = false,
-  ...others
-}) => {
+const HvBaseCheckBox = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    name,
+    inputProps,
+    onChange,
+    onFocusVisible,
+    onBlur,
+    checked,
+    indeterminate,
+    defaultChecked,
+    value = "on",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    semantic = false,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvBaseCheckBox", props);
+  const {
+    classes,
+    cx
+  } = BaseCheckBox_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
   const icons = getSelectorIcons({
     disabled,
@@ -66,12 +73,14 @@ const HvBaseCheckBox = ({
     setFocusVisible(true);
     onFocusVisible == null ? void 0 : onFocusVisible(event);
   }, [onFocusVisible]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseCheckBox_styles.StyledCheckedBox, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, {
     id,
     name,
     value,
-    className: clsx.clsx(className, baseCheckBoxClasses.default.root, classes == null ? void 0 : classes.root, disabled && clsx.clsx(baseCheckBoxClasses.default.disabled, classes == null ? void 0 : classes.disabled), focusVisible && clsx.clsx(baseCheckBoxClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
-    $focusVisible: focusVisible,
+    className: cx(classes.root, {
+      [classes.disabled]: disabled,
+      [classes.focusVisible]: focusVisible
+    }, className),
     icon: icons.checkbox,
     indeterminateIcon: icons.checkboxPartial,
     checkedIcon: icons.checkboxChecked,
@@ -90,5 +99,6 @@ const HvBaseCheckBox = ({
     ...others
   });
 };
+exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = HvBaseCheckBox;
 //# sourceMappingURL=BaseCheckBox.cjs.map

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { CheckboxProps as MuiCheckboxProps } from \"@mui/material\";\n\nimport { clsx } from \"clsx\";\n\nimport React, { useCallback, useState } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledCheckedBox } from \"./BaseCheckBox.styles\";\nimport baseCheckBoxClasses, {\n  HvBaseCheckBoxClasses,\n} from \"./baseCheckBoxClasses\";\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\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 checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox 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   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes?: HvBaseCheckBoxClasses\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  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: (\n      <CheckboxIcon\n        color={color}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n    checkboxPartial: (\n      <CheckboxPartialIcon\n        color={color}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon\n        color={checkedColor}\n        className={clsx(classes?.icon, baseCheckBoxClasses.icon)}\n      />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = ({\n  id,\n  classes,\n  className,\n  name,\n  inputProps,\n  onChange,\n  onFocusVisible,\n  onBlur,\n  checked,\n  indeterminate,\n  defaultChecked,\n  value = \"on\",\n  required = false,\n  readOnly = false,\n  disabled = false,\n  semantic = false,\n  ...others\n}: HvBaseCheckBoxProps) => {\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <StyledCheckedBox\n      id={id}\n      name={name}\n      value={value}\n      className={clsx(\n        className,\n        baseCheckBoxClasses.root,\n        classes?.root,\n        disabled && clsx(baseCheckBoxClasses.disabled, classes?.disabled),\n        focusVisible &&\n          clsx(baseCheckBoxClasses.focusVisible, classes?.focusVisible)\n      )}\n      $focusVisible={focusVisible}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","className","clsx","icon","baseCheckBoxClasses","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","id","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","StyledCheckedBox","root","$focusVisible","indeterminateIcon","checkedIcon","disableRipple"],"mappings":";;;;;;;;AA4FA,MAAMA,mBAAmBA,CACvBC,SAIAC,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;AAGK,SAAA;AAAA,IACLE,yCACGC,0BAAY;AAAA,MACXJ;AAAAA,MACAK,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,IAEHE,gDACGC,iCAAmB;AAAA,MAClBV;AAAAA,MACAK,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,IAEHI,gDACGC,+BAAiB;AAAA,MAChBZ,OAAOE;AAAAA,MACPG,WAAWC,KAAAA,KAAKT,mCAASU,MAAMC,oBAAAA,QAAoBD,IAAI;AAAA,IAAA,CACxD;AAAA,EAAA;AAGP;AAQO,MAAMM,iBAAiBA,CAAC;AAAA,EAC7BC;AAAAA,EACAjB;AAAAA,EACAQ;AAAAA,EACAU;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,WAAW;AAAA,EACX3B,WAAW;AAAA,EACXC,WAAW;AAAA,EACX,GAAG2B;AACgB,MAAM;AACzB,QAAM,CAACC,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQnC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDkC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIR,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWgB,OAAOA,MAAMC,OAAOd,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMY,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBT,qCAASc;AAAAA,EAAK,GAEhB,CAACd,MAAM,CACT;AAEMiB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBV,qDAAiBe;AAAAA,EAAK,GAExB,CAACf,cAAc,CACjB;AAEA,wCACGmB,oBAAAA,kBAAgB;AAAA,IACfvB;AAAAA,IACAC;AAAAA,IACAQ;AAAAA,IACAlB,WAAWC,KAAAA,KACTD,WACAG,oBAAAA,QAAoB8B,MACpBzC,mCAASyC,MACTxC,YAAYQ,UAAKE,oBAAAA,QAAoBV,UAAUD,mCAASC,QAAQ,GAChE6B,gBACErB,KAAAA,KAAKE,oBAAAA,QAAoBmB,cAAc9B,mCAAS8B,YAAY,CAChE;AAAA,IACAY,eAAeZ;AAAAA,IACfpB,MAAMuB,MAAM3B;AAAAA,IACZqC,mBAAmBV,MAAMrB;AAAAA,IACzBgC,aAAaX,MAAMnB;AAAAA,IACnBb;AAAAA,IACA0B;AAAAA,IACAC;AAAAA,IACAL;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAL;AAAAA,IACAC,UAAUc;AAAAA,IACVb,gBAAgBkB;AAAAA,IAChBjB,QAAQgB;AAAAA,IACRnC,OAAM;AAAA,IACN0C,eAAa;AAAA,IAAA,GACThB;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\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 checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox 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   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\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  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = (props: HvBaseCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","CheckboxIcon","className","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","props","id","classesProp","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root","indeterminateIcon","checkedIcon","disableRipple"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,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;AAGK,SAAA;AAAA,IACLE,yCAAWC,0BAAY;AAAA,MAACJ;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IAChEC,gDACGC,iCAAmB;AAAA,MAACR;AAAAA,MAAcK,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,IAE/DG,gDACGC,+BAAiB;AAAA,MAACV,OAAOE;AAAAA,MAAcG,WAAWR,QAAQS;AAAAA,IAAAA,CAAO;AAAA,EAAA;AAGxE;AAQaK,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAhB,SAASiB;AAAAA,IACTT;AAAAA,IACAU;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX3B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG2B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBf,KAAK;AAErC,QAAA;AAAA,IAAEf;AAAAA,IAAS+B;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWf,WAAW;AAE9C,QAAM,CAACgB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQtC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDqC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAEA,wCACGsB,qBAAAA,SAAW;AAAA,IACV3B;AAAAA,IACAE;AAAAA,IACAQ;AAAAA,IACAlB,WAAWuB,GACT/B,QAAQ4C,MACR;AAAA,MAAE,CAAC5C,QAAQC,QAAQ,GAAGA;AAAAA,MAAU,CAACD,QAAQiC,YAAY,GAAGA;AAAAA,OACxDzB,SACF;AAAA,IACAC,MAAM2B,MAAM9B;AAAAA,IACZuC,mBAAmBT,MAAM1B;AAAAA,IACzBoC,aAAaV,MAAMxB;AAAAA,IACnBX;AAAAA,IACA0B;AAAAA,IACAC;AAAAA,IACAL;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAL;AAAAA,IACAC,UAAUiB;AAAAA,IACVhB,gBAAgBqB;AAAAA,IAChBpB,QAAQmB;AAAAA,IACRtC,OAAM;AAAA,IACN4C,eAAa;AAAA,IAAA,GACTlB;AAAAA,EAAAA,CACL;AAEL;;;"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -1,49 +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 transientOptions = require("../../utils/transientOptions.cjs");
 const focusUtils = require("../../utils/focusUtils.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 StyledCheckedBox = /* @__PURE__ */ _styled__default.default(material.Checkbox, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "edk6te40"
-}, transientOptions.transientOptions) : _extends({}, {
-  target: "edk6te40",
-  label: "StyledCheckedBox"
-}, transientOptions.transientOptions))(({
-  $focusVisible
-}) => ({
-  padding: 0,
-  borderRadius: uikitStyles.theme.baseCheckBox.borderRadius,
-  cursor: "pointer",
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.baseCheckBox.hoverColor
-  },
-  ...$focusVisible && {
-    "& svg": {
-      ...focusUtils.outlineStyles
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvBaseCheckBox", {
+  root: {
+    padding: 0,
+    borderRadius: uikitStyles.theme.baseCheckBox.borderRadius,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.baseCheckBox.hoverColor
     }
   },
-  // Override Mui styling: https://mui.com/material-ui/api/checkbox/#css
-  [`&.${material.checkboxClasses.disabled}`]: {
-    // Ensure more specificity than .MuiButtonBase-root.Mui-disabled and .MuiIconButton-root.Mui-disabled
-    [`&.${material.checkboxClasses.root}`]: {
+  disabled: {
+    "&$root": {
       cursor: "not-allowed",
       pointerEvents: "initial"
     },
@@ -52,7 +25,14 @@ const StyledCheckedBox = /* @__PURE__ */ _styled__default.default(material.Check
         fill: uikitStyles.theme.colors.secondary_60
       }
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUNoZWNrQm94L0Jhc2VDaGVja0JveC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWWdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvQmFzZUNoZWNrQm94L0Jhc2VDaGVja0JveC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGVja2JveCBhcyBNdWlDaGVja0JveCxcbiAgY2hlY2tib3hDbGFzc2VzIGFzIE11aUNoZWNrQm94Q2xhc3Nlcyxcbn0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5pbXBvcnQgeyBvdXRsaW5lU3R5bGVzIH0gZnJvbSBcIkBjb3JlL3V0aWxzL2ZvY3VzVXRpbHNcIjtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZENoZWNrZWRCb3ggPSBzdHlsZWQoXG4gIE11aUNoZWNrQm94LFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmb2N1c1Zpc2libGUgfTogeyAkZm9jdXNWaXNpYmxlOiBib29sZWFuIH0pID0+ICh7XG4gIHBhZGRpbmc6IDAsXG4gIGJvcmRlclJhZGl1czogdGhlbWUuYmFzZUNoZWNrQm94LmJvcmRlclJhZGl1cyxcbiAgY3Vyc29yOiBcInBvaW50ZXJcIixcbiAgXCImOmhvdmVyXCI6IHtcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmJhc2VDaGVja0JveC5ob3ZlckNvbG9yLFxuICB9LFxuXG4gIC4uLigkZm9jdXNWaXNpYmxlICYmIHtcbiAgICBcIiYgc3ZnXCI6IHtcbiAgICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gICAgfSxcbiAgfSksXG5cbiAgLy8gT3ZlcnJpZGUgTXVpIHN0eWxpbmc6IGh0dHBzOi8vbXVpLmNvbS9tYXRlcmlhbC11aS9hcGkvY2hlY2tib3gvI2Nzc1xuICBbYCYuJHtNdWlDaGVja0JveENsYXNzZXMuZGlzYWJsZWR9YF06IHtcbiAgICAvLyBFbnN1cmUgbW9yZSBzcGVjaWZpY2l0eSB0aGFuIC5NdWlCdXR0b25CYXNlLXJvb3QuTXVpLWRpc2FibGVkIGFuZCAuTXVpSWNvbkJ1dHRvbi1yb290Lk11aS1kaXNhYmxlZFxuICAgIFtgJi4ke011aUNoZWNrQm94Q2xhc3Nlcy5yb290fWBdOiB7XG4gICAgICBjdXJzb3I6IFwibm90LWFsbG93ZWRcIixcbiAgICAgIHBvaW50ZXJFdmVudHM6IFwiaW5pdGlhbFwiLFxuICAgIH0sXG5cbiAgICBcIiYgc3ZnXCI6IHtcbiAgICAgIFwiJiBwYXRoOm50aC1vZi10eXBlKDIpXCI6IHtcbiAgICAgICAgZmlsbDogdGhlbWUuY29sb3JzLnNlY29uZGFyeV82MCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
-exports.StyledCheckedBox = StyledCheckedBox;
+  },
+  focusVisible: {
+    "& svg": {
+      ...focusUtils.outlineStyles
+    }
+  },
+  icon: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=BaseCheckBox.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import {\n  Checkbox as MuiCheckBox,\n  checkboxClasses as MuiCheckBoxClasses,\n} from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const StyledCheckedBox = styled(\n  MuiCheckBox,\n  transientOptions\n)(({ $focusVisible }: { $focusVisible: boolean }) => ({\n  padding: 0,\n  borderRadius: theme.baseCheckBox.borderRadius,\n  cursor: \"pointer\",\n  \"&:hover\": {\n    backgroundColor: theme.baseCheckBox.hoverColor,\n  },\n\n  ...($focusVisible && {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  }),\n\n  // Override Mui styling: https://mui.com/material-ui/api/checkbox/#css\n  [`&.${MuiCheckBoxClasses.disabled}`]: {\n    // Ensure more specificity than .MuiButtonBase-root.Mui-disabled and .MuiIconButton-root.Mui-disabled\n    [`&.${MuiCheckBoxClasses.root}`]: {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n}));\n"],"names":["StyledCheckedBox","MuiCheckBox","process","env","NODE_ENV","_extends","target","transientOptions","label","$focusVisible","padding","borderRadius","theme","baseCheckBox","cursor","backgroundColor","hoverColor","outlineStyles","MuiCheckBoxClasses","disabled","root","pointerEvents","fill","colors","secondary_60"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,4DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,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,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,EACjCG,QAAQ;AAAA,EACR,WAAW;AAAA,IACTC,iBAAiBH,YAAAA,MAAMC,aAAaG;AAAAA,EACtC;AAAA,EAEA,GAAIP,iBAAiB;AAAA,IACnB,SAAS;AAAA,MACP,GAAGQ,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAGA,CAAE,KAAIC,yBAAmBC,UAAU,GAAG;AAAA;AAAA,IAEpC,CAAE,KAAID,yBAAmBE,MAAM,GAAG;AAAA,MAChCN,QAAQ;AAAA,MACRO,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMV,YAAAA,MAAMW,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AACF,IAAEtB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qiEAAA;;"}
+{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.styles.ts"],"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(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.baseCheckBox.borderRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.baseCheckBox.hoverColor,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","borderRadius","theme","baseCheckBox","cursor","backgroundColor","hoverColor","disabled","pointerEvents","fill","colors","secondary_60","focusVisible","outlineStyles","icon"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQ;AAAA,IACR,WAAW;AAAA,MACTC,iBAAiBH,YAAAA,MAAMC,aAAaG;AAAAA,IACtC;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACR,UAAU;AAAA,MACRH,QAAQ;AAAA,MACRI,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvBC,MAAMP,YAAAA,MAAMQ,OAAOC;AAAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM,CAAC;AACT,CAAC;;;"}

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const reactDom = require("react-dom");
-const clsx = require("clsx");
 const material = require("@mui/material");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
@@ -12,40 +11,47 @@ const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const useForkRef = require("../../hooks/useForkRef.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");
+const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
 const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
-const baseDropdownClasses = require("./baseDropdownClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.cjs");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
-const HvBaseDropdown = ({
-  id,
-  className,
-  classes,
-  children,
-  role,
-  placeholder,
-  component,
-  adornment,
-  expanded,
-  dropdownHeaderProps,
-  defaultExpanded = false,
-  disabled = false,
-  readOnly = false,
-  disablePortal = false,
-  variableWidth = false,
-  placement = "right",
-  popperProps = {},
-  dropdownHeaderRef: dropdownHeaderRefProp,
-  onToggle,
-  onClickOutside,
-  onContainerCreation,
-  ...others
-}) => {
+const HvBaseDropdown = (props) => {
   var _a;
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    role,
+    placeholder,
+    component,
+    adornment,
+    expanded,
+    dropdownHeaderProps,
+    defaultExpanded = false,
+    disabled = false,
+    readOnly = false,
+    disablePortal = false,
+    variableWidth = false,
+    placement = "right",
+    popperProps = {},
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    onToggle,
+    onClickOutside,
+    onContainerCreation,
+    "aria-expanded": ariaExpandedProp,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvBaseDropdown", props);
+  const {
+    classes,
+    cx
+  } = BaseDropdown_styles.useClasses(classesProp);
   const {
     rootId
   } = useTheme.useTheme();
@@ -56,6 +62,7 @@ const HvBaseDropdown = ({
   const handleDropdownHeaderRefProp = useForkRef.useForkRef(dropdownHeaderRefProp, dropdownHeaderProps == null ? void 0 : dropdownHeaderProps.ref);
   const handleDropdownHeaderRef = useForkRef.useForkRef(setReferenceElement, handleDropdownHeaderRefProp);
   const ariaRole = role || (component == null ? "combobox" : void 0);
+  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const elementId = useUniqueId.useUniqueId(id, "hvbasedropdown");
   const bottom = placement && `bottom-${placement === "right" ? "start" : "end"}`;
   const extensionWidth = referenceElement ? referenceElement == null ? void 0 : referenceElement.offsetWidth : "inherit";
@@ -168,18 +175,20 @@ const HvBaseDropdown = ({
   const headerComponent = (() => {
     if (component) {
       return React__default.default.cloneElement(component, {
-        ref: handleDropdownHeaderRef
+        ref: handleDropdownHeaderRef,
+        "aria-controls": isOpen ? setId.setId(elementId, "children-container") : void 0
       });
     }
     const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
-    return /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown_styles.StyledHeaderRoot, {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       id: setId.setId(id, "header"),
-      className: clsx.clsx(baseDropdownClasses.default.header, classes == null ? void 0 : classes.header, disabled && clsx.clsx(baseDropdownClasses.default.headerDisabled, classes == null ? void 0 : classes.headerDisabled), readOnly && clsx.clsx(baseDropdownClasses.default.headerReadOnly, classes == null ? void 0 : classes.headerReadOnly), isOpen && clsx.clsx(baseDropdownClasses.default.headerOpen, classes == null ? void 0 : classes.headerOpen), isOpen && popperPlacement.includes("top") && clsx.clsx(baseDropdownClasses.default.headerOpenUp, classes == null ? void 0 : classes.headerOpenUp), isOpen && popperPlacement.includes("bottom") && clsx.clsx(baseDropdownClasses.default.headerOpenDown, classes == null ? void 0 : classes.headerOpenDown)),
-      $disabled: disabled,
-      $readOnly: readOnly,
-      $opened: isOpen,
-      $openedUp: isOpen && popperPlacement.includes("top"),
-      $openedDown: isOpen && popperPlacement.includes("bottom"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+      }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
       style: disabled || readOnly ? {
         pointerEvents: "none"
@@ -190,19 +199,21 @@ const HvBaseDropdown = ({
       tabIndex: disabled ? -1 : 0,
       ref: handleDropdownHeaderRef,
       ...dropdownHeaderProps,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledSelection, {
-        className: clsx.clsx(baseDropdownClasses.default.selection, classes == null ? void 0 : classes.selection),
-        children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledPlaceholder, {
-          className: clsx.clsx(baseDropdownClasses.default.placeholder, classes == null ? void 0 : classes.placeholder, disabled && clsx.clsx(baseDropdownClasses.default.selectionDisabled, classes == null ? void 0 : classes.selectionDisabled)),
-          $disabled: disabled,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.selection,
+        children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+          className: cx(classes.placeholder, {
+            [classes.selectionDisabled]: disabled
+          }),
           variant: "body",
           children: placeholder
         }) : placeholder
-      }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledAdornment, {
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        className: classes.arrowContainer,
         children: adornment || /* @__PURE__ */ jsxRuntime.jsx(ExpanderComponent, {
           iconSize: "XS",
           color: disabled ? uikitStyles.theme.colors.secondary_60 : void 0,
-          className: clsx.clsx(baseDropdownClasses.default.arrow, classes == null ? void 0 : classes.arrow)
+          className: classes.arrow
         })
       })]
     });
@@ -229,42 +240,41 @@ const HvBaseDropdown = ({
         onToggle == null ? void 0 : onToggle(event, false);
       }
     };
-    const container = /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledContainer, {
+    const container = /* @__PURE__ */ jsxRuntime.jsx("div", {
       role: "tooltip",
       ref: setPopperElement,
-      className: clsx.clsx(baseDropdownClasses.default.container, classes == null ? void 0 : classes.container),
+      className: classes.container,
       style: popperStyles.popper,
       ...attributes.popper,
       children: /* @__PURE__ */ jsxRuntime.jsx(material.ClickAwayListener, {
         onClickAway: handleOutside,
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
           onKeyDown: handleContainerKeyDown,
-          children: [popperPlacement.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledExtension, {
+          children: [popperPlacement.includes("bottom") && /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
               width: extensionWidth
             },
-            className: clsx.clsx(baseDropdownClasses.default.inputExtensionOpen, classes == null ? void 0 : classes.inputExtensionOpen, popperPlacement.includes("end") && clsx.clsx(baseDropdownClasses.default.inputExtensionLeftPosition, classes == null ? void 0 : classes.inputExtensionLeftPosition)),
-            $leftPosition: popperPlacement.includes("end"),
-            $openShadow: false,
-            $floatLeft: false,
-            $floatRight: false
+            className: cx(classes.inputExtensionOpen, {
+              [classes.inputExtensionLeftPosition]: popperPlacement.includes("end")
+            })
           }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdownContext.default.Provider, {
             value: popperMaxSize,
-            children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledPanel, {
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", {
               id: setId.setId(elementId, "children-container"),
-              className: clsx.clsx(baseDropdownClasses.default.panel, classes == null ? void 0 : classes.panel),
-              $popperPlacement: popperPlacement.includes("top") ? "top" : "bottom",
+              className: cx(classes.panel, {
+                [classes.panelOpenedUp]: popperPlacement.includes("top"),
+                [classes.panelOpenedDown]: popperPlacement.includes("bottom")
+              }),
               children
             })
-          }), popperPlacement.includes("top") && /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledExtension, {
+          }), popperPlacement.includes("top") && /* @__PURE__ */ jsxRuntime.jsx("div", {
             style: {
               width: extensionWidth
             },
-            className: clsx.clsx(baseDropdownClasses.default.inputExtensionOpen, classes == null ? void 0 : classes.inputExtensionOpen, baseDropdownClasses.default.inputExtensionOpenShadow, classes == null ? void 0 : classes.inputExtensionOpenShadow, popperPlacement.includes("end") && clsx.clsx(baseDropdownClasses.default.inputExtensionFloatRight, classes == null ? void 0 : classes.inputExtensionFloatRight), popperPlacement.includes("start") && clsx.clsx(baseDropdownClasses.default.inputExtensionFloatLeft, classes == null ? void 0 : classes.inputExtensionFloatLeft)),
-            $leftPosition: false,
-            $openShadow: true,
-            $floatLeft: popperPlacement.includes("start"),
-            $floatRight: popperPlacement.includes("end")
+            className: cx(classes.inputExtensionOpen, classes.inputExtensionOpenShadow, {
+              [classes.inputExtensionFloatRight]: popperPlacement.includes("end"),
+              [classes.inputExtensionFloatLeft]: popperPlacement.includes("start")
+            })
           })]
         })
       })
@@ -273,15 +283,16 @@ const HvBaseDropdown = ({
       return container;
     return reactDom.createPortal(container, document.getElementById(rootId || "") || document.body);
   })();
-  return /* @__PURE__ */ jsxRuntime.jsxs(BaseDropdown_styles.StyledRoot, {
-    className: clsx.clsx(baseDropdownClasses.default.root, classes == null ? void 0 : classes.root),
-    children: [/* @__PURE__ */ jsxRuntime.jsx(BaseDropdown_styles.StyledAnchor, {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes.root,
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       id,
       role: ariaRole,
-      "aria-expanded": !!isOpen,
+      "aria-expanded": ariaExpanded,
       "aria-owns": isOpen ? setId.setId(elementId, "children-container") : void 0,
-      className: clsx.clsx(className, baseDropdownClasses.default.anchor, classes == null ? void 0 : classes.anchor, disabled && clsx.clsx(baseDropdownClasses.default.rootDisabled, classes == null ? void 0 : classes.rootDisabled)),
-      $disabled: disabled,
+      className: cx(classes.anchor, {
+        [classes.rootDisabled]: disabled
+      }, className),
       ...!readOnly && {
         onKeyDown: handleToggle,
         onClick: handleToggle
@@ -293,5 +304,6 @@ const HvBaseDropdown = ({
     }), isOpen && containerComponent]
   });
 };
+exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
 exports.HvBaseDropdown = HvBaseDropdown;
 //# sourceMappingURL=BaseDropdown.cjs.map