@hitachivantara/uikit-react-core 5.39.0 → 5.39.2

package/dist/cjs/utils/multiSelectionEventHandler.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"multiSelectionEventHandler.cjs","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\nexport const 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"],"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;AAEO,MAAMK,6BAA6BA,CACxCC,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;;"}
+{"version":3,"file":"multiSelectionEventHandler.cjs","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\nexport const 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"],"names":[],"mappings":";;AAAA,MAAM,wBAAwB,CAC5B,eACA,OACA,WACA,mBACG;AACH,QAAM,WAAkB,CAAA;AACV,gBAAA,QAAQ,CAAC,YAAY,MAAM;AACvC,QAAI,MAAM,OAAO;AACX,UAAA,kBAAkB,CAAC,YAAY;AACxB,iBAAA,KAAK,UAAU,CAAC,CAAC;AAAA,MAC5B;AAAA,eACS,YAAY;AACZ,eAAA,KAAK,UAAU,CAAC,CAAC;AAAA,IAC5B;AAAA,EAAA,CACD;AAEM,SAAA;AACT;AAEO,MAAM,6BAA6B,CACxC,KACA,OACA,iBACA,WACA,eACA,mBACG;AACH,MAAI,WAAkB,CAAA;AAElB,MAAA,IAAI,YAAY,UAAU;AACxB,QAAA,gBAAgB,YAAY,QAAW;AACzC,sBAAgB,UAAU;AACjB,eAAA,KAAK,UAAU,KAAK,CAAC;AAAA,IAAA,OACzB;AACD,UAAA;AACA,UAAA;AACA,UAAA,gBAAgB,UAAU,OAAO;AAClB,yBAAA;AACjB,uBAAe,gBAAgB,UAAU;AAAA,MAAA,OACpC;AACL,yBAAiB,gBAAgB;AACjC,uBAAe,QAAQ;AAAA,MACzB;AAEA,YAAM,iBAAiB,UAAU,MAAM,gBAAgB,YAAY;AAE1D,eAAA,KAAK,GAAG,cAAc;AAAA,IACjC;AAAA,EAAA,WACS,IAAI,YAAY,SAAS;AAClC,oBAAgB,UAAU;AAEf,eAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF,OACK;AACL,oBAAgB,UAAU;AAEf,eAAA;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AACT;;"}

package/dist/cjs/utils/setId.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"setId.cjs","sources":["../../../src/utils/setId.ts"],"sourcesContent":["import uniqueId from \"lodash/uniqueId\";\n\nexport const setId = (...args) =>\n  args.some((arg) => arg == null) ? undefined : args.join(\"-\");\n\nexport const setUid = (id, suffix) => {\n  const uid = setId(id, suffix);\n  return uid ? uniqueId(uid) : undefined;\n};\n"],"names":["setId","args","some","arg","undefined","join","setUid","id","suffix","uid","uniqueId"],"mappings":";;;;;AAEO,MAAMA,QAAQA,IAAIC,SACvBA,KAAKC,KAAMC,CAAAA,QAAQA,OAAO,IAAI,IAAIC,SAAYH,KAAKI,KAAK,GAAG;AAEhDC,MAAAA,SAASA,CAACC,IAAIC,WAAW;AAC9BC,QAAAA,MAAMT,MAAMO,IAAIC,MAAM;AACrBC,SAAAA,MAAMC,kBAASD,QAAAA,GAAG,IAAIL;AAC/B;;;"}
+{"version":3,"file":"setId.cjs","sources":["../../../src/utils/setId.ts"],"sourcesContent":["import uniqueId from \"lodash/uniqueId\";\n\nexport const setId = (...args) =>\n  args.some((arg) => arg == null) ? undefined : args.join(\"-\");\n\nexport const setUid = (id, suffix) => {\n  const uid = setId(id, suffix);\n  return uid ? uniqueId(uid) : undefined;\n};\n"],"names":["uniqueId"],"mappings":";;;;;AAEO,MAAM,QAAQ,IAAI,SACvB,KAAK,KAAK,CAAC,QAAQ,OAAO,IAAI,IAAI,SAAY,KAAK,KAAK,GAAG;AAEhD,MAAA,SAAS,CAAC,IAAI,WAAW;AAC9B,QAAA,MAAM,MAAM,IAAI,MAAM;AACrB,SAAA,MAAMA,kBAAS,QAAA,GAAG,IAAI;AAC/B;;;"}

