npm - @hitachivantara/uikit-react-core - Versions diffs - 5.28.1 → 5.30.0 - Mend

@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (446) hide show

package/dist/esm/components/Card/Header/Header.js CHANGED Viewed

@@ -1,36 +1,28 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import MuiCardHeader from "@mui/material/CardHeader";
-import { useTheme } from "../../../hooks/useTheme.js";
 import { useClasses } from "./Header.styles.js";
 import { staticClasses } from "./Header.styles.js";
-const HvCardHeader = ({
-  classes: classesProp,
-  className,
-  title,
-  subheader,
-  icon,
-  onClick,
-  ...others
-}) => {
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+const HvCardHeader = (props) => {
   const {
-    activeTheme
-  } = useTheme();
+    classes: classesProp,
+    className,
+    title,
+    subheader,
+    icon,
+    onClick,
+    ...others
+  } = useDefaultProps("HvCardHeader", props);
   const {
     classes,
-    css,
     cx
   } = useClasses(classesProp);
   return /* @__PURE__ */ jsx(MuiCardHeader, { title, subheader, action: icon, onClick, className: cx(classes.root, className), classes: {
-    title: cx(css({
-      ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-    }), {
+    title: cx({
       [classes.titleShort]: icon,
       [classes.title]: !icon
     }),
-    subheader: cx(css({
-      ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
-      color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
-    }), classes.subheader),
+    subheader: classes.subheader,
     action: classes.action,
     content: classes.content
   }, ...others });

package/dist/esm/components/Card/Header/Header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ~~useTheme~~ } from \"@core/~~hooks~~/~~useTheme~~\";\nimport { ~~ExtractNames~~ } from \"@core/~~utils/classes~~\";\n\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = ({\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n~~}: HvCardHeaderProps) => {\n~~ ~~const { activeTheme~~ } = ~~useTheme~~();\n const { classes, ~~css,~~ cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx(~~\n css(~~{\n ~~...activeTheme?.typography[activeTheme?.card.titleVariant],\n~~ ~~}),\n {\n~~ [classes.titleShort]: icon,\n [classes.title]: !icon,\n }\n ),\n subheader: ~~cx(\n css({\n ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n color: activeTheme?.card.subheaderColor,\n }),\n~~ classes.subheader~~\n )~~,\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","classes","classesProp","className","title","subheader","icon","onClick","others","~~activeTheme~~","~~useTheme","css","~~cx","useClasses","root","~~typography","card","titleVariant","~~titleShort","~~subheaderVariant","color","subheaderColor","~~action","content"],"mappings":";;;;;~~AA6BO~~,~~MAAMA~~,eAAeA,~~CAAC~~;AAAA,~~EAC3BC~~,SAASC;AAAAA,~~EACTC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACA~~,GAAGC;~~AACc~~,~~MAAM;AACjB~~,~~QAAA;AAAA~~,~~IAAEC;AAAAA~~,~~MAAgBC~~,~~SAAS~~;~~AAC3B~~,QAAA;AAAA,~~IAAET~~;AAAAA,~~IAASU~~;AAAAA,~~IAAKC;AAAAA,~~EAAAA,IAAOC,~~WAAWX~~,WAAW;~~AAEnD~~,SACG,oBAAA,eAAA,EACC,OACA,WACA,QAAQI,MACR,SACA,~~WAAWM~~,~~GAAGX~~,~~QAAQa~~,~~MAAMX~~,SAAS,GACrC,SAAS;AAAA,IACPC,~~OAAOQ~~,~~GACLD,IAAI~~;AAAA,~~MACF~~,~~GAAGF~~,~~2CAAaM~~,~~WAAWN,2CAAaO,KAAKC;AAAAA,IAAY,CAC1D,GACD;AAAA,MACE,CAAChB,QAAQiB,~~UAAU,~~GAAGZ~~;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,~~CAEtB~~;AAAA,~~IACAD~~,~~WAAWO~~,~~GACTD,IAAI~~;~~AAAA,MACF,GAAGF,2CAAaM,WAAWN,2CAAaO,KAAKG;~~AAAAA,~~MAC7CC~~,~~OAAOX~~,~~2CAAaO,KAAKK~~;AAAAA,~~IAAAA,CAC1B,GACDpB,QAAQI,SACV;AAAA,IACAiB,QAAQrB,QAAQqB;AAAAA,~~IAChBC,~~SAAStB~~,~~QAAQsB~~;AAAAA,EAAAA,~~GAEff~~,GAAAA,OACJ,CAAA;AAEN;"}
1	+ {"version":3,"file":"Header.js","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Header.styles\";\n\nexport { staticClasses as cardHeaderClasses };\n\nexport type HvCardHeaderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCardHeaderProps\n extends Omit<MuiCardHeaderProps, \"classes\">,\n HvBaseProps<HTMLDivElement, \"title\"> {\n /** The renderable content inside the title slot of the header. /\n title: React.ReactNode;\n /* The renderable content inside the subheader slot of the header. /\n subheader?: React.ReactNode;\n /* The renderable content inside the icon slot of the header. /\n icon?: React.ReactNode;\n /* The function that will be executed when this section is clicked. /\n onClick?: React.MouseEventHandler<HTMLDivElement> \| undefined;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvCardHeaderClasses;\n}\n\nexport const HvCardHeader = (props: HvCardHeaderProps) => {\n const {\n classes: classesProp,\n className,\n title,\n subheader,\n icon,\n onClick,\n ...others\n } = useDefaultProps(\"HvCardHeader\", props);\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <MuiCardHeader\n title={title}\n subheader={subheader}\n action={icon}\n onClick={onClick}\n className={cx(classes.root, className)}\n classes={{\n title: cx({\n [classes.titleShort]: icon,\n [classes.title]: !icon,\n }),\n subheader: classes.subheader,\n action: classes.action,\n content: classes.content,\n }}\n {...others}\n />\n );\n};\n"],"names":["HvCardHeader","props","classes","classesProp","className","title","subheader","icon","onClick","others","useDefaultProps","cx","useClasses","root","titleShort","action","content"],"mappings":";;;;;AA6BaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAgBT,KAAK;AACnC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAE9C,SACG,oBAAA,eAAA,EACC,OACA,WACA,QAAQI,MACR,SACA,WAAWI,GAAGT,QAAQW,MAAMT,SAAS,GACrC,SAAS;AAAA,IACPC,OAAOM,GAAG;AAAA,MACR,CAACT,QAAQY,UAAU,GAAGP;AAAAA,MACtB,CAACL,QAAQG,KAAK,GAAG,CAACE;AAAAA,IAAAA,CACnB;AAAA,IACDD,WAAWJ,QAAQI;AAAAA,IACnBS,QAAQb,QAAQa;AAAAA,IAChBC,SAASd,QAAQc;AAAAA,EAAAA,GAEfP,GAAAA,OACJ,CAAA;AAEN;"}

package/dist/esm/components/Card/Header/Header.styles.js CHANGED Viewed

@@ -13,9 +13,11 @@ const {
     marginRight: "30px"
   },
   title: {
+    ...theme.typography.label,
     fontFamily: theme.fontFamily.body
   },
   subheader: {
+    ...theme.typography.caption1,
     fontFamily: theme.fontFamily.body
   },
   content: {},

