@hitachivantara/uikit-react-core 5.91.2 → 5.92.0

package/dist/esm/Accordion/Accordion.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo } from "react";
-import { DropUpXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Accordion.styles.js";
 import { staticClasses } from "./Accordion.styles.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -55,7 +55,7 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsx(DropUpXS, { rotate: !isOpen }),
+          /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
           label
         ]
       }

package/dist/esm/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport { DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <DropUpXS rotate={!isOpen} />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAC,oBAAA,UAAA,EAAS,QAAQ,CAAC,OAAQ,CAAA;AAAA,UAC1B;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import { forwardRef, useCallback, useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButtonBase } from \"../ButtonBase\";\nimport { useExpandable } from \"../hooks/useExpandable\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /** Content to be rendered. */\n  children: React.ReactNode;\n  /** The accordion label button. */\n  label?: string;\n  /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** An object containing props to be passed onto container holding the accordion children. */\n  containerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** Heading level to apply to accordion button. If ´undefined´ the button won't have a header wrapper. */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /** Whether the accordion is disabled. */\n  disabled?: boolean;\n  /** Typography variant for the label. */\n  labelVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvAccordionClasses;\n  /** Whether to disable the internal usage of `preventDefault` and `stopPropagation` when the `onChange` event is triggered. */\n  disableEventHandling?: boolean; // TODO - remove in v6 as this should be the default behavior: `preventDefault` and `stopPropagation` shouldn't be triggered internally\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvAccordionProps\n>(function HvAccordion(props, ref) {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    disableEventHandling,\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({\n    id,\n    expanded,\n    disabled,\n    defaultExpanded,\n  });\n\n  const handleClick = useCallback(\n    (event: React.SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        toggleOpen();\n      }\n\n      if (!disableEventHandling) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [disableEventHandling, disabled, isOpen, onChange, toggleOpen],\n  );\n\n  const accordionHeader = useMemo(() => {\n    const accordionButton = (\n      <HvTypography\n        {...buttonProps}\n        component={HvButtonBase}\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        onClick={handleClick}\n        variant={labelVariant}\n      >\n        <HvIcon name=\"CaretDown\" rotate={isOpen} size=\"xs\" />\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    label,\n    buttonProps,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div ref={ref} id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...regionProps}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["HvAccordion"],"mappings":";;;;;;;;;AA8CO,MAAM,cAAc,WAGzB,SAASA,aAAY,OAAO,KAAK;AAC3B,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,EAAE,QAAQ,YAAY,aAAa,YAAA,IAAgB,cAAc;AAAA,IACrE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,UAAgC;AAC/B,UAAI,CAAC,UAAU;AACb,mBAAW,OAAO,MAAM;AACb,mBAAA;AAAA,MAAA;AAGb,UAAI,CAAC,sBAAsB;AACzB,cAAM,eAAe;AACrB,cAAM,gBAAgB;AAAA,MAAA;AAAA,IAE1B;AAAA,IACA,CAAC,sBAAsB,UAAU,QAAQ,UAAU,UAAU;AAAA,EAC/D;AAEM,QAAA,kBAAkB,QAAQ,MAAM;AACpC,UAAM,kBACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,WAAW,GAAG,QAAQ,OAAO,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU;AAAA,QAC7D;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QAET,UAAA;AAAA,UAAA,oBAAC,UAAO,MAAK,aAAY,QAAQ,QAAQ,MAAK,MAAK;AAAA,UAClD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAGK,WAAA,iBAAiB,SACtB,kBAEC,oBAAA,cAAA,EAAa,WAAW,IAAI,YAAY,IAAI,SAAS,cACnD,UACH,iBAAA;AAAA,EAAA,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAGC,SAAA,qBAAC,OAAI,EAAA,KAAU,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAChE,UAAA;AAAA,IAAA;AAAA,IACD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,WAAW,EAAE,CAAC,QAAQ,MAAM,GAAG,CAAC,QAAQ;AAAA,QAC9D,QAAQ,CAAC;AAAA,QACR,GAAG;AAAA,QACH,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;"}

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, isValidElement } from "react";
-import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
@@ -77,7 +77,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
             icon: classes.dropDownMenuButton,
             iconSelected: classes.dropDownMenuButtonSelected
           },
