@hitachivantara/uikit-react-core 5.66.14 → 5.67.0

package/dist/esm/Table/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type as keyof HvTableHeaderClasses],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4,\n                ),\n              },\n            }),\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes[\n              `align${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n            [classes[\n              `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n            ]]: variant !== \"default\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(classes.headerContent, {\n            [classes[\n              `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n          })}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/Table/TableHeader/TableHeader.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo } from \"react\";\nimport { alpha, hexToRgb } from \"@mui/material/styles\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvTypography, HvTypographyProps } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { capitalize } from \"../../utils/helpers\";\nimport {\n  HvTableCellAlign,\n  HvTableCellType,\n  HvTableCellVariant,\n} from \"../Table\";\nimport TableContext from \"../TableContext\";\nimport TableSectionContext from \"../TableSectionContext\";\nimport { staticClasses, useClasses } from \"./TableHeader.styles\";\nimport { getSortIcon, isParagraph } from \"./utils\";\n\nexport { staticClasses as tableHeaderClasses };\n\nexport type HvTableHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTableHeaderProps\n  extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, \"align\"> {\n  /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */\n  component?: React.ElementType;\n  /** Content to be rendered */\n  children?: React.ReactNode;\n  /** The scope of cells that the header element relates to. */\n  scope?: \"col\" | \"row\" | \"colgroup\" | \"rowgroup\";\n  /** Set the text-align on the table cell content. */\n  align?: HvTableCellAlign;\n  /** Sets the cell's variant. */\n  variant?: HvTableCellVariant;\n  /** Specify the cell type. The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */\n  type?: HvTableCellType;\n  /** The cell is part of a sticky column. */\n  stickyColumn?: boolean;\n  /** The cell is part of the last sticky to the left column. */\n  stickyColumnMostLeft?: boolean;\n  /** The cell is part of the first sticky to the right column. */\n  stickyColumnLeastRight?: boolean;\n  /** The cell is part of the first column in the group. */\n  groupColumnMostLeft?: boolean;\n  /** The cell is part of the last column in the group. */\n  groupColumnMostRight?: boolean;\n  /** Whether or not the cell is sorted */\n  sorted?: boolean;\n  /** Whether or not the cell is sortable */\n  sortable?: boolean;\n  /** Set sort direction icon and aria-sort. */\n  sortDirection?: \"ascending\" | \"descending\" | false;\n  /** Extra props to be passed onto the text in the header. */\n  headerTextProps?: HvTypographyProps;\n  /** Whether or not the cell is resizable */\n  resizable?: boolean;\n  /** Whether or not the cell is being resized */\n  resizing?: boolean;\n  /** The resize props injected in the resize handler */\n  resizerProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTableHeaderClasses;\n  /** Extra props to be passed onto the sort button in the header. */\n  sortButtonProps?: HvButtonProps;\n}\n\nconst defaultComponent = \"th\";\n\n/**\n * `HvTableHeader` acts as a `th` element and inherits styles from its context\n */\nexport const HvTableHeader = forwardRef<HTMLElement, HvTableHeaderProps>(\n  (props, externalRef) => {\n    const {\n      children,\n      component,\n      className,\n      style: styleProp,\n      classes: classesProp,\n      scope: scopeProp,\n      align = \"inherit\",\n      variant = \"default\",\n      type: typeProp,\n      stickyColumn = false,\n      stickyColumnMostLeft = false,\n      stickyColumnLeastRight = false,\n      groupColumnMostLeft = false,\n      groupColumnMostRight = false,\n      sortDirection = \"none\",\n      sorted,\n      sortable,\n      headerTextProps,\n      resizerProps = {},\n      resizable = false,\n      resizing = false,\n      sortButtonProps,\n      ...others\n    } = useDefaultProps(\"HvTableHeader\", props);\n    const { classes, cx, css } = useClasses(classesProp);\n\n    const { colors } = useTheme();\n    const tableContext = useContext(TableContext);\n    const tableSectionContext = useContext(TableSectionContext);\n\n    const type = typeProp || tableSectionContext?.type || \"body\";\n    const isHeadCell = type === \"head\";\n\n    const scope = scopeProp ?? (isHeadCell ? \"col\" : \"row\");\n\n    const Sort = useMemo(\n      () => getSortIcon(sorted && sortDirection),\n      [sorted, sortDirection],\n    );\n\n    const Component =\n      component || tableContext?.components?.Th || defaultComponent;\n\n    const role =\n      Component === defaultComponent\n        ? null\n        : isHeadCell\n          ? \"columnheader\"\n          : \"rowheader\";\n    const paragraph = isParagraph(children);\n\n    // Keep the header sticky\n    const style = stickyColumn\n      ? { ...styleProp, position: \"sticky\" }\n      : styleProp;\n\n    return (\n      <Component\n        ref={externalRef}\n        role={role}\n        scope={scope}\n        style={style}\n        className={cx(\n          classes.root,\n          classes[type as keyof HvTableHeaderClasses],\n          type === \"body\" &&\n            css({\n              [`&.${staticClasses.sorted}`]: {\n                backgroundColor: alpha(\n                  hexToRgb(colors?.atmo1 || theme.colors.atmo1),\n                  0.4,\n                ),\n              },\n            }),\n          {\n            [classes.groupColumnMostLeft]: groupColumnMostLeft,\n            [classes.groupColumnMostRight]: groupColumnMostRight,\n            [classes.sortable]: sortable,\n            [classes.sorted]: sorted,\n            [classes.resizable]: resizable,\n            [classes.resizing]: resizing,\n            [classes.stickyColumn]: stickyColumn,\n            [classes.stickyColumnMostLeft]: stickyColumnMostLeft,\n            [classes.stickyColumnLeastRight]: stickyColumnLeastRight,\n            [classes.variantList]: tableContext.variant === \"listrow\",\n            [classes[\n              `align${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n            [classes[\n              `variant${capitalize(variant)}` as keyof HvTableHeaderClasses\n            ]]: variant !== \"default\",\n          },\n          className,\n        )}\n        aria-sort={sortable ? sortDirection : undefined}\n        {...others}\n      >\n        <div\n          className={cx(classes.headerContent, {\n            [classes[\n              `alignFlex${capitalize(align)}` as keyof HvTableHeaderClasses\n            ]]: align !== \"inherit\",\n          })}\n        >\n          {isHeadCell && sortable && (\n            <HvButton\n              className={classes.sortButton}\n              icon\n              overrideIconColors={false}\n              aria-label=\"Sort\"\n              {...sortButtonProps}\n            >\n              <Sort className={classes.sortIcon} />\n            </HvButton>\n          )}\n          <HvTypography\n            component=\"div\"\n            className={cx({\n              [classes.headerText]: !paragraph,\n              [classes.headerParagraph]: paragraph,\n              [classes.sortableHeaderText]: sortable,\n            })}\n            variant=\"label\"\n            {...headerTextProps}\n          >\n            {children}\n          </HvTypography>\n          {resizable && <div {...resizerProps} className={classes.resizer} />}\n        </div>\n      </Component>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/Table/TableHeader/TableHeader.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTableHeader", {
   root: {
     "--first-row-cell-height": "52px",

package/dist/esm/Table/TableRow/TableRow.styles.js

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { getBorderStyles } from "../utils/utils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTableRow", {
   /** Styles applied to the component root class. */
   root: {

package/dist/esm/Table/renderers/ProgressColumnCell/ProgressColumnCell.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvTable-ProgressColumnCell",
   {

package/dist/esm/Table/renderers/SwitchColumnCell/SwitchColumnCell.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const switchStyle = {
   cursor: "pointer",
   display: "inline-flex",

package/dist/esm/TableSection/TableSection.styles.js

@@ -1,5 +1,4 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../Table/TableContainer/TableContainer.styles.js";
 import "../Table/TableContainer/TableContainer.js";
 import { staticClasses as staticClasses$2 } from "../Table/TableHeader/TableHeader.styles.js";
@@ -10,6 +9,7 @@ import { staticClasses as staticClasses$4 } from "../Table/TableCell/TableCell.s
 import "../Table/TableCell/TableCell.js";
 import { staticClasses as staticClasses$5 } from "../BulkActions/BulkActions.styles.js";
 import "react/jsx-runtime";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 import { staticClasses as staticClasses$6 } from "../Pagination/Pagination.styles.js";
 import "react";
 import "@mui/material/Hidden";

package/dist/esm/Tabs/Tabs.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTabs", {
   root: {
     minHeight: 0,

package/dist/esm/Tag/Tag.js

@@ -2,10 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Chip from "@mui/material/Chip";
 import { CloseXS, CheckboxCheck, Checkbox } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../hooks/useControlled.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
 const getCategoricalColor = (customColor, colors) => {

package/dist/esm/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AAClB,YAAI,SAAU;AACV,YAAA,WAA0B,eAAA,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport Chip, { ChipProps as MuiChipProps } from \"@mui/material/Chip\";\nimport {\n  Checkbox,\n  CheckboxCheck,\n  CloseXS,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Tag.styles\";\n\nexport { staticClasses as tagClasses };\n\nexport type HvTagClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTagProps\n  extends Omit<MuiChipProps, \"color\" | \"classes\" | \"onSelect\"> {\n  /** The label of the tag element. */\n  label?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** The type of the tag element. A tag can be of semantic or categoric type. */\n  type?: \"semantic\" | \"categorical\";\n  /** Background color to be applied to the tag */\n  color?: HvColorAny;\n  /** Icon used to customize the delete icon in the Chip element */\n  deleteIcon?: React.ReactElement;\n  /**\n   * The callback fired when the delete icon is pressed.\n   * This function has to be provided to the component, in order to render the delete icon\n   * */\n  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Callback triggered when any item is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLElement>, selected?: boolean) => void;\n  /** Aria properties to apply to delete button in tag\n   * @deprecated no longer used\n   */\n  deleteButtonArialLabel?: string;\n  /** Props to apply to delete icon */\n  deleteButtonProps?: React.HTMLAttributes<HTMLDivElement>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTagClasses;\n  /** @ignore */\n  ref?: MuiChipProps[\"ref\"];\n  /** @ignore */\n  component?: MuiChipProps[\"component\"];\n  /** Determines whether or not the tag is selectable. */\n  selectable?: boolean;\n  /** Defines if the tag is selected. When defined the tag state becomes controlled. */\n  selected?: boolean;\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n}\n\nconst getCategoricalColor = (customColor?: HvColorAny, colors?: any) => {\n  return (customColor && colors?.[customColor]) || customColor || colors?.cat1;\n};\n\n/**\n * A Tag is one word that describes a specific aspect of an asset. A single asset can have\n * multiple tags.\n * Use tags to highlight an item's status for quick recognition and navigation\n * Use color to indicate meanings that users can learn and recognize across products\n *\n * It leverages the Chip component from Material UI\n */\nexport const HvTag = forwardRef<HTMLDivElement, HvTagProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    style,\n    label,\n    disabled,\n    type = \"semantic\",\n    selectable,\n    selected,\n    defaultSelected = false,\n    color,\n    deleteIcon,\n    onDelete,\n    onClick,\n    // TODO: remove from API\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    deleteButtonArialLabel = \"Delete tag\",\n    deleteButtonProps = {},\n    ...others\n  } = useDefaultProps(\"HvTag\", props);\n  const { colors } = useTheme();\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected),\n  );\n\n  const defaultDeleteIcon = (\n    <CloseXS\n      className={cx(classes.button, classes.tagButton)}\n      iconSize=\"XS\"\n      {...deleteButtonProps}\n    />\n  );\n\n  const categoricalBackgroundColor =\n    type === \"categorical\" ? getCategoricalColor(color, colors) : undefined;\n\n  const backgroundColor =\n    (type === \"semantic\" && getColor(color, \"neutral_20\")) ||\n    (type === \"categorical\" && `${categoricalBackgroundColor}30`) ||\n    undefined;\n\n  const isClickable = !!(onClick || onDelete) && !disabled;\n\n  const clickableClass = css({\n    \"&:hover\": {\n      boxShadow: `0 0 0 1pt ${categoricalBackgroundColor}`,\n    },\n  });\n\n  const colorOverride = (disabled && [\"atmo3\", \"secondary_60\"]) || undefined;\n\n  const avatarIcon = isSelected ? (\n    <CheckboxCheck color={colorOverride} iconSize=\"XS\" />\n  ) : (\n    <Checkbox color={colorOverride} iconSize=\"XS\" />\n  );\n\n  return (\n    <Chip\n      ref={ref}\n      label={label}\n      disabled={disabled}\n      className={cx({ [clickableClass]: isClickable }, className)}\n      style={{\n        ...(disabled ? null : { backgroundColor }),\n        ...style,\n      }}\n      classes={{\n        root: cx(classes.root, classes.chipRoot, {\n          [classes.disabled]: disabled,\n          [classes.clickable]: isClickable,\n          [classes.categorical]: type === \"categorical\",\n          [classes.categoricalFocus]: type === \"categorical\" && !disabled,\n          [classes.categoricalDisabled]: type === \"categorical\" && disabled,\n        }),\n        label: classes.label,\n        deleteIcon: cx(classes.deleteIcon, {\n          [classes.disabledDeleteIcon]: disabled,\n        }),\n      }}\n      deleteIcon={deleteIcon || defaultDeleteIcon}\n      onDelete={disabled ? undefined : onDelete}\n      onClick={(event) => {\n        if (disabled) return;\n        if (selectable) setIsSelected(!isSelected);\n        onClick?.(event, !isSelected);\n      }}\n      aria-pressed={isSelected}\n      {...(selectable &&\n        type === \"semantic\" && {\n          avatar: avatarIcon,\n        })}\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AA0DA,MAAM,sBAAsB,CAAC,aAA0B,WAAiB;AACtE,SAAQ,eAAe,SAAS,WAAW,KAAM,eAAe,QAAQ;AAC1E;AAUO,MAAM,QAAQ,WAAuC,CAAC,OAAO,QAAQ;AACpE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,yBAAyB;AAAA,IACzB,oBAAoB,CAAC;AAAA,IACrB,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAC5B,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,WAAW,WAAW;AAE7C,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGzB,QAAM,oBACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,SAAS;AAAA,MAC/C,UAAS;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAIR,QAAM,6BACJ,SAAS,gBAAgB,oBAAoB,OAAO,MAAM,IAAI;AAE1D,QAAA,kBACH,SAAS,cAAc,SAAS,OAAO,YAAY,KACnD,SAAS,iBAAiB,GAAG,0BAA0B,QACxD;AAEF,QAAM,cAAc,CAAC,EAAE,WAAW,aAAa,CAAC;AAEhD,QAAM,iBAAiB,IAAI;AAAA,IACzB,WAAW;AAAA,MACT,WAAW,aAAa,0BAA0B;AAAA,IACpD;AAAA,EAAA,CACD;AAED,QAAM,gBAAiB,YAAY,CAAC,SAAS,cAAc,KAAM;AAEjE,QAAM,aAAa,aAChB,oBAAA,eAAA,EAAc,OAAO,eAAe,UAAS,KAAK,CAAA,IAElD,oBAAA,UAAA,EAAS,OAAO,eAAe,UAAS,KAAK,CAAA;AAI9C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,EAAE,CAAC,cAAc,GAAG,YAAA,GAAe,SAAS;AAAA,MAC1D,OAAO;AAAA,QACL,GAAI,WAAW,OAAO,EAAE,gBAAgB;AAAA,QACxC,GAAG;AAAA,MACL;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,QAAQ,UAAU;AAAA,UACvC,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,SAAS,GAAG;AAAA,UACrB,CAAC,QAAQ,WAAW,GAAG,SAAS;AAAA,UAChC,CAAC,QAAQ,gBAAgB,GAAG,SAAS,iBAAiB,CAAC;AAAA,UACvD,CAAC,QAAQ,mBAAmB,GAAG,SAAS,iBAAiB;AAAA,QAAA,CAC1D;AAAA,QACD,OAAO,QAAQ;AAAA,QACf,YAAY,GAAG,QAAQ,YAAY;AAAA,UACjC,CAAC,QAAQ,kBAAkB,GAAG;AAAA,QAAA,CAC/B;AAAA,MACH;AAAA,MACA,YAAY,cAAc;AAAA,MAC1B,UAAU,WAAW,SAAY;AAAA,MACjC,SAAS,CAAC,UAAU;AAClB,YAAI,SAAU;AACV,YAAA,WAA0B,eAAA,CAAC,UAAU;AAC/B,kBAAA,OAAO,CAAC,UAAU;AAAA,MAC9B;AAAA,MACA,gBAAc;AAAA,MACb,GAAI,cACH,SAAS,cAAc;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MACD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Tag/Tag.styles.js

@@ -1,7 +1,7 @@
 import { chipClasses } from "@mui/material/Chip";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTag", {
   root: {
     color: theme.colors.base_dark,

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -1,6 +1,6 @@
 import { chipClasses } from "@mui/material/Chip";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 import { staticClasses as staticClasses$1 } from "../BaseInput/BaseInput.styles.js";
 import { staticClasses as staticClasses$2 } from "../Forms/Suggestions/Suggestions.styles.js";
 const { staticClasses, useClasses } = createClasses("HvTagsInput", {

package/dist/esm/TextArea/TextArea.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTextArea", {
   root: { display: "inline-block", width: "100%" },
   disabled: {},

package/dist/esm/TimeAgo/TimeAgo.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTimeAgo", {
   root: {}
 });

package/dist/esm/TimePicker/TimePicker.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { useClasses, staticClasses } = createClasses("HvTimePicker", {
   root: {
     position: "relative"

package/dist/esm/TimePicker/Unit/Unit.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTimePickerUnit", {
   root: {
     display: "flex",

package/dist/esm/Tooltip/Tooltip.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect } from "react";
 import Fade from "@mui/material/Fade";
 import Tooltip from "@mui/material/Tooltip";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { getElementById } from "../utils/document.js";
 import { useClasses } from "./Tooltip.styles.js";
 import { staticClasses } from "./Tooltip.styles.js";

package/dist/esm/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAkEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EAAA;AAItC,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from \"react\";\nimport Fade from \"@mui/material/Fade\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: React.ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n *\n * If you are looking to wrap an icon only button with a tooltip, take a look at the `HvIconButton` component\n * which offers you thus behavior out of the box.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n  const [container, setContainer] = useState(() =>\n    getElementById(containerId ?? rootId),\n  );\n\n  // force extra render to get the correct container DOM element\n  useEffect(() => {\n    setContainer(getElementById(containerId ?? rootId));\n  }, [containerId, rootId]);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{ container }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAkEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,QAAA,CAAC,WAAW,YAAY,IAAI;AAAA,IAAS,MACzC,eAAe,eAAe,MAAM;AAAA,EAAA;AAItC,YAAU,MAAM;AACD,iBAAA,eAAe,eAAe,MAAM,CAAC;AAAA,EAAA,GACjD,CAAC,aAAa,MAAM,CAAC;AAGtB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa,EAAE,UAAU;AAAA,MACxB,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -1,6 +1,6 @@
 import { tooltipClasses } from "@mui/material/Tooltip";
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTooltip", {
   root: {},
   tooltip: {},

package/dist/esm/TreeView/TreeItem/DefaultContent.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useCss } from "../../hooks/useCss.js";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses, useCss } from "@hitachivantara/uikit-react-shared";
 import { useHvTreeItem } from "./useHvTreeItem.js";
 const { useClasses } = createClasses("HvTreeContent", {
   root: {},

package/dist/esm/TreeView/TreeItem/DefaultContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { createClasses, ExtractNames } from \"../../utils/classes\";\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;AAMO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { useCss } from \"@hitachivantara/uikit-react-shared\";\n\nimport { createClasses, ExtractNames } from \"../../utils/classes\";\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends React.HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: React.ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: React.ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: React.ReactNode;\n}\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;AAMO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}

package/dist/esm/TreeView/TreeItem/TreeItem.styles.js

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTreeItem", {
   /** Applied to the root element */
   root: {

package/dist/esm/TreeView/TreeView.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvTreeView", {
   /** Applied to the root element */
   root: {

package/dist/esm/Typography/Typography.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { useClasses } from "./Typography.styles.js";
 import { staticClasses } from "./Typography.styles.js";

package/dist/esm/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  captionLabel: \"p\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /**\n       * If `true`, the typography will render a \"p\" element\n       * @deprecated use `component=\"p\"` instead\n       * */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n  C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    component: ComponentProp,\n    classes: classesProp,\n    variant: variantProp = \"body\",\n    link = false,\n    noWrap = false,\n    paragraph = false,\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTypography\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant = mapVariant(variantProp, activeTheme?.name);\n\n  const Component =\n    ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      disabled={disabled}\n      {...others}\n    />\n  );\n});\n"],"names":["HvTypography"],"mappings":";;;;;;;AAmBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,QAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  captionLabel: \"p\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  \"3xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  xlTitle: \"h1\",\n  lTitle: \"h2\",\n  mTitle: \"h3\",\n  sTitle: \"h4\",\n  xsTitle: \"h5\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  highlightText: \"p\",\n  normalText: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} satisfies Record<\n  HvTypographyVariants | HvTypographyLegacyVariants,\n  React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /**\n       * If `true`, the typography will render a \"p\" element\n       * @deprecated use `component=\"p\"` instead\n       * */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n  C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    component: ComponentProp,\n    classes: classesProp,\n    variant: variantProp = \"body\",\n    link = false,\n    noWrap = false,\n    paragraph = false,\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTypography\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const variant = mapVariant(variantProp, activeTheme?.name);\n\n  const Component =\n    ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        classes[variant],\n        {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      disabled={disabled}\n      {...others}\n    />\n  );\n});\n"],"names":["HvTypography"],"mappings":";;;;;;;AAoBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,EAAE,gBAAgB;AAExB,QAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,QAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/esm/Typography/Typography.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { useClasses, staticClasses } = createClasses("HvTypography", {
   root: {
     fontFamily: theme.fontFamily.body

package/dist/esm/VerticalNavigation/Actions/Action.styles.js

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const hover = {
   background: theme.colors.containerBackgroundHover
 };

package/dist/esm/VerticalNavigation/Actions/Actions.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationActions",
   {

package/dist/esm/VerticalNavigation/Header/Header.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationHeader",
   {

package/dist/esm/VerticalNavigation/Navigation/Navigation.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTree",
   {

package/dist/esm/VerticalNavigation/NavigationPopup/NavigationPopup.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationPopup",
   {

package/dist/esm/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Popper } from "@mui/base";
+import { Popper } from "@mui/base/Popper";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
-import { useTheme } from "../../hooks/useTheme.js";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { getContainerElement } from "../../utils/document.js";
 import { HvVerticalNavigation } from "../VerticalNavigation.js";
 import { useClasses } from "./NavigationPopup.styles.js";

package/dist/esm/VerticalNavigation/NavigationPopup/NavigationPopupContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationPopupContainer.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import { Popper } from \"@mui/base\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\n\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\nimport { staticClasses, useClasses } from \"./NavigationPopup.styles\";\n\nexport { staticClasses as verticalNavigationPopupClasses };\n\nexport type HvVerticalNavigationPopupClasses = ExtractNames<typeof useClasses>;\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n  classes?: HvVerticalNavigationPopupClasses;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  classes: classesProp,\n  className,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const handleClickAway = () => onClose?.();\n\n  return (\n    <Popper\n      open\n      anchorEl={anchorEl}\n      placement=\"right-start\"\n      container={getContainerElement(rootId)}\n      className={cx(classes.popper, classes.popup, className)}\n      {...others}\n    >\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <div className={classes.container}>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </div>\n      </ClickAwayListener>\n    </Popper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEb,QAAA,kBAAkB,MAAM;AAG5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,SAAS;AAAA,MACrD,GAAG;AAAA,MAEJ,8BAAC,mBAAkB,EAAA,aAAa,iBAC9B,UAAA,oBAAC,SAAI,WAAW,QAAQ,WACtB,UAAA,oBAAC,wBAAqB,MAAI,MAAC,UAAQ,MAChC,UACH,GACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"NavigationPopupContainer.js","sources":["../../../../src/VerticalNavigation/NavigationPopup/NavigationPopupContainer.tsx"],"sourcesContent":["import { Popper } from \"@mui/base/Popper\";\nimport ClickAwayListener from \"@mui/material/ClickAwayListener\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { getContainerElement } from \"../../utils/document\";\nimport { HvVerticalNavigation } from \"../VerticalNavigation\";\nimport { staticClasses, useClasses } from \"./NavigationPopup.styles\";\n\nexport { staticClasses as verticalNavigationPopupClasses };\n\nexport type HvVerticalNavigationPopupClasses = ExtractNames<typeof useClasses>;\n\nexport interface NavigationPopupContainerProps extends HvBaseProps {\n  anchorEl?: HTMLElement | null;\n  onClose?: () => void;\n  classes?: HvVerticalNavigationPopupClasses;\n}\n\nexport const NavigationPopupContainer = ({\n  anchorEl,\n  onClose,\n  children,\n  classes: classesProp,\n  className,\n  ...others\n}: NavigationPopupContainerProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const handleClickAway = () => onClose?.();\n\n  return (\n    <Popper\n      open\n      anchorEl={anchorEl}\n      placement=\"right-start\"\n      container={getContainerElement(rootId)}\n      className={cx(classes.popper, classes.popup, className)}\n      {...others}\n    >\n      <ClickAwayListener onClickAway={handleClickAway}>\n        <div className={classes.container}>\n          <HvVerticalNavigation open useIcons>\n            {children}\n          </HvVerticalNavigation>\n        </div>\n      </ClickAwayListener>\n    </Popper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAoBO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,WAAW;AAEb,QAAA,kBAAkB,MAAM;AAG5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,WAAW,GAAG,QAAQ,QAAQ,QAAQ,OAAO,SAAS;AAAA,MACrD,GAAG;AAAA,MAEJ,8BAAC,mBAAkB,EAAA,aAAa,iBAC9B,UAAA,oBAAC,SAAI,WAAW,QAAQ,WACtB,UAAA,oBAAC,wBAAqB,MAAI,MAAC,UAAQ,MAChC,UACH,GACF,EACF,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationSlider",
   {

package/dist/esm/VerticalNavigation/TreeView/TreeView.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationTreeView",
   {

package/dist/esm/VerticalNavigation/TreeView/TreeViewItem.styles.js

@@ -1,8 +1,8 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
 import { staticClasses as staticClasses$1 } from "../../Avatar/Avatar.styles.js";
 import "../../Avatar/Avatar.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const selected = {
   background: theme.colors.atmo3,
   borderLeft: `4px solid ${theme.colors.secondary}`

package/dist/esm/VerticalNavigation/VerticalNavigation.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigation",
   {

package/dist/esm/hooks/useDefaultProps.js

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
-import { useCss } from "./useCss.js";
-import { useTheme } from "./useTheme.js";
+import { useTheme, useCss } from "@hitachivantara/uikit-react-shared";
 function filterProps(props) {
   return Object.keys(props).reduce(
     (acc, key) => {

package/dist/esm/hooks/useDefaultProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultProps.js","sources":["../../../src/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useCss } from \"./useCss\";\nimport { useTheme } from \"./useTheme\";\n\n/** Filter out `undefined` entries from `props` object. */\nexport function filterProps(props: Record<string, any>) {\n  return Object.keys(props).reduce(\n    (acc, key) => {\n      if (props[key] !== undefined) {\n        acc[key] = props[key];\n      }\n      return acc;\n    },\n    {} as typeof props,\n  );\n}\n\n/** Injects into `props` the props defined in the theme `componentName`. */\nexport function useDefaultProps<T extends Record<string, any>>(\n  /** Name of the theme component key to inject defaultProps */\n  componentName: string, // keyof HvThemeComponents,\n  props: T,\n): T {\n  const { activeTheme } = useTheme();\n  const { css, cx } = useCss();\n\n  const themeDefaultProps = activeTheme?.components?.[componentName];\n\n  const classes = useMemo(() => {\n    const themeClasses = themeDefaultProps?.classes || {};\n    const propsClasses = props?.classes || {};\n    const classKeys = [\n      ...Object.keys(themeClasses),\n      ...Object.keys(propsClasses),\n    ];\n    return classKeys.reduce(\n      (acc, key) => {\n        acc[key] = cx(\n          themeClasses[key] && css(themeClasses[key]),\n          propsClasses[key],\n        );\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n  }, [css, cx, props?.classes, themeDefaultProps?.classes]);\n\n  return {\n    ...themeDefaultProps,\n    ...filterProps(props),\n    classes,\n  };\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,YAAY,OAA4B;AAC/C,SAAA,OAAO,KAAK,KAAK,EAAE;AAAA,IACxB,CAAC,KAAK,QAAQ;AACR,UAAA,MAAM,GAAG,MAAM,QAAW;AACxB,YAAA,GAAG,IAAI,MAAM,GAAG;AAAA,MACtB;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EAAA;AAEL;AAGgB,SAAA,gBAEd,eACA,OACG;AACG,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,KAAK,GAAG,IAAI,OAAO;AAErB,QAAA,oBAAoB,aAAa,aAAa,aAAa;AAE3D,QAAA,UAAU,QAAQ,MAAM;AACtB,UAAA,eAAe,mBAAmB,WAAW;AAC7C,UAAA,eAAe,OAAO,WAAW;AACvC,UAAM,YAAY;AAAA,MAChB,GAAG,OAAO,KAAK,YAAY;AAAA,MAC3B,GAAG,OAAO,KAAK,YAAY;AAAA,IAAA;AAE7B,WAAO,UAAU;AAAA,MACf,CAAC,KAAK,QAAQ;AACZ,YAAI,GAAG,IAAI;AAAA,UACT,aAAa,GAAG,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,UAC1C,aAAa,GAAG;AAAA,QAAA;AAEX,eAAA;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IAAA;AAAA,EACH,GACC,CAAC,KAAK,IAAI,OAAO,SAAS,mBAAmB,OAAO,CAAC;AAEjD,SAAA;AAAA,IACL,GAAG;AAAA,IACH,GAAG,YAAY,KAAK;AAAA,IACpB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useDefaultProps.js","sources":["../../../src/hooks/useDefaultProps.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useCss, useTheme } from \"@hitachivantara/uikit-react-shared\";\n\n/** Filter out `undefined` entries from `props` object. */\nexport function filterProps(props: Record<string, any>) {\n  return Object.keys(props).reduce(\n    (acc, key) => {\n      if (props[key] !== undefined) {\n        acc[key] = props[key];\n      }\n      return acc;\n    },\n    {} as typeof props,\n  );\n}\n\n/** Injects into `props` the props defined in the theme `componentName`. */\nexport function useDefaultProps<T extends Record<string, any>>(\n  /** Name of the theme component key to inject defaultProps */\n  componentName: string, // keyof HvThemeComponents,\n  props: T,\n): T {\n  const { activeTheme } = useTheme();\n  const { css, cx } = useCss();\n\n  const themeDefaultProps = activeTheme?.components?.[componentName];\n\n  const classes = useMemo(() => {\n    const themeClasses = themeDefaultProps?.classes || {};\n    const propsClasses = props?.classes || {};\n    const classKeys = [\n      ...Object.keys(themeClasses),\n      ...Object.keys(propsClasses),\n    ];\n    return classKeys.reduce(\n      (acc, key) => {\n        acc[key] = cx(\n          themeClasses[key] && css(themeClasses[key]),\n          propsClasses[key],\n        );\n        return acc;\n      },\n      {} as Record<string, string>,\n    );\n  }, [css, cx, props?.classes, themeDefaultProps?.classes]);\n\n  return {\n    ...themeDefaultProps,\n    ...filterProps(props),\n    classes,\n  };\n}\n"],"names":[],"mappings":";;AAIO,SAAS,YAAY,OAA4B;AAC/C,SAAA,OAAO,KAAK,KAAK,EAAE;AAAA,IACxB,CAAC,KAAK,QAAQ;AACR,UAAA,MAAM,GAAG,MAAM,QAAW;AACxB,YAAA,GAAG,IAAI,MAAM,GAAG;AAAA,MACtB;AACO,aAAA;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EAAA;AAEL;AAGgB,SAAA,gBAEd,eACA,OACG;AACG,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,KAAK,GAAG,IAAI,OAAO;AAErB,QAAA,oBAAoB,aAAa,aAAa,aAAa;AAE3D,QAAA,UAAU,QAAQ,MAAM;AACtB,UAAA,eAAe,mBAAmB,WAAW;AAC7C,UAAA,eAAe,OAAO,WAAW;AACvC,UAAM,YAAY;AAAA,MAChB,GAAG,OAAO,KAAK,YAAY;AAAA,MAC3B,GAAG,OAAO,KAAK,YAAY;AAAA,IAAA;AAE7B,WAAO,UAAU;AAAA,MACf,CAAC,KAAK,QAAQ;AACZ,YAAI,GAAG,IAAI;AAAA,UACT,aAAa,GAAG,KAAK,IAAI,aAAa,GAAG,CAAC;AAAA,UAC1C,aAAa,GAAG;AAAA,QAAA;AAEX,eAAA;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IAAA;AAAA,EACH,GACC,CAAC,KAAK,IAAI,OAAO,SAAS,mBAAmB,OAAO,CAAC;AAEjD,SAAA;AAAA,IACL,GAAG;AAAA,IACH,GAAG,YAAY,KAAK;AAAA,IACpB;AAAA,EAAA;AAEJ;"}

package/dist/esm/index.js

@@ -1,15 +1,14 @@
+import { EmotionContext, HvThemeContext, createClasses, defaultCacheKey, defaultEmotionCache, useCss, useTheme } from "@hitachivantara/uikit-react-shared";
 import { ds3, ds5, pentahoPlus, theme, themes } from "@hitachivantara/uikit-styles";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useComputation } from "./hooks/useComputation.js";
 import { useControlled } from "./hooks/useControlled.js";
-import { useCss } from "./hooks/useCss.js";
 import { filterProps, useDefaultProps } from "./hooks/useDefaultProps.js";
 import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
 import { useForkRef } from "./hooks/useForkRef.js";
 import { useImageLoaded } from "./hooks/useImageLoaded.js";
 import { useIsMounted } from "./hooks/useIsMounted.js";
 import { useLabels } from "./hooks/useLabels.js";
-import { useTheme } from "./hooks/useTheme.js";
 import { useUniqueId } from "./hooks/useUniqueId.js";
 import { useWidth } from "./hooks/useWidth.js";
 import { HvProvider } from "./providers/Provider.js";
@@ -18,7 +17,6 @@ import { fixedForwardRef } from "./types/generic.js";
 import { withTooltip } from "./hocs/withTooltip.js";
 import { isBrowser } from "./utils/browser.js";
 import { checkValidHexColorValue } from "./utils/checkValidHexColorValue.js";
-import { createClasses, getClasses, replace$ } from "./utils/classes.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { getComponentName } from "./utils/getComponentName.js";
@@ -32,6 +30,7 @@ import { decreaseSize, increaseSize } from "./utils/sizes.js";
 import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
 import { useSavedState } from "./utils/useSavedState.js";
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
+import { uniqueId } from "./utils/helpers.js";
 import { default as default2, default as default3 } from "./Table/hooks/useTable.js";
 import { typographyVariants } from "./Typography/utils.js";
 import { staticClasses } from "./Typography/Typography.styles.js";
@@ -312,7 +311,6 @@ import { HvTableSection } from "./TableSection/TableSection.js";
 import { HvIconButton } from "./IconButton/IconButton.js";
 import { staticClasses as staticClasses120 } from "./Skeleton/Skeleton.styles.js";
 import { HvSkeleton } from "./Skeleton/Skeleton.js";
-import { EmotionContext, HvThemeContext, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -536,7 +534,6 @@ export {
   staticClasses59 as footerClasses,
   staticClasses7 as formElementClasses,
   getBorderStyles,
-  getClasses,
   getComponentName,
   getFirstAndLastFocus,
   getFocusableList,
@@ -607,7 +604,6 @@ export {
   staticClasses80 as radioClasses,
   staticClasses81 as radioGroupClasses,
   reducer,
-  replace$,
   staticClasses45 as rightControlClasses,
   staticClasses85 as scrollToHorizontalClasses,
   staticClasses83 as scrollToVerticalClasses,
@@ -650,6 +646,7 @@ export {
   staticClasses118 as treeViewItemClasses,
   staticClasses as typographyClasses,
   typographyVariants,
+  uniqueId,
   useClickOutside,
   useComputation,
   useControlled,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/types/generic.js.map

@@ -1 +1 @@
-{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type combines the HvExtraProps and DeepPartial types */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n  HvExtraProps;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  render: (props: P, ref: React.Ref<T>) => React.ReactNode,\n): (props: P & React.RefAttributes<T>) => React.ReactNode {\n  return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBACd,QACwD;AACxD,SAAO,WAAW,MAAM;AAC1B;"}
+{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type extends DeepPartial to allow any extra properties */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;\n}> &\n  Record<string, any>;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in v6 (requires ts@5+)\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n  return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACkE;AAClE,SAAO,WAAW,MAAM;AAC1B;"}