package/dist/esm/components/Card/Header/Header.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\n root: { padding: `15px ${theme.space.sm}`, position: \"relative\" },\n titleShort: {\n fontFamily: theme.fontFamily.body,\n marginRight: \"30px\",\n },\n title: {\n fontFamily: theme.fontFamily.body,\n },\n subheader: {\n fontFamily: theme.fontFamily.body,\n },\n content: {},\n action: {\n position: \"absolute\",\n right: 20,\n marginTop: 0,\n marginRight: \"0px\",\n paddingLeft: theme.space.xs,\n top: \"15px\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","content","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAU,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IAAGC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,~~IACLH~~,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,~~EACAG~~,WAAW;AAAA,~~IACTJ~~,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,~~EACAI~~,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,~~IACNR~~,UAAU;AAAA,~~IACVS~~,OAAO;AAAA,IACPC,WAAW;AAAA,~~IACXN~~,aAAa;AAAA,~~IACbO~~,~~aAAad~~,MAAMC,~~MAAMc~~;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;"}
1	+ {"version":3,"file":"Header.styles.js","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCardHeader\", {\n root: { padding: `15px ${theme.space.sm}`, position: \"relative\" },\n titleShort: {\n fontFamily: theme.fontFamily.body,\n marginRight: \"30px\",\n },\n title: {\n ...theme.typography.label,\n fontFamily: theme.fontFamily.body,\n },\n subheader: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n },\n content: {},\n action: {\n position: \"absolute\",\n right: 20,\n marginTop: 0,\n marginRight: \"0px\",\n paddingLeft: theme.space.xs,\n top: \"15px\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","typography","label","subheader","caption1","content","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IAAEC,SAAU,QAAOC,MAAMC,MAAMC,EAAG;AAAA,IAAGC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACL,GAAGR,MAAMS,WAAWC;AAAAA,IACpBL,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAK,WAAW;AAAA,IACT,GAAGX,MAAMS,WAAWG;AAAAA,IACpBP,YAAYL,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAO,SAAS,CAAC;AAAA,EACVC,QAAQ;AAAA,IACNX,UAAU;AAAA,IACVY,OAAO;AAAA,IACPC,WAAW;AAAA,IACXT,aAAa;AAAA,IACbU,aAAajB,MAAMC,MAAMiB;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF,CAAC;"}

package/dist/esm/components/Carousel/Carousel.styles.js CHANGED Viewed