-          icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
+          icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical", color: iconColor }),
           placement: "left",
           onClick: (event, action) => {
             handleCallback(event, idProp || "", action);

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const iconColor = (variant === \"semantic\" && \"textDark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n});\n"],"names":["HvActionsGeneric"],"mappings":"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"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { forwardRef, isValidElement } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = forwardRef<\n  React.ComponentRef<\"div\">,\n  HvActionsGenericProps\n>(function HvActionsGeneric(props, ref) {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const iconColor = (variant === \"semantic\" && \"textDark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<HvIcon name=\"DotsVertical\" color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n});\n"],"names":["HvActionsGeneric"],"mappings":";;;;;;;;;;AAoEO,MAAM,mBAAmB,WAG9B,SAASA,kBAAiB,OAAO,KAAK;AAChC,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,qBAAqB,GAAG,kBAAkB,IACzD,yBAAyB,CAAC;AAE5B,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAC1B;AAEI,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,UAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IACL;AAEA,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAAA;AAIJ,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAEJ;AAEA,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAE9C,UAAA,YAAa,YAAY,cAAc,cAAe;AAE5D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAO,oBAAA,QAAA,EAAO,MAAK,gBAAe,OAAO,WAAW;AAAA,UACpD,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WAAW;AACX,2BAAA,OAAO,UAAU,IAAI,MAAyB;AAC7D,kCAAsB,OAAO,MAAM;AAAA,UACrC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,UACd,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AAEM,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAC5D;AAEJ,CAAC;"}

package/dist/esm/AppSwitcher/Action/Action.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
-import { Info } from "@hitachivantara/uikit-react-icons";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
 import { HvAvatar } from "../../Avatar/Avatar.js";
@@ -97,7 +97,15 @@ const HvAppSwitcherAction = ({
                 }
               }
             ),
-            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(Info, { className: classes.iconInfo, id: descriptionElementId }) })
+            description && /* @__PURE__ */ jsx(HvTooltip, { title: description, children: /* @__PURE__ */ jsx(
+              HvIcon,
+              {
+                name: "Info",
+                compact: true,
+                className: classes.iconInfo,
+                id: descriptionElementId
+              }
+            ) })
           ]
         }
       )

package/dist/esm/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement<any>;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport type { ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvIcon } from \"../../icons\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement<any>;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <HvIcon\n              name=\"Info\"\n              compact\n              className={classes.iconInfo}\n              id={descriptionElementId}\n            />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAO;AAAA,gBACP,WAAW,QAAQ;AAAA,gBACnB,IAAI;AAAA,cAAA;AAAA,YAAA,EAER,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}

