@hitachivantara/uikit-react-core 5.53.1 → 5.55.0

package/dist/cjs/Button/Button.cjs

@@ -32,6 +32,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     focusableWhenDisabled,
     onClick: onClickProp,
     onMouseDown: onMouseDownProp,
+    selected,
     ...others
   } = useDefaultProps.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
@@ -57,13 +58,14 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
       className: cx(
         classes.root,
         classes[variant],
-        size && css(Button_styles.getSizeStyles(size)),
+        size && !icon && css(Button_styles.getSizeStyles(size)),
         radius && css(Button_styles.getRadiusStyles(radius)),
         overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled
         },
+        size && icon && css(Button_styles.getIconSizeStyles(size)),
         className
       ),
       onClick: handleClick,
@@ -74,6 +76,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
         tabIndex: focusableWhenDisabled ? 0 : -1,
         "aria-disabled": true
       },
+      ...selected && { "aria-pressed": selected },
       ...others,
       children: [
         startIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: classes.startIcon, children: startIcon }),

package/dist/cjs/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\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?: string\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,\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    ...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?.name\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  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        size && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        className\n      )}\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      {...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":["fixedForwardRef","HvButton","useDefaultProps","useClasses","useTheme","jsxs","getSizeStyles","getRadiusStyles","getOverrideColors"],"mappings":";;;;;;;AA8DA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAWA,QAAAA,gBAAgB,SAASC,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;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,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgBC,SAAAA;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAInB,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,IAAIC,4BAAc,IAAI,CAAC;AAAA,QAC/B,UAAU,IAAIC,8BAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAIC,cAAAA,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,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,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,4CAAc,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,0CAAY,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport {\n  staticClasses as buttonClasses,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  getIconSizeStyles,\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?: string\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,\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    ...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?.name\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  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        size && !icon && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        size && icon && css(getIconSizeStyles(size)),\n        className\n      )}\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":["fixedForwardRef","HvButton","useDefaultProps","useClasses","useTheme","jsxs","getSizeStyles","getRadiusStyles","getOverrideColors","getIconSizeStyles"],"mappings":";;;;;;;AA+DA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAWA,QAAAA,gBAAgB,SAASC,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;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,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgBC,SAAAA;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAInB,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,CAAC,QAAQ,IAAIC,cAAA,cAAc,IAAI,CAAC;AAAA,QACxC,UAAU,IAAIC,8BAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAIC,cAAAA,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,QAAQ,QAAQ,IAAIC,cAAA,kBAAkB,IAAI,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,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,4CAAc,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,0CAAY,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;;;"}

package/dist/cjs/Button/Button.styles.cjs

@@ -108,11 +108,16 @@ const getSizeStyles = (size) => ({
   // @ts-ignore TODO: align font<-> button sizes
   fontSize: uikitStyles.theme.fontSizes[size]
 });
+const getIconSizeStyles = (size) => ({
+  height: uikitStyles.theme.sizes[size],
+  width: uikitStyles.theme.sizes[size]
+});
 const getOverrideColors = () => ({
   "& svg .color0": {
     fill: "currentcolor"
   }
 });
+exports.getIconSizeStyles = getIconSizeStyles;
 exports.getOverrideColors = getOverrideColors;
 exports.getRadiusStyles = getRadiusStyles;
 exports.getSizeStyles = getSizeStyles;

