@hitachivantara/uikit-react-core 5.24.6 → 5.25.1

package/dist/cjs/components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport treeViewItemClasses from \"./treeViewItemClasses\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: theme.verticalNavigation.activeBorderLeft,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\n});\n\nexport const StyledGroup = styled(\"ul\")({\n  margin: \"8px 0 0 0\",\n  padding: 0,\n});\n\nexport const StyledLabel = styled(\n  \"div\",\n  transientOptions\n)(({ $expandable, $hasIcon }: { $expandable: boolean; $hasIcon: boolean }) => ({\n  display: \"flex\",\n  flexGrow: 1,\n  maxWidth: \"100%\",\n  ...(($hasIcon || $expandable) && {\n    maxWidth: \"calc(100% - 32px)\",\n  }),\n  ...($expandable &&\n    $hasIcon && {\n      maxWidth: \"calc(100% - 64px)\",\n    }),\n}));\n\nexport const StyledNode = styled(\"li\")({\n  listStyle: \"none\",\n  minHeight: \"32px\",\n  \"&:not(:last-child)\": {\n    marginBottom: \"8px\",\n  },\n  [`&.${treeViewItemClasses.collapsed}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"none\",\n    },\n  },\n  [`&.${treeViewItemClasses.expanded}`]: {\n    [`&>.${treeViewItemClasses.group}`]: {\n      display: \"block\",\n    },\n  },\n  [`&.${treeViewItemClasses.link}`]: {\n    textDecoration: \"none\",\n  },\n  [`&.${treeViewItemClasses.hide}`]: {\n    display: \"none\",\n  },\n});\n\nexport const StyledContent = styled(HvTypography)({\n  width: \"100%\",\n  display: \"flex\",\n  justifyContent: \"flex-start\",\n  alignItems: \"center\",\n  height: \"32px\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  paddingRight: theme.space.xs,\n\n  [`&.${treeViewItemClasses.minimized}`]: {\n    justifyContent: \"center\",\n    paddingRight: 0,\n  },\n\n  [`.${treeViewItemClasses.expandable}>&`]: {\n    fontWeight: 600,\n  },\n\n  // selected state\n  [`.${treeViewItemClasses.selected}>&`]: selected(),\n\n  // hover\n  [`:not(.${treeViewItemClasses.disabled} > &):not(.${treeViewItemClasses.selected} > &):hover`]:\n    hover(),\n  [`:not(.${treeViewItemClasses.disabled} > &).${treeViewItemClasses.selected} >:hover`]:\n    {},\n\n  // focus\n  [`:not(.${treeViewItemClasses.disabled}>&):not(.${treeViewItemClasses.selected}>&):focus-visible`]:\n    hover(),\n\n  [`*:focus-visible .${treeViewItemClasses.focused}>&`]: {\n    ...outlineStyles,\n  },\n\n  [` .${treeViewItemClasses.focused}>&`]: {\n    ...hover(),\n  },\n\n  \"&[disabled], &:active\": {\n    outline: \"none\",\n  },\n\n  \"&:focus\": {\n    outline: \"none\",\n  },\n\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n\n  // cursor\n  cursor: \"pointer\",\n  \"& *\": {\n    cursor: \"pointer\",\n  },\n  [` .${treeViewItemClasses.disabled}>&`]: {\n    cursor: \"not-allowed\",\n    \"& *\": {\n      cursor: \"not-allowed\",\n    },\n  },\n});\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","StyledGroup","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabel","_extends","transientOptions","$expandable","$hasIcon","display","flexGrow","maxWidth","StyledNode","listStyle","minHeight","marginBottom","treeViewItemClasses","collapsed","group","expanded","link","textDecoration","hide","StyledContent","HvTypography","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","minimized","expandable","fontWeight","disabled","focused","outlineStyles","outline","cursor"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.styles.cjs","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nconst selected = () => ({\n  background: theme.colors.atmo3,\n  borderLeft: theme.verticalNavigation.activeBorderLeft,\n  \"& *\": {\n    background: theme.colors.atmo3,\n  },\n});\n\nconst hover = () => ({\n  background: theme.verticalNavigation.hoverColor,\n});\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigationTreeViewItem\",\n  {\n    node: {\n      listStyle: \"none\",\n      minHeight: \"32px\",\n      \"&:not(:last-child)\": {\n        marginBottom: \"8px\",\n      },\n      \"&$collapsed\": {\n        \"&>$group\": {\n          display: \"none\",\n        },\n      },\n      \"&$expanded\": {\n        \"&>$group\": {\n          display: \"block\",\n        },\n      },\n      \"&$link\": {\n        textDecoration: \"none\",\n      },\n      \"&$hide\": {\n        display: \"none\",\n      },\n    },\n    content: {\n      width: \"100%\",\n      display: \"flex\",\n      justifyContent: \"flex-start\",\n      alignItems: \"center\",\n      height: \"32px\",\n      borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n      paddingRight: theme.space.xs,\n      \"&$minimized\": {\n        justifyContent: \"center\",\n        paddingRight: 0,\n      },\n      \"$expandable>&\": {\n        fontWeight: 600,\n      },\n      \"$selected>&\": selected(),\n      // hover\n      \":not($disabled>&):not($selected>&):hover\": hover(),\n      \":not($disabled)$selected>&:hover\": {},\n\n      // focus\n      \":not($disabled>&):not($selected>&):focus-visible\": hover(),\n      \":not($disabled>&):not($selected>&).focus-visible\": hover(),\n\n      \"*:focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n\n      \".focus-visible $focused>&\": {\n        ...outlineStyles,\n      },\n      \"$focused>&\": {\n        ...hover(),\n      },\n\n      \"&[disabled], &:active\": {\n        outline: \"none\",\n      },\n\n      \"&:focus\": {\n        outline: \"none\",\n      },\n\n      \"&:focus-visible\": {\n        ...outlineStyles,\n      },\n\n      \"&.focus-visible\": {\n        ...outlineStyles,\n      },\n\n      // cursor\n      cursor: \"pointer\",\n      \"& *\": {\n        cursor: \"pointer\",\n      },\n\n      \"$disabled>&\": {\n        cursor: \"not-allowed\",\n        \"& *\": {\n          cursor: \"not-allowed\",\n        },\n      },\n    },\n    link: {},\n    group: {\n      margin: \"8px 0 0 0\",\n      padding: 0,\n    },\n    disabled: {},\n    expandable: {\n      fontWeight: 600,\n    },\n    collapsed: {},\n    expanded: {},\n    selectable: {},\n    unselectable: {},\n    selected: {},\n    unselected: {},\n    focused: {},\n    minimized: {},\n    hide: {},\n    label: {\n      display: \"flex\",\n      flexGrow: 1,\n      maxWidth: \"100%\",\n    },\n    labelIcon: {\n      maxWidth: \"calc(100% - 32px)\",\n    },\n    labelExpandable: {\n      maxWidth: \"calc(100% - 32px)\",\n\n      \"&$labelIcon\": {\n        maxWidth: \"calc(100% - 64px)\",\n      },\n    },\n  }\n);\n"],"names":["selected","background","theme","colors","atmo3","borderLeft","verticalNavigation","activeBorderLeft","hover","hoverColor","staticClasses","useClasses","createClasses","node","listStyle","minHeight","marginBottom","display","textDecoration","content","width","justifyContent","alignItems","height","inactiveBorderLeft","paddingRight","space","xs","fontWeight","outlineStyles","outline","cursor","link","group","margin","padding","disabled","expandable","collapsed","expanded","selectable","unselectable","unselected","focused","minimized","hide","label","flexGrow","maxWidth","labelIcon","labelExpandable"],"mappings":"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"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs

@@ -1,25 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const clsx = require("clsx");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const React = require("react");
-const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
-const verticalNavigationClasses = require("./verticalNavigationClasses.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
+const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const NavigationSlider_utils = require("./NavigationSlider/utils/NavigationSlider.utils.cjs");
 const HvVerticalNavigation = (props) => {
   const {
     id,
     className,
-    classes,
+    classes: classesProp,
     children,
     open = true,
     slider = false,
     useIcons = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvVerticalNavigation", props);
+  const {
+    classes,
+    cx
+  } = VerticalNavigation_styles.useClasses(classesProp);
   const [parentData, setParentData] = React.useState([]);
   const [parentSelected, setParentSelected] = React.useState();
   const [headerTitle, setHeaderTitle] = React.useState();
@@ -54,15 +56,19 @@ const HvVerticalNavigation = (props) => {
   }), [open, useIcons, slider, headerTitle, setHeaderTitle, parentItem, setParentItem, withParentData, navigateToChildHandler, navigateToParentHandler, hasAnyChildWithData, parentData, parentSelected]);
   const content = /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigationContext.VerticalNavigationContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsxRuntime.jsx(VerticalNavigation_styles.StyledRoot, {
+    children: /* @__PURE__ */ jsxRuntime.jsx("div", {
       id,
-      className: clsx.clsx(className, verticalNavigationClasses.default.root, classes == null ? void 0 : classes.root, !open && verticalNavigationClasses.default.collapsed, slider && verticalNavigationClasses.default.slider, classes == null ? void 0 : classes.collapsed),
-      hasAnyChildWithData,
+      className: cx(classes.root, {
+        [classes.collapsed]: !open,
+        [classes.slider]: slider,
+        [classes.childData]: hasAnyChildWithData
+      }, className),
       ...others,
       children
     })
   });
   return content;
 };
+exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = HvVerticalNavigation;
 //# sourceMappingURL=VerticalNavigation.cjs.map

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { StyledRoot } from \"./VerticalNavigation.styles\";\nimport verticalNavigationClasses, {\n  HvVerticalNavigationClasses,\n} from \"./verticalNavigationClasses\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nexport interface HvVerticalNavigationProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <StyledRoot\n        id={id}\n        className={clsx(\n          className,\n          verticalNavigationClasses.root,\n          classes?.root,\n          !open && verticalNavigationClasses.collapsed,\n          slider && verticalNavigationClasses.slider,\n          classes?.collapsed\n        )}\n        hasAnyChildWithData={hasAnyChildWithData}\n        {...others}\n      >\n        {children}\n      </StyledRoot>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","children","open","slider","useIcons","others","useDefaultProps","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","useEffect","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","StyledRoot","clsx","verticalNavigationClasses","root","collapsed"],"mappings":";;;;;;;;;;;AA4EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,wBAAwBT,KAAK;AAEjD,QAAM,CAACU,YAAYC,aAAa,IAAIC,MAAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,MAAS,SAAA;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,MAA6B,SAAA;AAG7DK,QAAAA,iBAAiBC,MAAAA,QACrB,MAAMC,uBAAAA,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,cACxB,MAAMG,yCAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,eAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,MAAAA,QAC1B,MAAMO,yBAAAA,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGEgB,kBAAA,MAAMV,eAAeM,yCAAYK,KAAK,GACtC,CAACL,YAAYC,aAAa,CAC5B;AAEMK,QAAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChDN,kBAAcF,uBAAAA,kBAAkBJ,gBAAgBK,WAAWrB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACqB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMa,yBAAyBD,MAAAA,YAC7B,CAACE,OAAOC,SAAS;AACfT,kBAAcU,uBAAAA,sBAAsBhB,gBAAgBe,KAAK/B,EAAE,CAAC;AAC5D8B,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACX,eAAeN,cAAc,CAChC;AAEMkB,QAAAA,QAAQjB,MAAAA,QACZ,OAAO;AAAA,IACLkB,QAAQ/B;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAa;AAAAA,IACAF;AAAAA,IAEAlB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACEnB,MACAE,UACAD,QACAS,aACAC,gBACAM,YACAC,eACAN,gBACAa,wBACAF,yBACAJ,qBACAd,YACAG,cAAc,CAElB;AAEMwB,QAAAA,UACHC,2BAAAA,IAAAA,0BAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAa/B,yCAC9CoC,sCAAU;AAAA,MACTvC;AAAAA,MACAC,WAAWuC,KAAAA,KACTvC,WACAwC,0BAAAA,QAA0BC,MAC1BxC,mCAASwC,MACT,CAACtC,QAAQqC,kCAA0BE,WACnCtC,UAAUoC,0BAA0BpC,QAAAA,QACpCH,mCAASyC,SACX;AAAA,MACApB;AAAAA,MAAyC,GACrChB;AAAAA,MAAMJ;AAAAA,IAAAA,CAGA;AAAA,EAAA,CACsB;AAG/BiC,SAAAA;AACT;;"}
+{"version":3,"file":"VerticalNavigation.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  VerticalNavigationContext,\n  NavigationData,\n} from \"./VerticalNavigationContext\";\nimport {\n  fillDataWithParentId,\n  getNavigationItemById,\n  getParentItemById,\n} from \"./NavigationSlider/utils\";\nimport { hasChildNavigationItems } from \"./utils/VerticalNavigation.utils\";\n\nimport { staticClasses, useClasses } from \"./VerticalNavigation.styles\";\n\nexport { staticClasses as verticalNavigationClasses };\n\nexport type HvVerticalNavigationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalNavigationProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvVerticalNavigationClasses;\n  /**\n   * Current State of the Vertical Navigation Collapse\n   */\n  open?: boolean;\n  /**\n   * Collpased Mode for the Vertical Navigation, the default value is \"simple\".\n   *\n   * @deprecated - `useIcons` property should be used instead.\n   */\n  collapsedMode?: HvVerticalNavigationMode;\n  /**\n   * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.\n   */\n  slider?: boolean;\n  /**\n   * The content inside the actions container.\n   */\n  children?: React.ReactNode;\n  /**\n   * Boolean to determine if icons should be displayed in the navigation menu.\n   * When `true` a icon will always be displayed, if no icon is provided the first letter of the label will be\n   * displayed inside an Avatar component.\n   * When `false` no icons will be shown, even if an icon is provided.\n   */\n  useIcons?: boolean;\n}\n\n/**\n * Navigation enables users to move through an app to complete tasks.\n *\n * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.\n * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.\n *\n * Although both the hierarchically organized data and the visual style resemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)\n * isn't necessarily the most appropriate.\n *\n * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.\n *\n * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.\n * However it can be tedious to TAB through all navigation items to reach the actions panel.\n *\n * Both modes are available via the `mode` property and each app should choose the most appropriate.\n */\nexport const HvVerticalNavigation = (props: HvVerticalNavigationProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n\n    children,\n\n    open = true,\n\n    slider = false,\n\n    useIcons = false,\n\n    ...others\n  } = useDefaultProps(\"HvVerticalNavigation\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const [parentData, setParentData] = useState<NavigationData[]>([]);\n\n  const [parentSelected, setParentSelected] = useState();\n\n  const [headerTitle, setHeaderTitle] = useState<string | undefined>();\n\n  // navigationSlider\n  const withParentData = useMemo(\n    () => fillDataWithParentId(parentData),\n    [parentData]\n  );\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, parentSelected),\n    [withParentData, parentSelected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const hasAnyChildWithData = useMemo(\n    () => hasChildNavigationItems(parentData),\n    [parentData]\n  );\n\n  useEffect(\n    () => setHeaderTitle(parentItem?.label),\n    [parentItem, setParentItem]\n  );\n\n  const navigateToParentHandler = useCallback(() => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  }, [parentItem, setParentItem, withParentData]);\n\n  const navigateToChildHandler = useCallback(\n    (event, item) => {\n      setParentItem(getNavigationItemById(withParentData, item.id));\n      event.stopPropagation();\n    },\n    [setParentItem, withParentData]\n  );\n\n  const value = useMemo(\n    () => ({\n      isOpen: open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n\n      parentData,\n      setParentData,\n      parentSelected,\n      setParentSelected,\n      hasAnyChildWithData,\n    }),\n    [\n      open,\n      useIcons,\n      slider,\n      headerTitle,\n      setHeaderTitle,\n      parentItem,\n      setParentItem,\n      withParentData,\n      navigateToChildHandler,\n      navigateToParentHandler,\n      hasAnyChildWithData,\n      parentData,\n      parentSelected,\n    ]\n  );\n\n  const content = (\n    <VerticalNavigationContext.Provider value={value}>\n      <div\n        id={id}\n        className={cx(\n          classes.root,\n          {\n            [classes.collapsed]: !open,\n            [classes.slider]: slider,\n            [classes.childData]: hasAnyChildWithData,\n          },\n          className\n        )}\n        {...others}\n      >\n        {children}\n      </div>\n    </VerticalNavigationContext.Provider>\n  );\n\n  return content;\n};\n\nexport type HvVerticalNavigationMode = \"icon\" | \"simple\";\n\nexport type HvVerticalNavigationPosition =\n  | \"static\"\n  | \"relative\"\n  | \"fixed\"\n  | \"absolute\";\n"],"names":["HvVerticalNavigation","props","id","className","classes","classesProp","children","open","slider","useIcons","others","useDefaultProps","cx","useClasses","parentData","setParentData","useState","parentSelected","setParentSelected","headerTitle","setHeaderTitle","withParentData","useMemo","fillDataWithParentId","initialParentItem","getParentItemById","parentItem","setParentItem","hasAnyChildWithData","hasChildNavigationItems","useEffect","label","navigateToParentHandler","useCallback","navigateToChildHandler","event","item","getNavigationItemById","stopPropagation","value","isOpen","content","VerticalNavigationContext","Provider","root","collapsed","childData"],"mappings":";;;;;;;;;AA8EaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IAETC;AAAAA,IAEAC,OAAO;AAAA,IAEPC,SAAS;AAAA,IAETC,WAAW;AAAA,IAEX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,wBAAwBV,KAAK;AAC3C,QAAA;AAAA,IAAEG;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,0BAAAA,WAAWR,WAAW;AAE9C,QAAM,CAACS,YAAYC,aAAa,IAAIC,MAAAA,SAA2B,CAAE,CAAA;AAEjE,QAAM,CAACC,gBAAgBC,iBAAiB,IAAIF,MAAS,SAAA;AAErD,QAAM,CAACG,aAAaC,cAAc,IAAIJ,MAA6B,SAAA;AAG7DK,QAAAA,iBAAiBC,MAAAA,QACrB,MAAMC,uBAAAA,qBAAqBT,UAAU,GACrC,CAACA,UAAU,CACb;AAEMU,QAAAA,oBAAoBF,cACxB,MAAMG,yCAAkBJ,gBAAgBJ,cAAc,GACtD,CAACI,gBAAgBJ,cAAc,CACjC;AAEA,QAAM,CAACS,YAAYC,aAAa,IAAIX,eAASQ,iBAAiB;AAExDI,QAAAA,sBAAsBN,MAAAA,QAC1B,MAAMO,yBAAAA,wBAAwBf,UAAU,GACxC,CAACA,UAAU,CACb;AAGEgB,kBAAA,MAAMV,eAAeM,yCAAYK,KAAK,GACtC,CAACL,YAAYC,aAAa,CAC5B;AAEMK,QAAAA,0BAA0BC,MAAAA,YAAY,MAAM;AAChDN,kBAAcF,uBAAAA,kBAAkBJ,gBAAgBK,WAAWxB,EAAE,CAAC;AAAA,EAC7D,GAAA,CAACwB,YAAYC,eAAeN,cAAc,CAAC;AAE9C,QAAMa,yBAAyBD,MAAAA,YAC7B,CAACE,OAAOC,SAAS;AACfT,kBAAcU,uBAAAA,sBAAsBhB,gBAAgBe,KAAKlC,EAAE,CAAC;AAC5DiC,UAAMG,gBAAgB;AAAA,EAAA,GAExB,CAACX,eAAeN,cAAc,CAChC;AAEMkB,QAAAA,QAAQjB,MAAAA,QACZ,OAAO;AAAA,IACLkB,QAAQjC;AAAAA,IACRE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAC;AAAAA,IAEAM;AAAAA,IACAC;AAAAA,IACAN;AAAAA,IACAa;AAAAA,IACAF;AAAAA,IAEAlB;AAAAA,IACAC;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAU;AAAAA,EAAAA,IAEF,CACErB,MACAE,UACAD,QACAW,aACAC,gBACAM,YACAC,eACAN,gBACAa,wBACAF,yBACAJ,qBACAd,YACAG,cAAc,CAElB;AAEMwB,QAAAA,UACHC,2BAAAA,IAAAA,0BAAAA,0BAA0BC,UAAQ;AAAA,IAACJ;AAAAA,IAAajC,yCAC/C,OAAA;AAAA,MACEJ;AAAAA,MACAC,WAAWS,GACTR,QAAQwC,MACR;AAAA,QACE,CAACxC,QAAQyC,SAAS,GAAG,CAACtC;AAAAA,QACtB,CAACH,QAAQI,MAAM,GAAGA;AAAAA,QAClB,CAACJ,QAAQ0C,SAAS,GAAGlB;AAAAA,SAEvBzB,SACF;AAAA,MAAE,GACEO;AAAAA,MAAMJ;AAAAA,IAAAA,CAGP;AAAA,EAAA,CAC6B;AAG/BmC,SAAAA;AACT;;;"}

