@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -4,12 +4,10 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const MuiDialog = require("@mui/material/Dialog");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const document$1 = require("../../utils/document.cjs");
 const setId = require("../../utils/setId.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
-const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const Dialog_styles = require("./Dialog.styles.cjs");
 const context = require("./context.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
@@ -31,52 +29,66 @@ const HvDialog = (props) => {
     disableBackdropClick = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvDialog", props);
-  const {
-    classes,
-    css,
-    cx
-  } = Dialog_styles.useClasses(classesProp);
-  const {
-    rootId,
-    colors
-  } = useTheme.useTheme();
+  const { classes, css, cx } = Dialog_styles.useClasses(classesProp);
+  const { rootId } = useTheme.useTheme();
   const measuredRef = React.useCallback(() => {
     if (!firstFocusable)
       return;
     const element = document.getElementById(firstFocusable);
     element?.focus();
   }, [firstFocusable]);
-  const contextValue = React.useMemo(() => ({
-    fullscreen
-  }), [fullscreen]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, { container: document$1.getElementById(rootId), className: cx(classes.root, className), classes: {
-    container: css({
-      position: "relative"
-    })
-  }, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => {
-    if (disableBackdropClick)
-      return;
-    onClose?.(event, reason);
-  }, slotProps: {
-    backdrop: {
-      classes: {
-        root: cx(css({
-          background: hexToRgbA.hexToRgbA(colors?.atmo4 || uikitStyles.theme.colors.atmo4, 0.8)
-        }), classes.background)
-      }
-    }
-  }, PaperProps: {
-    classes: {
-      root: cx(css({
-        position: "absolute"
-      }), classes.paper, variant && cx(classes.statusBar, classes[variant]), {
-        [classes.fullscreen]: fullscreen
-      })
+  const contextValue = React.useMemo(() => ({ fullscreen }), [fullscreen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MuiDialog__default.default,
+    {
+      container: document$1.getElementById(rootId),
+      className: cx(classes.root, className),
+      classes: { container: css({ position: "relative" }) },
+      id,
+      ref: measuredRef,
+      open,
+      fullScreen: fullscreen,
+      onClose: (event, reason) => {
+        if (disableBackdropClick)
+          return;
+        onClose?.(event, reason);
+      },
+      slotProps: {
+        backdrop: {
+          classes: {
+            root: classes.background
+          }
+        }
+      },
+      PaperProps: {
+        classes: {
+          root: cx(
+            css({ position: "absolute" }),
+            classes.paper,
+            variant && cx(classes.statusBar, classes[variant]),
+            {
+              [classes.fullscreen]: fullscreen
+            }
+          )
+        }
+      },
+      "aria-modal": true,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button.HvButton,
+          {
+            id: setId.setId(id, "close"),
+            className: classes.closeButton,
+            variant: "secondaryGhost",
+            onClick: (event) => onClose?.(event, void 0),
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(context.DialogContext.Provider, { value: contextValue, children })
+      ]
     }
-  }, "aria-modal": true, ...others, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => onClose?.(event, void 0), children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(context.DialogContext.Provider, { value: contextValue, children })
-  ] });
+  );
 };
 exports.dialogClasses = Dialog_styles.staticClasses;
 exports.HvDialog = HvDialog;

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\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?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => 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, colors } = 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: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\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      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","jsxs","MuiDialog","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","jsx","HvTooltip","HvButton","setId","closeButton","undefined","Close","DialogContext"],"mappings":";;;;;;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS,SAAA;AAE9BC,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,aAASG,MAAM;AAAA,EAAA,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,MAAAA,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACGkB,2BAAA,KAAAC,mBAAA,SAAA,EACC,WAAWL,WAAAA,eAAeP,MAAM,GAChC,WAAWF,GAAGd,QAAQ6B,MAAM3B,SAAS,GACrC,SAAS;AAAA,IAAE4B,WAAWjB,IAAI;AAAA,MAAEkB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKZ,aACL,MACA,YAAYV,YACZ,SAAS,CAACuB,OAAOC,WAAW;AAGtBvB,QAAAA;AAAsB;AAE1BJ,cAAU0B,OAAOC,MAAM;AAAA,KAEzB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRlC,SAAS;AAAA,QACP6B,MAAMf,GACJD,IAAI;AAAA,UACFsB,YAAYC,UAAUnB,UAAAA,QAAQoB,SAASC,YAAAA,MAAMrB,OAAOoB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDrC,QAAQmC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVnC,SAAS;AAAA,MACP6B,MAAMf,GACJD,IAAI;AAAA,QAAEkB,UAAU;AAAA,MAAA,CAAY,GAC5B/B,QAAQuC,OACRxC,WAAWe,GAAGd,QAAQwC,WAAWxC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA8B,2BAAA,IAACC,QAAU,WAAA,EAAA,WAAU,OAAM,OAAOlC,aAChC,UAAAiC,2BAAA,IAACE,OACC,UAAA,EAAA,IAAIC,MAAMzC,MAAAA,IAAI,OAAO,GACrB,WAAWH,QAAQ6C,aACnB,SAAQ,kBACR,SAAUb,CAAU1B,UAAAA,UAAU0B,OAAOc,MAAS,GAE9C,UAAAL,2BAAAA,IAACM,gBAAAA,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,mCACCC,QAAc,cAAA,UAAd,EAAuB,OAAOvB,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { getElementById } from \"@core/utils/document\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\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?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => 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      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useTheme","useCallback","useMemo","jsxs","MuiDialog","getElementById","jsx","HvTooltip","HvButton","setId","Close","DialogContext"],"mappings":";;;;;;;;;;;;;;;;AAmDa,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,IACDA,gBAAgB,gBAAA,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,cAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAWC,SAAAA;AAEb,QAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAeC,MAAAA,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAAC,2BAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,WAAWC,0BAAe,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;AAGtB,YAAA;AAAsB;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,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAA,IAACC,QAAU,WAAA,EAAA,WAAU,OAAM,OAAO,aAChC,UAAAD,2BAAA;AAAA,UAACE,OAAA;AAAA,UAAA;AAAA,YACC,IAAIC,MAAAA,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,UAAAH,2BAAAA,IAACI,gBAAAA,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QAAA,GAEvB;AAAA,uCACCC,QAAc,cAAA,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

package/dist/cjs/components/Dialog/Dialog.styles.cjs

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvDialog", {
+const { staticClasses, useClasses } = classes.createClasses("HvDialog", {
   root: {},
-  background: {},
+  background: { background: uikitStyles.theme.alpha("atmo4", 0.8) },
   paper: {
     color: uikitStyles.theme.colors.secondary,
     backgroundColor: uikitStyles.theme.colors.atmo1,

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n  root: {},\n  background: {},\n  paper: {\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: [\"none\", theme.colors.shadow],\n    borderRadius: theme.radii.round,\n  },\n  fullscreen: {},\n  closeButton: {\n    padding: 0,\n    minWidth: \"auto\",\n    position: \"absolute\",\n    top: theme.space.sm,\n    right: theme.space.sm,\n    width: 32,\n    height: 32,\n  },\n  statusBar: {\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n    borderTopWidth: 4,\n    borderTopStyle: \"solid\",\n  },\n  success: {\n    borderTopColor: theme.colors.positive,\n  },\n  error: {\n    borderTopColor: theme.colors.negative,\n  },\n  warning: {\n    borderTopColor: theme.colors.warning,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","radii","round","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height","statusBar","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderTopStyle","success","borderTopColor","positive","error","negative","warning"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,MAAMC;AAAAA,EAC5B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKf,YAAAA,MAAMgB,MAAMC;AAAAA,IACjBC,OAAOlB,YAAAA,MAAMgB,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,WAAW;AAAA,IACTC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPC,gBAAgB3B,YAAAA,MAAMC,OAAO2B;AAAAA,EAC/B;AAAA,EACAC,OAAO;AAAA,IACLF,gBAAgB3B,YAAAA,MAAMC,OAAO6B;AAAAA,EAC/B;AAAA,EACAC,SAAS;AAAA,IACPJ,gBAAgB3B,YAAAA,MAAMC,OAAO8B;AAAAA,EAC/B;AACF,CAAC;;;"}
+{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n  root: {},\n  background: { background: theme.alpha(\"atmo4\", 0.8) },\n  paper: {\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: [\"none\", theme.colors.shadow],\n    borderRadius: theme.radii.round,\n  },\n  fullscreen: {},\n  closeButton: {\n    padding: 0,\n    minWidth: \"auto\",\n    position: \"absolute\",\n    top: theme.space.sm,\n    right: theme.space.sm,\n    width: 32,\n    height: 32,\n  },\n  statusBar: {\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n    borderTopWidth: 4,\n    borderTopStyle: \"solid\",\n  },\n  success: {\n    borderTopColor: theme.colors.positive,\n  },\n  error: {\n    borderTopColor: theme.colors.negative,\n  },\n  warning: {\n    borderTopColor: theme.colors.warning,\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,YAAY,EAAE,YAAYC,YAAAA,MAAM,MAAM,SAAS,GAAG,EAAE;AAAA,EACpD,OAAO;AAAA,IACL,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAC9B,WAAW,CAAC,QAAQA,kBAAM,OAAO,MAAM;AAAA,IACvC,cAAcA,YAAAA,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,YAAY,CAAC;AAAA,EACb,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,KAAKA,YAAAA,MAAM,MAAM;AAAA,IACjB,OAAOA,YAAAA,MAAM,MAAM;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,gBAAgBA,YAAAA,MAAM,OAAO;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,IACL,gBAAgBA,YAAAA,MAAM,OAAO;AAAA,EAC/B;AAAA,EACA,SAAS;AAAA,IACP,gBAAgBA,YAAAA,MAAM,OAAO;AAAA,EAC/B;AACF,CAAC;;;"}

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

@@ -19,26 +19,28 @@ const HvDialogTitle = (props) => {
     customIcon = null,
     ...others
   } = useDefaultProps.useDefaultProps("HvDialogTitle", props);
-  const {
-    classes,
-    css,
-    cx
-  } = Title_styles.useClasses(classesProp);
-  const {
-    fullscreen
-  } = context.useDialogContext();
+  const { classes, css, cx } = Title_styles.useClasses(classesProp);
+  const { fullscreen } = context.useDialogContext();
   const isString = typeof children === "string";
   const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiDialogTitle__default.default, { className: cx(!fullscreen && css({
-    flex: 1
-  }), classes.root, {
-    [classes.fullscreen]: fullscreen
-  }, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
-    icon,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({
-      [classes.textWithIcon]: !!icon
-    }), children: !isString ? children : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children }) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiDialogTitle__default.default,
+    {
+      className: cx(
+        !fullscreen && css({ flex: 1 }),
+        classes.root,
+        {
+          [classes.fullscreen]: fullscreen
+        },
+        className
+      ),
+      ...others,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
+        icon,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.textWithIcon]: !!icon }), children: !isString ? children : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "title4", className: classes.titleText, children }) })
+      ] })
+    }
+  );
 };
 exports.dialogTitleClasses = Title_styles.staticClasses;
 exports.HvDialogTitle = HvDialogTitle;

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

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString ? (\n            children\n          ) : (\n            <HvTypography variant=\"title4\" className={classes.titleText}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","fullscreen","useDialogContext","isString","icon","iconVariant","MuiDialogTitle","flex","root","jsxs","messageContainer","jsx","textWithIcon","HvTypography","titleText"],"mappings":";;;;;;;;;;;AAoCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,MAAeC,QAAiB,iBAAA;AAElCC,QAAAA,WAAW,OAAOX,aAAa;AAErC,QAAMY,OAAOT,cAAeD,YAAYW,YAAAA,YAAYZ,OAAO;AAE3D,wCACGa,wBAAAA,SACC,EAAA,WAAWP,GACT,CAACE,cAAcH,IAAI;AAAA,IAAES,MAAM;AAAA,EAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQY,UAAU,GAAGA;AAAAA,EACxB,GACAV,SACF,GACA,GAAIK,QAEJ,UAACa,2BAAAA,KAAA,OAAA,EAAI,WAAWpB,QAAQqB,kBACrBN,UAAAA;AAAAA,IAAAA;AAAAA,IACDO,2BAAAA,IAAC,OAAI,EAAA,WAAWZ,GAAG;AAAA,MAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACR;AAAAA,IAAAA,CAAM,GAClD,UAACD,CAAAA,WACAX,WAEAmB,2BAAAA,IAACE,WAAAA,cAAa,EAAA,SAAQ,UAAS,WAAWxB,QAAQyB,WAC/CtB,UACH,EAEJ,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"Title.cjs","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString ? (\n            children\n          ) : (\n            <HvTypography variant=\"title4\" className={classes.titleText}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["useDefaultProps","useClasses","useDialogContext","iconVariant","jsx","MuiDialogTitle","jsxs","HvTypography"],"mappings":";;;;;;;;;;;AAoCa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,KAAK,GAAG,IAAIC,aAAAA,WAAW,WAAW;AAC7C,QAAA,EAAE,eAAeC,QAAAA;AAEjB,QAAA,WAAW,OAAO,aAAa;AAErC,QAAM,OAAO,cAAe,YAAYC,YAAA,YAAY,OAAO;AAGzD,SAAAC,2BAAA;AAAA,IAACC,wBAAA;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,CAAC,cAAc,IAAI,EAAE,MAAM,GAAG;AAAA,QAC9B,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,UAAU,GAAG;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAACC,2BAAA,KAAA,OAAA,EAAI,WAAW,QAAQ,kBACrB,UAAA;AAAA,QAAA;AAAA,QACDF,2BAAAA,IAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,CAAC,KAAA,CAAM,GAClD,UAAA,CAAC,WACA,WAECA,2BAAAA,IAAAG,WAAA,cAAA,EAAa,SAAQ,UAAS,WAAW,QAAQ,WAC/C,SAAA,CACH,EAEJ,CAAA;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA;AAGN;;;"}

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

@@ -2,19 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvDialog-Title", {
-  root: {
-    padding: uikitStyles.theme.space.sm,
-    margin: 0
-  },
+const { staticClasses, useClasses } = classes.createClasses("HvDialog-Title", {
+  root: { padding: uikitStyles.theme.space.sm, margin: 0 },
   fullscreen: {},
-  messageContainer: {
-    display: "flex",
-    alignItems: "center"
-  },
+  messageContainer: { display: "flex", alignItems: "center" },
   textWithIcon: {
     marginLeft: uikitStyles.theme.space.xs,
     // 32px is the icon width

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

@@ -1 +1 @@
-{"version":3,"file":"Title.styles.cjs","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","margin","fullscreen","messageContainer","display","alignItems","textWithIcon","marginLeft","xs","marginRight","titleText"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IAAIC,QAAQ;AAAA,EAAE;AAAA,EAC3CC,YAAY,CAAC;AAAA,EACbC,kBAAkB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC1DC,cAAc;AAAA,IACZC,YAAYT,YAAAA,MAAMC,MAAMS;AAAAA;AAAAA,IAExBC,aAAc,eAAcX,YAAAA,MAAMC,MAAMS,EAAG;AAAA,EAC7C;AAAA,EACAE,WAAW,CAAC;AACd,CAAC;;;"}
+{"version":3,"file":"Title.styles.cjs","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {},\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM,EAAE,SAASC,kBAAM,MAAM,IAAI,QAAQ,EAAE;AAAA,EAC3C,YAAY,CAAC;AAAA,EACb,kBAAkB,EAAE,SAAS,QAAQ,YAAY,SAAS;AAAA,EAC1D,cAAc;AAAA,IACZ,YAAYA,YAAAA,MAAM,MAAM;AAAA;AAAA,IAExB,aAAa,eAAeA,YAAAA,MAAM,MAAM,EAAE;AAAA,EAC5C;AAAA,EACA,WAAW,CAAC;AACd,CAAC;;;"}

package/dist/cjs/components/Dialog/context.cjs

@@ -1,9 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const DialogContext = React.createContext({
-  fullscreen: false
-});
+const DialogContext = React.createContext({ fullscreen: false });
 const useDialogContext = () => React.useContext(DialogContext);
 exports.DialogContext = DialogContext;
 exports.useDialogContext = useDialogContext;

package/dist/cjs/components/Dialog/context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.cjs","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["DialogContext","createContext","fullscreen","useDialogContext","useContext"],"mappings":";;;AAEO,MAAMA,gBAAgBC,MAAAA,cAAc;AAAA,EAAEC,YAAY;AAAM,CAAC;AAEnDC,MAAAA,mBAAmBA,MAAMC,MAAAA,WAAWJ,aAAa;;;"}
+{"version":3,"file":"context.cjs","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["createContext","useContext"],"mappings":";;;AAEO,MAAM,gBAAgBA,MAAA,cAAc,EAAE,YAAY,OAAO;AAEnD,MAAA,mBAAmB,MAAMC,MAAAA,WAAW,aAAa;;;"}

package/dist/cjs/components/DotPagination/DotPagination.cjs

@@ -12,9 +12,12 @@ const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
     radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.OtherStep, { width: 8, height: 8 }), {
       className: classes?.icon
     }),
-    radioChecked: React.cloneElement(radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, { width: 8, height: 8 }), {
-      className: classes?.icon
-    })
+    radioChecked: React.cloneElement(
+      radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, { width: 8, height: 8 }),
+      {
+        className: classes?.icon
+      }
+    )
   };
 };
 const range = (n) => Array.from(Array(n), (_, i) => i);
