@hitachivantara/uikit-react-core 5.0.0-next.21 → 5.0.0-next.22

package/dist/esm/components/VerticalNavigation/TreeView/TreeViewItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { useForkRef } from \"hooks\";\nimport { setId } from \"utils\";\nimport treeViewItemClasses, {\n  HvVerticalNavigationTreeViewItemClasses,\n} from \"./treeViewItemClasses\";\nimport { StyledContent, StyledGroup, StyledNode } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { HvAvatar } from \"components\";\nimport { VerticalNavigationContext } from \"../\";\n\nexport type HvVerticalNavigationTreeViewItemProps = {\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 Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n};\n\nconst preventSelection = (event, disabled) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      ...others\n    } = props;\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement,\n        id: nodeId,\n      }),\n      [nodeId, treeitemElement]\n    );\n\n    const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null ? selectableProp : !collapsible || !expandable;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase()\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId]\n    );\n\n    const handleExpansion = useCallback(\n      (event) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n      ]\n    );\n\n    const handleSelection = useCallback(\n      (event) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else {\n              if (selectNode) return selectNode(event, nodeId, true);\n            }\n          } else {\n            if (selectNode) return selectNode(event, nodeId);\n          }\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ]\n    );\n\n    const handleMouseDown = useCallback(\n      (event) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown]\n    );\n\n    const handleClick = useCallback(\n      (event) => {\n        if (!disabled) {\n          if (expandable) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n      ]\n    );\n\n    const handleKeyDown = useCallback(\n      (event) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable]\n    );\n\n    const renderedContent = useMemo(\n      () => (\n        <StyledContent\n          id={setId(id, \"button\")}\n          component={href ? \"a\" : \"div\"}\n          href={href}\n          target={target}\n          ref={contentRef}\n          className={clsx(\n            treeViewItemClasses.content,\n            classes?.content,\n            href != null && clsx(treeViewItemClasses.link, classes?.link),\n            !isOpen && clsx(treeViewItemClasses.minimized, classes?.minimized)\n          )}\n          variant={disabled ? \"placeholderText\" : \"body\"}\n          onClick={handleClick}\n          onMouseDown={handleMouseDown}\n          style={{\n            paddingLeft:\n              (expandable || icon != null ? 0 : 10) +\n              level * (collapsible ? 32 : 10),\n          }}\n          {...(treeviewMode\n            ? {\n                role: \"button\",\n                tabIndex: -1,\n                onFocus: handleFocus,\n              }\n            : {\n                role: \"button\",\n                tabIndex: selectable || expandable ? 0 : -1,\n                onKeyDown: handleKeyDown,\n                \"aria-current\": selectable && selected ? \"page\" : undefined,\n                \"aria-expanded\": expandable ? expanded : undefined,\n                \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n              })}\n        >\n          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n          {!icon &&\n          level === 0 &&\n          !isOpen &&\n          collapsedMode === \"icon\" &&\n          contentRef.current?.textContent ? (\n            <HvAvatar\n              variant=\"square\"\n              size=\"xs\"\n              backgroundColor=\"acce4\"\n              style={{ fontSize: \"15px\" }}\n            >\n              {contentRef.current?.textContent.substring(0, 1)}\n            </HvAvatar>\n          ) : (\n            icon\n          )}\n          {isOpen && label}\n        </StyledContent>\n      ),\n      [\n        id,\n        href,\n        target,\n        classes?.content,\n        treeViewItemClasses.content,\n        classes?.link,\n        treeViewItemClasses.link,\n        classes?.minimized,\n        treeViewItemClasses.minimized,\n        disabled,\n        handleClick,\n        handleMouseDown,\n        expandable,\n        icon,\n        level,\n        collapsible,\n        treeviewMode,\n        handleFocus,\n        selectable,\n        handleKeyDown,\n        selected,\n        expanded,\n        label,\n      ]\n    );\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <StyledGroup\n            id={setId(id, \"group\")}\n            className={clsx(treeViewItemClasses.group, classes?.group)}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </StyledGroup>\n        ),\n      [children, treeViewItemClasses.group, classes?.group, id, treeviewMode]\n    );\n\n    return (\n      <StyledNode\n        ref={handleRef}\n        id={id as string}\n        className={clsx(\n          treeViewItemClasses?.node,\n          classes?.node,\n          className,\n          disabled && clsx(treeViewItemClasses.disabled, classes?.disabled),\n          expandable &&\n            clsx(treeViewItemClasses.expandable, classes?.expandable),\n          expandable &&\n            !expanded &&\n            clsx(treeViewItemClasses.collapsed, classes?.collapsed),\n          expandable &&\n            expanded &&\n            clsx(treeViewItemClasses.expanded, classes?.expanded),\n          selectable &&\n            !disabled &&\n            clsx(treeViewItemClasses.selectable, classes?.selectable),\n          !disabled &&\n            !selectable &&\n            clsx(treeViewItemClasses.unselectable, classes?.unselectable),\n          !disabled &&\n            selectable &&\n            selected &&\n            clsx(treeViewItemClasses.selected, classes?.selected),\n          !disabled &&\n            selectable &&\n            !selected &&\n            clsx(treeViewItemClasses.unselected, classes?.unselected),\n          focused && clsx(treeViewItemClasses.focused, classes?.focused),\n          !isOpen &&\n            collapsedMode == \"simple\" &&\n            clsx(treeViewItemClasses.hide, classes?.hide),\n          !isOpen &&\n            collapsedMode == \"icon\" &&\n            isChildSelected &&\n            isChildSelected(nodeId) &&\n            clsx(treeViewItemClasses.selected, classes?.selected)\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </StyledNode>\n    );\n  }\n);\n"],"names":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","others","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","collapsedMode","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","_jsxs","StyledContent","setId","component","clsx","treeViewItemClasses","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","DropUpXS","_jsx","DropDownXS","HvAvatar","size","backgroundColor","fontSize","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":"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"}
+{"version":3,"file":"TreeViewItem.js","sources":["../../../../../src/components/VerticalNavigation/TreeView/TreeViewItem.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport clsx from \"clsx\";\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\nimport { useForkRef } from \"hooks\";\nimport { setId } from \"utils\";\nimport treeViewItemClasses, {\n  HvVerticalNavigationTreeViewItemClasses,\n} from \"./treeViewItemClasses\";\nimport { StyledContent, StyledGroup, StyledNode } from \"./TreeViewItem.styles\";\nimport { DescendantProvider, useDescendant } from \"./descendants\";\nimport {\n  TreeViewControlContext,\n  TreeViewStateContext,\n} from \"./TreeViewContext\";\nimport { HvAvatar } from \"components\";\nimport { VerticalNavigationContext } from \"../\";\n\nexport type HvVerticalNavigationTreeViewItemProps = {\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 Radio button.\n   */\n  classes?: HvVerticalNavigationTreeViewItemClasses;\n  /**\n   * Is the node disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Can the node be selected.\n   */\n  selectable?: boolean;\n  /**\n   * The id of the node.\n   */\n  nodeId?: string;\n  /**\n   * The icon to display next to the node's label.\n   */\n  icon?: React.ReactNode;\n  /**\n   * The item label.\n   */\n  label?: React.ReactNode;\n  /**\n   * The url for the link.\n   */\n  href?: string;\n  /**\n   * The behavior when opening a link.\n   */\n  target?: string;\n  /**\n   * The node payload.\n   */\n  payload?: any;\n  /**\n   * @ignore\n   */\n  onClick?: any;\n  /**\n   * @ignore\n   */\n  onMouseDown?: any;\n  /**\n   * @ignore\n   */\n  onFocus?: any;\n  /**\n   * The content of the component.\n   */\n  children?: React.ReactNode;\n};\n\nconst preventSelection = (event, disabled) => {\n  if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n    // Prevent text selection\n    event.preventDefault();\n  }\n};\n\nexport const HvVerticalNavigationTreeViewItem = forwardRef(\n  (props: HvVerticalNavigationTreeViewItemProps, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes,\n\n      disabled: disabledProp = false,\n\n      selectable: selectableProp,\n\n      nodeId,\n      icon = null,\n      label,\n      href,\n      target,\n      payload,\n\n      onClick,\n      onMouseDown,\n      onFocus,\n\n      children,\n\n      ...others\n    } = props;\n\n    const treeViewControlContext = useContext(TreeViewControlContext);\n    const { isExpanded, isSelected, isFocused, isDisabled, isChildSelected } =\n      useContext(TreeViewStateContext);\n\n    const {\n      treeId,\n      mode,\n      collapsible,\n      toggleExpansion,\n      multiSelect,\n      selectNode,\n      selectRange,\n      disabledItemsFocusable,\n      registerNode,\n      unregisterNode,\n      mapFirstChar,\n      unMapFirstChar,\n      focus,\n    } = treeViewControlContext;\n\n    const treeviewMode = mode === \"treeview\";\n\n    let id: string | null = null;\n\n    if (idProp != null) {\n      id = idProp;\n    } else if (treeId && nodeId) {\n      id = `${treeId}-${nodeId}`;\n    }\n\n    const [treeitemElement, setTreeitemElement] = useState(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeitemElement, ref);\n\n    const descendant = useMemo(\n      () => ({\n        element: treeitemElement,\n        id: nodeId,\n      }),\n      [nodeId, treeitemElement]\n    );\n\n    const { isOpen, collapsedMode } = useContext(VerticalNavigationContext);\n\n    const { index, parentId, level } = useDescendant(descendant);\n\n    const expandable = collapsible && Array.isArray(children);\n    const expanded = isExpanded ? isExpanded(nodeId) : false;\n    const focused = isFocused ? isFocused(nodeId) : false;\n    const selected = isSelected ? isSelected(nodeId) : false;\n    const disabled = isDisabled ? isDisabled(nodeId) : false;\n\n    const selectable =\n      selectableProp != null ? selectableProp : !collapsible || !expandable;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (registerNode && unregisterNode && index !== -1) {\n        registerNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          selectable,\n          expandable,\n          disabled: disabledProp,\n          onFocus,\n          payload,\n        });\n\n        return () => {\n          unregisterNode(nodeId);\n        };\n      }\n\n      return undefined;\n    }, [\n      registerNode,\n      unregisterNode,\n      parentId,\n      index,\n      nodeId,\n      expandable,\n      disabledProp,\n      id,\n      selectable,\n      onFocus,\n      payload,\n    ]);\n\n    useEffect(() => {\n      if (\n        mapFirstChar &&\n        unMapFirstChar &&\n        label &&\n        contentRef.current?.textContent\n      ) {\n        mapFirstChar(\n          nodeId,\n          contentRef.current?.textContent.substring(0, 1).toLowerCase()\n        );\n\n        return () => {\n          unMapFirstChar(nodeId);\n        };\n      }\n      return undefined;\n    }, [mapFirstChar, unMapFirstChar, nodeId, label]);\n\n    let ariaSelected;\n    if (multiSelect) {\n      ariaSelected = selected;\n    } else if (selected) {\n      /* single-selection trees unset aria-selected on un-selected items.\n       *\n       * If the tree does not support multiple selection, aria-selected\n       * is set to true for the selected node and it is not present on any other node in the tree.\n       * Source: https://www.w3.org/TR/wai-aria-practices/#TreeView\n       */\n      ariaSelected = true;\n    }\n\n    const handleFocus = useCallback(\n      (event) => {\n        // DOM focus stays on the tree which manages focus with aria-activedescendant\n        if (event.target === event.currentTarget) {\n          (event.target.ownerDocument || document)\n            .getElementById(treeId)\n            .focus({ preventScroll: true });\n        }\n\n        const unfocusable = !disabledItemsFocusable && disabled;\n        if (\n          !focused &&\n          event.currentTarget === event.target &&\n          !unfocusable &&\n          focus\n        ) {\n          focus(event, nodeId);\n        }\n      },\n      [disabled, disabledItemsFocusable, focus, focused, nodeId, treeId]\n    );\n\n    const handleExpansion = useCallback(\n      (event) => {\n        if (!disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          // If already expanded and trying to toggle selection don't close\n          if (expandable && !(multiple && isExpanded && isExpanded(nodeId))) {\n            if (toggleExpansion) toggleExpansion(event, nodeId);\n          }\n        }\n      },\n      [\n        disabled,\n        expandable,\n        focus,\n        focused,\n        isExpanded,\n        multiSelect,\n        nodeId,\n        toggleExpansion,\n        treeviewMode,\n      ]\n    );\n\n    const handleSelection = useCallback(\n      (event) => {\n        if (selectable && !disabled) {\n          if (treeviewMode && !focused && focus) {\n            focus(event, nodeId);\n          }\n\n          const multiple =\n            multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n          if (multiple) {\n            if (event.shiftKey) {\n              if (selectRange) return selectRange(event, { end: nodeId });\n            } else {\n              if (selectNode) return selectNode(event, nodeId, true);\n            }\n          } else {\n            if (selectNode) return selectNode(event, nodeId);\n          }\n        } else {\n          return false;\n        }\n      },\n      [\n        disabled,\n        focus,\n        focused,\n        multiSelect,\n        nodeId,\n        selectNode,\n        selectRange,\n        selectable,\n        treeviewMode,\n      ]\n    );\n\n    const handleMouseDown = useCallback(\n      (event) => {\n        preventSelection(event, disabled);\n\n        if (onMouseDown) {\n          onMouseDown(event);\n        }\n      },\n      [disabled, onMouseDown]\n    );\n\n    const handleClick = useCallback(\n      (event) => {\n        if (!disabled) {\n          if (expandable) {\n            handleExpansion(event);\n          }\n\n          if (selectable) {\n            handleSelection(event);\n          }\n        }\n\n        if (onClick) {\n          onClick(event);\n        }\n      },\n      [\n        disabled,\n        expandable,\n        handleExpansion,\n        handleSelection,\n        onClick,\n        selectable,\n      ]\n    );\n\n    const handleKeyDown = useCallback(\n      (event) => {\n        let isEventHandled = false;\n        const { key } = event;\n\n        if (\n          event.altKey ||\n          event.ctrlKey ||\n          event.metaKey ||\n          event.currentTarget !== event.target\n        ) {\n          return;\n        }\n        if (contentRef.current === event.currentTarget) {\n          if (key === \"Enter\" || key === \" \") {\n            if (expandable) {\n              isEventHandled = handleExpansion(event) as unknown as boolean;\n            }\n\n            if (selectable) {\n              isEventHandled = handleSelection(event) as boolean;\n            }\n          }\n\n          if (isEventHandled) {\n            event.preventDefault();\n            event.stopPropagation();\n          }\n        }\n      },\n      [expandable, handleExpansion, handleSelection, selectable]\n    );\n\n    const renderedContent = useMemo(\n      () => (\n        <StyledContent\n          id={setId(id, \"button\")}\n          component={href ? \"a\" : \"div\"}\n          href={href}\n          target={target}\n          ref={contentRef}\n          className={clsx(\n            treeViewItemClasses.content,\n            classes?.content,\n            href != null && clsx(treeViewItemClasses.link, classes?.link),\n            !isOpen && clsx(treeViewItemClasses.minimized, classes?.minimized)\n          )}\n          variant={disabled ? \"placeholderText\" : \"body\"}\n          onClick={handleClick}\n          onMouseDown={handleMouseDown}\n          style={{\n            paddingLeft:\n              (expandable || icon != null ? 0 : 10) +\n              level * (collapsible ? 32 : 10),\n          }}\n          {...(treeviewMode\n            ? {\n                role: \"button\",\n                tabIndex: -1,\n                onFocus: handleFocus,\n              }\n            : {\n                role: \"button\",\n                tabIndex: selectable || expandable ? 0 : -1,\n                onKeyDown: handleKeyDown,\n                \"aria-current\": selectable && selected ? \"page\" : undefined,\n                \"aria-expanded\": expandable ? expanded : undefined,\n                \"aria-controls\": expandable ? setId(id, \"group\") : undefined,\n              })}\n        >\n          {isOpen && expandable && (expanded ? <DropUpXS /> : <DropDownXS />)}\n          {!icon &&\n          level === 0 &&\n          !isOpen &&\n          collapsedMode === \"icon\" &&\n          contentRef.current?.textContent ? (\n            <HvAvatar\n              variant=\"square\"\n              size=\"xs\"\n              backgroundColor=\"secondary_80\"\n              style={{ fontSize: \"15px\" }}\n            >\n              {contentRef.current?.textContent.substring(0, 1)}\n            </HvAvatar>\n          ) : (\n            icon\n          )}\n          {isOpen && label}\n        </StyledContent>\n      ),\n      [\n        id,\n        href,\n        target,\n        classes?.content,\n        treeViewItemClasses.content,\n        classes?.link,\n        treeViewItemClasses.link,\n        classes?.minimized,\n        treeViewItemClasses.minimized,\n        disabled,\n        handleClick,\n        handleMouseDown,\n        expandable,\n        icon,\n        level,\n        collapsible,\n        treeviewMode,\n        handleFocus,\n        selectable,\n        handleKeyDown,\n        selected,\n        expanded,\n        label,\n      ]\n    );\n\n    const renderedChildren = useMemo(\n      () =>\n        children && (\n          <StyledGroup\n            id={setId(id, \"group\")}\n            className={clsx(treeViewItemClasses.group, classes?.group)}\n            role={treeviewMode ? \"group\" : undefined}\n          >\n            {children}\n          </StyledGroup>\n        ),\n      [children, treeViewItemClasses.group, classes?.group, id, treeviewMode]\n    );\n\n    return (\n      <StyledNode\n        ref={handleRef}\n        id={id as string}\n        className={clsx(\n          treeViewItemClasses?.node,\n          classes?.node,\n          className,\n          disabled && clsx(treeViewItemClasses.disabled, classes?.disabled),\n          expandable &&\n            clsx(treeViewItemClasses.expandable, classes?.expandable),\n          expandable &&\n            !expanded &&\n            clsx(treeViewItemClasses.collapsed, classes?.collapsed),\n          expandable &&\n            expanded &&\n            clsx(treeViewItemClasses.expanded, classes?.expanded),\n          selectable &&\n            !disabled &&\n            clsx(treeViewItemClasses.selectable, classes?.selectable),\n          !disabled &&\n            !selectable &&\n            clsx(treeViewItemClasses.unselectable, classes?.unselectable),\n          !disabled &&\n            selectable &&\n            selected &&\n            clsx(treeViewItemClasses.selected, classes?.selected),\n          !disabled &&\n            selectable &&\n            !selected &&\n            clsx(treeViewItemClasses.unselected, classes?.unselected),\n          focused && clsx(treeViewItemClasses.focused, classes?.focused),\n          !isOpen &&\n            collapsedMode == \"simple\" &&\n            clsx(treeViewItemClasses.hide, classes?.hide),\n          !isOpen &&\n            collapsedMode == \"icon\" &&\n            isChildSelected &&\n            isChildSelected(nodeId) &&\n            clsx(treeViewItemClasses.selected, classes?.selected)\n        )}\n        data-hasicon={icon != null ? true : undefined}\n        {...(mode === \"treeview\" && {\n          role: \"treeitem\",\n          \"aria-selected\": ariaSelected,\n          \"aria-expanded\": expandable ? expanded : undefined,\n          \"aria-disabled\": disabled ? true : undefined,\n        })}\n        {...others}\n      >\n        {renderedContent}\n        {isOpen && (\n          <DescendantProvider id={nodeId} level={level + 1}>\n            {renderedChildren}\n          </DescendantProvider>\n        )}\n      </StyledNode>\n    );\n  }\n);\n"],"names":["preventSelection","event","disabled","shiftKey","ctrlKey","metaKey","preventDefault","HvVerticalNavigationTreeViewItem","forwardRef","props","ref","id","idProp","className","classes","disabledProp","selectable","selectableProp","nodeId","icon","label","href","target","payload","onClick","onMouseDown","onFocus","children","others","treeViewControlContext","useContext","TreeViewControlContext","isExpanded","isSelected","isFocused","isDisabled","isChildSelected","TreeViewStateContext","treeId","mode","collapsible","toggleExpansion","multiSelect","selectNode","selectRange","disabledItemsFocusable","registerNode","unregisterNode","mapFirstChar","unMapFirstChar","focus","treeviewMode","treeitemElement","setTreeitemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","isOpen","collapsedMode","VerticalNavigationContext","index","parentId","level","useDescendant","expandable","Array","isArray","expanded","focused","selected","useEffect","idAttribute","undefined","current","textContent","substring","toLowerCase","ariaSelected","handleFocus","useCallback","currentTarget","ownerDocument","document","getElementById","preventScroll","unfocusable","handleExpansion","multiple","handleSelection","end","handleMouseDown","handleClick","handleKeyDown","isEventHandled","key","altKey","stopPropagation","renderedContent","_jsxs","StyledContent","setId","component","clsx","treeViewItemClasses","content","link","minimized","variant","style","paddingLeft","role","tabIndex","onKeyDown","DropUpXS","_jsx","DropDownXS","HvAvatar","size","backgroundColor","fontSize","renderedChildren","StyledGroup","group","StyledNode","node","collapsed","unselectable","unselected","hide","DescendantProvider"],"mappings":";;;;;;;;;;;;AAwFA,MAAMA,mBAAmBA,CAACC,OAAOC,aAAa;AAC5C,MAAID,MAAME,YAAYF,MAAMG,WAAWH,MAAMI,WAAWH,UAAU;AAEhED,UAAMK,eAAgB;AAAA,EACxB;AACF;AAEO,MAAMC,mCAAmCC,WAC9C,CAACC,OAA8CC,QAAQ;;AAC/C,QAAA;AAAA,IACJC,IAAIC;AAAAA,IACJC;AAAAA,IACAC;AAAAA,IAEAZ,UAAUa,eAAe;AAAA,IAEzBC,YAAYC;AAAAA,IAEZC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEA,GAAGC;AAAAA,EACDnB,IAAAA;AAEEoB,QAAAA,yBAAyBC,WAAWC,sBAAsB;AAC1D,QAAA;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,EAAAA,IACrDN,WAAWO,oBAAoB;AAE3B,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACErB,IAAAA;AAEJ,QAAMsB,eAAeZ,SAAS;AAE9B,MAAI5B,KAAoB;AAExB,MAAIC,UAAU,MAAM;AACbA,SAAAA;AAAAA,EAAAA,WACI0B,UAAUpB,QAAQ;AAC3BP,SAAM,GAAE2B,UAAUpB;AAAAA,EACpB;AAEA,QAAM,CAACkC,iBAAiBC,kBAAkB,IAAIC,SAAS,IAAI;AACrDC,QAAAA,aAAaC,OAAuB,IAAI;AACxCC,QAAAA,YAAYC,WAAWL,oBAAoB3C,GAAG;AAE9CiD,QAAAA,aAAaC,QACjB,OAAO;AAAA,IACLC,SAAST;AAAAA,IACTzC,IAAIO;AAAAA,EAEN,IAAA,CAACA,QAAQkC,eAAe,CAAC;AAGrB,QAAA;AAAA,IAAEU;AAAAA,IAAQC;AAAAA,EAAAA,IAAkBjC,WAAWkC,yBAAyB;AAEhE,QAAA;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,IAAUC;AAAAA,EAAAA,IAAUC,cAAcT,UAAU;AAE3D,QAAMU,aAAa7B,eAAe8B,MAAMC,QAAQ5C,QAAQ;AACxD,QAAM6C,WAAWxC,aAAaA,WAAWd,MAAM,IAAI;AACnD,QAAMuD,UAAUvC,YAAYA,UAAUhB,MAAM,IAAI;AAChD,QAAMwD,WAAWzC,aAAaA,WAAWf,MAAM,IAAI;AACnD,QAAMhB,WAAWiC,aAAaA,WAAWjB,MAAM,IAAI;AAEnD,QAAMF,aACJC,kBAAkB,OAAOA,iBAAiB,CAACuB,eAAe,CAAC6B;AAE7DM,YAAU,MAAM;AAEV7B,QAAAA,gBAAgBC,kBAAkBkB,UAAU,IAAI;AACrC,mBAAA;AAAA,QACXtD,IAAIO;AAAAA,QACJ0D,aAAajE;AAAAA,QACbsD;AAAAA,QACAC;AAAAA,QACAlD;AAAAA,QACAqD;AAAAA,QACAnE,UAAUa;AAAAA,QACVW;AAAAA,QACAH;AAAAA,MAAAA,CACD;AAED,aAAO,MAAM;AACXwB,uBAAe7B,MAAM;AAAA,MAAA;AAAA,IAEzB;AAEO2D,WAAAA;AAAAA,EACN,GAAA,CACD/B,cACAC,gBACAmB,UACAD,OACA/C,QACAmD,YACAtD,cACAJ,IACAK,YACAU,SACAH,OAAO,CACR;AAEDoD,YAAU,MAAM;;AACd,QACE3B,gBACAC,kBACA7B,WACAmC,MAAAA,WAAWuB,YAAXvB,gBAAAA,IAAoBwB,cACpB;AAEE7D,mBAAAA,SACAqC,gBAAWuB,YAAXvB,mBAAoBwB,YAAYC,UAAU,GAAG,GAAGC,aAAa;AAG/D,aAAO,MAAM;AACXhC,uBAAe/B,MAAM;AAAA,MAAA;AAAA,IAEzB;AACO2D,WAAAA;AAAAA,KACN,CAAC7B,cAAcC,gBAAgB/B,QAAQE,KAAK,CAAC;AAE5C8D,MAAAA;AACJ,MAAIxC,aAAa;AACAgC,mBAAAA;AAAAA,aACNA,UAAU;AAOJ,mBAAA;AAAA,EACjB;AAEMS,QAAAA,cAAcC,YACjBnF,CAAU,UAAA;AAELA,QAAAA,MAAMqB,WAAWrB,MAAMoF,eAAe;AACxC,OAACpF,MAAMqB,OAAOgE,iBAAiBC,UAC5BC,eAAelD,MAAM,EACrBY,MAAM;AAAA,QAAEuC,eAAe;AAAA,MAAA,CAAM;AAAA,IAClC;AAEMC,UAAAA,cAAc,CAAC7C,0BAA0B3C;AAE7C,QAAA,CAACuE,WACDxE,MAAMoF,kBAAkBpF,MAAMqB,UAC9B,CAACoE,eACDxC,OACA;AACAA,YAAMjD,OAAOiB,MAAM;AAAA,IACrB;AAAA,EAAA,GAEF,CAAChB,UAAU2C,wBAAwBK,OAAOuB,SAASvD,QAAQoB,MAAM,CAAC;AAG9DqD,QAAAA,kBAAkBP,YACrBnF,CAAU,UAAA;AACT,QAAI,CAACC,UAAU;AACTiD,UAAAA,gBAAgB,CAACsB,WAAWvB,OAAO;AACrCA,cAAMjD,OAAOiB,MAAM;AAAA,MACrB;AAEA,YAAM0E,WACJlD,gBAAgBzC,MAAME,YAAYF,MAAMG,WAAWH,MAAMI;AAG3D,UAAIgE,cAAc,EAAEuB,YAAY5D,cAAcA,WAAWd,MAAM,IAAI;AAC7DuB,YAAAA;AAAiBA,0BAAgBxC,OAAOiB,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,EACF,GACA,CACEhB,UACAmE,YACAnB,OACAuB,SACAzC,YACAU,aACAxB,QACAuB,iBACAU,YAAY,CACb;AAGG0C,QAAAA,kBAAkBT,YACrBnF,CAAU,UAAA;AACLe,QAAAA,cAAc,CAACd,UAAU;AACvBiD,UAAAA,gBAAgB,CAACsB,WAAWvB,OAAO;AACrCA,cAAMjD,OAAOiB,MAAM;AAAA,MACrB;AAEA,YAAM0E,WACJlD,gBAAgBzC,MAAME,YAAYF,MAAMG,WAAWH,MAAMI;AAE3D,UAAIuF,UAAU;AACZ,YAAI3F,MAAME,UAAU;AACdyC,cAAAA;AAAa,mBAAOA,YAAY3C,OAAO;AAAA,cAAE6F,KAAK5E;AAAAA,YAAAA,CAAQ;AAAA,QAAA,OACrD;AACDyB,cAAAA;AAAmBA,mBAAAA,WAAW1C,OAAOiB,QAAQ,IAAI;AAAA,QACvD;AAAA,MAAA,OACK;AACDyB,YAAAA;AAAmBA,iBAAAA,WAAW1C,OAAOiB,MAAM;AAAA,MACjD;AAAA,IAAA,OACK;AACE,aAAA;AAAA,IACT;AAAA,EACF,GACA,CACEhB,UACAgD,OACAuB,SACA/B,aACAxB,QACAyB,YACAC,aACA5B,YACAmC,YAAY,CACb;AAGG4C,QAAAA,kBAAkBX,YACrBnF,CAAU,UAAA;AACTD,qBAAiBC,OAAOC,QAAQ;AAEhC,QAAIuB,aAAa;AACfA,kBAAYxB,KAAK;AAAA,IACnB;AAAA,EAAA,GAEF,CAACC,UAAUuB,WAAW,CAAC;AAGnBuE,QAAAA,cAAcZ,YACjBnF,CAAU,UAAA;AACT,QAAI,CAACC,UAAU;AACb,UAAImE,YAAY;AACdsB,wBAAgB1F,KAAK;AAAA,MACvB;AAEA,UAAIe,YAAY;AACd6E,wBAAgB5F,KAAK;AAAA,MACvB;AAAA,IACF;AAEA,QAAIuB,SAAS;AACXA,cAAQvB,KAAK;AAAA,IACf;AAAA,EAAA,GAEF,CACEC,UACAmE,YACAsB,iBACAE,iBACArE,SACAR,UAAU,CACX;AAGGiF,QAAAA,gBAAgBb,YACnBnF,CAAU,UAAA;AACT,QAAIiG,iBAAiB;AACf,UAAA;AAAA,MAAEC;AAAAA,IAAQlG,IAAAA;AAGdA,QAAAA,MAAMmG,UACNnG,MAAMG,WACNH,MAAMI,WACNJ,MAAMoF,kBAAkBpF,MAAMqB,QAC9B;AACA;AAAA,IACF;AACIiC,QAAAA,WAAWuB,YAAY7E,MAAMoF,eAAe;AAC1Cc,UAAAA,QAAQ,WAAWA,QAAQ,KAAK;AAClC,YAAI9B,YAAY;AACd6B,2BAAiBP,gBAAgB1F,KAAK;AAAA,QACxC;AAEA,YAAIe,YAAY;AACdkF,2BAAiBL,gBAAgB5F,KAAK;AAAA,QACxC;AAAA,MACF;AAEA,UAAIiG,gBAAgB;AAClBjG,cAAMK,eAAgB;AACtBL,cAAMoG,gBAAiB;AAAA,MACzB;AAAA,IACF;AAAA,KAEF,CAAChC,YAAYsB,iBAAiBE,iBAAiB7E,UAAU,CAAC;AAG5D,QAAMsF,kBAAkB1C,QACtB,MACE2C;;AAAAA,gCAACC,eAAa;AAAA,MACZ7F,IAAI8F,MAAM9F,IAAI,QAAQ;AAAA,MACtB+F,WAAWrF,OAAO,MAAM;AAAA,MACxBA;AAAAA,MACAC;AAAAA,MACAZ,KAAK6C;AAAAA,MACL1C,WAAW8F,KACTC,oBAAoBC,SACpB/F,mCAAS+F,SACTxF,QAAQ,QAAQsF,KAAKC,oBAAoBE,MAAMhG,mCAASgG,IAAI,GAC5D,CAAChD,UAAU6C,KAAKC,oBAAoBG,WAAWjG,mCAASiG,SAAS,CAAC;AAAA,MAEpEC,SAAS9G,WAAW,oBAAoB;AAAA,MACxCsB,SAASwE;AAAAA,MACTvE,aAAasE;AAAAA,MACbkB,OAAO;AAAA,QACLC,cACG7C,cAAclD,QAAQ,OAAO,IAAI,MAClCgD,SAAS3B,cAAc,KAAK;AAAA,MAChC;AAAA,MAAE,GACGW,eACD;AAAA,QACEgE,MAAM;AAAA,QACNC,UAAU;AAAA,QACV1F,SAASyD;AAAAA,MAAAA,IAEX;AAAA,QACEgC,MAAM;AAAA,QACNC,UAAUpG,cAAcqD,aAAa,IAAI;AAAA,QACzCgD,WAAWpB;AAAAA,QACX,gBAAgBjF,cAAc0D,WAAW,SAASG;AAAAA,QAClD,iBAAiBR,aAAaG,WAAWK;AAAAA,QACzC,iBAAiBR,aAAaoC,MAAM9F,IAAI,OAAO,IAAIkE;AAAAA,MACrD;AAAA,MAAClD,WAEJmC,UAAUO,eAAeG,WAAY8C,oBAAAA,UAAQ,EAAA,IAAMC,oBAACC,YAAa,CAAA,CAAA,IACjE,CAACrG,QACFgD,UAAU,KACV,CAACL,UACDC,kBAAkB,YAClBR,MAAAA,WAAWuB,YAAXvB,gBAAAA,IAAoBwB,eAClBwC,oBAACE,UAAQ;AAAA,QACPT,SAAQ;AAAA,QACRU,MAAK;AAAA,QACLC,iBAAgB;AAAA,QAChBV,OAAO;AAAA,UAAEW,UAAU;AAAA,QAAO;AAAA,QAAEjG,WAE3B4B,gBAAWuB,YAAXvB,mBAAoBwB,YAAYC,UAAU,GAAG;AAAA,MAAC,CAAC,IAGlD7D,MAED2C,UAAU1C,KAAK;AAAA,IAAA,CAAA;AAAA,KAGpB,CACET,IACAU,MACAC,QACAR,mCAAS+F,SACTD,oBAAoBC,SACpB/F,mCAASgG,MACTF,oBAAoBE,MACpBhG,mCAASiG,WACTH,oBAAoBG,WACpB7G,UACA8F,aACAD,iBACA1B,YACAlD,MACAgD,OACA3B,aACAW,cACAgC,aACAnE,YACAiF,eACAvB,UACAF,UACApD,KAAK,CACN;AAGH,QAAMyG,mBAAmBjE,QACvB,MACEjC,gCACGmG,aAAW;AAAA,IACVnH,IAAI8F,MAAM9F,IAAI,OAAO;AAAA,IACrBE,WAAW8F,KAAKC,oBAAoBmB,OAAOjH,mCAASiH,KAAK;AAAA,IACzDZ,MAAMhE,eAAe,UAAU0B;AAAAA,IAAUlD;AAAAA,EAAAA,CAEhC,GAGf,CAACA,UAAUiF,oBAAoBmB,OAAOjH,mCAASiH,OAAOpH,IAAIwC,YAAY,CAAC;AAGzE,8BACG6E,YAAU;AAAA,IACTtH,KAAK+C;AAAAA,IACL9C;AAAAA,IACAE,WAAW8F,MACTC,gDAAqBqB,MACrBnH,mCAASmH,MACTpH,WACAX,YAAYyG,KAAKC,oBAAoB1G,UAAUY,mCAASZ,QAAQ,GAChEmE,cACEsC,KAAKC,oBAAoBvC,YAAYvD,mCAASuD,UAAU,GAC1DA,cACE,CAACG,YACDmC,KAAKC,oBAAoBsB,WAAWpH,mCAASoH,SAAS,GACxD7D,cACEG,YACAmC,KAAKC,oBAAoBpC,UAAU1D,mCAAS0D,QAAQ,GACtDxD,cACE,CAACd,YACDyG,KAAKC,oBAAoB5F,YAAYF,mCAASE,UAAU,GAC1D,CAACd,YACC,CAACc,cACD2F,KAAKC,oBAAoBuB,cAAcrH,mCAASqH,YAAY,GAC9D,CAACjI,YACCc,cACA0D,YACAiC,KAAKC,oBAAoBlC,UAAU5D,mCAAS4D,QAAQ,GACtD,CAACxE,YACCc,cACA,CAAC0D,YACDiC,KAAKC,oBAAoBwB,YAAYtH,mCAASsH,UAAU,GAC1D3D,WAAWkC,KAAKC,oBAAoBnC,SAAS3D,mCAAS2D,OAAO,GAC7D,CAACX,UACCC,iBAAiB,YACjB4C,KAAKC,oBAAoByB,MAAMvH,mCAASuH,IAAI,GAC9C,CAACvE,UACCC,iBAAiB,UACjB3B,mBACAA,gBAAgBlB,MAAM,KACtByF,KAAKC,oBAAoBlC,UAAU5D,mCAAS4D,QAAQ,CAAC;AAAA,IAEzD,gBAAcvD,QAAQ,OAAO,OAAO0D;AAAAA,IAAU,GACzCtC,SAAS,cAAc;AAAA,MAC1B4E,MAAM;AAAA,MACN,iBAAiBjC;AAAAA,MACjB,iBAAiBb,aAAaG,WAAWK;AAAAA,MACzC,iBAAiB3E,WAAW,OAAO2E;AAAAA,IACrC;AAAA,IAAC,GACGjD;AAAAA,IAAMD,WAET2E,iBACAxC,8BACEwE,oBAAkB;AAAA,MAAC3H,IAAIO;AAAAA,MAAQiD,OAAOA,QAAQ;AAAA,MAAExC,UAC9CkG;AAAAA,IAAAA,CAEJ,CAAA;AAAA,EAAA,CACU;AAEjB,CAAC;"}