package/dist/esm/Avatar/Avatar.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiAvatar from "@mui/material/Avatar";
-import { User } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
 import { useImageLoaded } from "../hooks/useImageLoaded.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Avatar.styles.js";
 import { staticClasses } from "./Avatar.styles.js";
 const decreaseSizeMap = {
@@ -61,8 +61,9 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsx(
-      User,
+      HvIcon,
       {
+        name: "User",
         color,
         size: decreaseSizeMap[size],
         className: classes.fallback

package/dist/esm/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport { User } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nconst decreaseSizeMap = {\n  xl: \"lg\",\n  lg: \"md\",\n  md: \"sm\",\n  sm: \"xs\",\n  xs: \"xs\",\n} satisfies Record<HvSize, HvSize>;\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\n/** @deprecated use `HvSize` instead */\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: React.HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvAvatarProps\n>(function HvAvatar(props, ref) {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size: sizeProp,\n    backgroundColor = \"text\",\n    color = \"bgContainer\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const avatarGroupContext = useAvatarGroupContext();\n\n  const size = sizeProp || avatarGroupContext?.size || \"sm\";\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <User\n        color={color}\n        size={decreaseSizeMap[size]}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: React.CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(backgroundColor, \"text\");\n    inlineStyle.color = getColor(color, \"textDimmed\");\n  }\n\n  const statusInlineStyle: React.CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, \"positive\");\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(classes.container, classes.status, classes[variant])}\n      style={statusInlineStyle}\n      {...others}\n    >\n      {badge && (\n        <div\n          className={classes.badge}\n          style={{ backgroundColor: getColor(badge, \"positive\") }}\n        />\n      )}\n      <MuiAvatar\n        component={component}\n        // Consider not using the root and className classes in this component\n        className={cx(classes.root, classes.avatar, classes[size], className)}\n        style={inlineStyle}\n        variant={variant}\n        size={size}\n        {...avatarProps}\n      >\n        {children}\n      </MuiAvatar>\n    </div>\n  );\n});\n"],"names":["HvAvatar"],"mappings":";;;;;;;;;;AAcA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiDO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqB,sBAAsB;AAE3C,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B,WAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAAA;AAIJ,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAAA;AAG7B,MAAI,CAAC,kBAAkB;AACT,gBAAA,kBAAkB,SAAS,iBAAiB,MAAM;AAClD,gBAAA,QAAQ,SAAS,OAAO,YAAY;AAAA,EAAA;AAGlD,QAAM,oBAAyC,CAAC;AAChD,MAAI,QAAQ;AAGJ,UAAA,cAAc,SAAS,QAAQ,UAAU;AAC7B,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EAAA;AAIlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,OAAO,CAAC;AAAA,MACjE,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,SAAS,OAAO,UAAU,EAAE;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"Avatar.js","sources":["../../../src/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport MuiAvatar, { AvatarProps as MuiAvatarProps } from \"@mui/material/Avatar\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny, HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { useAvatarGroupContext } from \"../AvatarGroup/AvatarGroupContext\";\nimport { useImageLoaded } from \"../hooks/useImageLoaded\";\nimport { HvIcon } from \"../icons\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Avatar.styles\";\n\nconst decreaseSizeMap = {\n  xl: \"lg\",\n  lg: \"md\",\n  md: \"sm\",\n  sm: \"xs\",\n  xs: \"xs\",\n} satisfies Record<HvSize, HvSize>;\n\nexport { staticClasses as avatarClasses };\n\nexport type HvAvatarClasses = ExtractNames<typeof useClasses>;\n\nexport type HvAvatarVariant = \"circular\" | \"square\";\n\n/** @deprecated use `HvSize` instead */\nexport type HvAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface HvAvatarProps extends HvBaseProps {\n  /** The component used for the root node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Sets one of the standard sizes of the icons */\n  size?: HvSize;\n  /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */\n  color?: HvColorAny;\n  /** A String representing the background color of the avatar. */\n  backgroundColor?: HvColorAny;\n  /** The `src` attribute for the `img` element. */\n  src?: string;\n  /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */\n  srcSet?: string;\n  /** The `sizes` attribute for the `img` element. */\n  sizes?: string;\n  /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */\n  alt?: string;\n  /**\n   * Attributes applied to the `img` element if the component is used to display an image.\n   * It can be used to listen for the loading error event.\n   */\n  imgProps?: React.HTMLAttributes<HTMLImageElement>;\n  /** A string representing the type of avatar to display, circular or square. */\n  variant?: HvAvatarVariant;\n  /** A string representing the color of the avatar border that represents its status. */\n  status?: string;\n  /** A string representing the color of the avatar badge. */\n  badge?: string;\n  /** Attributes applied to the avatar element. */\n  avatarProps?: MuiAvatarProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarClasses;\n}\n\n/**\n * Avatars can be used to represent a user or a brand.\n * They can show an image, an icon or the initial letters of a name, for example.\n */\nexport const HvAvatar = forwardRef<\n  // no-indent\n  React.ComponentRef<\"div\">,\n  HvAvatarProps\n>(function HvAvatar(props, ref) {\n  const {\n    className,\n    style,\n    classes: classesProp,\n    children: childrenProp,\n    component = \"div\",\n    size: sizeProp,\n    backgroundColor = \"text\",\n    color = \"bgContainer\",\n    src,\n    srcSet,\n    sizes,\n    alt,\n    imgProps,\n    status,\n    badge,\n    variant = \"circular\",\n    avatarProps,\n    ...others\n  } = useDefaultProps(\"HvAvatar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const avatarGroupContext = useAvatarGroupContext();\n\n  const size = sizeProp || avatarGroupContext?.size || \"sm\";\n\n  let children: React.ReactNode;\n\n  // Use a hook instead of onError on the img element to support server-side rendering.\n  const imageLoaded = useImageLoaded(src, srcSet);\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && imageLoaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        className={classes.img}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    [children] = alt;\n  } else {\n    children = (\n      <HvIcon\n        name=\"User\"\n        color={color}\n        size={decreaseSizeMap[size]}\n        className={classes.fallback}\n      />\n    );\n  }\n\n  const inlineStyle: React.CSSProperties = {\n    ...style,\n  };\n\n  if (component != null && typeof component !== \"string\") {\n    // override border-radius with custom components\n    inlineStyle.borderRadius = \"50%\";\n  }\n\n  if (!hasImgNotFailing) {\n    inlineStyle.backgroundColor = getColor(backgroundColor, \"text\");\n    inlineStyle.color = getColor(color, \"textDimmed\");\n  }\n\n  const statusInlineStyle: React.CSSProperties = {};\n  if (status) {\n    // set the status border. we're using the boxShadow property to set the border\n    // to be inside the container and not on its edge.\n    const statusColor = getColor(status, \"positive\");\n    statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx(classes.container, classes.status, classes[variant])}\n      style={statusInlineStyle}\n      {...others}\n    >\n      {badge && (\n        <div\n          className={classes.badge}\n          style={{ backgroundColor: getColor(badge, \"positive\") }}\n        />\n      )}\n      <MuiAvatar\n        component={component}\n        // Consider not using the root and className classes in this component\n        className={cx(classes.root, classes.avatar, classes[size], className)}\n        style={inlineStyle}\n        variant={variant}\n        size={size}\n        {...avatarProps}\n      >\n        {children}\n      </MuiAvatar>\n    </div>\n  );\n});\n"],"names":["HvAvatar"],"mappings":";;;;;;;;;;AAcA,MAAM,kBAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiDO,MAAM,WAAW,WAItB,SAASA,UAAS,OAAO,KAAK;AACxB,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,MAAM;AAAA,IACN,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,qBAAqB,sBAAsB;AAE3C,QAAA,OAAO,YAAY,oBAAoB,QAAQ;AAEjD,MAAA;AAGE,QAAA,cAAc,eAAe,KAAK,MAAM;AAC9C,QAAM,SAAS,OAAO;AAChB,QAAA,mBAAmB,UAAU,gBAAgB;AAEnD,MAAI,kBAAkB;AAElB,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,QAAQ;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA,WAEO,gBAAgB,MAAM;AACpB,eAAA;AAAA,EAAA,WACF,UAAU,KAAK;AACxB,KAAC,QAAQ,IAAI;AAAA,EAAA,OACR;AAEH,eAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,MAAM,gBAAgB,IAAI;AAAA,QAC1B,WAAW,QAAQ;AAAA,MAAA;AAAA,IACrB;AAAA,EAAA;AAIJ,QAAM,cAAmC;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,aAAa,QAAQ,OAAO,cAAc,UAAU;AAEtD,gBAAY,eAAe;AAAA,EAAA;AAG7B,MAAI,CAAC,kBAAkB;AACT,gBAAA,kBAAkB,SAAS,iBAAiB,MAAM;AAClD,gBAAA,QAAQ,SAAS,OAAO,YAAY;AAAA,EAAA;AAGlD,QAAM,oBAAyC,CAAC;AAChD,MAAI,QAAQ;AAGJ,UAAA,cAAc,SAAS,QAAQ,UAAU;AAC7B,sBAAA,YAAY,yBAAyB,WAAW;AAAA,EAAA;AAIlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,QAAQ,QAAQ,OAAO,CAAC;AAAA,MACjE,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,UAAA;AAAA,QACC,SAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,OAAO,EAAE,iBAAiB,SAAS,OAAO,UAAU,EAAE;AAAA,UAAA;AAAA,QACxD;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YAEA,WAAW,GAAG,QAAQ,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS;AAAA,YACpE,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACC,GAAG;AAAA,YAEH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}

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

@@ -7,19 +7,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     width: 32,
     minWidth: 32,
     height: 32,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: theme.colors.bgHover,
-      borderRadius: theme.radii.round
+    ":hover": {
+      backgroundColor: theme.colors.bgHover
     }
   },
   disabled: {
     cursor: "not-allowed",
-    pointerEvents: "initial",
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.round,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.round,\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/BaseCheckBox/CheckBoxIcon.js

@@ -2,14 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
+import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvCheckBoxIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     color: theme.colors.bgContainer,
     borderRadius: theme.radii.base,
     border: `1px solid ${theme.colors.borderStrong}`
@@ -20,7 +15,8 @@ const { useClasses } = createClasses("HvCheckBoxIcon", {
     color: theme.colors.bgContainer
   },
   indeterminate: {
-    color: theme.colors.textSubtle
+    color: theme.colors.textSubtle,
+    backgroundColor: theme.colors.bgContainer
   },
   semantic: {
     "&[data-variant=indeterminate]": {
@@ -59,7 +55,7 @@ const HvCheckBoxIcon = (props) => {
     }
   }, [variant]);
   return /* @__PURE__ */ jsx(
-    "svg",
+    SvgBase,
     {
       viewBox: "0 0 14 14",
       "data-variant": variant,

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxIcon.js","sources":["../../../src/BaseCheckBox/CheckBoxIcon.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvBaseCheckBoxProps } from \"./BaseCheckBox\";\n\nconst { useClasses } = createClasses(\"HvCheckBoxIcon\", {\n  root: {\n    display: \"inline-flex\",\n    fill: \"currentcolor\",\n    width: \"1em\",\n    height: \"1em\",\n    flexShrink: 0,\n\n    fontSize: 16,\n    color: theme.colors.bgContainer,\n    borderRadius: theme.radii.base,\n    border: `1px solid ${theme.colors.borderStrong}`,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  indeterminate: {\n    color: theme.colors.textSubtle,\n  },\n  semantic: {\n    \"&[data-variant=indeterminate]\": {\n      backgroundColor: theme.colors.bgContainer,\n      borderColor: theme.colors.borderStrong,\n    },\n  },\n  disabled: {\n    color: theme.colors.bgDisabled,\n    borderColor: theme.colors.borderDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n    \"&[data-variant=checked],&[data-variant=indeterminate]\": {\n      color: theme.colors.textDisabled,\n      borderColor: \"currentcolor\",\n    },\n  },\n});\n\nexport type HvCheckBoxIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxIconProps\n  extends Pick<HvBaseCheckBoxProps, \"className\" | \"disabled\" | \"semantic\"> {\n  variant?: \"default\" | \"checked\" | \"indeterminate\";\n  classes?: HvCheckBoxIconClasses;\n}\n\nexport const HvCheckBoxIcon = (props: HvCheckBoxIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    variant,\n    disabled,\n    semantic,\n  } = useDefaultProps(\"HvCheckBoxIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const d = useMemo(() => {\n    switch (variant) {\n      case \"checked\":\n        return \"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\";\n      case \"indeterminate\":\n        return \"m3,8l8,0l0,-2l-8,0l0,2z\";\n      case \"default\":\n      default:\n        return \"m0,0l16,0l0,16l-16,0l0,-16z\";\n    }\n  }, [variant]);\n\n  return (\n    <svg\n      viewBox=\"0 0 14 14\"\n      data-variant={variant}\n      className={cx(classes.root, className, {\n        [classes.checked]: variant === \"checked\",\n        [classes.indeterminate]: variant === \"indeterminate\",\n        [classes.semantic]: semantic,\n        [classes.disabled]: disabled,\n      })}\n    >\n      <path d={d} />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,EAAE,WAAA,IAAe,cAAc,kBAAkB;AAAA,EACrD,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,yDAAyD;AAAA,MACvD,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;AAUY,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,IAAI,QAAQ,MAAM;AACtB,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AAAA,MACL;AACS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAc;AAAA,MACd,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QAC/B,CAAC,QAAQ,aAAa,GAAG,YAAY;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MAED,UAAA,oBAAC,UAAK,EAAM,CAAA;AAAA,IAAA;AAAA,EACd;AAEJ;"}
+{"version":3,"file":"CheckBoxIcon.js","sources":["../../../src/BaseCheckBox/CheckBoxIcon.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { SvgBase } from \"../icons\";\nimport type { HvBaseCheckBoxProps } from \"./BaseCheckBox\";\n\nconst { useClasses } = createClasses(\"HvCheckBoxIcon\", {\n  root: {\n    color: theme.colors.bgContainer,\n    borderRadius: theme.radii.base,\n    border: `1px solid ${theme.colors.borderStrong}`,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  indeterminate: {\n    color: theme.colors.textSubtle,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  semantic: {\n    \"&[data-variant=indeterminate]\": {\n      backgroundColor: theme.colors.bgContainer,\n      borderColor: theme.colors.borderStrong,\n    },\n  },\n  disabled: {\n    color: theme.colors.bgDisabled,\n    borderColor: theme.colors.borderDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n    \"&[data-variant=checked],&[data-variant=indeterminate]\": {\n      color: theme.colors.textDisabled,\n      borderColor: \"currentcolor\",\n    },\n  },\n});\n\nexport type HvCheckBoxIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxIconProps\n  extends Pick<HvBaseCheckBoxProps, \"className\" | \"disabled\" | \"semantic\"> {\n  variant?: \"default\" | \"checked\" | \"indeterminate\";\n  classes?: HvCheckBoxIconClasses;\n}\n\nexport const HvCheckBoxIcon = (props: HvCheckBoxIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    variant,\n    disabled,\n    semantic,\n  } = useDefaultProps(\"HvCheckBoxIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const d = useMemo(() => {\n    switch (variant) {\n      case \"checked\":\n        return \"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\";\n      case \"indeterminate\":\n        return \"m3,8l8,0l0,-2l-8,0l0,2z\";\n      case \"default\":\n      default:\n        return \"m0,0l16,0l0,16l-16,0l0,-16z\";\n    }\n  }, [variant]);\n\n  return (\n    <SvgBase\n      viewBox=\"0 0 14 14\"\n      data-variant={variant}\n      className={cx(classes.root, className, {\n        [classes.checked]: variant === \"checked\",\n        [classes.indeterminate]: variant === \"indeterminate\",\n        [classes.semantic]: semantic,\n        [classes.disabled]: disabled,\n      })}\n    >\n      <path d={d} />\n    </SvgBase>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWA,MAAM,EAAE,WAAA,IAAe,cAAc,kBAAkB;AAAA,EACrD,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,UAAU;AAAA,IACR,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,yDAAyD;AAAA,MACvD,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;AAUY,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,IAAI,QAAQ,MAAM;AACtB,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AAAA,MACL;AACS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAc;AAAA,MACd,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QAC/B,CAAC,QAAQ,aAAa,GAAG,YAAY;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MAED,UAAA,oBAAC,UAAK,EAAM,CAAA;AAAA,IAAA;AAAA,EACd;AAEJ;"}

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -3,10 +3,10 @@ import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElemen
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
@@ -90,7 +90,6 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
     },
     [isOpen, disabled, setIsOpen, onToggle, referenceElement]
   );
-  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;
   const defaultHeaderElement = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -120,10 +119,11 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
           }
         ),
         /* @__PURE__ */ jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsx(
-          ExpanderComponent,
+          HvIcon,
           {
-            iconSize: "XS",
-            color: disabled ? "textDisabled" : void 0,
+            name: "CaretDown",
+            size: "xs",
+            rotate: isOpen,
             className: classes.arrow
           }
         ) })

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

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

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

