@hitachivantara/uikit-react-core 5.81.2 → 5.82.1

package/dist/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  HvColorAny,\n  HvRadius,\n  HvSize,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  getIconSizeStyles,\n  getOverrideColors,\n  getSizeStyles,\n  staticClasses,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonVariant } from \"./types\";\n\ntype Variant = \"contained\" | \"subtle\" | \"ghost\";\n\nexport { staticClasses as buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Color of the button. */\n      color?: HvColorAny;\n      /** Button size. */\n      size?: HvSize;\n      /** Button border radius. */\n      radius?: HvRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\nfunction parseVariant(variant: HvButtonVariant): [HvColorAny, Variant] {\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `HvButton variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  if (variant === \"semantic\") return [\"inherit\", \"ghost\"];\n  if (variant === \"secondary\") return [\"secondary\", \"subtle\"];\n  if (variant === \"ghost\") return [\"primary\", \"ghost\"];\n  if (variant === \"contained\" || variant === \"subtle\") {\n    return [\"secondary\", variant];\n  }\n\n  const result = variant.split(/(?=[A-Z])/);\n  if (!result[1]) return [result[0], \"contained\"];\n\n  return result.map((x) => x.toLowerCase()) as [HvColorAny, Variant];\n}\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    icon = false,\n    variant: variantProp = icon ? \"secondaryGhost\" : \"primary\",\n    color: colorProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const [parsedColor, variant] = parseVariant(variantProp);\n  const color = colorProp ?? parsedColor;\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const sizeStyles = useMemo(\n    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={mergeStyles(style, {\n        \"--color\": color && getColor(color),\n        \"--radius\": radius && theme.radii[radius],\n        \"--HvButton-height\": sizeStyles?.height ?? \"32px\",\n      })}\n      className={cx(\n        classes.root,\n        classes[variant],\n        classes[variantProp as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      data-color={color}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAuEA,SAAS,aAAa,SAAiD;AAcrE,MAAI,YAAY,WAAmB,QAAA,CAAC,WAAW,OAAO;AACtD,MAAI,YAAY,YAAoB,QAAA,CAAC,aAAa,QAAQ;AAC1D,MAAI,YAAY,QAAgB,QAAA,CAAC,WAAW,OAAO;AAC/C,MAAA,YAAY,eAAe,YAAY,UAAU;AAC5C,WAAA,CAAC,aAAa,OAAO;AAAA,EAAA;AAGxB,QAAA,SAAS,QAAQ,MAAM,WAAW;AACpC,MAAA,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,WAAW;AAE9C,SAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAC1C;AAIO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS,cAAc,OAAO,mBAAmB;AAAA,IACjD,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AACnD,QAAM,CAAC,aAAa,OAAO,IAAI,aAAa,WAAW;AACvD,QAAM,QAAQ,aAAa;AAErB,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEM,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EACrB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,SAAS,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EACb;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,OAAO;AAAA,QACxB,WAAW,SAAS,SAAS,KAAK;AAAA,QAClC,YAAY,UAAU,MAAM,MAAM,MAAM;AAAA,QACxC,qBAAqB,YAAY,UAAU;AAAA,MAAA,CAC5C;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,WAAoC;AAAA;AAAA,QAC5C,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACzD;AAEJ,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  HvColorAny,\n  HvRadius,\n  HvSize,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  getIconSizeStyles,\n  getOverrideColors,\n  getSizeStyles,\n  staticClasses,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonVariant } from \"./types\";\n\ntype Variant = \"contained\" | \"subtle\" | \"ghost\";\n\nexport { staticClasses as buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Color of the button. */\n      color?: HvColorAny;\n      /** Button size. */\n      size?: HvSize;\n      /** Button border radius. */\n      radius?: HvRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\nfunction parseVariant(variant: HvButtonVariant): [HvColorAny, Variant] {\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `HvButton variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  if (variant === \"semantic\") return [\"inherit\", \"ghost\"];\n  if (variant === \"secondary\") return [\"secondary\", \"subtle\"];\n  if (variant === \"ghost\") return [\"primary\", \"ghost\"];\n  if (variant === \"contained\" || variant === \"subtle\") {\n    return [\"secondary\", variant];\n  }\n\n  const result = variant.split(/(?=[A-Z])/);\n  if (!result[1]) return [result[0], \"contained\"];\n\n  return result.map((x) => x.toLowerCase()) as [HvColorAny, Variant];\n}\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    icon = false,\n    variant: variantProp = icon ? \"secondaryGhost\" : \"primary\",\n    color: colorProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const [parsedColor, variant] = parseVariant(variantProp);\n  const color = colorProp ?? parsedColor;\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const sizeStyles = useMemo(\n    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={mergeStyles(style, {\n        \"--color\": color && getColor(color),\n        \"--radius\": radius && theme.radii[radius],\n        \"--HvButton-height\": sizeStyles?.height ?? \"32px\",\n      })}\n      className={cx(\n        classes.root,\n        classes[variant],\n        classes[variantProp as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      data-color={color}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected != null && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAuEA,SAAS,aAAa,SAAiD;AAcrE,MAAI,YAAY,WAAmB,QAAA,CAAC,WAAW,OAAO;AACtD,MAAI,YAAY,YAAoB,QAAA,CAAC,aAAa,QAAQ;AAC1D,MAAI,YAAY,QAAgB,QAAA,CAAC,WAAW,OAAO;AAC/C,MAAA,YAAY,eAAe,YAAY,UAAU;AAC5C,WAAA,CAAC,aAAa,OAAO;AAAA,EAAA;AAGxB,QAAA,SAAS,QAAQ,MAAM,WAAW;AACpC,MAAA,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,WAAW;AAE9C,SAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAC1C;AAIO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS,cAAc,OAAO,mBAAmB;AAAA,IACjD,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AACnD,QAAM,CAAC,aAAa,OAAO,IAAI,aAAa,WAAW;AACvD,QAAM,QAAQ,aAAa;AAErB,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EACjB;AAEM,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EACrB;AAEA,QAAM,aAAa;AAAA,IACjB,MAAM,SAAS,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EACb;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,OAAO;AAAA,QACxB,WAAW,SAAS,SAAS,KAAK;AAAA,QAClC,YAAY,UAAU,MAAM,MAAM,MAAM;AAAA,QACxC,qBAAqB,YAAY,UAAU;AAAA,MAAA,CAC5C;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,WAAoC;AAAA;AAAA,QAC5C,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,QAAQ,EAAE,gBAAgB,SAAS;AAAA,MACnD,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACzD;AAEJ,CAAC;"}

