@hitachivantara/uikit-react-core 5.77.0 → 5.79.0

package/dist/cjs/index.cjs

@@ -118,7 +118,6 @@ const BulkActions_styles = require("./BulkActions/BulkActions.styles.cjs");
 const BulkActions = require("./BulkActions/BulkActions.cjs");
 const Button = require("./Button/Button.cjs");
 const Button_styles = require("./Button/Button.styles.cjs");
-const types = require("./Button/types.cjs");
 const Calendar_styles = require("./Calendar/Calendar.styles.cjs");
 const Calendar = require("./Calendar/Calendar.cjs");
 const CalendarHeader_styles = require("./Calendar/CalendarHeader/CalendarHeader.styles.cjs");
@@ -503,9 +502,6 @@ exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = BulkActions.HvBulkActions;
 exports.HvButton = Button.HvButton;
 exports.buttonClasses = Button_styles.staticClasses;
-exports.buttonRadius = types.buttonRadius;
-exports.buttonSize = types.buttonSize;
-exports.buttonVariant = types.buttonVariant;
 exports.calendarClasses = Calendar_styles.staticClasses;
 exports.HvCalendar = Calendar.HvCalendar;
 exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;

package/dist/esm/Button/Button.js

@@ -1,29 +1,32 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { fixedForwardRef } from "../types/generic.js";
-import { useClasses, getIconSizeStyles, getSizeStyles, getColoringStyle, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
+import { useClasses, getIconSizeStyles, getSizeStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";
-const mapVariant = (variant, theme) => {
-  if (theme === "ds3") return variant;
-  const deprecatedVariantMap = {
-    secondary: "secondarySubtle",
-    ghost: "primaryGhost"
-  };
-  const mappedVariant = deprecatedVariantMap[variant];
-  return mappedVariant || variant;
-};
+function parseVariant(variant) {
+  if (variant === "semantic") return ["inherit", "ghost"];
+  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "ghost") return ["primary", "ghost"];
+  if (variant === "contained" || variant === "subtle") {
+    return ["secondary", variant];
+  }
+  const result = variant.split(/(?=[A-Z])/);
+  if (!result[1]) return [result[0], "contained"];
+  return result.map((x) => x.toLowerCase());
+}
 const HvButton = fixedForwardRef(function HvButton2(props, ref) {
   const {
     classes: classesProp,
     children,
-    variant: variantProp,
-    // TODO - should we split into two props (color and type) in v6?
+    icon = false,
+    variant: variantProp = icon ? "secondaryGhost" : "primary",
+    color: colorProp,
     disabled = false,
     className,
     startIcon,
     endIcon,
-    icon = false,
     size,
     radius,
     overrideIconColors = true,
@@ -36,11 +39,8 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
     ...others
   } = useDefaultProps("HvButton", props);
   const { classes, css, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
-  const variant = mapVariant(
-    variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.base
-  );
+  const [parsedColor, variant] = parseVariant(variantProp);
+  const color = colorProp ?? parsedColor;
   const handleClick = (e) => {
     if (disabled) return;
     onClickProp?.(e);
@@ -49,31 +49,24 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
     if (disabled) return;
     onMouseDownProp?.(e);
   };
-  const [color, type] = useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
   const sizeStyles = useMemo(
-    () => size ? icon ? getIconSizeStyles(size) : getSizeStyles(size) : void 0,
+    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),
     [size, icon]
   );
   return /* @__PURE__ */ jsxs(
     Component,
     {
       ref,
-      style: {
-        ...style,
-        "--HvButton-height": sizeStyles ? sizeStyles.height : "32px"
-      },
+      style: mergeStyles(style, {
+        "--color": color && getColor(color),
+        "--radius": radius && theme.radii[radius],
+        "--HvButton-height": sizeStyles?.height ?? "32px"
+      }),
       className: cx(
         classes.root,
-        type && classes[type],
-        color && css(getColoringStyle(color, type)),
         classes[variant],
+        classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        radius && css(getRadiusStyles(radius)),
         overrideIconColors && css(getOverrideColors()),
         {
           [classes.icon]: icon,

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  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBaseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { 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      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\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\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: HvBaseTheme,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\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      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\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    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\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 { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.base,\n  );\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 [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\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":";;;;;;AAoEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;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;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,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,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,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 && { \"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,EAC9B;AAEM,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,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,aAAa;AAAA,IACjB,MAAM,SAAS,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,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,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

package/dist/esm/Button/Button.styles.js

@@ -2,6 +2,9 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvButton", {
+  /**
+   * Classes applied to the root element
+   */
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -10,19 +13,22 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     cursor: "pointer",
     whiteSpace: "nowrap",
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...outlineStyles,
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...outlineStyles
     },
     // Default button - no size specified
     fontFamily: theme.fontFamily.body,
     ...theme.typography.label,
+    color: "var(--color, currentcolor)",
+    backgroundColor: "transparent",
     height: "var(--HvButton-height)",
-    border: "1px solid currentcolor",
-    borderRadius: theme.radii.base,
+    border: "1px solid transparent",
+    borderRadius: `var(--radius, ${theme.radii.base})`,
     padding: theme.spacing(0, "sm")
   },
   startIcon: {
@@ -35,11 +41,11 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   disabled: {
     cursor: "not-allowed",
     color: theme.colors.secondary_60,
-    borderColor: theme.colors.atmo3,
-    backgroundColor: theme.colors.atmo3,
-    "&:hover, &:focus-visible": {
-      backgroundColor: theme.colors.atmo3,
-      borderColor: theme.colors.atmo3
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    ":hover, :focus-visible": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     }
   },
   icon: {
@@ -50,27 +56,23 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
       margin: -1
     }
   },
-  subtle: {
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: "transparent"
+  contained: {
+    color: theme.colors.atmo1,
+    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    backgroundColor: "var(--color)",
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 20%)"
+      },
+      ":active": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 30%)"
       }
     }
   },
-  ghost: {
-    borderColor: "transparent",
-    backgroundColor: "transparent",
-    "&$disabled": {
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        borderColor: "transparent",
-        backgroundColor: "transparent"
-      }
-    }
+  subtle: {
+    borderColor: "currentcolor"
   },
+  ghost: {},
   semantic: {
     color: theme.colors.base_dark,
     backgroundColor: "transparent",
@@ -91,40 +93,19 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   // Deprecated (DS3)
   secondary: {}
 });
-const getColoringStyle = (color, type) => {
-  if (type)
-    return {
-      color: theme.colors[color !== "warning" ? color : `${color}_140`]
-    };
-  const bg = theme.colors[color !== "warning" ? color : `${color}_120`];
-  const hoverBg = theme.colors[color !== "warning" ? `${color}_80` : `${color}_140`];
-  return {
-    color: theme.colors.atmo1,
-    backgroundColor: bg,
-    borderColor: bg,
-    "&:hover, &:focus-visible": {
-      backgroundColor: hoverBg,
-      borderColor: hoverBg
-    }
-  };
-};
-const getRadiusStyles = (radius) => ({
-  borderRadius: theme.radii[radius]
-});
 const sizes = {
-  xs: { height: "24px", space: "sm", typography: "captionLabel" },
-  sm: { height: "24px", space: "sm", typography: "captionLabel" },
-  md: { height: "32px", space: "sm", typography: "label" },
-  lg: { height: "48px", space: "md", typography: "label" },
-  xl: { height: "48px", space: "md", typography: "label" }
+  xs: { height: "24px", fontSize: "sm" },
+  sm: { height: "24px", fontSize: "sm" },
+  md: { height: "32px" },
+  lg: { height: "48px", space: "md" },
+  xl: { height: "48px", space: "md" }
 };
 const getSizeStyles = (size) => {
-  const { height, space, typography } = sizes[size];
-  const { color, ...typoProps } = theme.typography[typography];
+  const { height, space = "sm", fontSize } = sizes[size];
   return {
     height,
     padding: theme.spacing(0, space),
-    ...typoProps
+    fontSize: fontSize && theme.fontSizes[fontSize]
   };
 };
 const getIconSizeStyles = (size) => {
@@ -140,10 +121,8 @@ const getOverrideColors = () => ({
   }
 });
 export {
-  getColoringStyle,
   getIconSizeStyles,
   getOverrideColors,
-  getRadiusStyles,
   getSizeStyles,
   staticClasses,
   useClasses

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    height: \"var(--HvButton-height)\",\n    border: \"1px solid currentcolor\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo3,\n    backgroundColor: theme.colors.atmo3,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: theme.colors.atmo3,\n      borderColor: theme.colors.atmo3,\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  subtle: {\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  ghost: {\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      borderColor: \"transparent\",\n      backgroundColor: \"transparent\",\n      \"&:hover, &:focus-visible\": {\n        borderColor: \"transparent\",\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n  if (type)\n    return {\n      color:\n        theme.colors[\n          (color !== \"warning\"\n            ? color\n            : `${color}_140`) as keyof typeof theme.colors\n        ],\n    };\n\n  const bg =\n    theme.colors[\n      (color !== \"warning\"\n        ? color\n        : `${color}_120`) as keyof typeof theme.colors\n    ];\n  const hoverBg =\n    theme.colors[\n      (color !== \"warning\"\n        ? `${color}_80`\n        : `${color}_140`) as keyof typeof theme.colors\n    ];\n  return {\n    color: theme.colors.atmo1,\n    backgroundColor: bg,\n    borderColor: bg,\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: hoverBg,\n      borderColor: hoverBg,\n    },\n  };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius) => ({\n  borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n  xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n  md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n  lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n  xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize) => {\n  const { height, space, typography } = sizes[size];\n  const { color, ...typoProps } =\n    theme.typography[typography as keyof typeof theme.typography];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    ...typoProps,\n  };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = () => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme, type HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n  /**\n   * Classes applied to the root element\n   */\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    textTransform: \"none\",\n    cursor: \"pointer\",\n    whiteSpace: \"nowrap\",\n\n    // Background color common for almost all variants\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \":focus-visible\": {\n      ...outlineStyles,\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    ...theme.typography.label,\n    color: \"var(--color, currentcolor)\",\n    backgroundColor: \"transparent\",\n    height: \"var(--HvButton-height)\",\n    border: \"1px solid transparent\",\n    borderRadius: `var(--radius, ${theme.radii.base})`,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  startIcon: {\n    marginLeft: `calc(-1 * ${theme.space.xs})`,\n  },\n  endIcon: {\n    marginRight: `calc(-1 * ${theme.space.xs})`,\n  },\n  focusVisible: {},\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \":hover, :focus-visible\": {\n      backgroundColor: \"transparent\",\n      borderColor: \"transparent\",\n    },\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    \"& > *\": {\n      margin: -1,\n    },\n  },\n  contained: {\n    color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,\n    backgroundColor: \"var(--color)\",\n    \":where(:not($disabled))\": {\n      \":hover, :focus-visible\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 20%)\",\n      },\n      \":active\": {\n        backgroundColor: \"color-mix(in srgb, var(--color), black 30%)\",\n      },\n    },\n  },\n  subtle: {\n    borderColor: \"currentcolor\",\n  },\n  ghost: {},\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    borderColor: \"transparent\",\n    \"&:hover, &:focus-visible\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n\n  // TODO - remove in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n\n  // Deprecated (DS3)\n  secondary: {},\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes: Record<\n  HvSize,\n  { height: string; space?: HvSize; fontSize?: keyof typeof theme.fontSizes }\n> = {\n  xs: { height: \"24px\", fontSize: \"sm\" },\n  sm: { height: \"24px\", fontSize: \"sm\" },\n  md: { height: \"32px\" },\n  lg: { height: \"48px\", space: \"md\" },\n  xl: { height: \"48px\", space: \"md\" },\n};\n\nexport const getSizeStyles = (size: HvSize) => {\n  const { height, space = \"sm\", fontSize } = sizes[size];\n  return {\n    height,\n    padding: theme.spacing(0, space),\n    fontSize: fontSize && theme.fontSizes[fontSize],\n  };\n};\n\nexport const getIconSizeStyles = (size: HvSize) => {\n  const { height } = sizes[size];\n  return {\n    height,\n    width: height,\n  };\n};\n\nexport const getOverrideColors = () => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":[],"mappings":"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"}

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 { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonSize, 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 { HvPanel } from \"../Panel\";\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?: HvButtonSize;\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, children, ...others } = props;\n\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement as Placement}\n        {...others}\n      >\n        {children}\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 = (props: HvDropDownMenuProps) => {\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 setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HeaderComponent\n          id={setId(id, \"icon-button\")}\n          disabled={disabled}\n          className={cx(classes.icon, {\n            [classes.iconSelected]: open,\n          })}\n          size={size}\n          variant={variant ?? category}\n          open={open}\n          aria-label={labels.dropdownMenu}\n        >\n          {icon || <MoreOptionsVertical role=\"presentation\" />}\n        </HeaderComponent>\n      }\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={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\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      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\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, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\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 { HvPanel } from \"../Panel\";\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, children, ...others } = props;\n\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement as Placement}\n        {...others}\n      >\n        {children}\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 = (props: HvDropDownMenuProps) => {\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 setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HeaderComponent\n          id={setId(id, \"icon-button\")}\n          disabled={disabled}\n          className={cx(classes.icon, {\n            [classes.iconSelected]: open,\n          })}\n          size={size}\n          variant={variant ?? category}\n          open={open}\n          aria-label={labels.dropdownMenu}\n        >\n          {icon || <MoreOptionsVertical role=\"presentation\" />}\n        </HeaderComponent>\n      }\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={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\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      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Footer/Footer.js

@@ -8,7 +8,7 @@ import { HvTypography } from "../Typography/Typography.js";
 const HvFooter = (props) => {
   const {
     name = "Hitachi Vantara",
-    copyright = `© Hitachi Vantara Corporation ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
+    copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
     links,
     classes: classesProp,
     className,

package/dist/esm/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","sources":["../../../src/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  /** Footer name. */\n  name?: React.ReactNode;\n  /** Footer copyright. */\n  copyright?: React.ReactNode;\n  /** Footer links. */\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara Corporation ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"label\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ,OAAO;AAAA,IACP,YAAY,kCAAiC,oBAAI,KAAK,GAAE,YAAa,CAAA;AAAA,IACrE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,WAAW;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,KAAK,GAAG,SAAS,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAa,SAAQ,SAAQ,WAAW,QAAQ,MAC9C,UACH,MAAA;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,UAAA,oBAAC,cAAa,EAAA,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UACtD,SAAS,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,UAC5C;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Footer.js","sources":["../../../src/Footer/Footer.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport useMediaQuery from \"@mui/material/useMediaQuery\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Footer.styles\";\n\nexport { staticClasses as footerClasses };\n\nexport type HvFooterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFooterProps extends HvBaseProps {\n  /** Footer name. */\n  name?: React.ReactNode;\n  /** Footer copyright. */\n  copyright?: React.ReactNode;\n  /** Footer links. */\n  links?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFooterClasses;\n}\n\n/**\n * A Footer is a way of providing extra information at the end of a page.\n */\nexport const HvFooter = (props: HvFooterProps) => {\n  const {\n    name = \"Hitachi Vantara\",\n    copyright = `© Hitachi Vantara LLC ${new Date().getFullYear()}. All Rights Reserved.`,\n    links,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvFooter\", props);\n  const muiTheme = useTheme();\n  const { classes, cx } = useClasses(classesProp);\n\n  const isSmDown = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n\n  return (\n    <footer\n      className={cx(classes.root, { [classes.small]: isSmDown }, className)}\n      {...others}\n    >\n      <HvTypography variant=\"label\" className={classes.name}>\n        {name}\n      </HvTypography>\n      <div className={classes.rightContainer}>\n        <HvTypography className={classes.copyright}>{copyright}</HvTypography>\n        {links && <div className={classes.separator} />}\n        {links}\n      </div>\n    </footer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA6Ba,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ,OAAO;AAAA,IACP,YAAY,0BAAyB,oBAAI,KAAK,GAAE,YAAa,CAAA;AAAA,IAC7D;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,WAAW;AACjB,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,WAAW,cAAc,SAAS,YAAY,KAAK,IAAI,CAAC;AAG5D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,KAAK,GAAG,SAAS,GAAG,SAAS;AAAA,MACnE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,gBAAa,SAAQ,SAAQ,WAAW,QAAQ,MAC9C,UACH,MAAA;AAAA,QACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,gBACtB,UAAA;AAAA,UAAA,oBAAC,cAAa,EAAA,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,UACtD,SAAS,oBAAC,OAAI,EAAA,WAAW,QAAQ,WAAW;AAAA,UAC5C;AAAA,QAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Loading/Loading.styles.js

@@ -10,13 +10,14 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
   },
   barContainer: {
     display: "flex",
+    alignItems: "center",
     justifyContent: "space-around",
     ":has($regular)": {
       width: 30,
       height: 30
     },
     ":has($small)": {
-      "--scaleY": "0.223",
+      "--height": "40%",
       width: 18,
       height: 18
     }
@@ -27,9 +28,10 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
     width: "round(up, 0.11em, 2px)",
+    height: "100%",
     "@keyframes loading": {
       "50%": {
-        transform: "scale(1, var(--scaleY, 0.6))",
+        height: "var(--height, 60%)",
         backgroundColor: `var(--customColor, ${theme.colors.secondary})`
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--scaleY\": \"0.223\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        transform: \"scale(1, var(--scaleY, 0.6))\",\n        backgroundColor: `var(--customColor, ${theme.colors.secondary})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {},\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IAEP,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,WAAW;AAAA,QACX,iBAAiB,sBAAsB,MAAM,OAAO,SAAS;AAAA,MAC/D;AAAA,IACF;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AACjB,CAAC;"}
+{"version":3,"file":"Loading.styles.js","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n  },\n  barContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n\n    \":has($regular)\": {\n      width: 30,\n      height: 30,\n    },\n\n    \":has($small)\": {\n      \"--height\": \"40%\",\n      width: 18,\n      height: 18,\n    },\n  },\n  loadingBar: {\n    backgroundColor: \"currentcolor\",\n    display: \"inline-block\",\n    animation: \"loading 1s ease-in-out infinite\",\n    // TODO: make this the default when it has better support\n    width: \"round(up, 0.11em, 2px)\",\n    height: \"100%\",\n\n    \"@keyframes loading\": {\n      \"50%\": {\n        height: \"var(--height, 60%)\",\n        backgroundColor: `var(--customColor, ${theme.colors.secondary})`,\n      },\n    },\n\n    \":nth-of-type(2)\": { animationDelay: \"0.22s\" },\n    \":nth-of-type(3)\": { animationDelay: \"0.44s\" },\n  },\n  label: {},\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: {\n    width: 2,\n  },\n  regular: {\n    width: 4,\n  },\n  smallColor: {},\n  regularColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAEA,gBAAgB;AAAA,MACd,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,sBAAsB;AAAA,MACpB,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,sBAAsB,MAAM,OAAO,SAAS;AAAA,MAC/D;AAAA,IACF;AAAA,IAEA,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,IAC7C,mBAAmB,EAAE,gBAAgB,QAAQ;AAAA,EAC/C;AAAA,EACA,OAAO,CAAC;AAAA,EACR,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO;AAAA,IACL,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AACjB,CAAC;"}

package/dist/esm/MultiButton/MultiButton.js

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, Children, isValidElement, Fragment, cloneElement } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { setId } from "../utils/setId.js";
-import { useClasses, getSplitContainerColor, getSplitContainerHeight } from "./MultiButton.styles.js";
+import { useClasses } from "./MultiButton.styles.js";
 import { staticClasses } from "./MultiButton.styles.js";
 const HvMultiButton = (props) => {
   const {
-    id,
     className,
     children,
     classes: classesProp,
@@ -17,13 +15,7 @@ const HvMultiButton = (props) => {
     split,
     ...others
   } = useDefaultProps("HvMultiButton", props);
-  const { classes, cx, css } = useClasses(classesProp);
-  const [color, type] = useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
+  const { classes, cx } = useClasses(classesProp);
   const buttons = useMemo(() => {
     const btns = [];
     Children.forEach(children, (child) => {
@@ -36,7 +28,6 @@ const HvMultiButton = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id,
       className: cx(
         classes.root,
         {
@@ -52,35 +43,17 @@ const HvMultiButton = (props) => {
       ...others,
       children: buttons.map((child, index) => {
         const childIsSelected = !!child.props.selected;
-        const btnKey = setId([id, index]);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          cloneElement(child, {
-            variant,
-            disabled: disabled || child.props.disabled,
-            size,
-            className: cx(child.props.className, classes.button, {
-              [classes.firstButton]: index === 0,
-              [classes.lastButton]: index === buttons.length - 1,
-              [classes.selected]: childIsSelected
-            })
-          }),
-          split && index < buttons.length - 1 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cx(
-                classes.splitContainer,
-                color && css(getSplitContainerColor(color, type, disabled)),
-                size && css(getSplitContainerHeight(size)),
-                {
-                  [classes.splitDisabled]: disabled
-                },
-                classes[variant]
-                // TODO - remove in v6
-              ),
-              children: /* @__PURE__ */ jsx("div", { className: classes.split })
-            }
-          )
-        ] }, btnKey);
+        return cloneElement(child, {
+          key: index,
+          variant,
+          disabled: disabled || child.props.disabled,
+          size,
+          className: cx(child.props.className, classes.button, {
+            [classes.firstButton]: index === 0,
+            [classes.lastButton]: index === buttons.length - 1,
+            [classes.selected]: childIsSelected
+          })
+        });
       })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  Fragment,\n  isValidElement,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport {\n  getSplitContainerColor,\n  getSplitContainerHeight,\n  staticClasses,\n  useClasses,\n} from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    id,\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        const childIsSelected = !!child.props.selected;\n        const btnKey = setId([id, index]);\n        return (\n          <Fragment key={btnKey}>\n            {cloneElement(child, {\n              variant,\n              disabled: disabled || child.props.disabled,\n              size,\n              className: cx(child.props.className, classes.button, {\n                [classes.firstButton]: index === 0,\n                [classes.lastButton]: index === buttons.length - 1,\n                [classes.selected]: childIsSelected,\n              }),\n            })}\n            {split && index < buttons.length - 1 && (\n              <div\n                className={cx(\n                  classes.splitContainer,\n                  color && css(getSplitContainerColor(color, type, disabled)),\n                  size && css(getSplitContainerHeight(size)),\n                  {\n                    [classes.splitDisabled]: disabled,\n                  },\n                  classes[variant as keyof HvMultiButtonClasses], // TODO - remove in v6\n                )}\n              >\n                <div className={classes.split} />\n              </div>\n            )}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAyCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAEnD,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGN,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAA;AACpB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IAAA,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,cAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AACtC,cAAM,SAAS,MAAM,CAAC,IAAI,KAAK,CAAC;AAChC,oCACG,UACE,EAAA,UAAA;AAAA,UAAA,aAAa,OAAO;AAAA,YACnB;AAAA,YACA,UAAU,YAAY,MAAM,MAAM;AAAA,YAClC;AAAA,YACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,cACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,cACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,cACjD,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,UAAA,CACF;AAAA,UACA,SAAS,QAAQ,QAAQ,SAAS,KACjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,QAAQ;AAAA,gBACR,SAAS,IAAI,uBAAuB,OAAO,MAAM,QAAQ,CAAC;AAAA,gBAC1D,QAAQ,IAAI,wBAAwB,IAAI,CAAC;AAAA,gBACzC;AAAA,kBACE,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAC3B;AAAA,gBACA,QAAQ,OAAqC;AAAA;AAAA,cAC/C;AAAA,cAEA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAO;AAAA,YAAA;AAAA,UACjC;AAAA,QAAA,EAAA,GAxBW,MA0Bf;AAAA,MAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  useMemo,\n} from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n  /** Button size. */\n  size?: HvSize;\n  /** Add a split between buttons */\n  split?: boolean;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    size,\n    split,\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  // Filter children: remove invalid and undefined/null\n  const buttons = useMemo(() => {\n    const btns: ReactElement[] = [];\n    Children.forEach(children, (child) => {\n      if (child && isValidElement(child)) {\n        btns.push(child);\n      }\n    });\n    return btns;\n  }, [children]);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.multiple]: !split,\n          [classes.vertical]: vertical,\n          [classes[variant as keyof HvMultiButtonClasses]]: variant, // TODO - remove in v6\n          [classes.splitGroup]: split,\n          [classes.splitGroupDisabled]: split && disabled,\n        },\n        className,\n      )}\n      {...others}\n    >\n      {buttons.map((child, index) => {\n        const childIsSelected = !!child.props.selected;\n        return cloneElement(child, {\n          key: index,\n          variant,\n          disabled: disabled || child.props.disabled,\n          size,\n          className: cx(child.props.className, classes.button, {\n            [classes.firstButton]: index === 0,\n            [classes.lastButton]: index === buttons.length - 1,\n            [classes.selected]: childIsSelected,\n          }),\n        });\n      })}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAmCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAGxC,QAAA,UAAU,QAAQ,MAAM;AAC5B,UAAM,OAAuB,CAAA;AACpB,aAAA,QAAQ,UAAU,CAAC,UAAU;AAChC,UAAA,SAAS,eAAe,KAAK,GAAG;AAClC,aAAK,KAAK,KAAK;AAAA,MACjB;AAAA,IAAA,CACD;AACM,WAAA;AAAA,EAAA,GACN,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG,CAAC;AAAA,UACrB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAqC,CAAC,GAAG;AAAA;AAAA,UAClD,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,kBAAkB,GAAG,SAAS;AAAA,QACzC;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAQ,QAAA,IAAI,CAAC,OAAO,UAAU;AAC7B,cAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AACtC,eAAO,aAAa,OAAO;AAAA,UACzB,KAAK;AAAA,UACL;AAAA,UACA,UAAU,YAAY,MAAM,MAAM;AAAA,UAClC;AAAA,UACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,YACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,YACjC,CAAC,QAAQ,UAAU,GAAG,UAAU,QAAQ,SAAS;AAAA,YACjD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,QAAA,CACF;AAAA,MAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGP;"}