npm - @hitachivantara/uikit-react-core - Versions diffs - 5.89.0 → 5.91.0 - Mend

@hitachivantara/uikit-react-core 5.89.0 → 5.91.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 (443) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PresetColors.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: ~~string~~[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n const {\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;AAuBa~~,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAEA,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAAA;AAAA,UAC9D;AAAA,QAAA;AAAA,MACF;AAAA,~~MATK~~,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAAA,~~CAW3C~~,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
1	+ {"version":3,"file":"PresetColors.js","sources":["../../../../src/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface PresetColorsProps {\n colors: HvColorAny[];\n onClick: (color: { hex: string; source: string }) => void;\n title?: string;\n className?: string;\n classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = (props: PresetColorsProps) => {\n const {\n onClick,\n colors,\n title,\n className,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n const { classes, cx } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClick({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={cx(classes.root, className)}>\n {title && (\n <HvTypography className={classes.title} variant=\"caption1\">\n {title}\n </HvTypography>\n )}\n <div className={classes.colors}>\n {colors.map((color, index) => (\n <div\n key={`recommended-color-${color}-${index}`}\n className={classes.swatchWrap}\n >\n <Swatch\n color={color}\n style={{ backgroundColor: getColor(color) }}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAwBa,MAAA,eAAe,CAAC,UAA6B;AAClD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,6BAA6B,KAAK;AACtD,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,cAAc,CAAC,QAAgB;AAC3B,YAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAEA,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,6BACE,cAAa,EAAA,WAAW,QAAQ,OAAO,SAAQ,YAC7C,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAW,QAAQ,QACrB,UAAO,OAAA,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,OAAO,EAAE,iBAAiB,SAAS,KAAK,EAAE;AAAA,YAC1C,SAAS;AAAA,YACT,YAAY;AAAA,cACV,WAAW,4CAA4C,KAAK;AAAA,YAAA;AAAA,UAC9D;AAAA,QAAA;AAAA,MACF;AAAA,MAVK,qBAAqB,KAAK,IAAI,KAAK;AAAA,IAAA,CAY3C,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -4,7 +4,7 @@ import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./SavedColors.styles.js";
 import { staticClasses } from "./SavedColors.styles.js";
-import { HvButton } from "../../Button/Button.js";
+import { HvIconButton } from "../../IconButton/IconButton.js";
 const SavedColors = (props) => {
   const {
     colors,
@@ -24,13 +24,12 @@ const SavedColors = (props) => {
   };
   return /* @__PURE__ */ jsxs("div", { className: classes.root, children: [
     /* @__PURE__ */ jsx(
-      HvButton,
+      HvIconButton,
       {
         className: classes.addButton,
         variant: "secondarySubtle",
-        icon: true,
         onClick: onAddColor,
-        "aria-label": addButtonAriaLabel,
+        title: addButtonAriaLabel,
         children: /* @__PURE__ */ jsx(Add, { "aria-hidden": true })
       }
     ),
@@ -50,12 +49,12 @@ const SavedColors = (props) => {
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: classes.removeButtonRoot, children: /* @__PURE__ */ jsx(
-            HvButton,
+            HvIconButton,
             {
               className: classes.removeButton,
               variant: "secondarySubtle",
               onClick: () => onRemoveColor(color, index),
-              "aria-label": deleteButtonAriaLabel,
+              title: deleteButtonAriaLabel,
               children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" })
             }
           ) })

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { ~~HvButton~~ } from \"../../~~Button~~\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n const {\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <~~HvButton~~\n className={classes.addButton}\n variant=\"secondarySubtle\"\n ~~icon\n~~ onClick={onAddColor}\n ~~aria-label~~={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </~~HvButton~~>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <~~HvButton~~\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n ~~aria-label~~={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </~~HvButton~~>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAEA,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,~~MAAI;AAAA,QACJ,~~SAAS;AAAA,QACT,~~cAAY~~;AAAA,~~QAEZ~~,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAAA;AAAA,YAC9D;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,~~cAAY~~;AAAA,~~cAEZ~~,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAK,CAAA;AAAA,YAAA;AAAA,UAAA,EAEvC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MArBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAuBrC,CAAA;AAAA,EAAA,GACH;AAEJ;"}
1	+ {"version":3,"file":"SavedColors.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { Add, CloseXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../../IconButton\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\n\ninterface SavedColorsProps {\n colors: string[];\n onClickColor: (color: { hex: string; source: string }) => void;\n onAddColor: () => void;\n onRemoveColor: (color: string, index: number) => void;\n deleteButtonAriaLabel?: string;\n addButtonAriaLabel?: string;\n classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n const {\n colors,\n onClickColor,\n onAddColor,\n onRemoveColor,\n deleteButtonAriaLabel,\n addButtonAriaLabel,\n classes: classesProp,\n } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n const { classes } = useClasses(classesProp);\n\n const handleClick = (hex: string) => {\n onClickColor({\n hex,\n source: \"hex\",\n });\n };\n\n return (\n <div className={classes.root}>\n <HvIconButton\n className={classes.addButton}\n variant=\"secondarySubtle\"\n onClick={onAddColor}\n title={addButtonAriaLabel}\n >\n <Add aria-hidden />\n </HvIconButton>\n {colors.map((color, index) => (\n <div\n key={`saved-color-${color}-${index}`}\n className={classes.swatchRoot}\n >\n <div className={classes.swatchWrap}>\n <Swatch\n color={color}\n onClick={handleClick}\n focusStyle={{\n boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n }}\n />\n </div>\n <div className={classes.removeButtonRoot}>\n <HvIconButton\n className={classes.removeButton}\n variant=\"secondarySubtle\"\n onClick={() => onRemoveColor(color, index)}\n title={deleteButtonAriaLabel}\n >\n <CloseXS aria-hidden iconSize=\"XS\" />\n </HvIconButton>\n </div>\n </div>\n ))}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;AA0Ba,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,4BAA4B,KAAK;AACrD,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,cAAc,CAAC,QAAgB;AACtB,iBAAA;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAEA,SACG,qBAAA,OAAA,EAAI,WAAW,QAAQ,MACtB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,OAAO;AAAA,QAEP,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAC,CAAA;AAAA,MAAA;AAAA,IACnB;AAAA,IACC,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,QAAQ;AAAA,QAEnB,UAAA;AAAA,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,YACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,SAAS;AAAA,cACT,YAAY;AAAA,gBACV,WAAW,4CAA4C,KAAK;AAAA,cAAA;AAAA,YAC9D;AAAA,UAAA,GAEJ;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,kBACtB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,QAAQ;AAAA,cACnB,SAAQ;AAAA,cACR,SAAS,MAAM,cAAc,OAAO,KAAK;AAAA,cACzC,OAAO;AAAA,cAEP,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAK,CAAA;AAAA,YAAA;AAAA,UAAA,EAEvC,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MArBK,eAAe,KAAK,IAAI,KAAK;AAAA,IAuBrC,CAAA;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -34,7 +34,7 @@ const { staticClasses, useClasses } = createClasses(name, {
     alignItems: "center",
     height: 16,
     width: 16,
-    background: theme.colors.atmo1,
+    background: theme.colors.bgContainer,
     borderRadius: theme.radii.base
   },
   removeButton: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: theme.space.xxs,\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.~~atmo1~~,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}
1	+ {"version":3,"file":"SavedColors.styles.js","sources":["../../../../src/ColorPicker/SavedColors/SavedColors.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nconst name = \"HvColorPicker-SavedColors\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n addButton: {\n margin: theme.space.xxs,\n width: \"32px\",\n height: \"32px\",\n },\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n alignItems: \"center\",\n padding: 0,\n width: \"calc(100% + 8px)\",\n margin: \"-4px -4px\",\n },\n swatchRoot: { position: \"relative\" },\n swatchWrap: {\n width: \"32px\",\n height: \"32px\",\n margin: theme.space.xxs,\n\n \"& > span > div\": {\n borderRadius: theme.radii.base,\n },\n },\n removeButtonRoot: {\n position: \"absolute\",\n top: 0,\n right: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: 16,\n width: 16,\n background: theme.colors.bgContainer,\n borderRadius: theme.radii.base,\n },\n removeButton: {\n height: 16,\n width: 16,\n minWidth: 16,\n minHeight: 16,\n padding: 0,\n margin: 0,\n\n \"& div > span\": {\n height: 16,\n width: 16,\n\n \"& > div\": { height: 16, width: 16 },\n },\n },\n});\n"],"names":[],"mappings":";;AAGA,MAAM,OAAO;AAEN,MAAM,EAAE,eAAe,eAAe,cAAc,MAAM;AAAA,EAC/D,WAAW;AAAA,IACT,QAAQ,MAAM,MAAM;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,EAAE,UAAU,WAAW;AAAA,EACnC,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IAEpB,kBAAkB;AAAA,MAChB,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,kBAAkB;AAAA,IAChB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,OAAO;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IAER,gBAAgB;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,MAEP,WAAW,EAAE,QAAQ,IAAI,OAAO,GAAG;AAAA,IAAA;AAAA,EACrC;AAEJ,CAAC;"}

package/dist/esm/DatePicker/DatePicker.js CHANGED Viewed

@@ -297,7 +297,7 @@ const HvDatePicker = forwardRef(
               onClickOutside: handleCalendarClose,
               onContainerCreation: focusOnContainer,
               placeholder: dateString || placeholder || "",
-              adornment: /* @__PURE__ */ jsx(Calendar, { className: classes.icon, color: "currentcolor" }),
+              adornment: /* @__PURE__ */ jsx(Calendar, { className: classes.icon }),
               popperProps: {
                 modifiers: [
                   { name: "preventOverflow", enabled: escapeWithReference }

package/dist/esm/DatePicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { DEFAULT_LOCALE, isDate } from \"../Calendar/utils\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** Apply button label. /\n applyLabel: \"Apply\",\n /* Cancel button label. /\n cancelLabel: \"Cancel\",\n /* Clear button label. /\n clearLabel: \"Clear\",\n /* Invalid Date label. /\n invalidDateLabel: \"Invalid date\",\n};\n\n/* @deprecated use `HvFormStatus` instead /\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \| \"disablePortal\"\n \| \"expanded\"\n \| \"defaultExpanded\"\n \| \"onToggle\"\n \| \"placeholder\"\n > {\n /\n Identifies the element that provides an error message for the date picker.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the value changes.\n /\n onChange?: (date?: Date, endDate?: Date) => void;\n /\n The callback fired when user clicks on cancel.\n /\n onCancel?: () => void;\n /\n The callback fired when user clicks on clear.\n /\n onClear?: () => void;\n /\n An object containing all the labels for the datepicker.\n /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /\n The initial value of the input when in single calendar mode.\n /\n value?: Date;\n /\n The initial value for the start date when in range mode.\n /\n startValue?: Date;\n /\n The initial value for the end date when in range mode.\n /\n endValue?: Date;\n /\n Flag informing if the the component should be in range mode or in single mode.\n /\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /\n The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n /\n horizontalPlacement?: \"left\" \| \"right\";\n /\n The calendar locale. If undefined, it uses calendar default\n /\n locale?: string;\n /\n Controls if actions buttons are visible at the calendar.\n /\n showActions?: boolean;\n /\n Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n /\n showClear?: boolean;\n /\n Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n /\n escapeWithReference?: boolean;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n An object containing props to be passed onto the baseDropdown.\n /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /\n Additional props passed to the HvCalendar component.\n /\n calendarProps?: Partial<HvCalendarProps>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDatePickerClasses;\n}\n\n/\n A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n /\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n function HvDatePicker(props, ref) {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required,\n disabled,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale = DEFAULT_LOCALE,\n showActions,\n showClear,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value,\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /\n Handles the `Apply` action. Both single and ranged modes are handled here.\n /\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (\n required &&\n (!isDate(startDate) \|\| (rangeMode && !isDate(endDate)))\n ) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n if (rangeMode \|\| showActions) {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n / \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n /\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate \|\| (startDate && endDate) \|\| newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position,\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /\n Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n const dateString = getDateLabel(dateValue, rangeMode, locale);\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n showGutter\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 ref={dropdownForkedRef}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n placeholder: cx(classes.inputText, {\n [classes.dateText]: dateString,\n }),\n container: classes.container,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={dateString \|\| placeholder \|\| \"\"}\n adornment={<Calendar className={classes.icon} color=\"currentcolor\" />}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n {...otherDropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode \|\| showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvDatePicker"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvButton } from \"../Button\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { DEFAULT_LOCALE, isDate } from \"../Calendar/utils\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n isInvalid,\n} from \"../FormElement\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { getDateLabel } from \"./utils\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n /** Apply button label. /\n applyLabel: \"Apply\",\n /* Cancel button label. /\n cancelLabel: \"Cancel\",\n /* Clear button label. /\n clearLabel: \"Clear\",\n /* Invalid Date label. /\n invalidDateLabel: \"Invalid date\",\n};\n\n/* @deprecated use `HvFormStatus` instead /\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n extends Omit<HvFormElementProps, \"onChange\">,\n Pick<\n HvBaseDropdownProps,\n \| \"disablePortal\"\n \| \"expanded\"\n \| \"defaultExpanded\"\n \| \"onToggle\"\n \| \"placeholder\"\n > {\n /\n Identifies the element that provides an error message for the date picker.\n \n Will only be used when the validation status is invalid.\n /\n \"aria-errormessage\"?: string;\n /\n The callback fired when the value changes.\n /\n onChange?: (date?: Date, endDate?: Date) => void;\n /\n The callback fired when user clicks on cancel.\n /\n onCancel?: () => void;\n /\n The callback fired when user clicks on clear.\n /\n onClear?: () => void;\n /\n An object containing all the labels for the datepicker.\n /\n labels?: Partial<typeof DEFAULT_LABELS>;\n /\n The initial value of the input when in single calendar mode.\n /\n value?: Date;\n /\n The initial value for the start date when in range mode.\n /\n startValue?: Date;\n /\n The initial value for the end date when in range mode.\n /\n endValue?: Date;\n /\n Flag informing if the the component should be in range mode or in single mode.\n /\n // TODO: remove this in favour of discriminated union\n rangeMode?: boolean;\n /\n The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n * Note this prop only affects the calendar when in `rangeMode`.\n /\n horizontalPlacement?: \"left\" \| \"right\";\n /\n The calendar locale. If undefined, it uses calendar default\n /\n locale?: string;\n /\n Controls if actions buttons are visible at the calendar.\n /\n showActions?: boolean;\n /\n Controls if clear button is visible at the calendar,\n * only works if showing actions or in range mode.\n /\n showClear?: boolean;\n /\n Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n /\n escapeWithReference?: boolean;\n /\n An element placed before the Calendar\n /\n startAdornment?: React.ReactNode;\n /\n An object containing props to be passed onto the baseDropdown.\n /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /\n Additional props passed to the HvCalendar component.\n /\n calendarProps?: Partial<HvCalendarProps>;\n /\n A Jss Object used to override or extend the component styles applied.\n /\n classes?: HvDatePickerClasses;\n}\n\n/\n A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n /\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n function HvDatePicker(props, ref) {\n const {\n classes: classesProp,\n className,\n\n id,\n name,\n\n required,\n disabled,\n readOnly,\n\n label,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n\n onChange,\n onCancel,\n onClear,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n\n labels: labelsProp,\n\n value,\n startValue,\n endValue,\n\n expanded,\n defaultExpanded,\n onToggle,\n rangeMode = false,\n startAdornment,\n horizontalPlacement = \"right\",\n locale = DEFAULT_LOCALE,\n showActions,\n showClear,\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n calendarProps,\n ...others\n } = useDefaultProps(\"HvDatePicker\", props);\n\n const { classes, cx } = useClasses(classesProp);\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const elementId = useUniqueId(id);\n\n const [validationState, setValidationState] = useControlled<HvFormStatus>(\n status,\n \"standBy\",\n );\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n const [calendarOpen, setCalendarOpen] = useControlled(\n expanded,\n Boolean(defaultExpanded),\n );\n\n const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n rangeMode ? startValue : value,\n );\n const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n const focusTarget = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n useEffect(() => {\n setStartDate(rangeMode ? startValue : value, true);\n setEndDate(endValue, true);\n }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n const endDateIsSet = useRef(false);\n endDateIsSet.current = endDate != null;\n\n useEffect(() => {\n if (startDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: endDateIsSet.current ? \"left\" : \"best\",\n year: startDate.getFullYear(),\n month: startDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, startDate]);\n\n useEffect(() => {\n if (endDate != null) {\n dispatchAction({\n type: \"month_year\",\n target: \"right\",\n year: endDate.getFullYear(),\n month: endDate.getMonth() + 1,\n });\n }\n }, [dispatchAction, endDate]);\n\n /\n Handles the `Apply` action. Both single and ranged modes are handled here.\n /\n const handleApply = () => {\n setStartDate(startDate, true);\n setEndDate(endDate ?? startDate, true);\n\n onChange?.(startDate, endDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (\n required &&\n (!isDate(startDate) \|\| (rangeMode && !isDate(endDate)))\n ) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleCancel = () => {\n rollbackStartDate();\n rollbackEndDate();\n\n onCancel?.();\n\n setCalendarOpen(false);\n };\n\n /\n Handles the `Cancel` action. Both single and ranged modes are handled here.\n /\n const handleClear = () => {\n setStartDate(undefined, false);\n setEndDate(undefined, false);\n onClear?.();\n };\n\n const handleCalendarClose = () => {\n if (rangeMode \|\| showActions) {\n handleCancel();\n }\n };\n\n const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n / \n If evt is null this toggle wasn't triggered by the user.\n instead it was triggered by the baseDropdown useEffect after\n the datepicker changed the expanded value this baseDropdown behavior needs a review\n /\n if (evt === null) return;\n onToggle?.(evt, open);\n setCalendarOpen(open);\n if (!open) handleCalendarClose();\n };\n\n const focusOnContainer = () => {\n focusTarget.current?.focus();\n };\n\n const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n if (!isDate(newDate)) return;\n\n const autoSave = !showActions && !rangeMode;\n\n if (rangeMode) {\n if (!startDate \|\| (startDate && endDate) \|\| newDate < startDate) {\n setStartDate(newDate);\n setEndDate(undefined);\n } else {\n setEndDate(newDate);\n }\n } else {\n setStartDate(newDate, autoSave);\n }\n\n if (autoSave) {\n onChange?.(newDate);\n\n setValidationState(() => {\n // this will only run if status is uncontrolled\n if (required && !isDate(newDate)) {\n return \"invalid\";\n }\n\n return \"valid\";\n });\n\n setCalendarOpen(false);\n }\n };\n\n const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n event,\n newDate,\n position,\n ) => {\n if (!isDate(newDate)) return;\n\n if (!rangeMode) {\n handleDateChange(event as any, newDate);\n return;\n }\n\n if (position === \"left\") {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n } else if (position === \"right\") {\n if (!startDate) {\n if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n return;\n }\n setEndDate(newDate < startDate ? startDate : newDate);\n }\n };\n\n /\n Renders the container for the action elements.\n */\n const renderActions = () => (\n <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n {showClear && (\n <div className={classes.leftContainer}>\n <HvButton\n id={setId(id, \"action\", \"clear\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleClear}\n >\n {labels?.clearLabel}\n </HvButton>\n </div>\n )}\n <div className={classes.rightContainer}>\n <HvButton\n id={setId(id, \"action\", \"apply\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleApply}\n >\n {labels?.applyLabel}\n </HvButton>\n <HvButton\n id={setId(id, \"action\", \"cancel\")}\n className={classes.action}\n variant=\"primaryGhost\"\n onClick={handleCancel}\n >\n {labels?.cancelLabel}\n </HvButton>\n </div>\n </HvActionBar>\n );\n\n const dateValue = rangeMode ? { startDate, endDate } : startDate;\n const dateString = getDateLabel(dateValue, rangeMode, locale);\n\n const hasLabel = label != null;\n const hasDescription = description != null;\n\n // the error message area will only be created if:\n // - an external element that provides an error message isn't identified via aria-errormessage AND\n // - both status and statusMessage properties are being controlled OR\n // - status is uncontrolled and required is true\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) \|\|\n (status === undefined && required));\n\n const isStateInvalid = isInvalid(validationState);\n\n let errorMessageId;\n if (isStateInvalid) {\n errorMessageId = canShowError\n ? setId(elementId, \"error\")\n : ariaErrorMessage;\n }\n\n return (\n <HvFormElement\n id={id}\n name={name}\n value={dateValue}\n status={validationState}\n disabled={disabled}\n required={required}\n className={cx(classes.root, className)}\n readOnly={readOnly}\n {...others}\n >\n {(hasLabel \|\| hasDescription) && (\n <div className={classes.labelContainer}>\n {hasLabel && (\n <HvLabel\n showGutter\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 ref={dropdownForkedRef}\n role=\"combobox\"\n classes={{\n root: classes.dropdown,\n panel: classes.panel,\n header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n headerOpen: classes.dropdownHeaderOpen,\n placeholder: cx(classes.inputText, {\n [classes.dateText]: dateString,\n }),\n container: classes.container,\n }}\n readOnly={readOnly}\n disabled={disabled}\n disablePortal={disablePortal}\n variableWidth\n placement={horizontalPlacement}\n expanded={calendarOpen}\n onToggle={handleToggle}\n onClickOutside={handleCalendarClose}\n onContainerCreation={focusOnContainer}\n placeholder={dateString \|\| placeholder \|\| \"\"}\n adornment={<Calendar className={classes.icon} />}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={\n [label && setId(elementId, \"label\"), ariaLabelledBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n aria-describedby={\n [description && setId(elementId, \"description\"), ariaDescribedBy]\n .join(\" \")\n .trim() \|\| undefined\n }\n {...otherDropdownProps}\n >\n <div ref={focusTarget} tabIndex={-1} />\n <HvCalendar\n id={setId(id, \"calendar\")}\n startAdornment={startAdornment}\n onChange={handleDateChange}\n onInputChange={handleInputDateChange}\n onVisibleDateChange={(_event, type, month, target) => {\n dispatchAction({ type, target, month });\n }}\n locale={locale}\n {...visibleDate}\n {...calendarProps}\n invalidDateLabel={labels?.invalidDateLabel}\n />\n {(rangeMode \|\| showActions) && renderActions()}\n </HvBaseDropdown>\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n disableBorder\n className={cx(classes.error)}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["HvDatePicker"],"mappings":"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"}

package/dist/esm/DatePicker/DatePicker.styles.js CHANGED Viewed

@@ -21,9 +21,8 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
   },
   panel: {},
   dropdownHeaderInvalid: {
-    border: `1px solid ${theme.colors.negative_120}`,
-    "&:hover": {
-      border: `1px solid ${theme.colors.negative_120}`
+    "&,:hover": {
+      borderColor: theme.form.errorColor
     }
   },
   dropdownHeaderOpen: {},

package/dist/esm/DatePicker/DatePicker.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {},\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n ~~border: `1px solid ${theme.colors.negative_120}`,\n~~ \"&:hover\": {\n ~~border~~: ~~`1px solid ${~~theme.~~colors~~.~~negative_120}`,\~~n },\n },\n dropdownHeaderOpen: {},\n icon: {},\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n inputText: {},\n dateText: {\n color: \"inherit\",\n fontWeight: theme.typography.label.fontWeight,\n },\n container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,~~QAAQ,aAAa,MAAM,OAAO,~~YAAY;AAAA,~~IAC9C~~,~~WAAW;AAAA,MACT,QAAQ,~~aAAa,MAAM,~~OAAO,YAAY~~;AAAA,IAAA;AAAA,~~EAElD~~;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}
1	+ {"version":3,"file":"DatePicker.styles.js","sources":["../../../src/DatePicker/DatePicker.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDatePicker\", {\n root: {\n position: \"relative\",\n },\n actionContainer: {\n justifyContent: \"space-between\",\n },\n leftContainer: {},\n rightContainer: {},\n\n labelContainer: {\n display: \"flex\",\n alignItems: \"flex-start\",\n },\n label: {},\n description: {},\n error: {},\n\n dropdown: {\n display: \"block\",\n },\n panel: {},\n\n dropdownHeaderInvalid: {\n \"&,:hover\": {\n borderColor: theme.form.errorColor,\n },\n },\n dropdownHeaderOpen: {},\n icon: {},\n action: {\n \"&:first-of-type\": {\n marginRight: theme.space.xs,\n },\n },\n inputText: {},\n dateText: {\n color: \"inherit\",\n fontWeight: theme.typography.label.fontWeight,\n },\n container: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,UAAU;AAAA,EACZ;AAAA,EACA,iBAAiB;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AAAA,EAEjB,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,OAAO,CAAC;AAAA,EACR,aAAa,CAAC;AAAA,EACd,OAAO,CAAC;AAAA,EAER,UAAU;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,OAAO,CAAC;AAAA,EAER,uBAAuB;AAAA,IACrB,YAAY;AAAA,MACV,aAAa,MAAM,KAAK;AAAA,IAAA;AAAA,EAE5B;AAAA,EACA,oBAAoB,CAAC;AAAA,EACrB,MAAM,CAAC;AAAA,EACP,QAAQ;AAAA,IACN,mBAAmB;AAAA,MACjB,aAAa,MAAM,MAAM;AAAA,IAAA;AAAA,EAE7B;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,UAAU;AAAA,IACR,OAAO;AAAA,IACP,YAAY,MAAM,WAAW,MAAM;AAAA,EACrC;AAAA,EACA,WAAW,CAAA;AACb,CAAC;"}

package/dist/esm/Dialog/Actions/Actions.styles.js CHANGED Viewed

@@ -5,7 +5,7 @@ const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
     margin: 0,
     padding: theme.space.sm,
     backgroundColor: "inherit",
-    borderTop: `3px solid ${theme.colors.atmo2}`,
+    borderTop: `1px solid ${theme.colors.border}`,
     height: 65,
     maxHeight: 65
   },

package/dist/esm/Dialog/Actions/Actions.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin: 0,\n padding: theme.space.sm,\n backgroundColor: \"inherit\",\n borderTop: `~~3px~~ solid ${theme.colors.~~atmo2~~}`,\n height: 65,\n maxHeight: 65,\n },\n fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n spacing: {\n \"& > :not(:first-of-type)\": {\n marginLeft: theme.space.xs,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW,aAAa,MAAM,OAAO,~~KAAK~~;AAAA,~~IAC1C~~,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}
1	+ {"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n root: {\n margin: 0,\n padding: theme.space.sm,\n backgroundColor: \"inherit\",\n borderTop: `1px solid ${theme.colors.border}`,\n height: 65,\n maxHeight: 65,\n },\n fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n spacing: {\n \"& > :not(:first-of-type)\": {\n marginLeft: theme.space.xs,\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW,aAAa,MAAM,OAAO,MAAM;AAAA,IAC3C,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}

package/dist/esm/Dialog/Dialog.styles.js CHANGED Viewed

@@ -2,12 +2,14 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDialog", {
   root: {},
-  background: { background: theme.alpha("atmo4", 0.8) },
+  background: {
+    backgroundColor: theme.colors.bgOverlay
+  },
   paper: {
-    color: theme.colors.secondary,
-    backgroundColor: theme.colors.atmo1,
+    color: theme.colors.text,
+    backgroundColor: theme.colors.bgContainer,
     boxShadow: theme.colors.shadow,
-    borderColor: theme.colors.atmo4,
+    borderColor: theme.colors.border,
     borderRadius: theme.radii.round
   },
   fullscreen: {},

package/dist/esm/Dialog/Dialog.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.styles.js","sources":["../../../src/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: { ~~background~~: theme.~~alpha(\"atmo4\", 0~~.8) },\n paper: {\n color: theme.colors.~~secondary~~,\n backgroundColor: theme.colors.~~atmo1~~,\n boxShadow: theme.colors.shadow,\n borderColor: theme.colors.~~atmo4~~,\n borderRadius: theme.radii.round,\n },\n fullscreen: {},\n fullHeight: {\n height: \"100%\",\n },\n closeButton: {\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n },\n statusBar: {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTopWidth: 4,\n },\n success: {\n borderColor: theme.colors.positive,\n },\n error: {\n borderColor: theme.colors.negative,\n },\n warning: {\n borderColor: theme.colors.warning,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,YAAY,~~EAAE~~,~~YAAY~~,MAAM,~~MAAM~~,~~SAAS,GAAG,EAAE~~;AAAA,~~EACpD~~,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,YAAY,CAAC;AAAA,EACb,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,IACL,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAAA;AAE9B,CAAC;"}
1	+ {"version":3,"file":"Dialog.styles.js","sources":["../../../src/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n root: {},\n background: {\n backgroundColor: theme.colors.bgOverlay,\n },\n paper: {\n color: theme.colors.text,\n backgroundColor: theme.colors.bgContainer,\n boxShadow: theme.colors.shadow,\n borderColor: theme.colors.border,\n borderRadius: theme.radii.round,\n },\n fullscreen: {},\n fullHeight: {\n height: \"100%\",\n },\n closeButton: {\n padding: 0,\n minWidth: \"auto\",\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n width: 32,\n height: 32,\n },\n statusBar: {\n borderTopLeftRadius: 0,\n borderTopRightRadius: 0,\n borderTopWidth: 4,\n },\n success: {\n borderColor: theme.colors.positive,\n },\n error: {\n borderColor: theme.colors.negative,\n },\n warning: {\n borderColor: theme.colors.warning,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,OAAO;AAAA,IACL,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,MAAM,OAAO;AAAA,IACxB,aAAa,MAAM,OAAO;AAAA,IAC1B,cAAc,MAAM,MAAM;AAAA,EAC5B;AAAA,EACA,YAAY,CAAC;AAAA,EACb,YAAY;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,WAAW;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,EAClB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,IACL,aAAa,MAAM,OAAO;AAAA,EAC5B;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,OAAO;AAAA,EAAA;AAE9B,CAAC;"}

package/dist/esm/DotPagination/DotPagination.js CHANGED Viewed

@@ -1,23 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
-import { CurrentStep, OtherStep } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { range } from "../utils/helpers.js";
 import { useClasses } from "./DotPagination.styles.js";
 import { staticClasses } from "./DotPagination.styles.js";
 import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
-import { HvRadio } from "../Radio/Radio.js";
+import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
+const currentStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 8 }, children: /* @__PURE__ */ jsx("div", {}) });
+const otherStep = /* @__PURE__ */ jsx("div", { style: { fontSize: 4 }, children: /* @__PURE__ */ jsx("div", {}) });
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, { width: 8, height: 8 }), {
+    radio: cloneElement(radioIcon || otherStep, {
       className: classes?.icon
     }),
-    radioChecked: cloneElement(
-      radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, { width: 8, height: 8 }),
-      {
-        className: classes?.icon
-      }
-    )
+    radioChecked: cloneElement(radioCheckedIcon || currentStep, {
+      className: classes?.icon
+    })
   };
 };
 const HvDotPagination = (props) => {
@@ -44,18 +42,15 @@ const HvDotPagination = (props) => {
       orientation: "horizontal",
       ...others,
       children: range(pages).map((i) => /* @__PURE__ */ jsx(
-        HvRadio,
+        HvBaseRadio,
         {
-          classes: {
-            radio: classes.radio,
-            root: classes.radioRoot
-          },
+          className: cx(classes.radioRoot, classes.radio),
           value: i,
           checked: page === i,
           onChange: (event) => onPageChange?.(event, i),
           icon: icons.radio,
           checkedIcon: icons.radioChecked,
-          "aria-label": getItemAriaLabel?.(i)
+          inputProps: { "aria-label": getItemAriaLabel?.(i) }
         },
         i
       ))

package/dist/esm/DotPagination/DotPagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport { ~~CurrentStep, OtherStep } from~~ \~~"@hitachivantara/uikit-react-icons\";\nimport {\~~n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { ~~HvRadio~~ } from \"../~~Radio~~\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n extends Omit<HvRadioGroupProps, \"classes\"> {\n /*\n Icon to override the default one used for the unselected state.\n \n The default icon is `OtherStep`.\n /\n unselectedIcon?: React.ReactElement;\n /\n Icon to override the default one used for the selected state.\n \n The default icon is `CurrentStep`.\n /\n selectedIcon?: React.ReactElement;\n /\n The number of pages the component has.\n /\n pages?: number;\n /\n The currently selected page.\n /\n page?: number;\n /\n The callback fired when the page value changes.\n /\n onPageChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n page: number,\n ) => void;\n /\n The callback fired to get the page aria label.\n /\n getItemAriaLabel?: (page: number) => string;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n radioIcon?: React.ReactElement,\n radioCheckedIcon?: React.ReactElement,\n classes?: HvDotPaginationClasses,\n) => {\n return {\n radio: cloneElement(radioIcon \|\| ~~<OtherStep~~ ~~width=~~{~~8} height={8} />, {~~\n className: classes?.icon,\n }),\n radioChecked: cloneElement(\n radioCheckedIcon \|\| ~~<CurrentStep~~ ~~width=~~{~~8} height={8} />,\~~n ~~{\n~~ className: classes?.icon,\n }~~,\n~~ ),\n };\n};\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n const {\n className,\n classes: classesProp,\n unselectedIcon,\n selectedIcon,\n pages = 1,\n page = 0,\n onPageChange,\n getItemAriaLabel,\n ...others\n } = useDefaultProps(\"HvDotPagination\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n return (\n <HvRadioGroup\n className={cx(classes.root, className)}\n classes={{\n horizontal: classes.horizontal,\n }}\n orientation=\"horizontal\"\n {...others}\n >\n {range(pages).map((i) => (\n <~~HvRadio~~\n ~~classes~~={~~{\n radio:~~ classes.~~radio,\n root:~~ classes.~~radioRoot,\n~~ }}\n key={i}\n value={i}\n checked={page === i}\n onChange={(event) => onPageChange?.(event, i)}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n aria-label={getItemAriaLabel?.(i)}\n />\n ))}\n </HvRadioGroup>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;AAuDA~~,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,~~oBAAC,aAAU,OAAO,GAAG,QAAQ,EAAA,CAAG,GAAI~~;AAAA,~~MACnE~~,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc~~;AAAA~~,~~MACZ~~,~~oBAAqB~~,~~oBAAA,aAAA,EAAY,OAAO,GAAG,QAAQ,GAAG~~;AAAA,~~MACtD;AAAA~~,~~QACE,~~WAAW,SAAS;AAAA,~~MAAA;AAAA~~,~~IACtB~~;AAAA,~~EAEJ~~;AACF;AAMa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,~~SAAS;AAAA~~,~~YACP~~,~~OAAO,~~QAAQ~~;AAAA~~,~~YACf~~,~~MAAM,~~QAAQ~~;AAAA~~,~~UAChB~~;AAAA,~~UAEA~~,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,~~cAAY~~,mBAAmB,CAAC;AAAA,QAAA;AAAA,~~QAN3B~~;AAAA,MAQR,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
1	+ {"version":3,"file":"DotPagination.js","sources":["../../../src/DotPagination/DotPagination.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"../RadioGroup\";\nimport { range } from \"../utils/helpers\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nconst currentStep = (\n <div style={{ fontSize: 8 }}>\n <div />\n </div>\n);\n\nconst otherStep = (\n <div style={{ fontSize: 4 }}>\n <div />\n </div>\n);\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n extends Omit<HvRadioGroupProps, \"classes\"> {\n /*\n Icon to override the default one used for the unselected state.\n \n The default icon is `OtherStep`.\n /\n unselectedIcon?: React.ReactElement;\n /\n Icon to override the default one used for the selected state.\n \n The default icon is `CurrentStep`.\n /\n selectedIcon?: React.ReactElement;\n /\n The number of pages the component has.\n /\n pages?: number;\n /\n The currently selected page.\n /\n page?: number;\n /\n The callback fired when the page value changes.\n /\n onPageChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n page: number,\n ) => void;\n /\n The callback fired to get the page aria label.\n /\n getItemAriaLabel?: (page: number) => string;\n /\n A Jss Object used to override or extend the styles applied.\n /\n classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n radioIcon?: React.ReactElement,\n radioCheckedIcon?: React.ReactElement,\n classes?: HvDotPaginationClasses,\n) => {\n return {\n radio: cloneElement(radioIcon \|\| otherStep, {\n className: classes?.icon,\n }),\n radioChecked: cloneElement(radioCheckedIcon \|\| currentStep, {\n className: classes?.icon,\n }),\n };\n};\n\n/\n Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n const {\n className,\n classes: classesProp,\n unselectedIcon,\n selectedIcon,\n pages = 1,\n page = 0,\n onPageChange,\n getItemAriaLabel,\n ...others\n } = useDefaultProps(\"HvDotPagination\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n return (\n <HvRadioGroup\n className={cx(classes.root, className)}\n classes={{\n horizontal: classes.horizontal,\n }}\n orientation=\"horizontal\"\n {...others}\n >\n {range(pages).map((i) => (\n <HvBaseRadio\n className={cx(classes.radioRoot, classes.radio)}\n key={i}\n value={i}\n checked={page === i}\n onChange={(event) => onPageChange?.(event, i)}\n icon={icons.radio}\n checkedIcon={icons.radioChecked}\n inputProps={{ \"aria-label\": getItemAriaLabel?.(i) }}\n />\n ))}\n </HvRadioGroup>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,cACH,oBAAA,OAAA,EAAI,OAAO,EAAE,UAAU,EAAE,GACxB,UAAC,oBAAA,OAAA,CAAA,CAAI,EACP,CAAA;AAGF,MAAM,YACH,oBAAA,OAAA,EAAI,OAAO,EAAE,UAAU,EAAE,GACxB,UAAC,oBAAA,OAAA,CAAA,CAAI,EACP,CAAA;AA8CF,MAAM,mBAAmB,CACvB,WACA,kBACA,YACG;AACI,SAAA;AAAA,IACL,OAAO,aAAa,aAAa,WAAW;AAAA,MAC1C,WAAW,SAAS;AAAA,IAAA,CACrB;AAAA,IACD,cAAc,aAAa,oBAAoB,aAAa;AAAA,MAC1D,WAAW,SAAS;AAAA,IACrB,CAAA;AAAA,EACH;AACF;AAMa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,iBAAiB,gBAAgB,cAAc,OAAO;AAGlE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS;AAAA,QACP,YAAY,QAAQ;AAAA,MACtB;AAAA,MACA,aAAY;AAAA,MACX,GAAG;AAAA,MAEH,UAAM,MAAA,KAAK,EAAE,IAAI,CAAC,MACjB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,WAAW,QAAQ,KAAK;AAAA,UAE9C,OAAO;AAAA,UACP,SAAS,SAAS;AAAA,UAClB,UAAU,CAAC,UAAU,eAAe,OAAO,CAAC;AAAA,UAC5C,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,YAAY,EAAE,cAAc,mBAAmB,CAAC,EAAE;AAAA,QAAA;AAAA,QAN7C;AAAA,MAQR,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/esm/DotPagination/DotPagination.styles.js CHANGED Viewed

@@ -6,20 +6,25 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
     justifyContent: "center"
   },
   horizontal: {
-    width: "auto"
+    width: "auto",
+    gap: theme.space.xs
   },
+  /** @deprecated use `classes.radio` instead */
   radioRoot: {},
   radio: {
     height: 16,
     width: 16,
-    minWidth: 16,
+    minWidth: 24,
+    minHeight: 24,
     color: "inherit",
     "&:hover": {
-      backgroundColor: theme.colors.neutral_20,
-      borderRadius: "100%"
+      borderRadius: theme.radii.full
     }
   },
   icon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
     minWidth: 0,
     width: 16,
     height: 16,
@@ -29,6 +34,13 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
       border: "none",
       width: "unset",
       height: "unset"
+    },
+    "& > div": {
+      color: theme.colors.text,
+      backgroundColor: "currentcolor",
+      width: "1em",
+      height: "1em",
+      borderRadius: "50%"
     }
   }
 });

package/dist/esm/DotPagination/DotPagination.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPagination.styles.js","sources":["../../../src/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n root: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n\n horizontal: {\n width: \"auto\",\n },\n\n radioRoot: {},\n\n radio: {\n height: 16,\n width: 16,\n minWidth: 16,\n color: \"inherit\",\n\n \"&:hover\": {\n ~~backgroundColor~~: theme.~~colors~~.~~neutral_20~~,\n ~~borderRadius: \"100%\",\n~~ },\n },\n\n icon: {\n minWidth: 0,\n width: 16,\n height: 16,\n color: \"inherit\",\n \"&& svg\": {\n color: \"inherit\",\n border: \"none\",\n width: \"unset\",\n height: \"unset\",\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,OAAO;AAAA,~~EACT~~;AAAA,EAEA,WAAW,CAAC;AAAA,EAEZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IAEP,WAAW;AAAA,MACT,~~iBAAiB~~,MAAM,~~OAAO~~;AAAA,~~MAC9B,cAAc;AAAA,~~IAAA;AAAA,~~EAElB~~;AAAA,EAEA,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,~~EACV~~;AAEJ,CAAC;"}
1	+ {"version":3,"file":"DotPagination.styles.js","sources":["../../../src/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvDotPagination\", {\n root: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n\n horizontal: {\n width: \"auto\",\n gap: theme.space.xs,\n },\n /** @deprecated use `classes.radio` instead */\n radioRoot: {},\n\n radio: {\n height: 16,\n width: 16,\n minWidth: 24,\n minHeight: 24,\n color: \"inherit\",\n\n \"&:hover\": {\n borderRadius: theme.radii.full,\n },\n },\n\n icon: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: 0,\n width: 16,\n height: 16,\n color: \"inherit\",\n \"&& svg\": {\n color: \"inherit\",\n border: \"none\",\n width: \"unset\",\n height: \"unset\",\n },\n \"& > div\": {\n color: theme.colors.text,\n backgroundColor: \"currentcolor\",\n width: \"1em\",\n height: \"1em\",\n borderRadius: \"50%\",\n },\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,gBAAgB;AAAA,EAClB;AAAA,EAEA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAEA,WAAW,CAAC;AAAA,EAEZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IAEP,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EAEA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,WAAW;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,IAAA;AAAA,EAChB;AAEJ,CAAC;"}

package/dist/esm/Drawer/Drawer.styles.js CHANGED Viewed

@@ -3,18 +3,18 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDrawer", {
   root: {},
   paper: {
-    backgroundColor: theme.colors.atmo1,
+    backgroundColor: theme.colors.bgContainer,
     padding: 0,
     overflow: "auto",
     boxShadow: theme.colors.shadow
   },
   background: {
-    background: theme.alpha("atmo4", 0.8)
+    backgroundColor: theme.colors.bgOverlay
   },
   closeButton: {
     position: "absolute",
-    top: theme.spacing("sm"),
-    right: theme.spacing("sm")
+    top: theme.space.sm,
+    right: theme.space.sm
   }
 });
 export {

package/dist/esm/Drawer/Drawer.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.styles.js","sources":["../../../src/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n root: {},\n paper: {\n backgroundColor: theme.colors.~~atmo1~~,\n padding: 0,\n overflow: \"auto\",\n boxShadow: theme.colors.shadow,\n },\n background: {\n ~~background~~: theme.~~alpha(\"atmo4\", 0~~.8),\n },\n closeButton: {\n position: \"absolute\",\n top: theme.~~spacing(\"~~sm~~\")~~,\n right: theme.~~spacing(\"~~sm~~\")~~,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,~~YAAY~~,MAAM,~~MAAM,SAAS,GAAG~~;AAAA,~~EACtC~~;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK,MAAM,~~QAAQ,IAAI~~;AAAA,~~IACvB~~,OAAO,MAAM,~~QAAQ,IAAI~~;AAAA,EAAA;~~AAE7B~~,CAAC;"}
1	+ {"version":3,"file":"Drawer.styles.js","sources":["../../../src/Drawer/Drawer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDrawer\", {\n root: {},\n paper: {\n backgroundColor: theme.colors.bgContainer,\n padding: 0,\n overflow: \"auto\",\n boxShadow: theme.colors.shadow,\n },\n background: {\n backgroundColor: theme.colors.bgOverlay,\n },\n closeButton: {\n position: \"absolute\",\n top: theme.space.sm,\n right: theme.space.sm,\n },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM,CAAC;AAAA,EACP,OAAO;AAAA,IACL,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,aAAa;AAAA,IACX,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,OAAO,MAAM,MAAM;AAAA,EAAA;AAEvB,CAAC;"}

package/dist/esm/DropDownMenu/DropDownMenu.js CHANGED Viewed

@@ -83,11 +83,11 @@ const HvDropDownMenu = forwardRef(function HvDropDownMenu2(props, ref) {
     {
       ref,
       id,
-      className: cx(classes.container, classes.icon, className, {
+      className: cx(classes.root, classes.container, classes.icon, className, {
         [classes.iconSelected]: open
+        // TODO: rename to open
       }),
       classes: {
-        root: classes.root,
         container: classes.baseContainer,
         panel: classes.menuListRoot
       },

package/dist/esm/DropDownMenu/DropDownMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" \| \"onToggle\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (\n event:\n \| Event\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /\n The variant to be used in the header.\n * @deprecated Use `variant` instead\n /\n category?: HvButtonVariant;\n /* The variant to be used in the header. /\n variant?: HvButtonVariant;\n /* Button size. /\n size?: HvSize;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n /* An object containing all the labels. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n function HeaderComponent(props, ref) {\n const { open, icon, disabled, ...others } = props;\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n disabled={disabled}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n placement={popperPlacement}\n {...others}\n >\n {icon \|\| <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n );\n },\n);\n\n/\n A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n React.ComponentRef<typeof HvBaseDropdown>,\n HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n labels: labelsProp,\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n\n const listId = setId(id, \"list\");\n\n const handleClose = (\n event:\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n ) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n ref={ref}\n id={id}\n className={cx(classes.container, classes.icon, className, {\n [classes.iconSelected]: open,\n })}\n classes={{\n ~~root: classes.root,\n~~ container: classes.baseContainer,\n panel: classes.menuListRoot,\n }}\n expanded={open && !disabled}\n headerComponent={HeaderComponent}\n // @ts-expect-error infer HeaderComponent typings\n size={size}\n variant={variant ?? category}\n open={open}\n aria-label={labels.dropdownMenu}\n icon={icon}\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={(containerEl) => {\n containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n }}\n {...others}\n >\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvBaseDropdown>\n );\n});\n"],"names":["HeaderComponent","HvDropDownMenu"],"mappings":";;;;;;;;;;;;;;;;AA0BA,MAAM,iBAAiB;AAAA,EACrB,cAAc;AAChB;AA2DA,MAAM,kBAAkB;AAAA,EACtB,SAASA,iBAAgB,OAAO,KAAK;AACnC,UAAM,EAAE,MAAM,MAAM,UAAU,GAAG,OAAW,IAAA;AACtC,UAAA,EAAE,gBAAgB,IAAI,uBAAuB;AAGjD,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAe;AAAA,QACf,iBAAc;AAAA,QACd,WAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAQ,QAAA,oBAAC,qBAAoB,EAAA,MAAK,eAAe,CAAA;AAAA,MAAA;AAAA,IACpD;AAAA,EAAA;AAGN;AAKO,MAAM,iBAAiB,WAG5B,SAASC,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,IAClB,WAAW;AAAA;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAE7C,QAAA,CAAC,MAAM,OAAO,IAAI,cAAc,UAAU,QAAQ,eAAe,CAAC;AAClE,QAAA,KAAK,YAAY,MAAM;AAEvB,QAAA,SAAS,MAAM,IAAI,MAAM;AAEzB,QAAA,cAAc,CAClB,UAIG;AAEH,YAAQ,KAAK;AACb,eAAW,OAAO,KAAK;AAAA,EACzB;AAGM,QAAA,gBAA0C,CAAC,UAAU;AACrD,QAAA,MAAM,OAAO,KAAK,GAAG;AACvB,YAAM,aAAa,iBAAiB,MAAM,IAAI,aAAa,CAAC;AAC5D,YAAM,OAAO,MAAM,WAAW,WAAW,YAAY,WAAW;AAChE,UAAI,KAAiB,YAAA,MAAM,KAAK,MAAA,GAAS,CAAC;AAC1C,kBAAY,KAAK;AAAA,IAAA;AAEnB,UAAM,eAAe;AAAA,EACvB;AAEA,QAAM,YAAY,QAAQ,MAAM,SAAS,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;AAG1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW,GAAG,QAAQ,WAAW,QAAQ,MAAM,WAAW;AAAA,~~QACxD~~,CAAC,QAAQ,YAAY,GAAG;AAAA,MAAA,CACzB;AAAA,MACD,SAAS;AAAA,QACP,~~MAAM,QAAQ;AAAA,QACd,~~WAAW,QAAQ;AAAA,QACnB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,UAAU,QAAQ,CAAC;AAAA,MACnB,iBAAiB;AAAA,MAEjB;AAAA,MACA,SAAS,WAAW;AAAA,MACpB;AAAA,MACA,cAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,UAAU,CAAC,GAAG,MAAM;AAElB,gBAAQ,CAAC;AACT,mBAAW,GAAG,CAAC;AAAA,MACjB;AAAA,MACA;AAAA,MACA,qBAAqB,CAAC,gBAAgB;AACpC,qBAAa,qBAAqB,IAAI,EAAE,CAAC,GAAG,MAAM;AAAA,MACpD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,SAAS,CAAC,OAAO,SAAS;AACpB,gBAAA,CAAC,WAAY,aAAY,KAAK;AAClC,sBAAU,OAAO,IAAI;AAAA,UACvB;AAAA,UACA,WAAW;AAAA,UACX,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ,CAAC;"}
1	+ {"version":3,"file":"DropDownMenu.js","sources":["../../../src/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseDropdown } from \"../BaseDropdown\";\nimport { useBaseDropdownContext } from \"../BaseDropdown/context\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvDropdownButton, HvDropdownButtonProps } from \"../DropdownButton\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvList, HvListProps, HvListValue } from \"../List\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { getPrevNextFocus } from \"../utils/focusableElementFinder\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n dropdownMenu: \"Dropdown menu\",\n};\n\nexport interface HvDropDownMenuProps\n extends HvBaseProps<HTMLDivElement, \"onClick\" \| \"onToggle\"> {\n /** Icon. /\n icon?: React.ReactElement;\n /\n A list containing the elements to be rendered.\n \n - label: The label of the element to be rendered.\n * - selected: The selection state of the element.\n * - disabled: The disabled state of the element.\n * - icon: The icon node to be rendered on the left.\n * - showNavIcon: If true renders the navigation icon on the right.\n /\n dataList: HvListValue[];\n /* Placement of the dropdown. /\n placement?: \"left\" \| \"right\";\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Function executed on toggle of the dropdown. Should receive the open status. /\n onToggle?: (\n event:\n \| Event\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n open: boolean,\n ) => void;\n /* Function executed in each onClick. Should received the clicked element. /\n onClick?: (\n event:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n value: HvListValue,\n ) => void;\n /* Keep the Dropdown Menu opened after clicking one option /\n keepOpened?: boolean;\n /* Defines if the component is disabled. /\n disabled?: boolean;\n /* If true it should be displayed open. /\n expanded?: boolean;\n /* When uncontrolled, defines the initial expanded state. /\n defaultExpanded?: boolean;\n /\n The variant to be used in the header.\n * @deprecated Use `variant` instead\n /\n category?: HvButtonVariant;\n /* The variant to be used in the header. /\n variant?: HvButtonVariant;\n /* Button size. /\n size?: HvSize;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvDropDownMenuClasses;\n /* An object containing all the labels. /\n labels?: Partial<typeof DEFAULT_LABELS>;\n}\n\nconst HeaderComponent = forwardRef<HTMLButtonElement, HvDropdownButtonProps>(\n function HeaderComponent(props, ref) {\n const { open, icon, disabled, ...others } = props;\n const { popperPlacement } = useBaseDropdownContext();\n\n return (\n <HvDropdownButton\n icon\n ref={ref}\n open={open}\n disabled={disabled}\n aria-expanded={open}\n aria-haspopup=\"menu\"\n placement={popperPlacement}\n {...others}\n >\n {icon \|\| <MoreOptionsVertical role=\"presentation\" />}\n </HvDropdownButton>\n );\n },\n);\n\n/\n A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = forwardRef<\n React.ComponentRef<typeof HvBaseDropdown>,\n HvDropDownMenuProps\n>(function HvDropDownMenu(props, ref) {\n const {\n id: idProp,\n classes: classesProp,\n className,\n icon,\n placement = \"right\",\n dataList,\n disablePortal = false,\n onToggle,\n onClick,\n keepOpened = true,\n disabled = false,\n expanded,\n defaultExpanded = false,\n category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n variant,\n size = \"md\",\n labels: labelsProp,\n ...others\n } = useDefaultProps(\"HvDropDownMenu\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n const id = useUniqueId(idProp);\n\n const listId = setId(id, \"list\");\n\n const handleClose = (\n event:\n \| React.KeyboardEvent<HTMLUListElement>\n \| React.ChangeEvent<HTMLInputElement>\n \| React.MouseEvent<HTMLLIElement>,\n ) => {\n // this will only run if uncontrolled\n setOpen(false);\n onToggle?.(event, false);\n };\n\n // If the ESCAPE key is pressed inside the list, the close handler must be called.\n const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n if (isKey(event, \"Tab\")) {\n const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n if (node) setTimeout(() => node.focus(), 0);\n handleClose(event);\n }\n event.preventDefault();\n };\n\n const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n\n return (\n <HvBaseDropdown\n ref={ref}\n id={id}\n className={cx(classes.root, classes.container, classes.icon, className, {\n [classes.iconSelected]: open, // TODO: rename to open\n })}\n classes={{\n container: classes.baseContainer,\n panel: classes.menuListRoot,\n }}\n expanded={open && !disabled}\n headerComponent={HeaderComponent}\n // @ts-expect-error infer HeaderComponent typings\n size={size}\n variant={variant ?? category}\n open={open}\n aria-label={labels.dropdownMenu}\n icon={icon}\n placement={placement}\n variableWidth\n disablePortal={disablePortal}\n onToggle={(e, s) => {\n // this will only run if uncontrolled\n setOpen(s);\n onToggle?.(e, s);\n }}\n disabled={disabled}\n onContainerCreation={(containerEl) => {\n containerEl?.getElementsByTagName(\"li\")[0]?.focus();\n }}\n {...others}\n >\n <HvList\n id={listId}\n values={dataList}\n selectable={false}\n condensed={condensed}\n onClick={(event, item) => {\n if (!keepOpened) handleClose(event);\n onClick?.(event, item);\n }}\n onKeyDown={handleKeyDown}\n classes={{\n root: classes.menuList,\n }}\n />\n </HvBaseDropdown>\n );\n});\n"],"names":["HeaderComponent","HvDropDownMenu"],"mappings":"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"}

package/dist/esm/DropDownMenu/DropDownMenu.styles.js CHANGED Viewed

@@ -1,25 +1,25 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
+  root: {},
+  /** @deprecated use `classes.root` instead */
   container: {},
   baseContainer: {
+    "--r": theme.radii.base,
     "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} 0 ${theme.radii.base} ${theme.radii.base}`
+      borderRadius: "var(--r) 0 var(--r) var(--r)"
     },
     "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
-      borderRadius: `0 ${theme.radii.base} ${theme.radii.base} ${theme.radii.base}`
+      borderRadius: "0 var(--r) var(--r) var(--r)"
     },
     "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} ${theme.radii.base} ${theme.radii.base} 0`
+      borderRadius: "var(--r) var(--r) var(--r) 0"
     },
     "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
-      borderRadius: `${theme.radii.base} ${theme.radii.base} 0 ${theme.radii.base}`
+      borderRadius: "var(--r) var(--r) 0 var(--r)"
     }
   },
-  root: {
-    display: "inline-block",
-    width: "auto"
-  },
+  /** @deprecated use `classes.root` instead */
   icon: {},
   iconSelected: {
     boxShadow: theme.colors.shadow

package/dist/esm/DropDownMenu/DropDownMenu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n container: {},\n baseContainer: {\n \"&[data-popper-placement=bottom-end] .HvBaseDropdown-panel\": {\n borderRadius: ~~`${theme.radii.base}~~ 0 ~~${theme.radii.base}~~ ~~${theme.radii.base}`,\~~n },\n \"&[data-popper-placement=bottom-start] .HvBaseDropdown-panel\": {\n borderRadius: `0 ~~${theme.radii.base}~~ ~~${theme.radii.base}~~ ~~${theme.radii.base}`,\~~n },\n \"&[data-popper-placement=top-start] .HvBaseDropdown-panel\": {\n borderRadius: ~~`${theme.radii.base}~~ ~~${theme.radii.base}~~ ~~${theme.radii.base}~~ 0~~`,\~~n },\n \"&[data-popper-placement=top-end] .HvBaseDropdown-panel\": {\n borderRadius: ~~`${theme.radii.base}~~ ~~${theme.radii.base}~~ 0 ~~${theme.radii.base}`,\~~n },\n },\n root: ~~{\n display:~~ ~~\"inline-block\",\~~n ~~width: \"auto\",\n~~ ~~},\n~~ icon: {},\n iconSelected: {\n boxShadow: theme.colors.shadow,\n },\n menuListRoot: {\n padding: theme.space.sm,\n },\n menuList: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,WAAW,CAAC;AAAA,EACZ,eAAe;AAAA,IACb,~~6DAA6D;AAAA~~,~~MAC3D,cAAc,GAAG,~~MAAM,MAAM,~~IAAI~~,~~MAAM~~,~~MAAM~~,~~MAAM,IAAI,IAAI,MAAM,MAAM,IAAI~~;AAAA,~~IAC7E~~;AAAA,IACA,+DAA+D;AAAA,MAC7D,cAAc~~,KAAK,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI~~;AAAA,~~IAC7E~~;AAAA,IACA,4DAA4D;AAAA,MAC1D,cAAc~~,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI~~;AAAA,~~IAC3E~~;AAAA,IACA,0DAA0D;AAAA,MACxD,cAAc~~,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,IAAI~~;AAAA,IAAA;AAAA,~~EAE/E~~;AAAA~~,EACA,MAAM~~;AAAA,~~IACJ~~,~~SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,~~MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,IACZ,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}
1	+ {"version":3,"file":"DropDownMenu.styles.js","sources":["../../../src/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n root: {},\n /** @deprecated use `classes.root` instead /\n container: {},\n baseContainer: {\n \"--r\": theme.radii.base,\n \"&[data-popper-placement=bottom-end] .HvBaseDropdown-panel\": {\n borderRadius: \"var(--r) 0 var(--r) var(--r)\",\n },\n \"&[data-popper-placement=bottom-start] .HvBaseDropdown-panel\": {\n borderRadius: \"0 var(--r) var(--r) var(--r)\",\n },\n \"&[data-popper-placement=top-start] .HvBaseDropdown-panel\": {\n borderRadius: \"var(--r) var(--r) var(--r) 0\",\n },\n \"&[data-popper-placement=top-end] .HvBaseDropdown-panel\": {\n borderRadius: \"var(--r) var(--r) 0 var(--r)\",\n },\n },\n /* @deprecated use `classes.root` instead */\n icon: {},\n iconSelected: {\n boxShadow: theme.colors.shadow,\n },\n menuListRoot: {\n padding: theme.space.sm,\n },\n menuList: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,WAAW,CAAC;AAAA,EACZ,eAAe;AAAA,IACb,OAAO,MAAM,MAAM;AAAA,IACnB,6DAA6D;AAAA,MAC3D,cAAc;AAAA,IAChB;AAAA,IACA,+DAA+D;AAAA,MAC7D,cAAc;AAAA,IAChB;AAAA,IACA,4DAA4D;AAAA,MAC1D,cAAc;AAAA,IAChB;AAAA,IACA,0DAA0D;AAAA,MACxD,cAAc;AAAA,IAAA;AAAA,EAElB;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,IACZ,SAAS,MAAM,MAAM;AAAA,EACvB;AAAA,EACA,UAAU,CAAA;AACZ,CAAC;"}