@@ -24,6 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     display: "inline-flex",
     width: "100%",
     position: "relative",
+    overflow: "hidden",
     margin: 0,
     borderRadius: theme.radii.base,
     height: "32px",
@@ -32,7 +33,9 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     boxSizing: "border-box",
     backgroundColor: theme.colors.bgContainer,
     fontFamily: theme.fontFamily.body,
-    ":hover:not($disabled,$invalid,$readOnly)": {
+    alignItems: "stretch",
+    ...theme.typography.body,
+    ":hover:not($disabled,$readOnly)": {
       borderColor: theme.colors.primary
     },
     ":focus-within:not($disabled)": {

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

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

package/dist/esm/BaseRadio/RadioIcon.js

@@ -1,14 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
+import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvRadioIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     borderRadius: theme.radii.full,
     border: `1px solid ${theme.colors.borderStrong}`,
     backgroundColor: theme.colors.bgContainer
@@ -37,7 +32,7 @@ const HvRadioIcon = (props) => {
   } = useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsx(
-    "svg",
+    SvgBase,
     {
       viewBox: "0 0 16 16",
       className: cx(classes.root, className, {

package/dist/esm/BaseRadio/RadioIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIcon.js","sources":["../../../src/BaseRadio/RadioIcon.tsx"],"sourcesContent":["import {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvBaseRadioProps } from \"./BaseRadio\";\n\nconst { useClasses } = createClasses(\"HvRadioIcon\", {\n  root: {\n    display: \"inline-flex\",\n    fill: \"currentcolor\",\n    width: \"1em\",\n    height: \"1em\",\n    flexShrink: 0,\n\n    fontSize: 16,\n    borderRadius: theme.radii.full,\n    border: `1px solid ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  disabled: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n  },\n  checkedDisabled: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.borderDisabled,\n    color: theme.colors.bgDisabled,\n  },\n});\n\nexport type HvRadioIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioIconProps\n  extends Pick<HvBaseRadioProps, \"checked\" | \"disabled\" | \"className\"> {\n  classes?: HvRadioIconClasses;\n}\n\nexport const HvRadioIcon = (props: HvRadioIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    checked,\n    disabled,\n  } = useDefaultProps(\"HvRadioIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      className={cx(classes.root, className, {\n        [classes.checked]: checked,\n        [classes.disabled]: disabled,\n        [classes.checkedDisabled]: checked && disabled,\n      })}\n    >\n      {checked && <circle cx=\"8\" cy=\"8\" r=\"4.5\" />}\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AASA,MAAM,EAAE,WAAA,IAAe,cAAc,eAAe;AAAA,EAClD,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;AASY,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,eAAe,GAAG,WAAW;AAAA,MAAA,CACvC;AAAA,MAEA,UAAA,+BAAY,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,MAAM,CAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ;"}
+{"version":3,"file":"RadioIcon.js","sources":["../../../src/BaseRadio/RadioIcon.tsx"],"sourcesContent":["import {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { SvgBase } from \"../icons\";\nimport type { HvBaseRadioProps } from \"./BaseRadio\";\n\nconst { useClasses } = createClasses(\"HvRadioIcon\", {\n  root: {\n    borderRadius: theme.radii.full,\n    border: `1px solid ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  disabled: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n  },\n  checkedDisabled: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.borderDisabled,\n    color: theme.colors.bgDisabled,\n  },\n});\n\nexport type HvRadioIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioIconProps\n  extends Pick<HvBaseRadioProps, \"checked\" | \"disabled\" | \"className\"> {\n  classes?: HvRadioIconClasses;\n}\n\nexport const HvRadioIcon = (props: HvRadioIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    checked,\n    disabled,\n  } = useDefaultProps(\"HvRadioIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  return (\n    <SvgBase\n      viewBox=\"0 0 16 16\"\n      className={cx(classes.root, className, {\n        [classes.checked]: checked,\n        [classes.disabled]: disabled,\n        [classes.checkedDisabled]: checked && disabled,\n      })}\n    >\n      {checked && <circle cx=\"8\" cy=\"8\" r=\"4.5\" />}\n    </SvgBase>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,EAAE,WAAA,IAAe,cAAc,eAAe;AAAA,EAClD,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;AASY,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,eAAe,GAAG,WAAW;AAAA,MAAA,CACvC;AAAA,MAEA,UAAA,+BAAY,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,MAAM,CAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ;"}

package/dist/esm/BreadCrumb/PathElement/PathElement.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./PathElement.styles.js";
 import { staticClasses } from "./PathElement.styles.js";
 const HvPathElement = ({
@@ -11,8 +11,10 @@ const HvPathElement = ({
   return /* @__PURE__ */ jsxs("li", { className: classes.centerContainer, children: [
     children,
     !last && /* @__PURE__ */ jsx(
-      DropRightXS,
+      HvIcon,
       {
+        name: "CaretRight",
+        size: "xs",
         className: classes.separatorContainer,
         color: "textDisabled"
       }