@hitachivantara/uikit-react-core 5.6.0 → 5.7.0

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  root: CSSInterpolation;\n} = {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n};\n\nconst calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n\nexport const generateDynamicStyles = (quantityOfOptions: number) => {\n  const positionOffset = calculateOffset(quantityOfOptions);\n\n  const generatedStyles: {\n    positionAbsolute: CSSInterpolation;\n    positionFixed: CSSInterpolation;\n  } = {\n    positionAbsolute: {\n      width: \"32px\",\n      position: \"absolute\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n    positionFixed: {\n      width: \"32px\",\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n  };\n\n  return generatedStyles;\n};\n"],"names":["styles","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round","generateDynamicStyles","positionOffset","generatedStyles","positionAbsolute","position","zIndex","zIndices","banner","right","top","positionFixed"],"mappings":";AAGO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AACF;AAEA,MAAMC,kBAAkBA,CAACC,sBAA8B;AACrD,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;AAEaI,MAAAA,wBAAwBA,CAACL,sBAA8B;AAC5DM,QAAAA,iBAAiBP,gBAAgBC,iBAAiB;AAExD,QAAMO,kBAGF;AAAA,IACFC,kBAAkB;AAAA,MAChBnB,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,IACAS,eAAe;AAAA,MACb1B,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,EAAA;AAGKC,SAAAA;AACT;"}
+{"version":3,"file":"ScrollToVertical.styles.js","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvScrollToVerticalClasses } from \"./scrollToVerticalClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvScrollToVerticalClasses, CSSInterpolation>\n> = {\n  root: {\n    display: \"flex\",\n    width: \"32px\",\n    padding: \"0\",\n    margin: 0,\n    listStyleType: \"none\",\n    flexWrap: \"wrap\",\n    flexDirection: \"column\",\n    backdropFilter: `blur(${theme.scrollTo.backgroundColorBlur})`,\n  },\n};\n\nconst calculateOffset = (quantityOfOptions: number) => {\n  const itemSize = 32;\n  const halfOptions = Math.round(quantityOfOptions * 0.5);\n\n  return halfOptions * itemSize;\n};\n\nexport const generateDynamicStyles = (quantityOfOptions: number) => {\n  const positionOffset = calculateOffset(quantityOfOptions);\n\n  const generatedStyles: Partial<\n    Record<keyof HvScrollToVerticalClasses, CSSInterpolation>\n  > = {\n    positionAbsolute: {\n      width: \"32px\",\n      position: \"absolute\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n    positionFixed: {\n      width: \"32px\",\n      position: \"fixed\",\n      zIndex: `calc(${theme.zIndices.banner} - 2)`,\n      right: \"0\",\n      top: `calc(50% - ${positionOffset}px)`,\n    },\n  };\n\n  return generatedStyles;\n};\n"],"names":["styles","root","display","width","padding","margin","listStyleType","flexWrap","flexDirection","backdropFilter","theme","scrollTo","backgroundColorBlur","calculateOffset","quantityOfOptions","itemSize","halfOptions","Math","round","generateDynamicStyles","positionOffset","generatedStyles","positionAbsolute","position","zIndex","zIndices","banner","right","top","positionFixed"],"mappings":";AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,gBAAiB,QAAOC,MAAMC,SAASC;AAAAA,EACzC;AACF;AAEA,MAAMC,kBAAkBA,CAACC,sBAA8B;AACrD,QAAMC,WAAW;AACjB,QAAMC,cAAcC,KAAKC,MAAMJ,oBAAoB,GAAG;AAEtD,SAAOE,cAAcD;AACvB;AAEaI,MAAAA,wBAAwBA,CAACL,sBAA8B;AAC5DM,QAAAA,iBAAiBP,gBAAgBC,iBAAiB;AAExD,QAAMO,kBAEF;AAAA,IACFC,kBAAkB;AAAA,MAChBnB,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,IACAS,eAAe;AAAA,MACb1B,OAAO;AAAA,MACPoB,UAAU;AAAA,MACVC,QAAS,QAAOd,MAAMe,SAASC;AAAAA,MAC/BC,OAAO;AAAA,MACPC,KAAM,cAAaR;AAAAA,IACrB;AAAA,EAAA;AAGKC,SAAAA;AACT;"}

