@hitachivantara/uikit-react-core 5.14.1 → 5.15.0

package/dist/esm/providers/ThemeProvider.js

@@ -1,14 +1,24 @@
-import { useState, useEffect, useMemo } from "react";
+import { createContext, useState, useEffect, useMemo } from "react";
 import { parseTheme } from "@hitachivantara/uikit-styles";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import { HvThemeContext as HvThemeContext2 } from "@hitachivantara/uikit-react-shared";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import createCache from "@emotion/cache";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { setElementAttrs } from "../utils/theme.js";
+const defaultCacheKey = "hv";
+const defaultEmotionCache = createCache({
+  key: defaultCacheKey,
+  prepend: true
+});
+const EmotionContext = createContext({
+  cache: defaultEmotionCache
+});
 const HvThemeProvider = ({
   children,
   themes: themesList,
   theme,
+  emotionCache,
   colorMode,
   themeRootId
 }) => {
@@ -49,16 +59,25 @@ const HvThemeProvider = ({
       }
     }
   });
+  const emotionCacheValue = useMemo(() => ({
+    cache: emotionCache
+  }), [emotionCache]);
   return /* @__PURE__ */ jsx(ThemeProvider, {
     theme: MuiTheme,
     children: /* @__PURE__ */ jsx(HvThemeContext.Provider, {
       value,
-      children
+      children: /* @__PURE__ */ jsx(EmotionContext.Provider, {
+        value: emotionCacheValue,
+        children
+      })
     })
   });
 };
 export {
+  EmotionContext,
   HvThemeContext2 as HvThemeContext,
-  HvThemeProvider
+  HvThemeProvider,
+  defaultCacheKey,
+  defaultEmotionCache
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"@core/utils\";\nimport { HvTheme } from \"@core/types\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  colorMode,\n  themeRootId,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(themeRootId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.colorScheme,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        {children}\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","themeRootId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","colorScheme","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWL,YAAYC,OAAOC,SAAS;AAEpD,QAAM,CAACI,MAAM,IAAIC,SAA6BJ,WAAW;AACzD,QAAM,CAACK,aAAaC,cAAc,IAAIF,SACpCH,OAAOH,KAAK;AAEd,QAAM,CAACS,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAACf,QAAQiB,SAAS,IAAIT,SAAmBP,WAAWiB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUhB,WAAWiB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACnB,UAAU,CAAC;AAEf,QAAMqB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWL,YAAYsB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOH,KAAK;AAC3BU,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,aACPnB,MAAM;AAAA,EAAA;AAIVc,YAAU,MAAM;AACdC,gBAAYpB,OAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,OAAOC,SAAS,CAAC;AAEfwB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL5B;AAAAA,IACAe;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAf;AAAAA,EAAAA,IAEF,CACEP,QACAe,YACAN,aACAE,eACAE,cACAS,aACAf,MAAM,CACP;AAGH,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,6BACGC,eAAgB;AAAA,IAAC/B,OAAO2B;AAAAA,IAAS9B,UAC/BmC,oBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa5B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { createContext, useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport createCache, { EmotionCache } from \"@emotion/cache\";\nimport { setElementAttrs } from \"@core/utils\";\nimport { HvTheme } from \"@core/types\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\nexport const defaultCacheKey = \"hv\";\n\nexport const defaultEmotionCache = createCache({\n  key: defaultCacheKey,\n  prepend: true,\n});\n\nexport const EmotionContext = createContext<{ cache: EmotionCache }>({\n  cache: defaultEmotionCache,\n});\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  emotionCache: EmotionCache;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  emotionCache,\n  colorMode,\n  themeRootId,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(themeRootId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.colorScheme,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo<HvThemeContextValue>(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  const emotionCacheValue = useMemo(\n    () => ({ cache: emotionCache }),\n    [emotionCache]\n  );\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        <EmotionContext.Provider value={emotionCacheValue}>\n          {children}\n        </EmotionContext.Provider>\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["defaultCacheKey","defaultEmotionCache","createCache","key","prepend","EmotionContext","createContext","cache","HvThemeProvider","children","themes","themesList","theme","emotionCache","colorMode","themeRootId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","colorScheme","value","useMemo","MuiTheme","createTheme","breakpoints","values","emotionCacheValue","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;;AAeO,MAAMA,kBAAkB;AAExB,MAAMC,sBAAsBC,YAAY;AAAA,EAC7CC,KAAKH;AAAAA,EACLI,SAAS;AACX,CAAC;AAEM,MAAMC,iBAAiBC,cAAuC;AAAA,EACnEC,OAAON;AACT,CAAC;AAWM,MAAMO,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWN,YAAYC,OAAOE,SAAS;AAEpD,QAAM,CAACI,MAAM,IAAIC,SAA6BJ,WAAW;AACzD,QAAM,CAACK,aAAaC,cAAc,IAAIF,SACpCH,OAAOJ,KACT;AACA,QAAM,CAACU,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aACT;AACA,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAAChB,QAAQkB,SAAS,IAAIT,SAAmBR,WAAWkB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUjB,WAAWkB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACpB,UAAU,CAAC;AAEf,QAAMsB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWN,YAAYuB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOJ,KAAK;AAC3BW,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,aACPnB,MACF;AAAA,EAAA;AAGFc,YAAU,MAAM;AACdC,gBAAYrB,OAAOE,SAAS;AAAA,EAAA,GAC3B,CAACF,OAAOE,SAAS,CAAC;AAEfwB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL7B;AAAAA,IACAgB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAf;AAAAA,EAAAA,IAEF,CACER,QACAgB,YACAN,aACAE,eACAE,cACAS,aACAf,MAAM,CAEV;AAEA,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAEKC,QAAAA,oBAAoBL,QACxB,OAAO;AAAA,IAAEhC,OAAOM;AAAAA,EAAAA,IAChB,CAACA,YAAY,CACf;AAEA,6BACGgC,eAAgB;AAAA,IAACjC,OAAO4B;AAAAA,IAAS/B,UAC/BqC,oBAAAA,eAAeC,UAAQ;AAAA,MAACT;AAAAA,MAAa7B,UACnCJ,oBAAAA,eAAe0C,UAAQ;AAAA,QAACT,OAAOM;AAAAA,QAAkBnC;AAAAA,MAAAA,CAEzB;AAAA,IAAA,CACF;AAAA,EAAA,CACT;AAEtB;"}

package/dist/esm/utils/browser.js

@@ -3,7 +3,8 @@ const isBrowser = (browsers) => {
   const browser = detect();
   return browser && (Array.isArray(browsers) ? browsers.indexOf(browser.name) > 0 : browsers === browser.name);
 };
+const isBrowser$1 = isBrowser;
 export {
-  isBrowser as default
+  isBrowser$1 as default
 };
 //# sourceMappingURL=browser.js.map

package/dist/esm/utils/browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"browser.js","sources":["../../../src/utils/browser.ts"],"sourcesContent":["import { detect } from \"detect-browser\";\n\nconst isBrowser = (browsers) => {\n  const browser = detect();\n  return (\n    browser &&\n    (Array.isArray(browsers)\n      ? browsers.indexOf(browser.name) > 0\n      : browsers === browser.name)\n  );\n};\n\nexport { isBrowser as default };\n"],"names":["isBrowser","browsers","browser","detect","Array","isArray","indexOf","name"],"mappings":";AAEA,MAAMA,YAAaC,CAAa,aAAA;AAC9B,QAAMC,UAAUC;AAChB,SACED,YACCE,MAAMC,QAAQJ,QAAQ,IACnBA,SAASK,QAAQJ,QAAQK,IAAI,IAAI,IACjCN,aAAaC,QAAQK;AAE7B;"}
+{"version":3,"file":"browser.js","sources":["../../../src/utils/browser.ts"],"sourcesContent":["import { detect } from \"detect-browser\";\n\nconst isBrowser = (browsers) => {\n  const browser = detect();\n  return (\n    browser &&\n    (Array.isArray(browsers)\n      ? browsers.indexOf(browser.name) > 0\n      : browsers === browser.name)\n  );\n};\n\nexport default isBrowser;\n"],"names":["isBrowser","browsers","browser","detect","Array","isArray","indexOf","name"],"mappings":";AAEA,MAAMA,YAAaC,CAAa,aAAA;AAC9B,QAAMC,UAAUC;AAChB,SACED,YACCE,MAAMC,QAAQJ,QAAQ,IACnBA,SAASK,QAAQJ,QAAQK,IAAI,IAAI,IACjCN,aAAaC,QAAQK;AAE7B;AAEA,MAAA,cAAeP;"}

