@hitachivantara/uikit-react-core 5.19.0 → 5.19.2

package/dist/cjs/utils/theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/* eslint import/namespace: [2, { allowComputed: true }] */\nimport { CSSProperties } from \"react\";\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  Object.entries(style).forEach(([property, value]) => {\n    element.style[property] = value;\n  });\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n  themeName: string,\n  modeName: string,\n  colorScheme: string,\n  themeRootId?: string\n) => {\n  const element = themeRootId\n    ? document.getElementById(themeRootId)\n    : document.body;\n\n  if (element) {\n    element.setAttribute(`data-theme`, themeName);\n    element.setAttribute(`data-color-mode`, modeName);\n\n    // Set default properties for all components to inherit\n    setElementStyle(element, {\n      colorScheme,\n      backgroundColor: theme.colors.backgroundColor,\n      accentColor: theme.colors.secondary,\n      color: theme.colors.secondary,\n      fontSize: theme.typography.body.fontSize,\n      fontWeight: theme.typography.body.fontWeight,\n      lineHeight: theme.typography.body.lineHeight,\n      letterSpacing: theme.typography.body.letterSpacing,\n      fontFamily: theme.fontFamily.body,\n    });\n  }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n  const isObject = (val: any) =>\n    val && typeof val === \"object\" && !Array.isArray(val);\n\n  // Customized theme\n  const customizedTheme = { ...obj };\n\n  // Add new values to the theme or replace values\n  Object.keys(customizations).forEach((key) => {\n    if (customizedTheme[key]) {\n      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n        customizedTheme[key] = applyThemeCustomizations(\n          customizedTheme[key],\n          customizations[key]\n        );\n      } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n        customizedTheme[key] = customizations[key];\n      }\n    } else {\n      customizedTheme[key] = customizations[key];\n    }\n  });\n\n  return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n  props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n  const {\n    name,\n    base = \"ds5\",\n    inheritColorModes = true,\n    ...customizations\n  } = props;\n\n  // Apply customizations to the base theme\n  const customizedTheme: HvTheme | HvThemeStructure = customizations\n    ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n    : { ...themes[base] };\n\n  // Set theme name\n  customizedTheme.name = name.trim();\n  // Set theme base\n  customizedTheme.base = base;\n\n  // Fill new color modes with missing colors\n  if (customizations) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!themes[base].colors.modes[mode]) {\n        customizedTheme.colors.modes[mode] = {\n          ...themes[base].colors.modes.dawn,\n          ...(customizedTheme.colors.modes[mode] as Partial<\n            HvThemeColorModeStructure & { [key: string]: string }\n          >),\n        };\n      }\n    });\n  }\n\n  // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n  // we're removing any color modes that might have been inherited\n  if (!inheritColorModes && customizations.colors?.modes) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n        delete customizedTheme.colors.modes[mode];\n      }\n    });\n  }\n\n  // Created theme\n  return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n *  - Cleans themes with the same name\n *  - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n  themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n  if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n    const list: (HvTheme | HvThemeStructure)[] = [];\n\n    themesList.forEach((thm) => {\n      const i: number = list.findIndex(\n        (t) => t.name.trim() === thm.name.trim()\n      );\n\n      if (i !== -1) {\n        list.splice(i, 1);\n        list.push(thm);\n      } else {\n        list.push(thm);\n      }\n    });\n\n    // Cleaned themes\n    return list;\n  }\n  // DS5\n  return [themes.ds5];\n};\n\n/**\n * Returns the computed value of a theme CSS var\n */\nexport const getVarValue = (cssVar: string): string => {\n  const tempEl = document.createElement(\"div\");\n  tempEl.style.setProperty(\"--temp\", cssVar);\n  document.body.appendChild(tempEl);\n  const computedValue = getComputedStyle(tempEl)\n    .getPropertyValue(\"--temp\")\n    .trim();\n  document.body.removeChild(tempEl);\n  return computedValue;\n};\n"],"names":["setElementStyle","element","style","entries","forEach","property","value","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","tempEl","createElement","setProperty","appendChild","computedValue","getComputedStyle","getPropertyValue","removeChild"],"mappings":"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"}
+{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/* eslint import/namespace: [2, { allowComputed: true }] */\nimport { CSSProperties } from \"react\";\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"@core/types\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  Object.entries(style).forEach(([property, value]) => {\n    element.style[property] = value;\n  });\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n  themeName: string,\n  modeName: string,\n  colorScheme: string,\n  themeRootId?: string\n) => {\n  const element = themeRootId\n    ? document.getElementById(themeRootId)\n    : document.body;\n\n  if (element) {\n    element.setAttribute(`data-theme`, themeName);\n    element.setAttribute(`data-color-mode`, modeName);\n\n    // Set default properties for all components to inherit\n    setElementStyle(element, {\n      colorScheme,\n      backgroundColor: theme.colors.backgroundColor,\n      accentColor: theme.colors.secondary,\n      color: theme.colors.secondary,\n      fontSize: theme.typography.body.fontSize,\n      fontWeight: theme.typography.body.fontWeight,\n      lineHeight: theme.typography.body.lineHeight,\n      letterSpacing: theme.typography.body.letterSpacing,\n      fontFamily: theme.fontFamily.body,\n    });\n  }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n  const isObject = (val: any) =>\n    val && typeof val === \"object\" && !Array.isArray(val);\n\n  // Customized theme\n  const customizedTheme = { ...obj };\n\n  // Add new values to the theme or replace values\n  Object.keys(customizations).forEach((key) => {\n    if (customizedTheme[key]) {\n      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n        customizedTheme[key] = applyThemeCustomizations(\n          customizedTheme[key],\n          customizations[key]\n        );\n      } else if (typeof customizedTheme[key] === typeof customizations[key]) {\n        customizedTheme[key] = customizations[key];\n      }\n    } else {\n      customizedTheme[key] = customizations[key];\n    }\n  });\n\n  return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n  props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n  const {\n    name,\n    base = \"ds5\",\n    inheritColorModes = true,\n    ...customizations\n  } = props;\n\n  // Apply customizations to the base theme\n  const customizedTheme: HvTheme | HvThemeStructure = customizations\n    ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n    : { ...themes[base] };\n\n  // Set theme name\n  customizedTheme.name = name.trim();\n  // Set theme base\n  customizedTheme.base = base;\n\n  // Fill new color modes with missing colors\n  if (customizations) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!themes[base].colors.modes[mode]) {\n        customizedTheme.colors.modes[mode] = {\n          ...themes[base].colors.modes.dawn,\n          ...(customizedTheme.colors.modes[mode] as Partial<\n            HvThemeColorModeStructure & { [key: string]: string }\n          >),\n        };\n      }\n    });\n  }\n\n  // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n  // we're removing any color modes that might have been inherited\n  if (!inheritColorModes && customizations.colors?.modes) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n        delete customizedTheme.colors.modes[mode];\n      }\n    });\n  }\n\n  // Created theme\n  return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n *  - Cleans themes with the same name\n *  - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n  themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n  if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n    const list: (HvTheme | HvThemeStructure)[] = [];\n\n    themesList.forEach((thm) => {\n      const i: number = list.findIndex(\n        (t) => t.name.trim() === thm.name.trim()\n      );\n\n      if (i !== -1) {\n        list.splice(i, 1);\n        list.push(thm);\n      } else {\n        list.push(thm);\n      }\n    });\n\n    // Cleaned themes\n    return list;\n  }\n  // DS5\n  return [themes.ds5];\n};\n\nexport const getVarValue = (cssVar: string, rootElementId?: string) => {\n  const root = document.getElementById(rootElementId || \"hv-root\");\n  if (root) {\n    const computedValue = getComputedStyle(root)\n      .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n      .trim();\n\n    return computedValue;\n  }\n};\n"],"names":["setElementStyle","element","style","entries","forEach","property","value","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","thm","i","findIndex","t","splice","push","ds5","getVarValue","cssVar","rootElementId","root","computedValue","getComputedStyle","getPropertyValue","replace"],"mappings":"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"}

package/dist/esm/components/Dialog/Actions/Actions.js

@@ -1,26 +1,32 @@
-import { clsx } from "clsx";
-import { StyledActions } from "./Actions.styles.js";
-import dialogActionClasses from "./actionsClasses.js";
+import MuiDialogActions from "@mui/material/DialogActions";
+import { useClasses } from "./Actions.styles.js";
+import { staticClasses } from "./Actions.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvDialogActions = ({
-  classes,
+  classes: classesProp,
   className,
   children,
   fullscreen = false,
   ...others
 }) => {
-  return /* @__PURE__ */ jsx(StyledActions, {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(MuiDialogActions, {
     className,
     classes: {
-      root: clsx(dialogActionClasses.root, classes == null ? void 0 : classes.root, fullscreen && clsx(dialogActionClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)),
-      spacing: clsx(dialogActionClasses.spacing, classes == null ? void 0 : classes.spacing)
+      root: cx(classes.root, {
+        [classes.fullscreen]: fullscreen
+      }),
+      spacing: classes.spacing
     },
-    $fullscreen: fullscreen,
     ...others,
     children
   });
 };
 export {
-  HvDialogActions
+  HvDialogActions,
+  staticClasses as dialogActionClasses
 };
 //# sourceMappingURL=Actions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { DialogActionsProps as MuiDialogActionsProps } from \"@mui/material/DialogActions\";\nimport { HvBaseProps } from \"@core/types\";\nimport { StyledActions } from \"./Actions.styles\";\nimport dialogActionClasses, { HvDialogActionClasses } from \"./actionsClasses\";\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\">,\n    HvBaseProps {\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = ({\n  classes,\n  className,\n  children,\n  fullscreen = false,\n  ...others\n}: HvDialogActionsProps) => {\n  return (\n    <StyledActions\n      className={className}\n      classes={{\n        root: clsx(\n          dialogActionClasses.root,\n          classes?.root,\n          fullscreen &&\n            clsx(dialogActionClasses.fullscreen, classes?.fullscreen)\n        ),\n        spacing: clsx(dialogActionClasses.spacing, classes?.spacing),\n      }}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      {children}\n    </StyledActions>\n  );\n};\n"],"names":["HvDialogActions","classes","className","children","fullscreen","others","StyledActions","root","clsx","dialogActionClasses","spacing","$fullscreen"],"mappings":";;;;AAcO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACb,GAAGC;AACiB,MAAM;AAC1B,6BACGC,eAAa;AAAA,IACZJ;AAAAA,IACAD,SAAS;AAAA,MACPM,MAAMC,KACJC,oBAAoBF,MACpBN,mCAASM,MACTH,cACEI,KAAKC,oBAAoBL,YAAYH,mCAASG,UAAU,CAC5D;AAAA,MACAM,SAASF,KAAKC,oBAAoBC,SAAST,mCAASS,OAAO;AAAA,IAC7D;AAAA,IACAC,aAAaP;AAAAA,IAAW,GACpBC;AAAAA,IAAMF;AAAAA,EAAAA,CAGG;AAEnB;"}
+{"version":3,"file":"Actions.js","sources":["../../../../../src/components/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\n\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\">,\n    HvBaseProps {\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = ({\n  classes: classesProp,\n  className,\n  children,\n  fullscreen = false,\n  ...others\n}: HvDialogActionsProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":["HvDialogActions","classes","classesProp","className","children","fullscreen","others","cx","useClasses","MuiDialogActions","root","spacing"],"mappings":";;;;AAqBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACb,GAAGC;AACiB,MAAM;AACpB,QAAA;AAAA,IAAEL;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACGO,kBAAgB;AAAA,IACfN;AAAAA,IACAF,SAAS;AAAA,MACPS,MAAMH,GAAGN,QAAQS,MAAM;AAAA,QAAE,CAACT,QAAQI,UAAU,GAAGA;AAAAA,MAAAA,CAAY;AAAA,MAC3DM,SAASV,QAAQU;AAAAA,IACnB;AAAA,IAAE,GACEL;AAAAA,IAAMF;AAAAA,EAAAA,CAGM;AAEtB;"}

package/dist/esm/components/Dialog/Actions/Actions.styles.js

@@ -1,48 +1,31 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import DialogActions from "@mui/material/DialogActions";
-import { transientOptions } from "../../../utils/transientOptions.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledActions = /* @__PURE__ */ _styled(DialogActions, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e5nbcch0"
-}, transientOptions) : _extends({}, {
-  target: "e5nbcch0",
-  label: "StyledActions"
-}, transientOptions))(({
-  $fullscreen
-}) => ({
-  margin: "0",
-  padding: theme.space.sm,
-  borderTop: `3px solid ${theme.colors.atmo2}`,
-  height: 65,
-  maxHeight: 65,
-  flex: 1,
-  ...$fullscreen && {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvDialog-Action", {
+  root: {
+    margin: "0",
+    padding: theme.space.sm,
+    borderTop: `3px solid ${theme.colors.atmo2}`,
+    height: 65,
+    maxHeight: 65,
+    flex: 1
+  },
+  fullscreen: {
     position: "fixed",
     width: "100%",
     bottom: 0,
     left: 0
   },
-  "&.MuiDialogActions-spacing": {
+  spacing: {
     "& > :not(:first-of-type)": {
       marginLeft: theme.space.xs
     }
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0FjdGlvbnMvQWN0aW9ucy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUs2QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RpYWxvZy9BY3Rpb25zL0FjdGlvbnMuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IERpYWxvZ0FjdGlvbnMgZnJvbSBcIkBtdWkvbWF0ZXJpYWwvRGlhbG9nQWN0aW9uc1wiO1xuaW1wb3J0IHsgdHJhbnNpZW50T3B0aW9ucyB9IGZyb20gXCJAY29yZS91dGlscy90cmFuc2llbnRPcHRpb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRBY3Rpb25zID0gc3R5bGVkKFxuICBEaWFsb2dBY3Rpb25zLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRmdWxsc2NyZWVuIH06IHsgJGZ1bGxzY3JlZW46IGJvb2xlYW4gfSkgPT4gKHtcbiAgbWFyZ2luOiBcIjBcIixcbiAgcGFkZGluZzogdGhlbWUuc3BhY2Uuc20sXG4gIGJvcmRlclRvcDogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICBoZWlnaHQ6IDY1LFxuICBtYXhIZWlnaHQ6IDY1LFxuICBmbGV4OiAxLFxuICAuLi4oJGZ1bGxzY3JlZW4gJiYge1xuICAgIHBvc2l0aW9uOiBcImZpeGVkXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIGJvdHRvbTogMCxcbiAgICBsZWZ0OiAwLFxuICB9KSxcbiAgXCImLk11aURpYWxvZ0FjdGlvbnMtc3BhY2luZ1wiOiB7XG4gICAgXCImID4gOm5vdCg6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgbWFyZ2luTGVmdDogdGhlbWUuc3BhY2UueHMsXG4gICAgfSxcbiAgfSxcbn0pKTtcbiJdfQ== */");
+});
 export {
-  StyledActions
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Actions.styles.js.map

package/dist/esm/components/Dialog/Actions/Actions.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport DialogActions from \"@mui/material/DialogActions\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledActions = styled(\n  DialogActions,\n  transientOptions\n)(({ $fullscreen }: { $fullscreen: boolean }) => ({\n  margin: \"0\",\n  padding: theme.space.sm,\n  borderTop: `3px solid ${theme.colors.atmo2}`,\n  height: 65,\n  maxHeight: 65,\n  flex: 1,\n  ...($fullscreen && {\n    position: \"fixed\",\n    width: \"100%\",\n    bottom: 0,\n    left: 0,\n  }),\n  \"&.MuiDialogActions-spacing\": {\n    \"& > :not(:first-of-type)\": {\n      marginLeft: theme.space.xs,\n    },\n  },\n}));\n"],"names":["StyledActions","DialogActions","process","env","NODE_ENV","_extends","target","transientOptions","label","$fullscreen","margin","padding","theme","space","sm","borderTop","colors","atmo2","height","maxHeight","flex","position","width","bottom","left","marginLeft","xs"],"mappings":";;;;;;;;;;;;;;;;;;AAKaA,MAAAA,wCACXC,eAAaC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACbC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAsC,OAAO;AAAA,EAChDC,QAAQ;AAAA,EACRC,SAASC,MAAMC,MAAMC;AAAAA,EACrBC,WAAY,aAAYH,MAAMI,OAAOC;AAAAA,EACrCC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,MAAM;AAAA,EACN,GAAIX,eAAe;AAAA,IACjBY,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,MAAM;AAAA,EACR;AAAA,EACA,8BAA8B;AAAA,IAC5B,4BAA4B;AAAA,MAC1BC,YAAYb,MAAMC,MAAMa;AAAAA,IAC1B;AAAA,EACF;AACF,IAAExB,QAAAC,IAAAC,aAAC,eAAA,KAAA,y7CAAA;"}
+{"version":3,"file":"Actions.styles.js","sources":["../../../../../src/components/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n  root: {\n    margin: \"0\",\n    padding: theme.space.sm,\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    height: 65,\n    maxHeight: 65,\n    flex: 1,\n  },\n  fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n  spacing: {\n    \"& > :not(:first-of-type)\": {\n      marginLeft: theme.space.xs,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","margin","padding","theme","space","sm","borderTop","colors","atmo2","height","maxHeight","flex","fullscreen","position","width","bottom","left","spacing","marginLeft","xs"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,mBAAmB;AAAA,EAC5EC,MAAM;AAAA,IACJC,QAAQ;AAAA,IACRC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,MAAMI,OAAOC;AAAAA,IACrCC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,MAAM;AAAA,EACR;AAAA,EACAC,YAAY;AAAA,IAAEC,UAAU;AAAA,IAASC,OAAO;AAAA,IAAQC,QAAQ;AAAA,IAAGC,MAAM;AAAA,EAAE;AAAA,EACnEC,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1BC,YAAYf,MAAMC,MAAMe;AAAAA,IAC1B;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/Dialog/Content/Content.js

@@ -1,22 +1,28 @@
-import { clsx } from "clsx";
 import MuiDialogContent from "@mui/material/DialogContent";
-import { StyledTypography } from "./Content.styles.js";
-import dialogContentClasses from "./contentClasses.js";
+import { useClasses } from "./Content.styles.js";
+import { staticClasses } from "./Content.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { HvTypography } from "../../Typography/Typography.js";
 const HvDialogContent = ({
-  classes,
+  classes: classesProp,
   className,
   children,
   indentContent = false
 }) => {
-  return /* @__PURE__ */ jsx(StyledTypography, {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(HvTypography, {
     component: MuiDialogContent,
-    className: clsx(className, dialogContentClasses.root, classes == null ? void 0 : classes.root, !!indentContent && clsx(dialogContentClasses.textContent, classes == null ? void 0 : classes.textContent)),
-    $indentContent: indentContent,
+    className: cx(classes.root, {
+      [classes.textContent]: !!indentContent
+    }, className),
     children
   });
 };
 export {
-  HvDialogContent
+  HvDialogContent,
+  staticClasses as dialogContentClasses
 };
 //# sourceMappingURL=Content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\nimport { HvBaseProps } from \"@core/types\";\nimport { StyledTypography } from \"./Content.styles\";\nimport dialogContentClasses, { HvDialogContentClasses } from \"./contentClasses\";\n\nexport interface HvDialogContentProps\n  extends Omit<MuiDialogContentProps, \"classes\">,\n    HvBaseProps {\n  /** Content should be indented in relationship to the Dialog title. */\n  indentContent?: boolean;\n  classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = ({\n  classes,\n  className,\n  children,\n  indentContent = false,\n}: HvDialogContentProps) => {\n  return (\n    <StyledTypography\n      component={MuiDialogContent}\n      className={clsx(\n        className,\n        dialogContentClasses.root,\n        classes?.root,\n        !!indentContent &&\n          clsx(dialogContentClasses.textContent, classes?.textContent)\n      )}\n      $indentContent={indentContent}\n    >\n      {children}\n    </StyledTypography>\n  );\n};\n"],"names":["HvDialogContent","classes","className","children","indentContent","StyledTypography","component","MuiDialogContent","clsx","dialogContentClasses","root","textContent","$indentContent"],"mappings":";;;;;AAgBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AACI,MAAM;AAC1B,6BACGC,kBAAgB;AAAA,IACfC,WAAWC;AAAAA,IACXL,WAAWM,KACTN,WACAO,qBAAqBC,MACrBT,mCAASS,MACT,CAAC,CAACN,iBACAI,KAAKC,qBAAqBE,aAAaV,mCAASU,WAAW,CAC/D;AAAA,IACAC,gBAAgBR;AAAAA,IAAcD;AAAAA,EAAAA,CAGd;AAEtB;"}
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/Content/Content.tsx"],"sourcesContent":["import MuiDialogContent, {\n  DialogContentProps as MuiDialogContentProps,\n} from \"@mui/material/DialogContent\";\n\nimport { HvBaseProps } from \"@core/types\";\nimport { ExtractNames } from \"@core/utils\";\nimport { HvTypography } from \"@core/components\";\n\nimport { staticClasses, useClasses } from \"./Content.styles\";\n\nexport { staticClasses as dialogContentClasses };\n\nexport type HvDialogContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogContentProps\n  extends Omit<MuiDialogContentProps, \"classes\">,\n    HvBaseProps {\n  /** Content should be indented in relationship to the Dialog title. */\n  indentContent?: boolean;\n  classes?: HvDialogContentClasses;\n}\n\nexport const HvDialogContent = ({\n  classes: classesProp,\n  className,\n  children,\n  indentContent = false,\n}: HvDialogContentProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <HvTypography\n      component={MuiDialogContent}\n      className={cx(\n        classes.root,\n        { [classes.textContent]: !!indentContent },\n        className\n      )}\n    >\n      {children}\n    </HvTypography>\n  );\n};\n"],"names":["HvDialogContent","classes","classesProp","className","children","indentContent","cx","useClasses","HvTypography","component","MuiDialogContent","root","textContent"],"mappings":";;;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,gBAAgB;AACI,MAAM;AACpB,QAAA;AAAA,IAAEJ;AAAAA,IAASK;AAAAA,EAAAA,IAAOC,WAAWL,WAAW;AAE9C,6BACGM,cAAY;AAAA,IACXC,WAAWC;AAAAA,IACXP,WAAWG,GACTL,QAAQU,MACR;AAAA,MAAE,CAACV,QAAQW,WAAW,GAAG,CAAC,CAACP;AAAAA,OAC3BF,SACF;AAAA,IAAEC;AAAAA,EAAAA,CAGU;AAElB;"}

package/dist/esm/components/Dialog/Content/Content.styles.js

@@ -1,39 +1,22 @@
-import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../../utils/transientOptions.js";
-import { HvTypography } from "../../Typography/Typography.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-const StyledTypography = /* @__PURE__ */ _styled(HvTypography, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e4uf5ag0"
-}, transientOptions) : _extends({}, {
-  target: "e4uf5ag0",
-  label: "StyledTypography"
-}, transientOptions))(({
-  $indentContent
-}) => ({
-  padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,
-  flex: "none",
-  ...$indentContent && {
+import { createClasses } from "../../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvDialog-Content", {
+  root: {
+    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,
+    flex: "none"
+  },
+  textContent: {
     marginLeft: "42px",
     paddingRight: "62px",
     flex: 1,
     overflowY: "auto"
   }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0NvbnRlbnQvQ29udGVudC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUtnQyIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL0RpYWxvZy9Db250ZW50L0NvbnRlbnQuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgSHZUeXBvZ3JhcGh5IH0gZnJvbSBcIkBjb3JlL2NvbXBvbmVudHNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVHlwb2dyYXBoeSA9IHN0eWxlZChcbiAgSHZUeXBvZ3JhcGh5LFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRpbmRlbnRDb250ZW50IH06IHsgJGluZGVudENvbnRlbnQ6IGJvb2xlYW4gfSkgPT4gKHtcbiAgcGFkZGluZzogYDAgJHt0aGVtZS5zcGFjZS5zbX0gJHt0aGVtZS5zcGFjZS5zbX0gJHt0aGVtZS5zcGFjZS5zbX1gLFxuICBmbGV4OiBcIm5vbmVcIixcbiAgLi4uKCRpbmRlbnRDb250ZW50ICYmIHtcbiAgICBtYXJnaW5MZWZ0OiBcIjQycHhcIixcbiAgICBwYWRkaW5nUmlnaHQ6IFwiNjJweFwiLFxuICAgIGZsZXg6IDEsXG4gICAgb3ZlcmZsb3dZOiBcImF1dG9cIixcbiAgfSksXG59KSk7XG4iXX0= */");
+});
 export {
-  StyledTypography
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Content.styles.js.map

package/dist/esm/components/Dialog/Content/Content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvTypography } from \"@core/components\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nexport const StyledTypography = styled(\n  HvTypography,\n  transientOptions\n)(({ $indentContent }: { $indentContent: boolean }) => ({\n  padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n  flex: \"none\",\n  ...($indentContent && {\n    marginLeft: \"42px\",\n    paddingRight: \"62px\",\n    flex: 1,\n    overflowY: \"auto\",\n  }),\n}));\n"],"names":["StyledTypography","HvTypography","process","env","NODE_ENV","_extends","target","transientOptions","label","$indentContent","padding","theme","space","sm","flex","marginLeft","paddingRight","overflowY"],"mappings":";;;;;;;;;;;;;;;;;;AAKaA,MAAAA,2CACXC,cAAYC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACZC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAA4C,OAAO;AAAA,EACtDC,SAAU,KAAIC,MAAMC,MAAMC,MAAMF,MAAMC,MAAMC,MAAMF,MAAMC,MAAMC;AAAAA,EAC9DC,MAAM;AAAA,EACN,GAAIL,kBAAkB;AAAA,IACpBM,YAAY;AAAA,IACZC,cAAc;AAAA,IACdF,MAAM;AAAA,IACNG,WAAW;AAAA,EACb;AACF,IAAEf,QAAAC,IAAAC,aAAC,eAAA,KAAA,6uCAAA;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../../src/components/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n  root: {\n    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n    flex: \"none\",\n  },\n  textContent: {\n    marginLeft: \"42px\",\n    paddingRight: \"62px\",\n    flex: 1,\n    overflowY: \"auto\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","flex","textContent","marginLeft","paddingRight","overflowY"],"mappings":";;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAU,KAAIC,MAAMC,MAAMC,MAAMF,MAAMC,MAAMC,MAAMF,MAAMC,MAAMC;AAAAA,IAC9DC,MAAM;AAAA,EACR;AAAA,EACAC,aAAa;AAAA,IACXC,YAAY;AAAA,IACZC,cAAc;AAAA,IACdH,MAAM;AAAA,IACNI,WAAW;AAAA,EACb;AACF,CAAC;"}

package/dist/esm/components/Dialog/Dialog.js

@@ -1,25 +1,16 @@
 import React__default, { useCallback, useMemo } from "react";
 import MuiDialog from "@mui/material/Dialog";
+import MuiBackdrop from "@mui/material/Backdrop";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
-import { useClasses, StyledBackdrop } from "./Dialog.styles.js";
+import fade from "../../utils/hexToRgbA.js";
+import { useClasses } from "./Dialog.styles.js";
 import { staticClasses } from "./Dialog.styles.js";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import withTooltip from "../../hocs/withTooltip.js";
 import { HvButton } from "../Button/Button.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { setId } from "../../utils/setId.js";
-const DialogBackdrop = (backdropProps) => {
-  var _a;
-  const {
-    activeTheme,
-    selectedMode
-  } = useTheme();
-  return /* @__PURE__ */ jsx(StyledBackdrop, {
-    $backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || theme.colors.atmo4,
-    ...backdropProps
-  });
-};
 const HvDialog = ({
   classes: classesProp,
   className,
@@ -33,6 +24,7 @@ const HvDialog = ({
   disableBackdropClick = false,
   ...others
 }) => {
+  var _a;
   const {
     classes,
     css,
@@ -40,7 +32,9 @@ const HvDialog = ({
   } = useClasses(classesProp);
   delete others.fullScreen;
   const {
-    rootId
+    rootId,
+    activeTheme,
+    selectedMode
   } = useTheme();
   const wrappedClose = useCallback((event, bypassValidation = false, reason) => {
     if (bypassValidation || !disableBackdropClick) {
@@ -58,54 +52,61 @@ const HvDialog = ({
   });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   const slots = useMemo(() => ({
-    backdrop: (backdropProps) => /* @__PURE__ */ jsx(DialogBackdrop, {
+    backdrop: (backdropProps) => /* @__PURE__ */ jsx(MuiBackdrop, {
       open,
       onClick: wrappedClose,
       ...backdropProps
     })
   }), [open, wrappedClose]);
-  return /* @__PURE__ */ jsxs(MuiDialog, {
-    container: document.getElementById(rootId || "") || document.body,
-    className: cx(className, classes.root),
-    id,
-    ref: measuredRef,
-    open,
-    fullScreen: fullscreen,
-    onClose: (event, reason) => wrappedClose(event, void 0, reason),
-    slots,
-    classes: {
-      container: css({
-        position: "relative"
-      })
-    },
-    BackdropProps: {
-      classes: {
-        root: classes.background
-      }
-    },
-    PaperProps: {
+  return /* @__PURE__ */ jsxs(
+    MuiDialog,
+    {
+      container: document.getElementById(rootId || "") || document.body,
+      className: cx(className, classes.root),
       classes: {
-        root: cx(css({
-          position: "absolute"
-        }), classes.paper, {
-          fullscreen,
-          [classes.fullscreen]: fullscreen
+        container: css({
+          position: "relative"
         })
-      }
-    },
-    "aria-modal": true,
-    ...others,
-    children: [/* @__PURE__ */ jsx(HvButton, {
-      id: setId(id, "close"),
-      className: classes.closeButton,
-      variant: "secondaryGhost",
-      onClick: (event) => wrappedClose(event, true, void 0),
-      "aria-label": buttonTitle,
-      children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
-    }), children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
-      fullscreen
-    })) : children]
-  });
+      },
+      id,
+      ref: measuredRef,
+      open,
+      fullScreen: fullscreen,
+      onClose: (event, reason) => wrappedClose(event, void 0, reason),
+      slots,
+      slotProps: {
+        backdrop: {
+          classes: {
+            root: cx(css({
+              background: fade(((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || theme.colors.atmo4, 0.8)
+            }), classes.background)
+          }
+        }
+      },
+      PaperProps: {
+        classes: {
+          root: cx(css({
+            position: "absolute"
+          }), classes.paper, {
+            fullscreen,
+            [classes.fullscreen]: fullscreen
+          })
+        }
+      },
+      "aria-modal": true,
+      ...others,
+      children: [/* @__PURE__ */ jsx(HvButton, {
+        id: setId(id, "close"),
+        className: classes.closeButton,
+        variant: "secondaryGhost",
+        onClick: (event) => wrappedClose(event, true, void 0),
+        "aria-label": buttonTitle,
+        children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
+      }), children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
+        fullscreen
+      })) : children]
+    }
+  );
 };
 export {
   HvDialog,

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { BackdropProps } from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport { StyledBackdrop, staticClasses, useClasses } from \"./Dialog.styles\";\nimport { HvButton } from \"..\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\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}\n\nconst DialogBackdrop = (backdropProps: BackdropProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n  return (\n    <StyledBackdrop\n      $backColor={\n        activeTheme?.colors?.modes[selectedMode].atmo4 || theme.colors.atmo4\n      }\n      {...backdropProps}\n    />\n  );\n};\n\nexport const HvDialog = ({\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}: HvDialogProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <DialogBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={cx(className, classes.root)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(css({ position: \"absolute\" }), classes.paper, {\n            fullscreen,\n            [classes.fullscreen]: fullscreen,\n          }),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["DialogBackdrop","backdropProps","activeTheme","selectedMode","useTheme","StyledBackdrop","$backColor","colors","modes","atmo4","theme","HvDialog","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","css","cx","useClasses","fullScreen","rootId","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","onClick","MuiDialog","container","body","root","ref","undefined","position","BackdropProps","background","PaperProps","paper","HvButton","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":";;;;;;;;;;;AAiDA,MAAMA,iBAAiBA,CAACC,kBAAiC;;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAC/C,6BACGC,gBAAc;AAAA,IACbC,cACEJ,gDAAaK,WAAbL,mBAAqBM,MAAML,cAAcM,UAASC,MAAMH,OAAOE;AAAAA,IAChE,GACGR;AAAAA,EAAAA,CACL;AAEL;AAEO,MAAMU,WAAWA,CAAC;AAAA,EACvBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,uBAAuB;AAAA,EACvB,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAEX;AAAAA,IAASY;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AACnD,SAAQU,OAAeI;AAEjB,QAAA;AAAA,IAAEC;AAAAA,MAAWxB,SAAS;AAK5B,QAAMyB,eAAeC,YACnB,CACEC,OACAC,mBAA4B,OAC5BC,WACG;AACCD,QAAAA,oBAAoB,CAACV,sBAAsB;AAC7CJ,yCAAUa,OAAOE;AAAAA,IACnB;AAAA,EAAA,GAEF,CAACf,SAASI,oBAAoB,CAChC;AAEMY,QAAAA,cAAcJ,YAAY,MAAM;AACpC,QAAI,CAACX;AAAgB;AAEfgB,UAAAA,UAAUC,SAASC,eAAelB,cAAc;AACtDgB,uCAASG;AAAAA,EAAM,GACd,CAACnB,cAAc,CAAC;AAEboB,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BvB,cAC9BwB,YAAYL,oBAAoBnB,aAAa,KAAK,IAClDmB;AAEEM,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLC,UAAW9C,CACTuC,kBAAAA,oBAACxC,gBAAc;AAAA,MAACiB;AAAAA,MAAY+B,SAASnB;AAAAA,MAAa,GAAK5B;AAAAA,IAAAA,CAAgB;AAAA,EAG3E,IAAA,CAACgB,MAAMY,YAAY,CACrB;AAEA,8BACGoB,WAAS;AAAA,IACRC,WAAWd,SAASC,eAAeT,UAAU,EAAE,KAAKQ,SAASe;AAAAA,IAC7DrC,WAAWW,GAAGX,WAAWF,QAAQwC,IAAI;AAAA,IACrCrC;AAAAA,IACAsC,KAAKnB;AAAAA,IACLjB;AAAAA,IACAU,YAAYN;AAAAA,IACZH,SAASA,CAACa,OAAOE,WAAWJ,aAAaE,OAAOuB,QAAWrB,MAAM;AAAA,IACjEY;AAAAA,IACAjC,SAAS;AAAA,MAAEsC,WAAW1B,IAAI;AAAA,QAAE+B,UAAU;AAAA,MAAA,CAAY;AAAA,IAAE;AAAA,IACpDC,eAAe;AAAA,MACb5C,SAAS;AAAA,QACPwC,MAAMxC,QAAQ6C;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,YAAY;AAAA,MACV9C,SAAS;AAAA,QACPwC,MAAM3B,GAAGD,IAAI;AAAA,UAAE+B,UAAU;AAAA,QAAA,CAAY,GAAG3C,QAAQ+C,OAAO;AAAA,UACrDtC;AAAAA,UACA,CAACT,QAAQS,UAAU,GAAGA;AAAAA,QAAAA,CACvB;AAAA,MACH;AAAA,IACF;AAAA,IACA,cAAU;AAAA,IAAA,GACNE;AAAAA,IAAMP,UAAA,CAEVwB,oBAACoB,UAAQ;AAAA,MACP7C,IAAI8C,MAAM9C,IAAI,OAAO;AAAA,MACrBD,WAAWF,QAAQkD;AAAAA,MACnBC,SAAQ;AAAA,MACRf,SAAUjB,CAAAA,UAAUF,aAAaE,OAAO,MAAMuB,MAAS;AAAA,MACvD,cAAYlC;AAAAA,MAAYJ,UAExBwB,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACT3B,YAAY,OAAOA,aAAa,WAC7BgD,eAAMC,SAASC,IACblD,UACA,CAACmD,MACCA,KAAKH,eAAMI,aAAaD,GAAyB;AAAA,MAAE9C;AAAAA,IAAAA,CAAY,CACnE,IACAL,QAAQ;AAAA,EAAA,CACH;AAEf;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport fade from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { HvButton } from \"..\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\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}\n\nexport const HvDialog = ({\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}: HvDialogProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, activeTheme, selectedMode } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      // TODO: review\n      // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={cx(className, classes.root)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: fade(\n                  activeTheme?.colors?.modes[selectedMode].atmo4 ||\n                    theme.colors.atmo4,\n                  0.8\n                ),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(css({ position: \"absolute\" }), classes.paper, {\n            fullscreen,\n            [classes.fullscreen]: fullscreen,\n          }),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","css","cx","useClasses","fullScreen","rootId","activeTheme","selectedMode","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","onClick","_jsxs","MuiDialog","container","body","root","position","ref","undefined","slotProps","background","fade","colors","modes","atmo4","theme","PaperProps","paper","HvButton","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}

package/dist/esm/components/Dialog/Dialog.styles.js

@@ -1,23 +1,5 @@
-import _styled from "@emotion/styled/base";
-import { Backdrop } from "@mui/material";
 import { theme } from "@hitachivantara/uikit-styles";
-import { transientOptions } from "../../utils/transientOptions.js";
-import fade from "../../utils/hexToRgbA.js";
 import { createClasses } from "../../utils/classes.js";
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
 const {
   staticClasses,
   useClasses
@@ -41,18 +23,7 @@ const {
     height: 32
   }
 });
-const StyledBackdrop = /* @__PURE__ */ _styled(Backdrop, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1x1ml1b0"
-}, transientOptions) : _extends({}, {
-  target: "e1x1ml1b0",
-  label: "StyledBackdrop"
-}, transientOptions))(({
-  $backColor
-}) => ({
-  background: fade($backColor, 0.8)
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgY3JlYXRlQ2xhc3NlcyB9IGZyb20gXCJAY29yZS91dGlsc1wiO1xuXG5leHBvcnQgY29uc3QgeyBzdGF0aWNDbGFzc2VzLCB1c2VDbGFzc2VzIH0gPSBjcmVhdGVDbGFzc2VzKFwiSHZEaWFsb2dcIiwge1xuICByb290OiB7fSxcbiAgYmFja2dyb3VuZDoge30sXG4gIHBhcGVyOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiBbXCJub25lXCIsIHRoZW1lLmNvbG9ycy5zaGFkb3ddLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuZGlhbG9nLmJvcmRlclJhZGl1cyxcbiAgfSxcbiAgZnVsbHNjcmVlbjoge30sXG4gIGNsb3NlQnV0dG9uOiB7XG4gICAgcGFkZGluZzogMCxcbiAgICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICAgIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgICB3aWR0aDogMzIsXG4gICAgaGVpZ2h0OiAzMixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuIl19 */");
 export {
-  StyledBackdrop,
   staticClasses,
   useClasses
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Backdrop as MuiBackdrop } from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { createClasses } from \"@core/utils\";\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.dialog.borderRadius,\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});\n\nexport const StyledBackdrop = styled(\n  MuiBackdrop,\n  transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n  background: fade($backColor, 0.8),\n}));\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","fade"],"mappings":";;;;;;;;;;;;;;;;;;;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,MAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;AAEYC,MAAAA,yCACXC,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7ChC,YAAYiC,KAAKD,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,6vDAAA;"}
+{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils\";\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.dialog.borderRadius,\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});\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,MAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;"}