package/dist/cjs/utils/sizes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.cjs","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;;;"}
+{"version":3,"file":"sizes.cjs","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":[],"mappings":";;AAAa,MAAA,eAAe,CAAC,SAAiB;AAC5C,UAAQ,MAAM;AAAA,IACZ,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;AAEa,MAAA,eAAe,CAAC,SAAiB;AAC5C,UAAQ,MAAM;AAAA,IACZ,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/cjs/utils/theme.cjs

@@ -27,13 +27,14 @@ const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
 };
 const applyThemeCustomizations = (obj, customizations) => {
   const isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
-  const customizedTheme = {
-    ...obj
-  };
+  const customizedTheme = { ...obj };
   Object.keys(customizations).forEach((key) => {
     if (customizedTheme[key]) {
       if (isObject(customizedTheme[key]) && isObject(customizations[key])) {
-        customizedTheme[key] = applyThemeCustomizations(customizedTheme[key], customizations[key]);
+        customizedTheme[key] = applyThemeCustomizations(
+          customizedTheme[key],
+          customizations[key]
+        );
       } else if (typeof customizedTheme[key] === typeof customizations[key]) {
         customizedTheme[key] = customizations[key];
       }
@@ -50,9 +51,7 @@ const createTheme = (props) => {
     inheritColorModes = true,
     ...customizations
   } = props;
-  const customizedTheme = customizations ? applyThemeCustomizations(uikitStyles.themes[base], customizations) : {
-    ...uikitStyles.themes[base]
-  };
+  const customizedTheme = customizations ? applyThemeCustomizations(uikitStyles.themes[base], customizations) : { ...uikitStyles.themes[base] };
   customizedTheme.name = name.trim();
   customizedTheme.base = base;
   if (customizations) {
@@ -78,7 +77,9 @@ const processThemes = (themesList) => {
   if (themesList && Array.isArray(themesList) && themesList.length > 0) {
     const list = [];
     themesList.forEach((thm) => {
-      const i = list.findIndex((t) => t.name.trim() === thm.name.trim());
+      const i = list.findIndex(
+        (t) => t.name.trim() === thm.name.trim()
+      );
       if (i !== -1) {
         list.splice(i, 1);
         list.push(thm);

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

@@ -1 +1 @@
-{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme, HvCreateThemeProps } from \"@core/types/theme\";\n\nimport { getElementById } from \"./document\";\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 = getElementById(rootElementId || \"hv-root\");\n  if (!root) return undefined;\n\n  return getComputedStyle(root)\n    .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n    .trim();\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","undefined","getComputedStyle","getPropertyValue","replace"],"mappings":"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"}
+{"version":3,"file":"theme.cjs","sources":["../../../src/utils/theme.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport { HvTheme, HvCreateThemeProps } from \"@core/types/theme\";\n\nimport { getElementById } from \"./document\";\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 = getElementById(rootElementId || \"hv-root\");\n  if (!root) return undefined;\n\n  return getComputedStyle(root)\n    .getPropertyValue(cssVar.replace(\"var(\", \"\").replace(\")\", \"\"))\n    .trim();\n};\n"],"names":["theme","themes","getElementById"],"mappings":"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"}

package/dist/cjs/utils/useSavedState.cjs

@@ -4,7 +4,9 @@ const React = require("react");
 function useSavedState(defaultState) {
   const [initialState] = React.useState(defaultState);
   const [state, setState] = React.useState(initialState);
-  const [submittedState, setSubmittedState] = React.useState(initialState);
+  const [submittedState, setSubmittedState] = React.useState(
+    initialState
+  );
   const changeState = React.useCallback((value, save = false) => {
     setState(value);
     if (save)

package/dist/cjs/utils/useSavedState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSavedState.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: 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] as const;\n}\n"],"names":["useSavedState","defaultState","initialState","useState","state","setState","submittedState","setSubmittedState","changeState","useCallback","value","save","rollback"],"mappings":";;;AAEO,SAASA,cAAiBC,cAAiB;AAChD,QAAM,CAACC,YAAY,IAAIC,MAAAA,SAAYF,YAAY;AAE/C,QAAM,CAACG,OAAOC,QAAQ,IAAIF,eAAwBD,YAAY;AAC9D,QAAM,CAACI,gBAAgBC,iBAAiB,IAAIJ,eAC1CD,YACF;AAEA,QAAMM,cAAcC,MAAAA,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.cjs","sources":["../../../src/utils/useSavedState.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport function useSavedState<T>(defaultState: 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] as const;\n}\n"],"names":["useState","useCallback"],"mappings":";;;AAEO,SAAS,cAAiB,cAAiB;AAChD,QAAM,CAAC,YAAY,IAAIA,MAAA,SAAY,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,IAAIA,eAAwB,YAAY;AACxD,QAAA,CAAC,gBAAgB,iBAAiB,IAAIA,MAAA;AAAA,IAC1C;AAAA,EAAA;AAGF,QAAM,cAAcC,MAAA,YAAY,CAAC,OAAW,OAAO,UAAU;AAC3D,aAAS,KAAK;AACV,QAAA;AAAM,wBAAkB,KAAK;AAAA,EACnC,GAAG,CAAE,CAAA;AAEL,QAAM,WAAW,MAAM;AACrB,aAAS,cAAc;AAAA,EAAA;AAGzB,SAAO,CAAC,OAAO,aAAa,UAAU,gBAAgB,YAAY;AACpE;;"}

package/dist/cjs/utils/wrapperTooltip.cjs

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const withTooltip = require("../hocs/withTooltip.cjs");
 const hideTooltip = (evt) => {
-  const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some((child) => child.scrollWidth > child.clientWidth) : evt.target.scrollWidth > evt.target.clientWidth;
+  const isOverFlow = evt.target.children.length > 1 ? Array.of(...evt.target.children).some(
+    (child) => child.scrollWidth > child.clientWidth
+  ) : evt.target.scrollWidth > evt.target.clientWidth;
   return !isOverFlow;
 };
 const wrapperTooltip = (hasTooltips, Component, label) => {

package/dist/cjs/utils/wrapperTooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"wrapperTooltip.cjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs/withTooltip\";\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,YAAAA,YAAYD,mBAAmBD,OAAO,OAAOf,WAAW,IACxDgB;AACN;;"}
+{"version":3,"file":"wrapperTooltip.cjs","sources":["../../../src/utils/wrapperTooltip.tsx"],"sourcesContent":["import { withTooltip } from \"@core/hocs/withTooltip\";\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":["withTooltip"],"mappings":";;;AAEA,MAAM,cAAc,CAAC,QAAQ;AAC3B,QAAM,aACJ,IAAI,OAAO,SAAS,SAAS,IACzB,MAAM,GAAG,GAAG,IAAI,OAAO,QAAQ,EAAE;AAAA,IAC/B,CAAC,UAAU,MAAM,cAAc,MAAM;AAAA,EAAA,IAEvC,IAAI,OAAO,cAAc,IAAI,OAAO;AAE1C,SAAO,CAAC;AACV;AAEO,MAAM,iBAAiB,CAAC,aAAa,WAAW,UAAU;AAC/D,QAAM,oBAAoB,MAAM;AAChC,SAAO,cACHA,YAAAA,YAAY,mBAAmB,OAAO,OAAO,WAAW,IACxD;AACN;;"}

package/dist/esm/components/Accordion/Accordion.js

@@ -23,62 +23,100 @@ const HvAccordion = (props) => {
     labelVariant = "label",
     ...others
   } = useDefaultProps("HvAccordion", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
-  const handleAction = useCallback((event) => {
-    if (!disabled) {
-      onChange?.(event, isOpen);
-      setIsOpen(!isOpen);
-      return true;
-    }
-    return false;
-  }, [disabled, onChange, isOpen, setIsOpen]);
-  const handleClick = useCallback((event) => {
-    handleAction(event);
-    event.preventDefault();
-    event.stopPropagation();
-  }, [handleAction]);
-  const handleKeyDown = useCallback((event) => {
-    let isEventHandled = false;
-    const {
-      key
-    } = event;
-    if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
-      return;
-    }
-    switch (key) {
-      case "Enter":
-      case " ":
-        isEventHandled = handleAction(event);
-        break;
-      default:
-        return;
-    }
-    if (isEventHandled) {
+  const handleAction = useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, isOpen);
+        setIsOpen(!isOpen);
+        return true;
+      }
+      return false;
+    },
+    [disabled, onChange, isOpen, setIsOpen]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      handleAction(event);
       event.preventDefault();
       event.stopPropagation();
-    }
-  }, [handleAction]);
+    },
+    [handleAction]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      let isEventHandled = false;
+      const { key } = event;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+        return;
+      }
+      switch (key) {
+        case "Enter":
+        case " ":
+          isEventHandled = handleAction(event);
+          break;
+        default:
+          return;
+      }
+      if (isEventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [handleAction]
+  );
   const accordionHeaderId = setId(id, "button");
   const accordionContainer = setId(id, "container");
   const accordionHeader = useMemo(() => {
     const color = disabled ? "secondary_60" : void 0;
-    const accordionButton = /* @__PURE__ */ jsxs(HvTypography, { id: accordionHeaderId, component: "div", role: "button", className: cx(classes.label, {
-      [classes.disabled]: disabled
-    }), disabled, tabIndex: 0, onKeyDown: handleKeyDown, onClick: handleClick, variant: labelVariant, "aria-expanded": isOpen, "aria-disabled": disabled, children: [
-      isOpen ? /* @__PURE__ */ jsx(DropUpXS, { color }) : /* @__PURE__ */ jsx(DropDownXS, { color }),
-      label
-    ] });
+    const accordionButton = /* @__PURE__ */ jsxs(
+      HvTypography,
+      {
+        id: accordionHeaderId,
+        component: "div",
+        role: "button",
+        className: cx(classes.label, { [classes.disabled]: disabled }),
+        disabled,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        variant: labelVariant,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(DropUpXS, { color }) : /* @__PURE__ */ jsx(DropDownXS, { color }),
+          label
+        ]
+      }
+    );
     return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsx(HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
-  }, [cx, classes, handleClick, handleKeyDown, label, accordionHeaderId, disabled, headingLevel, isOpen, labelVariant]);
+  }, [
+    cx,
+    classes,
+    handleClick,
+    handleKeyDown,
+    label,
+    accordionHeaderId,
+    disabled,
+    headingLevel,
+    isOpen,
+    labelVariant
+  ]);
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
-    /* @__PURE__ */ jsx("div", { id: accordionContainer, role: "region", "aria-labelledby": accordionHeaderId, className: cx(classes.container, {
-      [classes.hidden]: !isOpen
-    }), hidden: !isOpen, ...containerProps, children })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: accordionContainer,
+        role: "region",
+        "aria-labelledby": accordionHeaderId,
+        className: cx(classes.container, { [classes.hidden]: !isOpen }),
+        hidden: !isOpen,
+        ...containerProps,
+        children
+      }
+    )
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["HvAccordion","props","id","className","classes","classesProp","disabled","label","onChange","children","expanded","headingLevel","defaultExpanded","containerProps","labelVariant","others","useDefaultProps","cx","useClasses","isOpen","setIsOpen","useControlled","Boolean","handleAction","useCallback","event","handleClick","preventDefault","stopPropagation","handleKeyDown","isEventHandled","key","altKey","ctrlKey","metaKey","currentTarget","target","accordionHeaderId","setId","accordionContainer","accordionHeader","useMemo","color","undefined","accordionButton","root","container","hidden"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport {\n  HvTypographyVariants,\n  HvTypography,\n} from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,23 +1,14 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvAccordion", {
+const { staticClasses, useClasses } = createClasses("HvAccordion", {
   root: {
     "& + root": {
       paddingTop: 8
     }
   },
-  hidden: {
-    height: 0,
-    display: "none"
-  },
-  container: {
-    paddingTop: 8,
-    height: "auto"
-  },
+  hidden: { height: 0, display: "none" },
+  container: { paddingTop: 8, height: "auto" },
   label: {
     width: "100%",
     display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","paddingTop","hidden","height","display","container","label","width","justifyContent","alignItems","outline","background","theme","colors","atmo3","outlineStyles","cursor","disabled","color","secondary_60"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJ,YAAY;AAAA,MACVC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,QAAQ;AAAA,IAAEC,QAAQ;AAAA,IAAGC,SAAS;AAAA,EAAO;AAAA,EACrCC,WAAW;AAAA,IAAEJ,YAAY;AAAA,IAAGE,QAAQ;AAAA,EAAO;AAAA,EAC3CG,OAAO;AAAA,IACLC,OAAO;AAAA,IACPH,SAAS;AAAA,IACTI,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZN,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvBO,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACTA,SAAS;AAAA,MACTC,YAAYC,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACTH,YAAYC,MAAMC,OAAOC;AAAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,IAEAC,QAAQ;AAAA,EACV;AAAA,EACAC,UAAU;AAAA,IACRD,QAAQ;AAAA,IACRE,OAAON,MAAMC,OAAOM;AAAAA,IAEpB,WAAW;AAAA,MACTR,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACTA,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"Accordion.styles.js","sources":["../../../../src/components/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ActionBar/ActionBar.js

@@ -9,10 +9,7 @@ const HvActionBar = (props) => {
     children,
     ...others
   } = useDefaultProps("HvActionBar", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":["HvActionBar","props","classes","classesProp","className","children","others","useDefaultProps","cx","useClasses","root"],"mappings":";;;;AAgBaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,eAAeN,KAAK;AAClC,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,WAAWK,GAAGN,QAAQQ,MAAMN,SAAS,GAAG,GAAIE,QAC9CD,SACH,CAAA;AAEJ;"}
+{"version":3,"file":"ActionBar.js","sources":["../../../../src/components/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAgBa,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;"}

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

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvActionBar", {
+const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",
     padding: theme.space.sm,

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.js","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo4","display","alignItems","justifyContent"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,MAAMI,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;"}
+{"version":3,"file":"ActionBar.styles.js","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;"}

package/dist/esm/components/ActionsGeneric/ActionsGeneric.js

@@ -1,11 +1,8 @@
 import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
 import { isValidElement } from "react";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
-import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { setId } from "../../utils/setId.js";
-import { useTheme } from "../../hooks/useTheme.js";
 import { useClasses } from "./ActionsGeneric.styles.js";
 import { staticClasses } from "./ActionsGeneric.styles.js";
 import { HvButton } from "../Button/Button.js";
@@ -22,33 +19,27 @@ const HvActionsGeneric = (props) => {
     maxVisibleActions = Infinity,
     ...others
   } = useDefaultProps("HvActionsGeneric", props);
-  const {
-    classes,
-    cx,
-    css
-  } = useClasses(classesProp);
-  const {
-    colors
-  } = useTheme();
+  const { classes, cx } = useClasses(classesProp);
   if (!Array.isArray(actions))
     return isValidElement(actions) ? actions : null;
   const renderButton = (action, idx) => {
-    const {
-      disabled: actDisabled,
-      id: actId,
-      icon,
-      label,
-      ...other
-    } = action;
+    const { disabled: actDisabled, id: actId, icon, label, ...other } = action;
     const actionId = setId(id, idx, "action", action.id);
-    const renderedIcon = isValidElement(icon) ? icon : icon?.({
-      isDisabled: disabled
-    });
-    return /* @__PURE__ */ jsx(HvButton, { id: actionId, variant: category, className: cx(css({
-      "&:hover": {
-        backgroundColor: hexToRgbA(colors?.base_light || theme.colors.base_light, 0.3)
-      }
-    }), classes.button), disabled: actDisabled ?? disabled, onClick: (event) => actionsCallback?.(event, id || "", action), startIcon: renderedIcon, ...other, children: label }, actionId || idx);
+    const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
+    return /* @__PURE__ */ jsx(
+      HvButton,
+      {
+        id: actionId,
+        variant: category,
+        className: classes.button,
+        disabled: actDisabled ?? disabled,
+        onClick: (event) => actionsCallback?.(event, id || "", action),
+        startIcon: renderedIcon,
+        ...other,
+        children: label
+      },
+      actionId || idx
+    );
   };
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
@@ -57,17 +48,40 @@ const HvActionsGeneric = (props) => {
     const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
-      /* @__PURE__ */ jsx(HvDropDownMenu, { id: setId(id, "menu"), disabled, category, classes: {
-        root: classes.dropDownMenu,
-        icon: classes.dropDownMenuButton,
-        iconSelected: classes.dropDownMenuButtonSelected
-      }, icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }), placement: "left", onClick: (event, action) => actionsCallback?.(event, id || "", action), dataList: actsDropdown, keepOpened: false, disablePortal: false })
+      /* @__PURE__ */ jsx(
+        HvDropDownMenu,
+        {
+          id: setId(id, "menu"),
+          disabled,
+          category,
+          classes: {
+            root: classes.dropDownMenu,
+            icon: classes.dropDownMenuButton,
+            iconSelected: classes.dropDownMenuButtonSelected
+          },
+          icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
+          placement: "left",
+          onClick: (event, action) => actionsCallback?.(event, id || "", action),
+          dataList: actsDropdown,
+          keepOpened: false,
+          disablePortal: false
+        }
+      )
     ] });
   };
   const actionOverflow = actions.length > maxVisibleActions;
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, {
-    [classes.actionContainer]: actionOverflow
-  }, className), ...others, children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        { [classes.actionContainer]: actionOverflow },
+        className
+      ),
+      ...others,
+      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
+    }
+  );
 };
 export {
   HvActionsGeneric,