@@ -27,7 +27,7 @@ const {
       top: 0
     },
     "& $controls": {
-      display: theme.carousel.xsControlsDisplay
+      display: "flex"
     }
   },
   fullscreen: {
@@ -58,9 +58,9 @@ const {
     alignItems: "center",
     position: "relative",
     height: 32,
-    justifyContent: theme.carousel.controlsJustifyContent,
-    backgroundColor: theme.carousel.controlsBackgroundColor,
-    border: theme.carousel.controlsBorder,
+    justifyContent: "center",
+    backgroundColor: theme.colors.atmo2,
+    border: `1px solid ${theme.colors.atmo4}`,
     gap: theme.space.xs,
     "&:has($dots)": {
       justifyContent: "center"
@@ -85,7 +85,7 @@ const {
     top: theme.space.xs,
     right: theme.space.md,
     zIndex: 1,
-    display: theme.carousel.counterContainerDisplay
+    display: "none"
   },
   counter: {
     color: theme.colors.base_light,
@@ -155,12 +155,12 @@ const {
       textAlign: "center",
       aspectRatio: "16/9",
       opacity: "50%",
-      borderRadius: theme.carousel.thumbnailBorderRadius
+      borderRadius: theme.radii.round
     }
   },
   thumbnailSelected: {
     "& img": {
-      border: theme.carousel.thumbnailSelectedBorder,
+      border: "none",
       opacity: "100%"
     }
   }

package/dist/esm/components/Carousel/Carousel.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n /** Styles applied to the component root class. */\n root: {\n display: \"flex\",\n alignItems: \"stretch\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n margin: 0,\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n },\n xs: {\n \"&:not(._)\": {\n padding: 0,\n },\n // put dots on top of Slide\n \"& $dots\": {\n position: \"relative\",\n top: \"-40px\",\n },\n \"& $actions\": {\n top: 0,\n },\n \"& $controls\": {\n display: ~~theme.carousel.xsControlsDisplay~~,\n },\n },\n fullscreen: {\n width: \"100vw\",\n height: \"100vh\",\n position: \"fixed\",\n inset: 0,\n zIndex: theme.zIndices.modal,\n \"&:not(._)\": {\n padding: theme.spacing(\"xs\", \"xl\"),\n },\n },\n title: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n marginBottom: theme.space.xs,\n },\n actions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n right: 0,\n\n position: \"relative\",\n },\n closeButton: {},\n\n mainContainer: {},\n\n controls: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n height: 32,\n justifyContent: ~~theme.carousel.controlsJustifyContent~~,\n backgroundColor: theme.~~carousel~~.~~controlsBackgroundColor~~,\n border: theme.~~carousel~~.~~controlsBorder,\~~n gap: theme.space.xs,\n \"&:has($dots)\": {\n justifyContent: \"center\",\n },\n },\n pageCounter: {},\n\n main: {\n padding: 0,\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n \"&:hover $slideControls\": {\n opacity: 1,\n },\n },\n mainXs: {},\n mainFullscreen: {\n maxHeight: \"80vh\",\n },\n counterContainer: {\n position: \"absolute\",\n top: theme.space.xs,\n right: theme.space.md,\n zIndex: 1,\n display: ~~theme.carousel.counterContainerDisplay~~,\n },\n counter: {\n color: theme.colors.base_light,\n backgroundColor: theme.colors.base_dark,\n padding: theme.spacing(0, \"sm\"),\n },\n slideControls: {\n position: \"absolute\",\n left: 0,\n right: 0,\n top: `calc(50% - (32px / 2))`,\n padding: theme.spacing(0, \"sm\"),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n opacity: 0,\n \"& button\": {\n zIndex: 1,\n },\n \"&:focus-within\": {\n opacity: 1,\n },\n },\n slidesViewport: {\n overflow: \"hidden\",\n },\n slidesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"100%\",\n },\n\n dots: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: theme.space.xs,\n height: theme.space.md,\n },\n dotsXs: {},\n dot: {\n width: 5,\n height: 5,\n margin: theme.space.xs,\n borderRadius: \"50%\",\n backgroundColor: theme.colors.atmo4,\n },\n dotSelected: {\n width: 10,\n height: 10,\n backgroundColor: theme.colors.secondary_80,\n },\n\n panel: {\n display: \"flex\",\n width: \"100%\",\n overflowX: \"auto\", // \"hidden\",\n overflowY: \"hidden\",\n padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n },\n thumbnail: {\n height: \"unset\",\n padding: 0,\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n textAlign: \"center\",\n aspectRatio: \"16/9\",\n opacity: \"50%\",\n borderRadius: theme.~~carousel~~.~~thumbnailBorderRadius~~,\n },\n },\n thumbnailSelected: {\n \"& img\": {\n border: ~~theme.carousel.thumbnailSelectedBorder~~,\n opacity: \"100%\",\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","~~carousel","xsControlsDisplay","~~fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","~~controlsJustifyContent~~","~~controlsBackgroundColor","~~border","~~controlsBorder~~","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","~~counterContainerDisplay","~~counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","~~atmo4","~~dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","~~thumbnailBorderRadius~~","~~thumbnailSelected~~","~~thumbnailSelectedBorder~~"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,QAAQ;AAAA,IACRC,YAAYJ,MAAMK,QAAQ,CAAC;AAAA,IAC3BC,eAAeN,MAAMK,QAAQ,CAAC;AAAA,EAChC;AAAA,EACAE,IAAI;AAAA,IACF,aAAa;AAAA,MACXC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,WAAW;AAAA,MACTC,UAAU;AAAA,MACVC,KAAK;AAAA,IACP;AAAA,IACA,cAAc;AAAA,MACZA,KAAK;AAAA,IACP;AAAA,IACA,eAAe;AAAA,MACbd,~~SAASI,MAAMW,SAASC~~;~~AAAAA~~,~~IAC1B~~;AAAA,EACF;AAAA,~~EACAC~~,YAAY;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRN~~,UAAU;AAAA,~~IACVO~~,OAAO;AAAA,IACPC,~~QAAQjB~~,~~MAAMkB~~,SAASC;AAAAA,IACvB,aAAa;AAAA,~~MACXX~~,SAASR,MAAMK,QAAQ,MAAM,IAAI;AAAA,IACnC;AAAA,EACF;AAAA,~~EACAe~~,OAAO;AAAA,~~IACLxB~~,SAAS;AAAA,~~IACTyB~~,gBAAgB;AAAA,IAChBC,~~cAActB~~,~~MAAMuB~~,~~MAAMhB~~;AAAAA,EAC5B;AAAA,~~EACAiB~~,SAAS;AAAA,~~IACP5B~~,SAAS;AAAA,~~IACTyB~~,gBAAgB;AAAA,IAChBI,OAAO;AAAA,~~IAEPhB~~,UAAU;AAAA,EACZ;AAAA,~~EACAiB~~,aAAa,CAAC;AAAA,EAEdC,eAAe,CAAC;AAAA,EAEhBC,UAAU;AAAA,~~IACRhC~~,SAAS;AAAA,IACTC,YAAY;AAAA,IACZY,UAAU;AAAA,~~IACVM~~,QAAQ;AAAA,IACRM,~~gBAAgBrB,MAAMW,SAASkB~~;~~AAAAA~~,~~IAC/B9B~~,iBAAiBC,~~MAAMW~~,~~SAASmB~~;AAAAA,~~IAChCC~~,~~QAAQ/B~~,~~MAAMW~~,~~SAASqB~~;~~AAAAA~~,~~IACvBC~~,~~KAAKjC~~,~~MAAMuB~~,~~MAAMhB~~;AAAAA,IACjB,gBAAgB;AAAA,~~MACdc~~,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,~~EACAa~~,aAAa,CAAC;AAAA,EAEdC,MAAM;AAAA,~~IACJ3B~~,SAAS;AAAA,IACTZ,SAAS;AAAA,IACTE,eAAe;AAAA,IACfW,UAAU;AAAA,IACV,0BAA0B;AAAA,~~MACxB2B~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACAC,QAAQ,CAAC;AAAA,EACTC,gBAAgB;AAAA,IACdC,WAAW;AAAA,EACb;AAAA,EACAC,kBAAkB;AAAA,~~IAChB/B~~,UAAU;AAAA,IACVC,KAAKV,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACjBkB~~,~~OAAOzB~~,~~MAAMuB~~,~~MAAMkB~~;AAAAA,~~IACnBxB~~,QAAQ;AAAA,~~IACRrB~~,~~SAASI,MAAMW,~~SAAS+B;~~AAAAA~~,~~EAC1B~~;AAAA,~~EACAC~~,SAAS;AAAA,IACPC,~~OAAO5C~~,MAAMC,~~OAAO4C~~;AAAAA,~~IACpB9C~~,iBAAiBC,MAAMC,~~OAAO6C~~;AAAAA,~~IAC9BtC~~,SAASR,MAAMK,QAAQ,GAAG,IAAI;AAAA,EAChC;AAAA,~~EACA0C~~,eAAe;AAAA,~~IACbtC~~,UAAU;AAAA,~~IACVuC~~,MAAM;AAAA,~~IACNvB~~,OAAO;AAAA,~~IACPf~~,KAAM;AAAA,IACNF,SAASR,MAAMK,QAAQ,GAAG,IAAI;AAAA,IAC9BT,SAAS;AAAA,IACTE,eAAe;AAAA,IACfD,YAAY;AAAA,~~IACZwB~~,gBAAgB;AAAA,~~IAChBe~~,SAAS;AAAA,IACT,YAAY;AAAA,~~MACVnB~~,QAAQ;AAAA,IACV;AAAA,IACA,kBAAkB;AAAA,~~MAChBmB~~,SAAS;AAAA,IACX;AAAA,EACF;AAAA,~~EACAa~~,gBAAgB;AAAA,IACdC,UAAU;AAAA,EACZ;AAAA,EACAC,iBAAiB;AAAA,~~IACfvD~~,SAAS;AAAA,IACTE,eAAe;AAAA,~~IACfiB~~,QAAQ;AAAA,EACV;AAAA,~~EAEAqC~~,MAAM;AAAA,~~IACJxD~~,SAAS;AAAA,IACTC,YAAY;AAAA,~~IACZwB~~,gBAAgB;AAAA,~~IAChBY~~,~~KAAKjC~~,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACjBQ~~,~~QAAQf~~,~~MAAMuB~~,~~MAAMkB~~;AAAAA,EACtB;AAAA,~~EACAY~~,QAAQ,CAAC;AAAA,EACTC,KAAK;AAAA,~~IACHxC~~,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRZ~~,QAAQH,~~MAAMuB~~,~~MAAMhB~~;AAAAA,~~IACpBgD~~,cAAc;AAAA,~~IACdxD~~,iBAAiBC,MAAMC,~~OAAOuD~~;AAAAA,EAChC;AAAA,~~EACAC~~,aAAa;AAAA,~~IACX3C~~,OAAO;AAAA,IACPC,QAAQ;AAAA,~~IACRhB~~,iBAAiBC,MAAMC,~~OAAOyD~~;AAAAA,EAChC;AAAA,EAEAC,OAAO;AAAA,~~IACL/D~~,SAAS;AAAA,~~IACTkB~~,OAAO;AAAA,~~IACP8C~~,WAAW;AAAA;AAAA,IACXC,WAAW;AAAA,~~IACXrD~~,SAASR,MAAMK,QAAQ,MAAM,OAAO,KAAK;AAAA,EAC3C;AAAA,~~EACAyD~~,WAAW;AAAA,~~IACT/C~~,QAAQ;AAAA,~~IACRP~~,SAAS;AAAA,IACT,SAAS;AAAA,~~MACPM~~,OAAO;AAAA,MACPC,QAAQ;AAAA,~~MACRgD~~,WAAW;AAAA,MACXC,aAAa;AAAA,~~MACb5B~~,SAAS;AAAA,~~MACTmB~~,~~cAAcvD~~,~~MAAMW~~,~~SAASsD~~;AAAAA,~~IAC/B~~;AAAA,EACF;AAAA,EACAC,mBAAmB;AAAA,IACjB,SAAS;AAAA,~~MACPnC~~,QAAQ~~/B,MAAMW,SAASwD~~;~~AAAAA~~,~~MACvB/B~~,SAAS;AAAA,IACX;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n /** Styles applied to the component root class. */\n root: {\n display: \"flex\",\n alignItems: \"stretch\",\n flexDirection: \"column\",\n backgroundColor: theme.colors.atmo1,\n margin: 0,\n paddingTop: theme.spacing(2),\n paddingBottom: theme.spacing(2),\n },\n xs: {\n \"&:not(._)\": {\n padding: 0,\n },\n // put dots on top of Slide\n \"& $dots\": {\n position: \"relative\",\n top: \"-40px\",\n },\n \"& $actions\": {\n top: 0,\n },\n \"& $controls\": {\n display: \"flex\",\n },\n },\n fullscreen: {\n width: \"100vw\",\n height: \"100vh\",\n position: \"fixed\",\n inset: 0,\n zIndex: theme.zIndices.modal,\n \"&:not(._)\": {\n padding: theme.spacing(\"xs\", \"xl\"),\n },\n },\n title: {\n display: \"flex\",\n justifyContent: \"flex-start\",\n marginBottom: theme.space.xs,\n },\n actions: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n right: 0,\n\n position: \"relative\",\n },\n closeButton: {},\n\n mainContainer: {},\n\n controls: {\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n height: 32,\n justifyContent: \"center\",\n backgroundColor: theme.colors.atmo2,\n border: `1px solid ${theme.colors.atmo4}`,\n gap: theme.space.xs,\n \"&:has($dots)\": {\n justifyContent: \"center\",\n },\n },\n pageCounter: {},\n\n main: {\n padding: 0,\n display: \"flex\",\n flexDirection: \"column\",\n position: \"relative\",\n \"&:hover $slideControls\": {\n opacity: 1,\n },\n },\n mainXs: {},\n mainFullscreen: {\n maxHeight: \"80vh\",\n },\n counterContainer: {\n position: \"absolute\",\n top: theme.space.xs,\n right: theme.space.md,\n zIndex: 1,\n display: \"none\",\n },\n counter: {\n color: theme.colors.base_light,\n backgroundColor: theme.colors.base_dark,\n padding: theme.spacing(0, \"sm\"),\n },\n slideControls: {\n position: \"absolute\",\n left: 0,\n right: 0,\n top: `calc(50% - (32px / 2))`,\n padding: theme.spacing(0, \"sm\"),\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n opacity: 0,\n \"& button\": {\n zIndex: 1,\n },\n \"&:focus-within\": {\n opacity: 1,\n },\n },\n slidesViewport: {\n overflow: \"hidden\",\n },\n slidesContainer: {\n display: \"flex\",\n flexDirection: \"row\",\n height: \"100%\",\n },\n\n dots: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n gap: theme.space.xs,\n height: theme.space.md,\n },\n dotsXs: {},\n dot: {\n width: 5,\n height: 5,\n margin: theme.space.xs,\n borderRadius: \"50%\",\n backgroundColor: theme.colors.atmo4,\n },\n dotSelected: {\n width: 10,\n height: 10,\n backgroundColor: theme.colors.secondary_80,\n },\n\n panel: {\n display: \"flex\",\n width: \"100%\",\n overflowX: \"auto\", // \"hidden\",\n overflowY: \"hidden\",\n padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n },\n thumbnail: {\n height: \"unset\",\n padding: 0,\n \"& img\": {\n width: \"100%\",\n height: \"100%\",\n textAlign: \"center\",\n aspectRatio: \"16/9\",\n opacity: \"50%\",\n borderRadius: theme.radii.round,\n },\n },\n thumbnailSelected: {\n \"& img\": {\n border: \"none\",\n opacity: \"100%\",\n },\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","right","closeButton","mainContainer","controls","atmo2","border","atmo4","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","md","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","radii","round","thumbnailSelected"],"mappings":"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"}

package/dist/esm/components/CheckBox/CheckBox.styles.js CHANGED Viewed

@@ -14,8 +14,8 @@ const {
     height: "32px",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
-      backgroundColor: theme.checkbox.hoverColor,
-      borderRadius: theme.checkbox.borderRadius
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base
     }
   },
   disabled: {

package/dist/esm/components/CheckBox/CheckBox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styles.js","sources":["../../../../src/components/CheckBox/CheckBox.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(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.~~checkbox~~.~~hoverColor~~,\n borderRadius: theme.~~checkbox~~.~~borderRadius~~,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n checkbox: { height: \"32px\" },\n invalidCheckbox: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transition","backgroundColor","theme","~~checkbox~~","~~hoverColor~~","borderRadius","~~disabled~~","~~color~~","~~colors~~","secondary_60","focusVisible","outlineStyles","atmo3","outline","boxShadow","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","invalidCheckbox","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,~~SAASC~~;AAAAA,~~MAChCC~~,cAAcH,MAAMC~~,SAASE~~;AAAAA,~~IAC/B~~;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,~~IACRR~~,QAAQ;AAAA,IACR,YAAY;AAAA,~~MAAES~~,~~OAAOL~~,~~MAAMM~~,~~OAAOC~~;AAAAA,~~MAAcX~~,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,~~EACAY~~,cAAc;AAAA,IACZ,GAAGC;AAAAA,IAEH,SAAS;AAAA,~~MACPV~~,iBAAiBC,~~MAAMM~~,~~OAAOI~~;AAAAA,IAChC;AAAA,IAEA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,~~aAAYd~~,~~MAAMM~~,~~OAAOS~~,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,~~EACAhB~~,UAAU;AAAA,~~IAAEJ~~,QAAQ;AAAA,EAAO;AAAA,~~EAC3BqB~~,iBAAiB;AAAA,~~IACfJ~~,cAAe,~~aAAYd~~,~~MAAMM~~,~~OAAOS~~,QAAS;AAAA,IACjDC,wBAAwB;AAAA,IACxBC,yBAAyB;AAAA,EAC3B;AAAA,~~EACAE~~,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,~~cAAcvB~~,~~MAAMwB~~,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,~~GAAG1B~~,~~MAAM2B~~,WAAWC;AAAAA,~~IACpBhC~~,QAAQ;AAAA,IACRC,QAAQ;AAAA,~~IACRgC~~,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,CAAC;"}
1	+ {"version":3,"file":"CheckBox.styles.js","sources":["../../../../src/components/CheckBox/CheckBox.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(\"HvCheckBox\", {\n root: { display: \"inline-block\" },\n container: {\n cursor: \"pointer\",\n display: \"flex\",\n height: \"32px\",\n transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n borderRadius: theme.radii.base,\n },\n },\n disabled: {\n cursor: \"not-allowed\",\n \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n },\n focusVisible: {\n ...outlineStyles,\n\n \"& div\": {\n backgroundColor: theme.colors.atmo3,\n },\n\n [`& $checkbox div > svg`]: {\n outline: \"none\",\n boxShadow: \"none\",\n },\n },\n invalidContainer: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n\n \"&:hover\": {\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n },\n checkbox: { height: \"32px\" },\n invalidCheckbox: {\n borderBottom: `1px solid ${theme.colors.negative}`,\n borderBottomLeftRadius: \"0px\",\n borderBottomRightRadius: \"0px\",\n },\n label: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n verticalAlign: \"middle\",\n paddingRight: theme.space.xs,\n whiteSpace: \"nowrap\",\n ...theme.typography.body,\n cursor: \"pointer\",\n height: \"32px\",\n lineHeight: \"32px\",\n width: \"100%\",\n },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transition","backgroundColor","theme","colors","containerBackgroundHover","borderRadius","radii","base","disabled","color","secondary_60","focusVisible","outlineStyles","atmo3","outline","boxShadow","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","checkbox","invalidCheckbox","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,YAAY;AAAA,IAEZ,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRV,QAAQ;AAAA,IACR,YAAY;AAAA,MAAEW,OAAOP,MAAMC,OAAOO;AAAAA,MAAcZ,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAa,cAAc;AAAA,IACZ,GAAGC;AAAAA,IAEH,SAAS;AAAA,MACPX,iBAAiBC,MAAMC,OAAOU;AAAAA,IAChC;AAAA,IAEA,CAAE,uBAAsB,GAAG;AAAA,MACzBC,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYf,MAAMC,OAAOe,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IAAEtB,QAAQ;AAAA,EAAO;AAAA,EAC3BuB,iBAAiB;AAAA,IACfL,cAAe,aAAYf,MAAMC,OAAOe,QAAS;AAAA,IACjDC,wBAAwB;AAAA,IACxBC,yBAAyB;AAAA,EAC3B;AAAA,EACAG,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAAczB,MAAM0B,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAG5B,MAAM6B,WAAWC;AAAAA,IACpBlC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRkC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,CAAC;"}

package/dist/esm/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -4,7 +4,6 @@ import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useControlled } from "../../hooks/useControlled.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useLabels } from "../../hooks/useLabels.js";
-import { useTheme } from "../../hooks/useTheme.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./ColorPicker.styles.js";
 import { staticClasses } from "./ColorPicker.styles.js";
@@ -61,9 +60,6 @@ const HvColorPicker = (props) => {
     css,
     cx
   } = useClasses(classesProp);
-  const {
-    activeTheme
-  } = useTheme();
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
   const [color, setColor] = useControlled(value, defaultValue);
@@ -120,11 +116,9 @@ const HvColorPicker = (props) => {
       }))
     }, adornment: iconOnly && color ? /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIconOnly, color: [color, "transparent"] }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0, placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
