@hitachivantara/uikit-react-core 5.6.0 → 5.7.1

package/dist/cjs/components/Card/Header/Header.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const MuiCardHeader = require("@mui/material/CardHeader");
 const headerClasses = require("./headerClasses.cjs");
 const Header_styles = require("./Header.styles.cjs");
@@ -23,25 +22,26 @@ const HvCardHeader = ({
   } = useTheme.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx(MuiCardHeader__default.default, {
       title,
       subheader,
       action: icon,
       onClick,
-      className: clsx.clsx(css(Header_styles.styles.root), classes == null ? void 0 : classes.root, headerClasses.default.root, className),
+      className: cx(headerClasses.default.root, css(Header_styles.styles.root), className, classes == null ? void 0 : classes.root),
       classes: {
-        title: icon ? clsx.clsx(css(Header_styles.styles.titleShort), headerClasses.default.titleShort, classes == null ? void 0 : classes.titleShort, css({
+        title: icon ? cx(headerClasses.default.titleShort, css(Header_styles.styles.titleShort), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        })) : clsx.clsx(css(Header_styles.styles.title), headerClasses.default.title, classes == null ? void 0 : classes.title, css({
+        }), classes == null ? void 0 : classes.titleShort) : cx(headerClasses.default.title, css(Header_styles.styles.title), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.titleVariant]
-        })),
-        subheader: clsx.clsx(css(Header_styles.styles.subheader), headerClasses.default.subheader, classes == null ? void 0 : classes.subheader, css({
+        }), classes == null ? void 0 : classes.title),
+        subheader: cx(headerClasses.default.subheader, css(Header_styles.styles.subheader), css({
           ...activeTheme == null ? void 0 : activeTheme.typography[activeTheme == null ? void 0 : activeTheme.card.subheaderVariant],
           color: activeTheme == null ? void 0 : activeTheme.card.subheaderColor
-        })),
-        action: clsx.clsx(css(Header_styles.styles.action), headerClasses.default.action, classes == null ? void 0 : classes.action),
-        content: clsx.clsx(headerClasses.default.content, classes == null ? void 0 : classes.content)
+        }), classes == null ? void 0 : classes.subheader),
+        action: cx(headerClasses.default.action, css(Header_styles.styles.action), classes == null ? void 0 : classes.action),
+        content: cx(headerClasses.default.content, classes == null ? void 0 : classes.content)
       },
       ...others
     })

