@hitachivantara/uikit-react-core 5.66.14 → 5.67.0

package/dist/esm/BaseDropdown/BaseDropdown.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 { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
   root: { width: "100%", position: "relative" },
   rootDisabled: {

package/dist/esm/BaseInput/BaseInput.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("HvBaseInput", {
   root: {
     display: "inline-block",

package/dist/esm/BaseRadio/BaseRadio.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("HvBaseRadio", {
   root: {
     padding: 0,

package/dist/esm/BaseSwitch/BaseSwitch.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("HvBaseSwitch", {
   root: {
     padding: 0,

package/dist/esm/BreadCrumb/BreadCrumb.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("HvBreadCrumb", {
   root: { display: "flex", alignItems: "center", zIndex: 0 },
   link: {},

package/dist/esm/BreadCrumb/Page/Page.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("HvBreadCrumbPage", {
   link: {
     padding: `8px ${theme.space.xs}`,

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

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvPathElement", {
   centerContainer: { display: "flex", alignItems: "center" },
   separatorContainer: {}

package/dist/esm/BulkActions/BulkActions.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./BulkActions.styles.js";
 import { staticClasses } from "./BulkActions.styles.js";

package/dist/esm/BulkActions/BulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA0Da,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"BulkActions.js","sources":["../../../src/BulkActions/BulkActions.tsx"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvActionsGeneric, HvActionsGenericProps } from \"../ActionsGeneric\";\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvCheckBox, HvCheckBoxProps } from \"../CheckBox\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./BulkActions.styles\";\n\nexport { staticClasses as bulkActionsClasses };\n\nexport type HvBulkActionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBulkActionsProps extends HvBaseProps {\n  /** Custom label for select all checkbox */\n  selectAllLabel?: React.ReactNode;\n  /** Custom label for select all checkbox conjunction */\n  selectAllConjunctionLabel?: string;\n  /** Custom label for select all pages button */\n  selectAllPagesLabel?: React.ReactNode;\n  /** Whether select all pages element should be visible */\n  showSelectAllPages?: boolean;\n  /** The total number of elements */\n  numTotal?: number;\n  /** The number of elements currently selected */\n  numSelected?: number;\n  /** Function called when the \"select all\" Checkbox is toggled. */\n  onSelectAll?: HvCheckBoxProps[\"onChange\"];\n  /** Function called when the \"select all pages\" button is clicked toggled. */\n  onSelectAllPages?: HvButtonProps[\"onClick\"];\n  /** Whether the bulk actions should use the semantic styles when there are selected elements. */\n  semantic?: boolean;\n  /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */\n  actions?: HvActionsGenericProps[\"actions\"];\n  /** Whether actions should be all disabled */\n  actionsDisabled?: boolean;\n  /**\n   * The callback function called when an action is triggered, receiving `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: HvActionsGenericProps[\"actionsCallback\"];\n  /** The callback function called when an action is triggered, receiving `action` as parameter. */\n  onAction?: HvActionsGenericProps[\"onAction\"];\n  /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */\n  maxVisibleActions?: number;\n  /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */\n  checkboxProps?: HvCheckBoxProps;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvBulkActionsClasses;\n}\n\n/**\n * Bulk Actions allow users to perform an action on a single or multiple items.\n * Also known as \"batch production\" of multiple items at once, one stage at a time.\n */\nexport const HvBulkActions = (props: HvBulkActionsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selectAllPagesLabel,\n    actionsDisabled,\n    maxVisibleActions,\n    checkboxProps,\n    actions,\n    numTotal = 0,\n    numSelected = 0,\n    selectAllLabel = \"All\",\n    selectAllConjunctionLabel = \"/\",\n    showSelectAllPages = false,\n    semantic = true,\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    onSelectAll,\n    onSelectAllPages,\n    ...others\n  } = useDefaultProps(\"HvBulkActions\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const anySelected = numSelected > 0;\n  const isSemantic = semantic && anySelected;\n\n  const selectAllLabelComponent = (\n    <HvTypography\n      component=\"span\"\n      disabled={checkboxProps?.disabled}\n      variant=\"body\"\n    >\n      {!anySelected ? (\n        <>\n          <HvTypography variant=\"label\">{selectAllLabel}</HvTypography>\n          {` (${numTotal})`}\n        </>\n      ) : (\n        <>\n          <HvTypography variant=\"label\">{numSelected}</HvTypography>\n          {` ${selectAllConjunctionLabel} ${numTotal}`}\n        </>\n      )}\n    </HvTypography>\n  );\n\n  return (\n    <div\n      id={id}\n      className={cx(\n        classes.root,\n        { [classes.semantic]: isSemantic },\n        className,\n      )}\n      {...others}\n    >\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select\")}\n          className={classes.selectAll}\n          checked={numSelected > 0}\n          semantic={isSemantic}\n          onChange={onSelectAll}\n          indeterminate={numSelected > 0 && numSelected < numTotal}\n          label={selectAllLabelComponent}\n          {...checkboxProps}\n        />\n        {showSelectAllPages && anySelected && numSelected < numTotal && (\n          <>\n            <div className={classes.divider} />\n            <HvButton\n              id={setId(id, \"pages\")}\n              className={classes.selectAllPages}\n              variant={\n                isSemantic\n                  ? (activeTheme?.bulkActions\n                      .actionButtonVariant as HvButtonVariant)\n                  : \"secondaryGhost\"\n              }\n              onClick={onSelectAllPages}\n            >\n              {selectAllPagesLabel ?? `Select all ${numTotal} items`}\n            </HvButton>\n          </>\n        )}\n      </div>\n      <HvActionsGeneric\n        id={setId(id, \"actions\")}\n        classes={{ root: classes.actions }}\n        variant={\n          isSemantic\n            ? (activeTheme?.bulkActions.actionButtonVariant as HvButtonVariant)\n            : \"secondaryGhost\"\n        }\n        actions={actions}\n        disabled={actionsDisabled ?? numSelected === 0}\n        actionsCallback={actionsCallback}\n        onAction={onAction}\n        maxVisibleActions={maxVisibleActions}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2Da,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,4BAA4B;AAAA,IAC5B,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,EAAE,gBAAgB;AAExB,QAAM,cAAc,cAAc;AAClC,QAAM,aAAa,YAAY;AAE/B,QAAM,0BACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,eAAe;AAAA,MACzB,SAAQ;AAAA,MAEP,UAAA,CAAC,cAEE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAe,gBAAA;AAAA,QAC7C,KAAK,QAAQ;AAAA,MAAA,EAAA,CAChB,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,QAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAY,aAAA;AAAA,QAC1C,IAAI,yBAAyB,IAAI,QAAQ;AAAA,MAAA,GAC5C;AAAA,IAAA;AAAA,EAAA;AAMJ,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QACjC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QAAQ,oBACtB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,QAAQ;AAAA,cACtB,WAAW,QAAQ;AAAA,cACnB,SAAS,cAAc;AAAA,cACvB,UAAU;AAAA,cACV,UAAU;AAAA,cACV,eAAe,cAAc,KAAK,cAAc;AAAA,cAChD,OAAO;AAAA,cACN,GAAG;AAAA,YAAA;AAAA,UACN;AAAA,UACC,sBAAsB,eAAe,cAAc,YAEhD,qBAAA,UAAA,EAAA,UAAA;AAAA,YAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,QAAS,CAAA;AAAA,YACjC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,IAAI,OAAO;AAAA,gBACrB,WAAW,QAAQ;AAAA,gBACnB,SACE,aACK,aAAa,YACX,sBACH;AAAA,gBAEN,SAAS;AAAA,gBAER,UAAA,uBAAuB,cAAc,QAAQ;AAAA,cAAA;AAAA,YAChD;AAAA,UAAA,GACF;AAAA,QAAA,GAEJ;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,SAAS;AAAA,YACvB,SAAS,EAAE,MAAM,QAAQ,QAAQ;AAAA,YACjC,SACE,aACK,aAAa,YAAY,sBAC1B;AAAA,YAEN;AAAA,YACA,UAAU,mBAAmB,gBAAgB;AAAA,YAC7C;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/BulkActions/BulkActions.styles.js

@@ -1,9 +1,9 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
 import "react/jsx-runtime";
 import "react";
 import "@hitachivantara/uikit-react-icons";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvBulkActions", {
   root: {
     display: "flex",

package/dist/esm/Button/Button.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
+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, getIconSizeStyles, getSizeStyles, getColoringStyle, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { 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 {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { 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 {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

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

@@ -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("HvButton", {
   root: {
     display: "inline-flex",

package/dist/esm/Calendar/Calendar.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("HvCalendar", {
   root: {
     display: "flex",

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.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("HvCalendarHeader", {
   root: {
     paddingBottom: theme.space.md,

package/dist/esm/Calendar/CalendarNavigation/ComposedNavigation/ComposedNavigation.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(
   "HvComposedNavigation",
   {

package/dist/esm/Calendar/CalendarNavigation/MonthSelector/MonthSelector.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 = {
   backgroundColor: theme.colors.atmo3,
   cursor: "pointer"

package/dist/esm/Calendar/CalendarNavigation/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("HvNavigation", {
   root: {
     display: "flex",

package/dist/esm/Calendar/SingleCalendar/CalendarCell.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 = {
   backgroundColor: theme.colors.containerBackgroundHover,
   cursor: "pointer"

package/dist/esm/Calendar/SingleCalendar/SingleCalendar.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("HvSingleCalendar", {
   calendarContainer: {
     width: "318px",

package/dist/esm/Card/Card.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("HvCard", {
   root: {
     overflow: "visible",

package/dist/esm/Card/Content/Content.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("HvCardContent", {
   content: {
     padding: `0 ${theme.space.sm} 15px ${theme.space.sm}`,

package/dist/esm/Card/Header/Header.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("HvCardHeader", {
   root: {
     position: "relative",

package/dist/esm/Card/Media/Media.styles.js

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

package/dist/esm/Carousel/Carousel.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
 import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useLabels } from "../hooks/useLabels.js";
-import { useTheme } from "../hooks/useTheme.js";
 import { clamp } from "../utils/helpers.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";

package/dist/esm/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Close,\n  Forwards,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton, HvIconButtonProps } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  close: \"Close\",\n  fullscreen: \"Fullscreen\",\n  backwards: \"Backwards\",\n  forwards: \"Forwards\",\n};\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: React.CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: React.CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n  /** The callback fired fullscreen is toggled. */\n  onFullscreen?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    isFullscreen: boolean,\n  ) => void;\n  /** Labels used on the component. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    labels: labelsProps,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    onFullscreen,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0,\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n  }, [numSlides, controller]);\n\n  const handleFullscreen: HvIconButtonProps[\"onClick\"] = (event) => {\n    onFullscreen?.(event, !isFullscreen);\n    setIsFullscreen((curr) => !curr);\n  };\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : (heightProp ?? \"auto\");\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" }),\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvIconButton\n          title={isFullscreen ? labels.close : labels.fullscreen}\n          onClick={handleFullscreen}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? <Close /> : <Fullscreen />}\n        </HvIconButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n      labels={{\n        backwards: labels.backwards,\n        forwards: labels.forwards,\n      }}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label={labels.backwards}\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label={labels.forwards}\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useRef, useState } from \"react\";\nimport useCarousel from \"embla-carousel-react\";\nimport {\n  Backwards,\n  Close,\n  Forwards,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvButton } from \"../Button\";\nimport { HvContainer } from \"../Container\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvIconButton, HvIconButtonProps } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { clamp } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  close: \"Close\",\n  fullscreen: \"Fullscreen\",\n  backwards: \"Backwards\",\n  forwards: \"Forwards\",\n};\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: React.CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: React.CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: Parameters<typeof useCarousel>[0];\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n  /** The callback fired fullscreen is toggled. */\n  onFullscreen?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    isFullscreen: boolean,\n  ) => void;\n  /** Labels used on the component. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    labels: labelsProps,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    onFullscreen,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProps);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0,\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides));\n  }, [numSlides, controller]);\n\n  const handleFullscreen: HvIconButtonProps[\"onClick\"] = (event) => {\n    onFullscreen?.(event, !isFullscreen);\n    setIsFullscreen((curr) => !curr);\n  };\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : (heightProp ?? \"auto\");\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" }),\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvIconButton\n          title={isFullscreen ? labels.close : labels.fullscreen}\n          onClick={handleFullscreen}\n          className={classes.closeButton}\n        >\n          {isFullscreen ? <Close /> : <Fullscreen />}\n        </HvIconButton>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n      labels={{\n        backwards: labels.backwards,\n        forwards: labels.forwards,\n      }}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label={labels.backwards}\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label={labels.forwards}\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Carousel/Carousel.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("HvCarousel", {
   /** Styles applied to the component root class. */
   root: {

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.js

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

package/dist/esm/CheckBox/CheckBox.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("HvCheckBox", {
   root: { display: "inline-block" },
   container: {

package/dist/esm/CheckBoxGroup/CheckBoxGroup.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("HvCheckBoxGroup", {
   root: {
     display: "inline-block",

package/dist/esm/ColorPicker/ColorPicker.styles.js

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

package/dist/esm/ColorPicker/Fields/Fields.styles.js

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

package/dist/esm/ColorPicker/Picker/Picker.js

@@ -2,8 +2,8 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { CustomPicker } from "react-color";
 import { Saturation, Hue } from "react-color/lib/components/common";
+import { useTheme } from "@hitachivantara/uikit-react-shared";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { useTheme } from "../../hooks/useTheme.js";
 import { useClasses } from "./Picker.styles.js";
 import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";

package/dist/esm/ColorPicker/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer],\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider],\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}
+{"version":3,"file":"Picker.js","sources":["../../../../src/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { Hue, Saturation } from \"react-color/lib/components/common\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Fields } from \"../Fields\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer],\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider],\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\n          <Hue\n            direction={activeTheme?.colorPicker.hueDirection}\n            hsl={hsl}\n            onChange={onChange}\n            pointer={HueSlider}\n          />\n        </div>\n      </div>\n      <Fields\n        className={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":[],"mappings":";;;;;;;;;;AAmCA,MAAM,YAAY,CAAC,UAAuB;AAClC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,uBAAuB,KAAK;AAC1C,QAAA,EAAE,gBAAgB;AACxB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,QAAM,oBAAoB;AAAA,IACxB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,kBAAmB,CAAA;AAAA,IAClD,CAAC,SAAS,iBAAiB;AAAA,EAAA;AAG7B,QAAM,YAAY;AAAA,IAChB,MAAM,oBAAC,OAAI,EAAA,WAAW,SAAS,UAAW,CAAA;AAAA,IAC1C,CAAC,SAAS,SAAS;AAAA,EAAA;AAGrB,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAW,QAAQ,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,KACtB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,YAAY;AAAA,UACpC;AAAA,UACA;AAAA,UACA,SAAS;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEa,MAAA,SAAS,aAAa,SAAS;"}

package/dist/esm/ColorPicker/Picker/Picker.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 name = "HvColorPicker-Picker";
 const { staticClasses, useClasses } = createClasses(name, {
   pickers: {

package/dist/esm/ColorPicker/PresetColors/PresetColors.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 name = "HvColorPicker-PresetColors";
 const { staticClasses, useClasses } = createClasses(name, {
   root: { width: "232px" },

package/dist/esm/ColorPicker/SavedColors/SavedColors.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 name = "HvColorPicker-SavedColors";
 const { staticClasses, useClasses } = createClasses(name, {
   addButton: {

package/dist/esm/Container/Container.styles.js

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

package/dist/esm/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children } from \"react\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { HvBaseProps, HvExtraProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    id: string,\n  ) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView,\n  );\n\n  const onViewChangeHandler = (\n    evt: React.MouseEvent<HTMLButtonElement>,\n    btnId: any,\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0,\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA6Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Controls.js","sources":["../../../src/Controls/Controls.tsx"],"sourcesContent":["import { Children } from \"react\";\n\nimport { HvButton } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvMultiButton } from \"../MultiButton\";\nimport { HvTableInstance } from \"../Table/hooks/useTable\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvControlsViewConfiguration extends Record<string, any> {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    id: string,\n  ) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView,\n  );\n\n  const onViewChangeHandler = (\n    evt: React.MouseEvent<HTMLButtonElement>,\n    btnId: any,\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0,\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA6Da,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AAEvC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,EAAA;AAGI,QAAA,sBAAsB,CAC1B,KACA,UACG;AACH,mBAAe,KAAK;AACpB,mBAAe,KAAK,KAAK;AAAA,EAAA;AAG3B,QAAM,kBAAkB,CAAC,UAAe,WAAW,kBAAkB,KAAK;AAC1E,QAAM,gBAAgB,CAAC,UACrB,WAAW,YAAY;AAAA,IACrB;AAAA,MACE,IAAI,OAAO;AAAA,MACX,MAAM,OAAO;AAAA,IACf;AAAA,EAAA,CACD;AAEG,QAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,QAAA,gBAAgB,SAAS,QAAQ,QAAQ;AAE/C,QAAM,mBACJ,gBAAgB,IAAI,KAAK,MAAM,gBAAgB,GAAG,IAAI;AACxD,QAAM,eAAe,cAAc,MAAM,GAAG,gBAAgB;AAC5D,QAAM,gBAAgB,cAAc;AAAA,IAClC;AAAA,IACA,iBAAiB;AAAA,EAAA;AAIjB,SAAA,oBAAC,SAAI,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAChD,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,MACV;AAAA,MAEA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,WAAW,GACpD,UACH,aAAA,CAAA;AAAA,QACA,qBAAC,SAAI,WAAW,GAAG,QAAQ,SAAS,QAAQ,YAAY,GACrD,UAAA;AAAA,UAAA;AAAA,UACA,SAAS,CAAC,oBAAoB,OAAO,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAI,MAAM,IAAI,mBAAmB,GAC7C,UAAA,MAAM,IAAI,CAAC,EAAE,IAAI,OAAO,MAAM,GAAG,OAAA,MAChC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI;AAAA,cAEJ,MAAI;AAAA,cACJ,UAAU,gBAAgB;AAAA,cAC1B,SAAS,CAAC,QAAQ,oBAAoB,KAAK,KAAK;AAAA,cAC/C,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,YANI;AAAA,UAQR,CAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Controls/Controls.styles.js

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

package/dist/esm/Controls/LeftControl/LeftControl.styles.js

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

package/dist/esm/Controls/RightControl/RightControl.styles.js

@@ -1,4 +1,4 @@
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvRightControl", {
   root: { display: "inline-flex", gap: 10 },
   sortDropdown: { minWidth: 200 }

package/dist/esm/DatePicker/DatePicker.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("HvDatePicker", {
   root: {
     position: "relative"

package/dist/esm/Dialog/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("HvDialog-Action", {
   root: {
     margin: "0",

package/dist/esm/Dialog/Content/Content.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("HvDialog-Content", {
   root: {
     padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,

package/dist/esm/Dialog/Dialog.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import MuiDialog from "@mui/material/Dialog";
 import { Close } from "@hitachivantara/uikit-react-icons";
+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 { setId } from "../utils/setId.js";
 import { DialogContext } from "./context.js";