package/dist/esm/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalScrollListItemClasses from \"./verticalScrollListItemClasses\";\n\nexport const styles: {\n  root: CSSInterpolation;\n  button: CSSInterpolation;\n  notSelected: CSSInterpolation;\n  text: CSSInterpolation;\n} = {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  text: {\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n      [`& .${verticalScrollListItemClasses.notSelected}`]: {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n};\n"],"names":["styles","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","verticalScrollListItemClasses","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;AAKO,MAAMA,SAKT;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQM,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,8BAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF;"}
+{"version":3,"file":"VerticalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Vertical/VerticalScrollListItem/VerticalScrollListItem.styles.ts"],"sourcesContent":["import { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalScrollListItemClasses, {\n  HvVerticalScrollListItemClasses,\n} from \"./verticalScrollListItemClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvVerticalScrollListItemClasses, CSSInterpolation>\n> = {\n  root: {\n    padding: \"0\",\n    height: \"32px\",\n    width: \"32px\",\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  notSelected: {\n    height: theme.scrollTo.dotNotSelectedSize,\n    width: theme.scrollTo.dotNotSelectedSize,\n    borderRadius: \"50%\",\n    display: \"inline-block\",\n    backgroundColor: theme.scrollTo.dotNotSelectedColor,\n  },\n  text: {\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.dotRootSize,\n    width: theme.scrollTo.dotRootSize,\n    borderRadius: theme.scrollTo.dotRootRadius,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n\n      [`& .${verticalScrollListItemClasses.notSelected}`]: {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n};\n"],"names":["styles","root","padding","height","width","display","justifyContent","alignItems","notSelected","theme","scrollTo","dotNotSelectedSize","borderRadius","backgroundColor","dotNotSelectedColor","text","dotRootSize","button","dotRootRadius","cursor","dotHoverBackgroundColor","verticalScrollListItemClasses","dotHoverSize","dotHoverColor","outline","outlineStyles"],"mappings":";;;AAOO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,aAAa;AAAA,IACXL,QAAQM,MAAMC,SAASC;AAAAA,IACvBP,OAAOK,MAAMC,SAASC;AAAAA,IACtBC,cAAc;AAAA,IACdP,SAAS;AAAA,IACTQ,iBAAiBJ,MAAMC,SAASI;AAAAA,EAClC;AAAA,EACAC,MAAM;AAAA,IACJZ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBX,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAU,QAAQ;AAAA,IACNZ,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZJ,QAAQM,MAAMC,SAASM;AAAAA,IACvBZ,OAAOK,MAAMC,SAASM;AAAAA,IACtBJ,cAAcH,MAAMC,SAASQ;AAAAA,IAC7BC,QAAQ;AAAA,IACR,WAAW;AAAA,MACTN,iBAAiBJ,MAAMC,SAASU;AAAAA,MAEhC,CAAE,MAAKC,8BAA8Bb,aAAa,GAAG;AAAA,QACnDL,QAAQM,MAAMC,SAASY;AAAAA,QACvBlB,OAAOK,MAAMC,SAASY;AAAAA,QACtBT,iBAAiBJ,MAAMC,SAASa;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AACF;"}

package/dist/esm/index.js

@@ -244,8 +244,10 @@ import { default as default126 } from "./components/TimeAgo/timeAgoClasses.js";
 import { HvTimeAgo } from "./components/TimeAgo/TimeAgo.js";
 import { default as default127 } from "./components/QueryBuilder/queryBuilderClasses.js";
 import { HvQueryBuilder } from "./components/QueryBuilder/QueryBuilder.js";
-import { default as default128 } from "./hooks/useUniqueId.js";
-import { default as default129 } from "./hooks/useIsMounted.js";
+import { default as default128 } from "./components/ColorPicker/colorPickerClasses.js";
+import { HvColorPicker } from "./components/ColorPicker/ColorPicker.js";
+import { default as default129 } from "./hooks/useUniqueId.js";
+import { default as default130 } from "./hooks/useIsMounted.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
 import { useImageLoaded } from "./hooks/useImageLoaded.js";
@@ -257,11 +259,11 @@ import { useEnhancedEffect } from "./hooks/useEnhancedEffect.js";
 import { HvProvider } from "./providers/Provider.js";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import { HvThemeProvider } from "./providers/ThemeProvider.js";