package/dist/cjs/components/Card/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\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,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardHeader\n          title={title}\n          subheader={subheader}\n          action={icon}\n          onClick={onClick}\n          className={clsx(\n            css(styles.root),\n            classes?.root,\n            cardHeaderClasses.root,\n            className\n          )}\n          classes={{\n            title: icon\n              ? clsx(\n                  css(styles.titleShort),\n                  cardHeaderClasses.titleShort,\n                  classes?.titleShort,\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  })\n                )\n              : clsx(\n                  css(styles.title),\n                  cardHeaderClasses.title,\n                  classes?.title,\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  })\n                ),\n            subheader: clsx(\n              css(styles.subheader),\n              cardHeaderClasses.subheader,\n              classes?.subheader,\n              css({\n                ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n                color: activeTheme?.card.subheaderColor,\n              })\n            ),\n            action: clsx(\n              css(styles.action),\n              cardHeaderClasses.action,\n              classes?.action\n            ),\n            content: clsx(cardHeaderClasses.content, classes?.content),\n          }}\n          {...others}\n        />\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardHeader","classes","className","title","subheader","icon","onClick","others","activeTheme","useTheme","ClassNames","children","css","MuiCardHeader","action","clsx","styles","root","cardHeaderClasses","titleShort","typography","card","titleVariant","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;;;;;;;AAyBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,IAAAA,qCACDC,uBAAAA,SAAa;AAAA,MACZV;AAAAA,MACAC;AAAAA,MACAU,QAAQT;AAAAA,MACRC;AAAAA,MACAJ,WAAWa,KACTH,KAAAA,IAAII,cAAAA,OAAOC,IAAI,GACfhB,mCAASgB,MACTC,cAAAA,QAAkBD,MAClBf,SAAS;AAAA,MAEXD,SAAS;AAAA,QACPE,OAAOE,OACHU,UACEH,IAAII,cAAAA,OAAOG,UAAU,GACrBD,cAAAA,QAAkBC,YAClBlB,mCAASkB,YACTP,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAC9C,CAAA,CAAC,IAEJP,KAAAA,KACEH,IAAII,qBAAOb,KAAK,GAChBe,cAAAA,QAAkBf,OAClBF,mCAASE,OACTS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,CAAC;AAAA,QAERlB,WAAWW,KACTH,KAAAA,IAAII,cAAAA,OAAOZ,SAAS,GACpBc,cAAkBd,QAAAA,WAClBH,mCAASG,WACTQ,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKE;AAAAA,UAC7CC,OAAOhB,2CAAaa,KAAKI;AAAAA,QAAAA,CAC1B,CAAC;AAAA,QAEJX,QAAQC,KAAAA,KACNH,IAAII,qBAAOF,MAAM,GACjBI,sBAAkBJ,QAClBb,mCAASa,MAAM;AAAA,QAEjBY,SAASX,KAAAA,KAAKG,cAAAA,QAAkBQ,SAASzB,mCAASyB,OAAO;AAAA,MAC3D;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CAAM;AAAA,EAAA,CAGH;AAEjB;;"}
+{"version":3,"file":"Header.cjs","sources":["../../../../../src/components/Card/Header/Header.tsx"],"sourcesContent":["import MuiCardHeader, {\n  CardHeaderProps as MuiCardHeaderProps,\n} from \"@mui/material/CardHeader\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardHeaderClasses, { HvCardHeaderClasses } from \"./headerClasses\";\nimport { styles } from \"./Header.styles\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\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,\n  className,\n  title,\n  subheader,\n  icon,\n  onClick,\n  ...others\n}: HvCardHeaderProps) => {\n  const { activeTheme } = useTheme();\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiCardHeader\n          title={title}\n          subheader={subheader}\n          action={icon}\n          onClick={onClick}\n          className={cx(\n            cardHeaderClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n          classes={{\n            title: icon\n              ? cx(\n                  cardHeaderClasses.titleShort,\n                  css(styles.titleShort),\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  }),\n                  classes?.titleShort\n                )\n              : cx(\n                  cardHeaderClasses.title,\n                  css(styles.title),\n                  css({\n                    ...activeTheme?.typography[activeTheme?.card.titleVariant],\n                  }),\n                  classes?.title\n                ),\n            subheader: cx(\n              cardHeaderClasses.subheader,\n              css(styles.subheader),\n              css({\n                ...activeTheme?.typography[activeTheme?.card.subheaderVariant],\n                color: activeTheme?.card.subheaderColor,\n              }),\n              classes?.subheader\n            ),\n            action: cx(\n              cardHeaderClasses.action,\n              css(styles.action),\n              classes?.action\n            ),\n            content: cx(cardHeaderClasses.content, classes?.content),\n          }}\n          {...others}\n        />\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardHeader","classes","className","title","subheader","icon","onClick","others","activeTheme","useTheme","ClassNames","children","css","cx","MuiCardHeader","action","cardHeaderClasses","root","styles","titleShort","typography","card","titleVariant","subheaderVariant","color","subheaderColor","content"],"mappings":";;;;;;;;;;AAwBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACc,MAAM;AACjB,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,uBAAAA,SAAa;AAAA,MACZX;AAAAA,MACAC;AAAAA,MACAW,QAAQV;AAAAA,MACRC;AAAAA,MACAJ,WAAWW,GACTG,sBAAkBC,MAClBL,IAAIM,qBAAOD,IAAI,GACff,WACAD,mCAASgB,IAAI;AAAA,MAEfhB,SAAS;AAAA,QACPE,OAAOE,OACHQ,GACEG,sBAAkBG,YAClBP,IAAIM,cAAAA,OAAOC,UAAU,GACrBP,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAC9C,CAAA,GACDrB,mCAASkB,UAAU,IAErBN,GACEG,cAAAA,QAAkBb,OAClBS,IAAIM,cAAAA,OAAOf,KAAK,GAChBS,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKC;AAAAA,QAAY,CAC1D,GACDrB,mCAASE,KAAK;AAAA,QAEpBC,WAAWS,GACTG,cAAAA,QAAkBZ,WAClBQ,IAAIM,qBAAOd,SAAS,GACpBQ,IAAI;AAAA,UACF,GAAGJ,2CAAaY,WAAWZ,2CAAaa,KAAKE;AAAAA,UAC7CC,OAAOhB,2CAAaa,KAAKI;AAAAA,QAAAA,CAC1B,GACDxB,mCAASG,SAAS;AAAA,QAEpBW,QAAQF,GACNG,cAAkBD,QAAAA,QAClBH,IAAIM,cAAAA,OAAOH,MAAM,GACjBd,mCAASc,MAAM;AAAA,QAEjBW,SAASb,GAAGG,cAAAA,QAAkBU,SAASzB,mCAASyB,OAAO;AAAA,MACzD;AAAA,MAAE,GACEnB;AAAAA,IAAAA,CAAM;AAAA,EAAA,CAGH;AAEjB;;"}

