@hitachivantara/uikit-react-core 5.89.0 → 5.91.0

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -12,12 +12,14 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
   warning: {},
   error: {},
   default: {},
+  info: {},
+  accent: {},
   message: {
     gap: theme.space.xs,
     padding: theme.spacing("xs", 0),
     paddingLeft: theme.space.sm,
     ...theme.typography.body,
-    color: theme.colors.base_dark
+    color: theme.colors.textDark
   },
   action: {
     padding: theme.space.xs,

package/dist/esm/Banner/BannerContent/BannerContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.styles.js","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    width: \"100%\",\n    position: \"relative\",\n    gap: theme.space.xs,\n    borderRadius: theme.radii.none,\n  },\n  success: {},\n  warning: {},\n  error: {},\n  default: {},\n  message: {\n    gap: theme.space.xs,\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n    ...theme.typography.body,\n    color: theme.colors.base_dark,\n  },\n  action: {\n    padding: theme.space.xs,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  messageContainer: {\n    maxWidth: 700,\n  },\n  iconContainer: {\n    marginLeft: theme.spacing(-1),\n  },\n  messageActions: {\n    flex: \"0 0 auto\",\n  },\n  actionContainer: {},\n  closeAction: {},\n  /** @deprecated use ´classes.root` instead */\n  baseVariant: {},\n  /** @deprecated use `classes.root` instead */\n  outContainer: {},\n  /** @deprecated use `classes.actionContainer` instead */\n  actionsInnerContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS,CAAC;AAAA,EACV,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,SAAS;AAAA,IACP,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAa,MAAM,MAAM;AAAA,IACzB,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,MAAM;AAAA,IACrB,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,QAAQ,EAAE;AAAA,EAC9B;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,aAAa,CAAC;AAAA;AAAA,EAEd,aAAa,CAAC;AAAA;AAAA,EAEd,cAAc,CAAC;AAAA;AAAA,EAEf,uBAAuB,CAAA;AACzB,CAAC;"}
+{"version":3,"file":"BannerContent.styles.js","sources":["../../../../src/Banner/BannerContent/BannerContent.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBannerContent\", {\n  root: {\n    minWidth: \"100%\",\n    width: \"100%\",\n    position: \"relative\",\n    gap: theme.space.xs,\n    borderRadius: theme.radii.none,\n  },\n  success: {},\n  warning: {},\n  error: {},\n  default: {},\n  info: {},\n  accent: {},\n  message: {\n    gap: theme.space.xs,\n    padding: theme.spacing(\"xs\", 0),\n    paddingLeft: theme.space.sm,\n    ...theme.typography.body,\n    color: theme.colors.textDark,\n  },\n  action: {\n    padding: theme.space.xs,\n    flex: \"0 0 auto\",\n    placeSelf: \"stretch\",\n  },\n  messageContainer: {\n    maxWidth: 700,\n  },\n  iconContainer: {\n    marginLeft: theme.spacing(-1),\n  },\n  messageActions: {\n    flex: \"0 0 auto\",\n  },\n  actionContainer: {},\n  closeAction: {},\n  /** @deprecated use ´classes.root` instead */\n  baseVariant: {},\n  /** @deprecated use `classes.root` instead */\n  outContainer: {},\n  /** @deprecated use `classes.actionContainer` instead */\n  actionsInnerContainer: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,SAAS,CAAC;AAAA,EACV,SAAS,CAAC;AAAA,EACV,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,CAAC;AAAA,EACT,SAAS;AAAA,IACP,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,QAAQ,MAAM,CAAC;AAAA,IAC9B,aAAa,MAAM,MAAM;AAAA,IACzB,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,MAAM;AAAA,IACrB,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,QAAQ,EAAE;AAAA,EAC9B;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM;AAAA,EACR;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB,aAAa,CAAC;AAAA;AAAA,EAEd,aAAa,CAAC;AAAA;AAAA,EAEd,cAAc,CAAC;AAAA;AAAA,EAEf,uBAAuB,CAAA;AACzB,CAAC;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -5,12 +5,10 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
 import { Check, Partial, Box } from "./icons.js";
-const getSelectorIcons = () => {
-  return {
-    checkbox: /* @__PURE__ */ jsx(Box, {}),
-    checkboxPartial: /* @__PURE__ */ jsx(Partial, {}),
-    checkboxChecked: /* @__PURE__ */ jsx(Check, {})
-  };
+const icons = {
+  checkbox: /* @__PURE__ */ jsx(Box, {}),
+  checkboxPartial: /* @__PURE__ */ jsx(Partial, {}),
+  checkboxChecked: /* @__PURE__ */ jsx(Check, {})
 };
 const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
@@ -34,7 +32,6 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
   } = useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
-  const icons = getSelectorIcons();
   const onChangeCallback = useCallback(
     (event) => {
       if (readOnly) {

package/dist/esm/BaseCheckBox/BaseCheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\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  return {\n    checkbox: <Box />,\n    checkboxPartial: <Partial />,\n    checkboxChecked: <Check />,\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 = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>(function HvBaseCheckBox(props, ref) {\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();\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      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n        },\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      {...others}\n    />\n  );\n});\n"],"names":["HvBaseCheckBox"],"mappings":";;;;;;;AAwFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,8BAAW,KAAI,EAAA;AAAA,IACf,qCAAkB,SAAQ,EAAA;AAAA,IAC1B,qCAAkB,OAAM,CAAA,CAAA;AAAA,EAC1B;AACF;AAQO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB;AAE/B,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MAAA;AAGF,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\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 icons = {\n  checkbox: <Box />,\n  checkboxPartial: <Partial />,\n  checkboxChecked: <Check />,\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 = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>(function HvBaseCheckBox(props, ref) {\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 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      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n        },\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      {...others}\n    />\n  );\n});\n"],"names":["HvBaseCheckBox"],"mappings":";;;;;;;AAwFA,MAAM,QAAQ;AAAA,EACZ,8BAAW,KAAI,EAAA;AAAA,EACf,qCAAkB,SAAQ,EAAA;AAAA,EAC1B,qCAAkB,OAAM,CAAA,CAAA;AAC1B;AAQO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MAAA;AAGF,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js

@@ -10,14 +10,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     borderRadius: theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+      backgroundColor: theme.colors.bgHover,
+      borderRadius: theme.radii.round
     },
     "& svg": {
       width: 16,
       height: 16,
-      color: theme.colors.atmo1,
-      borderRadius: theme.radii.none,
-      border: `1px solid ${theme.colors.secondary}`
+      color: theme.colors.bgContainer,
+      borderRadius: theme.radii.base,
+      border: `1px solid ${theme.colors.borderStrong}`
     }
   },
   disabled: {
@@ -25,9 +26,12 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
       cursor: "not-allowed",
       pointerEvents: "initial",
       "& svg": {
-        color: theme.colors.atmo3,
-        borderColor: theme.colors.secondary_60,
-        backgroundColor: theme.colors.atmo3
+        color: theme.colors.bgDisabled,
+        borderColor: theme.colors.borderDisabled,
+        backgroundColor: theme.colors.bgDisabled
+      },
+      "&:hover": {
+        backgroundColor: "transparent"
       }
     }
   },