package/dist/esm/CheckBox/CheckBox.styles.js

@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
     }
   },
   invalidContainer: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"
@@ -36,7 +36,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBox", {
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
     borderBottomLeftRadius: "0px",
     borderBottomRightRadius: "0px"
   },

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.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(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"CheckBox.styles.js","sources":["../../../src/CheckBox/CheckBox.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(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAG;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IACpD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative}`
+    borderBottom: `1px solid ${theme.colors.negative_120}`
   },
   selectAll: {},
   error: {}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,EAClD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/DatePicker/DatePicker.styles.js

@@ -24,9 +24,9 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
   },
   panel: {},
   dropdownHeaderInvalid: {
-    border: `1px solid ${theme.colors.negative}`,
+    border: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
-      border: `1px solid ${theme.colors.negative}`
+      border: `1px solid ${theme.colors.negative_120}`
     }
   },
   dropdownHeaderOpen: {},

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAC1C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAAA;AAAA,EAE9C;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}
+{"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n  root: {\n    position: \"relative\",\n  },\n  actionContainer: {\n    justifyContent: \"space-between\",\n  },\n  leftContainer: {},\n  rightContainer: {},\n\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\n  description: {},\n  error: {},\n\n  dropdown: {\n    display: \"block\",\n  },\n  panel: {},\n\n  dropdownHeaderInvalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n    \"&:hover\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  dropdownHeaderOpen: {},\n  icon: {},\n  action: {\n    \"&:first-of-type\": {\n      marginRight: theme.space.xs,\n    },\n  },\n  inputText: {},\n  dateText: {\n    color: \"inherit\",\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,EACX;AAAA,EACA,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,WAAW;AAAA,MACT,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -63,7 +63,6 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId(idProp);
-  const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
   const listId = setId(id, "list");
   const handleClose = (event) => {
     setOpen(false);
@@ -71,6 +70,7 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
   };
   const handleKeyDown = (event) => {
     if (isKey(event, "Tab")) {
+      const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
       const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;
       if (node) setTimeout(() => node.focus(), 0);
       handleClose(event);

package/dist/esm/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  (props, ref) => {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.container, classes.icon, className, {\n        [classes.iconSelected]: open,\n      })}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvDropDownMenu"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  (props, ref) => {\n    const { open, icon, disabled, ...others } = props;\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        disabled={disabled}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement}\n        {...others}\n      >\n        {icon || <MoreOptionsVertical role=\"presentation\" />}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n  React.ComponentRef<typeof HvBaseDropdown>,\n  HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={id}\n      className={cx(classes.container, classes.icon, className, {\n        [classes.iconSelected]: open,\n      })}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n        panel: classes.menuListRoot,\n      }}\n      expanded={open && !disabled}\n      headerComponent={HeaderComponent}\n      // @ts-expect-error infer HeaderComponent typings\n      size={size}\n      variant={variant ?? category}\n      open={open}\n      aria-label={labels.dropdownMenu}\n      icon={icon}\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={(containerEl) => {\n        containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n      }}\n      {...others}\n    >\n      <HvList\n        id={listId}\n        values={dataList}\n        selectable={false}\n        condensed={condensed}\n        onClick={(event, item) => {\n          if (!keepOpened) handleClose(event);\n          onClick?.(event, item);\n        }}\n        onKeyDown={handleKeyDown}\n        classes={{\n          root: classes.menuList,\n        }}\n      />\n    </HvBaseDropdown>\n  );\n});\n"],"names":["HvDropDownMenu"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAChB;AA2DA,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,MAAM,MAAM,UAAU,GAAG,OAAW,IAAA;AACtC,UAAA,EAAE,gBAAgB,IAAI,uBAAuB;AAGjD,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,eAAe,CAAA;AAAA,MAAA;AAAA,IACpD;AAAA,EAAA;AAGN;AAKO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAEvB,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAClB,UAIG;AAEH,YAAQ,KAAK;AACb,eAAW,OAAO,KAAK;AAAA,EACzB;AAGM,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAC5D,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAChE,UAAI,KAAiB,YAAA,MAAM,KAAK,MAAA,GAAS,CAAC;AAC1C,kBAAY,KAAK;AAAA,IAAA;AAEnB,UAAM,eAAe;AAAA,EACvB;AAEA,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,MAAM,WAAW;AAAA,QACxD,CAAC,QAAQ,YAAY,GAAG;AAAA,MAAA,CACzB;AAAA,MACD,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,QACnB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,iBAAiB;AAAA,MAEjB;AAAA,MACA,SAAS,WAAW;AAAA,MACpB;AAAA,MACA,cAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB,CAAC,gBAAgB;AACpC,qBAAa,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACpB,gBAAA,CAAC,WAAY,aAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Dropdown/Dropdown.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvDropdown", {
     width: "100%",
     borderRadius: theme.radii.base,
     "& $dropdownHeaderInvalid": {
-      border: `1px solid ${theme.colors.negative}`
+      border: `1px solid ${theme.colors.negative_120}`
     }
   },
   arrow: {},

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,IAAA;AAAA,EAE9C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}
+{"version":3,"file":"Dropdown.styles.js","sources":["../../../src/Dropdown/Dropdown.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdown\", {\n  root: {\n    width: \"100%\",\n    position: \"relative\",\n    display: \"inline-block\",\n  },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  error: {},\n  placeholder: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  placeholderClosed: {\n    color: theme.colors.secondary_80,\n  },\n  selectionDisabled: {\n    lineHeight: theme.space.md,\n    color: theme.colors.secondary_60,\n  },\n  dropdown: {\n    width: \"100%\",\n    borderRadius: theme.radii.base,\n\n    \"& $dropdownHeaderInvalid\": {\n      border: `1px solid ${theme.colors.negative_120}`,\n    },\n  },\n  arrow: {},\n  dropdownHeader: {},\n  dropdownHeaderInvalid: {},\n  dropdownHeaderOpen: {},\n  dropdownListContainer: {},\n  rootList: {},\n  disabled: {\n    color: theme.colors.secondary_60,\n  },\n  readOnly: {\n    \"& $dropdownHeader\": {\n      border: `1px solid ${theme.colors.secondary_80}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAAA,EACA,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EACR,aAAa;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,mBAAmB;AAAA,IACjB,YAAY,MAAM,MAAM;AAAA,IACxB,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,uBAAuB,CAAC;AAAA,EACxB,oBAAoB,CAAC;AAAA,EACrB,uBAAuB,CAAC;AAAA,EACxB,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,qBAAqB;AAAA,MACnB,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAChC;AAEJ,CAAC;"}

package/dist/esm/DropdownButton/DropdownButton.js

@@ -19,7 +19,7 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
     ...others
   } = useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { size: "XS", rotate: open });
   return /* @__PURE__ */ jsx(
     HvButton,
     {

package/dist/esm/DropdownButton/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : (\n    <DropDownXS iconSize=\"XS\" style={{ rotate: open ? \"180deg\" : undefined }} />\n  );\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,UAAU,OAAO,SACrB,oBAAC,YAAW,EAAA,UAAS,MAAK,OAAO,EAAE,QAAQ,OAAO,WAAW,UAAa;AAI1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n  extends Omit<HvButtonProps, \"startAdornment\" | \"endAdornment\" | \"classes\"> {\n  /** Whether the button is in read only mode when used as a form element. */\n  readOnly?: boolean;\n  /** Whether the content triggered by the button is opened or not. */\n  open?: boolean;\n  /** Placement of the content triggered by the button. @default bottom */\n  placement?: Placement;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvDropdownButtonClasses;\n}\n\n/**\n * IMPORTANT: This component is not ready to be exported to external users.\n *\n * Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n  HTMLButtonElement,\n  HvDropdownButtonProps\n>(function HvDropdownButton(props, ref) {\n  const {\n    className,\n    classes: classesProp,\n    placement = \"bottom\",\n    disabled,\n    open,\n    icon,\n    readOnly,\n    children,\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropdownButton\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const endIcon = icon ? undefined : <DropDownXS size=\"XS\" rotate={open} />;\n\n  return (\n    <HvButton\n      ref={ref}\n      icon={icon}\n      disabled={disabled || readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.open]: open,\n          [classes.openUp]: open && placement.includes(\"top\"),\n          [classes.openDown]: open && placement.includes(\"bottom\"),\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n        },\n        className,\n      )}\n      classes={{ endIcon: classes.arrowContainer }}\n      endIcon={endIcon}\n      variant={open ? \"secondarySubtle\" : variant}\n      {...others}\n    >\n      <div className={cx({ [classes.selection]: !icon })}>\n        {children && typeof children === \"string\" ? (\n          <div className={classes.placeholder}>{children}</div>\n        ) : (\n          children\n        )}\n      </div>\n    </HvButton>\n  );\n});\n"],"names":["HvDropdownButton"],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,UAAU,OAAO,SAAY,oBAAC,cAAW,MAAK,MAAK,QAAQ,KAAM,CAAA;AAGrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAM,CAAA,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,SAAS,CAAA,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

package/dist/esm/Forms/WarningText/WarningText.js

@@ -6,16 +6,15 @@ import { setId } from "../../utils/setId.js";
 import { useClasses } from "./WarningText.styles.js";
 import { staticClasses } from "./WarningText.styles.js";
 import { HvFormElementContext } from "../FormElement/context/FormElementContext.js";
-import { HvTypography } from "../../Typography/Typography.js";
 const HvWarningText = (props) => {
   const {
     children,
-    adornment,
-    isVisible,
+    adornment: adornmentProp,
+    isVisible: isVisibleProp,
     classes: classesProp,
     className,
-    id,
-    disabled,
+    id: idProp,
+    disabled: disabledProp,
     disableGutter = false,
     disableBorder = false,
     disableAdornment = false,
@@ -24,12 +23,11 @@ const HvWarningText = (props) => {
   } = useDefaultProps("HvWarningText", props);
   const { classes, cx } = useClasses(classesProp);
   const { elementId, elementStatus, elementDisabled } = useContext(HvFormElementContext);
-  const localDisabled = disabled || elementDisabled;
-  const localVisible = isVisible ?? elementStatus === "invalid";
-  const localId = id ?? setId(elementId, "error");
-  const showWarning = localVisible && !localDisabled;
-  const content = showWarning ? children : "";
-  const localAdornment = adornment || /* @__PURE__ */ jsx(Fail, { iconSize: "XS", className: classes.defaultIcon, color: "negative" });
+  const disabled = disabledProp || elementDisabled;
+  const visible = isVisibleProp ?? elementStatus === "invalid";
+  const id = idProp ?? setId(elementId, "error");
+  const showWarning = visible && !disabled;
+  const adornment = adornmentProp || /* @__PURE__ */ jsx(Fail, { size: "xs", className: classes.defaultIcon });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -42,21 +40,20 @@ const HvWarningText = (props) => {
         className
       ),
       children: [
-        !disableAdornment && localAdornment,
+        !disableAdornment && adornment,
         /* @__PURE__ */ jsx(
-          HvTypography,
+          "span",
           {
-            id: localId,
+            id,
             className: cx(classes.warningText, {
               [classes.topGutter]: !disableGutter,
               [classes.hideText]: hideText
             }),
-            variant: "caption1",
             role: "status",
             "aria-live": "polite",
             "aria-relevant": "additions text",
             ...others,
-            children: showWarning && content
+            children: showWarning && children
           }
         )
       ]

package/dist/esm/Forms/WarningText/WarningText.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.js","sources":["../../../../src/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = isVisible ?? elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail iconSize=\"XS\" className={classes.defaultIcon} color=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className,\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        variant=\"caption1\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,WAAW,eAAe,gBAAgB,IAChD,WAAW,oBAAoB;AACjC,QAAM,gBAAgB,YAAY;AAC5B,QAAA,eAAe,aAAa,kBAAkB;AACpD,QAAM,UAAU,MAAM,MAAM,WAAW,OAAO;AACxC,QAAA,cAAc,gBAAgB,CAAC;AAC/B,QAAA,UAAU,cAAc,WAAW;AACnC,QAAA,iBAAiB,aACrB,oBAAC,MAAK,EAAA,UAAS,MAAK,WAAW,QAAQ,aAAa,OAAM,WAAW,CAAA;AAIrE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"WarningText.js","sources":["../../../../src/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment: adornmentProp,\n    isVisible: isVisibleProp,\n    classes: classesProp,\n    className,\n    id: idProp,\n    disabled: disabledProp,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const disabled = disabledProp || elementDisabled;\n  const visible = isVisibleProp ?? elementStatus === \"invalid\";\n  const id = idProp ?? setId(elementId, \"error\");\n  const showWarning = visible && !disabled;\n  const adornment = adornmentProp || (\n    <Fail size=\"xs\" className={classes.defaultIcon} />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className,\n      )}\n    >\n      {!disableAdornment && adornment}\n      <span\n        id={id}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && children}\n      </span>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAsCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT;AAAA,IACA,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,WAAW,eAAe,gBAAgB,IAChD,WAAW,oBAAoB;AACjC,QAAM,WAAW,gBAAgB;AAC3B,QAAA,UAAU,iBAAiB,kBAAkB;AACnD,QAAM,KAAK,UAAU,MAAM,WAAW,OAAO;AACvC,QAAA,cAAc,WAAW,CAAC;AAC1B,QAAA,YAAY,iBACf,oBAAA,MAAA,EAAK,MAAK,MAAK,WAAW,QAAQ,aAAa;AAIhD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA;AAAA,QAAA,CAAC,oBAAoB;AAAA,QACtB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,WAAW,GAAG,QAAQ,aAAa;AAAA,cACjC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,cACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,MAAK;AAAA,YACL,aAAU;AAAA,YACV,iBAAc;AAAA,YACb,GAAG;AAAA,YAEH,UAAe,eAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAClB;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/esm/Forms/WarningText/WarningText.styles.js

@@ -1,10 +1,14 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvWarningText", {
-  root: { display: "none" },
+  root: {
+    display: "none",
+    color: theme.colors.negative_120
+  },
   defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },
   warningText: {
-    color: theme.colors.negative_120,
+    ...theme.typography.caption1,
+    color: "inherit",
     paddingRight: theme.space.xs
   },
   show: { display: "flex" },
@@ -18,7 +22,7 @@ const { staticClasses, useClasses } = createClasses("HvWarningText", {
     margin: 0,
     overflow: "hidden"
   },
-  topBorder: { borderTop: `solid 1px ${theme.colors.negative}` }
+  topBorder: { borderTop: "1px solid currentcolor" }
 });
 export {
   staticClasses,

package/dist/esm/Forms/WarningText/WarningText.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: { display: \"none\" },\n  defaultIcon: { minWidth: \"24px\", width: \"24px\", height: \"24px\" },\n  warningText: {\n    color: theme.colors.negative_120,\n    paddingRight: theme.space.xs,\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: \"3px\" },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: `solid 1px ${theme.colors.negative}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,aAAa,EAAE,UAAU,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAC/D,aAAa;AAAA,IACX,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,aAAa,MAAM,OAAO,QAAQ,GAAG;AAC/D,CAAC;"}
+{"version":3,"file":"WarningText.styles.js","sources":["../../../../src/Forms/WarningText/WarningText.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvWarningText\", {\n  root: {\n    display: \"none\",\n    color: theme.colors.negative_120,\n  },\n  defaultIcon: { minWidth: \"24px\", width: \"24px\", height: \"24px\" },\n  warningText: {\n    ...theme.typography.caption1,\n    color: \"inherit\",\n    paddingRight: theme.space.xs,\n  },\n  show: { display: \"flex\" },\n  topGutter: { paddingTop: \"3px\" },\n  hideText: {\n    // display none or visibility hidden prevents\n    // browser to trigger the aria-alert\n    width: 0,\n    height: 0,\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n  },\n  topBorder: { borderTop: \"1px solid currentcolor\" },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,aAAa,EAAE,UAAU,QAAQ,OAAO,QAAQ,QAAQ,OAAO;AAAA,EAC/D,aAAa;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,IACpB,OAAO;AAAA,IACP,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,MAAM,EAAE,SAAS,OAAO;AAAA,EACxB,WAAW,EAAE,YAAY,MAAM;AAAA,EAC/B,UAAU;AAAA;AAAA;AAAA,IAGR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAAA,EACA,WAAW,EAAE,WAAW,yBAAyB;AACnD,CAAC;"}

package/dist/esm/MultiButton/MultiButton.styles.js

@@ -15,11 +15,10 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     borderRadius: theme.radii.base,
     "& $button": {
       minWidth: 32,
-      minHeight: 32,
       width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: 1,
+      flex: "1 1 auto",
       borderColor: "inherit",
       borderRadius: 0,
       fontWeight: theme.typography.body.fontWeight,

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

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.atmo2,\n\n    borderWidth: 0,\n    borderColor: `${theme.colors.atmo4} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      minHeight: 32,\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      flex: 1,\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.atmo4,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.atmo4,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.atmo4,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.atmo1,\n        fontWeight: theme.typography.label.fontWeight,\n        borderRadius: \"inherit\",\n        borderColor: theme.colors.secondary,\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.containerBackgroundHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.atmo4,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.atmo4}`,\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.atmo4,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: \"calc(100% + 2px)\",\n        borderColor: theme.colors.secondary,\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.atmo2,\n\n    borderWidth: 0,\n    borderColor: `${theme.colors.atmo4} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      flex: \"1 1 auto\",\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.atmo4,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.atmo4,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.atmo4,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.atmo1,\n        fontWeight: theme.typography.label.fontWeight,\n        borderRadius: \"inherit\",\n        borderColor: theme.colors.secondary,\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.containerBackgroundHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.atmo4,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.atmo4}`,\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.atmo4,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.atmo4,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: \"calc(100% + 2px)\",\n        borderColor: theme.colors.secondary,\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}

package/dist/esm/Radio/Radio.styles.js

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     }
   },
   invalidContainer: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"
@@ -35,7 +35,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     }
   },
   invalidRadio: {
-    borderBottom: `1px solid ${theme.colors.negative}`,
+    borderBottom: `1px solid ${theme.colors.negative_120}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.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(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../src/Radio/Radio.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(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n  checked: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IAER,YAAY,EAAE,OAAO,MAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,SAAS;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,IAEpD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAc,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,cAAc,EAAE,iBAAiB,MAAM,OAAO,OAAO,GAAG,cAAc;AAAA,EACtE,SAAS,CAAC;AAAA,EACV,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/RadioGroup/RadioGroup.styles.js

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
   },
   invalid: {
     paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.colors.negative}`
+    borderBottom: `1px solid ${theme.colors.negative_120}`
   },
   error: {}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,EAClD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"RadioGroup.styles.js","sources":["../../../src/RadioGroup/RadioGroup.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadioGroup\", {\n  root: {\n    display: \"inline-block\",\n    overflow: \"clip\",\n    overflowClipMargin: 4,\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    gap: theme.space.sm,\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative_120}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,YAAY;AAAA,EACtD;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Section/Section.js

@@ -53,7 +53,7 @@ const HvSection = forwardRef(
                 "aria-label": isOpen ? "Collapse" : "Expand",
                 ...buttonProps,
                 ...expandButtonProps,
-                children: /* @__PURE__ */ jsx(Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
+                children: /* @__PURE__ */ jsx(Down, { rotate: isOpen })
               }
             ),
             title,

package/dist/esm/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean,\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n  /** Content container ref. */\n  contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  function HvSection(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      contentRef,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n      id,\n      expanded,\n      defaultExpanded,\n    });\n\n    const hasHeader = title || actions || expandable;\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.raisedHeader]: raisedHeader && isOpen,\n        })}\n        {...others}\n      >\n        {hasHeader && (\n          <div className={classes.header}>\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  toggleOpen();\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...buttonProps}\n                {...expandButtonProps}\n              >\n                <Down style={{ rotate: isOpen ? \"180deg\" : undefined }} />\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          ref={contentRef}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: expandable && !isOpen,\n            [classes.spaceTop]: !hasHeader,\n            [classes.hasHeader]: hasHeader,\n          })}\n          {...(expandable && regionProps)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["HvSection"],"mappings":";;;;;;;;AA8CO,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AACtC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,YAAY,SAAS,WAAW;AAGpC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,QAAA,CACzC;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACE,qBAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACP,6BAAA;AACA,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBACH,GAAG;AAAA,gBAEJ,UAAA,oBAAC,QAAK,OAAO,EAAE,QAAQ,SAAS,WAAW,SAAa,CAAA;AAAA,cAAA;AAAA,YAC1D;AAAA,YAED;AAAA,YACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,UAAA,GAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,cAAc,CAAC;AAAA,gBACjC,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,gBACrB,CAAC,QAAQ,SAAS,GAAG;AAAA,cAAA,CACtB;AAAA,cACA,GAAI,cAAc;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Section.js","sources":["../../../src/Section/Section.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Down } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Section.styles\";\n\nexport { staticClasses as sectionClasses };\n\nexport type HvSectionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSectionProps\n  extends Omit<HvBaseProps<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  /** The title of the section */\n  title?: React.ReactNode;\n  /** Whether or not the section is expandable.  */\n  expandable?: boolean;\n  /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** Section actions */\n  actions?: React.ReactNode;\n  /** Section onExpand callback */\n  onToggle?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    open: boolean,\n  ) => void;\n  /** Props to be passed to the expand button */\n  expandButtonProps?: HvButtonProps;\n  /** Determines whether or not the header has a shadow on the bottom border. */\n  raisedHeader?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the empty state component. */\n  classes?: HvSectionClasses;\n  /** Content container ref. */\n  contentRef?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Sections allow grouping information on a page under the same topic.\n */\nexport const HvSection = forwardRef<HTMLDivElement, HvSectionProps>(\n  function HvSection(props, ref) {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      title,\n      expandable,\n      expanded,\n      defaultExpanded = true,\n      actions,\n      onToggle,\n      expandButtonProps,\n      raisedHeader,\n      contentRef,\n      children,\n      ...others\n    } = useDefaultProps(\"HvSection\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n      id,\n      expanded,\n      defaultExpanded,\n    });\n\n    const hasHeader = title || actions || expandable;\n\n    return (\n      <div\n        ref={ref}\n        id={id}\n        className={cx(classes.root, className, {\n          [classes.raisedHeader]: raisedHeader && isOpen,\n        })}\n        {...others}\n      >\n        {hasHeader && (\n          <div className={classes.header}>\n            {expandable && (\n              <HvButton\n                icon\n                onClick={(event) => {\n                  toggleOpen();\n                  onToggle?.(event, !isOpen);\n                }}\n                aria-label={isOpen ? \"Collapse\" : \"Expand\"}\n                {...buttonProps}\n                {...expandButtonProps}\n              >\n                <Down rotate={isOpen} />\n              </HvButton>\n            )}\n            {title}\n            <div className={classes.actions}>{actions}</div>\n          </div>\n        )}\n        <div\n          ref={contentRef}\n          hidden={!isOpen}\n          className={cx(classes.content, {\n            [classes.hidden]: expandable && !isOpen,\n            [classes.spaceTop]: !hasHeader,\n            [classes.hasHeader]: hasHeader,\n          })}\n          {...(expandable && regionProps)}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["HvSection"],"mappings":";;;;;;;;AA8CO,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,aAAa,KAAK;AACtC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,YAAY,SAAS,WAAW;AAGpC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,UACrC,CAAC,QAAQ,YAAY,GAAG,gBAAgB;AAAA,QAAA,CACzC;AAAA,QACA,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aACE,qBAAA,OAAA,EAAI,WAAW,QAAQ,QACrB,UAAA;AAAA,YACC,cAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAI;AAAA,gBACJ,SAAS,CAAC,UAAU;AACP,6BAAA;AACA,6BAAA,OAAO,CAAC,MAAM;AAAA,gBAC3B;AAAA,gBACA,cAAY,SAAS,aAAa;AAAA,gBACjC,GAAG;AAAA,gBACH,GAAG;AAAA,gBAEJ,UAAA,oBAAC,MAAK,EAAA,QAAQ,OAAQ,CAAA;AAAA,cAAA;AAAA,YACxB;AAAA,YAED;AAAA,YACA,oBAAA,OAAA,EAAI,WAAW,QAAQ,SAAU,UAAQ,QAAA,CAAA;AAAA,UAAA,GAC5C;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,QAAQ,CAAC;AAAA,cACT,WAAW,GAAG,QAAQ,SAAS;AAAA,gBAC7B,CAAC,QAAQ,MAAM,GAAG,cAAc,CAAC;AAAA,gBACjC,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,gBACrB,CAAC,QAAQ,SAAS,GAAG;AAAA,cAAA,CACtB;AAAA,cACA,GAAI,cAAc;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/esm/Select/Select.styles.js

@@ -10,7 +10,7 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
   disabled: {},
   readOnly: {},
   invalid: {
-    border: `1px solid ${theme.colors.negative}`
+    border: `1px solid ${theme.colors.negative_120}`
   },
   labelContainer: {
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    border: `1px solid ${theme.colors.negative}`,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    display: \"block\",\n    paddingBottom: 6,\n  },\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.secondary}`,\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,QAAQ;AAAA,EAC5C;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../src/Select/Select.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelect\", {\n  root: {\n    position: \"relative\",\n    \"&$disabled,&$readOnly\": {\n      pointerEvents: \"none\",\n    },\n  },\n  disabled: {},\n  readOnly: {},\n  invalid: {\n    border: `1px solid ${theme.colors.negative_120}`,\n  },\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    display: \"block\",\n    paddingBottom: 6,\n  },\n  description: {},\n  select: {},\n  popper: {\n    zIndex: theme.zIndices.popover,\n  },\n  panel: {\n    maxHeight: 400,\n    border: `1px solid ${theme.colors.secondary}`,\n    marginTop: -1,\n    marginBottom: -1,\n  },\n  panelOpenedUp: {\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0 0`,\n  },\n  panelOpenedDown: {\n    borderRadius: `0 0 ${theme.radii.base} ${theme.radii.base}`,\n  },\n  error: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,yBAAyB;AAAA,MACvB,eAAe;AAAA,IAAA;AAAA,EAEnB;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS;AAAA,IACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,QAAQ;AAAA,IACN,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC3C,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA,EACA,eAAe;AAAA,IACb,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,iBAAiB;AAAA,IACf,cAAc,OAAO,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC3D;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/SelectionList/SelectionList.styles.js

@@ -30,7 +30,7 @@ const { staticClasses, useClasses } = createClasses("HvSelectionList", {
       zIndex: 1
     }
   },
-  invalid: { borderBottom: `1px solid ${theme.colors.negative}` }
+  invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` }
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n  root: { display: \"inline-block\", padding: 0, margin: 0 },\n  error: { width: \"100%\", float: \"left\", clear: \"both\" },\n  listbox: {\n    display: \"flex\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    paddingBottom: theme.space.xs,\n  },\n  label: { marginBottom: theme.space.xs, float: \"left\" },\n  description: { float: \"left\" },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    marginLeft: -theme.space.sm,\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  invalid: { borderBottom: `1px solid ${theme.colors.negative}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,EAAE,SAAS,gBAAgB,SAAS,GAAG,QAAQ,EAAE;AAAA,EACvD,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,OAAO,OAAO;AAAA,EACrD,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,IAAI,OAAO,OAAO;AAAA,EACrD,aAAa,EAAE,OAAO,OAAO;AAAA,EAC7B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY,CAAC,MAAM,MAAM;AAAA,IACzB,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAE5B;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,SAAS,EAAE,cAAc,aAAa,MAAM,OAAO,QAAQ,GAAG;AAChE,CAAC;"}
+{"version":3,"file":"SelectionList.styles.js","sources":["../../../src/SelectionList/SelectionList.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSelectionList\", {\n  root: { display: \"inline-block\", padding: 0, margin: 0 },\n  error: { width: \"100%\", float: \"left\", clear: \"both\" },\n  listbox: {\n    display: \"flex\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    paddingBottom: theme.space.xs,\n  },\n  label: { marginBottom: theme.space.xs, float: \"left\" },\n  description: { float: \"left\" },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    marginLeft: -theme.space.sm,\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  invalid: { borderBottom: `1px solid ${theme.colors.negative_120}` },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,EAAE,SAAS,gBAAgB,SAAS,GAAG,QAAQ,EAAE;AAAA,EACvD,OAAO,EAAE,OAAO,QAAQ,OAAO,QAAQ,OAAO,OAAO;AAAA,EACrD,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,IAAI,OAAO,OAAO;AAAA,EACrD,aAAa,EAAE,OAAO,OAAO;AAAA,EAC7B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY,CAAC,MAAM,MAAM;AAAA,IACzB,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAE5B;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,SAAS,EAAE,cAAc,aAAa,MAAM,OAAO,YAAY,GAAG;AACpE,CAAC;"}

package/dist/esm/Switch/Switch.styles.js

@@ -17,7 +17,7 @@ const { staticClasses, useClasses } = createClasses("HvSwitch", {
   },
   invalidSwitch: {
     paddingBottom: "1px",
-    borderBottom: `1px solid ${theme.colors.negative}`
+    borderBottom: `1px solid ${theme.colors.negative_120}`
   }
 });
 export {