-      /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant, children: color })
+      /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
     ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: cx((showCustomColors || showSavedColors) && css({
-        paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
-      }), classes.recommendedColorsRoot), colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
+      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
       showCustomColors && /* @__PURE__ */ jsx(Picker, { classes: {
         fields: cx({
           [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors

package/dist/esm/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n 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.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant={activeTheme?.colorPicker.inputValueVariant}\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={cx(\n (showCustomColors \|\| showSavedColors) &&\n css({\n paddingBottom:\n activeTheme?.colorPicker.recommendedColorsBottomPadding,\n }),\n classes.recommendedColorsRoot\n )}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","colorPicker","inputValueVariant","join","trim","panel","paddingBottom","recommendedColorsBottomPadding","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { ColorState } from \"react-color\";\n\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvColorPickerProps {\n \"aria-label\"?: string;\n \"aria-labelledby\"?: string;\n \"aria-describedby\"?: string;\n /** Class names to be applied. /\n className?: string;\n /* Id to be applied to the form element root node. /\n id?: string;\n /* The form element name. /\n name?: string;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /* Provide additional descriptive text for the form element. /\n description?: React.ReactNode;\n /* Indicates that user input is required on the form element. /\n required?: boolean;\n /* The value color, in HEX format. /\n value?: string;\n /* The default value color, in HEX format. /\n defaultValue?: string;\n /* If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. /\n disabled?: boolean;\n /* If `true` the dropdown starts opened if `false` it starts closed. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /* A function to be executed whenever the color changes. /\n onChange?: (color: string) => void;\n /* A function to be executed whenever the color change is complete. /\n onChangeComplete?: (color: string) => void;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvColorPickerClasses;\n /* The placeholder value when nothing is selected. /\n placeholder?: string;\n /* Recommended colors. The colors are HEX values. /\n recommendedColors?: string[];\n /* Recommended colors position. /\n recommendedColorsPosition?: \"top\" \| \"bottom\";\n /* If `true`, the labels are shown. If `false`, they are not shown. /\n showLabels?: boolean;\n /* An object containing all the labels. /\n labels?: {\n recommendedColorsLabel?: string;\n customColorsLabel?: string;\n };\n /* Icon type for the input's end adornment. /\n dropdownIcon?: \"arrow\" \| \"colorPicker\";\n /* If `true`, the input only shows an icon. If `false`, the input shows text and icons. /\n iconOnly?: boolean;\n /* If `true`, the saved colors area is shown. If `false`, it is not shown. /\n showSavedColors?: boolean;\n /* If `true`, the custom colors area is shown. If `false`, it is not shown. /\n showCustomColors?: boolean;\n /* The saved colors. The colors are HEX values. /\n savedColorsValue?: string[];\n /* The default saved colors. The colors are HEX values. /\n defaultSavedColorsValue?: string[];\n /* Callback fired when a new saved color is added. /\n onSavedColorAdded?: (color?: string) => void;\n /* Callback fired when a new saved color is removed. /\n onSavedColorRemoved?: (color?: string) => void;\n /* Aria label to apply to delete saved color button. /\n deleteSavedColorButtonArialLabel?: string; // TODO: fix typo \"ArialLabel\" in next version\n /* Aria label to apply to add saved color button. /\n addSavedColorButtonAriaLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n recommendedColorsLabel: \"Recommended colors:\",\n customColorsLabel: \"Custom colors:\",\n};\n\n/\n 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.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = (props: HvColorPickerProps) => {\n const {\n id,\n name,\n required = false,\n disabled = false,\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n className,\n classes: classesProp,\n value,\n onChange,\n onChangeComplete,\n defaultValue = \"\",\n expanded,\n defaultExpanded = false,\n recommendedColorsPosition = \"top\",\n recommendedColors = [\n \"#95AFE8\",\n \"#E89E5D\",\n \"#83B8A6\",\n \"#70759C\",\n \"#C57E7E\",\n \"#FADA95\",\n \"#ADBFE8\",\n \"#E3B386\",\n \"#9AC6B7\",\n \"#8B90AF\",\n \"#CF9797\",\n \"#FAE1AA\",\n ],\n showLabels = true,\n labels: labelsProp,\n dropdownIcon = \"colorPicker\",\n placeholder = \"Select color...\",\n iconOnly = false,\n showSavedColors = true,\n showCustomColors = true,\n savedColorsValue,\n defaultSavedColorsValue = [],\n onSavedColorAdded,\n onSavedColorRemoved,\n deleteSavedColorButtonArialLabel = \"Delete saved color\",\n addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n } = useDefaultProps(\"HvColorPicker\", props);\n\n const { classes, css, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const [color, setColor] = useControlled(value, defaultValue);\n const [savedColors, setSavedColors] = useControlled(\n savedColorsValue,\n defaultSavedColorsValue\n );\n const elementId = useUniqueId(id, \"hvdropdown\");\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n const handleToggle: HvDropdownProps[\"onToggle\"] = (_, open) => {\n setIsOpen(open);\n };\n\n const handleSelect = (val: ColorState \| { hex: string; source: string }) => {\n onChange?.(val.hex);\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChange = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChange?.(val.hex);\n setColor(val.hex);\n };\n\n const handleOnChangeComplete = (\n val: ColorState \| { hex: string; source: string }\n ) => {\n onChangeComplete?.(val.hex);\n setColor(val.hex);\n };\n\n const handleAddColor = () => {\n // When no color is provided, react-color sets the picker to #000000.\n // This is the color that should be added in this case.\n const colorToAdd = color \|\| \"#000000\";\n\n onSavedColorAdded?.(colorToAdd);\n setSavedColors([...savedColors, colorToAdd]);\n };\n\n const handleRemoveColor = (val: string, position: number) => {\n if (savedColors[position] === val) {\n const sColors = [...savedColors];\n sColors.splice(position, 1);\n onSavedColorRemoved?.(val);\n setSavedColors(sColors);\n }\n };\n\n const setFocusToContent = (containerRef: HTMLElement \| null) => {\n const inputs = containerRef?.getElementsByTagName(\"input\");\n if (inputs && inputs.length > 0) {\n inputs[0].focus();\n }\n };\n\n return (\n <HvFormElement\n id={id}\n name={name}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n label={label}\n className={classes.label}\n />\n )}\n\n {hasDescription && (\n <HvInfoMessage\n id={setId(elementId, \"description\")}\n className={classes.description}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n <HvBaseDropdown\n variableWidth\n className={className}\n expanded={isOpen}\n onToggle={handleToggle}\n onContainerCreation={setFocusToContent}\n classes={{\n root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n selection: cx(iconOnly && css({ padding: 0 })),\n }}\n adornment={\n iconOnly && color ? (\n <Checkbox\n className={classes.headerColorIconOnly}\n color={[color, \"transparent\"]}\n />\n ) : dropdownIcon === \"colorPicker\" ? (\n <ColorPicker className={classes.colorPickerIcon} />\n ) : undefined\n }\n placeholder={\n iconOnly ? undefined : color ? (\n <>\n <Checkbox\n className={classes.headerColorIcon}\n color={[color, \"transparent\"]}\n />\n <HvTypography\n className={classes.headerColorValue}\n variant=\"label\"\n >\n {color}\n </HvTypography>\n </>\n ) : (\n placeholder\n )\n }\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n >\n <HvPanel className={classes.panel}>\n <div className={classes.colorPicker}>\n {recommendedColorsPosition === \"top\" && (\n <PresetColors\n className={classes.recommendedColorsRoot}\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n {showCustomColors && (\n <Picker\n classes={{\n fields: cx({\n [classes.pickerFields]:\n recommendedColorsPosition === \"bottom\" \|\| showSavedColors,\n }),\n }}\n title={showLabels ? labels?.customColorsLabel : undefined}\n color={color}\n onChange={handleOnChange}\n onChangeComplete={handleOnChangeComplete}\n />\n )}\n {showSavedColors && (\n <SavedColors\n colors={savedColors}\n onAddColor={handleAddColor}\n onClickColor={handleSelect}\n onRemoveColor={handleRemoveColor}\n deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n addButtonAriaLabel={addSavedColorButtonAriaLabel}\n />\n )}\n {recommendedColorsPosition === \"bottom\" && (\n <PresetColors\n colors={recommendedColors}\n onClick={handleSelect}\n title={showLabels ? labels?.recommendedColorsLabel : undefined}\n />\n )}\n </div>\n </HvPanel>\n </HvBaseDropdown>\n </HvFormElement>\n );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","props","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","join","trim","panel","colorPicker","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}

package/dist/esm/components/ColorPicker/ColorPicker.styles.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
 const {
   staticClasses,
@@ -26,16 +25,20 @@ const {
   },
   panel: {
     width: "100%",
-    minWidth: theme.colorPicker.panelMinWidth,
+    minWidth: "266px",
     display: "flex",
     justifyContent: "center",
-    padding: theme.colorPicker.panelPadding
+    padding: "16px"
   },
   colorPicker: {
-    width: theme.colorPicker.colorPickerWidth
+    width: "232px"
   },
   colorPickerIcon: {},
-  recommendedColorsRoot: {},
+  recommendedColorsRoot: {
+    ":not(:only-child)": {
+      paddingBottom: "24px"
+    }
+  },
   dropdownRootIconOnly: {
     width: 32,
     height: 32

package/dist/esm/components/ColorPicker/ColorPicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { ~~theme } from \"@hitachivantara/uikit-styles\";\n\nimport {~~ createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n root: {},\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n cursor: \"pointer\",\n },\n description: {},\n headerColorValue: {\n textTransform: \"uppercase\",\n },\n headerColorIcon: {\n width: 24,\n \"& svg\": {\n marginLeft: 0,\n },\n },\n panel: {\n width: \"100%\",\n minWidth: ~~theme.colorPicker.panelMinWidth~~,\n display: \"flex\",\n justifyContent: \"center\",\n padding: ~~theme.colorPicker.panelPadding~~,\n },\n colorPicker: {\n width: ~~theme.colorPicker.colorPickerWidth~~,\n },\n colorPickerIcon: {},\n recommendedColorsRoot: {},\n dropdownRootIconOnly: {\n width: 32,\n height: 32,\n },\n headerColorIconOnly: {},\n pickerFields: { paddingBottom: 20 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","labelContainer","display","alignItems","label","paddingBottom","cursor","description","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","~~theme","colorPicker","panelMinWidth","~~justifyContent","padding","~~panelPadding~~","~~colorPickerWidth","~~colorPickerIcon","recommendedColorsRoot","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":"~~;;AAIa~~,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,~~UAAUC,MAAMC,YAAYC~~;~~AAAAA~~,~~IAC5Bf~~,SAAS;AAAA,~~IACTgB~~,gBAAgB;AAAA,IAChBC,~~SAASJ,MAAMC,YAAYI~~;~~AAAAA~~,~~EAC7B~~;AAAA,~~EACAJ~~,aAAa;AAAA,~~IACXL~~,~~OAAOI,MAAMC,YAAYK~~;~~AAAAA~~,~~EAC3B~~;AAAA,~~EACAC~~,iBAAiB,CAAC;AAAA,EAClBC,uBAAuB,~~CAAC~~;AAAA,~~EACxBC~~,sBAAsB;AAAA,~~IACpBb~~,OAAO;AAAA,~~IACPc~~,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,~~IAAEtB~~,eAAe;AAAA,EAAG;AACpC,CAAC;"}
1	+ {"version":3,"file":"ColorPicker.styles.js","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvColorPicker\", {\n root: {},\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {\n paddingBottom: \"6px\",\n display: \"block\",\n cursor: \"pointer\",\n },\n description: {},\n headerColorValue: {\n textTransform: \"uppercase\",\n },\n headerColorIcon: {\n width: 24,\n \"& svg\": {\n marginLeft: 0,\n },\n },\n panel: {\n width: \"100%\",\n minWidth: \"266px\",\n display: \"flex\",\n justifyContent: \"center\",\n padding: \"16px\",\n },\n colorPicker: {\n width: \"232px\",\n },\n colorPickerIcon: {},\n recommendedColorsRoot: {\n \":not(:only-child)\": {\n paddingBottom: \"24px\",\n },\n },\n dropdownRootIconOnly: {\n width: 32,\n height: 32,\n },\n headerColorIconOnly: {},\n pickerFields: { paddingBottom: 20 },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","labelContainer","display","alignItems","label","paddingBottom","cursor","description","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","justifyContent","padding","colorPicker","colorPickerIcon","recommendedColorsRoot","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,iBAAiB;AAAA,EAC1EC,MAAM,CAAC;AAAA,EACPC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,IACTI,QAAQ;AAAA,EACV;AAAA,EACAC,aAAa,CAAC;AAAA,EACdC,kBAAkB;AAAA,IAChBC,eAAe;AAAA,EACjB;AAAA,EACAC,iBAAiB;AAAA,IACfC,OAAO;AAAA,IACP,SAAS;AAAA,MACPC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLF,OAAO;AAAA,IACPG,UAAU;AAAA,IACVZ,SAAS;AAAA,IACTa,gBAAgB;AAAA,IAChBC,SAAS;AAAA,EACX;AAAA,EACAC,aAAa;AAAA,IACXN,OAAO;AAAA,EACT;AAAA,EACAO,iBAAiB,CAAC;AAAA,EAClBC,uBAAuB;AAAA,IACrB,qBAAqB;AAAA,MACnBd,eAAe;AAAA,IACjB;AAAA,EACF;AAAA,EACAe,sBAAsB;AAAA,IACpBT,OAAO;AAAA,IACPU,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB,CAAC;AAAA,EACtBC,cAAc;AAAA,IAAElB,eAAe;AAAA,EAAG;AACpC,CAAC;"}

package/dist/esm/components/ColorPicker/Fields/Fields.js CHANGED Viewed

@@ -3,14 +3,16 @@ import { useState, useRef, useEffect } from "react";
 import * as color from "react-color/lib/helpers/color";
 import { useClasses } from "./Fields.styles.js";
 import { staticClasses } from "./Fields.styles.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvInput } from "../../Input/Input.js";
-const Fields = ({
-  className,
-  onChange,
-  rgb,
-  hex,
-  classes: classesProp
-}) => {
+const Fields = (props) => {
+  const {
+    className,
+    onChange,
+    rgb,
+    hex,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerFields", props);
   const {
     classes,
     cx

package/dist/esm/components/ColorPicker/Fields/Fields.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = ({\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n}: ~~FieldsProps)~~ => {\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\"\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","classesProp","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"~~;;;;;;AAiCO~~,~~MAAMA~~,SAASA,~~CAAC~~;AAAA,~~EACrBC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~,SAASC;~~AACE~~,~~MAAM~~;~~AACX~~,QAAA;AAAA,~~IAAED~~;AAAAA,~~IAASE~~;AAAAA,EAAAA,IAAOC,~~WAAWF~~,WAAW;AAC9C,QAAM,~~CAACG~~,aAAaC,cAAc,IAAIC,~~SAASP~~,GAAG;AAClD,QAAM,~~CAACQ~~,aAAaC,cAAc,IAAIF,~~SAASR~~,~~2BAAKW~~,CAAC;AACrD,QAAM,CAACC,eAAeC,gBAAgB,IAAIL,~~SAASR~~,~~2BAAKc~~,CAAC;AACzD,QAAM,CAACC,cAAcC,eAAe,IAAIR,~~SAASR~~,~~2BAAKiB~~,CAAC;AAEjDC,QAAAA,cAAcC,OAAyB,IAAI;AAC3CC,QAAAA,cAAcD,OAAyB,IAAI;AAC3CE,QAAAA,gBAAgBF,OAAyB,IAAI;AAC7CG,QAAAA,eAAeH,OAAyB,IAAI;AAElDI,YAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBP,YAAYQ,SAAS;AAClDnB,~~qBAAeN~~,GAAG;AAAA,IACpB;AAAA,EAAA,GACC,CAACA,GAAG,CAAC;~~AAERsB~~,YAAU,MAAM;AACVC,QAAAA,SAASC,kBAAkBL,YAAYM,SAAS;AAClDhB,~~qBAAeV~~,~~2BAAKW~~,CAAC;AAAA,IACvB;AAEIa,QAAAA,SAASC,kBAAkBJ,cAAcK,SAAS;AACpDb,~~uBAAiBb~~,~~2BAAKc~~,CAAC;AAAA,IACzB;AAEIU,QAAAA,SAASC,kBAAkBH,aAAaI,SAAS;AACnDV,~~sBAAgBhB~~,~~2BAAKiB~~,CAAC;AAAA,IACxB;AAAA,EAAA,GACC,~~CAACjB~~,GAAG,CAAC;~~AAEF2B~~,QAAAA,eAAeA,CACnBC,MAMAC,UACG;AACH,QAAID,~~KAAK3B~~,~~OAAO6B~~,MAAMC,WAAWH,~~KAAK3B~~,GAAG,GAAG;AAExC,eAAA;AAAA,QACEA,~~KAAK2B~~,~~KAAK3B~~;AAAAA,~~QACV+B~~,QAAQ;AAAA,SAEVH,KACF;AAAA,IAAA,WACSD,KAAKjB,KAAKiB,KAAKd,KAAKc,KAAKX,GAAG;AAEnC,eAAA;AAAA,QACEN,GAAGiB,KAAKjB,~~MAAKX~~,~~2BAAKW~~;AAAAA,QAClBG,GAAGc,KAAKd,~~MAAKd~~,~~2BAAKc~~;AAAAA,QAClBG,GAAGW,KAAKX,~~MAAKjB~~,~~2BAAKiB~~;AAAAA,QAClBe,QAAQ;AAAA,SAEVH,KACF;AAAA,IACF;AAAA,EAAA;AAGII,QAAAA,cAAcA,CAACJ,OAA+BK,UAAkB;AACpE3B,mBAAe2B,KAAK;AACP,iBAAA;AAAA,~~MAAEjC~~,~~KAAKiC~~;AAAAA,OAASL,KAAK;AAAA,EAAA;AAGpC,QAAMM,cAAcA,CAClBN,OACAK,OACAE,cACG;AACH,QAAIA,cAAc;AAAoBC,qBAAAA,OAAOH,KAAK,CAAC;AACnD,QAAIE,cAAc;AAAsBC,uBAAAA,OAAOH,KAAK,CAAC;AACrD,QAAIE,cAAc;AAAqBC,sBAAAA,OAAOH,KAAK,CAAC;AAGlD,iBAAA;AAAA,MACEvB,GAAGyB,cAAc,MAAMC,OAAOH,KAAK,~~IAAIlC~~,~~2BAAKW~~;AAAAA,MAC5CG,GAAGsB,cAAc,MAAMC,OAAOH,KAAK,~~IAAIlC~~,~~2BAAKc~~;AAAAA,MAC5CG,GAAGmB,cAAc,MAAMC,OAAOH,KAAK,~~IAAIlC~~,~~2BAAKiB~~;AAAAA,OAE9CY,KACF;AAAA,EAAA;AAGF,8BACG,OAAI,EAAA,WAAWzB,~~GAAGF~~,~~QAAQoC~~,~~QAAQxC~~,SAAS,GAC1C,UAAA;AAAA,IAAC,oBAAA,SAAA,EACC,~~KAAKoB~~,aACL,~~WAAWhB~~,~~QAAQqC~~,QACnB,OAAM,OACN,OAAOjC,2CAAakC,QAAQ,KAAK,KACjC,UAAUP,aACV,QAAQ,MAAM1B,~~eAAeN~~,GAAG,GAChC,cAAY,KAAA,CAAA;AAAA,IAEb,oBAAA,SAAA,EACC,~~KAAKmB~~,aACL,~~WAAWlB~~,~~QAAQuC~~,QACnB,OAAM,KACN,OAAQ,GAAEhC,WAAY,IACtB,UAAU,CAACoB,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMxB,~~eAAeV~~,~~2BAAKW~~,CAAC,GACnC,cAAY,KAAA,CAAA;AAAA,IAEb,oBAAA,SAAA,EACC,KAAKU,eACL,~~WAAWnB~~,~~QAAQuC~~,QACnB,OAAM,KACN,OAAQ,GAAE7B,aAAc,IACxB,UAAU,CAACiB,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMrB,~~iBAAiBb~~,~~2BAAKc~~,CAAC,GACrC,cAAY,KAAA,CAAA;AAAA,IAEb,oBAAA,SAAA,EACC,KAAKQ,cACL,~~WAAWpB~~,~~QAAQuC~~,QACnB,OAAM,KACN,OAAQ,GAAE1B,YAAa,IACvB,UAAU,CAACc,OAAOK,UAAUC,YAAYN,OAAOK,OAAO,GAAG,GACzD,QAAQ,MAAMlB,~~gBAAgBhB~~,~~2BAAKiB~~,CAAC,GACpC,cAAY,KAAA,CAAA;AAAA,EAEhB,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n className?: string;\n rgb?: RGBColor;\n hex?: string;\n onChange: (\n data:\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => void;\n classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n const {\n className,\n onChange,\n rgb,\n hex,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerFields\", props);\n const { classes, cx } = useClasses(classesProp);\n const [internalHex, setInternalHex] = useState(hex);\n const [internalRed, setInternalRed] = useState(rgb?.r);\n const [internalGreen, setInternalGreen] = useState(rgb?.g);\n const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n const hexInputRef = useRef<HTMLInputElement>(null);\n const redInputRef = useRef<HTMLInputElement>(null);\n const greenInputRef = useRef<HTMLInputElement>(null);\n const blueInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (document.activeElement !== hexInputRef.current) {\n setInternalHex(hex);\n }\n }, [hex]);\n\n useEffect(() => {\n if (document.activeElement !== redInputRef.current) {\n setInternalRed(rgb?.r);\n }\n\n if (document.activeElement !== greenInputRef.current) {\n setInternalGreen(rgb?.g);\n }\n\n if (document.activeElement !== blueInputRef.current) {\n setInternalBlue(rgb?.b);\n }\n }, [rgb]);\n\n const handleChange = (\n data: {\n hex?: string;\n r?: number;\n g?: number;\n b?: number;\n },\n event: React.ChangeEvent<HTMLInputElement>\n ) => {\n if (data.hex && color.isValidHex(data.hex)) {\n onChange(\n {\n hex: data.hex,\n source: \"hex\",\n },\n event\n );\n } else if (data.r \|\| data.g \|\| data.b) {\n onChange(\n {\n r: data.r \|\| rgb?.r,\n g: data.g \|\| rgb?.g,\n b: data.b \|\| rgb?.b,\n source: \"rgb\",\n },\n event\n );\n }\n };\n\n const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n setInternalHex(value);\n handleChange({ hex: value }, event);\n };\n\n const onChangeRbg = (\n event: React.ChangeEvent<any>,\n value: string,\n colorPart: \"r\" \| \"g\" \| \"b\"\n ) => {\n if (colorPart === \"r\") setInternalRed(Number(value));\n if (colorPart === \"g\") setInternalGreen(Number(value));\n if (colorPart === \"b\") setInternalBlue(Number(value));\n\n handleChange(\n {\n r: colorPart === \"r\" ? Number(value) : rgb?.r,\n g: colorPart === \"g\" ? Number(value) : rgb?.g,\n b: colorPart === \"b\" ? Number(value) : rgb?.b,\n },\n event\n );\n };\n\n return (\n <div className={cx(classes.fields, className)}>\n <HvInput\n ref={hexInputRef}\n className={classes.double}\n label=\"HEX\"\n value={internalHex?.replace(\"#\", \"\")}\n onChange={onChangeHex}\n onBlur={() => setInternalHex(hex)}\n disableClear\n />\n <HvInput\n ref={redInputRef}\n className={classes.single}\n label=\"R\"\n value={`${internalRed}`}\n onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n onBlur={() => setInternalRed(rgb?.r)}\n disableClear\n />\n <HvInput\n ref={greenInputRef}\n className={classes.single}\n label=\"G\"\n value={`${internalGreen}`}\n onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n onBlur={() => setInternalGreen(rgb?.g)}\n disableClear\n />\n <HvInput\n ref={blueInputRef}\n className={classes.single}\n label=\"B\"\n value={`${internalBlue}`}\n onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n onBlur={() => setInternalBlue(rgb?.b)}\n disableClear\n />\n </div>\n );\n};\n"],"names":["Fields","props","className","onChange","rgb","hex","classes","classesProp","useDefaultProps","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"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"}

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../../utils/classes.js";
 const name = "HvColorPicker-Fields";
 const {
@@ -8,12 +7,12 @@ const {
   fields: {
     width: "100%",
     display: "flex",
-    paddingTop: theme.colorPicker.fieldsPaddingTop,
-    marginRight: theme.colorPicker.fieldsMarginRight
+    paddingTop: "18px",
+    marginRight: "0px"
   },
   single: {
-    maxWidth: theme.colorPicker.fieldsRgbWidth,
-    paddingLeft: theme.colorPicker.fieldsRgbPaddingLeft,
+    maxWidth: "50px",
+    paddingLeft: "4px",
     "& input": {
       marginLeft: 5,
       marginRight: 5
@@ -23,8 +22,8 @@ const {
     }
   },
   double: {
-    maxWidth: theme.colorPicker.fieldsHexWidth,
-    paddingRight: theme.colorPicker.fieldsHexPaddingRight,
+    maxWidth: "82px",
+    paddingRight: "4px",
     "& input": {
       textTransform: "uppercase",
       marginLeft: 5,

package/dist/esm/components/ColorPicker/Fields/Fields.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { ~~theme } from \"@hitachivantara/uikit-styles\";\n\nimport {~~ createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: ~~theme.colorPicker.fieldsPaddingTop~~,\n marginRight: ~~theme.colorPicker.fieldsMarginRight~~,\n },\n single: {\n maxWidth: ~~theme.colorPicker.fieldsRgbWidth~~,\n paddingLeft: ~~theme.colorPicker.fieldsRgbPaddingLeft~~,\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: ~~theme.colorPicker.fieldsHexWidth~~,\n paddingRight: ~~theme.colorPicker.fieldsHexPaddingRight~~,\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","fields","width","display","paddingTop","~~theme","colorPicker","fieldsPaddingTop","~~marginRight","~~fieldsMarginRight","~~single","maxWidth","~~fieldsRgbWidth","~~paddingLeft","~~fieldsRgbPaddingLeft","~~marginLeft","double","~~fieldsHexWidth","~~paddingRight","~~fieldsHexPaddingRight","~~textTransform"],"mappings":"~~;;AAIA~~,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,~~YAAYC,MAAMC,YAAYC~~;~~AAAAA~~,~~IAC9BC~~,~~aAAaH,MAAMC,YAAYG~~;~~AAAAA~~,~~EACjC~~;AAAA,EACAC,QAAQ;AAAA,IACNC,~~UAAUN,MAAMC,YAAYM~~;~~AAAAA~~,~~IAC5BC~~,~~aAAaR,MAAMC,YAAYQ~~;~~AAAAA~~,~~IAC/B~~,WAAW;AAAA,MACTC,YAAY;AAAA,~~MACZP~~,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,~~MACTK~~,aAAa;AAAA,IACf;AAAA,EACF;AAAA,~~EACAG~~,QAAQ;AAAA,~~IACNL~~,~~UAAUN,MAAMC,YAAYW~~;~~AAAAA~~,~~IAC5BC~~,~~cAAcb,MAAMC,YAAYa~~;~~AAAAA~~,~~IAChC~~,WAAW;AAAA,MACTC,eAAe;AAAA,~~MACfL~~,YAAY;AAAA,~~MACZP~~,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,~~MACTK~~,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"Fields.styles.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvColorPicker-Fields\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n fields: {\n width: \"100%\",\n display: \"flex\",\n paddingTop: \"18px\",\n marginRight: \"0px\",\n },\n single: {\n maxWidth: \"50px\",\n paddingLeft: \"4px\",\n \"& input\": {\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n double: {\n maxWidth: \"82px\",\n paddingRight: \"4px\",\n \"& input\": {\n textTransform: \"uppercase\",\n marginLeft: 5,\n marginRight: 5,\n },\n \"& label\": {\n paddingLeft: 5,\n },\n },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","fields","width","display","paddingTop","marginRight","single","maxWidth","paddingLeft","marginLeft","double","paddingRight","textTransform"],"mappings":";AAEA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,QAAQ;AAAA,IACNC,OAAO;AAAA,IACPC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,aAAa;AAAA,EACf;AAAA,EACAC,QAAQ;AAAA,IACNC,UAAU;AAAA,IACVC,aAAa;AAAA,IACb,WAAW;AAAA,MACTC,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACAE,QAAQ;AAAA,IACNH,UAAU;AAAA,IACVI,cAAc;AAAA,IACd,WAAW;AAAA,MACTC,eAAe;AAAA,MACfH,YAAY;AAAA,MACZJ,aAAa;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACTG,aAAa;AAAA,IACf;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ColorPicker/Picker/Picker.js CHANGED Viewed

@@ -6,16 +6,18 @@ import { useTheme } from "../../../hooks/useTheme.js";
 import { useClasses } from "./Picker.styles.js";
 import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { HvTypography } from "../../Typography/Typography.js";
-const Picker = CustomPicker(({
-  onChange,
-  rgb,
-  hsl,
-  hsv,
-  hex,
-  title,
-  classes: classesProp
-}) => {
+const Component = (props) => {
+  const {
+    onChange,
+    rgb,
+    hsl,
+    hsv,
+    hex,
+    title,
+    classes: classesProp
+  } = useDefaultProps("HvColorPickerPicker", props);
   const {
     activeTheme
   } = useTheme();
@@ -32,7 +34,8 @@ const Picker = CustomPicker(({
     ] }),
     /* @__PURE__ */ jsx(Fields, { className: classes.fields, rgb, hex, onChange })
   ] });
-});
+};
+const Picker = CustomPicker(Component);
 export {
   Picker,
   staticClasses as colorPickerPickerClasses

package/dist/esm/components/ColorPicker/Picker/Picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\~~nexport~~ ~~const Picker = CustomPicker(~~\n ~~({\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes:~~ ~~classesProp,\n }: {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n } &~~ CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n >) => {\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer]\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider]\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n }\n);\n"],"names":["~~Picker~~","~~CustomPicker~~","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields"],"mappings":"~~;;;;;;;;;AAsBaA~~,~~MAAAA~~,~~SAASC~~,~~aACpB~~,~~CAAC~~;AAAA,~~EACCC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~;AAAAA,~~EACAC~~,SAASC;~~AAYX~~,~~MAAM~~;~~AACE~~,QAAA;AAAA,~~IAAEC~~;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,~~IAAEH~~;AAAAA,EAAAA,~~IAAYI~~,~~WAAWH~~,WAAW;AAE1C,~~QAAMI~~,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,~~WAAWN~~,~~mCAASO~~,kBAAAA,CAAqB,GACpD,~~CAACP~~,~~mCAASO~~,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,~~WAAWN~~,~~mCAASS~~,UAAAA,CAAa,GAC5C,~~CAACT~~,~~mCAASS~~,SAAS,CACrB;AAEA,~~SAEKV~~,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,~~QAAQU~~,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,~~WAAWV~~,~~QAAQW~~,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,~~WAAWL~~,~~QAAQY~~,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,~~WAAWR~~,~~QAAQe~~,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ,~~CACF~~;"}
1	+ {"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n CustomPicker,\n CustomPickerInjectedProps,\n HSLColor,\n HSVColor,\n RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n extends CustomPickerInjectedProps<\n \| HSLColor\n \| HSVColor\n \| RGBColor\n \| {\n source?: string;\n hex?: string;\n }\n > {\n classes?: HvColorPickerPickerClasses;\n title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n const {\n onChange,\n rgb,\n hsl,\n hsv,\n hex,\n title,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPicker\", props);\n const { activeTheme } = useTheme();\n const { classes } = useClasses(classesProp);\n\n const SaturationPointer = useCallback(\n () => <div className={classes?.saturationPointer} />,\n [classes?.saturationPointer]\n );\n\n const HueSlider = useCallback(\n () => <div className={classes?.hueSlider} />,\n [classes?.hueSlider]\n );\n\n return (\n <>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.pickers}>\n <div className={classes.saturation}>\n <Saturation\n hsl={hsl}\n hsv={hsv}\n onChange={onChange}\n pointer={SaturationPointer}\n />\n </div>\n <div className={classes.hue}>\n <Hue\n direction={activeTheme?.colorPicker.hueDirection}\n hsl={hsl}\n onChange={onChange}\n pointer={HueSlider}\n />\n </div>\n </div>\n <Fields\n className={classes.fields}\n rgb={rgb}\n hex={hex}\n onChange={onChange}\n />\n </>\n );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":["Component","props","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","useDefaultProps","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields","Picker","CustomPicker"],"mappings":";;;;;;;;;;AAqCA,MAAMA,YAAYA,CAACC,UAAuB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,uBAAuBT,KAAK;AAC1C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAE1C,QAAMK,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASQ,kBAAAA,CAAqB,GACpD,CAACR,mCAASQ,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASU,UAAAA,CAAa,GAC5C,CAACV,mCAASU,SAAS,CACrB;AAEA,SAEKX,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQW,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWN,QAAQa,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWT,QAAQgB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ;AAEaC,MAAAA,SAASC,aAAa1B,SAAS;"}