package/dist/esm/utils/classes.js

@@ -1,3 +1,4 @@
+import { useCss } from "../hooks/useCss.js";
 const getClasses = (keys, name) => {
   const classesObj = {};
   keys.forEach((key) => {
@@ -5,7 +6,49 @@ const getClasses = (keys, name) => {
   });
   return classesObj;
 };
+const deepRenameKeys = (obj, mapFn) => {
+  const result = {};
+  for (const key in obj) {
+    if (Object.hasOwn(obj, key)) {
+      const newKey = mapFn(key);
+      const value = obj[key];
+      result[newKey] = typeof value === "object" ? deepRenameKeys(value, mapFn) : value;
+    }
+  }
+  return result;
+};
+const replace$ = (stylesObj, name) => {
+  return deepRenameKeys(stylesObj, (key) => {
+    const matches = key.match(/\$\w+/g);
+    if (!(matches == null ? void 0 : matches.length))
+      return key;
+    const newKey = matches.reduce((acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`), key);
+    return newKey ?? key;
+  });
+};
+function createClasses(name, stylesObject) {
+  const styles = replace$(stylesObject, name);
+  const staticClasses = getClasses(Object.keys(styles), name);
+  function useClasses(classesProp) {
+    const {
+      cx,
+      css
+    } = useCss();
+    const mergeClasses = (key) => cx(`${name}-${key}`, css(styles[key]), classesProp == null ? void 0 : classesProp[key]);
+    const classes = Object.fromEntries(Object.keys(styles).map((key) => [key, mergeClasses(key)]));
+    return {
+      cx,
+      classes
+    };
+  }
+  return {
+    useClasses,
+    staticClasses
+  };
+}
 export {
-  getClasses
+  createClasses,
+  getClasses,
+  replace$
 };
 //# sourceMappingURL=classes.js.map

package/dist/esm/utils/classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["export const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n"],"names":["getClasses","keys","name","classesObj","forEach","key"],"mappings":"AAAaA,MAAAA,aAAa,CACxBC,MACAC,SACG;AACH,QAAMC,aAAqC,CAAA;AACtCC,OAAAA,QAAQ,CAACC,QAAgB;AACjBA,eAAAA,GAAG,IAAK,GAAEH,QAAQG;AAAAA,EAAAA,CAC9B;AACMF,SAAAA;AACT;"}
+{"version":3,"file":"classes.js","sources":["../../../src/utils/classes.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { useCss } from \"@core/hooks/useCss\";\n\nexport type ExtractNames<\n  T extends (...args: any) => { classes: Record<string, any>; cx: any }\n> = ReturnType<T>[\"classes\"];\n\nexport const getClasses = <T extends string, N extends string>(\n  keys: T[],\n  name: N\n) => {\n  const classesObj: Record<string, string> = {};\n  keys.forEach((key: string) => {\n    classesObj[key] = `${name}-${key}`;\n  });\n  return classesObj as { [P in T]: `${N}-${P}` };\n};\n\nconst deepRenameKeys = <T extends object>(\n  obj: T,\n  mapFn: (key: string) => string\n): T => {\n  const result: any = {};\n  for (const key in obj) {\n    if (Object.hasOwn(obj, key)) {\n      const newKey = mapFn(key);\n      const value = obj[key];\n      result[newKey] =\n        typeof value === \"object\" ? deepRenameKeys(value as any, mapFn) : value;\n    }\n  }\n  return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n  return deepRenameKeys(stylesObj, (key) => {\n    const matches = key.match(/\\$\\w+/g);\n    if (!matches?.length) return key;\n    const newKey = matches.reduce(\n      (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n      key\n    );\n    return newKey ?? key;\n  });\n};\n\n/** Utility function to create classes for a component. */\nexport function createClasses<Name extends string, ClassName extends string>(\n  /** Component name in PascalCase (ie. `HvTableCell`). */\n  name: Name,\n  stylesObject: Record<ClassName, CSSInterpolation>\n) {\n  const styles = replace$(stylesObject, name);\n\n  const staticClasses = getClasses(Object.keys(styles) as ClassName[], name);\n\n  function useClasses(classesProp: Partial<Record<ClassName, string>>) {\n    const { cx, css } = useCss();\n\n    const mergeClasses = (key: string) =>\n      cx(`${name}-${key}`, css(styles[key]), classesProp?.[key]);\n\n    const classes = Object.fromEntries(\n      Object.keys(styles).map((key) => [key, mergeClasses(key)])\n    ) as { [P in ClassName]: string };\n\n    return { cx, classes };\n  }\n\n  return { useClasses, staticClasses };\n}\n"],"names":["getClasses","keys","name","classesObj","forEach","key","deepRenameKeys","obj","mapFn","result","Object","hasOwn","newKey","value","replace$","stylesObj","matches","match","length","reduce","acc","replace","slice","createClasses","stylesObject","styles","staticClasses","useClasses","classesProp","cx","css","useCss","mergeClasses","classes","fromEntries","map"],"mappings":";AAOaA,MAAAA,aAAa,CACxBC,MACAC,SACG;AACH,QAAMC,aAAqC,CAAA;AACtCC,OAAAA,QAAQ,CAACC,QAAgB;AACjBA,eAAAA,GAAG,IAAK,GAAEH,QAAQG;AAAAA,EAAAA,CAC9B;AACMF,SAAAA;AACT;AAEA,MAAMG,iBAAiB,CACrBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACrB,QAAIG,OAAOC,OAAOJ,KAAKF,GAAG,GAAG;AACrBO,YAAAA,SAASJ,MAAMH,GAAG;AAClBQ,YAAAA,QAAQN,IAAIF,GAAG;AACdO,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWP,eAAeO,OAAcL,KAAK,IAAIK;AAAAA,IACtE;AAAA,EACF;AACOJ,SAAAA;AACT;AAGaK,MAAAA,WAAW,CAAmBC,WAAcb,SAAoB;AACpEI,SAAAA,eAAeS,WAAYV,CAAQ,QAAA;AAClCW,UAAAA,UAAUX,IAAIY,MAAM,QAAQ;AAClC,QAAI,EAACD,mCAASE;AAAeb,aAAAA;AAC7B,UAAMO,SAASI,QAAQG,OACrB,CAACC,KAAKH,UAAUG,IAAIC,QAAQJ,OAAQ,IAAGf,QAAQe,MAAMK,MAAM,CAAC,GAAG,GAC/DjB,GACF;AACA,WAAOO,UAAUP;AAAAA,EAAAA,CAClB;AACH;AAGgBkB,SAAAA,cAEdrB,MACAsB,cACA;AACMC,QAAAA,SAASX,SAASU,cAActB,IAAI;AAE1C,QAAMwB,gBAAgB1B,WAAWU,OAAOT,KAAKwB,MAAM,GAAkBvB,IAAI;AAEzE,WAASyB,WAAWC,aAAiD;AAC7D,UAAA;AAAA,MAAEC;AAAAA,MAAIC;AAAAA,QAAQC,OAAO;AAE3B,UAAMC,eAAeA,CAAC3B,QACpBwB,GAAI,GAAE3B,QAAQG,OAAOyB,IAAIL,OAAOpB,GAAG,CAAC,GAAGuB,2CAAcvB,IAAI;AAE3D,UAAM4B,UAAUvB,OAAOwB,YACrBxB,OAAOT,KAAKwB,MAAM,EAAEU,IAAK9B,CAAAA,QAAQ,CAACA,KAAK2B,aAAa3B,GAAG,CAAC,CAAC,CAC3D;AAEO,WAAA;AAAA,MAAEwB;AAAAA,MAAII;AAAAA,IAAAA;AAAAA,EACf;AAEO,SAAA;AAAA,IAAEN;AAAAA,IAAYD;AAAAA,EAAAA;AACvB;"}

package/dist/esm/utils/focusableElementFinder.js

@@ -1,4 +1,4 @@
-const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"]';
+const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
 const getFocusableList = (node) => node && node.querySelectorAll(SELECTORS) || [];
 const getPrevNextFocus = (nodeId) => {
   const nodes = getFocusableList(document);

package/dist/esm/utils/focusableElementFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusableElementFinder.js","sources":["../../../src/utils/focusableElementFinder.ts"],"sourcesContent":["const SELECTORS =\n  'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"]';\n\n/**\n * Gets the list of focusable elements.\n * @param node\n * @returns {*|NodeListOf<HTMLElementTagNameMap[string]>|NodeListOf<*>|NodeListOf<SVGElementTagNameMap[string]>|*[]}\n */\nconst getFocusableList = (node) =>\n  (node && node.querySelectorAll(SELECTORS)) || [];\n\n/**\n * Auxiliary function to find adjacent nodes to focus.\n *\n * @param nodeId\n * @returns {{prevFocus: *, nextFocus: *}}\n */\nconst getPrevNextFocus = (nodeId) => {\n  const nodes = getFocusableList(document);\n\n  const nbNodes = nodes.length;\n  let index = 0;\n  for (; index < nbNodes; index += 1) {\n    if (nodes[index].id === nodeId) {\n      break;\n    }\n  }\n  return {\n    nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],\n    prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1],\n  };\n};\n\n/**\n * Get the first and last focusable element from a node.\n *\n * @param nodeId\n * @returns {{last: *, first: *}}\n */\nconst getFirstAndLastFocus = (node) => {\n  const focusableList = getFocusableList(node);\n\n  return {\n    first: focusableList[0] || null,\n    last: focusableList[focusableList.length - 1] || null,\n  };\n};\n\nexport { getFocusableList, getFirstAndLastFocus, getPrevNextFocus };\nexport default getPrevNextFocus;\n"],"names":["SELECTORS","getFocusableList","node","querySelectorAll","getPrevNextFocus","nodeId","nodes","document","nbNodes","length","index","id","nextFocus","prevFocus","getFirstAndLastFocus","focusableList","first","last"],"mappings":"AAAA,MAAMA,YACJ;AAOF,MAAMC,mBAAoBC,CACvBA,SAAAA,QAAQA,KAAKC,iBAAiBH,SAAS,KAAM,CAAE;AAQlD,MAAMI,mBAAoBC,CAAW,WAAA;AAC7BC,QAAAA,QAAQL,iBAAiBM,QAAQ;AAEvC,QAAMC,UAAUF,MAAMG;AACtB,MAAIC,QAAQ;AACLA,SAAAA,QAAQF,SAASE,SAAS,GAAG;AAClC,QAAIJ,MAAMI,KAAK,EAAEC,OAAON,QAAQ;AAC9B;AAAA,IACF;AAAA,EACF;AACO,SAAA;AAAA,IACLO,WAAWN,MAAMI,QAAQ,IAAIF,UAAU,IAAI,IAAIE,QAAQ,CAAC;AAAA,IACxDG,WAAWP,MAAMI,QAAQ,IAAI,IAAIF,UAAU,IAAIE,QAAQ,CAAC;AAAA,EAAA;AAE5D;AAQA,MAAMI,uBAAwBZ,CAAS,SAAA;AAC/Ba,QAAAA,gBAAgBd,iBAAiBC,IAAI;AAEpC,SAAA;AAAA,IACLc,OAAOD,cAAc,CAAC,KAAK;AAAA,IAC3BE,MAAMF,cAAcA,cAAcN,SAAS,CAAC,KAAK;AAAA,EAAA;AAErD;"}
+{"version":3,"file":"focusableElementFinder.js","sources":["../../../src/utils/focusableElementFinder.ts"],"sourcesContent":["const SELECTORS =\n  'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Gets the list of focusable elements.\n * @param node\n * @returns {*|NodeListOf<HTMLElementTagNameMap[string]>|NodeListOf<*>|NodeListOf<SVGElementTagNameMap[string]>|*[]}\n */\nconst getFocusableList = (node) =>\n  (node && node.querySelectorAll(SELECTORS)) || [];\n\n/**\n * Auxiliary function to find adjacent nodes to focus.\n *\n * @param nodeId\n * @returns {{prevFocus: *, nextFocus: *}}\n */\nconst getPrevNextFocus = (nodeId) => {\n  const nodes = getFocusableList(document);\n\n  const nbNodes = nodes.length;\n  let index = 0;\n  for (; index < nbNodes; index += 1) {\n    if (nodes[index].id === nodeId) {\n      break;\n    }\n  }\n  return {\n    nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],\n    prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1],\n  };\n};\n\n/**\n * Get the first and last focusable element from a node.\n *\n * @param nodeId\n * @returns {{last: *, first: *}}\n */\nconst getFirstAndLastFocus = (node) => {\n  const focusableList = getFocusableList(node);\n\n  return {\n    first: focusableList[0] || null,\n    last: focusableList[focusableList.length - 1] || null,\n  };\n};\n\nexport { getFocusableList, getFirstAndLastFocus, getPrevNextFocus };\nexport default getPrevNextFocus;\n"],"names":["SELECTORS","getFocusableList","node","querySelectorAll","getPrevNextFocus","nodeId","nodes","document","nbNodes","length","index","id","nextFocus","prevFocus","getFirstAndLastFocus","focusableList","first","last"],"mappings":"AAAA,MAAMA,YACJ;AAOF,MAAMC,mBAAoBC,CACvBA,SAAAA,QAAQA,KAAKC,iBAAiBH,SAAS,KAAM,CAAE;AAQlD,MAAMI,mBAAoBC,CAAW,WAAA;AAC7BC,QAAAA,QAAQL,iBAAiBM,QAAQ;AAEvC,QAAMC,UAAUF,MAAMG;AACtB,MAAIC,QAAQ;AACLA,SAAAA,QAAQF,SAASE,SAAS,GAAG;AAClC,QAAIJ,MAAMI,KAAK,EAAEC,OAAON,QAAQ;AAC9B;AAAA,IACF;AAAA,EACF;AACO,SAAA;AAAA,IACLO,WAAWN,MAAMI,QAAQ,IAAIF,UAAU,IAAI,IAAIE,QAAQ,CAAC;AAAA,IACxDG,WAAWP,MAAMI,QAAQ,IAAI,IAAIF,UAAU,IAAIE,QAAQ,CAAC;AAAA,EAAA;AAE5D;AAQA,MAAMI,uBAAwBZ,CAAS,SAAA;AAC/Ba,QAAAA,gBAAgBd,iBAAiBC,IAAI;AAEpC,SAAA;AAAA,IACLc,OAAOD,cAAc,CAAC,KAAK;AAAA,IAC3BE,MAAMF,cAAcA,cAAcN,SAAS,CAAC,KAAK;AAAA,EAAA;AAErD;"}

package/dist/esm/utils/iconVariant.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconVariant.js","sources":["../../../src/utils/iconVariant.tsx"],"sourcesContent":["import {\n  Fail,\n  Success,\n  Caution,\n  Info,\n  IconBaseProps,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvDialogTitleVariant } from \"..\";\n\nconst iconVariant = (\n  variant: HvDialogTitleVariant,\n  color?: IconBaseProps[\"color\"],\n  semantic?: true\n) => {\n  switch (variant) {\n    case \"success\":\n      return <Success color={color} semantic={semantic && \"positive\"} />;\n    case \"warning\":\n      return <Caution color={color} semantic={semantic && \"warning\"} />;\n    case \"error\":\n      return <Fail color={color} semantic={semantic && \"negative\"} />;\n    case \"info\":\n      return <Info color={color} />;\n    default:\n      return null;\n  }\n};\n\nexport default iconVariant;\n"],"names":["iconVariant","variant","color","semantic","Success","Caution","Fail","Info"],"mappings":";;AASA,MAAMA,cAAcA,CAClBC,SACAC,OACAC,aACG;AACH,UAAQF,SAAO;AAAA,IACb,KAAK;AACH,iCAAQG,SAAO;AAAA,QAACF;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAc;AAAA,IACpE,KAAK;AACH,iCAAQE,SAAO;AAAA,QAACH;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAa;AAAA,IACnE,KAAK;AACH,iCAAQG,MAAI;AAAA,QAACJ;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAc;AAAA,IACjE,KAAK;AACH,iCAAQI,MAAI;AAAA,QAACL;AAAAA,MAAAA,CAAgB;AAAA,IAC/B;AACS,aAAA;AAAA,EAAK;AAElB;AAEA,MAAA,gBAAeF;"}
+{"version":3,"file":"iconVariant.js","sources":["../../../src/utils/iconVariant.tsx"],"sourcesContent":["import {\n  Fail,\n  Success,\n  Caution,\n  Info,\n  IconBaseProps,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvDialogTitleVariant } from \"..\";\n\nconst iconVariant = (\n  variant: HvDialogTitleVariant,\n  color?: IconBaseProps[\"color\"],\n  semantic?: true\n) => {\n  switch (variant) {\n    case \"success\":\n      return <Success color={color} semantic={semantic && \"positive\"} />;\n    case \"warning\":\n      return <Caution color={color} semantic={semantic && \"warning\"} />;\n    case \"error\":\n      return <Fail color={color} semantic={semantic && \"negative\"} />;\n    case \"info\":\n      return <Info color={color} />;\n    default:\n      return null;\n  }\n};\n\nexport default iconVariant;\n"],"names":["iconVariant","variant","color","semantic","Success","Caution","Fail","Info"],"mappings":";;AASA,MAAMA,cAAcA,CAClBC,SACAC,OACAC,aACG;AACH,UAAQF,SAAO;AAAA,IACb,KAAK;AACH,iCAAQG,SAAO;AAAA,QAACF;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAa;AAAA,IACnE,KAAK;AACH,iCAAQE,SAAO;AAAA,QAACH;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAY;AAAA,IAClE,KAAK;AACH,iCAAQG,MAAI;AAAA,QAACJ;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAa;AAAA,IAChE,KAAK;AACH,iCAAQI,MAAI;AAAA,QAACL;AAAAA,MAAAA,CAAe;AAAA,IAC9B;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAA,gBAAeF;"}

package/dist/esm/utils/multiSelectionEventHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiSelectionEventHandler.js","sources":["../../../src/utils/multiSelectionEventHandler.ts"],"sourcesContent":["const cycleThroughSelection = (\n  selectedState,\n  index,\n  allValues,\n  selectionCheck\n) => {\n  const newValue: any[] = [];\n  selectedState.forEach((isSelected, i) => {\n    if (i === index) {\n      if (selectionCheck || !isSelected) {\n        newValue.push(allValues[i]);\n      }\n    } else if (isSelected) {\n      newValue.push(allValues[i]);\n    }\n  });\n\n  return newValue;\n};\n\nconst multiSelectionEventHandler = (\n  evt,\n  index,\n  selectionAnchor,\n  allValues,\n  selectedState,\n  selectionCheck\n) => {\n  let newValue: any[] = [];\n\n  if (evt.nativeEvent.shiftKey) {\n    if (selectionAnchor.current === undefined) {\n      selectionAnchor.current = index;\n      newValue.push(allValues[index]);\n    } else {\n      let selectionStart;\n      let selectionEnd;\n      if (selectionAnchor.current > index) {\n        selectionStart = index;\n        selectionEnd = selectionAnchor.current + 1;\n      } else {\n        selectionStart = selectionAnchor.current;\n        selectionEnd = index + 1;\n      }\n\n      const selectedValues = allValues.slice(selectionStart, selectionEnd);\n\n      newValue.push(...selectedValues);\n    }\n  } else if (evt.nativeEvent.metaKey) {\n    selectionAnchor.current = index;\n\n    newValue = cycleThroughSelection(\n      selectedState,\n      index,\n      allValues,\n      selectionCheck\n    );\n  } else {\n    selectionAnchor.current = index;\n\n    newValue = cycleThroughSelection(\n      selectedState,\n      index,\n      allValues,\n      selectionCheck\n    );\n  }\n\n  return newValue;\n};\n\nexport default multiSelectionEventHandler;\n"],"names":["cycleThroughSelection","selectedState","index","allValues","selectionCheck","newValue","forEach","isSelected","i","push","multiSelectionEventHandler","evt","selectionAnchor","nativeEvent","shiftKey","current","undefined","selectionStart","selectionEnd","selectedValues","slice","metaKey"],"mappings":"AAAA,MAAMA,wBAAwBA,CAC5BC,eACAC,OACAC,WACAC,mBACG;AACH,QAAMC,WAAkB,CAAA;AACVC,gBAAAA,QAAQ,CAACC,YAAYC,MAAM;AACvC,QAAIA,MAAMN,OAAO;AACXE,UAAAA,kBAAkB,CAACG,YAAY;AACxBE,iBAAAA,KAAKN,UAAUK,CAAC,CAAC;AAAA,MAC5B;AAAA,eACSD,YAAY;AACZE,eAAAA,KAAKN,UAAUK,CAAC,CAAC;AAAA,IAC5B;AAAA,EAAA,CACD;AAEMH,SAAAA;AACT;AAEA,MAAMK,6BAA6BA,CACjCC,KACAT,OACAU,iBACAT,WACAF,eACAG,mBACG;AACH,MAAIC,WAAkB,CAAA;AAElBM,MAAAA,IAAIE,YAAYC,UAAU;AACxBF,QAAAA,gBAAgBG,YAAYC,QAAW;AACzCJ,sBAAgBG,UAAUb;AACjBO,eAAAA,KAAKN,UAAUD,KAAK,CAAC;AAAA,IAAA,OACzB;AACDe,UAAAA;AACAC,UAAAA;AACAN,UAAAA,gBAAgBG,UAAUb,OAAO;AAClBA,yBAAAA;AACjBgB,uBAAeN,gBAAgBG,UAAU;AAAA,MAAA,OACpC;AACLE,yBAAiBL,gBAAgBG;AACjCG,uBAAehB,QAAQ;AAAA,MACzB;AAEA,YAAMiB,iBAAiBhB,UAAUiB,MAAMH,gBAAgBC,YAAY;AAE1DT,eAAAA,KAAK,GAAGU,cAAc;AAAA,IACjC;AAAA,EAAA,WACSR,IAAIE,YAAYQ,SAAS;AAClCT,oBAAgBG,UAAUb;AAE1BG,eAAWL,sBACTC,eACAC,OACAC,WACAC,cAAc;AAAA,EAAA,OAEX;AACLQ,oBAAgBG,UAAUb;AAE1BG,eAAWL,sBACTC,eACAC,OACAC,WACAC,cAAc;AAAA,EAElB;AAEOC,SAAAA;AACT;AAEA,MAAA,+BAAeK;"}
+{"version":3,"file":"multiSelectionEventHandler.js","sources":["../../../src/utils/multiSelectionEventHandler.ts"],"sourcesContent":["const cycleThroughSelection = (\n  selectedState,\n  index,\n  allValues,\n  selectionCheck\n) => {\n  const newValue: any[] = [];\n  selectedState.forEach((isSelected, i) => {\n    if (i === index) {\n      if (selectionCheck || !isSelected) {\n        newValue.push(allValues[i]);\n      }\n    } else if (isSelected) {\n      newValue.push(allValues[i]);\n    }\n  });\n\n  return newValue;\n};\n\nconst multiSelectionEventHandler = (\n  evt,\n  index,\n  selectionAnchor,\n  allValues,\n  selectedState,\n  selectionCheck\n) => {\n  let newValue: any[] = [];\n\n  if (evt.nativeEvent.shiftKey) {\n    if (selectionAnchor.current === undefined) {\n      selectionAnchor.current = index;\n      newValue.push(allValues[index]);\n    } else {\n      let selectionStart;\n      let selectionEnd;\n      if (selectionAnchor.current > index) {\n        selectionStart = index;\n        selectionEnd = selectionAnchor.current + 1;\n      } else {\n        selectionStart = selectionAnchor.current;\n        selectionEnd = index + 1;\n      }\n\n      const selectedValues = allValues.slice(selectionStart, selectionEnd);\n\n      newValue.push(...selectedValues);\n    }\n  } else if (evt.nativeEvent.metaKey) {\n    selectionAnchor.current = index;\n\n    newValue = cycleThroughSelection(\n      selectedState,\n      index,\n      allValues,\n      selectionCheck\n    );\n  } else {\n    selectionAnchor.current = index;\n\n    newValue = cycleThroughSelection(\n      selectedState,\n      index,\n      allValues,\n      selectionCheck\n    );\n  }\n\n  return newValue;\n};\n\nexport default multiSelectionEventHandler;\n"],"names":["cycleThroughSelection","selectedState","index","allValues","selectionCheck","newValue","forEach","isSelected","i","push","multiSelectionEventHandler","evt","selectionAnchor","nativeEvent","shiftKey","current","undefined","selectionStart","selectionEnd","selectedValues","slice","metaKey"],"mappings":"AAAA,MAAMA,wBAAwBA,CAC5BC,eACAC,OACAC,WACAC,mBACG;AACH,QAAMC,WAAkB,CAAA;AACVC,gBAAAA,QAAQ,CAACC,YAAYC,MAAM;AACvC,QAAIA,MAAMN,OAAO;AACXE,UAAAA,kBAAkB,CAACG,YAAY;AACxBE,iBAAAA,KAAKN,UAAUK,CAAC,CAAC;AAAA,MAC5B;AAAA,eACSD,YAAY;AACZE,eAAAA,KAAKN,UAAUK,CAAC,CAAC;AAAA,IAC5B;AAAA,EAAA,CACD;AAEMH,SAAAA;AACT;AAEA,MAAMK,6BAA6BA,CACjCC,KACAT,OACAU,iBACAT,WACAF,eACAG,mBACG;AACH,MAAIC,WAAkB,CAAA;AAElBM,MAAAA,IAAIE,YAAYC,UAAU;AACxBF,QAAAA,gBAAgBG,YAAYC,QAAW;AACzCJ,sBAAgBG,UAAUb;AACjBO,eAAAA,KAAKN,UAAUD,KAAK,CAAC;AAAA,IAAA,OACzB;AACDe,UAAAA;AACAC,UAAAA;AACAN,UAAAA,gBAAgBG,UAAUb,OAAO;AAClBA,yBAAAA;AACjBgB,uBAAeN,gBAAgBG,UAAU;AAAA,MAAA,OACpC;AACLE,yBAAiBL,gBAAgBG;AACjCG,uBAAehB,QAAQ;AAAA,MACzB;AAEA,YAAMiB,iBAAiBhB,UAAUiB,MAAMH,gBAAgBC,YAAY;AAE1DT,eAAAA,KAAK,GAAGU,cAAc;AAAA,IACjC;AAAA,EAAA,WACSR,IAAIE,YAAYQ,SAAS;AAClCT,oBAAgBG,UAAUb;AAE1BG,eAAWL,sBACTC,eACAC,OACAC,WACAC,cACF;AAAA,EAAA,OACK;AACLQ,oBAAgBG,UAAUb;AAE1BG,eAAWL,sBACTC,eACAC,OACAC,WACAC,cACF;AAAA,EACF;AAEOC,SAAAA;AACT;AAEA,MAAA,+BAAeK;"}

package/dist/esm/utils/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","sources":["../../../src/utils/sizes.ts"],"sourcesContent":["export const decreaseSize = (size: string) => {\n  switch (size) {\n    case \"xl\":\n      return \"L\";\n\n    case \"l\":\n    case \"lg\":\n      return \"M\";\n\n    case \"m\":\n    case \"md\":\n      return \"S\";\n\n    case \"s\":\n    case \"sm\":\n    default:\n      return \"XS\";\n  }\n};\n\nexport const increaseSize = (size: string) => {\n  switch (size) {\n    case \"xs\":\n      return \"S\";\n\n    case \"s\":\n      return \"M\";\n\n    case \"m\":\n      return \"L\";\n\n    case \"l\":\n    default:\n      return \"XL\";\n  }\n};\n"],"names":["decreaseSize","size","increaseSize"],"mappings":"AAAaA,MAAAA,eAAeA,CAACC,SAAiB;AAC5C,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EAAK;AAElB;AAEaC,MAAAA,eAAeA,CAACD,SAAiB;AAC5C,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EAAK;AAElB;"}
+{"version":3,"file":"sizes.js","sources":["../../../src/utils/sizes.ts"],"sourcesContent":["export const decreaseSize = (size: string) => {\n  switch (size) {\n    case \"xl\":\n      return \"L\";\n\n    case \"l\":\n    case \"lg\":\n      return \"M\";\n\n    case \"m\":\n    case \"md\":\n      return \"S\";\n\n    case \"s\":\n    case \"sm\":\n    default:\n      return \"XS\";\n  }\n};\n\nexport const increaseSize = (size: string) => {\n  switch (size) {\n    case \"xs\":\n      return \"S\";\n\n    case \"s\":\n      return \"M\";\n\n    case \"m\":\n      return \"L\";\n\n    case \"l\":\n    default:\n      return \"XL\";\n  }\n};\n"],"names":["decreaseSize","size","increaseSize"],"mappings":"AAAaA,MAAAA,eAAeA,CAACC,SAAiB;AAC5C,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;AAEaC,MAAAA,eAAeA,CAACD,SAAiB;AAC5C,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AACI,aAAA;AAAA,IAET,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;"}

package/dist/esm/utils/theme.js

@@ -1,8 +1,8 @@
 import { theme, themes } from "@hitachivantara/uikit-styles";
 const setElementStyle = (element, style) => {
-  for (const property in style) {
-    element.style[property] = style[property];
-  }
+  Object.entries(style).forEach(([property, value]) => {
+    element.style[property] = value;
+  });
 };
 const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
   const element = themeRootId ? document.getElementById(themeRootId) : document.body;
@@ -52,6 +52,7 @@ const createTheme = (props) => {
     ...themes[base]
   };
   customizedTheme.name = name.trim();
+  customizedTheme.base = base;
   if (customizations) {
     Object.keys(customizedTheme.colors.modes).forEach((mode) => {
       if (!themes[base].colors.modes[mode]) {

package/dist/esm/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","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  for (const property in style) {\n    element.style[property] = style[property];\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\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","property","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","forEach","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.js","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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"}

package/dist/esm/utils/useSavedState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(\n  defaultState: T\n): [T | undefined, (v?: T, s?: boolean) => void, () => void, T | undefined, T] {\n  const [initialState] = useState<T>(defaultState);\n\n  const [state, setState] = useState<T | undefined>(initialState);\n  const [submittedState, setSubmittedState] = useState<T | undefined>(\n    initialState\n  );\n\n  const changeState = useCallback((value?: T, save = false) => {\n    setState(value);\n    if (save) setSubmittedState(value);\n  }, []);\n\n  const rollback = () => {\n    setState(submittedState);\n  };\n\n  return [state, changeState, rollback, submittedState, initialState];\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";AAEO,SAASA,cACdC,cAC6E;AAC7E,QAAM,CAACC,YAAY,IAAIC,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,SAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,SAC1CD,YAAY;AAGd,QAAMM,cAAcC,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;"}
+{"version":3,"file":"useSavedState.js","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(\n  defaultState: T\n): [T | undefined, (v?: T, s?: boolean) => void, () => void, T | undefined, T] {\n  const [initialState] = useState<T>(defaultState);\n\n  const [state, setState] = useState<T | undefined>(initialState);\n  const [submittedState, setSubmittedState] = useState<T | undefined>(\n    initialState\n  );\n\n  const changeState = useCallback((value?: T, save = false) => {\n    setState(value);\n    if (save) setSubmittedState(value);\n  }, []);\n\n  const rollback = () => {\n    setState(submittedState);\n  };\n\n  return [state, changeState, rollback, submittedState, initialState];\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";AAEO,SAASA,cACdC,cAC6E;AAC7E,QAAM,CAACC,YAAY,IAAIC,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,SAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,SAC1CD,YACF;AAEA,QAAMM,cAAcC,YAAY,CAACC,OAAWC,OAAO,UAAU;AAC3DN,aAASK,KAAK;AACVC,QAAAA;AAAMJ,wBAAkBG,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAME,WAAWA,MAAM;AACrBP,aAASC,cAAc;AAAA,EAAA;AAGzB,SAAO,CAACF,OAAOI,aAAaI,UAAUN,gBAAgBJ,YAAY;AACpE;"}

package/dist/esm/utils/wrapperTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n  const isOverFlow =\n    evt.target.children.length > 1\n      ? Array.of(...evt.target.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : evt.target.scrollWidth > evt.target.clientWidth;\n\n  return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n  const ComponentFunction = () => Component;\n  return hasTooltips\n    ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n    : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WAAW,IAElDV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AAChC,SAAOD,cACHI,YAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;"}
+{"version":3,"file":"wrapperTooltip.js","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs\";\n\nconst hideTooltip = (evt) => {\n  const isOverFlow =\n    evt.target.children.length > 1\n      ? Array.of(...evt.target.children).some(\n          (child) => child.scrollWidth > child.clientWidth\n        )\n      : evt.target.scrollWidth > evt.target.clientWidth;\n\n  return !isOverFlow;\n};\n\nexport const wrapperTooltip = (hasTooltips, Component, label) => {\n  const ComponentFunction = () => Component;\n  return hasTooltips\n    ? withTooltip(ComponentFunction, label, \"top\", hideTooltip)\n    : ComponentFunction;\n};\n"],"names":["hideTooltip","evt","isOverFlow","target","children","length","Array","of","some","child","scrollWidth","clientWidth","wrapperTooltip","hasTooltips","Component","label","ComponentFunction","withTooltip"],"mappings":";AAEA,MAAMA,cAAeC,CAAQ,QAAA;AACrBC,QAAAA,aACJD,IAAIE,OAAOC,SAASC,SAAS,IACzBC,MAAMC,GAAG,GAAGN,IAAIE,OAAOC,QAAQ,EAAEI,KAC9BC,CAAAA,UAAUA,MAAMC,cAAcD,MAAME,WACvC,IACAV,IAAIE,OAAOO,cAAcT,IAAIE,OAAOQ;AAE1C,SAAO,CAACT;AACV;AAEO,MAAMU,iBAAiBA,CAACC,aAAaC,WAAWC,UAAU;AAC/D,QAAMC,oBAAoBA,MAAMF;AAChC,SAAOD,cACHI,YAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;"}

package/dist/types/index.d.ts

@@ -15,6 +15,7 @@ import { ColumnInterface } from 'react-table';
 import { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import type { Context } from 'react';
+import { CSSInterpolation } from '@emotion/css';
 import { CSSProperties } from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogContentProps } from '@mui/material/DialogContent';
@@ -24,6 +25,7 @@ import { DividerProps } from '@mui/material/Divider';
 import { ds3 } from '@hitachivantara/uikit-styles';
 import { ds5 } from '@hitachivantara/uikit-styles';
 import { EmblaOptionsType } from 'embla-carousel-react';
+import { EmotionCache } from '@emotion/cache';
 import type { ForwardRefExoticComponent } from 'react';
 import { GridProps } from '@mui/material';
 import { Hooks } from 'react-table';
@@ -254,16 +256,15 @@ export declare const bannerClasses: {
 };
 
 export declare const bannerContentClasses: {
-    default: "HvBanner-Content-default";
-    action: "HvBanner-Content-action";
-    error: "HvBanner-Content-error";
-    warning: "HvBanner-Content-warning";
-    success: "HvBanner-Content-success";
-    info: "HvBanner-Content-info";
-    root: "HvBanner-Content-root";
-    message: "HvBanner-Content-message";
-    outContainer: "HvBanner-Content-outContainer";
-    baseVariant: "HvBanner-Content-baseVariant";
+    default: "HvBannerContent-default";
+    action: "HvBannerContent-action";
+    error: "HvBannerContent-error";
+    warning: "HvBannerContent-warning";
+    success: "HvBannerContent-success";
+    root: "HvBannerContent-root";
+    message: "HvBannerContent-message";
+    baseVariant: "HvBannerContent-baseVariant";
+    outContainer: "HvBannerContent-outContainer";
 };
 
 export declare const baseCheckBoxClasses: {
@@ -543,6 +544,17 @@ export declare const controlsClasses: {
     leftSection: "HvControls-leftSection";
 };
 
+/** Utility function to create classes for a component. */
+export declare function createClasses<Name extends string, ClassName extends string>(
+/** Component name in PascalCase (ie. `HvTableCell`). */
+name: Name, stylesObject: Record<ClassName, CSSInterpolation>): {
+    useClasses: (classesProp: Partial<Record<ClassName, string>>) => {
+        cx: (...args: any) => string;
+        classes: { [P in ClassName]: string; };
+    };
+    staticClasses: { [P_1 in ClassName]: `${Name}-${P_1}`; };
+};
+
 /**
  * Creates a customized theme based on the base theme and customizations given.
  * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.
@@ -571,6 +583,10 @@ declare type DeepPartial<T> = Partial<{
     [P in keyof T]: DeepPartial<T[P]>;
 }>;
 
+export declare const defaultCacheKey = "hv";
+
+export declare const defaultEmotionCache: EmotionCache;
+
 export declare const defaultgetHvBulkActionsProps: (props: any, { instance }: {
     instance: any;
 }) => any[];
@@ -667,6 +683,10 @@ export { ds3 }
 
 export { ds5 }
 
+export declare const EmotionContext: Context<{
+    cache: EmotionCache;
+}>;
+
 export declare const emptyStateClasses: {
     container: "HvEmptyState-container";
     root: "HvEmptyState-root";
@@ -678,6 +698,11 @@ export declare const emptyStateClasses: {
     messageContainer: "HvEmptyState-messageContainer";
 };
 
+export declare type ExtractNames<T extends (...args: any) => {
+    classes: Record<string, any>;
+    cx: any;
+}> = ReturnType<T>["classes"];
+
 export declare const fileClasses: {
     progressbar: "HvFile-progressbar";
     icon: "HvFile-icon";
@@ -1007,6 +1032,10 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
      * Typography variant for the label.
      */
     labelVariant?: HvTypographyVariants;
+    /**
+     * Content to be rendered
+     */
+    children: React_2.ReactNode;
 }
 
 export declare const HvActionBar: (props: HvActionBarProps) => JSX_2.Element;
@@ -1329,35 +1358,15 @@ export declare interface HvBadgeProps extends HvBaseProps {
  * A Banner displays an important and succinct message. It can also provide actions for the user to address, or dismiss.
  * It requires a user action, for it to be dismissed. Banners should appear at the top of the screen, below a top app bar.
  */
-export declare const HvBanner: ({ id, classes, className, open, onClose, anchorOrigin, variant, transitionDuration, transitionDirection, showIcon, customIcon, actions, actionsCallback, actionsPosition, label, offset, bannerContentProps, ...others }: HvBannerProps) => JSX_2.Element;
+export declare const HvBanner: ({ id, classes: classesProp, className, open, onClose, anchorOrigin, variant, transitionDuration, transitionDirection, showIcon, customIcon, actions, actionsCallback, actionsPosition, label, offset, bannerContentProps, ...others }: HvBannerProps) => JSX_2.Element;
 
 export declare type HvBannerActionPosition = "auto" | "inline" | "bottom-right";
 
-export declare interface HvBannerClasses {
-    /** Styles applied to the component root class. */
-    root?: string;
-    /** Styles applied to the component root class when the component is closed. */
-    rootClosed?: string;
-    /** Styles applied to the component when define as top. */
-    anchorOriginTopCenter?: string;
-    /** Styles applied to the component when define as bottom. */
-    anchorOriginBottomCenter?: string;
-}
+export declare type HvBannerClasses = ExtractNames<typeof useClasses>;
 
 export declare const HvBannerContent: ForwardRefExoticComponent<Omit<HvBannerContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare interface HvBannerContentClasses {
-    outContainer?: string;
-    root?: string;
-    message?: string;
-    action?: string;
-    baseVariant?: string;
-    success?: string;
-    warning?: string;
-    error?: string;
-    info?: string;
-    default?: string;
-}
+export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_2>;
 
 export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose">, HvBaseProps {
     /** The message to display. */
@@ -1379,7 +1388,7 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
     /** The props to pass down to the Action Container. */
     actionProps?: HvActionContainerProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvBannerContentClasses;
+    classes?: Partial<HvBannerContentClasses>;
 }
 
 export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose">, HvBaseProps<HTMLDivElement, "children"> {
@@ -1412,7 +1421,7 @@ export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin
     /** Props to pass down to the Banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */
     bannerContentProps?: HvBannerContentProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvBannerClasses;
+    classes?: Partial<HvBannerClasses>;
 }
 
 export declare type HvBannerVariant = "success" | "warning" | "error" | "default";
@@ -3912,8 +3921,6 @@ export declare interface HvFocusProps extends HvBaseProps<HTMLElement, "children
     focusOnClick?: boolean;
     /** Show focus when click element. v */
     focusDisabled?: boolean;
-    /** Use up/ down keyboard arrows to control focus. */
-    useArrows?: boolean;
     /** Focus and navigation strategy to be used. v */
     strategy?: HvFocusStrategies;
     /** Uses an absolute positioned div as a focus. v */
@@ -4667,6 +4674,8 @@ export declare interface HvLabelClasses {
 }
 
 export declare interface HvLabelProps extends HvBaseProps {
+    /** Id to be applied to the root node */
+    id?: string;
     /** The text to be shown by the label. */
     label?: React.ReactNode;
     /** The id of the form element the label is bound to. */
@@ -5193,7 +5202,7 @@ export declare function hvProgressColumn<D extends object = Record<string, unkno
 
 export declare const HvProgressColumnCell: ({ partial, total, color, }: HvProgressColumnCellProp) => JSX.Element;
 
-declare interface HvProgressColumnCellProp {
+export declare interface HvProgressColumnCellProp {
     /** Current value of the bar. */
     partial: number;
     /** Maximum value of the bar. */
@@ -5237,7 +5246,7 @@ export declare interface HvProviderProps {
      * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.
      * This is useful to avoid class name collisions.
      *
-     * If no value is provided, the default is `hv-uikit-css`.
+     * If no value is provided, the default is `hv`.
      */
     classNameKey?: string;
     /**
@@ -7139,7 +7148,7 @@ export { HvThemeContext }
 
 export { HvThemeContextValue }
 
-export declare type HvThemeCustomizationProps = HvExtraDeepPartialProps<Omit<HvThemeStructure, "colors" | "name">> & {
+export declare type HvThemeCustomizationProps = HvExtraDeepPartialProps<Omit<HvThemeStructure, "colors" | "name" | "base">> & {
     colors?: {
         modes?: {
             [key: string]: Partial<HvThemeColorModeStructure> & {
@@ -7157,12 +7166,13 @@ export declare interface HvThemePalette {
     support: HvSupportColors;
 }
 
-export declare const HvThemeProvider: ({ children, themes: themesList, theme, colorMode, themeRootId, }: HvThemeProviderProps) => JSX_2.Element;
+export declare const HvThemeProvider: ({ children, themes: themesList, theme, emotionCache, colorMode, themeRootId, }: HvThemeProviderProps) => JSX_2.Element;
 
 declare interface HvThemeProviderProps {
     children: React.ReactNode;
     themes: (HvTheme | HvThemeStructure)[];
     theme: string;
+    emotionCache: EmotionCache;
     colorMode: string;
     themeRootId?: string;
 }
@@ -8479,6 +8489,9 @@ export declare class Random {
 
 export declare function reducer(state: any, action: any, previousState: any, instance: any): any;
 
+/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */
+export declare const replace$: <T extends object>(stylesObj: T, name: string) => T;
+
 export declare const rightControlClasses: {
     root: "HvRightControl-root";
     sortDropdown: "HvRightControl-sortDropdown";
@@ -8778,10 +8791,6 @@ export declare const tableCellClasses: {
     head: "HvTableCell-head";
     root: "HvTableCell-root";
     resizable: "HvTableCell-resizable";
-    alignLeft: "HvTableCell-alignLeft";
-    alignCenter: "HvTableCell-alignCenter";
-    alignRight: "HvTableCell-alignRight";
-    alignJustify: "HvTableCell-alignJustify";
     sorted: "HvTableCell-sorted";
     stickyColumn: "HvTableCell-stickyColumn";
     stickyColumnMostLeft: "HvTableCell-stickyColumnMostLeft";
@@ -8790,6 +8799,10 @@ export declare const tableCellClasses: {
     groupColumnMostRight: "HvTableCell-groupColumnMostRight";
     resizing: "HvTableCell-resizing";
     sortIcon: "HvTableCell-sortIcon";
+    alignLeft: "HvTableCell-alignLeft";
+    alignRight: "HvTableCell-alignRight";
+    alignCenter: "HvTableCell-alignCenter";
+    alignJustify: "HvTableCell-alignJustify";
     variantCheckbox: "HvTableCell-variantCheckbox";
     variantExpand: "HvTableCell-variantExpand";
     variantActions: "HvTableCell-variantActions";
@@ -8823,10 +8836,6 @@ export declare const tableHeaderClasses: {
     resizer: "HvTableHeader-resizer";
     root: "HvTableHeader-root";
     resizable: "HvTableHeader-resizable";
-    alignLeft: "HvTableHeader-alignLeft";
-    alignCenter: "HvTableHeader-alignCenter";
-    alignRight: "HvTableHeader-alignRight";
-    alignJustify: "HvTableHeader-alignJustify";
     sortable: "HvTableHeader-sortable";
     sorted: "HvTableHeader-sorted";
     stickyColumn: "HvTableHeader-stickyColumn";
@@ -8836,6 +8845,10 @@ export declare const tableHeaderClasses: {
     groupColumnMostRight: "HvTableHeader-groupColumnMostRight";
     resizing: "HvTableHeader-resizing";
     sortIcon: "HvTableHeader-sortIcon";
+    alignLeft: "HvTableHeader-alignLeft";
+    alignRight: "HvTableHeader-alignRight";
+    alignCenter: "HvTableHeader-alignCenter";
+    alignJustify: "HvTableHeader-alignJustify";
     variantCheckbox: "HvTableHeader-variantCheckbox";
     variantExpand: "HvTableHeader-variantExpand";
     variantActions: "HvTableHeader-variantActions";
@@ -9012,6 +9025,31 @@ export declare type UseBulkActionsProps = (<D extends object = Record<string, un
     pluginName: string;
 };
 
+declare const useClasses: (classesProp: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>) => {
+    cx: (...args: any) => string;
+    classes: {
+        root: string;
+        rootClosed: string;
+        anchorOriginTopCenter: string;
+        anchorOriginBottomCenter: string;
+    };
+};
+
+declare const useClasses_2: (classesProp: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "baseVariant" | "outContainer", string>>) => {
+    cx: (...args: any) => string;
+    classes: {
+        default: string;
+        action: string;
+        error: string;
+        warning: string;
+        success: string;
+        root: string;
+        message: string;
+        baseVariant: string;
+        outContainer: string;
+    };
+};
+
 export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: HvClickOutsideEvent) => void) => void;
 
 export declare function useComputation(valueFn: any, valueFallback?: any): any[];