@@ -30,17 +33,35 @@ const HvDotPagination = (props) => {
     getItemAriaLabel,
     ...others
   } = useDefaultProps.useDefaultProps("HvDotPagination", props);
-  const {
-    classes,
-    cx
-  } = DotPagination_styles.useClasses(classesProp);
+  const { classes, cx } = DotPagination_styles.useClasses(classesProp);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroup.HvRadioGroup, { className: cx(classes.root, className), classes: {
-    horizontal: classes.horizontal
-  }, orientation: "horizontal", ...others, children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(Radio.HvRadio, { classes: {
-    radio: classes.radio,
-    root: classes.radioRoot
-  }, value: i, checked: page === i, onChange: (event) => onPageChange?.(event, i), icon: icons.radio, checkedIcon: icons.radioChecked, "aria-label": getItemAriaLabel?.(i) }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RadioGroup.HvRadioGroup,
+    {
+      className: cx(classes.root, className),
+      classes: {
+        horizontal: classes.horizontal
+      },
+      orientation: "horizontal",
+      ...others,
+      children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(
+        Radio.HvRadio,
+        {
+          classes: {
+            radio: classes.radio,
+            root: classes.radioRoot
+          },
+          value: i,
+          checked: page === i,
+          onChange: (event) => onPageChange?.(event, i),
+          icon: icons.radio,
+          checkedIcon: icons.radioChecked,
+          "aria-label": getItemAriaLabel?.(i)
+        },
+        i
+      ))
+    }
+  );
 };
 exports.dotPaginationClasses = DotPagination_styles.staticClasses;
 exports.HvDotPagination = HvDotPagination;