package/dist/cjs/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\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    minWidth: \"70px\",\n    whiteSpace: \"nowrap\",\n\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n\n      \"&:not($disabled)\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"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    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.colors.primary_80,\n      },\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n      },\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  // @ts-ignore TODO: align font<-> button sizes\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\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    minWidth: \"70px\",\n    whiteSpace: \"nowrap\",\n\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n\n      \"&:not($disabled)\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n\n    // Default button - no size specified\n    fontFamily: theme.fontFamily.body,\n    fontSize: theme.fontSizes.base,\n    fontWeight: theme.fontWeights.semibold,\n    lineHeight: \"11px\",\n    letterSpacing: 0,\n    height: \"32px\",\n    borderRadius: theme.radii.base,\n    padding: theme.spacing(\"xs\", \"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    color: theme.colors.secondary_60,\n    borderColor: theme.colors.atmo4,\n    backgroundColor: theme.colors.atmo3,\n    cursor: \"not-allowed\",\n  },\n  icon: {\n    margin: 0,\n    padding: 0,\n    height: \"fit-content\",\n    minWidth: \"unset\",\n  },\n  primary: {\n    color: theme.colors.atmo1,\n    backgroundColor: theme.colors.primary,\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: theme.colors.primary_80,\n      },\n    },\n  },\n  primarySubtle: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  primaryGhost: {\n    color: theme.colors.primary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  secondarySubtle: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    border: \"1px solid currentColor\",\n  },\n  secondaryGhost: {\n    color: theme.colors.secondary,\n    backgroundColor: \"transparent\",\n    \"&$disabled\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  semantic: {\n    color: theme.colors.base_dark,\n    backgroundColor: \"transparent\",\n    \"&:not($disabled)\": {\n      \"&:hover, &:focus-visible\": {\n        backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n      },\n    },\n    \"&$disabled\": {\n      backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n    },\n  },\n  secondary: {},\n  ghost: {},\n});\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n  borderRadius: theme.radii[radius],\n});\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  paddingLeft: theme.space[size],\n  paddingRight: theme.space[size],\n  // @ts-ignore TODO: align font<-> button sizes\n  fontSize: theme.fontSizes[size],\n});\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => ({\n  height: theme.sizes[size],\n  width: theme.sizes[size],\n});\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n  \"& svg .color0\": {\n    fill: \"currentcolor\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}

package/dist/cjs/Card/Card.cjs

@@ -4,7 +4,6 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const Card_styles = require("./Card.styles.cjs");
-const Box = require("../Box/Box.cjs");
 const HvCard = (props) => {
   const {
     classes: classesProp,
@@ -19,7 +18,7 @@ const HvCard = (props) => {
   } = useDefaultProps.useDefaultProps("HvCard", props);
   const { classes, css, cx } = Card_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Box.HvBox,
+    "div",
     {
       className: cx(
         "HvIsCardGridElement",

package/dist/cjs/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import { getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBox } from \"../Box\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvAtmosphereColorKeys, HvSemanticColorKeys } from \"../types/tokens\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?:\n    | \"sema0\"\n    | HvSemanticColorKeys\n    | HvAtmosphereColorKeys\n    | \"transparent\";\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvSemanticColorKeys | HvAtmosphereColorKeys;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <HvBox\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor: getColor(bgcolor),\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </HvBox>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsxs","HvBox","getColor","jsx","theme"],"mappings":";;;;;;;AA2Ca,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,YAAAA,WAAW,WAAW;AAGjD,SAAAC,2BAAA;AAAA,IAACC,IAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,IAAI;AAAA,UACF,iBAAiBC,qBAAS,OAAO;AAAA,QAAA,CAClC;AAAA,QACD;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACF,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,mBACtB,UAAA;AAAA,UAAAG,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,IAAI;AAAA,kBACF,QAAQ,WAAW,IAAI;AAAA,kBACvB,iBACE,gBAAgB,UACZ,WACEC,YAAM,MAAA,OAAO,YACbA,YAAAA,MAAM,OAAO,QACfA,YAAAA,MAAM,OAAO,WAAW;AAAA,gBAAA,CAC/B;AAAA,gBACD,QAAQ;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,UACCD,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,QAAA,GACtC;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/Card/Card.tsx"],"sourcesContent":["import { HvColorAny, getColor, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { staticClasses, useClasses } from \"./Card.styles\";\n\nexport { staticClasses as cardClasses };\n\nexport type HvCardClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardProps extends HvBaseProps {\n  /** The renderable content inside the icon slot of the header. */\n  icon?: React.ReactNode;\n  /** Whether the card is selectable. */\n  selectable?: boolean;\n  /** Whether the card is currently selected. */\n  selected?: boolean;\n  /** The background color of the card. */\n  bgcolor?: \"sema0\" | HvColorAny;\n  /**\n   *  The border color at the top of the card. Must be one of palette semantic or atmosphere colors.\n   *  To set another color, the borderTop should be override.\n   */\n  statusColor?: \"sema0\" | HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardClasses;\n}\n\n/**\n * A card is a container for a few short and related pieces of content.\n * It roughly resembles a playing card in size and shape and is intended as a\n * linked short representation of a conceptual unit. For that reason,\n * this pattern must be used as an entry-point for further information.\n */\nexport const HvCard = (props: HvCardProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    icon,\n    selectable = false,\n    selected = false,\n    statusColor = \"sema0\",\n    bgcolor,\n    ...others\n  } = useDefaultProps(\"HvCard\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        \"HvIsCardGridElement\",\n        classes.root,\n        css({\n          backgroundColor: getColor(bgcolor),\n        }),\n        {\n          [classes.selectable]: selectable,\n          [classes.selected]: selected,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.semanticContainer}>\n        <div\n          className={cx(\n            css({\n              height: selected ? 4 : 2,\n              backgroundColor:\n                statusColor === \"sema0\"\n                  ? selected\n                    ? theme.colors.secondary\n                    : theme.colors.atmo4\n                  : theme.colors[statusColor],\n            }),\n            classes.semanticBar\n          )}\n        />\n        <div className={classes.icon}>{icon}</div>\n      </div>\n      {children}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsxs","getColor","jsx","theme"],"mappings":";;;;;;AAoCa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,YAAAA,WAAW,WAAW;AAGjD,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,QAAQ;AAAA,QACR,IAAI;AAAA,UACF,iBAAiBC,qBAAS,OAAO;AAAA,QAAA,CAClC;AAAA,QACD;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAACD,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,mBACtB,UAAA;AAAA,UAAAE,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT,IAAI;AAAA,kBACF,QAAQ,WAAW,IAAI;AAAA,kBACvB,iBACE,gBAAgB,UACZ,WACEC,YAAM,MAAA,OAAO,YACbA,YAAAA,MAAM,OAAO,QACfA,YAAAA,MAAM,OAAO,WAAW;AAAA,gBAAA,CAC/B;AAAA,gBACD,QAAQ;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,UACCD,2BAAA,IAAA,OAAA,EAAI,WAAW,QAAQ,MAAO,UAAK,MAAA;AAAA,QAAA,GACtC;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/dist/cjs/Dialog/Title/Title.cjs

@@ -4,9 +4,8 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MuiDialogTitle = require("@mui/material/DialogTitle");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const iconVariant = require("../../utils/iconVariant.cjs");
-const Title_styles = require("./Title.styles.cjs");
 const context = require("../context.cjs");
-const Typography = require("../../Typography/Typography.cjs");
+const Title_styles = require("./Title.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
 const HvDialogTitle = (props) => {
@@ -37,7 +36,16 @@ const HvDialogTitle = (props) => {
       ...others,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
         icon,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.textWithIcon]: !!icon }), children: !isString ? children : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx({
+              [classes.textWithIcon]: !!icon,
+              [classes.titleText]: isString
+            }),
+            children
+          }
+        )
       ] })
     }
   );