@@ -39,36 +43,33 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${theme.colors.secondary}`,
-      backgroundColor: theme.colors.secondary,
-      color: theme.colors.atmo1
+      borderColor: "transparent",
+      backgroundColor: theme.colors.primaryStrong,
+      color: theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        color: theme.colors.secondary_60
+        color: theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   indeterminate: {
     "& svg": {
-      color: theme.colors.secondary
+      color: theme.colors.textSubtle
     },
     "&$disabled": {
       "& svg": {
-        color: theme.colors.secondary_60
+        color: theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   semantic: {
-    "& svg": {
-      border: `1px solid ${theme.colors.base_dark}`,
-      color: theme.colors.base_light,
-      backgroundColor: theme.colors.base_dark
-    },
     "&$indeterminate": {
       "& svg": {
-        color: theme.colors.base_dark,
-        backgroundColor: theme.colors.base_light
+        backgroundColor: theme.colors.bgContainer,
+        border: `1px solid ${theme.colors.borderStrong}`
       }
     }
   }

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        backgroundColor: theme.colors.atmo3,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAAA;AAAA,EAE/C;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAChC;AAAA,EAEJ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MAAA;AAAA,IACtB;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAChC;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.round,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.bgContainer,\n      borderRadius: theme.radii.base,\n      border: `1px solid ${theme.colors.borderStrong}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.bgDisabled,\n        borderColor: theme.colors.borderDisabled,\n        backgroundColor: theme.colors.bgDisabled,\n      },\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: \"transparent\",\n      backgroundColor: theme.colors.primaryStrong,\n      color: theme.colors.bgContainer,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.textSubtle,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n  semantic: {\n    \"&$indeterminate\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.bgContainer,\n        border: `1px solid ${theme.colors.borderStrong}`,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAAA;AAAA,IAChD;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -95,12 +95,13 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     "div",
     {
       id: setId(id, "header"),
+      "data-popper-placement": popperPlacement,
       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")
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerDisabled]: disabled
       }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
       ...headerAriaLabels,