package/dist/cjs/components/Card/Header/Header.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: {\n  root: CSSInterpolation;\n  titleShort: CSSInterpolation;\n  title: CSSInterpolation;\n  subheader: CSSInterpolation;\n  action: CSSInterpolation;\n} = {\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  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":["styles","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;;AAGO,MAAMA,SAMT;AAAA,EACFC,MAAM;AAAA,IAAEC,SAAU,QAAOC,YAAAA,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACLH,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAG,WAAW;AAAA,IACTJ,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAI,QAAQ;AAAA,IACNP,UAAU;AAAA,IACVQ,OAAO;AAAA,IACPC,WAAW;AAAA,IACXL,aAAa;AAAA,IACbM,aAAab,YAAAA,MAAMC,MAAMa;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF;;"}
+{"version":3,"file":"Header.styles.cjs","sources":["../../../../../src/components/Card/Header/Header.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvCardHeaderClasses } from \"./headerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvCardHeaderClasses, CSSInterpolation>\n> = {\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  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":["styles","root","padding","theme","space","sm","position","titleShort","fontFamily","body","marginRight","title","subheader","action","right","marginTop","paddingLeft","xs","top"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IAAEC,SAAU,QAAOC,YAAAA,MAAMC,MAAMC;AAAAA,IAAMC,UAAU;AAAA,EAAW;AAAA,EAChEC,YAAY;AAAA,IACVC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7BC,aAAa;AAAA,EACf;AAAA,EACAC,OAAO;AAAA,IACLH,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAG,WAAW;AAAA,IACTJ,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC/B;AAAA,EACAI,QAAQ;AAAA,IACNP,UAAU;AAAA,IACVQ,OAAO;AAAA,IACPC,WAAW;AAAA,IACXL,aAAa;AAAA,IACbM,aAAab,YAAAA,MAAMC,MAAMa;AAAAA,IACzBC,KAAK;AAAA,EACP;AACF;;"}

package/dist/cjs/components/Card/Media/Media.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const MuiCardMedia = require("@mui/material/CardMedia");
 const Media_styles = require("./Media.styles.cjs");
 const mediaClasses = require("./mediaClasses.cjs");
-const clsx = require("clsx");
 const react = require("@emotion/react");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -19,12 +18,13 @@ const HvCardMedia = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
-      css
+      css,
+      cx
     }) => /* @__PURE__ */ jsxRuntime.jsx(MuiCardMedia__default.default, {
       id,
       classes: {
-        root: clsx.clsx(css(Media_styles.styles.root), mediaClasses.default.root, classes == null ? void 0 : classes.root),
-        media: clsx.clsx(mediaClasses.default.media, classes == null ? void 0 : classes.media)
+        root: cx(mediaClasses.default.root, css(Media_styles.styles.root), classes == null ? void 0 : classes.root),
+        media: cx(mediaClasses.default.media, classes == null ? void 0 : classes.media)
       },
       className,
       role: "img",

package/dist/cjs/components/Card/Media/Media.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Media.cjs","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\nimport { styles } from \"./Media.styles\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport { clsx } from \"clsx\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <MuiCardMedia\n          id={id}\n          classes={{\n            root: clsx(css(styles.root), cardMediaClasses.root, classes?.root),\n            media: clsx(cardMediaClasses.media, classes?.media),\n          }}\n          className={className}\n          role=\"img\"\n          title={title}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardMedia>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardMedia","id","classes","className","children","title","onClick","others","ClassNames","css","MuiCardMedia","root","clsx","styles","cardMediaClasses","media","role"],"mappings":";;;;;;;;;;AA4BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AACtB,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,IAAAA,qCACDC,sBAAAA,SAAY;AAAA,MACXT;AAAAA,MACAC,SAAS;AAAA,QACPS,MAAMC,KAAAA,KAAKH,IAAII,oBAAOF,IAAI,GAAGG,qBAAiBH,MAAMT,mCAASS,IAAI;AAAA,QACjEI,OAAOH,KAAAA,KAAKE,aAAAA,QAAiBC,OAAOb,mCAASa,KAAK;AAAA,MACpD;AAAA,MACAZ;AAAAA,MACAa,MAAK;AAAA,MACLX;AAAAA,MACAC;AAAAA,MAAiB,GACbC;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;;"}
+{"version":3,"file":"Media.cjs","sources":["../../../../../src/components/Card/Media/Media.tsx"],"sourcesContent":["import MuiCardMedia, {\n  CardMediaProps as MuiCardMediaProps,\n} from \"@mui/material/CardMedia\";\nimport { styles } from \"./Media.styles\";\nimport { HvBaseProps } from \"@core/types\";\nimport cardMediaClasses, { HvCardMediaClasses } from \"./mediaClasses\";\nimport { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvCardMediaProps\n  extends Omit<MuiCardMediaProps, \"classes\">,\n    ImgHTMLAttributes<HTMLDivElement>,\n    HvBaseProps<HTMLDivElement, \"onClick\" | \"title\"> {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** The title of the media. */\n  title?: string;\n  /** The function that will be executed when this section is clicked. */\n  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;\n  /** The component used for the root node. Either a string to use a HTML element or a component. */\n  component?: React.ElementType;\n  /** The image to display. */\n  image?: string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvCardMediaClasses;\n}\n\nexport const HvCardMedia = ({\n  id,\n  classes,\n  className,\n  children,\n  title,\n  onClick,\n  ...others\n}: HvCardMediaProps) => {\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiCardMedia\n          id={id}\n          classes={{\n            root: cx(cardMediaClasses.root, css(styles.root), classes?.root),\n            media: cx(cardMediaClasses.media, classes?.media),\n          }}\n          className={className}\n          role=\"img\"\n          title={title}\n          onClick={onClick}\n          {...others}\n        >\n          {children}\n        </MuiCardMedia>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvCardMedia","id","classes","className","children","title","onClick","others","ClassNames","css","cx","MuiCardMedia","root","cardMediaClasses","styles","media","role"],"mappings":";;;;;;;;;AA2BO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACa,MAAM;AACtB,wCACGC,MAAAA,YAAU;AAAA,IAAAJ,UACRA,CAAC;AAAA,MAAEK;AAAAA,MAAKC;AAAAA,IAAAA,qCACNC,sBAAAA,SAAY;AAAA,MACXV;AAAAA,MACAC,SAAS;AAAA,QACPU,MAAMF,GAAGG,aAAiBD,QAAAA,MAAMH,IAAIK,aAAAA,OAAOF,IAAI,GAAGV,mCAASU,IAAI;AAAA,QAC/DG,OAAOL,GAAGG,aAAAA,QAAiBE,OAAOb,mCAASa,KAAK;AAAA,MAClD;AAAA,MACAZ;AAAAA,MACAa,MAAK;AAAA,MACLX;AAAAA,MACAC;AAAAA,MAAiB,GACbC;AAAAA,MAAMH;AAAAA,IAAAA,CAED;AAAA,EAAA,CAGF;AAEjB;;"}

package/dist/cjs/components/Card/Media/Media.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Media.styles.cjs","sources":["../../../../../src/components/Card/Media/Media.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\n\nexport const styles: { root: CSSInterpolation } = {\n  root: { width: \"100%\" },\n};\n"],"names":["styles","root","width"],"mappings":";;AAEO,MAAMA,SAAqC;AAAA,EAChDC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AACxB;;"}
+{"version":3,"file":"Media.styles.cjs","sources":["../../../../../src/components/Card/Media/Media.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { HvCardMediaClasses } from \"./mediaClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvCardMediaClasses, CSSInterpolation>\n> = {\n  root: { width: \"100%\" },\n};\n"],"names":["styles","root","width"],"mappings":";;AAGO,MAAMA,SAET;AAAA,EACFC,MAAM;AAAA,IAAEC,OAAO;AAAA,EAAO;AACxB;;"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const ColorPicker_styles = require("./ColorPicker.styles.cjs");
+const colorPickerClasses = require("./colorPickerClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const PresetColors = require("./PresetColors/PresetColors.cjs");
+const Picker = require("./Picker/Picker.cjs");
+const SavedColors = require("./SavedColors/SavedColors.cjs");
+const useTheme = require("../../hooks/useTheme.cjs");
+const useLabels = require("../../hooks/useLabels.cjs");
+const useControlled = require("../../hooks/useControlled.cjs");
+const FormElement = require("../Forms/FormElement/FormElement.cjs");
+const Label = require("../Forms/Label/Label.cjs");
+const setId = require("../../utils/setId.cjs");
+const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
+const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const Panel = require("../Panel/Panel.cjs");
+const DEFAULT_LABELS = {
+  recommendedColorsLabel: "Recommended colors:",
+  customColorsLabel: "Custom colors:"
+};
+const HvColorPicker = ({
+  id,
+  name,
+  required = false,
+  disabled = false,
+  label,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  description,
+  "aria-describedby": ariaDescribedBy,
+  className,
+  classes,
+  value,
+  onChange,
+  defaultValue = "",
+  expanded,
+  defaultExpanded = false,
+  recommendedColorsPosition = "top",
+  recommendedColors = ["#95AFE8", "#E89E5D", "#83B8A6", "#70759C", "#C57E7E", "#FADA95", "#ADBFE8", "#E3B386", "#9AC6B7", "#8B90AF", "#CF9797", "#FAE1AA"],
+  showLabels = true,
+  labels: labelsProp,
+  dropdownIcon = "colorPicker",
+  placeholder = "Select color...",
+  iconOnly = false,
+  showSavedColors = true,
+  showCustomColors = true,
+  savedColorsValue,
+  defaultSavedColorsValue = [],
+  onSavedColorAdded,
+  onSavedColorRemoved,
+  deleteSavedColorButtonArialLabel = "Delete saved color"
+}) => {
+  const {
+    activeTheme
+  } = useTheme.useTheme();
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const [color, setColor] = useControlled.useControlled(value, defaultValue);
+  const [savedColors, setSavedColors] = useControlled.useControlled(savedColorsValue, defaultSavedColorsValue);
+  const elementId = useUniqueId.default(id, "hvdropdown");
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const handleToggle = (_, open) => {
+    setIsOpen(open);
+  };
+  const handleSelect = (val) => {
+    onChange == null ? void 0 : onChange(val.hex);
+    setColor(val.hex);
+  };
+  const handleAddColor = () => {
+    const colorToAdd = color || "#000000";
+    onSavedColorAdded == null ? void 0 : onSavedColorAdded(colorToAdd);
+    setSavedColors([...savedColors, colorToAdd]);
+  };
+  const handleRemoveColor = (val, position) => {
+    if (savedColors[position] === val) {
+      const sColors = [...savedColors];
+      sColors.splice(position, 1);
+      onSavedColorRemoved == null ? void 0 : onSavedColorRemoved(val);
+      setSavedColors(sColors);
+    }
+  };
+  const setFocusToContent = (containerRef) => {
+    const inputs = containerRef == null ? void 0 : containerRef.getElementsByTagName("input");
+    if (inputs && inputs.length > 0) {
+      inputs[0].focus();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
+      id,
+      name,
+      disabled,
+      required,
+      className: cx(colorPickerClasses.default.root, className, classes == null ? void 0 : classes.root),
+      children: [(hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: cx(colorPickerClasses.default.labelContainer, css(ColorPicker_styles.styles.labelContainer), classes == null ? void 0 : classes.labelContainer),
+        children: [hasLabel && /* @__PURE__ */ jsxRuntime.jsx(Label.HvLabel, {
+          id: setId.setId(elementId, "label"),
+          label,
+          className: cx(colorPickerClasses.default.label, css(ColorPicker_styles.styles.label), classes == null ? void 0 : classes.label)
+        }), hasDescription && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, {
+          id: setId.setId(elementId, "description"),
+          className: cx(colorPickerClasses.default.description, classes == null ? void 0 : classes.description),
+          children: description
+        })]
+      }), /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+        className,
+        expanded: isOpen,
+        onToggle: handleToggle,
+        onContainerCreation: setFocusToContent,
+        classes: {
+          root: iconOnly ? cx(colorPickerClasses.default.dropdownRootIconOnly, css(ColorPicker_styles.styles.dropdownRootIconOnly), classes == null ? void 0 : classes.dropdownRootIconOnly) : void 0
+        },
+        adornment: iconOnly && color ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
+          className: cx(colorPickerClasses.default.headerColorIconOnly, css(ColorPicker_styles.styles.headerColorIconOnly), css({
+            "& svg:last-child": {
+              fill: color
+            }
+          }), classes == null ? void 0 : classes.headerColorIconOnly),
+          color: [color]
+        }) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ColorPicker, {
+          className: cx(colorPickerClasses.default.colorPickerIcon, css(ColorPicker_styles.styles.colorPickerIcon), classes == null ? void 0 : classes.colorPickerIcon)
+        }) : void 0,
+        placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, {
+            className: cx(colorPickerClasses.default.headerColorIcon, css(ColorPicker_styles.styles.headerColorIcon), css({
+              "& svg:last-child": {
+                fill: color
+              }
+            }), classes == null ? void 0 : classes.headerColorIcon),
+            color: [color]
+          }), /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
+            className: cx(colorPickerClasses.default.headerColorValue, css(ColorPicker_styles.styles.headerColorValue), classes == null ? void 0 : classes.headerColorValue),
+            variant: activeTheme == null ? void 0 : activeTheme.colorPicker.inputValueVariant,
+            children: color
+          })]
+        }) : placeholder,
+        "aria-label": ariaLabel,
+        "aria-labelledby": [label && setId.setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,
+        "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
+          className: cx(colorPickerClasses.default.panel, css(ColorPicker_styles.styles.panel), classes == null ? void 0 : classes.panel),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: cx(colorPickerClasses.default.colorPicker, css(ColorPicker_styles.styles.colorPicker), classes == null ? void 0 : classes.colorPicker),
+            children: [recommendedColorsPosition === "top" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, {
+              className: cx(colorPickerClasses.default.recommendedColorsRoot, (showCustomColors || showSavedColors) && css({
+                paddingBottom: activeTheme == null ? void 0 : activeTheme.colorPicker.recommendedColorsBottomPadding
+              }), classes == null ? void 0 : classes.recommendedColorsRoot),
+              colors: recommendedColors,
+              onClick: handleSelect,
+              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
+            }), showCustomColors && /* @__PURE__ */ jsxRuntime.jsx(Picker.default, {
+              classes: {
+                fields: recommendedColorsPosition === "bottom" || showSavedColors ? cx(colorPickerClasses.default.pickerFields, css(ColorPicker_styles.styles.pickerFields), classes == null ? void 0 : classes.pickerFields) : void 0
+              },
+              title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
+              color,
+              onChange: handleSelect
+            }), showSavedColors && /* @__PURE__ */ jsxRuntime.jsx(SavedColors.SavedColors, {
+              colors: savedColors,
+              onAddColor: handleAddColor,
+              onClickColor: handleSelect,
+              onRemoveColor: handleRemoveColor,
+              deleteButtonArialLabel: deleteSavedColorButtonArialLabel
+            }), recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(PresetColors.PresetColors, {
+              colors: recommendedColors,
+              onClick: handleSelect,
+              title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0
+            })]
+          })
+        })
+      })]
+    })
+  });
+};
+exports.HvColorPicker = HvColorPicker;
+//# sourceMappingURL=ColorPicker.cjs.map

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { ColorState } from \"react-color\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\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 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;\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 = ({\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,\n  value,\n  onChange,\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}: HvColorPickerProps) => {\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 = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(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    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    css({\n                      \"& svg:last-child\": {\n                        fill: color,\n                      },\n                    }),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      css({\n                        \"& svg:last-child\": {\n                          fill: color,\n                        },\n                      }),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\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\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","adornment","Checkbox","headerColorIconOnly","fill","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  labelContainer: {
+    display: "flex",
+    alignItems: "flex-start"
+  },
+  label: {
+    paddingBottom: "6px",
+    display: "block"
+  },
+  headerColorValue: {
+    textTransform: "uppercase"
+  },
+  headerColorIcon: {
+    width: 24,
+    "& svg": {
+      marginLeft: 0
+    }
+  },
+  panel: {
+    width: "100%",
+    minWidth: uikitStyles.theme.colorPicker.panelMinWidth,
+    display: "flex",
+    justifyContent: "center",
+    padding: uikitStyles.theme.colorPicker.panelPadding,
+    border: uikitStyles.theme.colorPicker.panelBorder,
+    borderRadius: uikitStyles.theme.colorPicker.panelBorderRadius
+  },
+  colorPicker: {
+    width: uikitStyles.theme.colorPicker.colorPickerWidth
+  },
+  colorPickerIcon: {
+    position: "absolute",
+    pointerEvents: "none",
+    top: -1,
+    right: -1
+  },
+  dropdownRootIconOnly: {
+    width: 32,
+    height: 32
+  },
+  headerColorIconOnly: {
+    position: "absolute",
+    pointerEvents: "none",
+    top: -1,
+    right: -1,
+    width: 32,
+    height: 32
+  },
+  pickerFields: {
+    paddingBottom: 20
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=ColorPicker.styles.cjs.map

package/dist/cjs/components/ColorPicker/ColorPicker.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvColorPickerClasses } from \"./colorPickerClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvColorPickerClasses, CSSInterpolation>\n> = {\n  labelContainer: {\n    display: \"flex\",\n    alignItems: \"flex-start\",\n  },\n  label: {\n    paddingBottom: \"6px\",\n    display: \"block\",\n  },\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    border: theme.colorPicker.panelBorder,\n    borderRadius: theme.colorPicker.panelBorderRadius,\n  },\n  colorPicker: {\n    width: theme.colorPicker.colorPickerWidth,\n  },\n  colorPickerIcon: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n  },\n  dropdownRootIconOnly: {\n    width: 32,\n    height: 32,\n  },\n  headerColorIconOnly: {\n    position: \"absolute\",\n    pointerEvents: \"none\",\n    top: -1,\n    right: -1,\n    width: 32,\n    height: 32,\n  },\n  pickerFields: { paddingBottom: 20 },\n};\n"],"names":["styles","labelContainer","display","alignItems","label","paddingBottom","headerColorValue","textTransform","headerColorIcon","width","marginLeft","panel","minWidth","theme","colorPicker","panelMinWidth","justifyContent","padding","panelPadding","border","panelBorder","borderRadius","panelBorderRadius","colorPickerWidth","colorPickerIcon","position","pointerEvents","top","right","dropdownRootIconOnly","height","headerColorIconOnly","pickerFields"],"mappings":";;;AAIO,MAAMA,SAET;AAAA,EACFC,gBAAgB;AAAA,IACdC,SAAS;AAAA,IACTC,YAAY;AAAA,EACd;AAAA,EACAC,OAAO;AAAA,IACLC,eAAe;AAAA,IACfH,SAAS;AAAA,EACX;AAAA,EACAI,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,YAAAA,MAAMC,YAAYC;AAAAA,IAC5Bb,SAAS;AAAA,IACTc,gBAAgB;AAAA,IAChBC,SAASJ,YAAAA,MAAMC,YAAYI;AAAAA,IAC3BC,QAAQN,YAAAA,MAAMC,YAAYM;AAAAA,IAC1BC,cAAcR,YAAAA,MAAMC,YAAYQ;AAAAA,EAClC;AAAA,EACAR,aAAa;AAAA,IACXL,OAAOI,YAAAA,MAAMC,YAAYS;AAAAA,EAC3B;AAAA,EACAC,iBAAiB;AAAA,IACfC,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,EACT;AAAA,EACAC,sBAAsB;AAAA,IACpBpB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAC,qBAAqB;AAAA,IACnBN,UAAU;AAAA,IACVC,eAAe;AAAA,IACfC,KAAK;AAAA,IACLC,OAAO;AAAA,IACPnB,OAAO;AAAA,IACPqB,QAAQ;AAAA,EACV;AAAA,EACAE,cAAc;AAAA,IAAE3B,eAAe;AAAA,EAAG;AACpC;;"}