package/dist/cjs/Dialog/Title/Title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","sources":["../../../../src/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { iconVariant } from \"../../utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString ? (\n            children\n          ) : (\n            <HvTypography variant=\"title4\" className={classes.titleText}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useDialogContext","iconVariant","jsx","MuiDialogTitle","jsxs","HvTypography"],"mappings":";;;;;;;;;;;AAoCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,aAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,eAAeC,QAAAA;AAEjB,QAAA,WAAW,OAAO,aAAa;AAErC,QAAM,OAAO,cAAe,YAAYC,YAAA,YAAY,OAAO;AAGzD,SAAAC,2BAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,CAAC,cAAc,IAAI,EAAE,MAAM,GAAG;AAAA,QAC9B,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAACC,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,kBACrB,UAAA;AAAA,QAAA;AAAA,QACDF,2BAAAA,IAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC,KAAA,CAAM,GAClD,UAAA,CAAC,WACA,WAECA,2BAAAA,IAAAG,WAAA,cAAA,EAAa,SAAQ,UAAS,WAAW,QAAQ,WAC/C,SAAA,CACH,EAEJ,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}
+{"version":3,"file":"Title.cjs","sources":["../../../../src/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { iconVariant } from \"../../utils/iconVariant\";\n\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div\n          className={cx({\n            [classes.textWithIcon]: !!icon,\n            [classes.titleText]: isString,\n          })}\n        >\n          {children}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useDialogContext","iconVariant","jsx","MuiDialogTitle","jsxs"],"mappings":";;;;;;;;;;AAkCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,aAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,eAAeC,QAAAA;AAEjB,QAAA,WAAW,OAAO,aAAa;AAErC,QAAM,OAAO,cAAe,YAAYC,YAAA,YAAY,OAAO;AAGzD,SAAAC,2BAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,CAAC,cAAc,IAAI,EAAE,MAAM,GAAG;AAAA,QAC9B,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAACC,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,kBACrB,UAAA;AAAA,QAAA;AAAA,QACDF,2BAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG;AAAA,cACZ,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC;AAAA,cAC1B,CAAC,QAAQ,SAAS,GAAG;AAAA,YAAA,CACtB;AAAA,YAEA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/dist/cjs/Dialog/Title/Title.styles.cjs

@@ -3,15 +3,25 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvDialog-Title", {
-  root: { padding: uikitStyles.theme.space.sm, margin: 0 },
+  root: {
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    // override MUI font
+    padding: uikitStyles.theme.space.sm,
+    margin: 0
+  },
   fullscreen: {},
-  messageContainer: { display: "flex", alignItems: "center" },
+  messageContainer: {
+    display: "flex",
+    alignItems: "center"
+  },
   textWithIcon: {
     marginLeft: uikitStyles.theme.space.xs,
     // 32px is the icon width
     marginRight: `calc(32px + ${uikitStyles.theme.space.xs})`
   },
-  titleText: {}
+  titleText: {
+    ...uikitStyles.theme.typography.title4
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Dialog/Title/Title.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.styles.cjs","sources":["../../../../src/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAASC,kBAAM,MAAM,IAAI,QAAQ,EAAE;AAAA,EAC3C,YAAY,CAAC;AAAA,EACb,kBAAkB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC1D,cAAc;AAAA,IACZ,YAAYA,YAAAA,MAAM,MAAM;AAAA;AAAA,IAExB,aAAa,eAAeA,YAAAA,MAAM,MAAM,EAAE;AAAA,EAC5C;AAAA,EACA,WAAW,CAAC;AACd,CAAC;;;"}
+{"version":3,"file":"Title.styles.cjs","sources":["../../../../src/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: {\n    fontFamily: theme.fontFamily.body, // override MUI font\n    padding: theme.space.sm,\n    margin: 0,\n  },\n  fullscreen: {},\n  messageContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n  },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {\n    ...theme.typography.title4,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,YAAYC,YAAAA,MAAM,WAAW;AAAA;AAAA,IAC7B,SAASA,YAAAA,MAAM,MAAM;AAAA,IACrB,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,CAAC;AAAA,EACb,kBAAkB;AAAA,IAChB,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,YAAYA,YAAAA,MAAM,MAAM;AAAA;AAAA,IAExB,aAAa,eAAeA,YAAAA,MAAM,MAAM,EAAE;AAAA,EAC5C;AAAA,EACA,WAAW;AAAA,IACT,GAAGA,YAAAA,MAAM,WAAW;AAAA,EACtB;AACF,CAAC;;;"}

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -10,6 +10,7 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
+const Button_styles = require("../Button/Button.styles.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const Button = require("../Button/Button.cjs");
 const List = require("../List/List.cjs");
@@ -31,9 +32,10 @@ const HvDropDownMenu = (props) => {
     defaultExpanded = false,
     category = "secondaryGhost",
     variant,
+    size,
     ...others
   } = useDefaultProps.useDefaultProps("HvDropDownMenu", props);
-  const { classes, cx } = DropDownMenu_styles.useClasses(classesProp);
+  const { classes, cx, css } = DropDownMenu_styles.useClasses(classesProp);
   const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId.useUniqueId(idProp, "dropdown-menu");
   const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
@@ -71,9 +73,14 @@ const HvDropDownMenu = (props) => {
           icon: true,
           variant: variant ?? category,
           id: setId.setId(id, "icon-button"),
-          className: cx(classes.icon, { [classes.iconSelected]: open }),
+          className: cx(
+            classes.icon,
+            { [classes.iconSelected]: open },
+            size && icon && css(Button_styles.getIconSizeStyles(size))
+          ),
           "aria-expanded": open,
           disabled,
+          size,
           "aria-label": "Dropdown menu",
           "aria-haspopup": "menu",
           children: icon || /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\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?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<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  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down 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\",\n    variant,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, 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 as any);\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        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\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":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvButton","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.cjs","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton, HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\nimport { getIconSizeStyles } from \"../Button/Button.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\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?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<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}\n\n/**\n * A drop-down 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\",\n    variant,\n    size,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, 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 as any);\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        <HvButton\n          icon\n          variant={variant ?? category}\n          id={setId(id, \"icon-button\")}\n          className={cx(\n            classes.icon,\n            { [classes.iconSelected]: open },\n            size && icon && css(getIconSizeStyles(size))\n          )}\n          aria-expanded={open}\n          disabled={disabled}\n          size={size}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\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":["useDefaultProps","useClasses","useControlled","useUniqueId","getPrevNextFocus","setId","isKey","useMemo","jsx","HvBaseDropdown","HvButton","getIconSizeStyles","MoreOptionsVertical","HvPanel","HvList"],"mappings":"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"}

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -14,6 +14,8 @@ const HvMultiButton = (props) => {
     disabled = false,
     vertical = false,
     variant = "secondarySubtle",
+    size,
+    split,
     ...others
   } = useDefaultProps.useDefaultProps("HvMultiButton", props);
   const { classes, cx } = MultiButton_styles.useClasses(classesProp);
@@ -23,22 +25,37 @@ const HvMultiButton = (props) => {
       className: cx(
         classes.root,
         {
-          [classes.vertical]: vertical
+          [classes.vertical]: vertical,
+          [classes[variant]]: variant,
+          [classes.splitGroup]: split
         },
         className
       ),
       ...others,
-      children: React__default.default.Children.map(children, (child) => {
+      children: React__default.default.Children.map(children, (child, index) => {
         if (React__default.default.isValidElement(child)) {
           const childIsSelected = !!child.props.selected;
-          return React.cloneElement(child, {
-            variant,
-            disabled: disabled || child.props.disabled,
-            className: cx(child.props.className, classes.button, {
-              [classes.selected]: childIsSelected
+          return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            React.cloneElement(child, {
+              variant,
+              disabled: disabled || child.props.disabled,
+              size,
+              className: cx(child.props.className, classes.button, {
+                [classes.firstButton]: index === 0,
+                [classes.lastButton]: index === React__default.default.Children.count(children) - 1,
+                [classes.selected]: childIsSelected
+              })
             }),
-            "aria-pressed": childIsSelected
-          });
+            split && index < React__default.default.Children.count(children) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cx(classes.splitContainer, classes[variant], {
+                  [classes.splitDisabled]: disabled
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.split) })
+              }
+            )
+          ] });
         }
       })
     }

package/dist/cjs/MultiButton/MultiButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.cjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\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}\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    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsx","React","cloneElement"],"mappings":";;;;;;;;AAuBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAG5C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAMC,eAAA,QAAA,SAAS,IAAI,UAAU,CAAC,UAAU;AACnC,YAAAA,eAAA,QAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAAOC,MAAAA,aAAa,OAA6B;AAAA,YAC/C;AAAA,YACA,UAAU,YAAY,MAAM,MAAM;AAAA,YAClC,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,cACnD,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,gBAAgB;AAAA,UAAA,CACjB;AAAA,QACH;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}
+{"version":3,"file":"MultiButton.cjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\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?: HvButtonSize;\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  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n          [classes[variant]]: variant,\n          [classes.splitGroup]: split,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child, index) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return (\n            <>\n              {cloneElement(child as React.ReactElement, {\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]:\n                    index === React.Children.count(children) - 1,\n                  [classes.selected]: childIsSelected,\n                }),\n              })}\n              {split && index < React.Children.count(children) - 1 && (\n                <div\n                  className={cx(classes.splitContainer, classes[variant], {\n                    [classes.splitDisabled]: disabled,\n                  })}\n                >\n                  <div className={cx(classes.split)} />\n                </div>\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsx","React","jsxs","Fragment","cloneElement"],"mappings":";;;;;;;;AA2Ba,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,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAG5C,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,OAAO,CAAC,GAAG;AAAA,UACpB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,iCAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC1C,YAAAC,eAAA,QAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAEKC,2BAAA,KAAAC,qBAAA,EAAA,UAAA;AAAA,YAAAC,MAAAA,aAAa,OAA6B;AAAA,cACzC;AAAA,cACA,UAAU,YAAY,MAAM,MAAM;AAAA,cAClC;AAAA,cACA,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,gBACnD,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,gBACjC,CAAC,QAAQ,UAAU,GACjB,UAAUH,eAAAA,QAAM,SAAS,MAAM,QAAQ,IAAI;AAAA,gBAC7C,CAAC,QAAQ,QAAQ,GAAG;AAAA,cAAA,CACrB;AAAA,YAAA,CACF;AAAA,YACA,SAAS,QAAQA,uBAAM,SAAS,MAAM,QAAQ,IAAI,KACjDD,2BAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,GAAG,QAAQ,gBAAgB,QAAQ,OAAO,GAAG;AAAA,kBACtD,CAAC,QAAQ,aAAa,GAAG;AAAA,gBAAA,CAC1B;AAAA,gBAED,yCAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,KAAK,GAAG;AAAA,cAAA;AAAA,YACrC;AAAA,UAEJ,EAAA,CAAA;AAAA,QAEJ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}