package/dist/cjs/components/DotPagination/DotPagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.cjs","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","jsx","OtherStep","className","icon","radioChecked","CurrentStep","range","n","Array","from","_","i","HvDotPagination","props","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","useDefaultProps","cx","useClasses","icons","HvRadioGroup","root","horizontal","map","HvRadio","radioRoot","event"],"mappings":";;;;;;;;;AAsDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,mBAAaJ,aAAaK,2BAAAA,IAACC,6BAAU,OAAO,GAAG,QAAQ,EAAA,IAAO;AAAA,MACnEC,WAAWL,SAASM;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcL,mBACZH,oBAAoBI,2BAAAA,IAACK,+BAAY,OAAO,GAAG,QAAQ,EAAA,IACnD;AAAA,MACEH,WAAWL,SAASM;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAEA,MAAMG,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAMhDC,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJX;AAAAA,IACAL,SAASiB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAEhB;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWV,WAAW;AAE9C,QAAMW,QAAQ/B,iBAAiBqB,gBAAgBC,cAAcnB,OAAO;AAGlE,SAAAG,2BAAA,IAAC0B,2BACC,WAAWH,GAAG1B,QAAQ8B,MAAMzB,SAAS,GACrC,SAAS;AAAA,IACP0B,YAAY/B,QAAQ+B;AAAAA,EAEtB,GAAA,aAAY,cACZ,GAAIP,QAEHf,UAAAA,MAAMW,KAAK,EAAEY,IAAKlB,CAAAA,MAChBX,2BAAA,IAAA8B,MAAA,SAAA,EACC,SAAS;AAAA,IACPhC,OAAOD,QAAQC;AAAAA,IACf6B,MAAM9B,QAAQkC;AAAAA,EAChB,GAEA,OAAOpB,GACP,SAASO,SAASP,GAClB,UAAWqB,CAAAA,UAAUb,eAAea,OAAOrB,CAAC,GAC5C,MAAMc,MAAM3B,OACZ,aAAa2B,MAAMrB,cACnB,cAAYgB,mBAAmBT,CAAC,EAAA,GAN3BA,CAM6B,CAErC,EACH,CAAA;AAEJ;;;"}
+{"version":3,"file":"DotPagination.cjs","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["cloneElement","jsx","OtherStep","CurrentStep","useDefaultProps","useClasses","HvRadioGroup","HvRadio"],"mappings":";;;;;;;;;AAsDA,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAOA,mBAAa,aAAaC,2BAAAA,IAACC,6BAAU,OAAO,GAAG,QAAQ,EAAA,CAAG,GAAI;AAAA,MACnE,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAcF,MAAA;AAAA,MACZ,oBAAqBC,2BAAA,IAAAE,6BAAA,EAAY,OAAO,GAAG,QAAQ,GAAG;AAAA,MACtD;AAAA,QACE,WAAW,SAAS;AAAA,MACtB;AAAA,IACF;AAAA,EAAA;AAEJ;AAEA,MAAM,QAAQ,CAAC,MAAc,MAAM,KAAK,MAAM,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAMhD,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDC,gBAAgB,gBAAA,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAIC,gCAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAAJ,2BAAA;AAAA,IAACK,WAAA;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjBL,2BAAA;AAAA,QAACM,MAAA;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,YACP,OAAO,QAAQ;AAAA,YACf,MAAM,QAAQ;AAAA,UAChB;AAAA,UAEA,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,cAAY,mBAAmB,CAAC;AAAA,QAAA;AAAA,QAN3B;AAAA,MAAA,CAQR;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/dist/cjs/components/DotPagination/DotPagination.styles.cjs

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  useClasses,
-  staticClasses
-} = classes.createClasses("HvDotPagination", {
+const { useClasses, staticClasses } = classes.createClasses("HvDotPagination", {
   root: {
     display: "flex",
     justifyContent: "center"

package/dist/cjs/components/DotPagination/DotPagination.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.styles.cjs","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: theme.space.xs,\n  },\n\n  radio: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.neutral_20,\n      borderRadius: \"100%\",\n    },\n  },\n\n  icon: {\n    width: \"16px\",\n    height: \"16px\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","display","justifyContent","horizontal","marginLeft","width","radioRoot","theme","space","xs","radio","height","backgroundColor","colors","neutral_20","borderRadius","icon"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EAEAC,YAAY;AAAA,IACVC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EAEAC,WAAW;AAAA,IACTF,YAAYG,YAAAA,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EAEAC,OAAO;AAAA,IACLC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,MAC9BC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEAC,MAAM;AAAA,IACJX,OAAO;AAAA,IACPM,QAAQ;AAAA,EACV;AACF,CAAC;;;"}
+{"version":3,"file":"DotPagination.styles.cjs","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n\n  horizontal: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n\n  radioRoot: {\n    marginLeft: theme.space.xs,\n  },\n\n  radio: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.neutral_20,\n      borderRadius: \"100%\",\n    },\n  },\n\n  icon: {\n    width: \"16px\",\n    height: \"16px\",\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,YAAY,kBAAkBA,QAAAA,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EAEA,WAAW;AAAA,IACT,YAAYC,YAAAA,MAAM,MAAM;AAAA,EAC1B;AAAA,EAEA,OAAO;AAAA,IACL,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EAEA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;;;"}

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -3,12 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MuiDrawer = require("@mui/material/Drawer");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const IconButton = require("../../utils/IconButton.cjs");
 const setId = require("../../utils/setId.cjs");
-const useTheme = require("../../hooks/useTheme.cjs");
-const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const Drawer_styles = require("./Drawer.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDrawer__default = /* @__PURE__ */ _interopDefault(MuiDrawer);
@@ -23,43 +20,62 @@ const HvDrawer = (props) => {
     anchor = "right",
     buttonTitle = "Close",
     showBackdrop = true,
+    hideBackdrop,
     disableBackdropClick = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvDrawer", props);
-  const {
-    classes,
-    cx,
-    css
-  } = Drawer_styles.useClasses(classesProp);
-  const {
-    colors
-  } = useTheme.useTheme();
+  const { classes, cx } = Drawer_styles.useClasses(classesProp);
   const handleOnClose = (event, reason) => {
     if (reason === "backdropClick" && disableBackdropClick)
       return;
     onClose?.(event, reason);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(MuiDrawer__default.default, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
-    classes: {
-      root: classes.paper
-    }
-  }, hideBackdrop: !showBackdrop, slotProps: {
-    backdrop: {
-      classes: {
-        root: cx(css({
-          background: hexToRgbA.hexToRgbA(colors?.atmo4 || uikitStyles.theme.colors.atmo4)
-        }), classes.background)
+  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    MuiDrawer__default.default,
+    {
+      className: cx(classes.root, className),
+      id,
+      anchor,
+      open,
+      PaperProps: {
+        classes: {
+          root: classes.paper
+        }
+      },
+      hideBackdrop: shouldHideBackdrop,
+      ...!shouldHideBackdrop && {
+        slotProps: {
+          backdrop: {
+            classes: {
+              root: classes.background
+            },
+            onClick: (event) => {
+              if (disableBackdropClick)
+                return;
+              onClose?.(event, "backdropClick");
+            }
+          }
+        }
       },
-      onClick: (event) => {
-        if (disableBackdropClick)
-          return;
-        onClose?.(event, "backdropClick");
-      }
+      onClose: handleOnClose,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.IconButton,
+          {
+            id: setId.setId(id, "close"),
+            className: classes.closeButton,
+            variant: "secondaryGhost",
+            onClick: onClose,
+            title: buttonTitle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" })
+          }
+        ),
+        children
+      ]
     }
-  }, onClose: handleOnClose, ...others, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, title: buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" }) }),
-    children
-  ] });
+  );
 };
 exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = HvDrawer;

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={!showBackdrop}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n              }),\n              classes.background\n            ),\n          },\n          onClick: (event) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          },\n        },\n      }}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","handleOnClose","event","reason","jsxs","MuiDrawer","root","paper","backdrop","background","hexToRgbA","atmo4","theme","onClick","jsx","IconButton","setId","closeButton","Close"],"mappings":";;;;;;;;;;;;;;AA8EaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,cAAAA,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS,SAAA;AAEtBC,QAAAA,gBAA2CA,CAC/CC,OACAC,WACG;AACH,QAAIA,WAAW,mBAAmBV;AAAsB;AAExDJ,cAAUa,OAAOC,MAAM;AAAA,EAAA;AAIvB,SAAAC,2BAAA,KAACC,mBACC,SAAA,EAAA,WAAWT,GAAGZ,QAAQsB,MAAMvB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPsB,MAAMtB,QAAQuB;AAAAA,IAChB;AAAA,EAAA,GAEF,cAAc,CAACf,cACf,WAAW;AAAA,IACTgB,UAAU;AAAA,MACRxB,SAAS;AAAA,QACPsB,MAAMV,GACJC,IAAI;AAAA,UACFY,YAAYC,UAAUX,UAAAA,QAAQY,SAASC,YAAAA,MAAMb,OAAOY,KAAK;AAAA,QAAA,CAC1D,GACD3B,QAAQyB,UACV;AAAA,MACF;AAAA,MACAI,SAAUX,CAAU,UAAA;AACdT,YAAAA;AAAsB;AAC1BJ,kBAAUa,OAAO,eAAe;AAAA,MAClC;AAAA,IACF;AAAA,EAEF,GAAA,SAASD,eACLP,GAAAA,QAEJ,UAAA;AAAA,IAAAoB,2BAAAA,IAACC,yBACC,IAAIC,YAAM9B,IAAI,OAAO,GACrB,WAAWF,QAAQiC,aACnB,SAAQ,kBACR,SAAS5B,SACT,OAAOE,aAEP,yCAAC2B,gBAAAA,OAAM,EAAA,MAAK,QAAM,EACpB,CAAA;AAAA,IACC/B;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"Drawer.cjs","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { IconButton } from \"@core/utils/IconButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <IconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close role=\"none\" />\n      </IconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsxs","MuiDrawer","jsx","IconButton","setId","Close"],"mappings":";;;;;;;;;;;AAwEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAIC,yBAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAAC,2BAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM,QAAQ;AAAA,QAChB;AAAA,MACF;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS,CAAC,UAAU;AACd,kBAAA;AAAsB;AAC1B,wBAAU,OAAO,eAAe;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAAC,2BAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,IAAIC,MAAAA,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAQ;AAAA,YACR,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,UAAAF,2BAAAA,IAACG,gBAAAA,OAAM,EAAA,MAAK,OAAO,CAAA;AAAA,UAAA;AAAA,QACrB;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;;;"}

package/dist/cjs/components/Drawer/Drawer.styles.cjs

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const classes = require("../../utils/classes.cjs");
-const {
-  staticClasses,
-  useClasses
-} = classes.createClasses("HvDrawer", {
+const { staticClasses, useClasses } = classes.createClasses("HvDrawer", {
   root: {},
   paper: {
     backgroundColor: uikitStyles.theme.colors.atmo1,
@@ -13,7 +10,9 @@ const {
     overflow: "auto",
     boxShadow: uikitStyles.theme.colors.shadow
   },
-  background: {},
+  background: {
+    background: uikitStyles.theme.alpha("atmo4", 0.8)
+  },
   closeButton: {
     position: "absolute",
     top: uikitStyles.theme.spacing("sm"),