package/dist/cjs/components/ColorPicker/Fields/Fields.cjs

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("@emotion/react");
+const React = require("react");
+const color = require("react-color/lib/helpers/color");
+const Fields_styles = require("./Fields.styles.cjs");
+const fieldsClasses = require("./fieldsClasses.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Input = require("../../Input/Input.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const color__namespace = /* @__PURE__ */ _interopNamespace(color);
+const Fields = ({
+  className,
+  onChange,
+  rgb,
+  hex,
+  classes
+}) => {
+  const [internalHex, setInternalHex] = React.useState(hex);
+  const [internalRed, setInternalRed] = React.useState(rgb == null ? void 0 : rgb.r);
+  const [internalGreen, setInternalGreen] = React.useState(rgb == null ? void 0 : rgb.g);
+  const [internalBlue, setInternalBlue] = React.useState(rgb == null ? void 0 : rgb.b);
+  const hexInputRef = React.useRef();
+  const redInputRef = React.useRef();
+  const greenInputRef = React.useRef();
+  const blueInputRef = React.useRef();
+  React.useEffect(() => {
+    if (document.activeElement !== hexInputRef.current) {
+      setInternalHex(hex);
+    }
+  }, [hex]);
+  React.useEffect(() => {
+    if (document.activeElement !== redInputRef.current) {
+      setInternalRed(rgb == null ? void 0 : rgb.r);
+    }
+    if (document.activeElement !== greenInputRef.current) {
+      setInternalGreen(rgb == null ? void 0 : rgb.g);
+    }
+    if (document.activeElement !== blueInputRef.current) {
+      setInternalBlue(rgb == null ? void 0 : rgb.b);
+    }
+  }, [rgb]);
+  const handleChange = (data, event) => {
+    if (data.hex && color__namespace.isValidHex(data.hex)) {
+      onChange({
+        hex: data.hex,
+        source: "hex"
+      }, event);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || (rgb == null ? void 0 : rgb.r),
+        g: data.g || (rgb == null ? void 0 : rgb.g),
+        b: data.b || (rgb == null ? void 0 : rgb.b),
+        source: "rgb"
+      }, event);
+    }
+  };
+  const onChangeHex = (event, value) => {
+    setInternalHex(value);
+    handleChange({
+      hex: value
+    }, event);
+  };
+  const onChangeRbg = (event, value, colorPart) => {
+    if (colorPart === "r")
+      setInternalRed(Number(value));
+    if (colorPart === "g")
+      setInternalGreen(Number(value));
+    if (colorPart === "b")
+      setInternalBlue(Number(value));
+    handleChange({
+      r: colorPart === "r" ? Number(value) : rgb == null ? void 0 : rgb.r,
+      g: colorPart === "g" ? Number(value) : rgb == null ? void 0 : rgb.g,
+      b: colorPart === "b" ? Number(value) : rgb == null ? void 0 : rgb.b
+    }, event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: cx(fieldsClasses.default.fields, css(Fields_styles.styles.fields), className, classes == null ? void 0 : classes.fields),
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: hexInputRef,
+        className: cx(fieldsClasses.default.double, css(Fields_styles.styles.double), classes == null ? void 0 : classes.double),
+        label: "HEX",
+        value: internalHex == null ? void 0 : internalHex.replace("#", ""),
+        onChange: onChangeHex,
+        onBlur: () => setInternalHex(hex),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: redInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "R",
+        value: `${internalRed}`,
+        onChange: (event, value) => onChangeRbg(event, value, "r"),
+        onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: greenInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "G",
+        value: `${internalGreen}`,
+        onChange: (event, value) => onChangeRbg(event, value, "g"),
+        onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g),
+        disableClear: true
+      }), /* @__PURE__ */ jsxRuntime.jsx(Input.HvInput, {
+        inputRef: blueInputRef,
+        className: cx(fieldsClasses.default.single, css(Fields_styles.styles.single), classes == null ? void 0 : classes.single),
+        label: "B",
+        value: `${internalBlue}`,
+        onChange: (event, value) => onChangeRbg(event, value, "b"),
+        onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b),
+        disableClear: true
+      })]
+    })
+  });
+};
+exports.Fields = Fields;
+//# sourceMappingURL=Fields.cjs.map