package/dist/esm/providers/Provider.js

@@ -1,19 +1,23 @@
-import { CacheProvider, Global, css } from "@emotion/react";
-import { CssBaseline, getThemesVars } from "@hitachivantara/uikit-styles";
+import { CacheProvider, Global, css, ClassNames } from "@emotion/react";
+import { CssBaseline, getThemesVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
 import { HvThemeProvider } from "./ThemeProvider.js";
 import { useMemo } from "react";
 import createCache from "@emotion/cache";
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import useUniqueId from "../hooks/useUniqueId.js";
 import { processThemes } from "../utils/theme.js";
+const scopedRootPrefix = "hv-uikit-scoped-root";
 const HvProvider = ({
   children,
   rootElementId,
-  enableCssBaseline = true,
+  cssBaseline = "global",
+  cssTheme = "global",
   themes,
   theme,
   colorMode,
   classNameKey = "hv-uikit-css"
 }) => {
+  const scopedRootId = useUniqueId(void 0, scopedRootPrefix);
   const themesList = processThemes(themes);
   const emotionCache = useMemo(() => createCache({
     key: classNameKey,
@@ -22,14 +26,33 @@ const HvProvider = ({
   return /* @__PURE__ */ jsxs(CacheProvider, {
     value: emotionCache,
     children: [/* @__PURE__ */ jsx(Global, {
-      styles: /* @__PURE__ */ css(enableCssBaseline && CssBaseline, " ", getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0ZtQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBHbG9iYWwsIENhY2hlUHJvdmlkZXIgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIjtcbmltcG9ydCB7XG4gIENzc0Jhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IHsgdXNlTWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IGNyZWF0ZUNhY2hlIGZyb20gXCJAZW1vdGlvbi9jYWNoZVwiO1xuXG4vLyBQcm92aWRlciBwcm9wc1xuZXhwb3J0IHR5cGUgSHZQcm92aWRlclByb3BzID0ge1xuICAvKipcbiAgICogWW91ciBjb21wb25lbnQgdHJlZS5cbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlO1xuICAvKipcbiAgICogQnkgZGVmYXVsdCB0aGUgYmFzZWxpbmUgc3R5bGVzIGFyZSBhcHBsaWVkIGdsb2JhbGx5IHRvIHRoZSBhcHBsaWNhdGlvbiB0byBhdm9pZCBzdHlsaW5nIGNvbmZsaWN0cyBhbmQgZm9yIHRoZSBVSSBLaXQgY29tcG9uZW50cyB0byB3b3JrIHByb3Blcmx5LlxuICAgKiBJZiB5b3UgYXJlIHByb3ZpZGluZyB5b3VyIG93biBiYXNlbGluZSBzdHlsZXMsIHlvdSBjYW4gc2V0IHRoaXMgcHJvcGVydHkgdG8gZmFsc2UuXG4gICAqL1xuICBlbmFibGVDc3NCYXNlbGluZT86IGJvb2xlYW47XG4gIC8qKlxuICAgKiBJZCBvZiB5b3VyIHJvb3QgZWxlbWVudC4gVGhlIHRoZW1lJ3MgYXR0cmlidXRlcyBhbmQgQ1NTIHZhcmlhYmxlcyB3aWxsIGJlIHNldCBpbiB0aGlzIGVsZW1lbnQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZG9jdW1lbnQncyBib2R5IHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHJvb3RFbGVtZW50SWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBMaXN0IG9mIHRoZW1lcyB0byBiZSB1c2VkIGJ5IFVJIEtpdC5cbiAgICogWW91IGNhbiBwcm92aWRlIHlvdXIgb3duIHRoZW1lcyBjcmVhdGVkIHdpdGggdGhlIGBjcmVhdGVUaGVtZWAgdXRpbGl0eSBhbmQvb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCBwcm92aWRlZCBieSBVSSBLaXQuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWVzPzogKEh2VGhlbWUgfCBIdlRoZW1lU3RydWN0dXJlKVtdO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSB0aGVtZS4gSXQgbXVzdCBiZSBvbmUgb2YgdGhlIHRoZW1lcyBwYXNzZWQgdG8gYHRoZW1lc2AuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZmlyc3QgdGhlbWUgZnJvbSB0aGUgYHRoZW1lc2AgbGlzdCBpcyB1c2VkLiBJZiBubyBgdGhlbWVzYCBsaXN0IGlzIHByb3ZpZGVkLCB0aGUgYGRzNWAgdGhlbWUgd2lsbCBiZSB1c2VkLlxuICAgKi9cbiAgdGhlbWU/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYWN0aXZlIGNvbG9yIG1vZGUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSBjb2xvciBtb2RlcyBvZiB0aGUgYWN0aXZlIHRoZW1lLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IGNvbG9yIG1vZGUgZGVmaW5lZCBpbiB0aGUgYWN0aXZlIHRoZW1lIGlzIHVzZWQuXG4gICAqIEZvciB0aGUgZGVmYXVsdCB0aGVtZXMgYGRzM2AgYW5kIGBkczVgLCB0aGUgYGRhd25gIGNvbG9yIG1vZGUgaXMgdGhlIG9uZSB1c2VkLlxuICAgKi9cbiAgY29sb3JNb2RlPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIHN0cmluZyB1c2VkIHRvIHByZWZpeCB0aGUgY2xhc3MgbmFtZXMgYW5kIHVuaXF1ZWx5IGlkZW50aWZ5IHRoZW0uIFRoZSBrZXkgY2FuIG9ubHkgY29udGFpbiBsb3dlciBjYXNlIGFscGhhYmV0aWNhbCBjaGFyYWN0ZXJzLlxuICAgKiBUaGlzIGlzIHVzZWZ1bCB0byBhdm9pZCBjbGFzcyBuYW1lIGNvbGxpc2lvbnMuXG4gICAqXG4gICAqIElmIG5vIHZhbHVlIGlzIHByb3ZpZGVkLCB0aGUgZGVmYXVsdCBpcyBgaHYtdWlraXQtY3NzYC5cbiAgICovXG4gIGNsYXNzTmFtZUtleT86IHN0cmluZztcbn07XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGVuYWJsZUNzc0Jhc2VsaW5lID0gdHJ1ZSxcbiAgdGhlbWVzLFxuICB0aGVtZSxcbiAgY29sb3JNb2RlLFxuICBjbGFzc05hbWVLZXkgPSBcImh2LXVpa2l0LWNzc1wiLFxufTogSHZQcm92aWRlclByb3BzKSA9PiB7XG4gIC8vIFRoZW1lc1xuICBjb25zdCB0aGVtZXNMaXN0OiAoSHZUaGVtZSB8IEh2VGhlbWVTdHJ1Y3R1cmUpW10gPSBwcm9jZXNzVGhlbWVzKHRoZW1lcyk7XG5cbiAgLy8gRW1vdGlvbiBjYWNoZVxuICAvLyBNb3ZlcyBVSSBLaXQgc3R5bGVzIHRvIHRoZSB0b3Agb2YgdGhlIDxoZWFkPiBzbyB0aGV5J3JlIGxvYWRlZCBmaXJzdC5cbiAgLy8gVGhpcyBlbmFibGVzIHVzZXJzIHRvIG92ZXJyaWRlIHRoZSBVSSBLaXQgc3R5bGVzIGlmIG5lY2Vzc2FyeS5cbiAgY29uc3QgZW1vdGlvbkNhY2hlID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgY3JlYXRlQ2FjaGUoe1xuICAgICAgICBrZXk6IGNsYXNzTmFtZUtleSxcbiAgICAgICAgcHJlcGVuZDogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIFtjbGFzc05hbWVLZXldXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8Q2FjaGVQcm92aWRlciB2YWx1ZT17ZW1vdGlvbkNhY2hlfT5cbiAgICAgIDxHbG9iYWxcbiAgICAgICAgc3R5bGVzPXtjc3NgXG4gICAgICAgICAgJHtlbmFibGVDc3NCYXNlbGluZSAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgcm9vdEVsZW1lbnRJZD17cm9vdEVsZW1lbnRJZH1cbiAgICAgICAgY2xhc3NOYW1lS2V5PXtjbGFzc05hbWVLZXl9XG4gICAgICA+XG4gICAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDwvSHZUaGVtZVByb3ZpZGVyPlxuICAgIDwvQ2FjaGVQcm92aWRlcj5cbiAgKTtcbn07XG4iXX0= */")
+      styles: /* @__PURE__ */ css(cssBaseline == "global" && CssBaseline, " ", getThemesVars(themesList), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:HvProvider;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL3Byb3ZpZGVycy9Qcm92aWRlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEd3QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9wcm92aWRlcnMvUHJvdmlkZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgY3NzIGFzIGNzc1JlYWN0LFxuICBHbG9iYWwsXG4gIENhY2hlUHJvdmlkZXIsXG4gIENsYXNzTmFtZXMsXG59IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHtcbiAgQ3NzQmFzZWxpbmUsXG4gIENzc1Njb3BlZEJhc2VsaW5lLFxuICBnZXRUaGVtZXNWYXJzLFxuICBIdlRoZW1lU3RydWN0dXJlLFxufSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuaW1wb3J0IHsgcHJvY2Vzc1RoZW1lcyB9IGZyb20gXCJ1dGlsc1wiO1xuaW1wb3J0IHsgSHZUaGVtZSB9IGZyb20gXCIuLi90eXBlcy90aGVtZVwiO1xuaW1wb3J0IHsgSHZUaGVtZVByb3ZpZGVyIH0gZnJvbSBcIi4vVGhlbWVQcm92aWRlclwiO1xuaW1wb3J0IFJlYWN0LCB7IHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCBjcmVhdGVDYWNoZSBmcm9tIFwiQGVtb3Rpb24vY2FjaGVcIjtcbmltcG9ydCB7IHVzZVVuaXF1ZUlkIH0gZnJvbSBcImhvb2tzXCI7XG5cbi8vIFByb3ZpZGVyIHByb3BzXG5leHBvcnQgdHlwZSBIdlByb3ZpZGVyUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBZb3VyIGNvbXBvbmVudCB0cmVlLlxuICAgKi9cbiAgY2hpbGRyZW4/OiBSZWFjdC5SZWFjdE5vZGU7XG4gIC8qKlxuICAgKiBJZCBvZiB5b3VyIHJvb3QgZWxlbWVudC5cbiAgICovXG4gIHJvb3RFbGVtZW50SWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBCeSBkZWZhdWx0IHRoZSBiYXNlbGluZSBzdHlsZXMgYXJlIGFwcGxpZWQgZ2xvYmFsbHksIGBnbG9iYWxgLCB0byB0aGUgYXBwbGljYXRpb24gZm9yIHRoZSBVSSBLaXQgY29tcG9uZW50cyB0byB3b3JrIHByb3Blcmx5LlxuICAgKiBJZiB5b3UgbmVlZCB0byBzY29wZSB0aGUgYmFzZWxpbmUgc3R5bGVzIHRvIGF2b2lkIHN0eWxpbmcgY29uZmxpY3RzLCB5b3UgY2FuIHNldCB0aGlzIHByb3BlcnR5IHRvIGBzY29wZWRgLlxuICAgKiBUbyBzY29wZSB0aGUgYmFzZWxpbmUgdG8geW91ciByb290LCB5b3UgbmVlZCB0byBhZGQgdGhlIGByb290RWxlbWVudElkYCBwcm9wZXJ0eS5cbiAgICogSWYgdGhlIGByb290RWxlbWVudElkYCBwcm9wZXJ0eSBpcyBub3Qgc2V0LCB0aGUgYmFzZWxpbmUgd2lsbCBiZSBzY29wZWQgdG8gYSBuZXcgY29udGFpbmVyLCBgaHYtdWlraXQtc2NvcGVkLXJvb3QqYCwgY3JlYXRlZCBhcm91bmQgeW91ciBjb250ZW50LlxuICAgKiBJZiB5b3UgYXJlIHByb3ZpZGluZyB5b3VyIG93biBiYXNlbGluZSBzdHlsZXMsIHlvdSBjYW4gc2V0IHRoaXMgcHJvcGVydHkgdG8gYG5vbmVgIHRvIGRpc2FibGUgdGhlIGJhc2VsaW5lIHN0eWxlcy5cbiAgICovXG4gIGNzc0Jhc2VsaW5lPzogXCJnbG9iYWxcIiB8IFwic2NvcGVkXCIgfCBcIm5vbmVcIjtcbiAgLyoqXG4gICAqIEJ5IGRlZmF1bHQgdGhlIHRoZW1lIHN0eWxlcyBhcmUgYXBwbGllZCBnbG9iYWxseSwgYGdsb2JhbGAsIHRvIHRoZSBhcHBsaWNhdGlvbi5cbiAgICogSWYgeW91IG5lZWQgdG8gc2NvcGUgdGhlIHRoZW1lIHN0eWxlcyB0byBhdm9pZCBzdHlsaW5nIGNvbmZsaWN0cywgeW91IGNhbiBzZXQgdGhpcyBwcm9wZXJ0eSB0byBgc2NvcGVkYC5cbiAgICogVG8gc2NvcGUgdGhlIHRoZW1lIHRvIHlvdXIgcm9vdCwgeW91IG5lZWQgdG8gYWRkIHRoZSBgcm9vdEVsZW1lbnRJZGAgcHJvcGVydHkuXG4gICAqIElmIHRoZSBgcm9vdEVsZW1lbnRJZGAgcHJvcGVydHkgaXMgbm90IHNldCwgdGhlIHRoZW1lIHdpbGwgYmUgc2NvcGVkIHRvIGEgbmV3IGNvbnRhaW5lciwgYGh2LXVpa2l0LXNjb3BlZC1yb290KmAsIGNyZWF0ZWQgYXJvdW5kIHlvdXIgY29udGVudC5cbiAgICovXG4gIGNzc1RoZW1lPzogXCJnbG9iYWxcIiB8IFwic2NvcGVkXCI7XG4gIC8qKlxuICAgKiBUaGUgc3RyaW5nIHVzZWQgdG8gcHJlZml4IHRoZSBjbGFzcyBuYW1lcyBhbmQgdW5pcXVlbHkgaWRlbnRpZnkgdGhlbS4gVGhlIGtleSBjYW4gb25seSBjb250YWluIGxvd2VyIGNhc2UgYWxwaGFiZXRpY2FsIGNoYXJhY3RlcnMuXG4gICAqIFRoaXMgaXMgdXNlZnVsIHRvIGF2b2lkIGNsYXNzIG5hbWUgY29sbGlzaW9ucy5cbiAgICpcbiAgICogSWYgbm8gdmFsdWUgaXMgcHJvdmlkZWQsIHRoZSBkZWZhdWx0IGlzIGBodi11aWtpdC1jc3NgLlxuICAgKi9cbiAgY2xhc3NOYW1lS2V5Pzogc3RyaW5nO1xuICAvKipcbiAgICogTGlzdCBvZiB0aGVtZXMgdG8gYmUgdXNlZCBieSBVSSBLaXQuXG4gICAqIFlvdSBjYW4gcHJvdmlkZSB5b3VyIG93biB0aGVtZXMgY3JlYXRlZCB3aXRoIHRoZSBgY3JlYXRlVGhlbWVgIHV0aWxpdHkgYW5kL29yIHRoZSBkZWZhdWx0IHRoZW1lcyBgZHMzYCBhbmQgYGRzNWAgcHJvdmlkZWQgYnkgVUkgS2l0LlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lcz86IChIdlRoZW1lIHwgSHZUaGVtZVN0cnVjdHVyZSlbXTtcbiAgLyoqXG4gICAqIFRoZSBhY3RpdmUgdGhlbWUuIEl0IG11c3QgYmUgb25lIG9mIHRoZSB0aGVtZXMgcGFzc2VkIHRvIGB0aGVtZXNgLlxuICAgKlxuICAgKiBJZiBubyB2YWx1ZSBpcyBwcm92aWRlZCwgdGhlIGZpcnN0IHRoZW1lIGZyb20gdGhlIGB0aGVtZXNgIGxpc3QgaXMgdXNlZC4gSWYgbm8gYHRoZW1lc2AgbGlzdCBpcyBwcm92aWRlZCwgdGhlIGBkczVgIHRoZW1lIHdpbGwgYmUgdXNlZC5cbiAgICovXG4gIHRoZW1lPzogc3RyaW5nO1xuICAvKipcbiAgICogVGhlIGFjdGl2ZSBjb2xvciBtb2RlLiBJdCBtdXN0IGJlIG9uZSBvZiB0aGUgY29sb3IgbW9kZXMgb2YgdGhlIGFjdGl2ZSB0aGVtZS5cbiAgICpcbiAgICogSWYgbm8gdmFsdWUgaXMgcHJvdmlkZWQsIHRoZSBmaXJzdCBjb2xvciBtb2RlIGRlZmluZWQgaW4gdGhlIGFjdGl2ZSB0aGVtZSBpcyB1c2VkLlxuICAgKiBGb3IgdGhlIGRlZmF1bHQgdGhlbWVzIGBkczNgIGFuZCBgZHM1YCwgdGhlIGBkYXduYCBjb2xvciBtb2RlIGlzIHRoZSBvbmUgdXNlZC5cbiAgICovXG4gIGNvbG9yTW9kZT86IHN0cmluZztcbn07XG5cbmNvbnN0IHNjb3BlZFJvb3RQcmVmaXggPSBcImh2LXVpa2l0LXNjb3BlZC1yb290XCIgYXMgY29uc3Q7XG5cbi8qKlxuICogRW5hYmxlcyB0aGVtaW5nIGNhcGFiaWxpdGllcyBhbmQgbWFrZXMgY3Jvc3MtY29tcG9uZW50IHRoZW1lIHByb3BlcnRpZXMgYXZhaWxhYmxlIGRvd24gdGhlIHRyZWUuXG4gKi9cbmV4cG9ydCBjb25zdCBIdlByb3ZpZGVyID0gKHtcbiAgY2hpbGRyZW4sXG4gIHJvb3RFbGVtZW50SWQsXG4gIGNzc0Jhc2VsaW5lID0gXCJnbG9iYWxcIixcbiAgY3NzVGhlbWUgPSBcImdsb2JhbFwiLFxuICB0aGVtZXMsXG4gIHRoZW1lLFxuICBjb2xvck1vZGUsXG4gIGNsYXNzTmFtZUtleSA9IFwiaHYtdWlraXQtY3NzXCIsXG59OiBIdlByb3ZpZGVyUHJvcHMpID0+IHtcbiAgY29uc3Qgc2NvcGVkUm9vdElkID0gdXNlVW5pcXVlSWQodW5kZWZpbmVkLCBzY29wZWRSb290UHJlZml4KTtcblxuICAvLyBUaGVtZXNcbiAgY29uc3QgdGhlbWVzTGlzdDogKEh2VGhlbWUgfCBIdlRoZW1lU3RydWN0dXJlKVtdID0gcHJvY2Vzc1RoZW1lcyh0aGVtZXMpO1xuXG4gIC8vIEVtb3Rpb24gY2FjaGVcbiAgLy8gTW92ZXMgVUkgS2l0IHN0eWxlcyB0byB0aGUgdG9wIG9mIHRoZSA8aGVhZD4gc28gdGhleSdyZSBsb2FkZWQgZmlyc3RcbiAgLy8gVGhpcyBlbmFibGVzIHVzZXJzIHRvIG92ZXJyaWRlIHRoZSBVSSBLaXQgc3R5bGVzIGlmIG5lY2Vzc2FyeVxuICBjb25zdCBlbW90aW9uQ2FjaGUgPSB1c2VNZW1vKFxuICAgICgpID0+XG4gICAgICBjcmVhdGVDYWNoZSh7XG4gICAgICAgIGtleTogY2xhc3NOYW1lS2V5LFxuICAgICAgICBwcmVwZW5kOiB0cnVlLFxuICAgICAgfSksXG4gICAgW2NsYXNzTmFtZUtleV1cbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxDYWNoZVByb3ZpZGVyIHZhbHVlPXtlbW90aW9uQ2FjaGV9PlxuICAgICAgPEdsb2JhbFxuICAgICAgICBzdHlsZXM9e2Nzc1JlYWN0YFxuICAgICAgICAgICR7Y3NzQmFzZWxpbmUgPT0gXCJnbG9iYWxcIiAmJiBDc3NCYXNlbGluZX1cbiAgICAgICAgICAke2dldFRoZW1lc1ZhcnModGhlbWVzTGlzdCl9XG4gICAgICAgIGB9XG4gICAgICAvPlxuICAgICAgPEh2VGhlbWVQcm92aWRlclxuICAgICAgICB0aGVtZXM9e3RoZW1lc0xpc3R9XG4gICAgICAgIHRoZW1lPXt0aGVtZSB8fCB0aGVtZXNMaXN0WzBdLm5hbWV9XG4gICAgICAgIGNvbG9yTW9kZT17Y29sb3JNb2RlIHx8IE9iamVjdC5rZXlzKHRoZW1lc0xpc3RbMF0uY29sb3JzLm1vZGVzKVswXX1cbiAgICAgICAgdGhlbWVSb290SWQ9e1xuICAgICAgICAgIGNzc1RoZW1lID09PSBcInNjb3BlZFwiID8gcm9vdEVsZW1lbnRJZCB8fCBzY29wZWRSb290SWQgOiB1bmRlZmluZWRcbiAgICAgICAgfVxuICAgICAgPlxuICAgICAgICA8Q2xhc3NOYW1lcz5cbiAgICAgICAgICB7KHsgY3NzIH0pID0+IHtcbiAgICAgICAgICAgIGlmIChjc3NCYXNlbGluZSA9PT0gXCJzY29wZWRcIiAmJiByb290RWxlbWVudElkKSB7XG4gICAgICAgICAgICAgIGNvbnN0IHJvb3RFbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQocm9vdEVsZW1lbnRJZCk7XG5cbiAgICAgICAgICAgICAgaWYgKHJvb3RFbGVtZW50KSB7XG4gICAgICAgICAgICAgICAgcm9vdEVsZW1lbnQuY2xhc3NMaXN0LmFkZChcbiAgICAgICAgICAgICAgICAgIGNzcyh7XG4gICAgICAgICAgICAgICAgICAgIC4uLkNzc1Njb3BlZEJhc2VsaW5lLFxuICAgICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG5cbiAgICAgICAgICAgIHJldHVybiAoY3NzVGhlbWUgPT09IFwic2NvcGVkXCIgfHwgY3NzQmFzZWxpbmUgPT09IFwic2NvcGVkXCIpICYmXG4gICAgICAgICAgICAgICFyb290RWxlbWVudElkID8gKFxuICAgICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgICAgaWQ9e3Njb3BlZFJvb3RJZH1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e1xuICAgICAgICAgICAgICAgICAgY3NzQmFzZWxpbmUgPT09IFwic2NvcGVkXCJcbiAgICAgICAgICAgICAgICAgICAgPyBjc3MoeyAuLi5Dc3NTY29wZWRCYXNlbGluZSB9KVxuICAgICAgICAgICAgICAgICAgICA6IHVuZGVmaW5lZFxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtjaGlsZHJlbn1cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICApIDogKFxuICAgICAgICAgICAgICBjaGlsZHJlblxuICAgICAgICAgICAgKTtcbiAgICAgICAgICB9fVxuICAgICAgICA8L0NsYXNzTmFtZXM+XG4gICAgICA8L0h2VGhlbWVQcm92aWRlcj5cbiAgICA8L0NhY2hlUHJvdmlkZXI+XG4gICk7XG59O1xuIl19 */")
     }), /* @__PURE__ */ jsx(HvThemeProvider, {
       themes: themesList,
       theme: theme || themesList[0].name,
       colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
-      rootElementId,
-      classNameKey,
-      children
+      themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
+      children: /* @__PURE__ */ jsx(ClassNames, {
+        children: ({
+          css: css2
+        }) => {
+          if (cssBaseline === "scoped" && rootElementId) {
+            const rootElement = document.getElementById(rootElementId);
+            if (rootElement) {
+              rootElement.classList.add(css2({
+                ...CssScopedBaseline
+              }));
+            }
+          }
+          return (cssTheme === "scoped" || cssBaseline === "scoped") && !rootElementId ? /* @__PURE__ */ jsx("div", {
+            id: scopedRootId,
+            className: cssBaseline === "scoped" ? css2({
+              ...CssScopedBaseline
+            }) : void 0,
+            children
+          }) : children;
+        }
+      })
     })]
   });
 };

package/dist/esm/providers/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { css, Global, CacheProvider } from \"@emotion/react\";\nimport {\n  CssBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport { useMemo } from \"react\";\nimport createCache from \"@emotion/cache\";\n\n// Provider props\nexport type HvProviderProps = {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.\n   * If you are providing your own baseline styles, you can set this property to false.\n   */\n  enableCssBaseline?: boolean;\n  /**\n   * Id of your root element. The theme's attributes and CSS variables will be set in this element.\n   *\n   * If no value is provided, the document's body will be used.\n   */\n  rootElementId?: string;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n  /**\n   * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n   * This is useful to avoid class name collisions.\n   *\n   * If no value is provided, the default is `hv-uikit-css`.\n   */\n  classNameKey?: string;\n};\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  enableCssBaseline = true,\n  themes,\n  theme,\n  colorMode,\n  classNameKey = \"hv-uikit-css\",\n}: HvProviderProps) => {\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first.\n  // This enables users to override the UI Kit styles if necessary.\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        key: classNameKey,\n        prepend: true,\n      }),\n    [classNameKey]\n  );\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={css`\n          ${enableCssBaseline && CssBaseline}\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        rootElementId={rootElementId}\n        classNameKey={classNameKey}\n      >\n        {children}\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["HvProvider","children","rootElementId","enableCssBaseline","themes","theme","colorMode","classNameKey","themesList","processThemes","emotionCache","useMemo","createCache","key","prepend","CacheProvider","value","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes"],"mappings":";;;;;;;AA6DO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,oBAAoB;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,eAAe;AACA,MAAM;AAEfC,QAAAA,aAA6CC,cAAcL,MAAM;AAKjEM,QAAAA,eAAeC,QACnB,MACEC,YAAY;AAAA,IACVC,KAAKN;AAAAA,IACLO,SAAS;AAAA,EAAA,CACV,GACH,CAACP,YAAY,CAAC;AAGhB,8BACGQ,eAAa;AAAA,IAACC,OAAON;AAAAA,IAAaT,UAAA,CACjCgB,oBAACC,QAAM;AAAA,MACLC,4BACIhB,qBAAqBiB,aAAW,KAChCC,cAAcb,UAAU,UAACc,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,64JAAA;AAAA,IAAA,CAE7B,GACFP,oBAACQ,iBAAe;AAAA,MACdrB,QAAQI;AAAAA,MACRH,OAAOA,SAASG,WAAW,CAAC,EAAEkB;AAAAA,MAC9BpB,WAAWA,aAAaqB,OAAOC,KAAKpB,WAAW,CAAC,EAAEqB,OAAOC,KAAK,EAAE,CAAC;AAAA,MACjE5B;AAAAA,MACAK;AAAAA,MAA2BN;AAAAA,IAAAA,CAGX,CAAA;AAAA,EAAA,CACJ;AAEpB;"}
+{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import {\n  css as cssReact,\n  Global,\n  CacheProvider,\n  ClassNames,\n} from \"@emotion/react\";\nimport {\n  CssBaseline,\n  CssScopedBaseline,\n  getThemesVars,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { processThemes } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\nimport { HvThemeProvider } from \"./ThemeProvider\";\nimport React, { useMemo } from \"react\";\nimport createCache from \"@emotion/cache\";\nimport { useUniqueId } from \"hooks\";\n\n// Provider props\nexport type HvProviderProps = {\n  /**\n   * Your component tree.\n   */\n  children?: React.ReactNode;\n  /**\n   * Id of your root element.\n   */\n  rootElementId?: string;\n  /**\n   * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.\n   * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the baseline to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.\n   */\n  cssBaseline?: \"global\" | \"scoped\" | \"none\";\n  /**\n   * By default the theme styles are applied globally, `global`, to the application.\n   * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.\n   * To scope the theme to your root, you need to add the `rootElementId` property.\n   * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.\n   */\n  cssTheme?: \"global\" | \"scoped\";\n  /**\n   * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.\n   * This is useful to avoid class name collisions.\n   *\n   * If no value is provided, the default is `hv-uikit-css`.\n   */\n  classNameKey?: string;\n  /**\n   * List of themes to be used by UI Kit.\n   * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.\n   *\n   * If no value is provided, the `ds5` theme will be used.\n   */\n  themes?: (HvTheme | HvThemeStructure)[];\n  /**\n   * The active theme. It must be one of the themes passed to `themes`.\n   *\n   * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `ds5` theme will be used.\n   */\n  theme?: string;\n  /**\n   * The active color mode. It must be one of the color modes of the active theme.\n   *\n   * If no value is provided, the first color mode defined in the active theme is used.\n   * For the default themes `ds3` and `ds5`, the `dawn` color mode is the one used.\n   */\n  colorMode?: string;\n};\n\nconst scopedRootPrefix = \"hv-uikit-scoped-root\" as const;\n\n/**\n * Enables theming capabilities and makes cross-component theme properties available down the tree.\n */\nexport const HvProvider = ({\n  children,\n  rootElementId,\n  cssBaseline = \"global\",\n  cssTheme = \"global\",\n  themes,\n  theme,\n  colorMode,\n  classNameKey = \"hv-uikit-css\",\n}: HvProviderProps) => {\n  const scopedRootId = useUniqueId(undefined, scopedRootPrefix);\n\n  // Themes\n  const themesList: (HvTheme | HvThemeStructure)[] = processThemes(themes);\n\n  // Emotion cache\n  // Moves UI Kit styles to the top of the <head> so they're loaded first\n  // This enables users to override the UI Kit styles if necessary\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        key: classNameKey,\n        prepend: true,\n      }),\n    [classNameKey]\n  );\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <Global\n        styles={cssReact`\n          ${cssBaseline == \"global\" && CssBaseline}\n          ${getThemesVars(themesList)}\n        `}\n      />\n      <HvThemeProvider\n        themes={themesList}\n        theme={theme || themesList[0].name}\n        colorMode={colorMode || Object.keys(themesList[0].colors.modes)[0]}\n        themeRootId={\n          cssTheme === \"scoped\" ? rootElementId || scopedRootId : undefined\n        }\n      >\n        <ClassNames>\n          {({ css }) => {\n            if (cssBaseline === \"scoped\" && rootElementId) {\n              const rootElement = document.getElementById(rootElementId);\n\n              if (rootElement) {\n                rootElement.classList.add(\n                  css({\n                    ...CssScopedBaseline,\n                  })\n                );\n              }\n            }\n\n            return (cssTheme === \"scoped\" || cssBaseline === \"scoped\") &&\n              !rootElementId ? (\n              <div\n                id={scopedRootId}\n                className={\n                  cssBaseline === \"scoped\"\n                    ? css({ ...CssScopedBaseline })\n                    : undefined\n                }\n              >\n                {children}\n              </div>\n            ) : (\n              children\n            );\n          }}\n        </ClassNames>\n      </HvThemeProvider>\n    </CacheProvider>\n  );\n};\n"],"names":["scopedRootPrefix","HvProvider","children","rootElementId","cssBaseline","cssTheme","themes","theme","colorMode","classNameKey","scopedRootId","useUniqueId","undefined","themesList","processThemes","emotionCache","useMemo","createCache","key","prepend","CacheProvider","value","_jsx","Global","styles","CssBaseline","getThemesVars","process","env","NODE_ENV","HvThemeProvider","name","Object","keys","colors","modes","themeRootId","ClassNames","css","rootElement","document","getElementById","classList","add","CssScopedBaseline","id","className"],"mappings":";;;;;;;;AAyEA,MAAMA,mBAAmB;AAKlB,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,WAAW;AAAA,EACXC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,eAAe;AACA,MAAM;AACfC,QAAAA,eAAeC,YAAYC,QAAWZ,gBAAgB;AAGtDa,QAAAA,aAA6CC,cAAcR,MAAM;AAKjES,QAAAA,eAAeC,QACnB,MACEC,YAAY;AAAA,IACVC,KAAKT;AAAAA,IACLU,SAAS;AAAA,EAAA,CACV,GACH,CAACV,YAAY,CAAC;AAGhB,8BACGW,eAAa;AAAA,IAACC,OAAON;AAAAA,IAAab,UAAA,CACjCoB,oBAACC,QAAM;AAAA,MACLC,4BACIpB,eAAe,YAAYqB,aAC3BC,KAAAA,cAAcb,UAAU,GAACc,OAAAA,QAAAC,IAAAC,wDAAAF,QAAAC,IAAAC,aAAA,eAAA,KAAA,66OAAA;AAAA,IAAA,CAE7B,GACFP,oBAACQ,iBAAe;AAAA,MACdxB,QAAQO;AAAAA,MACRN,OAAOA,SAASM,WAAW,CAAC,EAAEkB;AAAAA,MAC9BvB,WAAWA,aAAawB,OAAOC,KAAKpB,WAAW,CAAC,EAAEqB,OAAOC,KAAK,EAAE,CAAC;AAAA,MACjEC,aACE/B,aAAa,WAAWF,iBAAiBO,eAAeE;AAAAA,MACzDV,8BAEAmC,YAAU;AAAA,QAAAnC,UACRA,CAAC;AAAA,UAAEoC,KAAAA;AAAAA,QAAAA,MAAU;AACRlC,cAAAA,gBAAgB,YAAYD,eAAe;AACvCoC,kBAAAA,cAAcC,SAASC,eAAetC,aAAa;AAEzD,gBAAIoC,aAAa;AACHG,0BAAAA,UAAUC,IACpBL,KAAI;AAAA,gBACF,GAAGM;AAAAA,cACJ,CAAA,CAAC;AAAA,YAEN;AAAA,UACF;AAEA,kBAAQvC,aAAa,YAAYD,gBAAgB,aAC/C,CAACD,oCACD,OAAA;AAAA,YACE0C,IAAInC;AAAAA,YACJoC,WACE1C,gBAAgB,WACZkC,KAAI;AAAA,cAAE,GAAGM;AAAAA,YAAmB,CAAA,IAC5BhC;AAAAA,YACLV;AAAAA,UAEQ,CAAA,IAGXA;AAAAA,QAEJ;AAAA,MAAA,CAAC;AAAA,IAAA,CAEa,CAAA;AAAA,EAAA,CACJ;AAEpB;"}

package/dist/esm/providers/ThemeProvider.js

@@ -10,11 +10,10 @@ const HvThemeProvider = ({
   themes: themesList,
   theme,
   colorMode,
-  rootElementId,
-  classNameKey
+  themeRootId
 }) => {
   let pTheme = parseTheme(themesList, theme, colorMode);
-  const [rootId] = useState(rootElementId);
+  const [rootId] = useState(themeRootId);
   const [activeTheme, setActiveTheme] = useState(pTheme.theme);
   const [selectedTheme, setSelectedTheme] = useState(pTheme.selectedTheme);
   const [selectedMode, setThemeMode] = useState(pTheme.selectedMode);
@@ -29,7 +28,7 @@ const HvThemeProvider = ({
     setSelectedTheme(pTheme.selectedTheme);
     setThemeMode(pTheme.selectedMode);
     setColorModes(pTheme.colorModes);
-    setElementAttrs(pTheme.selectedTheme, pTheme.selectedMode, pTheme.styles, rootId);
+    setElementAttrs(pTheme.selectedTheme, pTheme.selectedMode, pTheme.colorScheme, rootId);
   };
   useEffect(() => {
     changeTheme(theme, colorMode);
@@ -41,9 +40,8 @@ const HvThemeProvider = ({
     selectedTheme,
     selectedMode,
     changeTheme,
-    classNameKey,
     rootId
-  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, classNameKey, rootId]);
+  }), [themes, colorModes, activeTheme, selectedTheme, selectedMode, changeTheme, rootId]);
   const MuiTheme = createTheme({
     breakpoints: {
       values: {

package/dist/esm/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  colorMode: string;\n  classNameKey: string;\n  rootElementId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  colorMode,\n  rootElementId,\n  classNameKey,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(rootElementId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.styles,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      classNameKey,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      classNameKey,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        {children}\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","rootElementId","classNameKey","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","styles","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;AAuBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWN,YAAYC,OAAOC,SAAS;AAEpD,QAAM,CAACK,MAAM,IAAIC,SAA6BL,aAAa;AAC3D,QAAM,CAACM,aAAaC,cAAc,IAAIF,SACpCH,OAAOJ,KAAK;AAEd,QAAM,CAACU,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAAChB,QAAQkB,SAAS,IAAIT,SAAmBR,WAAWkB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUjB,WAAWkB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACpB,UAAU,CAAC;AAEf,QAAMsB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWN,YAAYuB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOJ,KAAK;AAC3BW,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,QACPnB,MAAM;AAAA,EAAA;AAIVc,YAAU,MAAM;AACdC,gBAAYrB,OAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,OAAOC,SAAS,CAAC;AAEfyB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL7B;AAAAA,IACAgB;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAlB;AAAAA,IACAG;AAAAA,EACF,IACA,CACER,QACAgB,YACAN,aACAE,eACAE,cACAS,aACAlB,cACAG,MAAM,CACP;AAGH,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,6BACGC,eAAgB;AAAA,IAAChC,OAAO4B;AAAAA,IAAS/B,UAC/BoC,oBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa7B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { parseTheme, HvThemeStructure } from \"@hitachivantara/uikit-styles\";\nimport { HvThemeContext } from \"@hitachivantara/uikit-react-shared\";\nimport type { HvThemeContextValue } from \"@hitachivantara/uikit-react-shared\";\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { setElementAttrs } from \"utils\";\nimport { HvTheme } from \"../types/theme\";\n\nexport { HvThemeContext };\nexport type { HvThemeContextValue };\n\ninterface HvThemeProviderProps {\n  children: React.ReactNode;\n  themes: (HvTheme | HvThemeStructure)[];\n  theme: string;\n  colorMode: string;\n  themeRootId?: string;\n}\n\nexport const HvThemeProvider = ({\n  children,\n  themes: themesList,\n  theme,\n  colorMode,\n  themeRootId,\n}: HvThemeProviderProps) => {\n  let pTheme = parseTheme(themesList, theme, colorMode);\n\n  const [rootId] = useState<string | undefined>(themeRootId);\n  const [activeTheme, setActiveTheme] = useState<HvTheme | HvThemeStructure>(\n    pTheme.theme\n  );\n  const [selectedTheme, setSelectedTheme] = useState<string>(\n    pTheme.selectedTheme\n  );\n  const [selectedMode, setThemeMode] = useState<string>(pTheme.selectedMode);\n  const [colorModes, setColorModes] = useState<string[]>(pTheme.colorModes);\n  const [themes, setThemes] = useState<string[]>(themesList.map((t) => t.name));\n\n  useEffect(() => {\n    setThemes(themesList.map((t) => t.name));\n  }, [themesList]);\n\n  const changeTheme = (newTheme = selectedTheme, newMode = selectedMode) => {\n    pTheme = parseTheme(themesList, newTheme, newMode);\n\n    setActiveTheme(pTheme.theme);\n    setSelectedTheme(pTheme.selectedTheme);\n    setThemeMode(pTheme.selectedMode);\n    setColorModes(pTheme.colorModes);\n\n    setElementAttrs(\n      pTheme.selectedTheme,\n      pTheme.selectedMode,\n      pTheme.colorScheme,\n      rootId\n    );\n  };\n\n  useEffect(() => {\n    changeTheme(theme, colorMode);\n  }, [theme, colorMode]);\n\n  const value = useMemo(\n    () => ({\n      themes,\n      colorModes,\n      activeTheme: activeTheme as HvTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    }),\n    [\n      themes,\n      colorModes,\n      activeTheme,\n      selectedTheme,\n      selectedMode,\n      changeTheme,\n      rootId,\n    ]\n  );\n\n  const MuiTheme = createTheme({\n    breakpoints: {\n      values: {\n        ...activeTheme.breakpoints.values,\n      },\n    },\n  });\n\n  return (\n    <MuiThemeProvider theme={MuiTheme}>\n      <HvThemeContext.Provider value={value}>\n        {children}\n      </HvThemeContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n"],"names":["HvThemeProvider","children","themes","themesList","theme","colorMode","themeRootId","pTheme","parseTheme","rootId","useState","activeTheme","setActiveTheme","selectedTheme","setSelectedTheme","selectedMode","setThemeMode","colorModes","setColorModes","setThemes","map","t","name","useEffect","changeTheme","newTheme","newMode","setElementAttrs","colorScheme","value","useMemo","MuiTheme","createTheme","breakpoints","values","MuiThemeProvider","HvThemeContext","Provider"],"mappings":";;;;;;;AAsBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC;AAAAA,EACAC,QAAQC;AAAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACoB,MAAM;AAC1B,MAAIC,SAASC,WAAWL,YAAYC,OAAOC,SAAS;AAEpD,QAAM,CAACI,MAAM,IAAIC,SAA6BJ,WAAW;AACzD,QAAM,CAACK,aAAaC,cAAc,IAAIF,SACpCH,OAAOH,KAAK;AAEd,QAAM,CAACS,eAAeC,gBAAgB,IAAIJ,SACxCH,OAAOM,aAAa;AAEtB,QAAM,CAACE,cAAcC,YAAY,IAAIN,SAAiBH,OAAOQ,YAAY;AACzE,QAAM,CAACE,YAAYC,aAAa,IAAIR,SAAmBH,OAAOU,UAAU;AAClE,QAAA,CAACf,QAAQiB,SAAS,IAAIT,SAAmBP,WAAWiB,IAAKC,CAAAA,MAAMA,EAAEC,IAAI,CAAC;AAE5EC,YAAU,MAAM;AACdJ,cAAUhB,WAAWiB,IAAKC,CAAMA,MAAAA,EAAEC,IAAI,CAAC;AAAA,EAAA,GACtC,CAACnB,UAAU,CAAC;AAEf,QAAMqB,cAAcA,CAACC,WAAWZ,eAAea,UAAUX,iBAAiB;AAC/DP,aAAAA,WAAWL,YAAYsB,UAAUC,OAAO;AAEjDd,mBAAeL,OAAOH,KAAK;AAC3BU,qBAAiBP,OAAOM,aAAa;AACrCG,iBAAaT,OAAOQ,YAAY;AAChCG,kBAAcX,OAAOU,UAAU;AAE/BU,oBACEpB,OAAOM,eACPN,OAAOQ,cACPR,OAAOqB,aACPnB,MAAM;AAAA,EAAA;AAIVc,YAAU,MAAM;AACdC,gBAAYpB,OAAOC,SAAS;AAAA,EAAA,GAC3B,CAACD,OAAOC,SAAS,CAAC;AAEfwB,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACL5B;AAAAA,IACAe;AAAAA,IACAN;AAAAA,IACAE;AAAAA,IACAE;AAAAA,IACAS;AAAAA,IACAf;AAAAA,EAAAA,IAEF,CACEP,QACAe,YACAN,aACAE,eACAE,cACAS,aACAf,MAAM,CACP;AAGH,QAAMsB,WAAWC,YAAY;AAAA,IAC3BC,aAAa;AAAA,MACXC,QAAQ;AAAA,QACN,GAAGvB,YAAYsB,YAAYC;AAAAA,MAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAED,6BACGC,eAAgB;AAAA,IAAC/B,OAAO2B;AAAAA,IAAS9B,UAC/BmC,oBAAAA,eAAeC,UAAQ;AAAA,MAACR;AAAAA,MAAa5B;AAAAA,IAAAA,CAC3B;AAAA,EAAA,CAEM;AAEvB;"}

package/dist/esm/utils/iconVariant.js

@@ -5,17 +5,17 @@ const iconVariant = (variant, color, semantic) => {
     case "success":
       return /* @__PURE__ */ jsx(Success, {
         color,
-        semantic: semantic && "sema1"
+        semantic: semantic && "positive"
       });
     case "warning":
       return /* @__PURE__ */ jsx(Caution, {
         color,
-        semantic: semantic && "sema3"
+        semantic: semantic && "warning"
       });
     case "error":
       return /* @__PURE__ */ jsx(Fail, {
         color,
-        semantic: semantic && "sema4"
+        semantic: semantic && "negative"
       });
     case "info":
       return /* @__PURE__ */ jsx(Info, {

package/dist/esm/utils/iconVariant.js.map

@@ -1 +1 @@
-{"version":3,"file":"iconVariant.js","sources":["../../../src/utils/iconVariant.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Fail,\n  Success,\n  Caution,\n  Info,\n} from \"@hitachivantara/uikit-react-icons\";\n\nconst iconVariant = (variant, color, semantic) => {\n  switch (variant) {\n    case \"success\":\n      return <Success color={color} semantic={semantic && \"sema1\"} />;\n    case \"warning\":\n      return <Caution color={color} semantic={semantic && \"sema3\"} />;\n    case \"error\":\n      return <Fail color={color} semantic={semantic && \"sema4\"} />;\n    case \"info\":\n      return <Info color={color} />;\n    default:\n      return null;\n  }\n};\n\nexport default iconVariant;\n"],"names":["iconVariant","variant","color","semantic","Success","Caution","Fail","Info"],"mappings":";;AAQA,MAAMA,cAAcA,CAACC,SAASC,OAAOC,aAAa;AAChD,UAAQF,SAAO;AAAA,IACb,KAAK;AACH,iCAAQG,SAAO;AAAA,QAACF;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAW;AAAA,IACjE,KAAK;AACH,iCAAQE,SAAO;AAAA,QAACH;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAW;AAAA,IACjE,KAAK;AACH,iCAAQG,MAAI;AAAA,QAACJ;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAW;AAAA,IAC9D,KAAK;AACH,iCAAQI,MAAI;AAAA,QAACL;AAAAA,MAAAA,CAAgB;AAAA,IAC/B;AACS,aAAA;AAAA,EAAK;AAElB;AAEA,MAAA,gBAAeF;"}
+{"version":3,"file":"iconVariant.js","sources":["../../../src/utils/iconVariant.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  Fail,\n  Success,\n  Caution,\n  Info,\n} from \"@hitachivantara/uikit-react-icons\";\n\nconst iconVariant = (variant, color, semantic) => {\n  switch (variant) {\n    case \"success\":\n      return <Success color={color} semantic={semantic && \"positive\"} />;\n    case \"warning\":\n      return <Caution color={color} semantic={semantic && \"warning\"} />;\n    case \"error\":\n      return <Fail color={color} semantic={semantic && \"negative\"} />;\n    case \"info\":\n      return <Info color={color} />;\n    default:\n      return null;\n  }\n};\n\nexport default iconVariant;\n"],"names":["iconVariant","variant","color","semantic","Success","Caution","Fail","Info"],"mappings":";;AAQA,MAAMA,cAAcA,CAACC,SAASC,OAAOC,aAAa;AAChD,UAAQF,SAAO;AAAA,IACb,KAAK;AACH,iCAAQG,SAAO;AAAA,QAACF;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAc;AAAA,IACpE,KAAK;AACH,iCAAQE,SAAO;AAAA,QAACH;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAa;AAAA,IACnE,KAAK;AACH,iCAAQG,MAAI;AAAA,QAACJ;AAAAA,QAAcC,UAAUA,YAAY;AAAA,MAAA,CAAc;AAAA,IACjE,KAAK;AACH,iCAAQI,MAAI;AAAA,QAACL;AAAAA,MAAAA,CAAgB;AAAA,IAC/B;AACS,aAAA;AAAA,EAAK;AAElB;AAEA,MAAA,gBAAeF;"}

package/dist/esm/utils/theme.js

@@ -1,17 +1,26 @@
-import { themes } from "@hitachivantara/uikit-styles";
-const setElementAttrs = (theme, mode, styles, elementId) => {
-  const element = elementId && document.getElementById(elementId) || document.body;
-  element.setAttribute(`data-theme`, theme);
-  element.setAttribute(`data-color-mode`, mode);
-  element.style.backgroundColor = styles.bgColor;
-  element.style.colorScheme = styles.colorScheme;
-  element.style.accentColor = styles.accentColor;
-  element.style.color = styles.color;
-  element.style.fontSize = styles.fontSize;
-  element.style.fontWeight = styles.fontWeight;
-  element.style.lineHeight = styles.lineHeight;
-  element.style.letterSpacing = styles.letterSpacing;
-  element.style.fontFamily = styles.fontFamily;
+import { theme, themes } from "@hitachivantara/uikit-styles";
+const setElementStyle = (element, style) => {
+  for (const property in style) {
+    element.style[property] = style[property];
+  }
+};
+const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
+  const element = themeRootId ? document.getElementById(themeRootId) : document.body;
+  if (element) {
+    element.setAttribute(`data-theme`, themeName);
+    element.setAttribute(`data-color-mode`, modeName);
+    setElementStyle(element, {
+      colorScheme,
+      backgroundColor: theme.colors.backgroundColor,
+      accentColor: theme.colors.secondary,
+      color: theme.colors.secondary,
+      fontSize: theme.typography.body.fontSize,
+      fontWeight: theme.typography.body.fontWeight,
+      lineHeight: theme.typography.body.lineHeight,
+      letterSpacing: theme.typography.body.letterSpacing,
+      fontFamily: theme.fontFamily.body
+    });
+  }
 };
 const applyThemeCustomizations = (obj, customizations) => {
   const isObject = (val) => val && typeof val === "object" && !Array.isArray(val);
@@ -31,14 +40,14 @@ const applyThemeCustomizations = (obj, customizations) => {
   });
   return customizedTheme;
 };
-const createTheme = (theme) => {
+const createTheme = (props) => {
   var _a;
   const {
     name,
     base = "ds5",
     inheritColorModes = true,
     ...customizations
-  } = theme;
+  } = props;
   const customizedTheme = customizations ? applyThemeCustomizations(themes[base], customizations) : {
     ...themes[base]
   };
@@ -66,13 +75,13 @@ const createTheme = (theme) => {
 const processThemes = (themesList) => {
   if (themesList && Array.isArray(themesList) && themesList.length > 0) {
     const list = [];
-    themesList.map((theme) => {
-      const i = list.findIndex((t) => t.name.trim() === theme.name.trim());
+    themesList.map((thm) => {
+      const i = list.findIndex((t) => t.name.trim() === thm.name.trim());
       if (i !== -1) {
         list.splice(i, 1);
-        list.push(theme);
+        list.push(thm);
       } else {
-        list.push(theme);
+        list.push(thm);
       }
     });
     return list;

package/dist/esm/utils/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvParsedThemeStyles,\n  HvThemeStructure,\n} from \"@hitachivantara/uikit-styles\";\nimport { HvTheme, HvCreateThemeProps } from \"../types/theme\";\n\n/**\n * Sets the element attributes for a theme and color mode.\n */\nexport const setElementAttrs = (\n  theme: string,\n  mode: string,\n  styles: HvParsedThemeStyles,\n  elementId?: string\n) => {\n  const element =\n    (elementId && document.getElementById(elementId)) || document.body;\n\n  element.setAttribute(`data-theme`, theme);\n  element.setAttribute(`data-color-mode`, mode);\n\n  // Set default properties for all components to inherit\n  element.style.backgroundColor = styles.bgColor;\n  element.style.colorScheme = styles.colorScheme;\n  element.style.accentColor = styles.accentColor;\n  element.style.color = styles.color;\n  element.style.fontSize = styles.fontSize;\n  element.style.fontWeight = styles.fontWeight;\n  element.style.lineHeight = styles.lineHeight;\n  element.style.letterSpacing = styles.letterSpacing;\n  element.style.fontFamily = styles.fontFamily;\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n  const isObject = (val: any) =>\n    val && typeof val === \"object\" && !Array.isArray(val);\n\n  // Customized theme\n  const customizedTheme = { ...obj };\n\n  // Add new values to the theme or replace values\n  Object.keys(customizations).forEach((key) => {\n    if (customizedTheme[key]) {\n      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n        customizedTheme[key] = applyThemeCustomizations(\n          customizedTheme[key],\n          customizations[key]\n        );\n      } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n        customizedTheme[key] = customizations[key];\n      }\n    } else {\n      customizedTheme[key] = customizations[key];\n    }\n  });\n\n  return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n  theme: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n  const {\n    name,\n    base = \"ds5\",\n    inheritColorModes = true,\n    ...customizations\n  } = theme;\n\n  // Apply customizations to the base theme\n  const customizedTheme: HvTheme | HvThemeStructure = customizations\n    ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n    : { ...themes[base] };\n\n  // Set theme name\n  customizedTheme.name = name.trim();\n\n  // Fill new color modes with missing colors\n  if (customizations) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!themes[base].colors.modes[mode]) {\n        customizedTheme.colors.modes[mode] = {\n          ...themes[base].colors.modes.dawn,\n          ...(customizedTheme.colors.modes[mode] as Partial<\n            HvThemeColorModeStructure & { [key: string]: string }\n          >),\n        };\n      }\n    });\n  }\n\n  // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n  // we're removing any color modes that might have been inherited\n  if (!inheritColorModes && customizations.colors?.modes) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n        delete customizedTheme.colors.modes[mode];\n      }\n    });\n  }\n\n  // Created theme\n  return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n *  - Cleans themes with the same name\n *  - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n  themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n  if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n    const list: (HvTheme | HvThemeStructure)[] = [];\n\n    themesList.map((theme) => {\n      const i: number = list.findIndex(\n        (t) => t.name.trim() === theme.name.trim()\n      );\n\n      if (i !== -1) {\n        list.splice(i, 1);\n        list.push(theme);\n      } else {\n        list.push(theme);\n      }\n    });\n\n    // Cleaned themes\n    return list;\n  } else {\n    // DS5\n    return [themes.ds5];\n  }\n};\n"],"names":["setElementAttrs","theme","mode","styles","elementId","element","document","getElementById","body","setAttribute","style","backgroundColor","bgColor","colorScheme","accentColor","color","fontSize","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","name","base","inheritColorModes","themes","trim","colors","modes","dawn","includes","processThemes","themesList","length","list","map","i","findIndex","t","splice","push","ds5"],"mappings":"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"}
+{"version":3,"file":"theme.js","sources":["../../../src/utils/theme.ts"],"sourcesContent":["/*eslint import/namespace: [2, { allowComputed: true }]*/\nimport {\n  themes,\n  HvThemeColorModeStructure,\n  HvThemeStructure,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\nimport { CSSProperties } from \"react\";\nimport { HvTheme, HvCreateThemeProps } from \"../types/theme\";\n\n/**\n * Sets the element style properties.\n */\nconst setElementStyle = (element: HTMLElement, style: CSSProperties) => {\n  for (const property in style) {\n    element.style[property] = style[property];\n  }\n};\n\n/**\n * Sets the element attributes and style for a theme and color mode.\n */\nexport const setElementAttrs = (\n  themeName: string,\n  modeName: string,\n  colorScheme: string,\n  themeRootId?: string\n) => {\n  const element = themeRootId\n    ? document.getElementById(themeRootId)\n    : document.body;\n\n  if (element) {\n    element.setAttribute(`data-theme`, themeName);\n    element.setAttribute(`data-color-mode`, modeName);\n\n    // Set default properties for all components to inherit\n    setElementStyle(element, {\n      colorScheme: colorScheme,\n      backgroundColor: theme.colors.backgroundColor,\n      accentColor: theme.colors.secondary,\n      color: theme.colors.secondary,\n      fontSize: theme.typography.body.fontSize,\n      fontWeight: theme.typography.body.fontWeight,\n      lineHeight: theme.typography.body.lineHeight,\n      letterSpacing: theme.typography.body.letterSpacing,\n      fontFamily: theme.fontFamily.body,\n    });\n  }\n};\n\n/**\n * Applies customizations to a theme.\n */\nconst applyThemeCustomizations = (obj: object, customizations: object) => {\n  const isObject = (val: any) =>\n    val && typeof val === \"object\" && !Array.isArray(val);\n\n  // Customized theme\n  const customizedTheme = { ...obj };\n\n  // Add new values to the theme or replace values\n  Object.keys(customizations).forEach((key) => {\n    if (customizedTheme[key]) {\n      if (isObject(customizedTheme[key]) && isObject(customizations[key])) {\n        customizedTheme[key] = applyThemeCustomizations(\n          customizedTheme[key],\n          customizations[key]\n        );\n      } else if (typeof customizedTheme[key] == typeof customizations[key]) {\n        customizedTheme[key] = customizations[key];\n      }\n    } else {\n      customizedTheme[key] = customizations[key];\n    }\n  });\n\n  return customizedTheme;\n};\n\n/**\n * Creates a customized theme based on the base theme and customizations given.\n * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.\n */\nexport const createTheme = (\n  props: HvCreateThemeProps\n): HvTheme | HvThemeStructure => {\n  const {\n    name,\n    base = \"ds5\",\n    inheritColorModes = true,\n    ...customizations\n  } = props;\n\n  // Apply customizations to the base theme\n  const customizedTheme: HvTheme | HvThemeStructure = customizations\n    ? (applyThemeCustomizations(themes[base], customizations) as HvTheme)\n    : { ...themes[base] };\n\n  // Set theme name\n  customizedTheme.name = name.trim();\n\n  // Fill new color modes with missing colors\n  if (customizations) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!themes[base].colors.modes[mode]) {\n        customizedTheme.colors.modes[mode] = {\n          ...themes[base].colors.modes.dawn,\n          ...(customizedTheme.colors.modes[mode] as Partial<\n            HvThemeColorModeStructure & { [key: string]: string }\n          >),\n        };\n      }\n    });\n  }\n\n  // If the flag `inheritColorModes` is false and customizations were given for the color modes,\n  // we're removing any color modes that might have been inherited\n  if (!inheritColorModes && customizations.colors?.modes) {\n    Object.keys(customizedTheme.colors.modes).forEach((mode) => {\n      if (!Object.keys(customizations.colors?.modes || {}).includes(mode)) {\n        delete customizedTheme.colors.modes[mode];\n      }\n    });\n  }\n\n  // Created theme\n  return customizedTheme;\n};\n\n/**\n * Process the themes provided to the HvProvider:\n *  - Cleans themes with the same name\n *  - Returns the default if the list is empty (ds5)\n */\nexport const processThemes = (\n  themesList?: (HvTheme | HvThemeStructure)[]\n): (HvTheme | HvThemeStructure)[] => {\n  if (themesList && Array.isArray(themesList) && themesList.length > 0) {\n    const list: (HvTheme | HvThemeStructure)[] = [];\n\n    themesList.map((thm) => {\n      const i: number = list.findIndex(\n        (t) => t.name.trim() === thm.name.trim()\n      );\n\n      if (i !== -1) {\n        list.splice(i, 1);\n        list.push(thm);\n      } else {\n        list.push(thm);\n      }\n    });\n\n    // Cleaned themes\n    return list;\n  } else {\n    // DS5\n    return [themes.ds5];\n  }\n};\n"],"names":["setElementStyle","element","style","property","setElementAttrs","themeName","modeName","colorScheme","themeRootId","document","getElementById","body","setAttribute","backgroundColor","theme","colors","accentColor","secondary","color","fontSize","typography","fontWeight","lineHeight","letterSpacing","fontFamily","applyThemeCustomizations","obj","customizations","isObject","val","Array","isArray","customizedTheme","Object","keys","forEach","key","createTheme","props","name","base","inheritColorModes","themes","trim","modes","mode","dawn","includes","processThemes","themesList","length","list","map","thm","i","findIndex","t","splice","push","ds5"],"mappings":";AAaA,MAAMA,kBAAkBA,CAACC,SAAsBC,UAAyB;AACtE,aAAWC,YAAYD,OAAO;AAC5BD,YAAQC,MAAMC,QAAQ,IAAID,MAAMC,QAAQ;AAAA,EAC1C;AACF;AAKO,MAAMC,kBAAkBA,CAC7BC,WACAC,UACAC,aACAC,gBACG;AACH,QAAMP,UAAUO,cACZC,SAASC,eAAeF,WAAW,IACnCC,SAASE;AAEb,MAAIV,SAAS;AACHW,YAAAA,aAAc,cAAaP,SAAS;AACpCO,YAAAA,aAAc,mBAAkBN,QAAQ;AAGhDN,oBAAgBC,SAAS;AAAA,MACvBM;AAAAA,MACAM,iBAAiBC,MAAMC,OAAOF;AAAAA,MAC9BG,aAAaF,MAAMC,OAAOE;AAAAA,MAC1BC,OAAOJ,MAAMC,OAAOE;AAAAA,MACpBE,UAAUL,MAAMM,WAAWT,KAAKQ;AAAAA,MAChCE,YAAYP,MAAMM,WAAWT,KAAKU;AAAAA,MAClCC,YAAYR,MAAMM,WAAWT,KAAKW;AAAAA,MAClCC,eAAeT,MAAMM,WAAWT,KAAKY;AAAAA,MACrCC,YAAYV,MAAMU,WAAWb;AAAAA,IAAAA,CAC9B;AAAA,EACH;AACF;AAKA,MAAMc,2BAA2BA,CAACC,KAAaC,mBAA2B;AAClEC,QAAAA,WAAWA,CAACC,QAChBA,OAAO,OAAOA,QAAQ,YAAY,CAACC,MAAMC,QAAQF,GAAG;AAGtD,QAAMG,kBAAkB;AAAA,IAAE,GAAGN;AAAAA,EAAAA;AAG7BO,SAAOC,KAAKP,cAAc,EAAEQ,QAASC,CAAQ,QAAA;AACvCJ,QAAAA,gBAAgBI,GAAG,GAAG;AACpBR,UAAAA,SAASI,gBAAgBI,GAAG,CAAC,KAAKR,SAASD,eAAeS,GAAG,CAAC,GAAG;AACnDA,wBAAAA,GAAG,IAAIX,yBACrBO,gBAAgBI,GAAG,GACnBT,eAAeS,GAAG,CAAC;AAAA,MAAA,WAEZ,OAAOJ,gBAAgBI,GAAG,KAAK,OAAOT,eAAeS,GAAG,GAAG;AACpDA,wBAAAA,GAAG,IAAIT,eAAeS,GAAG;AAAA,MAC3C;AAAA,IAAA,OACK;AACWA,sBAAAA,GAAG,IAAIT,eAAeS,GAAG;AAAA,IAC3C;AAAA,EAAA,CACD;AAEMJ,SAAAA;AACT;AAMaK,MAAAA,cAAcA,CACzBC,UAC+B;;AACzB,QAAA;AAAA,IACJC;AAAAA,IACAC,OAAO;AAAA,IACPC,oBAAoB;AAAA,IACpB,GAAGd;AAAAA,EACDW,IAAAA;AAGJ,QAAMN,kBAA8CL,iBAC/CF,yBAAyBiB,OAAOF,IAAI,GAAGb,cAAc,IACtD;AAAA,IAAE,GAAGe,OAAOF,IAAI;AAAA,EAAA;AAGJD,kBAAAA,OAAOA,KAAKI;AAG5B,MAAIhB,gBAAgB;AAClBM,WAAOC,KAAKF,gBAAgBjB,OAAO6B,KAAK,EAAET,QAASU,CAAS,SAAA;AAC1D,UAAI,CAACH,OAAOF,IAAI,EAAEzB,OAAO6B,MAAMC,IAAI,GAAG;AACpB9B,wBAAAA,OAAO6B,MAAMC,IAAI,IAAI;AAAA,UACnC,GAAGH,OAAOF,IAAI,EAAEzB,OAAO6B,MAAME;AAAAA,UAC7B,GAAId,gBAAgBjB,OAAO6B,MAAMC,IAAI;AAAA,QAAA;AAAA,MAIzC;AAAA,IAAA,CACD;AAAA,EACH;AAIA,MAAI,CAACJ,uBAAqBd,oBAAeZ,WAAfY,mBAAuBiB,QAAO;AACtDX,WAAOC,KAAKF,gBAAgBjB,OAAO6B,KAAK,EAAET,QAASU,CAAS,SAAA;;AACtD,UAAA,CAACZ,OAAOC,OAAKP,MAAAA,eAAeZ,WAAfY,gBAAAA,IAAuBiB,UAAS,EAAE,EAAEG,SAASF,IAAI,GAAG;AAC5Db,eAAAA,gBAAgBjB,OAAO6B,MAAMC,IAAI;AAAA,MAC1C;AAAA,IAAA,CACD;AAAA,EACH;AAGOb,SAAAA;AACT;AAOagB,MAAAA,gBAAgBA,CAC3BC,eACmC;AACnC,MAAIA,cAAcnB,MAAMC,QAAQkB,UAAU,KAAKA,WAAWC,SAAS,GAAG;AACpE,UAAMC,OAAuC,CAAA;AAE7CF,eAAWG,IAAKC,CAAQ,QAAA;AAChBC,YAAAA,IAAYH,KAAKI,UACpBC,CAAMA,MAAAA,EAAEjB,KAAKI,KAAWU,MAAAA,IAAId,KAAKI,KAAM,CAAA;AAG1C,UAAIW,MAAM,IAAI;AACPG,aAAAA,OAAOH,GAAG,CAAC;AAChBH,aAAKO,KAAKL,GAAG;AAAA,MAAA,OACR;AACLF,aAAKO,KAAKL,GAAG;AAAA,MACf;AAAA,IAAA,CACD;AAGMF,WAAAA;AAAAA,EAAAA,OACF;AAEE,WAAA,CAACT,OAAOiB,GAAG;AAAA,EACpB;AACF;"}