-import { default as default130 } from "./utils/iconVariant.js";
-import { default as default131 } from "./utils/hexToRgbA.js";
-import { default as default132 } from "./utils/browser.js";
-import { default as default133 } from "./utils/multiSelectionEventHandler.js";
-import { default as default134 } from "./utils/getComponentName.js";
+import { default as default131 } from "./utils/iconVariant.js";
+import { default as default132 } from "./utils/hexToRgbA.js";
+import { default as default133 } from "./utils/browser.js";
+import { default as default134 } from "./utils/multiSelectionEventHandler.js";
+import { default as default135 } from "./utils/getComponentName.js";
 import { outlineStyles } from "./utils/focusUtils.js";
 import { keyboardCodes } from "./utils/keyboardUtils/keyboardCodes.js";
 import { getKeyCodeFromEvent, isKeycode, isKeypress } from "./utils/keyboardUtils/keyCheck.js";
@@ -272,8 +274,8 @@ import { getClasses } from "./utils/classes.js";
 import { getFirstAndLastFocus, getFocusableList, getPrevNextFocus } from "./utils/focusableElementFinder.js";
 import { wrapperTooltip } from "./utils/wrapperTooltip.js";
 import { useSavedState } from "./utils/useSavedState.js";
-import { default as default135 } from "./hocs/withTooltip.js";
-import { default as default136 } from "./hocs/withId.js";
+import { default as default136 } from "./hocs/withTooltip.js";
+import { default as default137 } from "./hocs/withId.js";
 export {
   CellWithCheckBox,
   CellWithExpandButton,
@@ -305,6 +307,7 @@ export {
   HvCharCounter,
   HvCheckBox,
   HvCheckBoxGroup,
+  HvColorPicker,
   HvContainer,
   HvControls,
   default101 as HvDateColumnCell,
@@ -438,6 +441,7 @@ export {
   default11 as charCounterClasses,
   default59 as checkBoxClasses,
   default65 as checkBoxGroupClasses,
+  default128 as colorPickerClasses,
   default30 as containerClasses,
   default106 as controlsClasses,
   createTheme,
@@ -465,7 +469,7 @@ export {
   default36 as footerClasses,
   default13 as formElementClasses,
   getClasses,
-  default134 as getComponentName,
+  default135 as getComponentName,
   getFirstAndLastFocus,
   getFocusableList,
   getHeaderFooterPropsHook,
@@ -483,7 +487,7 @@ export {
   default40 as headerBrandClasses,
   default38 as headerClasses,
   default41 as headerNavigationClasses,
-  default131 as hexToRgbA,
+  default132 as hexToRgbA,
   default124 as horizontalScrollListItemClasses,
   hvDateColumn,
   hvDropdownColumn,
@@ -496,12 +500,12 @@ export {
   hvSwitchColumn,
   hvTagColumn,
   hvTextColumn,
-  default130 as iconVariant,
+  default131 as iconVariant,
   increaseSize,
   default15 as infoMessageClasses,
   default125 as inlineEditorClasses,
   default60 as inputClasses,
-  default132 as isBrowser,
+  default133 as isBrowser,
   isInvalid,
   isKeycode,
   isKeypress,
@@ -517,7 +521,7 @@ export {
   default44 as loadingClasses,
   default105 as loginClasses,
   default45 as multiButtonClasses,
-  default133 as multiSelectionEventHandler,
+  default134 as multiSelectionEventHandler,
   normalizeProgressBar,
   outlineStyles,
   default53 as overflowTooltipClasses,
@@ -583,13 +587,13 @@ export {
   default92 as useHvTableStyles,
   useImageLoaded,
   useInstance,
-  default129 as useIsMounted,
+  default130 as useIsMounted,
   useLabels,
   useSavedState,
   useScrollTo,
   useSelectionPath,
   useTheme,
-  default128 as useUniqueId,
+  default129 as useUniqueId,
   useWidth,
   default111 as verticalNavigationClasses,
   default112 as verticalNavigationHeaderClasses,
@@ -597,8 +601,8 @@ export {
   default115 as verticalNavigationTreeClasses,
   default122 as verticalScrollListItemClasses,
   default16 as warningTextClasses,
-  default136 as withId,
-  default135 as withTooltip,
+  default137 as withId,
+  default136 as withTooltip,
   wrapperTooltip
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -245,9 +245,9 @@ export declare const badgeClasses: {
 
 export declare const bannerClasses: {
     root: "HvBanner-root";
+    rootClosed: "HvBanner-rootClosed";
     anchorOriginTopCenter: "HvBanner-anchorOriginTopCenter";
     anchorOriginBottomCenter: "HvBanner-anchorOriginBottomCenter";
-    rootClosed: "HvBanner-rootClosed";
 };
 
 export declare const bannerContentClasses: {
@@ -415,8 +415,8 @@ export declare const cardHeaderClasses: {
     content: "HvCard-Header-content";
     action: "HvCard-Header-action";
     root: "HvCard-Header-root";
-    subheader: "HvCard-Header-subheader";
     titleShort: "HvCard-Header-titleShort";
+    subheader: "HvCard-Header-subheader";
 };
 
 export declare const cardMediaClasses: {
@@ -466,6 +466,22 @@ export declare const checkBoxGroupClasses: {
     selectAll: "HvCheckBoxGroup-selectAll";
 };
 
+export declare const colorPickerClasses: {
+    label: "HvColorPicker-label";
+    colorPicker: "HvColorPicker-colorPicker";
+    root: "HvColorPicker-root";
+    panel: "HvColorPicker-panel";
+    description: "HvColorPicker-description";
+    labelContainer: "HvColorPicker-labelContainer";
+    headerColorIcon: "HvColorPicker-headerColorIcon";
+    headerColorValue: "HvColorPicker-headerColorValue";
+    colorPickerIcon: "HvColorPicker-colorPickerIcon";
+    dropdownRootIconOnly: "HvColorPicker-dropdownRootIconOnly";
+    headerColorIconOnly: "HvColorPicker-headerColorIconOnly";
+    recommendedColorsRoot: "HvColorPicker-recommendedColorsRoot";
+    pickerFields: "HvColorPicker-pickerFields";
+};
+
 export declare const containerClasses: {
     fixed: "HvContainer-fixed";
     root: "HvContainer-root";
@@ -544,9 +560,9 @@ export declare const dialogActionClasses: {
 export declare const dialogClasses: {
     background: "HvDialog-background";
     root: "HvDialog-root";
-    paper: "HvDialog-paper";
-    fullscreen: "HvDialog-fullscreen";
     closeButton: "HvDialog-closeButton";
+    fullscreen: "HvDialog-fullscreen";
+    paper: "HvDialog-paper";
 };
 
 export declare const dialogContentClasses: {
@@ -587,9 +603,9 @@ export declare const dropdownClasses: {
     selectionDisabled: "HvDropdown-selectionDisabled";
     description: "HvDropdown-description";
     labelContainer: "HvDropdown-labelContainer";
+    dropdownHeader: "HvDropdown-dropdownHeader";
     dropdownHeaderInvalid: "HvDropdown-dropdownHeaderInvalid";
     dropdownHeaderOpen: "HvDropdown-dropdownHeaderOpen";
-    dropdownHeader: "HvDropdown-dropdownHeader";
     dropdownListContainer: "HvDropdown-dropdownListContainer";
     rootList: "HvDropdown-rootList";
 };
@@ -2372,6 +2388,96 @@ export declare interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, "clas
 
 export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;
 
+/**
+ * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.
+ * It receives a color string in HEX format and outputs an HEX formatted color.
+ */
+export declare const HvColorPicker: ({ id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, className, classes, value, onChange, defaultValue, expanded, defaultExpanded, recommendedColorsPosition, recommendedColors, showLabels, labels: labelsProp, dropdownIcon, placeholder, iconOnly, showSavedColors, showCustomColors, savedColorsValue, defaultSavedColorsValue, onSavedColorAdded, onSavedColorRemoved, deleteSavedColorButtonArialLabel, }: HvColorPickerProps) => JSX_2.Element;
+
+export declare interface HvColorPickerClasses {
+    root?: string;
+    labelContainer?: string;
+    label?: string;
+    description?: string;
+    headerColorIcon?: string;
+    headerColorValue?: string;
+    panel?: string;
+    colorPicker?: string;
+    colorPickerIcon?: string;
+    dropdownRootIconOnly?: string;
+    headerColorIconOnly?: string;
+    recommendedColorsRoot?: string;
+    pickerFields?: string;
+}
+
+export declare interface HvColorPickerProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Class names to be applied. */
+    className?: string;
+    /** Id to be applied to the form element root node. */
+    id?: string;
+    /** The form element name. */
+    name?: string;
+    /**
+     * The label of the form element.
+     *
+     * The form element must be labeled for accessibility reasons.
+     * If not provided, an aria-label or aria-labelledby must be provided instead.
+     */
+    label?: React.ReactNode;
+    /** Provide additional descriptive text for the form element. */
+    description?: React.ReactNode;
+    /** Indicates that user input is required on the form element. */
+    required?: boolean;
+    /** The value color, in HEX format. */
+    value?: string;
+    /** The default value color, in HEX format. */
+    defaultValue?: string;
+    /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */
+    disabled?: boolean;
+    /** If `true` the dropdown starts opened if `false` it starts closed. */
+    expanded?: boolean;
+    /** When uncontrolled, defines the initial expanded state. */
+    defaultExpanded?: boolean;
+    /** A function to be executed whenever the color changes. */
+    onChange?: (color: string) => void;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvColorPickerClasses;
+    /** The placeholder value when nothing is selected. */
+    placeholder?: string;
+    /** Recommended colors. The colors are HEX values. */
+    recommendedColors?: string[];
+    /** Recommended colors position. */
+    recommendedColorsPosition?: "top" | "bottom";
+    /** If `true`, the labels are shown. If `false`, they are not shown. */
+    showLabels?: boolean;
+    /** An object containing all the labels. */
+    labels?: {
+        recommendedColorsLabel?: string;
+        customColorsLabel?: string;
+    };
+    /** Icon type for the input's end adornment. */
+    dropdownIcon?: "arrow" | "colorPicker";
+    /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */
+    iconOnly?: boolean;
+    /** If `true`, the saved colors area is shown. If `false`, it is not shown. */
+    showSavedColors?: boolean;
+    /** If `true`, the custom colors area is shown. If `false`, it is not shown. */
+    showCustomColors?: boolean;
+    /** The saved colors. The colors are HEX values. */
+    savedColorsValue?: string[];
+    /** The default saved colors. The colors are HEX values. */
+    defaultSavedColorsValue?: string[];
+    /** Callback fired when a new saved color is added. */
+    onSavedColorAdded?: (color?: string) => void;
+    /** Callback fired when a new saved color is removed. */
+    onSavedColorRemoved?: (color?: string) => void;
+    /** Aria label to apply to delete saved color button. */
+    deleteSavedColorButtonArialLabel?: string;
+}
+
 declare type HvColumnGroup<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions<D, H> & HvColumnGroupInterface<D, H> & ({
     Header: H;
 } | ({
@@ -3500,6 +3606,7 @@ declare interface HvFilterGroupContentClasses {
     rightSidePanel?: string;
     actionBar?: string;
     space?: string;
+    applyButton?: string;
 }
 
 declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "onChange"> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -30,9 +30,9 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.10.5",
-    "@hitachivantara/uikit-react-icons": "^5.1.4",
-    "@hitachivantara/uikit-react-shared": "^5.0.8",
-    "@hitachivantara/uikit-styles": "^5.5.0",
+    "@hitachivantara/uikit-react-icons": "^5.1.5",
+    "@hitachivantara/uikit-react-shared": "^5.0.9",
+    "@hitachivantara/uikit-styles": "^5.6.0",
     "@popperjs/core": "^2.11.6",
     "@types/react-table": "^7.7.14",
     "attr-accept": "^2.2.2",
@@ -44,6 +44,7 @@
     "notistack": "^2.0.8",
     "rc-slider": "^10.1.1",
     "rc-tooltip": "^6.0.1",
+    "react-color": "^2.19.3",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^8.0.4",
     "react-table": "^7.8.0",
@@ -56,7 +57,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "e0cc7fc6f24f7579f5bfb56435315925e30ae725",
+  "gitHead": "70863685a81d8e910d8b1c36c044e978e7d9a6bc",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {