npm - @hitachivantara/uikit-react-core - Versions diffs - 5.70.0 → 5.72.0 - Mend

@hitachivantara/uikit-react-core 5.70.0 → 5.72.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 (70) hide show

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

@@ -19,14 +19,7 @@ const HvDropdownButton = forwardRef((props, ref) => {
     ...others
   } = useDefaultProps("HvDropdownButton", props);
   const { classes, cx } = useClasses(classesProp);
-  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(
-    DropDownXS,
-    {
-      iconSize: "XS",
-      style: { rotate: open ? "180deg" : void 0 },
-      className: classes.arrow
-    }
-  );
+  const endIcon = icon ? void 0 : /* @__PURE__ */ jsx(DropDownXS, { iconSize: "XS", style: { rotate: open ? "180deg" : void 0 } });
   return /* @__PURE__ */ jsx(
     HvButton,
     {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n extends Omit<HvButtonProps, \"startAdornment\" \| \"endAdornment\" \| \"classes\"> {\n /** Whether the button is in read only mode when used as a form element. /\n readOnly?: boolean;\n /* Whether the content triggered by the button is opened or not. /\n open?: boolean;\n /* Placement of the content triggered by the button. @default bottom /\n placement?: Placement;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvDropdownButtonClasses;\n}\n\n/\n IMPORTANT: This component is not ready to be exported to external users.\n \n Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n HTMLButtonElement,\n HvDropdownButtonProps\n>((props, ref) => {\n const {\n className,\n classes: classesProp,\n placement = \"bottom\",\n disabled,\n open,\n icon,\n readOnly,\n children,\n variant,\n ...others\n } = useDefaultProps(\"HvDropdownButton\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const endIcon = icon ? undefined : (\n <DropDownXS\n iconSize=\"XS\"\n style={{ rotate: open ? \"180deg\" : undefined }}~~\n className={classes.arrow}\n~~ />\n );\n\n return (\n <HvButton\n ref={ref}\n icon={icon}\n disabled={disabled \|\| readOnly}\n className={cx(\n classes.root,\n {\n [classes.open]: open,\n [classes.openUp]: open && placement.includes(\"top\"),\n [classes.openDown]: open && placement.includes(\"bottom\"),\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n },\n className,\n )}\n classes={{ endIcon: classes.arrowContainer }}\n endIcon={endIcon}\n variant={open ? \"secondarySubtle\" : variant}\n {...others}\n >\n <div className={cx({ [classes.selection]: !icon })}>\n {children && typeof children === \"string\" ? (\n <div className={classes.placeholder}>{children}</div>\n ) : (\n children\n )}\n </div>\n </HvButton>\n );\n});\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;~~AAExC~~,~~QAAA~~,UAAU,OAAO,SACrB~~;AAAA~~,~~IAAC;AAAA~~,~~IAAA;AAAA~~,~~MACC~~,UAAS~~;AAAA~~,~~MACT~~,OAAO,EAAE,QAAQ,OAAO,WAAW,~~OAAU;AAAA~~,~~MAC7C~~,~~WAAW,QAAQ~~;~~AAAA~~,~~IAAA;AAAA,EAAA;AAKrB,~~SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
1	+ {"version":3,"file":"DropdownButton.js","sources":["../../../src/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { Placement } from \"@popperjs/core\";\nimport { DropDownXS } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { staticClasses, useClasses } from \"./DropdownButton.styles\";\n\nexport { staticClasses as dropdownButtonClasses };\n\nexport type HvDropdownButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownButtonProps\n extends Omit<HvButtonProps, \"startAdornment\" \| \"endAdornment\" \| \"classes\"> {\n /** Whether the button is in read only mode when used as a form element. /\n readOnly?: boolean;\n /* Whether the content triggered by the button is opened or not. /\n open?: boolean;\n /* Placement of the content triggered by the button. @default bottom /\n placement?: Placement;\n /* A Jss Object used to override or extend the styles applied. /\n classes?: HvDropdownButtonClasses;\n}\n\n/\n IMPORTANT: This component is not ready to be exported to external users.\n \n Implements the DS dropdown button pattern.\n */\nexport const HvDropdownButton = forwardRef<\n HTMLButtonElement,\n HvDropdownButtonProps\n>((props, ref) => {\n const {\n className,\n classes: classesProp,\n placement = \"bottom\",\n disabled,\n open,\n icon,\n readOnly,\n children,\n variant,\n ...others\n } = useDefaultProps(\"HvDropdownButton\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const endIcon = icon ? undefined : (\n <DropDownXS iconSize=\"XS\" style={{ rotate: open ? \"180deg\" : undefined }} />\n );\n\n return (\n <HvButton\n ref={ref}\n icon={icon}\n disabled={disabled \|\| readOnly}\n className={cx(\n classes.root,\n {\n [classes.open]: open,\n [classes.openUp]: open && placement.includes(\"top\"),\n [classes.openDown]: open && placement.includes(\"bottom\"),\n [classes.disabled]: disabled,\n [classes.readOnly]: readOnly,\n },\n className,\n )}\n classes={{ endIcon: classes.arrowContainer }}\n endIcon={endIcon}\n variant={open ? \"secondarySubtle\" : variant}\n {...others}\n >\n <div className={cx({ [classes.selection]: !icon })}>\n {children && typeof children === \"string\" ? (\n <div className={classes.placeholder}>{children}</div>\n ) : (\n children\n )}\n </div>\n </HvButton>\n );\n});\n"],"names":[],"mappings":";;;;;;;AAgCO,MAAM,mBAAmB,WAG9B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,UAAU,OAAO,SACrB,oBAAC,YAAW,EAAA,UAAS,MAAK,OAAO,EAAE,QAAQ,OAAO,WAAW,OAAa,EAAA,CAAA;AAI1E,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,MAAM,GAAG,QAAQ,UAAU,SAAS,KAAK;AAAA,UAClD,CAAC,QAAQ,QAAQ,GAAG,QAAQ,UAAU,SAAS,QAAQ;AAAA,UACvD,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,EAAE,SAAS,QAAQ,eAAe;AAAA,MAC3C;AAAA,MACA,SAAS,OAAO,oBAAoB;AAAA,MACnC,GAAG;AAAA,MAEJ,UAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,KAAK,CAAC,GAC9C,UAAY,YAAA,OAAO,aAAa,WAC9B,oBAAA,OAAA,EAAI,WAAW,QAAQ,aAAc,UAAS,IAE/C,SAEJ,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

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

@@ -54,9 +54,6 @@ const { staticClasses, useClasses } = createClasses("HvDropdownButton", {
   placeholder: {},
   arrowContainer: {
     marginRight: theme.spacing(-2)
-  },
-  arrow: {
-    transition: "rotate 0.2s ease"
   }
 });
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n [`&.${buttonClasses.subtle}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n [`&.${buttonClasses.ghost}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n root: {\n userSelect: \"none\",\n position: \"relative\",\n\n [`&:not(.${buttonClasses.icon})`]: {\n width: \"100%\",\n minWidth: \"unset\",\n justifyContent: \"flex-start\",\n paddingLeft: theme.space.xs,\n },\n },\n disabled: {\n ...disabledStyle,\n },\n readOnly: {\n userSelect: \"text\",\n ...disabledStyle,\n },\n open: {\n backgroundColor: theme.colors.atmo1,\n },\n openUp: {\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n },\n openDown: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n },\n selection: {\n color: \"inherit\",\n flex: 1,\n textAlign: \"start\",\n overflow: \"auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n placeholder: {},\n arrowContainer: {\n marginRight: theme.spacing(-2),\n },\n ~~arrow: {\n transition: \"rotate 0.2s ease\",\n~~ }~~,\n}~~);\n"],"names":["buttonClasses"],"mappings":";;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKA,gBAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;~~AAAA,EACA,OAAO;AAAA,IACL,YAAY;AAAA,EACd;~~AACF,CAAC;"}
1	+ {"version":3,"file":"DropdownButton.styles.js","sources":["../../../src/DropdownButton/DropdownButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { buttonClasses } from \"../Button\";\n\nconst disabledStyle = {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n [`&.${buttonClasses.subtle}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n [`&.${buttonClasses.ghost}`]: {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n \"&:hover\": { backgroundColor: theme.colors.atmo3 },\n },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropdownButton\", {\n root: {\n userSelect: \"none\",\n position: \"relative\",\n\n [`&:not(.${buttonClasses.icon})`]: {\n width: \"100%\",\n minWidth: \"unset\",\n justifyContent: \"flex-start\",\n paddingLeft: theme.space.xs,\n },\n },\n disabled: {\n ...disabledStyle,\n },\n readOnly: {\n userSelect: \"text\",\n ...disabledStyle,\n },\n open: {\n backgroundColor: theme.colors.atmo1,\n },\n openUp: {\n borderRadius: `0px 0px ${theme.radii.base} ${theme.radii.base}`,\n },\n openDown: {\n borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n },\n selection: {\n color: \"inherit\",\n flex: 1,\n textAlign: \"start\",\n overflow: \"auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n placeholder: {},\n arrowContainer: {\n marginRight: theme.spacing(-2),\n },\n});\n"],"names":["buttonClasses"],"mappings":";;;;AAKA,MAAM,gBAAgB;AAAA,EACpB,iBAAiB,MAAM,OAAO;AAAA,EAC9B,aAAa,MAAM,OAAO;AAAA,EAC1B,CAAC,KAAKA,gBAAc,MAAM,EAAE,GAAG;AAAA,IAC7B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AAAA,EACA,CAAC,KAAKA,gBAAc,KAAK,EAAE,GAAG;AAAA,IAC5B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW,EAAE,iBAAiB,MAAM,OAAO,MAAM;AAAA,EACnD;AACF;AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,CAAC,UAAUA,gBAAc,IAAI,GAAG,GAAG;AAAA,MACjC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,GAAG;AAAA,EACL;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,QAAQ;AAAA,IACN,cAAc,WAAW,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EAC/D;AAAA,EACA,UAAU;AAAA,IACR,cAAc,GAAG,MAAM,MAAM,IAAI,IAAI,MAAM,MAAM,IAAI;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,aAAa,CAAC;AAAA,EACd,gBAAgB;AAAA,IACd,aAAa,MAAM,QAAQ,EAAE;AAAA,EAC/B;AACF,CAAC;"}

package/dist/esm/Forms/Suggestions/Suggestions.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useContext, useRef, useState, useEffect } from "react";
-import MuiPopper from "@mui/material/Popper";
+import { ClickAwayListener } from "@mui/base/ClickAwayListener";
+import { Popper } from "@mui/base/Popper";
 import { useForkRef } from "@mui/material/utils";
-import { useClickOutside } from "../../hooks/useClickOutside.js";
 import { setId } from "../../utils/setId.js";
 import { useClasses } from "./Suggestions.styles.js";
 import { staticClasses } from "./Suggestions.styles.js";
@@ -15,6 +15,7 @@ const HvSuggestions = forwardRef((props, extRef) => {
     className,
     classes: classesProp,
     expanded = false,
+    open: openProp,
     anchorEl,
     suggestionValues = [],
     onClose,
@@ -27,10 +28,6 @@ const HvSuggestions = forwardRef((props, extRef) => {
   const ref = useRef(null);
   const forkedRef = useForkRef(ref, extRef);
   const [isOpen, setIsOpen] = useState(expanded);
-  useClickOutside(ref, (event) => {
-    setIsOpen(false);
-    onClose?.(event);
-  });
   useEffect(() => {
     setIsOpen(expanded);
   }, [expanded]);
@@ -42,30 +39,28 @@ const HvSuggestions = forwardRef((props, extRef) => {
       className: cx(classes.root, className),
       ...others,
       children: /* @__PURE__ */ jsx(
-        MuiPopper,
+        ClickAwayListener,
         {
-          open: isOpen,
-          disablePortal: true,
-          anchorEl,
-          className: classes.popper,
+          onClickAway: (event) => {
+            setIsOpen(false);
+            onClose?.(event);
+          },
           children: /* @__PURE__ */ jsx(
-            HvSelectionList,
+            Popper,
             {
-              className: classes.list,
-              id: setId(localId, "list"),
-              onChange: onSuggestionSelected,
-              children: suggestionValues?.map((item, i) => {
-                const itemKey = item.id || setId("item", i);
-                return /* @__PURE__ */ jsx(
-                  HvListItem,
-                  {
-                    value: item,
-                    disabled: item.disabled || void 0,
-                    children: item.label
-                  },
-                  itemKey
-                );
-              })
+              open: openProp ?? isOpen,
+              disablePortal: true,
+              anchorEl,
+              className: classes.popper,
+              children: /* @__PURE__ */ jsx(
+                HvSelectionList,
+                {
+                  className: classes.list,
+                  id: setId(localId, "list"),
+                  onChange: onSuggestionSelected,
+                  children: suggestionValues?.map((item) => /* @__PURE__ */ jsx(HvListItem, { value: item, disabled: item.disabled, children: item.label }, item.id))
+                }
+              )
             }
           )
         }

package/dist/esm/Forms/Suggestions/Suggestions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport MuiPopper from \"@mui/~~material~~/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport {~~\n HvClickOutsideEvent,\n useClickOutside,\n}~~ ~~from \"../../hooks/useClickOutside\";\nimport {~~ HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n id?: string;\n label: React.ReactNode;\n value?: string;\n disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n /** Whether suggestions is visible. /\n expanded?: boolean;\n /* The HTML element Suggestions attaches to. /\n anchorEl?: HTMLElement \| null;\n /* Array of { id, label, ...others } values to display in the suggestion list /\n suggestionValues?: HvSuggestion[] \| null;\n /* Function called when a suggestion is selected /\n onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n /* Function called when suggestion list is closed /\n onClose?: ~~(event: HvClickOutsideEvent) => void~~;\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n const {\n id,\n className,\n classes: classesProp,\n expanded = false,\n anchorEl,\n suggestionValues = [],\n onClose,\n onSuggestionSelected,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const localId = id ?? setId(elementId, \"suggestions\");\n\n const ref = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef(ref, extRef);\n\n const [isOpen, setIsOpen] = useState(expanded);\n\n ~~useClickOutside(ref, (event) => {\n setIsOpen(false);\n onClose?.(event);\n });\n\n~~ useEffect(() => {\n setIsOpen(expanded);\n }, [expanded]);\n\n return (\n <div\n id={localId}\n ref={forkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <MuiPopper\n open={isOpen}\n disablePortal\n anchorEl={anchorEl}\n className={classes.popper}\n >\n <HvSelectionList\n className={classes.list}\n id={setId(localId, \"list\")}\n onChange={onSuggestionSelected}\n >\n {suggestionValues?.map((item~~, i~~) => ~~{\n const itemKey = item.id \|\| setId~~(\~~"item\", i);\~~n~~\n return (\n~~ <HvListItem\n key={~~itemKey~~}\n value={item}\n disabled={item.disabled ~~\|\| undefined~~}\n >\n {item.label}\n </HvListItem>\n )~~;\n }~~)}\n </HvSelectionList>\n </MuiPopper>\n </div>\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;~~AA0CO~~,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;~~AAExC~~,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;~~AAE7B~~,~~kBAAA,KAAK,CAAC,UAAU;AAC9B,cAAU,KAAK;AACf,cAAU,KAAK;AAAA,EAAA,CAChB;AAED,~~YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,~~UACN~~,eAAa;AAAA,~~UACb~~;AAAA,~~UACA~~,WAAW,QAAQ;AAAA,~~UAEnB~~,UAAA;AAAA,~~YAAC~~;AAAA,~~YAAA~~;AAAA,~~cACC~~,WAAW,QAAQ;AAAA,~~cACnB~~,IAAI,MAAM,SAAS,MAAM;AAAA,~~cACzB~~,UAAU;AAAA,~~cAET~~,UAAkB,kBAAA,IAAI,CAAC,~~MAAM~~,~~MAAM;AAClC~~,~~sBAAM~~,~~UAAU~~,~~KAAK,~~MAAM,~~MAAM~~,~~QAAQ~~,~~CAAC;AAGxC~~,~~uBAAA;AAAA~~,~~kBAAC;AAAA~~,~~kBAAA;AAAA~~,~~oBAEC,OAAO;AAAA,oBACP,UAAU,~~KAAK,~~YAAY;AAAA~~,~~oBAE1B,UAAK,KAAA~~;AAAA,~~kBAAA;AAAA,kBAJD;AAAA,~~gBAAA;AAAA,~~cAKP,CAEH~~;AAAA,YAAA;AAAA,~~UACH~~;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
1	+ {"version":3,"file":"Suggestions.js","sources":["../../../../src/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useRef, useState } from \"react\";\nimport {\n ClickAwayListener,\n ClickAwayListenerProps,\n} from \"@mui/base/ClickAwayListener\";\nimport { Popper as MuiPopper } from \"@mui/base/Popper\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvSelectionList } from \"../../SelectionList\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { staticClasses, useClasses } from \"./Suggestions.styles\";\n\nexport { staticClasses as suggestionsClasses };\n\nexport type HvSuggestionsClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSuggestion {\n id?: string;\n label: React.ReactNode;\n value?: string;\n disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n /** Whether suggestions is visible /\n open?: boolean;\n /* Whether suggestions is visible. @deprecated use `open` instead /\n expanded?: boolean;\n /* The HTML element Suggestions attaches to. /\n anchorEl?: HTMLElement \| null;\n /* Array of { id, label, ...others } values to display in the suggestion list /\n suggestionValues?: HvSuggestion[] \| null;\n /* Function called when a suggestion is selected /\n onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n /* Function called when suggestion list is closed /\n onClose?: ClickAwayListenerProps[\"onClickAway\"];\n /* A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n const {\n id,\n className,\n classes: classesProp,\n expanded = false,\n open: openProp,\n anchorEl,\n suggestionValues = [],\n onClose,\n onSuggestionSelected,\n ...others\n } = props;\n const { classes, cx } = useClasses(classesProp);\n\n const { elementId } = useContext(HvFormElementContext);\n const localId = id ?? setId(elementId, \"suggestions\");\n\n const ref = useRef<HTMLDivElement>(null);\n const forkedRef = useForkRef(ref, extRef);\n\n // TODO: remove controlled+uncontrolled `expanded` prop in v6\n const [isOpen, setIsOpen] = useState(expanded);\n useEffect(() => {\n setIsOpen(expanded);\n }, [expanded]);\n\n return (\n <div\n id={localId}\n ref={forkedRef}\n className={cx(classes.root, className)}\n {...others}\n >\n <ClickAwayListener\n onClickAway={(event) => {\n setIsOpen(false);\n onClose?.(event);\n }}\n >\n <MuiPopper\n open={openProp ?? isOpen}\n disablePortal\n anchorEl={anchorEl}\n className={classes.popper}\n >\n <HvSelectionList\n className={classes.list}\n id={setId(localId, \"list\")}\n onChange={onSuggestionSelected}\n >\n {suggestionValues?.map((item) => (\n <HvListItem key={item.id} value={item} disabled={item.disabled}>\n {item.label}\n </HvListItem>\n ))}\n </HvSelectionList>\n </MuiPopper>\n </ClickAwayListener>\n </div>\n );\n});\n"],"names":["MuiPopper"],"mappings":";;;;;;;;;;;AA4CO,MAAM,gBAAgB,WAAW,CAAC,OAA2B,WAAW;AACvE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN;AAAA,IACA,mBAAmB,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,EAAE,UAAA,IAAc,WAAW,oBAAoB;AACrD,QAAM,UAAU,MAAM,MAAM,WAAW,aAAa;AAE9C,QAAA,MAAM,OAAuB,IAAI;AACjC,QAAA,YAAY,WAAW,KAAK,MAAM;AAGxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,QAAQ;AAC7C,YAAU,MAAM;AACd,cAAU,QAAQ;AAAA,EAAA,GACjB,CAAC,QAAQ,CAAC;AAGX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,CAAC,UAAU;AACtB,sBAAU,KAAK;AACf,sBAAU,KAAK;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAACA;AAAAA,YAAA;AAAA,cACC,MAAM,YAAY;AAAA,cAClB,eAAa;AAAA,cACb;AAAA,cACA,WAAW,QAAQ;AAAA,cAEnB,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,QAAQ;AAAA,kBACnB,IAAI,MAAM,SAAS,MAAM;AAAA,kBACzB,UAAU;AAAA,kBAET,UAAkB,kBAAA,IAAI,CAAC,6BACrB,YAAyB,EAAA,OAAO,MAAM,UAAU,KAAK,UACnD,UAAA,KAAK,SADS,KAAK,EAEtB,CACD;AAAA,gBAAA;AAAA,cACH;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/esm/ListContainer/ListItem/ListItem.styles.js CHANGED Viewed

@@ -13,6 +13,7 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     position: "relative",
+    alignContent: "center",
     "&:not(:last-child)": {
       marginBottom: "8px"
     },

package/dist/esm/ListContainer/ListItem/ListItem.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n root: {\n ...theme.typography.body,\n padding: 0,\n display: \"block\",\n height: \"32px\",\n lineHeight: \"32px\",\n listStyleType: \"none\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n position: \"relative\",\n\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n\n \"&$condensed\": {\n marginBottom: 0,\n },\n\n \"&.HvIsFocused\": {\n ...outlineStyles,\n backgroundColor: theme.colors.atmo3,\n zIndex: 2,\n },\n },\n focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n startAdornment: {},\n endAdornment: {},\n gutters: {\n padding: `0 ${theme.space.xs}`,\n\n \"&$withStartAdornment\": {\n paddingLeft: 0,\n },\n \"&$withEndAdornment\": {\n paddingRight: 0,\n },\n },\n condensed: {},\n interactive: {\n cursor: \"pointer\",\n \"&:not($disabled):not($selected):hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&$disabled\": {\n cursor: \"not-allowed\",\n },\n },\n selected: { backgroundColor: theme.colors.containerBackgroundHover },\n disabled: {\n color: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo3,\n },\n withStartAdornment: {\n \"& > div\": {\n float: \"left\",\n },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg .color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n withEndAdornment: {\n \"& > div\": { float: \"right\" },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg .color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,~~IAEV~~,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}
1	+ {"version":3,"file":"ListItem.styles.js","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n root: {\n ...theme.typography.body,\n padding: 0,\n display: \"block\",\n height: \"32px\",\n lineHeight: \"32px\",\n listStyleType: \"none\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n position: \"relative\",\n alignContent: \"center\",\n\n \"&:not(:last-child)\": {\n marginBottom: \"8px\",\n },\n\n \"&$condensed\": {\n marginBottom: 0,\n },\n\n \"&.HvIsFocused\": {\n ...outlineStyles,\n backgroundColor: theme.colors.atmo3,\n zIndex: 2,\n },\n },\n focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n startAdornment: {},\n endAdornment: {},\n gutters: {\n padding: `0 ${theme.space.xs}`,\n\n \"&$withStartAdornment\": {\n paddingLeft: 0,\n },\n \"&$withEndAdornment\": {\n paddingRight: 0,\n },\n },\n condensed: {},\n interactive: {\n cursor: \"pointer\",\n \"&:not($disabled):not($selected):hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&$disabled\": {\n cursor: \"not-allowed\",\n },\n },\n selected: { backgroundColor: theme.colors.containerBackgroundHover },\n disabled: {\n color: theme.colors.secondary_60,\n backgroundColor: theme.colors.atmo3,\n },\n withStartAdornment: {\n \"& > div\": {\n float: \"left\",\n },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg .color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n withEndAdornment: {\n \"& > div\": { float: \"right\" },\n\n \"& svg\": {\n boxShadow: \"none !important\",\n outline: \"none !important\",\n },\n \"$disabled > svg .color0\": {\n fill: theme.colors.secondary_60,\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,cAAc;AAAA,IAEd,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

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

@@ -23,10 +23,6 @@ const toTime = (value) => {
   const { hours, minutes, seconds } = value;
   return new Time$1(hours, minutes, seconds);
 };
-const getFormat = (timeFormat) => {
-  if (timeFormat == null) return 24;
-  return timeFormat === "12" ? 12 : 24;
-};
 const HvTimePicker = forwardRef(
   (props, ref) => {
     const {
@@ -76,8 +72,8 @@ const HvTimePicker = forwardRef(
       isRequired: required,
       isReadOnly: readOnly,
       isDisabled: disabled,
-      granularity: "second",
-      hourCycle: getFormat(timeFormat),
+      granularity: showSeconds === false ? "minute" : "second",
+      hourCycle: timeFormat === "12" ? 12 : 24,
       onChange: (value) => {
         const { hour: hours, minute: minutes, second: seconds } = value;
         onChange?.({ hours, minutes, seconds });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n TimeFieldStateOptions,\n useTimeFieldState,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue \| null) => {\n if (!value) return value;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nconst getFormat = (timeFormat?: TimeFormat) => {\n if (timeFormat == null) return 24;\n return timeFormat === \"12\" ? 12 : 24;\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" \| \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n \| \"root\"\n \| \"input\"\n \| \"label\"\n \| \"placeholder\"\n \| \"timePopperContainer\"\n \| \"separator\"\n \| \"periodContainer\"\n \| \"formElementRoot\"\n \| \"dropdownPlaceholder\"\n \| \"iconBaseRoot\"\n \| \"error\"\n \| \"labelContainer\"\n \| \"description\"\n \| \"dropdownHeaderInvalid\"\n \| \"dropdownPlaceholderDisabled\"\n \| \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" \| \"value\" \| \"defaultValue\" \| \"onChange\"\n > {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTimePickerClasses;\n /* Current value of the element when _controlled_. Follows the 24-hour format. /\n value?: HvTimePickerValue \| null;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue \| null;\n /* The placeholder value when no time is selected. /\n placeholder?: string;\n /* The placeholder of the hours input. /\n hoursPlaceholder?: string;\n /* The placeholder of the minutes input. /\n minutesPlaceholder?: string;\n /* The placeholder of the seconds input. /\n secondsPlaceholder?: string;\n /\n Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n /\n timeFormat?: TimeFormat;\n /* Whether to show the seconds when using the native time picker /\n showSeconds?: boolean;\n /* Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` /\n locale?: string;\n /* Whether the dropdown is expandable. /\n disableExpand?: boolean;\n /\n Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n /\n onChange?: (value: HvTimePickerValue) => void;\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n /* Extra properties to be passed to the TimePicker's dropdown. /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n /\n The label of the form element.\n \n The form element must be labeled for accessibility reasons.\n * If not provided, an aria-label or aria-labelledby must be provided instead.\n /\n label?: React.ReactNode;\n /\n Provide additional descriptive text for the form element.\n /\n description?: React.ReactNode;\n}\n\n/\n A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n ...others\n } = useDefaultProps(\"HvTimePicker\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const timeFieldRef = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: \"second\",\n hourCycle: getFormat(timeFormat),\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps, descriptionProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n timeFieldRef,\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n );\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 = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n {description && (\n <HvInfoMessage\n className={classes.description}\n {...descriptionProps}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={timeFieldRef}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={fieldProps[\"aria-labelledby\"]}\n aria-describedby={fieldProps[\"aria-describedby\"]}\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...otherDropdownProps}\n >\n <div ref={timeFieldRef} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["Time","TimeIcon"],"mappings":"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"}
1	+ {"version":3,"file":"TimePicker.js","sources":["../../../src/TimePicker/TimePicker.tsx"],"sourcesContent":["import { forwardRef, useMemo, useRef, useState } from \"react\";\nimport { Time } from \"@internationalized/date\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport { useTimeField } from \"@react-aria/datepicker\";\nimport {\n useTimeFieldState,\n type TimeFieldStateOptions,\n} from \"@react-stately/datepicker\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n HvFormElement,\n HvFormElementProps,\n HvFormStatus,\n HvInfoMessage,\n HvLabel,\n HvWarningText,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { setId } from \"../utils/setId\";\nimport { Placeholder, PlaceholderProps } from \"./Placeholder\";\nimport { staticClasses, useClasses } from \"./TimePicker.styles\";\nimport { Unit } from \"./Unit\";\n\nconst toTime = (value?: HvTimePickerValue \| null) => {\n if (!value) return value;\n const { hours, minutes, seconds } = value;\n return new Time(hours, minutes, seconds);\n};\n\nexport { staticClasses as timePickerClasses };\n\nexport type TimeFormat = \"12\" \| \"24\";\n\nexport type HvTimePickerClasses = ExtractNames<typeof useClasses>;\n\nexport type HvTimePickerClassKey =\n \| \"root\"\n \| \"input\"\n \| \"label\"\n \| \"placeholder\"\n \| \"timePopperContainer\"\n \| \"separator\"\n \| \"periodContainer\"\n \| \"formElementRoot\"\n \| \"dropdownPlaceholder\"\n \| \"iconBaseRoot\"\n \| \"error\"\n \| \"labelContainer\"\n \| \"description\"\n \| \"dropdownHeaderInvalid\"\n \| \"dropdownPlaceholderDisabled\"\n \| \"dropdownHeaderOpen\";\n\nexport type HvTimePickerValue = {\n hours: number;\n minutes: number;\n seconds: number;\n};\n\nexport interface HvTimePickerProps\n extends Omit<\n HvFormElementProps,\n \"classes\" \| \"value\" \| \"defaultValue\" \| \"onChange\"\n > {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTimePickerClasses;\n /* Current value of the element when _controlled_. Follows the 24-hour format. /\n value?: HvTimePickerValue \| null;\n /* Initial value of the element when _uncontrolled_. Follows the 24-hour format. /\n defaultValue?: HvTimePickerValue \| null;\n /* The placeholder value when no time is selected. /\n placeholder?: string;\n /* The placeholder of the hours input. /\n hoursPlaceholder?: string;\n /* The placeholder of the minutes input. /\n minutesPlaceholder?: string;\n /* The placeholder of the seconds input. /\n secondsPlaceholder?: string;\n /\n Whether the time picker should show the AM/PM 12-hour clock or the 24-hour one.\n * If undefined, the component will use a format according to the passed locale.\n /\n timeFormat?: TimeFormat;\n /* Whether to visually show the seconds control /\n showSeconds?: boolean;\n /* Locale that will provide the time format(12 or 24 hour format). It is \"overwritten\" by `showAmPm` /\n locale?: string;\n /* Whether the dropdown is expandable. /\n disableExpand?: boolean;\n /\n Callback function to be triggered when the input value is changed.\n * It is invoked with a `{hours, minutes, seconds}` object, always in the 24h format\n /\n onChange?: (value: HvTimePickerValue) => void;\n /* Callback called when dropdown changes the expanded state. /\n onToggle?: (event: Event, isOpen: boolean) => void;\n /* Disable the portal behavior. The children stay within it's parent DOM hierarchy. /\n disablePortal?: boolean;\n /* Sets if the calendar container should follow the date picker input out of the screen or stay visible. /\n escapeWithReference?: boolean;\n /* Extra properties to be passed to the TimePicker's dropdown. /\n dropdownProps?: Partial<HvBaseDropdownProps>;\n}\n\n/\n A Time Picker allows the user to choose a specific time or a time range.\n */\nexport const HvTimePicker = forwardRef<HTMLDivElement, HvTimePickerProps>(\n (props, ref) => {\n const {\n classes: classesProp,\n className,\n\n id: idProp,\n name,\n required = false,\n disabled = false,\n readOnly = false,\n label,\n\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n description,\n \"aria-describedby\": ariaDescribedBy,\n status,\n statusMessage,\n \"aria-errormessage\": ariaErrorMessage,\n\n placeholder,\n hoursPlaceholder = \"hh\",\n minutesPlaceholder = \"mm\",\n secondsPlaceholder = \"ss\",\n\n value: valueProp,\n defaultValue: defaultValueProp,\n\n timeFormat,\n showSeconds,\n disableExpand,\n locale = \"en\",\n\n onToggle,\n onChange,\n\n // misc properties:\n disablePortal = true,\n escapeWithReference = true,\n dropdownProps = {},\n ...others\n } = useDefaultProps(\"HvTimePicker\", props);\n\n const id = useUniqueId(idProp);\n\n const { classes, cx } = useClasses(classesProp);\n\n const timeFieldRef = useRef<HTMLDivElement>(null);\n\n const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n const dropdownForkedRef = useForkRef(ref, refProp);\n\n const stateProps: TimeFieldStateOptions = {\n value: toTime(valueProp),\n defaultValue: toTime(defaultValueProp),\n label,\n locale,\n isRequired: required,\n isReadOnly: readOnly,\n isDisabled: disabled,\n granularity: showSeconds === false ? \"minute\" : \"second\",\n hourCycle: timeFormat === \"12\" ? 12 : 24,\n onChange: (value) => {\n const { hour: hours, minute: minutes, second: seconds } = value;\n onChange?.({ hours, minutes, seconds });\n },\n };\n const state = useTimeFieldState(stateProps);\n const { labelProps, fieldProps, descriptionProps } = useTimeField(\n {\n ...stateProps,\n id,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n },\n state,\n timeFieldRef,\n );\n\n const [open, setOpen] = useState(false);\n\n const [validationMessage] = useControlled(statusMessage, \"Required\");\n const [validationState] = useControlled<HvFormStatus>(status, \"standBy\");\n\n const placeholders: PlaceholderProps[\"placeholders\"] = useMemo(\n () => ({\n hour: hoursPlaceholder,\n minute: minutesPlaceholder,\n second: secondsPlaceholder,\n }),\n [hoursPlaceholder, minutesPlaceholder, secondsPlaceholder],\n );\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 = validationState === \"invalid\";\n const errorMessageId = isStateInvalid\n ? canShowError\n ? setId(id, \"error\")\n : ariaErrorMessage\n : undefined;\n\n return (\n <HvFormElement\n name={name}\n required={required}\n disabled={disabled}\n status={validationState}\n className={cx(classes.root, className)}\n {...others}\n >\n {(label \|\| description) && (\n <div className={classes.labelContainer}>\n {label && (\n <HvLabel\n label={label}\n className={classes.label}\n {...labelProps}\n />\n )}\n {description && (\n <HvInfoMessage\n className={classes.description}\n {...descriptionProps}\n >\n {description}\n </HvInfoMessage>\n )}\n </div>\n )}\n\n <HvBaseDropdown\n ref={dropdownForkedRef}\n role=\"combobox\"\n variableWidth\n disabled={disabled}\n readOnly={readOnly}\n placeholder={\n placeholder && !state.value ? (\n placeholder\n ) : (\n <Placeholder\n ref={timeFieldRef}\n name={name}\n state={state}\n placeholders={placeholders}\n className={cx(classes.placeholder, {\n [classes.placeholderDisabled]: disabled,\n })}\n {...fieldProps}\n />\n )\n }\n classes={{\n header: cx(classes.dropdownHeader, {\n [classes.dropdownHeaderInvalid]: isStateInvalid,\n }),\n panel: classes.dropdownPanel,\n headerOpen: classes.dropdownHeaderOpen,\n }}\n placement=\"right\"\n adornment={\n <TimeIcon\n color={disabled ? \"secondary_60\" : undefined}\n className={classes.icon}\n />\n }\n expanded={open}\n onToggle={(evt, newOpen) => {\n if (disableExpand) return;\n setOpen(newOpen);\n onToggle?.(evt, newOpen);\n }}\n onContainerCreation={(containerRef) => {\n containerRef?.getElementsByTagName(\"input\")[0]?.focus();\n }}\n aria-haspopup=\"dialog\"\n aria-label={ariaLabel}\n aria-labelledby={fieldProps[\"aria-labelledby\"]}\n aria-describedby={fieldProps[\"aria-describedby\"]}\n aria-invalid={isStateInvalid ? true : undefined}\n aria-errormessage={errorMessageId}\n disablePortal={disablePortal}\n popperProps={{\n modifiers: [\n { name: \"preventOverflow\", enabled: escapeWithReference },\n ],\n }}\n {...otherDropdownProps}\n >\n <div ref={timeFieldRef} className={classes.timePopperContainer}>\n {state.segments.map((segment, i) => (\n <Unit\n key={i}\n state={state}\n segment={segment}\n placeholder={placeholders[segment.type]}\n onAdd={() => state.increment(segment.type)}\n onSub={() => state.decrement(segment.type)}\n onChange={(evt, val) => {\n state.setSegment(segment.type, Number(val));\n }}\n />\n ))}\n </div>\n </HvBaseDropdown>\n\n {canShowError && (\n <HvWarningText\n id={setId(id, \"error\")}\n disableBorder\n className={classes.error}\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n },\n);\n"],"names":["Time","TimeIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,MAAM,SAAS,CAAC,UAAqC;AAC/C,MAAA,CAAC,MAAc,QAAA;AACnB,QAAM,EAAE,OAAO,SAAS,QAAA,IAAY;AACpC,SAAO,IAAIA,OAAK,OAAO,SAAS,OAAO;AACzC;AAgFO,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MAEA,IAAI;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MAEA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MAErB;AAAA,MACA,mBAAmB;AAAA,MACnB,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MAErB,OAAO;AAAA,MACP,cAAc;AAAA,MAEd;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MAET;AAAA,MACA;AAAA;AAAA,MAGA,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,gBAAgB,CAAC;AAAA,MACjB,GAAG;AAAA,IAAA,IACD,gBAAgB,gBAAgB,KAAK;AAEnC,UAAA,KAAK,YAAY,MAAM;AAE7B,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,OAAuB,IAAI;AAEhD,UAAM,EAAE,KAAK,SAAS,GAAG,uBAAuB;AAC1C,UAAA,oBAAoB,WAAW,KAAK,OAAO;AAEjD,UAAM,aAAoC;AAAA,MACxC,OAAO,OAAO,SAAS;AAAA,MACvB,cAAc,OAAO,gBAAgB;AAAA,MACrC;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa,gBAAgB,QAAQ,WAAW;AAAA,MAChD,WAAW,eAAe,OAAO,KAAK;AAAA,MACtC,UAAU,CAAC,UAAU;AACnB,cAAM,EAAE,MAAM,OAAO,QAAQ,SAAS,QAAQ,QAAY,IAAA;AAC1D,mBAAW,EAAE,OAAO,SAAS,QAAS,CAAA;AAAA,MACxC;AAAA,IAAA;AAEI,UAAA,QAAQ,kBAAkB,UAAU;AAC1C,UAAM,EAAE,YAAY,YAAY,iBAAqB,IAAA;AAAA,MACnD;AAAA,QACE,GAAG;AAAA,QACH;AAAA,QACA,cAAc;AAAA,QACd,mBAAmB;AAAA,QACnB,oBAAoB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AACnE,UAAM,CAAC,eAAe,IAAI,cAA4B,QAAQ,SAAS;AAEvE,UAAM,eAAiD;AAAA,MACrD,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,MAAA;AAAA,MAEV,CAAC,kBAAkB,oBAAoB,kBAAkB;AAAA,IAAA;AAOrD,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,iBAAiB,oBAAoB;AAC3C,UAAM,iBAAiB,iBACnB,eACE,MAAM,IAAI,OAAO,IACjB,mBACF;AAGF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,SAAS,gBACT,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,SAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,WAAW,QAAQ;AAAA,gBAClB,GAAG;AAAA,cAAA;AAAA,YACN;AAAA,YAED,eACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,QAAQ;AAAA,gBAClB,GAAG;AAAA,gBAEH,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA,aACE,eAAe,CAAC,MAAM,QACpB,cAEA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,kBACL;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,WAAW,GAAG,QAAQ,aAAa;AAAA,oBACjC,CAAC,QAAQ,mBAAmB,GAAG;AAAA,kBAAA,CAChC;AAAA,kBACA,GAAG;AAAA,gBAAA;AAAA,cACN;AAAA,cAGJ,SAAS;AAAA,gBACP,QAAQ,GAAG,QAAQ,gBAAgB;AAAA,kBACjC,CAAC,QAAQ,qBAAqB,GAAG;AAAA,gBAAA,CAClC;AAAA,gBACD,OAAO,QAAQ;AAAA,gBACf,YAAY,QAAQ;AAAA,cACtB;AAAA,cACA,WAAU;AAAA,cACV,WACE;AAAA,gBAACC;AAAAA,gBAAA;AAAA,kBACC,OAAO,WAAW,iBAAiB;AAAA,kBACnC,WAAW,QAAQ;AAAA,gBAAA;AAAA,cACrB;AAAA,cAEF,UAAU;AAAA,cACV,UAAU,CAAC,KAAK,YAAY;AAC1B,oBAAI,cAAe;AACnB,wBAAQ,OAAO;AACf,2BAAW,KAAK,OAAO;AAAA,cACzB;AAAA,cACA,qBAAqB,CAAC,iBAAiB;AACrC,8BAAc,qBAAqB,OAAO,EAAE,CAAC,GAAG,MAAM;AAAA,cACxD;AAAA,cACA,iBAAc;AAAA,cACd,cAAY;AAAA,cACZ,mBAAiB,WAAW,iBAAiB;AAAA,cAC7C,oBAAkB,WAAW,kBAAkB;AAAA,cAC/C,gBAAc,iBAAiB,OAAO;AAAA,cACtC,qBAAmB;AAAA,cACnB;AAAA,cACA,aAAa;AAAA,gBACX,WAAW;AAAA,kBACT,EAAE,MAAM,mBAAmB,SAAS,oBAAoB;AAAA,gBAC1D;AAAA,cACF;AAAA,cACC,GAAG;AAAA,cAEJ,UAAC,oBAAA,OAAA,EAAI,KAAK,cAAc,WAAW,QAAQ,qBACxC,UAAA,MAAM,SAAS,IAAI,CAAC,SAAS,MAC5B;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC;AAAA,kBACA;AAAA,kBACA,aAAa,aAAa,QAAQ,IAAI;AAAA,kBACtC,OAAO,MAAM,MAAM,UAAU,QAAQ,IAAI;AAAA,kBACzC,OAAO,MAAM,MAAM,UAAU,QAAQ,IAAI;AAAA,kBACzC,UAAU,CAAC,KAAK,QAAQ;AACtB,0BAAM,WAAW,QAAQ,MAAM,OAAO,GAAG,CAAC;AAAA,kBAC5C;AAAA,gBAAA;AAAA,gBARK;AAAA,cAUR,CAAA,GACH;AAAA,YAAA;AAAA,UACF;AAAA,UAEC,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,IAAI,OAAO;AAAA,cACrB,eAAa;AAAA,cACb,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

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

@@ -49,7 +49,7 @@ const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
     disabled = false,
     ...others
   } = useDefaultProps("HvTypography", props);
-  const { classes, cx } = useClasses(classesProp);
+  const { classes, css, cx } = useClasses(classesProp);
   const { activeTheme } = useTheme();
   const variant = mapVariant(variantProp, activeTheme?.base);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
@@ -58,6 +58,7 @@ const HvTypography = fixedForwardRef(function HvTypography2(props, ref) {
     {
       ref,
       className: cx(
+        css({ ...activeTheme?.typography[variant] }),
         classes.root,
         classes[variant],
         {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n captionLabel: \"p\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n \"3xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n xlTitle: \"h1\",\n lTitle: \"h2\",\n mTitle: \"h3\",\n sTitle: \"h4\",\n xsTitle: \"h5\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n highlightText: \"p\",\n normalText: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} satisfies Record<\n HvTypographyVariants \| HvTypographyLegacyVariants,\n React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Typography. /\n variant?: HvTypographyVariants \| HvTypographyLegacyVariants;\n /* If `true` the typography will display the look of a link. /\n link?: boolean;\n /* If `true` the typography will display the look of a disabled state. /\n disabled?: boolean;\n /\n If `true`, the typography will render a \"p\" element\n * @deprecated use `component=\"p\"` instead\n * /\n paragraph?: boolean;\n /\n If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n \n Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n /\n noWrap?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTypographyClasses;\n }\n >;\n\n/\n Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n noWrap = false,\n paragraph = false,\n disabled = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.base);\n\n const Component =\n ComponentProp \|\| (paragraph && \"p\") \|\| HvTypographyMap[variant] \|\| \"span\";\n\n return (\n <Component\n ref={ref}\n className={cx(\n classes.root,\n classes[variant],\n {\n [classes.isLink]: link,\n [classes.noWrap]: noWrap,\n [classes.disabled]: disabled,\n },\n className,\n )}\n disabled={disabled}\n {...others}\n />\n );\n});\n"],"names":["HvTypography"],"mappings":";;;;;;AAsBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;~~AACxC~~,QAAA,EAAE,gBAAgB;AAExB,QAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,QAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
1	+ {"version":3,"file":"Typography.js","sources":["../../../src/Typography/Typography.tsx"],"sourcesContent":["import {\n useDefaultProps,\n useTheme,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport {\n fixedForwardRef,\n PolymorphicComponentRef,\n PolymorphicRef,\n} from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\nimport {\n HvTypographyLegacyVariants,\n HvTypographyVariants,\n mapVariant,\n} from \"./utils\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n display: \"h1\",\n title1: \"h1\",\n title2: \"h2\",\n title3: \"h3\",\n title4: \"h4\",\n body: \"p\",\n label: \"span\",\n captionLabel: \"p\",\n caption1: \"p\",\n caption2: \"p\",\n // LEGACY\n \"5xlTitle\": \"h1\",\n \"4xlTitle\": \"h1\",\n \"3xlTitle\": \"h1\",\n xxlTitle: \"h1\",\n xlTitle: \"h1\",\n lTitle: \"h2\",\n mTitle: \"h3\",\n sTitle: \"h4\",\n xsTitle: \"h5\",\n xxsTitle: \"h6\",\n sectionTitle: \"p\",\n highlightText: \"p\",\n normalText: \"p\",\n placeholderText: \"p\",\n link: \"p\",\n disabledText: \"p\",\n selectedNavText: \"p\",\n vizText: \"p\",\n vizTextDisabled: \"p\",\n xsInlineLink: \"p\",\n} satisfies Record<\n HvTypographyVariants \| HvTypographyLegacyVariants,\n React.ElementType\n>;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n PolymorphicComponentRef<\n C,\n {\n /** Use the variant prop to change the visual style of the Typography. /\n variant?: HvTypographyVariants \| HvTypographyLegacyVariants;\n /* If `true` the typography will display the look of a link. /\n link?: boolean;\n /* If `true` the typography will display the look of a disabled state. /\n disabled?: boolean;\n /\n If `true`, the typography will render a \"p\" element\n * @deprecated use `component=\"p\"` instead\n * /\n paragraph?: boolean;\n /\n If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n \n Note that text overflow can only happen with block or inline-block level elements\n * (the element needs to have a width in order to overflow).\n /\n noWrap?: boolean;\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvTypographyClasses;\n }\n >;\n\n/\n Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography = fixedForwardRef(function HvTypography<\n C extends React.ElementType = \"p\",\n>(props: HvTypographyProps<C>, ref: PolymorphicRef<C>) {\n const {\n className,\n component: ComponentProp,\n classes: classesProp,\n variant: variantProp = \"body\",\n link = false,\n noWrap = false,\n paragraph = false,\n disabled = false,\n ...others\n } = useDefaultProps(\"HvTypography\", props);\n const { classes, css, cx } = useClasses(classesProp);\n const { activeTheme } = useTheme();\n\n const variant = mapVariant(variantProp, activeTheme?.base);\n\n const Component =\n ComponentProp \|\| (paragraph && \"p\") \|\| HvTypographyMap[variant] \|\| \"span\";\n\n return (\n <Component\n ref={ref}\n className={cx(\n css({ ...activeTheme?.typography[variant] }),\n classes.root,\n classes[variant],\n {\n [classes.isLink]: link,\n [classes.noWrap]: noWrap,\n [classes.disabled]: disabled,\n },\n className,\n )}\n disabled={disabled}\n {...others}\n />\n );\n});\n"],"names":["HvTypography"],"mappings":";;;;;;AAsBA,MAAM,kBAAkB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAmCO,MAAM,eAAe,gBAAgB,SAASA,cAEnD,OAA6B,KAAwB;AAC/C,QAAA;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS,cAAc;AAAA,IACvB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,gBAAgB,KAAK;AACzC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AAExB,QAAM,UAAU,WAAW,aAAa,aAAa,IAAI;AAEzD,QAAM,YACJ,iBAAkB,aAAa,OAAQ,gBAAgB,OAAO,KAAK;AAGnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,IAAI,EAAE,GAAG,aAAa,WAAW,OAAO,GAAG;AAAA,QAC3C,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,MAAM,GAAG;AAAA,UAClB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -18,45 +18,44 @@ const { useClasses, staticClasses } = createClasses("HvTypography", {
     whiteSpace: "nowrap"
   },
   // variants
-  display: { ...theme.typography.display },
-  title1: { ...theme.typography.title1 },
-  title2: { ...theme.typography.title2 },
-  title3: { ...theme.typography.title3 },
-  title4: { ...theme.typography.title4 },
-  body: { ...theme.typography.body },
-  label: { ...theme.typography.label },
-  captionLabel: { ...theme.typography.captionLabel },
-  caption1: { ...theme.typography.caption1 },
-  caption2: { ...theme.typography.caption2 },
+  display: {},
+  title1: {},
+  title2: {},
+  title3: {},
+  title4: {},
+  body: {},
+  label: {},
+  captionLabel: {},
+  caption1: {},
+  caption2: {},
   // legacy variants
-  "5xlTitle": { ...theme.typography["5xlTitle"] },
-  "4xlTitle": { ...theme.typography["4xlTitle"] },
+  // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants
+  "5xlTitle": {},
+  "4xlTitle": {},
   // @ts-ignore non-existent variant
-  "3xlTitle": { ...theme.typography["3xlTitle"] },
-  xxlTitle: { ...theme.typography.xxlTitle },
+  "3xlTitle": {},
+  xxlTitle: {},
   xlTitle: {},
-  lTitle: { ...theme.typography.lTitle },
+  lTitle: {},
   mTitle: {},
-  sTitle: { ...theme.typography.sTitle },
+  sTitle: {},
   xsTitle: {},
-  xxsTitle: { ...theme.typography.xxsTitle },
+  xxsTitle: {},
   sectionTitle: {
-    ...theme.typography.sectionTitle,
     textTransform: "uppercase"
   },
   highlightText: {},
   normalText: {},
-  placeholderText: { ...theme.typography.placeholderText },
+  placeholderText: {},
   link: {
-    ...theme.typography.link,
     cursor: "pointer",
     textDecoration: "underline"
   },
-  disabledText: { ...theme.typography.disabledText },
-  selectedNavText: { ...theme.typography.selectedNavText },
+  disabledText: {},
+  selectedNavText: {},
   vizText: {},
-  vizTextDisabled: { ...theme.typography.vizTextDisabled },
-  xsInlineLink: { ...theme.typography.xsInlineLink }
+  vizTextDisabled: {},
+  xsInlineLink: {}
 });
 export {
   staticClasses,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n root: {\n fontFamily: theme.fontFamily.body,\n },\n disabled: {\n color: theme.colors.secondary_60,\n },\n isLink: {\n cursor: \"pointer\",\n color: theme.colors.primary,\n textDecoration: \"underline\",\n },\n noWrap: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n // variants\n display: { ~~...theme.typography.display~~ },\n title1: { ~~...theme.typography.title1~~ },\n title2: { ~~...theme.typography.title2~~ },\n title3: { ~~...theme.typography.title3~~ },\n title4: { ~~...theme.typography.title4~~ },\n body: { ~~...theme.typography.body~~ },\n label: { ~~...theme.typography.label~~ },\n captionLabel: { ~~...theme.typography.captionLabel~~ },\n caption1: { ~~...theme.typography.caption1~~ },\n caption2: { ~~...theme.typography.caption2~~ },\n // legacy variants\n ~~\"5xlTitle\"~~: { ~~...theme.typography[~~\"5xlTitle\"] },\n \"4xlTitle\": { ~~...theme.typography[\"4xlTitle\"]~~ },\n // @ts-ignore non-existent variant\n \"3xlTitle\": { ~~...theme.typography[\"3xlTitle\"]~~ },\n xxlTitle: { ~~...theme.typography.xxlTitle~~ },\n xlTitle: {},\n lTitle: { ~~...theme.typography.lTitle~~ },\n mTitle: {},\n sTitle: { ~~...theme.typography.sTitle~~ },\n xsTitle: {},\n xxsTitle: { ~~...theme.typography.xxsTitle~~ },\n sectionTitle: {\n ~~...theme.typography.sectionTitle,\n~~ textTransform: \"uppercase\",\n },\n highlightText: {},\n normalText: {},\n placeholderText: { ~~...theme.typography.placeholderText~~ },\n link: {\n ~~...theme.typography.link,\n~~ cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n disabledText: { ~~...theme.typography.disabledText~~ },\n selectedNavText: { ~~...theme.typography.selectedNavText~~ },\n vizText: {},\n vizTextDisabled: { ~~...theme.typography.vizTextDisabled~~ },\n xsInlineLink: { ~~...theme.typography.xsInlineLink~~ },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,~~EAAE,GAAG,MAAM,WAAW,QAAQ~~;AAAA,~~EACvC~~,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,MAAM,~~EAAE,GAAG,MAAM,WAAW,KAAK~~;AAAA,~~EACjC~~,OAAO,~~EAAE,GAAG,MAAM,WAAW,MAAM~~;AAAA,~~EACnC~~,cAAc,~~EAAE,GAAG,MAAM,WAAW,aAAa~~;AAAA,~~EACjD~~,UAAU,~~EAAE,GAAG,MAAM,WAAW,SAAS~~;AAAA,~~EACzC~~,UAAU,~~EAAE,GAAG,MAAM,WAAW,SAAS~~;AAAA;AAAA,~~EAEzC~~,YAAY,~~EAAE,GAAG,MAAM,WAAW,UAAU,EAAE~~;AAAA,~~EAC9C~~,YAAY,~~EAAE,GAAG,MAAM,WAAW,UAAU,EAAE~~;AAAA;AAAA,~~EAE9C~~,YAAY,~~EAAE,GAAG,MAAM,WAAW,UAAU,EAAE~~;AAAA,~~EAC9C~~,UAAU,~~EAAE,GAAG,MAAM,WAAW,SAAS~~;AAAA,~~EACzC~~,SAAS,CAAC;AAAA,EACV,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,QAAQ,CAAC;AAAA,EACT,QAAQ,~~EAAE,GAAG,MAAM,WAAW,OAAO~~;AAAA,~~EACrC~~,SAAS,CAAC;AAAA,EACV,UAAU,~~EAAE,GAAG,MAAM,WAAW,SAAS~~;AAAA,~~EACzC~~,cAAc;AAAA,IACZ,~~GAAG,MAAM,WAAW;AAAA,IACpB,~~eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,~~EAAE,GAAG,MAAM,WAAW,gBAAgB~~;AAAA,~~EACvD~~,MAAM;AAAA,IACJ,~~GAAG,MAAM,WAAW;AAAA,IACpB,~~QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,~~EAAE,GAAG,MAAM,WAAW,aAAa~~;AAAA,~~EACjD~~,iBAAiB,~~EAAE,GAAG,MAAM,WAAW,gBAAgB~~;AAAA,~~EACvD~~,SAAS,CAAC;AAAA,EACV,iBAAiB,~~EAAE,GAAG,MAAM,WAAW,gBAAgB~~;AAAA,~~EACvD~~,cAAc,~~EAAE,GAAG,MAAM,WAAW,aAAa~~;~~AACnD~~,CAAC;"}
1	+ {"version":3,"file":"Typography.styles.js","sources":["../../../src/Typography/Typography.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvTypography\", {\n root: {\n fontFamily: theme.fontFamily.body,\n },\n disabled: {\n color: theme.colors.secondary_60,\n },\n isLink: {\n cursor: \"pointer\",\n color: theme.colors.primary,\n textDecoration: \"underline\",\n },\n noWrap: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n // variants\n display: {},\n title1: {},\n title2: {},\n title3: {},\n title4: {},\n body: {},\n label: {},\n captionLabel: {},\n caption1: {},\n caption2: {},\n // legacy variants\n // TODO: remove (legacy or all variants) in v6 in favour of dynamic variants\n \"5xlTitle\": {},\n \"4xlTitle\": {},\n // @ts-ignore non-existent variant\n \"3xlTitle\": {},\n xxlTitle: {},\n xlTitle: {},\n lTitle: {},\n mTitle: {},\n sTitle: {},\n xsTitle: {},\n xxsTitle: {},\n sectionTitle: {\n textTransform: \"uppercase\",\n },\n highlightText: {},\n normalText: {},\n placeholderText: {},\n link: {\n cursor: \"pointer\",\n textDecoration: \"underline\",\n },\n disabledText: {},\n selectedNavText: {},\n vizText: {},\n vizTextDisabled: {},\n xsInlineLink: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,gBAAgB;AAAA,EACzE,MAAM;AAAA,IACJ,YAAY,MAAM,WAAW;AAAA,EAC/B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,gBAAgB;AAAA,EAClB;AAAA,EACA,QAAQ;AAAA,IACN,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,MAAM,CAAC;AAAA,EACP,OAAO,CAAC;AAAA,EACR,cAAc,CAAC;AAAA,EACf,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA;AAAA;AAAA,EAGX,YAAY,CAAC;AAAA,EACb,YAAY,CAAC;AAAA;AAAA,EAEb,YAAY,CAAC;AAAA,EACb,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,cAAc;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,YAAY,CAAC;AAAA,EACb,iBAAiB,CAAC;AAAA,EAClB,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,CAAC;AAAA,EACf,iBAAiB,CAAC;AAAA,EAClB,SAAS,CAAC;AAAA,EACV,iBAAiB,CAAC;AAAA,EAClB,cAAc,CAAC;AACjB,CAAC;"}

package/dist/esm/VerticalNavigation/Actions/Action.js CHANGED Viewed

@@ -1,12 +1,11 @@
 import { jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import { useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { isKey } from "../../utils/keyboardUtils.js";
 import { setId } from "../../utils/setId.js";
 import { VerticalNavigationContext } from "../VerticalNavigationContext.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
-import { HvTypography } from "../../Typography/Typography.js";
+import { HvButton } from "../../Button/Button.js";
 const HvVerticalNavigationAction = (props) => {
   const {
     className,
@@ -14,26 +13,16 @@ const HvVerticalNavigationAction = (props) => {
     id,
     label = "",
     icon,
-    onClick,
     ...others
   } = useDefaultProps("HvVerticalNavigationAction", props);
   const { isOpen } = useContext(VerticalNavigationContext);
   const { classes, cx } = useClasses(classesProp);
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (!onClick || !isKey(event, "Enter") && !isKey(event, "Space")) {
-        return;
-      }
-      onClick(event);
-    },
-    [onClick]
-  );
   return /* @__PURE__ */ jsxs(
-    HvTypography,
+    HvButton,
     {
       id: setId(id, "button"),
-      component: "div",
-      role: "button",
+      variant: "secondaryGhost",
+      icon: !isOpen,
       className: cx(
         classes.action,
         {
@@ -42,10 +31,7 @@ const HvVerticalNavigationAction = (props) => {
         },
         className
       ),
-      tabIndex: 0,
       ...!isOpen && { "aria-label": label },
-      onKeyDown: handleKeyDown,
-      onClick,
       ...others,
       children: [
         icon,

package/dist/esm/VerticalNavigation/Actions/Action.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.js","sources":["../../../../src/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { ~~useCallback,~~ useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { ~~HvTypography~~, ~~HvTypographyProps~~ } from \"../../~~Typography~~\";\nimport { ~~isKey } from \"../../utils/keyboardUtils\";\nimport {~~ setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps\n extends Omit<~~HvTypographyProps~~, \"classes\" \| \"~~onClick~~\"> {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvVerticalNavigationActionClasses;\n /* Visual label. /\n label?: string;\n /* Icon. /\n icon?: React.ReactNode;\n ~~/* Callback called when clicked. */\n onClick?: (\n event:\n \| React.KeyboardEvent<HTMLDivElement>\n \| React.MouseEvent<HTMLDivElement>,\n ) => void;\n~~}\n\nexport const HvVerticalNavigationAction = (\n props: HvVerticalNavigationActionProps,\n) => {\n const {\n className,\n classes: classesProp,\n id,\n label = \"\",\n icon,\n ~~onClick,\n~~ ...others\n } = useDefaultProps(\"HvVerticalNavigationAction\", props);\n\n const { isOpen } = useContext(VerticalNavigationContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n ~~const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (!onClick \|\| (!isKey(event, \"Enter\") && !isKey(event, \"Space\"))) {\n~~ return~~;\n }\n onClick(event);\n },\n [onClick],\n );\n\n return~~ (\n <~~HvTypography~~\n id={setId(id, \"button\")}\n ~~component~~=\"~~div~~\"\n ~~role=\"button~~\"\n className={cx(\n classes.action,\n {\n [classes.noIcon]: !icon,\n [classes.minimized]: !isOpen,\n },\n className,\n )}\n ~~tabIndex=~~{~~0}\n {~~...(!isOpen && { \"aria-label\": label })}\n ~~onKeyDown=~~{~~handleKeyDown}\n onClick={onClick}\n {~~...others}\n >\n {icon}\n {isOpen && label}\n </~~HvTypography~~>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;;AAgCa~~,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA~~;AAAA~~,~~IACA,~~GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,OAAA,IAAW,WAAW,yBAAyB;AAEvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;~~AAE9C~~,~~QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA+C;AAC1C,UAAA,CAAC,WAAY,CAAC,MAAM,OAAO,OAAO,KAAK,CAAC,MAAM,OAAO,OAAO,GAAI;AAClE;AAAA,MACF;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,OAAO;AAAA,EAAA;AAIR,~~SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,QAAQ;AAAA,MACtB,~~WAAU~~;AAAA,~~MACV~~,~~MAAK~~;AAAA,~~MACL~~,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,~~MACA~~,~~UAAU;AAAA,MACT,~~GAAI,CAAC,UAAU,EAAE,cAAc,MAAM;AAAA,~~MACtC~~,~~WAAW;AAAA,MACX;AAAA,MACC,~~GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjB;"}
1	+ {"version":3,"file":"Action.js","sources":["../../../../src/VerticalNavigation/Actions/Action.tsx"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n useDefaultProps,\n type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../../Button\";\nimport { setId } from \"../../utils/setId\";\nimport { VerticalNavigationContext } from \"../VerticalNavigationContext\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as actionClasses };\n\nexport type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationActionProps\n extends Omit<HvButtonProps, \"classes\" \| \"icon\"> {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvVerticalNavigationActionClasses;\n /* Visual label. /\n label?: string;\n /* Icon. */\n icon?: React.ReactNode;\n}\n\nexport const HvVerticalNavigationAction = (\n props: HvVerticalNavigationActionProps,\n) => {\n const {\n className,\n classes: classesProp,\n id,\n label = \"\",\n icon,\n ...others\n } = useDefaultProps(\"HvVerticalNavigationAction\", props);\n\n const { isOpen } = useContext(VerticalNavigationContext);\n\n const { classes, cx } = useClasses(classesProp);\n\n return (\n <HvButton\n id={setId(id, \"button\")}\n variant=\"secondaryGhost\"\n icon={!isOpen}\n className={cx(\n classes.action,\n {\n [classes.noIcon]: !icon,\n [classes.minimized]: !isOpen,\n },\n className,\n )}\n {...(!isOpen && { \"aria-label\": label })}\n {...others}\n >\n {icon}\n {isOpen && label}\n </HvButton>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAyBa,MAAA,6BAA6B,CACxC,UACG;AACG,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,8BAA8B,KAAK;AAEvD,QAAM,EAAE,OAAA,IAAW,WAAW,yBAAyB;AAEvD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,MAAM,IAAI,QAAQ;AAAA,MACtB,SAAQ;AAAA,MACR,MAAM,CAAC;AAAA,MACP,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG,CAAC;AAAA,UACnB,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QACxB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAI,CAAC,UAAU,EAAE,cAAc,MAAM;AAAA,MACrC,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,QACA,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjB;"}

package/dist/esm/VerticalNavigation/Actions/Action.styles.js CHANGED Viewed

@@ -1,30 +1,17 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-import { outlineStyles } from "../../utils/focusUtils.js";
-const hover = {
-  background: theme.colors.containerBackgroundHover
-};
 const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationAction",
   {
     action: {
       width: "100%",
-      display: "flex",
       justifyContent: "flex-start",
-      alignItems: "center",
       height: "32px",
-      color: theme.colors.secondary,
-      // hover
-      "&:hover": { ...hover },
-      "&:focus": {
-        outline: "none",
-        ...hover
-      },
-      "&:focus-visible": {
-        ...outlineStyles
-      },
+      color: "inherit",
+      fontWeight: "inherit",
+      padding: 0,
+      border: "none",
       // cursor
-      cursor: "pointer",
       "& *": {
         cursor: "pointer"
       }

package/dist/esm/VerticalNavigation/Actions/Action.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Action.styles.js","sources":["../../../../src/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\~~nimport { outlineStyles } from \"../../utils/focusUtils\";\n\nconst hover = {\n background: theme.colors.containerBackgroundHover,\n};\n\~~nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationAction\",\n {\n action: {\n width: \"100%\",\n ~~display: \"flex\",\n~~ justifyContent: \"flex-start\",\n ~~alignItems~~: \"~~center~~\",\n ~~height~~: \"~~32px~~\",\n ~~color~~: ~~theme.colors.secondary,\n~~\~~n // hover\n \~~"~~&:hover~~\"~~: { ...hover }~~,\n ~~\"&:focus\"~~: {\n ~~outline~~: \"none\",\n ~~...hover,\n },\n~~\n ~~\"&:focus-visible\": {\n ...outlineStyles,\n },\n\n~~ // cursor\n ~~cursor:~~ \"~~pointer\",\n \"~~& *\": {\n cursor: \"pointer\",\n },\n },\n noIcon: {\n paddingLeft: theme.space.xs,\n },\n minimized: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n },\n);\n"],"names":[],"mappings":"~~;;;AAKA~~,~~MAAM,QAAQ;AAAA,EACZ,YAAY,MAAM,OAAO;AAC3B;AAEa,~~MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,~~SAAS;AAAA,MACT,~~gBAAgB;AAAA,MAChB,~~YAAY;AAAA,MACZ,~~QAAQ;AAAA,MACR,OAAO~~,MAAM,OAAO~~;AAAA~~;AAAA~~,~~MAGpB~~,~~WAAW,EAAE,GAAG,MAAM~~;AAAA,~~MACtB~~,~~WAAW;AAAA,QACT,~~SAAS;AAAA,~~QACT~~,~~GAAG~~;AAAA~~,MACL~~;AAAA,~~MAEA~~,~~mBAAmB;AAAA,QACjB,GAAG;AAAA,MACL;AAAA;AAAA,MAGA,QAAQ;AAAA,MACR,~~OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACT,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAChB;AAAA,EACF;AACF;"}
1	+ {"version":3,"file":"Action.styles.js","sources":["../../../../src/VerticalNavigation/Actions/Action.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationAction\",\n {\n action: {\n width: \"100%\",\n justifyContent: \"flex-start\",\n height: \"32px\",\n color: \"inherit\",\n fontWeight: \"inherit\",\n padding: 0,\n border: \"none\",\n\n // cursor\n \"& *\": {\n cursor: \"pointer\",\n },\n },\n noIcon: {\n paddingLeft: theme.space.xs,\n },\n minimized: {\n justifyContent: \"center\",\n paddingRight: 0,\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,MAGR,OAAO;AAAA,QACL,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,aAAa,MAAM,MAAM;AAAA,IAC3B;AAAA,IACA,WAAW;AAAA,MACT,gBAAgB;AAAA,MAChB,cAAc;AAAA,IAChB;AAAA,EACF;AACF;"}

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

@@ -4,12 +4,10 @@ const { staticClasses, useClasses } = createClasses(
   "HvVerticalNavigationActions",
   {
     root: {
-      display: "block",
-      background: theme.colors.atmo1,
+      display: "flex",
+      flexDirection: "column",
       marginTop: "auto",
-      "& :not(:last-child)": {
-        marginBottom: "8px"
-      }
+      gap: theme.space.xs
     },
     hide: {
       display: "none"

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Actions.styles.js","sources":["../../../../src/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationActions\",\n {\n root: {\n display: \"~~block~~\",\n ~~background~~: ~~theme.colors.atmo1~~,\n marginTop: \"auto\",\n\n ~~\"&~~ :~~not(:last-child)\":~~ ~~{\n marginBottom: \"8px\"~~,\n ~~},\n~~ },\n hide: {\n display: \"none\",\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,~~YAAY,MAAM,OAAO~~;AAAA,~~MACzB~~,WAAW;AAAA,MAEX,~~uBAAuB;AAAA~~,~~QACrB~~,~~cAAc~~;AAAA,~~MAChB~~;AAAA,~~IACF;AAAA,~~IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}
1	+ {"version":3,"file":"Actions.styles.js","sources":["../../../../src/VerticalNavigation/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n \"HvVerticalNavigationActions\",\n {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n marginTop: \"auto\",\n\n gap: theme.space.xs,\n },\n hide: {\n display: \"none\",\n },\n },\n);\n"],"names":[],"mappings":";;AAGa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,eAAe;AAAA,MACf,WAAW;AAAA,MAEX,KAAK,MAAM,MAAM;AAAA,IACnB;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,IACX;AAAA,EACF;AACF;"}

package/dist/esm/VerticalNavigation/Header/Header.styles.js CHANGED Viewed

@@ -14,12 +14,17 @@ const { staticClasses, useClasses } = createClasses(
     },
     collapseButton: {
       marginLeft: "auto",
+      color: "inherit",
       "&$minimized": {
         marginLeft: 0
       }
     },
-    backButton: {},
-    title: {}
+    backButton: {
+      color: "inherit"
+    },
+    title: {
+      color: "inherit"
+    }
   }
 );
 export {