@@ -122,7 +123,7 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
           ExpanderComponent,
           {
             iconSize: "XS",
-            color: disabled ? "secondary_60" : void 0,
+            color: disabled ? "textDisabled" : void 0,
             className: classes.arrow
           }
         ) })

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   * @deprecated use `headerComponent` instead\n   */\n  component?: React.ReactNode;\n  /** Replacement for the header component */\n  headerComponent?: React.ElementType;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>(function BaseDropdown(props, ref) {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    headerComponent: HeaderComponentProp,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popperElement,\n    referenceElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const headerRef = useForkRef(\n    setReferenceElement,\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref as any,\n  );\n\n  const customHeaderRef = useForkRef(ref, headerRef);\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={headerRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: headerRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  /** Handle keyboard inside children container. */\n  const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n    if (isKey(event, \"Esc\")) {\n      handleToggle(event);\n    }\n    if (isKey(event, \"Tab\") && !event.shiftKey) {\n      const focusList = getFirstAndLastFocus(popperElement);\n      if (document.activeElement === focusList?.last) {\n        event.preventDefault();\n        focusList?.first?.focus();\n      }\n    }\n  };\n\n  const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n    const isButtonClick = referenceElement?.contains(event.target as any);\n    if (!isButtonClick) {\n      onClickOutside?.(event);\n      setIsOpen(false);\n      onToggle?.(event, false);\n    }\n  };\n\n  const hasCustomHeader = !!HeaderComponentProp;\n  const HeaderComponent = HeaderComponentProp || \"div\";\n  const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n  return (\n    <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n      <HeaderComponent\n        ref={hasCustomHeader ? customHeaderRef : ref}\n        id={id}\n        disabled={hasCustomHeader && disabled}\n        className={cx(className, {\n          [classes.anchor]: !hasCustomHeader,\n          [classes.rootDisabled]: disabled,\n        })}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...((ariaRole || hasCustomHeader) && {\n          role: hasCustomHeader ? undefined : ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={hasCustomHeader ? undefined : -1}\n        {...others}\n      >\n        {headerElement}\n      </HeaderComponent>\n      {isOpen && (\n        <BaseDropdownPanel\n          classes={classes}\n          containerId={containerId}\n          onClickAway={handleOutside}\n          onContainerKeyDown={handleContainerKeyDown}\n        >\n          {children}\n        </BaseDropdownPanel>\n      )}\n    </RootComponent>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  function HvBaseDropdown(props, ref) {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: ({ state }) => {\n            state.styles.popper.width = `${state.rects.reference.width}px`;\n          },\n          effect: ({ state }) => {\n            state.elements.popper.style.width = `${\n              (state.elements.reference as any).offsetWidth\n            }px`;\n          },\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: ({ state, name, options }) => {\n            const overflow = detectOverflow(state, options);\n\n            const x = state.modifiersData.preventOverflow?.x || 0;\n            const y = state.modifiersData.preventOverflow?.y || 0;\n\n            const popperWidth = state.rects.popper.width;\n            const popperHeight = state.rects.popper.height;\n\n            const basePlacement = state.placement.split(\"-\")[0];\n\n            const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n            const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n            state.modifiersData[name] = {\n              width: popperWidth - overflow[widthProp] - x,\n              height: popperHeight - overflow[heightProp] - y,\n            };\n          },\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: ({ state }) => {\n            // The `maxSize` modifier provides this data\n            const { width, height } = state.modifiersData.maxSize;\n            state.styles.popper.maxWidth = `${width}px`;\n            state.styles.popper.maxHeight = `${height}px`;\n          },\n        },\n        ...(popperPropsModifiers || []),\n      ],\n      [popperPropsModifiers, variableWidth],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        popperPlacement:\n          (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n          \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":["BaseDropdown","HvBaseDropdown"],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.js","sources":["../../../src/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { PopperProps, usePopper } from \"react-popper\";\nimport type { ClickAwayListenerProps } from \"@mui/material/ClickAwayListener\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { detectOverflow, Options, Placement } from \"@popperjs/core\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { getFirstAndLastFocus } from \"../utils/focusableElementFinder\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport { BaseDropdownPanel } from \"./BaseDropdownPanel\";\nimport { BaseDropdownContext, useBaseDropdownContext } from \"./context\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onToggle\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps<any>>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   * @deprecated use `headerComponent` instead\n   */\n  component?: React.ReactNode;\n  /** Replacement for the header component */\n  headerComponent?: React.ElementType;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst BaseDropdown = forwardRef<\n  HTMLDivElement,\n  Omit<\n    HvBaseDropdownProps,\n    \"popperProps\" | \"variableWidth\" | \"placement\" | \"onContainerCreation\"\n  >\n>(function BaseDropdown(props, ref) {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    headerComponent: HeaderComponentProp,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    ...others\n  } = props;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    popperPlacement,\n    popperElement,\n    referenceElement,\n    setReferenceElement,\n  } = useBaseDropdownContext();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const headerRef = useForkRef(\n    setReferenceElement,\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref as any,\n  );\n\n  const customHeaderRef = useForkRef(ref, headerRef);\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp);\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n    \"aria-disabled\": disabled ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies React.AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies React.AriaAttributes;\n\n  const handleToggle = useCallback(\n    (event: any) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement],\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      data-popper-placement={popperPlacement}\n      className={cx(classes.header, {\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement?.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement?.includes(\"bottom\"),\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerDisabled]: disabled,\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={headerRef}\n      {...dropdownHeaderProps}\n    >\n      <div\n        className={cx(classes.selection, {\n          [classes.selectionDisabled]: disabled,\n        })}\n      >\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography noWrap className={classes.placeholder}>\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"textDisabled\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && isValidElement(component)\n      ? cloneElement(component as React.ReactElement, {\n          ref: headerRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  /** Handle keyboard inside children container. */\n  const handleContainerKeyDown: React.KeyboardEventHandler = (event) => {\n    if (isKey(event, \"Esc\")) {\n      handleToggle(event);\n    }\n    if (isKey(event, \"Tab\") && !event.shiftKey) {\n      const focusList = getFirstAndLastFocus(popperElement);\n      if (document.activeElement === focusList?.last) {\n        event.preventDefault();\n        focusList?.first?.focus();\n      }\n    }\n  };\n\n  const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n    const isButtonClick = referenceElement?.contains(event.target as any);\n    if (!isButtonClick) {\n      onClickOutside?.(event);\n      setIsOpen(false);\n      onToggle?.(event, false);\n    }\n  };\n\n  const hasCustomHeader = !!HeaderComponentProp;\n  const HeaderComponent = HeaderComponentProp || \"div\";\n  const RootComponent = HeaderComponentProp ? Fragment : \"div\";\n\n  return (\n    <RootComponent {...(!hasCustomHeader && { className: classes.root })}>\n      <HeaderComponent\n        ref={hasCustomHeader ? customHeaderRef : ref}\n        id={id}\n        disabled={hasCustomHeader && disabled}\n        className={cx(className, {\n          [classes.anchor]: !hasCustomHeader,\n          [classes.rootDisabled]: disabled,\n        })}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...((ariaRole || hasCustomHeader) && {\n          role: hasCustomHeader ? undefined : ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={hasCustomHeader ? undefined : -1}\n        {...others}\n      >\n        {headerElement}\n      </HeaderComponent>\n      {isOpen && (\n        <BaseDropdownPanel\n          classes={classes}\n          containerId={containerId}\n          onClickAway={handleOutside}\n          onContainerKeyDown={handleContainerKeyDown}\n        >\n          {children}\n        </BaseDropdownPanel>\n      )}\n    </RootComponent>\n  );\n});\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  function HvBaseDropdown(props, ref) {\n    const {\n      popperProps = {},\n      variableWidth,\n      placement: placementProp = \"right\",\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n\n    const placement: Placement = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const { modifiers: popperPropsModifiers, ...otherPopperProps } =\n      popperProps;\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null,\n    );\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const modifiers = useMemo<Options[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: ({ state }) => {\n            state.styles.popper.width = `${state.rects.reference.width}px`;\n          },\n          effect: ({ state }) => {\n            state.elements.popper.style.width = `${\n              (state.elements.reference as any).offsetWidth\n            }px`;\n          },\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: ({ state, name, options }) => {\n            const overflow = detectOverflow(state, options);\n\n            const x = state.modifiersData.preventOverflow?.x || 0;\n            const y = state.modifiersData.preventOverflow?.y || 0;\n\n            const popperWidth = state.rects.popper.width;\n            const popperHeight = state.rects.popper.height;\n\n            const basePlacement = state.placement.split(\"-\")[0];\n\n            const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n            const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n            state.modifiersData[name] = {\n              width: popperWidth - overflow[widthProp] - x,\n              height: popperHeight - overflow[heightProp] - y,\n            };\n          },\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: ({ state }) => {\n            // The `maxSize` modifier provides this data\n            const { width, height } = state.modifiersData.maxSize;\n            state.styles.popper.maxWidth = `${width}px`;\n            state.styles.popper.maxHeight = `${height}px`;\n          },\n        },\n        ...(popperPropsModifiers || []),\n      ],\n      [popperPropsModifiers, variableWidth],\n    );\n\n    const popper = usePopper(referenceElement, popperElement, {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    });\n\n    const value = useMemo(\n      () => ({\n        popperPlacement:\n          (popper?.attributes.popper?.[\"data-popper-placement\"] as Placement) ??\n          \"bottom\",\n        popper,\n        popperElement,\n        setPopperElement,\n        referenceElement,\n        setReferenceElement,\n      }),\n      [popper, popperElement, referenceElement],\n    );\n\n    return (\n      <BaseDropdownContext.Provider value={value}>\n        <BaseDropdown ref={ref} {...others} />\n      </BaseDropdownContext.Provider>\n    );\n  },\n);\n"],"names":["BaseDropdown","HvBaseDropdown"],"mappings":"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"}

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

@@ -15,53 +15,54 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     boxSizing: "border-box",
-    border: `1px solid ${theme.colors.secondary}`,
+    border: `1px solid ${theme.colors.text}`,
     borderRadius: theme.radii.base,
-    "&:hover": {
-      border: `1px solid ${theme.colors.primary}`
+    ":hover,:focus-visible": {
+      borderColor: theme.colors.primary
     },
-    "&:focus": {
+    ":focus": {
       outline: "none"
     },
-    "&:focus-visible": {
-      ...outlineStyles,
-      border: `1px solid ${theme.colors.primary}`
+    ":focus-visible": {
+      ...outlineStyles
     }
   },
   headerOpen: {
-    border: `1px solid ${theme.colors.secondary}`,
-    "&:hover": {
-      border: `1px solid ${theme.colors.secondary}`
+    "&,:hover": {
+      borderColor: theme.colors.text
+    },
+    "&[data-popper-placement*='top']": {
+      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
     }
   },
-  headerOpenUp: {
-    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`
-  },
-  headerOpenDown: {
-    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`
-  },
+  /** @deprecated use `[data-popper-placement*='top']` selector instead */
+  headerOpenUp: {},
+  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
+  headerOpenDown: {},
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: theme.colors.secondary_60,
-    border: `1px solid ${theme.colors.secondary_60}`,
-    background: theme.colors.atmo2,
-    "&:hover": {
-      border: `1px solid ${theme.colors.secondary_60}`
+    color: theme.colors.textDisabled,
+    backgroundColor: theme.colors.bgPage,
+    "&,:hover": {
+      borderColor: "currentcolor"
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: theme.colors.secondary_80,
-    border: `1px solid ${theme.colors.secondary_60}`,
-    background: theme.colors.atmo2,
+    color: theme.colors.textSubtle,
+    borderColor: "currentcolor",
+    backgroundColor: theme.colors.bgPage,
     userSelect: "text",
-    "&:focus-visible": {
+    ":focus-visible": {
       outline: "none",
-      border: `1px solid ${theme.colors.secondary_60}`
+      borderColor: "currentcolor"
     }
   },
   arrowContainer: {
@@ -77,18 +78,19 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: theme.space.xs,
-    paddingRight: theme.sizes.sm
+    paddingRight: 32
   },
   selectionDisabled: {},
   placeholder: {
     display: "block",
-    color: theme.colors.secondary_80
+    color: theme.colors.textSubtle
   },
   panel: {
     // TODO: remove padding override in v6 (most elements need it)
     padding: 0,
-    border: `1px solid ${theme.colors.secondary}`
+    border: `1px solid ${theme.colors.text}`
   },
+  // TODO: change from classes to [data-popper-placement] selectors
   panelOpenedUp: {
     top: 1,
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`
@@ -99,15 +101,15 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   },
   inputExtensionOpen: {
     height: "0px",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${theme.colors.secondary}`,
-    borderLeft: `1px solid ${theme.colors.secondary}`
+    borderRight: `1px solid ${theme.colors.text}`,
+    borderLeft: `1px solid ${theme.colors.text}`
   },
   inputExtensionLeftPosition: { marginLeft: "auto" },
   inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   inputExtensionFloatRight: { float: "right" },
   inputExtensionFloatLeft: { float: "left" }

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

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    background: theme.colors.atmo1,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.secondary}`,\n    borderRadius: theme.radii.base,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.primary}`,\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      border: `1px solid ${theme.colors.primary}`,\n    },\n  },\n  headerOpen: {\n    border: `1px solid ${theme.colors.secondary}`,\n\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  headerOpenUp: {\n    borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n  },\n  headerOpenDown: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n  },\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_60,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.secondary_80,\n    border: `1px solid ${theme.colors.secondary_60}`,\n    background: theme.colors.atmo2,\n    userSelect: \"text\",\n    \"&:focus-visible\": {\n      outline: \"none\",\n      border: `1px solid ${theme.colors.secondary_60}`,\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: theme.sizes.sm,\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.secondary_80,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.secondary}`,\n  },\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.atmo1,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.secondary}`,\n    borderLeft: `1px solid ${theme.colors.secondary}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseDropdown.styles.js","sources":["../../../src/BaseDropdown/BaseDropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBaseDropdown\", {\n  root: { width: \"100%\", position: \"relative\" },\n  rootDisabled: {\n    cursor: \"not-allowed\",\n    \"&:focus\": {\n      outline: \"none\",\n    },\n  },\n  anchor: { display: \"inline-block\", width: \"100%\" },\n  container: { zIndex: theme.zIndices.popover, width: \"auto\" },\n  header: {\n    cursor: \"pointer\",\n    userSelect: \"none\",\n    position: \"relative\",\n    backgroundColor: theme.colors.bgContainer,\n    boxSizing: \"border-box\",\n    border: `1px solid ${theme.colors.text}`,\n    borderRadius: theme.radii.base,\n    \":hover,:focus-visible\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus\": {\n      outline: \"none\",\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  headerOpen: {\n    \"&,:hover\": {\n      borderColor: theme.colors.text,\n    },\n\n    \"&[data-popper-placement*='top']\": {\n      borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n    },\n    \"&[data-popper-placement*='bottom']\": {\n      borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    },\n  },\n  /** @deprecated use `[data-popper-placement*='top']` selector instead */\n  headerOpenUp: {},\n  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */\n  headerOpenDown: {},\n  headerDisabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgPage,\n    \"&,:hover\": {\n      borderColor: \"currentcolor\",\n    },\n  },\n  headerReadOnly: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"none\",\n    color: theme.colors.textSubtle,\n    borderColor: \"currentcolor\",\n    backgroundColor: theme.colors.bgPage,\n    userSelect: \"text\",\n    \":focus-visible\": {\n      outline: \"none\",\n      borderColor: \"currentcolor\",\n    },\n  },\n  arrowContainer: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  arrow: {},\n  selection: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"30px\",\n    boxSizing: \"border-box\",\n    paddingLeft: theme.space.xs,\n    paddingRight: 32,\n  },\n  selectionDisabled: {},\n  placeholder: {\n    display: \"block\",\n    color: theme.colors.textSubtle,\n  },\n  panel: {\n    // TODO: remove padding override in v6 (most elements need it)\n    padding: 0,\n    border: `1px solid ${theme.colors.text}`,\n  },\n  // TODO: change from classes to [data-popper-placement] selectors\n  panelOpenedUp: {\n    top: 1,\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    top: -1,\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  inputExtensionOpen: {\n    height: \"0px\",\n    backgroundColor: theme.colors.bgContainer,\n    borderTop: \"none\",\n    borderBottom: \"none\",\n    borderRight: `1px solid ${theme.colors.text}`,\n    borderLeft: `1px solid ${theme.colors.text}`,\n  },\n  inputExtensionLeftPosition: { marginLeft: \"auto\" },\n  inputExtensionOpenShadow: {\n    boxShadow: `0px 8px 0px ${theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  inputExtensionFloatRight: { float: \"right\" },\n  inputExtensionFloatLeft: { float: \"left\" },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -5,8 +5,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   root: {
     // #region `input` style reset
     "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,
-      WebkitTextFillColor: theme.colors.secondary
+      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,
+      WebkitTextFillColor: theme.colors.text
     },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
@@ -32,9 +32,9 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     borderRadius: theme.radii.base,
     height: "32px",
     borderWidth: 1,
-    borderColor: theme.colors.secondary,
+    borderColor: theme.colors.text,
     boxSizing: "border-box",
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     fontFamily: theme.fontFamily.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: theme.colors.primary
@@ -44,15 +44,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     }
   },
   disabled: {
-    backgroundColor: theme.colors.atmo2,
-    borderColor: theme.colors.secondary_60,
+    backgroundColor: theme.colors.bgPage,
+    borderColor: theme.colors.textDisabled,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
   invalid: {
-    borderColor: theme.colors.negative_120
+    borderColor: theme.form.errorColor
   },
   multiline: {
     padding: 0,
@@ -69,19 +69,16 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   },
   resizable: { width: "auto" },
   readOnly: {
-    borderColor: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo2
+    borderColor: theme.colors.textDisabled,
+    backgroundColor: theme.colors.bgPage
   },
   focused: {},
   /** @deprecated unused. use `::after` instead */
   inputBorderContainer: {},
   /** @deprecated use `classes.invalid` instead */
-  inputRootInvalid: { borderColor: theme.colors.negative_120 },
+  inputRootInvalid: {},
   /** @deprecated use `classes.readOnly` instead */
-  inputRootReadOnly: {
-    borderColor: theme.colors.secondary_60,
-    backgroundColor: theme.colors.atmo2
-  },
+  inputRootReadOnly: {},
   /** @deprecated use `classes.root` instead */
   inputRoot: {},
   /** @deprecated unused */
@@ -104,15 +101,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     ...theme.typography.body,
     "&::placeholder": {
       opacity: 1,
-      color: theme.colors.secondary_80
+      color: theme.colors.textSubtle
     }
   },
   inputDisabled: {
-    color: theme.colors.secondary_60,
-    WebkitTextFillColor: theme.colors.secondary_60
+    color: theme.colors.textDisabled,
+    WebkitTextFillColor: theme.colors.textDisabled
   },
   inputReadOnly: {
-    color: theme.colors.secondary_80
+    color: theme.colors.textSubtle
   },
   inputResizable: {
     resize: "both",

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

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.atmo1} inset`,\n      WebkitTextFillColor: theme.colors.secondary,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.secondary,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.atmo1,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.atmo2,\n    borderColor: theme.colors.secondary_60,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.colors.negative_120,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: { borderColor: theme.colors.negative_120 },\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {\n    borderColor: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo2,\n  },\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.secondary_80,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.secondary_60,\n    WebkitTextFillColor: theme.colors.secondary_60,\n  },\n  inputReadOnly: {\n    color: theme.colors.secondary_80,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,KAAK;AAAA,MACrD,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,EAAE,aAAa,MAAM,OAAO,aAAa;AAAA;AAAA,EAE3D,mBAAmB;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,\n      WebkitTextFillColor: theme.colors.text,\n    },\n\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.text,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.bgContainer,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.bgPage,\n    borderColor: theme.colors.textDisabled,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgPage,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: {},\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {},\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.textSubtle,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.textDisabled,\n    WebkitTextFillColor: theme.colors.textDisabled,\n  },\n  inputReadOnly: {\n    color: theme.colors.textSubtle,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,UAAU;AAAA,MAC1D,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}