package/dist/cjs/components/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -1,27 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const verticalNavigationClasses = require("./verticalNavigationClasses.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
-  target: "eyka99t0"
-} : {
-  target: "eyka99t0",
-  label: "StyledRoot"
-})(({
-  hasAnyChildWithData
-}) => ({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: uikitStyles.theme.verticalNavigation.justifyContent,
-  width: "220px",
-  background: uikitStyles.theme.colors.atmo1,
-  boxShadow: uikitStyles.theme.colors.shadow,
-  clipPath: "inset(0px -12px 0px 0px)",
-  [`&.${verticalNavigationClasses.default.collapsed}`]: {
-    width: hasAnyChildWithData ? "66px" : "56px",
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvVerticalNavigation", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: uikitStyles.theme.verticalNavigation.justifyContent,
+    width: "220px",
+    background: uikitStyles.theme.colors.atmo1,
+    boxShadow: uikitStyles.theme.colors.shadow,
+    clipPath: "inset(0px -12px 0px 0px)",
+    "& > :only-child": {
+      padding: uikitStyles.theme.space.sm
+    },
+    "& > :not(nav:first-of-type)": {
+      borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
+      padding: uikitStyles.theme.spacing(["xs", "sm", "sm", "sm"])
+    },
+    "& > :first-of-type:not(:last-child)": {
+      borderTop: "none",
+      padding: uikitStyles.theme.spacing(["sm", "sm", "xs", "sm"])
+    }
+  },
+  collapsed: {
+    width: "56px",
+    "&$childData": {
+      width: "66px"
+    },
     "& > :first-of-type:not(:last-child)": {
       padding: uikitStyles.theme.spacing(["sm", "xs", "xs", "xs"])
     },
@@ -29,22 +38,13 @@ const StyledRoot = /* @__PURE__ */ _styled__default.default("div", process.env.N
       padding: uikitStyles.theme.spacing(["xs", "xs", "sm", "xs"])
     }
   },
-  "& > :only-child": {
-    padding: uikitStyles.theme.space.sm
-  },
-  "& > :not(nav:first-of-type)": {
-    borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
-    padding: uikitStyles.theme.spacing(["xs", "sm", "sm", "sm"])
-  },
-  "& > :first-of-type:not(:last-child)": {
-    borderTop: "none",
-    padding: uikitStyles.theme.spacing(["sm", "sm", "xs", "sm"])
-  },
-  [`&.${verticalNavigationClasses.default.slider}`]: {
+  slider: {
     "& > div:first-of-type": {
       borderBottom: `3px solid ${uikitStyles.theme.colors.atmo2}`
     }
-  }
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVmVydGljYWxOYXZpZ2F0aW9uL1ZlcnRpY2FsTmF2aWdhdGlvbi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVEwQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1ZlcnRpY2FsTmF2aWdhdGlvbi9WZXJ0aWNhbE5hdmlnYXRpb24uc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSBcIkBlbW90aW9uL3N0eWxlZFwiO1xuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMgZnJvbSBcIi4vdmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlc1wiO1xuXG5pbnRlcmZhY2UgU3R5bGVkUm9vdFByb3BzIHtcbiAgaGFzQW55Q2hpbGRXaXRoRGF0YTogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IFN0eWxlZFJvb3QgPSBzdHlsZWQoXCJkaXZcIikoXG4gICh7IGhhc0FueUNoaWxkV2l0aERhdGEgfTogU3R5bGVkUm9vdFByb3BzKSA9PiAoe1xuICAgIGRpc3BsYXk6IFwiZmxleFwiLFxuICAgIGZsZXhEaXJlY3Rpb246IFwiY29sdW1uXCIsXG4gICAganVzdGlmeUNvbnRlbnQ6IHRoZW1lLnZlcnRpY2FsTmF2aWdhdGlvbi5qdXN0aWZ5Q29udGVudCxcblxuICAgIHdpZHRoOiBcIjIyMHB4XCIsXG5cbiAgICBiYWNrZ3JvdW5kOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiB0aGVtZS5jb2xvcnMuc2hhZG93LFxuICAgIGNsaXBQYXRoOiBcImluc2V0KDBweCAtMTJweCAwcHggMHB4KVwiLFxuXG4gICAgW2AmLiR7dmVydGljYWxOYXZpZ2F0aW9uQ2xhc3Nlcy5jb2xsYXBzZWR9YF06IHtcbiAgICAgIHdpZHRoOiBoYXNBbnlDaGlsZFdpdGhEYXRhID8gXCI2NnB4XCIgOiBcIjU2cHhcIixcblxuICAgICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNpbmcoW1wic21cIiwgXCJ4c1wiLCBcInhzXCIsIFwieHNcIl0pLFxuICAgICAgfSxcblxuICAgICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwieHNcIiwgXCJzbVwiLCBcInhzXCJdKSxcbiAgICAgIH0sXG4gICAgfSxcblxuICAgIFwiJiA+IDpvbmx5LWNoaWxkXCI6IHtcbiAgICAgIHBhZGRpbmc6IHRoZW1lLnNwYWNlLnNtLFxuICAgIH0sXG4gICAgXCImID4gOm5vdChuYXY6Zmlyc3Qtb2YtdHlwZSlcIjoge1xuICAgICAgYm9yZGVyVG9wOiBgM3B4IHNvbGlkICR7dGhlbWUuY29sb3JzLmF0bW8yfWAsXG4gICAgICBwYWRkaW5nOiB0aGVtZS5zcGFjaW5nKFtcInhzXCIsIFwic21cIiwgXCJzbVwiLCBcInNtXCJdKSxcbiAgICB9LFxuXG4gICAgXCImID4gOmZpcnN0LW9mLXR5cGU6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgICBib3JkZXJUb3A6IFwibm9uZVwiLFxuICAgICAgcGFkZGluZzogdGhlbWUuc3BhY2luZyhbXCJzbVwiLCBcInNtXCIsIFwieHNcIiwgXCJzbVwiXSksXG4gICAgfSxcblxuICAgIFtgJi4ke3ZlcnRpY2FsTmF2aWdhdGlvbkNsYXNzZXMuc2xpZGVyfWBdOiB7XG4gICAgICBcIiYgPiBkaXY6Zmlyc3Qtb2YtdHlwZVwiOiB7XG4gICAgICAgIGJvcmRlckJvdHRvbTogYDNweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vMn1gLFxuICAgICAgfSxcbiAgICB9LFxuICB9KVxuKTtcbiJdfQ== */");
-exports.StyledRoot = StyledRoot;
+  },
+  childData: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=VerticalNavigation.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport verticalNavigationClasses from \"./verticalNavigationClasses\";\n\ninterface StyledRootProps {\n  hasAnyChildWithData: boolean;\n}\n\nexport const StyledRoot = styled(\"div\")(\n  ({ hasAnyChildWithData }: StyledRootProps) => ({\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: theme.verticalNavigation.justifyContent,\n\n    width: \"220px\",\n\n    background: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n    clipPath: \"inset(0px -12px 0px 0px)\",\n\n    [`&.${verticalNavigationClasses.collapsed}`]: {\n      width: hasAnyChildWithData ? \"66px\" : \"56px\",\n\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n      },\n    },\n\n    \"& > :only-child\": {\n      padding: theme.space.sm,\n    },\n    \"& > :not(nav:first-of-type)\": {\n      borderTop: `3px solid ${theme.colors.atmo2}`,\n      padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n    },\n\n    \"& > :first-of-type:not(:last-child)\": {\n      borderTop: \"none\",\n      padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n    },\n\n    [`&.${verticalNavigationClasses.slider}`]: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.atmo2}`,\n      },\n    },\n  })\n);\n"],"names":["StyledRoot","_styled","process","env","NODE_ENV","target","label","hasAnyChildWithData","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","verticalNavigationClasses","collapsed","padding","spacing","space","sm","borderTop","atmo2","slider","borderBottom"],"mappings":";;;;;;;AAQO,MAAMA,aAAoBC,iCAAA,QAAA,OAAKC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EACpC,CAAC;AAAA,EAAEC;AAAqC,OAAO;AAAA,EAC7CC,SAAS;AAAA,EACTC,eAAe;AAAA,EACfC,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,EAEzCG,OAAO;AAAA,EAEPC,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,EACzBC,WAAWN,YAAAA,MAAMI,OAAOG;AAAAA,EACxBC,UAAU;AAAA,EAEV,CAAE,KAAIC,kCAA0BC,WAAW,GAAG;AAAA,IAC5CR,OAAON,sBAAsB,SAAS;AAAA,IAEtC,uCAAuC;AAAA,MACrCe,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BD,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEA,mBAAmB;AAAA,IACjBD,SAASX,YAAAA,MAAMa,MAAMC;AAAAA,EACvB;AAAA,EACA,+BAA+B;AAAA,IAC7BC,WAAY,aAAYf,YAAAA,MAAMI,OAAOY;AAAAA,IACrCL,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,uCAAuC;AAAA,IACrCG,WAAW;AAAA,IACXJ,SAASX,kBAAMY,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,EACjD;AAAA,EAEA,CAAE,KAAIH,kCAA0BQ,QAAQ,GAAG;AAAA,IACzC,yBAAyB;AAAA,MACvBC,cAAe,aAAYlB,YAAAA,MAAMI,OAAOY;AAAAA,IAC1C;AAAA,EACF;AACF,IAAEzB,QAAAC,IAAAC,siFACJ;;"}
+{"version":3,"file":"VerticalNavigation.styles.cjs","sources":["../../../../src/components/VerticalNavigation/VerticalNavigation.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvVerticalNavigation\",\n  {\n    root: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: theme.verticalNavigation.justifyContent,\n\n      width: \"220px\",\n\n      background: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      clipPath: \"inset(0px -12px 0px 0px)\",\n\n      \"& > :only-child\": {\n        padding: theme.space.sm,\n      },\n      \"& > :not(nav:first-of-type)\": {\n        borderTop: `3px solid ${theme.colors.atmo2}`,\n        padding: theme.spacing([\"xs\", \"sm\", \"sm\", \"sm\"]),\n      },\n\n      \"& > :first-of-type:not(:last-child)\": {\n        borderTop: \"none\",\n        padding: theme.spacing([\"sm\", \"sm\", \"xs\", \"sm\"]),\n      },\n    },\n    collapsed: {\n      width: \"56px\",\n      \"&$childData\": {\n        width: \"66px\",\n      },\n      \"& > :first-of-type:not(:last-child)\": {\n        padding: theme.spacing([\"sm\", \"xs\", \"xs\", \"xs\"]),\n      },\n\n      \"& > :not(nav:first-of-type)\": {\n        padding: theme.spacing([\"xs\", \"xs\", \"sm\", \"xs\"]),\n      },\n    },\n\n    slider: {\n      \"& > div:first-of-type\": {\n        borderBottom: `3px solid ${theme.colors.atmo2}`,\n      },\n    },\n\n    childData: {},\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","root","display","flexDirection","justifyContent","theme","verticalNavigation","width","background","colors","atmo1","boxShadow","shadow","clipPath","padding","space","sm","borderTop","atmo2","spacing","collapsed","slider","borderBottom","childData"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAC3C,wBACA;AAAA,EACEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,eAAe;AAAA,IACfC,gBAAgBC,YAAAA,MAAMC,mBAAmBF;AAAAA,IAEzCG,OAAO;AAAA,IAEPC,YAAYH,YAAAA,MAAMI,OAAOC;AAAAA,IACzBC,WAAWN,YAAAA,MAAMI,OAAOG;AAAAA,IACxBC,UAAU;AAAA,IAEV,mBAAmB;AAAA,MACjBC,SAAST,YAAAA,MAAMU,MAAMC;AAAAA,IACvB;AAAA,IACA,+BAA+B;AAAA,MAC7BC,WAAY,aAAYZ,YAAAA,MAAMI,OAAOS;AAAAA,MACrCJ,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,uCAAuC;AAAA,MACrCF,WAAW;AAAA,MACXH,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTb,OAAO;AAAA,IACP,eAAe;AAAA,MACbA,OAAO;AAAA,IACT;AAAA,IACA,uCAAuC;AAAA,MACrCO,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,IAEA,+BAA+B;AAAA,MAC7BL,SAAST,kBAAMc,QAAQ,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACjD;AAAA,EACF;AAAA,EAEAE,QAAQ;AAAA,IACN,yBAAyB;AAAA,MACvBC,cAAe,aAAYjB,YAAAA,MAAMI,OAAOS;AAAAA,IAC1C;AAAA,EACF;AAAA,EAEAK,WAAW,CAAC;AACd,CACF;;;"}

package/dist/cjs/index.cjs

@@ -215,21 +215,21 @@ const Calendar_styles = require("./components/Calendar/Calendar.styles.cjs");
 const Calendar = require("./components/Calendar/Calendar.cjs");
 const CalendarHeader_styles = require("./components/Calendar/CalendarHeader/CalendarHeader.styles.cjs");
 const CalendarHeader = require("./components/Calendar/CalendarHeader/CalendarHeader.cjs");
-const verticalNavigationClasses = require("./components/VerticalNavigation/verticalNavigationClasses.cjs");
+const VerticalNavigation_styles = require("./components/VerticalNavigation/VerticalNavigation.styles.cjs");
 const VerticalNavigation = require("./components/VerticalNavigation/VerticalNavigation.cjs");
-const headerClasses = require("./components/VerticalNavigation/Header/headerClasses.cjs");
+const Header_styles$2 = require("./components/VerticalNavigation/Header/Header.styles.cjs");
 const Header$2 = require("./components/VerticalNavigation/Header/Header.cjs");
-const actionClasses = require("./components/VerticalNavigation/Actions/actionClasses.cjs");
-const actionsClasses = require("./components/VerticalNavigation/Actions/actionsClasses.cjs");
+const Actions_styles$2 = require("./components/VerticalNavigation/Actions/Actions.styles.cjs");
 const Actions$2 = require("./components/VerticalNavigation/Actions/Actions.cjs");
+const Action_styles$1 = require("./components/VerticalNavigation/Actions/Action.styles.cjs");
 const Action$1 = require("./components/VerticalNavigation/Actions/Action.cjs");
-const navigationClasses = require("./components/VerticalNavigation/Navigation/navigationClasses.cjs");
+const Navigation_styles$1 = require("./components/VerticalNavigation/Navigation/Navigation.styles.cjs");
 const Navigation$1 = require("./components/VerticalNavigation/Navigation/Navigation.cjs");
-const navigationSliderClasses = require("./components/VerticalNavigation/NavigationSlider/navigationSliderClasses.cjs");
+const NavigationSlider_styles = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs");
 const NavigationSlider = require("./components/VerticalNavigation/NavigationSlider/NavigationSlider.cjs");
-const treeViewClasses = require("./components/VerticalNavigation/TreeView/treeViewClasses.cjs");
-const treeViewItemClasses = require("./components/VerticalNavigation/TreeView/treeViewItemClasses.cjs");
+const TreeView_styles = require("./components/VerticalNavigation/TreeView/TreeView.styles.cjs");
 const TreeView = require("./components/VerticalNavigation/TreeView/TreeView.cjs");
+const TreeViewItem_styles = require("./components/VerticalNavigation/TreeView/TreeViewItem.styles.cjs");
 const TreeViewItem = require("./components/VerticalNavigation/TreeView/TreeViewItem.cjs");
 const VerticalNavigationContext = require("./components/VerticalNavigation/VerticalNavigationContext.cjs");
 const Slider_styles = require("./components/Slider/Slider.styles.cjs");
@@ -571,21 +571,21 @@ exports.calendarClasses = Calendar_styles.staticClasses;
 exports.HvCalendar = Calendar.HvCalendar;
 exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;
 exports.HvCalendarHeader = CalendarHeader.HvCalendarHeader;
-exports.verticalNavigationClasses = verticalNavigationClasses.default;
+exports.verticalNavigationClasses = VerticalNavigation_styles.staticClasses;
 exports.HvVerticalNavigation = VerticalNavigation.HvVerticalNavigation;
-exports.verticalNavigationHeaderClasses = headerClasses.default;
+exports.verticalNavigationHeaderClasses = Header_styles$2.staticClasses;
 exports.HvVerticalNavigationHeader = Header$2.HvVerticalNavigationHeader;
-exports.actionClasses = actionClasses.default;
-exports.actionsClasses = actionsClasses.default;
+exports.actionsClasses = Actions_styles$2.staticClasses;
 exports.HvVerticalNavigationActions = Actions$2.HvVerticalNavigationActions;
+exports.actionClasses = Action_styles$1.staticClasses;
 exports.HvVerticalNavigationAction = Action$1.HvVerticalNavigationAction;
-exports.verticalNavigationTreeClasses = navigationClasses.default;
+exports.verticalNavigationTreeClasses = Navigation_styles$1.staticClasses;
 exports.HvVerticalNavigationTree = Navigation$1.HvVerticalNavigationTree;
-exports.verticalNavigationSliderClasses = navigationSliderClasses.default;
+exports.verticalNavigationSliderClasses = NavigationSlider_styles.staticClasses;
 exports.HvVerticalNavigationSlider = NavigationSlider.HvVerticalNavigationSlider;
-exports.treeViewClasses = treeViewClasses.default;
-exports.treeViewItemClasses = treeViewItemClasses.default;
+exports.treeViewClasses = TreeView_styles.staticClasses;
 exports.HvVerticalNavigationTreeView = TreeView.HvVerticalNavigationTreeView;
+exports.treeViewItemClasses = TreeViewItem_styles.staticClasses;
 exports.HvVerticalNavigationTreeViewItem = TreeViewItem.HvVerticalNavigationTreeViewItem;
 exports.VerticalNavigationContext = VerticalNavigationContext.VerticalNavigationContext;
 exports.sliderClasses = Slider_styles.staticClasses;

package/dist/esm/components/Badge/Badge.js

@@ -27,7 +27,6 @@ const HvBadge = (props) => {
     children: text
   });
   return /* @__PURE__ */ jsxs("div", {
-    "aria-label": renderedCountOrLabel == null ? void 0 : renderedCountOrLabel.toString(),
     className: cx(classes.root, className),
     ...others,
     children: [Component, /* @__PURE__ */ jsx("div", {

package/dist/esm/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div\n      aria-label={renderedCountOrLabel?.toString()}\n      className={cx(classes.root, className)}\n      {...others}\n    >\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","useDefaultProps","cx","useClasses","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","toString","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;;AAgDaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWb,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAE9C,QAAMc,gBAAgBX,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMY,uBACJV,SAAUH,aAAaC,QAAQ,KAAKW,iBAAkB;AACxD,QAAME,YACJV,QAASC,QAAQU,oBAACC,cAAY;AAAA,IAACC,SAASX;AAAAA,IAAYY,UAAEb;AAAAA,EAAAA,CAAmB;AAE3E,8BACE,OAAA;AAAA,IACE,cAAYQ,6DAAsBM;AAAAA,IAClCpB,WAAWW,GAAGb,QAAQuB,MAAMrB,SAAS;AAAA,IAAE,GACnCS;AAAAA,IAAMU,UAAA,CAETJ,WACDC,oBAAA,OAAA;AAAA,MAAKhB,WAAWe,YAAYjB,QAAQwB,iBAAiBd;AAAAA,MAAUW,8BAC7D,OAAA;AAAA,QACEnB,WAAWW,GAAGb,QAAQyB,eAAe;AAAA,UACnC,CAACzB,QAAQ0B,KAAK,GAAG,CAAC,EAAEtB,QAAQ,KAAKY;AAAAA,UACjC,CAAChB,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASU;AAAAA,UAClC,CAAChB,QAAQ2B,SAAS,GAAG,CAAC,CAACrB;AAAAA,UACvB,CAACN,QAAQ4B,SAAS,GAAG,CAAC,CAACrB;AAAAA,UACvB,CAACP,QAAQ6B,aAAa,GAAGC,OAAOd,oBAAoB,EAAEe,WAAW;AAAA,QAAA,CAClE;AAAA,QAAEV,UAEFL;AAAAA,MAAAA,CACE;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AAET;"}
+{"version":3,"file":"Badge.js","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  HvTypography,\n  HvTypographyVariants,\n} from \"@core/components/Typography\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   */\n  count?: number;\n  /**\n   * True if count should be displayed.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Custom text to show in place of count.\n   * Note showCount and label are mutually exclusive.\n   * showCount is ignored when label is specified at the same time.\n   */\n  label?: string;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = (props: HvBadgeProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count = 0,\n    maxCount = 99,\n    label = null,\n    icon = null,\n    text = null,\n    textVariant = undefined,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const renderedCount = count > maxCount ? `${maxCount}+` : count;\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label || (showCount && count > 0 && renderedCount) || null;\n  const Component =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {Component}\n      <div className={Component ? classes.badgeContainer : undefined}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["HvBadge","props","classes","classesProp","className","showCount","count","maxCount","label","icon","text","textVariant","undefined","others","useDefaultProps","cx","useClasses","renderedCount","renderedCountOrLabel","Component","_jsx","HvTypography","variant","children","root","badgeContainer","badgePosition","badge","showLabel","badgeIcon","badgeOneDigit","String","length"],"mappings":";;;;;AAgDaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,OAAO;AAAA,IACPC,cAAcC;AAAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWb,KAAK;AAE9B,QAAA;AAAA,IAAEC;AAAAA,IAASa;AAAAA,EAAAA,IAAOC,WAAWb,WAAW;AAE9C,QAAMc,gBAAgBX,QAAQC,WAAY,GAAEA,cAAcD;AAK1D,QAAMY,uBACJV,SAAUH,aAAaC,QAAQ,KAAKW,iBAAkB;AACxD,QAAME,YACJV,QAASC,QAAQU,oBAACC,cAAY;AAAA,IAACC,SAASX;AAAAA,IAAYY,UAAEb;AAAAA,EAAAA,CAAmB;AAE3E,8BACE,OAAA;AAAA,IAAKN,WAAWW,GAAGb,QAAQsB,MAAMpB,SAAS;AAAA,IAAE,GAAKS;AAAAA,IAAMU,UAAA,CACpDJ,WACDC,oBAAA,OAAA;AAAA,MAAKhB,WAAWe,YAAYjB,QAAQuB,iBAAiBb;AAAAA,MAAUW,8BAC7D,OAAA;AAAA,QACEnB,WAAWW,GAAGb,QAAQwB,eAAe;AAAA,UACnC,CAACxB,QAAQyB,KAAK,GAAG,CAAC,EAAErB,QAAQ,KAAKY;AAAAA,UACjC,CAAChB,QAAQG,SAAS,GAAG,CAAC,EAAE,CAACG,SAASU;AAAAA,UAClC,CAAChB,QAAQ0B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACN,QAAQ2B,SAAS,GAAG,CAAC,CAACpB;AAAAA,UACvB,CAACP,QAAQ4B,aAAa,GAAGC,OAAOb,oBAAoB,EAAEc,WAAW;AAAA,QAAA,CAClE;AAAA,QAAET,UAEFL;AAAAA,MAAAA,CACE;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AAET;"}

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

@@ -36,6 +36,7 @@ const HvColorPicker = (props) => {
     classes: classesProp,
     value,
     onChange,
+    onChangeComplete,
     defaultValue = "",
     expanded,
     defaultExpanded = false,
@@ -74,6 +75,15 @@ const HvColorPicker = (props) => {
   };
   const handleSelect = (val) => {
     onChange == null ? void 0 : onChange(val.hex);
+    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
+    setColor(val.hex);
+  };
+  const handleOnChange = (val) => {
+    onChange == null ? void 0 : onChange(val.hex);
+    setColor(val.hex);
+  };
+  const handleOnChangeComplete = (val) => {
+    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
     setColor(val.hex);
   };
   const handleAddColor = () => {
@@ -164,7 +174,8 @@ const HvColorPicker = (props) => {
             },
             title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0,
             color,
-            onChange: handleSelect
+            onChange: handleOnChange,
+            onChangeComplete: handleOnChangeComplete
           }), showSavedColors && /* @__PURE__ */ jsx(SavedColors, {
             colors: savedColors,
             onAddColor: handleAddColor,

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

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

package/dist/esm/components/EmptyState/EmptyState.styles.js

@@ -28,11 +28,7 @@ const {
   textContainer: {
     background: "transparent",
     maxWidth: "510px",
-    overflow: "hidden",
-    "& a": {
-      color: theme.colors.primary,
-      textDecoration: "none"
-    }
+    overflow: "hidden"
   },
   messageContainer: {},
   actionContainer: {

package/dist/esm/components/EmptyState/EmptyState.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.styles.js","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: { display: \"flex\", flexDirection: \"row\" },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  titleContainer: {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  },\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n    \"& a\": {\n      color: theme.colors.primary,\n      textDecoration: \"none\",\n    },\n  },\n  messageContainer: {},\n  actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","display","justifyContent","container","flexDirection","containerMessageOnly","alignItems","marginLeft","iconContainer","titleContainer","marginTop","theme","emptyState","titleMarginTop","marginBottom","space","sm","textContainer","background","maxWidth","overflow","color","colors","primary","textDecoration","messageContainer","actionContainer"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,WAAW;AAAA,IAAEF,SAAS;AAAA,IAAQG,eAAe;AAAA,EAAM;AAAA,EACnDC,sBAAsB;AAAA,IACpBC,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB;AAAA,IACdC,WAAWC,MAAMC,WAAWC;AAAAA,IAC5BC,cAAcH,MAAMI,MAAMC;AAAAA,EAC5B;AAAA,EACAC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,UAAU;AAAA,IACV,OAAO;AAAA,MACLC,OAAOV,MAAMW,OAAOC;AAAAA,MACpBC,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACAC,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IAAEhB,WAAWC,MAAMI,MAAMC;AAAAA,EAAG;AAC/C,CAAC;"}
+{"version":3,"file":"EmptyState.styles.js","sources":["../../../../src/components/EmptyState/EmptyState.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvEmptyState\", {\n  root: {\n    width: \"100%\",\n    height: \"100%\",\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  container: { display: \"flex\", flexDirection: \"row\" },\n  containerMessageOnly: {\n    alignItems: \"center\",\n    \"& $textContainer\": {\n      marginLeft: 0,\n    },\n  },\n  iconContainer: {},\n  titleContainer: {\n    marginTop: theme.emptyState.titleMarginTop,\n    marginBottom: theme.space.sm,\n  },\n  textContainer: {\n    background: \"transparent\",\n    maxWidth: \"510px\",\n    overflow: \"hidden\",\n  },\n  messageContainer: {},\n  actionContainer: { marginTop: theme.space.sm },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","height","display","justifyContent","container","flexDirection","containerMessageOnly","alignItems","marginLeft","iconContainer","titleContainer","marginTop","theme","emptyState","titleMarginTop","marginBottom","space","sm","textContainer","background","maxWidth","overflow","messageContainer","actionContainer"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,gBAAgB;AAAA,EACzEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,WAAW;AAAA,IAAEF,SAAS;AAAA,IAAQG,eAAe;AAAA,EAAM;AAAA,EACnDC,sBAAsB;AAAA,IACpBC,YAAY;AAAA,IACZ,oBAAoB;AAAA,MAClBC,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACAC,eAAe,CAAC;AAAA,EAChBC,gBAAgB;AAAA,IACdC,WAAWC,MAAMC,WAAWC;AAAAA,IAC5BC,cAAcH,MAAMI,MAAMC;AAAAA,EAC5B;AAAA,EACAC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,UAAU;AAAA,EACZ;AAAA,EACAC,kBAAkB,CAAC;AAAA,EACnBC,iBAAiB;AAAA,IAAEZ,WAAWC,MAAMI,MAAMC;AAAAA,EAAG;AAC/C,CAAC;"}

package/dist/esm/components/Forms/WarningText/WarningText.js

@@ -53,6 +53,7 @@ const HvWarningText = (props) => {
         [classes.hideText]: hideText
       }),
       role: "status",
+      "aria-live": "polite",
       "aria-relevant": "additions text",
       ...others,
       children: showWarning && content

package/dist/esm/components/Forms/WarningText/WarningText.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail className={classes.defaultIcon} semantic=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,MAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,oBAACC,MAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,8BACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,oCACrBQ,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;"}
+{"version":3,"file":"WarningText.js","sources":["../../../../../src/components/Forms/WarningText/WarningText.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { Fail } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./WarningText.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\n\nexport { staticClasses as warningTextClasses };\n\nexport type HvWarningTextClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvWarningTextProps extends HvBaseProps {\n  /** Icon to be rendered alongside the warning text. */\n  adornment?: React.ReactNode;\n  /** If `true` the text is not rendered. */\n  isVisible?: boolean;\n  /** If `true` the text is disabled. */\n  disabled?: boolean;\n  /** If `true` the text won't include a gutter. */\n  disableGutter?: boolean;\n  /** If `true` the text won't include the top border. */\n  disableBorder?: boolean;\n  /** If `true` the adornment icon isn't shown. */\n  disableAdornment?: boolean;\n  /** If `true` the text isn't shown. */\n  hideText?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvWarningTextClasses;\n}\n\n/**\n * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.\n */\nexport const HvWarningText = (props: HvWarningTextProps) => {\n  const {\n    children,\n    adornment,\n    isVisible,\n    classes: classesProp,\n    className,\n    id,\n    disabled,\n    disableGutter = false,\n    disableBorder = false,\n    disableAdornment = false,\n    hideText = false,\n    ...others\n  } = useDefaultProps(\"HvWarningText\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { elementId, elementStatus, elementDisabled } =\n    useContext(HvFormElementContext);\n  const localDisabled = disabled || elementDisabled;\n  const localVisible = !isNil(isVisible)\n    ? isVisible\n    : elementStatus === \"invalid\";\n  const localId = id ?? setId(elementId, \"error\");\n  const showWarning = localVisible && !localDisabled;\n  const content = showWarning ? children : \"\";\n  const localAdornment = adornment || (\n    <Fail className={classes.defaultIcon} semantic=\"negative\" />\n  );\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.show]: showWarning,\n          [classes.topBorder]: !disableBorder,\n        },\n        className\n      )}\n    >\n      {!disableAdornment && localAdornment}\n      <HvTypography\n        id={localId}\n        className={cx(classes.warningText, {\n          [classes.topGutter]: !disableGutter,\n          [classes.hideText]: hideText,\n        })}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-relevant=\"additions text\"\n        {...others}\n      >\n        {showWarning && content}\n      </HvTypography>\n    </div>\n  );\n};\n"],"names":["HvWarningText","props","children","adornment","isVisible","classes","classesProp","className","id","disabled","disableGutter","disableBorder","disableAdornment","hideText","others","useDefaultProps","cx","useClasses","elementId","elementStatus","elementDisabled","useContext","HvFormElementContext","localDisabled","localVisible","isNil","localId","setId","showWarning","content","localAdornment","_jsx","Fail","defaultIcon","semantic","root","show","topBorder","HvTypography","warningText","topGutter","role"],"mappings":";;;;;;;;;;AAyCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBd,KAAK;AAEpC,QAAA;AAAA,IAAEI;AAAAA,IAASW;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAExC,QAAA;AAAA,IAAEY;AAAAA,IAAWC;AAAAA,IAAeC;AAAAA,EAAAA,IAChCC,WAAWC,oBAAoB;AACjC,QAAMC,gBAAgBd,YAAYW;AAClC,QAAMI,eAAe,CAACC,MAAMrB,SAAS,IACjCA,YACAe,kBAAkB;AACtB,QAAMO,UAAUlB,MAAMmB,MAAMT,WAAW,OAAO;AACxCU,QAAAA,cAAcJ,gBAAgB,CAACD;AAC/BM,QAAAA,UAAUD,cAAc1B,WAAW;AACnC4B,QAAAA,iBAAiB3B,aACrB4B,oBAACC,MAAI;AAAA,IAACzB,WAAWF,QAAQ4B;AAAAA,IAAaC,UAAS;AAAA,EAAA,CAAY;AAG7D,8BACE,OAAA;AAAA,IACE3B,WAAWS,GACTX,QAAQ8B,MACR;AAAA,MACE,CAAC9B,QAAQ+B,IAAI,GAAGR;AAAAA,MAChB,CAACvB,QAAQgC,SAAS,GAAG,CAAC1B;AAAAA,OAExBJ,SACF;AAAA,IAAEL,UAAA,CAED,CAACU,oBAAoBkB,oCACrBQ,cAAY;AAAA,MACX9B,IAAIkB;AAAAA,MACJnB,WAAWS,GAAGX,QAAQkC,aAAa;AAAA,QACjC,CAAClC,QAAQmC,SAAS,GAAG,CAAC9B;AAAAA,QACtB,CAACL,QAAQQ,QAAQ,GAAGA;AAAAA,MAAAA,CACrB;AAAA,MACD4B,MAAK;AAAA,MACL,aAAU;AAAA,MACV,iBAAc;AAAA,MAAgB,GAC1B3B;AAAAA,MAAMZ,UAET0B,eAAeC;AAAAA,IAAAA,CACJ,CAAC;AAAA,EAAA,CACZ;AAET;"}

package/dist/esm/components/TagsInput/TagsInput.js

@@ -312,7 +312,7 @@ const HvTagsInput = (props) => {
             gutters: classes.listItemGutters,
             root: classes.listItemRoot
           },
-          id: `tag-${i}`,
+          id: setId(elementId, `tag-${i}`),
           children: /* @__PURE__ */ jsx(HvTag, {
             label,
             className: cx({
@@ -344,7 +344,7 @@ const HvTagsInput = (props) => {
           root: classes.tagInputContainerRoot,
           gutters: classes.listItemGutters
         },
-        id: `tag-${value.length}`,
+        id: setId(elementId, `tag-${value.length}`),
         children: /* @__PURE__ */ jsx(HvInput, {
           value: tagInput,
           disableClear: true,