package/dist/cjs/components/ColorPicker/Fields/Fields.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fields.cjs","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { HvInput } from \"@core/components\";\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\nimport * as color from \"react-color/lib/helpers/color\";\nimport { styles } from \"./Fields.styles\";\nimport colorPickerFieldsClasses, {\n  HvColorPickerFieldsClasses,\n} from \"./fieldsClasses\";\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,\n}: FieldsProps) => {\n  const [internalHex, setInternalHex] = useState<string | undefined>(hex);\n  const [internalRed, setInternalRed] = useState<number | undefined>(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState<number | undefined>(\n    rgb?.g\n  );\n  const [internalBlue, setInternalBlue] = useState<number | undefined>(rgb?.b);\n\n  const hexInputRef = useRef();\n  const redInputRef = useRef();\n  const greenInputRef = useRef();\n  const blueInputRef = useRef();\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 = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<HTMLInputElement>,\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    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerFieldsClasses.fields,\n            css(styles.fields),\n            className,\n            classes?.fields\n          )}\n        >\n          <HvInput\n            inputRef={hexInputRef}\n            className={cx(\n              colorPickerFieldsClasses.double,\n              css(styles.double),\n              classes?.double\n            )}\n            label=\"HEX\"\n            value={internalHex?.replace(\"#\", \"\")}\n            onChange={onChangeHex}\n            onBlur={() => setInternalHex(hex)}\n            disableClear\n          />\n          <HvInput\n            inputRef={redInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={greenInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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            inputRef={blueInputRef}\n            className={cx(\n              colorPickerFieldsClasses.single,\n              css(styles.single),\n              classes?.single\n            )}\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    </ClassNames>\n  );\n};\n"],"names":["Fields","className","onChange","rgb","hex","classes","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","ClassNames","children","css","cx","colorPickerFieldsClasses","fields","styles","_jsx","HvInput","inputRef","double","label","replace","onBlur","disableClear","single"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/Fields/Fields.styles.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const styles = {
+  fields: {
+    width: "100%",
+    display: "flex",
+    paddingTop: uikitStyles.theme.colorPicker.fieldsPaddingTop,
+    marginRight: uikitStyles.theme.colorPicker.fieldsMarginRight
+  },
+  single: {
+    maxWidth: uikitStyles.theme.colorPicker.fieldsRgbWidth,
+    paddingLeft: uikitStyles.theme.colorPicker.fieldsRgbPaddingLeft,
+    "& input": {
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  },
+  double: {
+    maxWidth: uikitStyles.theme.colorPicker.fieldsHexWidth,
+    paddingRight: uikitStyles.theme.colorPicker.fieldsHexPaddingRight,
+    "& input": {
+      textTransform: "uppercase",
+      marginLeft: 5,
+      marginRight: 5
+    },
+    "& label": {
+      paddingLeft: 5
+    }
+  }
+};
+exports.styles = styles;
+//# sourceMappingURL=Fields.styles.cjs.map