@hitachivantara/uikit-react-core 5.66.14 → 5.67.1

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";

package/dist/esm/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n          onClose?.(event, undefined)\n        }\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAoDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n          onClose?.(event, undefined)\n        }\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAoDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Dialog/Dialog.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", {
   root: {},
   background: { background: theme.alpha("atmo4", 0.8) },

package/dist/esm/Dialog/Title/Title.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-Title", {
   root: {
     fontFamily: theme.fontFamily.body,

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

package/dist/esm/Drawer/Drawer.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("HvDrawer", {
   root: {},
   paper: {

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -4,6 +4,7 @@ import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useBaseDropdownContext } from "../BaseDropdown/BaseDropdownContext/BaseDropdownContext.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
 import { isKey } from "../utils/keyboardUtils.js";
@@ -14,6 +15,9 @@ import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvList } from "../List/List.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
 import { HvPanel } from "../Panel/Panel.js";
+const DEFAULT_LABELS = {
+  dropdownMenu: "Dropdown menu"
+};
 const HeaderComponent = forwardRef(
   (props, ref) => {
     const { open, children, ...others } = props;
@@ -25,7 +29,6 @@ const HeaderComponent = forwardRef(
         ref,
         open,
         "aria-expanded": open,
-        "aria-label": "Dropdown menu",
         "aria-haspopup": "menu",
         placement: popperPlacement,
         ...others,
@@ -53,9 +56,11 @@ const HvDropDownMenu = (props) => {
     // TODO - remove and update variant default in v6
     variant,
     size = "md",
+    labels: labelsProp,
     ...others
   } = useDefaultProps("HvDropDownMenu", props);
   const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId(idProp);
   const focusNodes = getPrevNextFocus(setId(id, "icon-button"));
@@ -97,6 +102,7 @@ const HvDropDownMenu = (props) => {
           size,
           variant: variant ?? category,
           open,
+          "aria-label": labels.dropdownMenu,
           children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { role: "presentation" })
         }
       ),

package/dist/esm/DropDownMenu/DropDownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  (props, ref) => {\n    const { open, children, ...others } = props;\n\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        aria-expanded={open}\n        aria-label=\"Dropdown menu\" // TODO - translate\n        aria-haspopup=\"menu\"\n        placement={popperPlacement as Placement}\n        {...others}\n      >\n        {children}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HeaderComponent\n          id={setId(id, \"icon-button\")}\n          disabled={disabled}\n          className={cx(classes.icon, {\n            [classes.iconSelected]: open,\n          })}\n          size={size}\n          variant={variant ?? category}\n          open={open}\n        >\n          {icon || <MoreOptionsVertical role=\"presentation\" />}\n        </HeaderComponent>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { Placement } from \"@popperjs/core\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/BaseDropdownContext/BaseDropdownContext\";\nimport { HvButtonSize, HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvPanel } from \"../Panel\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\" | \"onToggle\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (\n    event:\n      | Event\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    open: boolean,\n  ) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event:\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n    value: HvListValue,\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /**\n   * The variant to be used in the header.\n   * @deprecated Use `variant` instead\n   */\n  category?: HvButtonVariant;\n  /** The variant to be used in the header. */\n  variant?: HvButtonVariant;\n  /** Button size. */\n  size?: HvButtonSize;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n  /** An object containing all the labels. */\n  labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n  (props, ref) => {\n    const { open, children, ...others } = props;\n\n    const { popperPlacement } = useBaseDropdownContext();\n\n    return (\n      <HvDropdownButton\n        icon\n        ref={ref}\n        open={open}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        placement={popperPlacement as Placement}\n        {...others}\n      >\n        {children}\n      </HvDropdownButton>\n    );\n  },\n);\n\n/**\n * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant,\n    size = \"md\",\n    labels: labelsProp,\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp);\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (\n    event:\n      | React.KeyboardEvent<HTMLUListElement>\n      | React.ChangeEvent<HTMLInputElement>\n      | React.MouseEvent<HTMLLIElement>,\n  ) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef,\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HeaderComponent\n          id={setId(id, \"icon-button\")}\n          disabled={disabled}\n          className={cx(classes.icon, {\n            [classes.iconSelected]: open,\n          })}\n          size={size}\n          variant={variant ?? category}\n          open={open}\n          aria-label={labels.dropdownMenu}\n        >\n          {icon || <MoreOptionsVertical role=\"presentation\" />}\n        </HeaderComponent>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAChB;AA2DA,MAAM,kBAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,MAAM,UAAU,GAAG,WAAW;AAEhC,UAAA,EAAE,oBAAoB;AAG1B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAKa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAC7B,QAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAEtD,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAClB,UAIG;AAEH,YAAQ,KAAK;AACb,eAAW,OAAO,KAAK;AAAA,EAAA;AAInB,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAChE,UAAI,KAAiB,YAAA,MAAM,KAAK,MAAA,GAAS,CAAC;AAC1C,kBAAY,KAAK;AAAA,IACnB;AACA,UAAM,eAAe;AAAA,EAAA;AAGjB,QAAA,oBAAgE,CACpE,iBACG;AACH,kBAAc,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,EAAA;AAGrD,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,SAAS;AAAA,MAC1C,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,WAAW,QAAQ;AAAA,MACrB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,WACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,IAAI,aAAa;AAAA,UAC3B;AAAA,UACA,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,YAAY,GAAG;AAAA,UAAA,CACzB;AAAA,UACD;AAAA,UACA,SAAS,WAAW;AAAA,UACpB;AAAA,UACA,cAAY,OAAO;AAAA,UAElB,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,gBAAe;AAAA,QAAA;AAAA,MACpD;AAAA,MAEF;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACpB,GAAG;AAAA,MAEJ,UAAC,oBAAA,SAAA,EAAQ,WAAW,QAAQ,cAC1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACpB,gBAAA,CAAC,WAAY,aAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/DropDownMenu/DropDownMenu.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("HvDropDownMenu", {
   container: {},
   baseContainer: {},

package/dist/esm/Dropdown/Dropdown.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("HvDropdown", {
   root: {
     width: "100%",

package/dist/esm/Dropdown/List/List.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("HvDropdownList", {
   rootList: {},
   dropdownListContainer: {},

package/dist/esm/DropdownButton/DropdownButton.styles.js

@@ -1,7 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../Button/Button.styles.js";
 import "../Button/Button.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const disabledStyle = {
   backgroundColor: theme.colors.atmo3,
   borderColor: theme.colors.atmo3,

package/dist/esm/EmptyState/EmptyState.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("HvEmptyState", {
   root: {
     width: "100%",

package/dist/esm/FileUploader/DropZone/DropZone.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("HvDropZone", {
   dropZoneContainer: {
     position: "relative",

package/dist/esm/FileUploader/File/File.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("HvFile", {
   root: {},
   progressbar: {

package/dist/esm/FileUploader/FileList/FileList.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("HvFileList", {
   list: {
     display: "flex",

package/dist/esm/FileUploader/Preview/Preview.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(
   "HvFileUploaderPreview",
   {

package/dist/esm/FilterGroup/Counter/Counter.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 = "HvFilterGroupCounter";
 const { staticClasses, useClasses } = createClasses(name, {
   root: {

package/dist/esm/FilterGroup/FilterContent/FilterContent.js

@@ -1,8 +1,8 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useContext, useRef, useMemo } from "react";
 import { Filters } 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 { setId } from "../../utils/setId.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./FilterContent.styles.js";

package/dist/esm/FilterGroup/FilterContent/FilterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { useTheme } from \"../../hooks/useTheme\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterContent.js","sources":["../../../../src/FilterGroup/FilterContent/FilterContent.tsx"],"sourcesContent":["import { forwardRef, useContext, useMemo, useRef, useState } from \"react\";\nimport { Filters } from \"@hitachivantara/uikit-react-icons\";\nimport { useTheme } from \"@hitachivantara/uikit-react-shared\";\n\nimport { HvActionBar } from \"../../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../../BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"../../Button\";\nimport { HvFormStatus } from \"../../Forms\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport type { HvFilterGroupLabels } from \"../FilterGroup\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupLeftPanel } from \"../LeftPanel\";\nimport { HvFilterGroupRightPanel } from \"../RightPanel\";\nimport { HvFilterGroupHorizontalPlacement, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./FilterContent.styles\";\n\nexport { staticClasses as filterGroupContentClasses };\n\nexport type HvFilterGroupContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupContentProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  description?: React.ReactNode;\n  status?: HvFormStatus;\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue,\n  ) => void;\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  labels?: HvFilterGroupLabels;\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  disablePortal?: boolean;\n  escapeWithReference?: boolean;\n  height?: string | number;\n  leftEmptyElement?: React.ReactNode;\n  rightEmptyElement?: React.ReactNode;\n  disabled?: boolean;\n  classes?: HvFilterGroupContentClasses;\n}\n\nexport const HvFilterGroupContent = forwardRef<\n  HTMLDivElement,\n  HvFilterGroupContentProps\n>((props, ref) => {\n  const {\n    id,\n    status,\n    disabled = false,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onCancel,\n    onClear,\n    labels,\n    horizontalPlacement = \"right\",\n    disablePortal = true,\n    escapeWithReference = true,\n    height,\n    leftEmptyElement,\n    rightEmptyElement,\n    classes: classesProp,\n    ...others\n  } = useDefaultProps(\"HvFilterGroupContent\", props);\n\n  const { classes } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n\n  const [filterGroupOpen, setFilterGroupOpen] = useState<boolean>(false);\n\n  const {\n    defaultValue,\n    filterValues,\n    rollbackFilters,\n    clearFilters,\n    applyFilters,\n    applyDisabled,\n  } = useContext(HvFilterGroupContext);\n\n  const focusTarget = useRef<HTMLDivElement>(null);\n\n  const focusOnContainer = () => {\n    focusTarget.current?.focus();\n  };\n\n  const onApplyHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    applyFilters();\n    onChange?.(event, filterValues);\n    setFilterGroupOpen(false);\n  };\n\n  const onCancelHandler = (\n    event: React.MouseEvent<HTMLButtonElement> | Event,\n  ) => {\n    rollbackFilters();\n    onCancel?.(event);\n    setFilterGroupOpen(false);\n  };\n\n  const onClearHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    clearFilters();\n    onClear?.(event);\n  };\n\n  const handleToggle = (event: Event, open: boolean) => {\n    /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n    if (event === null) return;\n    setFilterGroupOpen(open);\n    if (!open) onCancelHandler?.(event);\n  };\n\n  const Header = useMemo(\n    () => (\n      <>\n        <Filters />\n        <HvTypography variant=\"label\">{labels?.placeholder}</HvTypography>\n      </>\n    ),\n    [labels?.placeholder],\n  );\n\n  return (\n    <HvBaseDropdown\n      ref={ref}\n      id={setId(id, \"dropdown\")}\n      role=\"combobox\"\n      classes={{\n        root: classes.dropdown,\n        panel: classes.panel,\n        selection: classes.baseDropdownSelection,\n        header: classes.header,\n      }}\n      disabled={disabled}\n      disablePortal={disablePortal}\n      variableWidth\n      placement={horizontalPlacement}\n      expanded={filterGroupOpen}\n      onToggle={handleToggle}\n      onClickOutside={onCancelHandler}\n      onContainerCreation={focusOnContainer}\n      placeholder={Header}\n      adornment={<HvFilterGroupCounter />}\n      popperProps={{\n        modifiers: [{ name: \"preventOverflow\", enabled: escapeWithReference }],\n      }}\n      aria-haspopup=\"dialog\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-invalid={status === \"invalid\" ? true : undefined}\n      aria-errormessage={status === \"invalid\" ? setId(id, \"error\") : undefined}\n      aria-describedby={\n        [description && setId(id, \"description\"), ariaDescribedBy]\n          .join(\" \")\n          .trim() || undefined\n      }\n      {...others}\n    >\n      <div ref={focusTarget} tabIndex={-1} />\n      <div className={classes.root} style={{ height }}>\n        <HvFilterGroupLeftPanel\n          id={id}\n          className={classes.leftSidePanel}\n          emptyElement={leftEmptyElement}\n        />\n        <HvFilterGroupRightPanel\n          id={id}\n          className={classes.rightSidePanel}\n          emptyElement={rightEmptyElement}\n          labels={labels}\n        />\n      </div>\n      <HvActionBar className={classes.actionBar}>\n        <HvButton\n          id={setId(id, \"clearFilters-button\")}\n          disabled={\n            defaultValue\n              ? defaultValue?.flat().length === filterValues?.flat().length\n              : filterValues?.flat().length === 0\n          }\n          variant=\"secondaryGhost\"\n          onClick={onClearHandler}\n        >\n          {labels?.clearLabel}\n        </HvButton>\n        <div aria-hidden=\"true\" className={classes.space}>\n          &nbsp;\n        </div>\n        <HvButton\n          id={setId(id, \"apply-button\")}\n          disabled={applyDisabled}\n          variant={\n            activeTheme?.filterGroup.applyButtonVariant as HvButtonVariant\n          }\n          onClick={onApplyHandler}\n          className={classes.applyButton}\n        >\n          {labels?.applyLabel}\n        </HvButton>\n        <HvButton\n          id={setId(id, \"cancel-button\")}\n          variant={\n            activeTheme?.filterGroup.cancelButtonVariant as HvButtonVariant\n          }\n          onClick={onCancelHandler}\n        >\n          {labels?.cancelLabel}\n        </HvButton>\n      </HvActionBar>\n    </HvBaseDropdown>\n  );\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/FilterGroup/FilterContent/FilterContent.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 = "HvFilterGroupContent";
 const { staticClasses, useClasses } = createClasses(name, {
   dropdown: {},

package/dist/esm/FilterGroup/FilterGroup.styles.js

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

package/dist/esm/FilterGroup/LeftPanel/LeftPanel.styles.js

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

package/dist/esm/FilterGroup/RightPanel/RightPanel.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 = "HvFilterGroupRightPanel";
 const { staticClasses, useClasses } = createClasses(name, {
   search: {

package/dist/esm/Focus/Focus.styles.js

@@ -1,5 +1,5 @@
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvFocus", {
   root: {},
   selected: {},

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

package/dist/esm/Forms/Adornment/Adornment.styles.js

@@ -1,5 +1,5 @@
-import { createClasses } from "../../utils/classes.js";
 import { outlineStyles } from "../../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvAdornment", {
   root: {},
   icon: { width: 32, height: 32 },

package/dist/esm/Forms/CharCounter/CharCounter.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("HvCharCounter", {
   root: { display: "inline-block", float: "right" },
   counterDisabled: { color: theme.colors.secondary_60 },

package/dist/esm/Forms/FormElement/FormElement.styles.js

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

package/dist/esm/Forms/FormElement/utils/FormUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormUtils.js","sources":["../../../../../src/Forms/FormElement/utils/FormUtils.ts"],"sourcesContent":["import React from \"react\";\nimport { InputBaseComponentProps } from \"@mui/material\";\n\nimport { HvFormElementContextValue } from \"../context/FormElementContext\";\nimport { HvFormElementDescriptorsContextValue } from \"../context/FormElementDescriptorsContext\";\n\ninterface Descriptor {\n  id?: string;\n  htmlFor?: string;\n}\n/**\n * Scans the element's children looking for the children IDs that match the different form element types.\n * This function will produce an object that has a key for each provided name\n * Inside each key there will be an array with each id of the found descriptor.\n *\n * @param {Array} children - The children inside the form element to scan.\n * @param {Object} descriptors - Initial descriptors map (used for recursion).\n *\n */\nconst findDescriptors = (\n  children: React.ReactNode,\n  descriptors: {\n    input: Descriptor[];\n    label: Descriptor[];\n    description: Descriptor[];\n    controlled: Descriptor[];\n    errormessage: Descriptor[];\n    HvCalendarHeader?: Descriptor[];\n  } = {\n    input: [],\n    label: [],\n    description: [],\n    controlled: [],\n    errormessage: [],\n\n    // TODO: refactor this out\n    HvCalendarHeader: [],\n  },\n) => {\n  React.Children.forEach(children, (child: any) => {\n    if (child?.type?.formElementType && child.props?.id) {\n      descriptors[child.type.formElementType as keyof typeof descriptors]?.push(\n        {\n          id: child.props?.id,\n          htmlFor: child.props?.htmlFor,\n        },\n      );\n    }\n\n    if (child?.type?.formElementType !== \"formelement\") {\n      findDescriptors(child?.props?.children, descriptors);\n    }\n  });\n\n  return descriptors;\n};\n\nconst getIdReferenceListFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor: string | null = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)\n    .join(\" \")\n    .trim();\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst getIdReferenceFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)?.[0];\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst buildFormElementPropsFromContext = (\n  name?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  required?: boolean,\n  context?: HvFormElementContextValue,\n) => {\n  return {\n    name: name || context?.elementName,\n    disabled: disabled !== undefined ? disabled : context?.elementDisabled,\n    readOnly: readOnly !== undefined ? readOnly : context?.elementReadOnly,\n    required: required !== undefined ? required : context?.elementRequired,\n    status: context?.elementStatus,\n  };\n};\n\nconst buildAriaPropsFromContext = (\n  props: InputBaseComponentProps,\n  context: HvFormElementDescriptorsContextValue,\n  isInvalid: boolean,\n  inputId?: string,\n) => {\n  const arias: React.AriaAttributes = {\n    \"aria-labelledby\":\n      props?.[\"aria-labelledby\"] !== undefined\n        ? props?.[\"aria-labelledby\"]\n        : getIdReferenceListFor(\"label\", context?.descriptors, inputId),\n    \"aria-describedby\":\n      props?.[\"aria-describedby\"] !== undefined\n        ? props?.[\"aria-describedby\"]\n        : getIdReferenceListFor(\"description\", context?.descriptors),\n    \"aria-controls\":\n      props?.[\"aria-controls\"] !== undefined\n        ? props?.[\"aria-controls\"]\n        : getIdReferenceListFor(\"controlled\", context?.descriptors),\n  };\n\n  if (isInvalid) {\n    arias[\"aria-invalid\"] = isInvalid;\n    arias[\"aria-errormessage\"] =\n      props?.[\"aria-errormessage\"] !== undefined\n        ? props?.[\"aria-errormessage\"]\n        : getIdReferenceFor(\"errormessage\", context?.descriptors);\n  }\n\n  return arias;\n};\n\nexport {\n  findDescriptors,\n  getIdReferenceListFor,\n  getIdReferenceFor,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n};\n"],"names":["React"],"mappings":";AAmBM,MAAA,kBAAkB,CACtB,UACA,cAOI;AAAA,EACF,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AAAA;AAAA,EAGf,kBAAkB,CAAC;AACrB,MACG;AACHA,iBAAM,SAAS,QAAQ,UAAU,CAAC,UAAe;AAC/C,QAAI,OAAO,MAAM,mBAAmB,MAAM,OAAO,IAAI;AACvC,kBAAA,MAAM,KAAK,eAA2C,GAAG;AAAA,QACnE;AAAA,UACE,IAAI,MAAM,OAAO;AAAA,UACjB,SAAS,MAAM,OAAO;AAAA,QACxB;AAAA,MAAA;AAAA,IAEJ;AAEI,QAAA,OAAO,MAAM,oBAAoB,eAAe;AAClC,sBAAA,OAAO,OAAO,UAAU,WAAW;AAAA,IACrD;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEA,MAAM,wBAAwB,CAC5B,iBACA,aACA,YAA2B,SACxB;AACG,QAAA,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,EACrB,KAAK,GAAG,EACR;AAEI,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,oBAAoB,CACxB,iBACA,aACA,YAAY,SACT;AACH,QAAM,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,IAAI,CAAC;AAEtB,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,mCAAmC,CACvC,MACA,UACA,UACA,UACA,YACG;AACI,SAAA;AAAA,IACL,MAAM,QAAQ,SAAS;AAAA,IACvB,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,QAAQ,SAAS;AAAA,EAAA;AAErB;AAEA,MAAM,4BAA4B,CAChC,OACA,SACA,WACA,YACG;AACH,QAAM,QAA8B;AAAA,IAClC,mBACE,QAAQ,iBAAiB,MAAM,SAC3B,QAAQ,iBAAiB,IACzB,sBAAsB,SAAS,SAAS,aAAa,OAAO;AAAA,IAClE,oBACE,QAAQ,kBAAkB,MAAM,SAC5B,QAAQ,kBAAkB,IAC1B,sBAAsB,eAAe,SAAS,WAAW;AAAA,IAC/D,iBACE,QAAQ,eAAe,MAAM,SACzB,QAAQ,eAAe,IACvB,sBAAsB,cAAc,SAAS,WAAW;AAAA,EAAA;AAGhE,MAAI,WAAW;AACb,UAAM,cAAc,IAAI;AACxB,UAAM,mBAAmB,IACvB,QAAQ,mBAAmB,MAAM,SAC7B,QAAQ,mBAAmB,IAC3B,kBAAkB,gBAAgB,SAAS,WAAW;AAAA,EAC9D;AAEO,SAAA;AACT;"}
+{"version":3,"file":"FormUtils.js","sources":["../../../../../src/Forms/FormElement/utils/FormUtils.ts"],"sourcesContent":["import React from \"react\";\nimport { InputBaseComponentProps } from \"@mui/material/InputBase\";\n\nimport { HvFormElementContextValue } from \"../context/FormElementContext\";\nimport { HvFormElementDescriptorsContextValue } from \"../context/FormElementDescriptorsContext\";\n\ninterface Descriptor {\n  id?: string;\n  htmlFor?: string;\n}\n/**\n * Scans the element's children looking for the children IDs that match the different form element types.\n * This function will produce an object that has a key for each provided name\n * Inside each key there will be an array with each id of the found descriptor.\n *\n * @param {Array} children - The children inside the form element to scan.\n * @param {Object} descriptors - Initial descriptors map (used for recursion).\n *\n */\nconst findDescriptors = (\n  children: React.ReactNode,\n  descriptors: {\n    input: Descriptor[];\n    label: Descriptor[];\n    description: Descriptor[];\n    controlled: Descriptor[];\n    errormessage: Descriptor[];\n    HvCalendarHeader?: Descriptor[];\n  } = {\n    input: [],\n    label: [],\n    description: [],\n    controlled: [],\n    errormessage: [],\n\n    // TODO: refactor this out\n    HvCalendarHeader: [],\n  },\n) => {\n  React.Children.forEach(children, (child: any) => {\n    if (child?.type?.formElementType && child.props?.id) {\n      descriptors[child.type.formElementType as keyof typeof descriptors]?.push(\n        {\n          id: child.props?.id,\n          htmlFor: child.props?.htmlFor,\n        },\n      );\n    }\n\n    if (child?.type?.formElementType !== \"formelement\") {\n      findDescriptors(child?.props?.children, descriptors);\n    }\n  });\n\n  return descriptors;\n};\n\nconst getIdReferenceListFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor: string | null = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)\n    .join(\" \")\n    .trim();\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst getIdReferenceFor = (\n  formElementType: string,\n  descriptors: any,\n  filterFor = null,\n) => {\n  const referenceList = descriptors?.[formElementType]\n    ?.filter((d: any) => d.htmlFor !== filterFor)\n    ?.map((d: any) => d.id)?.[0];\n\n  return referenceList !== \"\" ? referenceList : undefined;\n};\n\nconst buildFormElementPropsFromContext = (\n  name?: string,\n  disabled?: boolean,\n  readOnly?: boolean,\n  required?: boolean,\n  context?: HvFormElementContextValue,\n) => {\n  return {\n    name: name || context?.elementName,\n    disabled: disabled !== undefined ? disabled : context?.elementDisabled,\n    readOnly: readOnly !== undefined ? readOnly : context?.elementReadOnly,\n    required: required !== undefined ? required : context?.elementRequired,\n    status: context?.elementStatus,\n  };\n};\n\nconst buildAriaPropsFromContext = (\n  props: InputBaseComponentProps,\n  context: HvFormElementDescriptorsContextValue,\n  isInvalid: boolean,\n  inputId?: string,\n) => {\n  const arias: React.AriaAttributes = {\n    \"aria-labelledby\":\n      props?.[\"aria-labelledby\"] !== undefined\n        ? props?.[\"aria-labelledby\"]\n        : getIdReferenceListFor(\"label\", context?.descriptors, inputId),\n    \"aria-describedby\":\n      props?.[\"aria-describedby\"] !== undefined\n        ? props?.[\"aria-describedby\"]\n        : getIdReferenceListFor(\"description\", context?.descriptors),\n    \"aria-controls\":\n      props?.[\"aria-controls\"] !== undefined\n        ? props?.[\"aria-controls\"]\n        : getIdReferenceListFor(\"controlled\", context?.descriptors),\n  };\n\n  if (isInvalid) {\n    arias[\"aria-invalid\"] = isInvalid;\n    arias[\"aria-errormessage\"] =\n      props?.[\"aria-errormessage\"] !== undefined\n        ? props?.[\"aria-errormessage\"]\n        : getIdReferenceFor(\"errormessage\", context?.descriptors);\n  }\n\n  return arias;\n};\n\nexport {\n  findDescriptors,\n  getIdReferenceListFor,\n  getIdReferenceFor,\n  buildFormElementPropsFromContext,\n  buildAriaPropsFromContext,\n};\n"],"names":["React"],"mappings":";AAmBM,MAAA,kBAAkB,CACtB,UACA,cAOI;AAAA,EACF,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,YAAY,CAAC;AAAA,EACb,cAAc,CAAC;AAAA;AAAA,EAGf,kBAAkB,CAAC;AACrB,MACG;AACHA,iBAAM,SAAS,QAAQ,UAAU,CAAC,UAAe;AAC/C,QAAI,OAAO,MAAM,mBAAmB,MAAM,OAAO,IAAI;AACvC,kBAAA,MAAM,KAAK,eAA2C,GAAG;AAAA,QACnE;AAAA,UACE,IAAI,MAAM,OAAO;AAAA,UACjB,SAAS,MAAM,OAAO;AAAA,QACxB;AAAA,MAAA;AAAA,IAEJ;AAEI,QAAA,OAAO,MAAM,oBAAoB,eAAe;AAClC,sBAAA,OAAO,OAAO,UAAU,WAAW;AAAA,IACrD;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEA,MAAM,wBAAwB,CAC5B,iBACA,aACA,YAA2B,SACxB;AACG,QAAA,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,EACrB,KAAK,GAAG,EACR;AAEI,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,oBAAoB,CACxB,iBACA,aACA,YAAY,SACT;AACH,QAAM,gBAAgB,cAAc,eAAe,GAC/C,OAAO,CAAC,MAAW,EAAE,YAAY,SAAS,GAC1C,IAAI,CAAC,MAAW,EAAE,EAAE,IAAI,CAAC;AAEtB,SAAA,kBAAkB,KAAK,gBAAgB;AAChD;AAEA,MAAM,mCAAmC,CACvC,MACA,UACA,UACA,UACA,YACG;AACI,SAAA;AAAA,IACL,MAAM,QAAQ,SAAS;AAAA,IACvB,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,UAAU,aAAa,SAAY,WAAW,SAAS;AAAA,IACvD,QAAQ,SAAS;AAAA,EAAA;AAErB;AAEA,MAAM,4BAA4B,CAChC,OACA,SACA,WACA,YACG;AACH,QAAM,QAA8B;AAAA,IAClC,mBACE,QAAQ,iBAAiB,MAAM,SAC3B,QAAQ,iBAAiB,IACzB,sBAAsB,SAAS,SAAS,aAAa,OAAO;AAAA,IAClE,oBACE,QAAQ,kBAAkB,MAAM,SAC5B,QAAQ,kBAAkB,IAC1B,sBAAsB,eAAe,SAAS,WAAW;AAAA,IAC/D,iBACE,QAAQ,eAAe,MAAM,SACzB,QAAQ,eAAe,IACvB,sBAAsB,cAAc,SAAS,WAAW;AAAA,EAAA;AAGhE,MAAI,WAAW;AACb,UAAM,cAAc,IAAI;AACxB,UAAM,mBAAmB,IACvB,QAAQ,mBAAmB,MAAM,SAC7B,QAAQ,mBAAmB,IAC3B,kBAAkB,gBAAgB,SAAS,WAAW;AAAA,EAC9D;AAEO,SAAA;AACT;"}

package/dist/esm/Forms/InfoMessage/InfoMessage.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("HvInfoMessage", {
   root: { color: theme.colors.secondary_80, display: "inline-block" },
   infoDisabled: { color: theme.colors.secondary_60 },

package/dist/esm/Forms/Label/Label.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("HvLabel", {
   root: { fontWeight: theme.fontWeights.normal, display: "inline-block" },
   labelDisabled: { color: theme.colors.secondary_60 },

package/dist/esm/Forms/Suggestions/Suggestions.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("HvSuggestions", {
   root: { position: "relative" },
   list: {

package/dist/esm/Forms/WarningText/WarningText.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("HvWarningText", {
   root: { display: "none" },
   defaultIcon: { minWidth: "24px", width: "24px", height: "24px" },

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

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalActions.styles.js","sources":["../../../src/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    padding: theme.spacing(1, 0),\n    backdropFilter: \"blur(1px)\",\n\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      position: \"absolute\",\n      inset: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n\n    \"& $wrapper\": {\n      top: 0,\n      left: 0,\n      backgroundColor: theme.colors.atmo1,\n      width: \"100%\",\n      borderWidth: 1,\n      borderRadius: theme.radii.round,\n    },\n  },\n  section: {\n    \"& $wrapper\": {\n      borderTopWidth: 1,\n      paddingLeft: 0,\n    },\n  },\n  wrapper: {\n    padding: theme.space.xs,\n    position: \"relative\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    borderColor: theme.colors.atmo4,\n    paddingLeft: theme.space.sm,\n  },\n\n  /** @deprecated use classes.global $wrapper */\n  globalSectionArea: {},\n  /** @deprecated use classes.section $wrapper */\n  globalWrapperComplement: {},\n  backButton: {},\n  name: {\n    flexGrow: 1,\n  },\n  /** @deprecated use classes.name */\n  sectionName: {},\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    // TODO: remove in v6 in favour of consistently setting `flexGrow: 1` in a title \"wrapper\"\n    marginLeft: \"auto\",\n  },\n});\n\nexport const getBreakpointStyles = (\n  isUpMd: boolean,\n  isSmDown: boolean,\n): CSSInterpolation => {\n  const unit = isUpMd ? 4 : isSmDown ? 2 : 0;\n  if (!unit) return {};\n\n  return {\n    width: `calc(100% - 2 * ${theme.spacing(unit)})`,\n    marginLeft: theme.spacing(unit),\n    marginRight: theme.spacing(unit),\n  };\n};\n"],"names":[],"mappings":";;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,IACrC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,gBAAgB;AAAA,IAEhB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IAEA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,cAAc;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA;AAAA,EAGA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,yBAAyB,CAAC;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA,EACd,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA;AAAA,IAEjB,YAAY;AAAA,EACd;AACF,CAAC;AAEY,MAAA,sBAAsB,CACjC,QACA,aACqB;AACrB,QAAM,OAAO,SAAS,IAAI,WAAW,IAAI;AACrC,MAAA,CAAC,KAAM,QAAO;AAEX,SAAA;AAAA,IACL,OAAO,mBAAmB,MAAM,QAAQ,IAAI,CAAC;AAAA,IAC7C,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B,aAAa,MAAM,QAAQ,IAAI;AAAA,EAAA;AAEnC;"}
+{"version":3,"file":"GlobalActions.styles.js","sources":["../../../src/GlobalActions/GlobalActions.styles.tsx"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvGlobalActions\", {\n  root: {\n    position: \"relative\",\n  },\n  positionSticky: {\n    width: \"100%\",\n    position: \"sticky\",\n  },\n  positionFixed: {\n    width: \"100%\",\n    position: \"fixed\",\n  },\n  global: {\n    zIndex: `calc(${theme.zIndices.banner} - 2)`,\n    top: 0,\n    left: 0,\n    padding: theme.spacing(1, 0),\n    backdropFilter: \"blur(1px)\",\n\n    \"&:before\": {\n      content: \"''\",\n      display: \"flex\",\n      position: \"absolute\",\n      inset: 0,\n      background: theme.colors.atmo2,\n      opacity: \"75%\",\n    },\n\n    \"& $wrapper\": {\n      top: 0,\n      left: 0,\n      backgroundColor: theme.colors.atmo1,\n      width: \"100%\",\n      borderWidth: 1,\n      borderRadius: theme.radii.round,\n    },\n  },\n  section: {\n    \"& $wrapper\": {\n      borderTopWidth: 1,\n      paddingLeft: 0,\n    },\n  },\n  wrapper: {\n    padding: theme.space.xs,\n    position: \"relative\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    borderColor: theme.colors.atmo4,\n    paddingLeft: theme.space.sm,\n  },\n\n  /** @deprecated use classes.global $wrapper */\n  globalSectionArea: {},\n  /** @deprecated use classes.section $wrapper */\n  globalWrapperComplement: {},\n  backButton: {},\n  name: {\n    flexGrow: 1,\n  },\n  /** @deprecated use classes.name */\n  sectionName: {},\n  actions: {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: theme.space.xs,\n    // TODO: remove in v6 in favour of consistently setting `flexGrow: 1` in a title \"wrapper\"\n    marginLeft: \"auto\",\n  },\n});\n\nexport const getBreakpointStyles = (\n  isUpMd: boolean,\n  isSmDown: boolean,\n): CSSInterpolation => {\n  const unit = isUpMd ? 4 : isSmDown ? 2 : 0;\n  if (!unit) return {};\n\n  return {\n    width: `calc(100% - 2 * ${theme.spacing(unit)})`,\n    marginLeft: theme.spacing(unit),\n    marginRight: theme.spacing(unit),\n  };\n};\n"],"names":[],"mappings":";;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,IACd,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,eAAe;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ,QAAQ,MAAM,SAAS,MAAM;AAAA,IACrC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,gBAAgB;AAAA,IAEhB,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,MACP,YAAY,MAAM,OAAO;AAAA,MACzB,SAAS;AAAA,IACX;AAAA,IAEA,cAAc;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,aAAa;AAAA,MACb,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,cAAc;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA,IACjB,aAAa,MAAM,OAAO;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA;AAAA,EAGA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,yBAAyB,CAAC;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,aAAa,CAAC;AAAA,EACd,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,MAAM;AAAA;AAAA,IAEjB,YAAY;AAAA,EACd;AACF,CAAC;AAEY,MAAA,sBAAsB,CACjC,QACA,aACqB;AACrB,QAAM,OAAO,SAAS,IAAI,WAAW,IAAI;AACrC,MAAA,CAAC,KAAM,QAAO;AAEX,SAAA;AAAA,IACL,OAAO,mBAAmB,MAAM,QAAQ,IAAI,CAAC;AAAA,IAC7C,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B,aAAa,MAAM,QAAQ,IAAI;AAAA,EAAA;AAEnC;"}

package/dist/esm/Grid/Grid.styles.js

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