@hitachivantara/uikit-react-core 5.90.0 → 5.91.1

package/dist/esm/Focus/Focus.js

@@ -1,7 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, cloneElement } from "react";
 import { isBrowser } from "../utils/browser.js";
-import { ConditionalWrapper } from "../utils/ConditionalWrapper.js";
 import { isOneOfKeys, isKey } from "../utils/keyboardUtils.js";
 import { useClasses, staticClasses } from "./Focus.styles.js";
 import { setFocusTo, getFocusableChildren } from "./utils.js";
@@ -16,11 +14,9 @@ const HvFocus = ({
   focusOnClick = false,
   focusDisabled = true,
   strategy = "listbox",
-  useFalseFocus = false,
   filterClass,
   navigationJump = 4
 }) => {
-  const [showFocus, setShowFocus] = useState(false);
   const [childFocus, setChildFocus] = useState();
   const [hasRunConfig, setHasRunConfig] = useState(false);
   const { classes, cx } = useClasses(classesProp);
@@ -86,29 +82,23 @@ const HvFocus = ({
     setHasRunConfig(true);
   };
   const addFocusClass = (evt) => {
-    if (!useFalseFocus) {
-      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-      evt.currentTarget.classList.add("HvIsFocused");
-      classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
-    }
+    classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    evt.currentTarget.classList.add("HvIsFocused");
+    classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
   };
   const removeFocusClass = () => {
-    if (!useFalseFocus) {
-      getFocuses().forEach((element) => {
-        classes.focused.split(" ").forEach((c) => element.classList.remove(c));
-        element.classList.remove("HvIsFocused");
-        classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
-      });
-    }
+    getFocuses().forEach((element) => {
+      classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      element.classList.remove("HvIsFocused");
+      classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
+    });
   };
   const onFocus = (evt) => {
     addFocusClass(evt);
-    setShowFocus(true);
     childFocus?.focus?.();
     onFocusStrategy(evt);
   };
   const onBlur = () => {
-    setShowFocus(false);
     removeFocusClass();
     onBlurStrategy();
   };
@@ -119,7 +109,6 @@ const HvFocus = ({
     setTabIndex(evt.currentTarget, 0);
     if (!focusOnClick) {
       removeFocusClass();
-      setShowFocus(false);
     }
   };
   const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
@@ -295,11 +284,7 @@ const HvFocus = ({
     if (isBrowser("firefox")) evt.preventDefault();
   };
   if (disabled) return children;
-  const focusWrapper = (childrenToWrap) => /* @__PURE__ */ jsxs("div", { className: classes.externalReference, children: [
-    childrenToWrap,
-    showFocus && /* @__PURE__ */ jsx("div", { className: classes.falseFocus })
-  ] });
-  return /* @__PURE__ */ jsx(ConditionalWrapper, { condition: useFalseFocus, wrapper: focusWrapper, children: cloneElement(children, {
+  return cloneElement(children, {
     className: cx(
       [classes.root, filterClass],
       {
@@ -316,7 +301,7 @@ const HvFocus = ({
     onKeyDown,
     onKeyUp,
     selected
-  }) });
+  });
 };
 export {
   HvFocus,

package/dist/esm/Focus/Focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { ConditionalWrapper } from \"../utils/ConditionalWrapper\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\ninterface Focuses {\n  first: Element;\n  last: Element;\n  previous: Element;\n  next: Element;\n  fall: Element;\n  jump: Element;\n}\n\n/** @deprecated internal use only. this component has navigation issues. */\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  useFalseFocus = false,\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [showFocus, setShowFocus] = useState<boolean>(false);\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\",\n          ),\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el: any, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\"),\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el: any) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt: any) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el: any) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child: any) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt: any) => {\n    if (!useFalseFocus) {\n      // evt.currentTarget.classList.add(classes.focused);\n      classes.focused\n        .split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n      // add global class HvIsFocused as a marker\n      // not to be styled directly, only as helper in specific css queries\n      evt.currentTarget.classList.add(\"HvIsFocused\");\n      classes?.focus\n        ?.split(\" \")\n        .forEach((c) => evt.currentTarget.classList.add(c));\n    }\n  };\n\n  const removeFocusClass = () => {\n    if (!useFalseFocus) {\n      getFocuses().forEach((element) => {\n        // element.classList.remove(classes.focused);\n        classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n        // remove the global class HvIsFocused\n        element.classList.remove(\"HvIsFocused\");\n        classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n      });\n    }\n  };\n\n  const onFocus = (evt: any) => {\n    addFocusClass(evt);\n    setShowFocus(true);\n    // give focus to child element if any focusable\n\n    childFocus?.focus?.();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    setShowFocus(false);\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt: any) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n      setShowFocus(false);\n    }\n  };\n\n  const focusAndUpdateIndex = (\n    nextFocus: Element,\n    previousFocus: any,\n    focusesList: Element[],\n  ) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (\n    currentFocusIndex: number,\n    jump: number,\n    listSize: number,\n  ) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n    currentFocusIndex: number,\n    jump: number,\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length,\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt: any) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt: any) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string),\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses: Focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump,\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt: any) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  const focusWrapper = (childrenToWrap: React.ReactNode) => (\n    <div className={classes.externalReference}>\n      {childrenToWrap}\n      {showFocus && <div className={classes.falseFocus} />}\n    </div>\n  );\n\n  return (\n    <ConditionalWrapper condition={useFalseFocus} wrapper={focusWrapper}>\n      {cloneElement(children, {\n        className: cx(\n          [classes.root, filterClass],\n          {\n            [classes.selected]: selected,\n            [classes.disabled]: disabledClass,\n            [classes.focusDisabled]: focusDisabled,\n          },\n          children.props.className,\n        ),\n        ref: config,\n        onFocus,\n        onBlur,\n        onMouseDown,\n        onKeyDown,\n        onKeyUp,\n        selected,\n      })}\n    </ConditionalWrapper>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Focus.js","sources":["../../../src/Focus/Focus.tsx"],"sourcesContent":["import { cloneElement, useState } from \"react\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey, isOneOfKeys } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./Focus.styles\";\nimport { getFocusableChildren, setFocusTo } from \"./utils\";\n\nexport { staticClasses as focusClasses };\nexport type HvFocusClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFocusStrategies = \"listbox\" | \"menu\" | \"card\" | \"grid\";\n\nexport interface HvFocusProps extends HvBaseProps<HTMLElement, \"children\"> {\n  children: React.ReactElement;\n  /** Extra configuration for the child element. */\n  configuration?: {\n    tabIndex?: number;\n  };\n  /** Indicates that the disabled class should be applied. */\n  disabledClass?: boolean;\n  /** Whether the focus is selected. */\n  selected?: boolean;\n  /** Whether the focus is disabled. */\n  disabled?: boolean;\n  /** The reference to the root element to hold all Focus' context. */\n  rootRef?: React.RefObject<HTMLElement>;\n  /** Show focus when click element. v */\n  focusOnClick?: boolean;\n  /** Show focus when click element. v */\n  focusDisabled?: boolean;\n  /** Focus and navigation strategy to be used. v */\n  strategy?: HvFocusStrategies;\n  /** Uses an absolute positioned div as a focus. v */\n  useFalseFocus?: boolean;\n  /** Narrows the results of the focus to only theses class v */\n  filterClass?: string;\n  /** How much the navigation will skip when using the arrows. v */\n  navigationJump?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFocusClasses;\n}\n\ninterface Focuses {\n  first: Element;\n  last: Element;\n  previous: Element;\n  next: Element;\n  fall: Element;\n  jump: Element;\n}\n\n/** @deprecated internal use only. this component has navigation issues. */\nexport const HvFocus = ({\n  classes: classesProp,\n  children,\n  configuration = {},\n  disabledClass = false,\n  selected = false,\n  disabled = false,\n  rootRef = undefined,\n  focusOnClick = false,\n  focusDisabled = true,\n  strategy = \"listbox\",\n  filterClass,\n  navigationJump = 4,\n}: HvFocusProps) => {\n  const [childFocus, setChildFocus] = useState<any>();\n  const [hasRunConfig, setHasRunConfig] = useState(false);\n  const { classes, cx } = useClasses(classesProp);\n\n  const getFocuses = () => {\n    const focuses = rootRef?.current\n      ? Array.from(\n          rootRef.current.getElementsByClassName(\n            filterClass || staticClasses.root || \"root\",\n          ),\n        )\n      : [];\n    return focuses;\n  };\n\n  const setTabIndex = (el: any, tabIndex = 0) => {\n    if (!el) return;\n    const elChildFocus = getFocusableChildren(el)[0];\n    if (elChildFocus) {\n      el.tabIndex = -1;\n      elChildFocus.tabIndex = tabIndex;\n    } else {\n      el.tabIndex = tabIndex;\n    }\n  };\n\n  const setSelectedTabIndex = () => {\n    const focuses = getFocuses();\n    const firstSelected = focuses.find((focus) =>\n      focus.classList.contains(classes.selected || \"selected\"),\n    );\n\n    if (!firstSelected) return;\n    focuses.forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(firstSelected, 0);\n  };\n\n  const clearTabSiblings = (el: any) => {\n    getFocuses().forEach((focus) => setTabIndex(focus, -1));\n    setTabIndex(el, 0);\n  };\n\n  const onFocusStrategy = (evt: any) => {\n    if (strategy === \"listbox\") {\n      clearTabSiblings(evt.currentTarget);\n    }\n  };\n\n  const onBlurStrategy = () => {\n    if (\n      strategy === \"listbox\" &&\n      rootRef &&\n      rootRef.current &&\n      !rootRef.current.contains(document.activeElement)\n    ) {\n      setTimeout(() => {\n        setSelectedTabIndex();\n      }, 10);\n    }\n  };\n\n  const config = (el: any) => {\n    const { tabIndex } = configuration;\n    if (!el || hasRunConfig) return;\n    if (strategy === \"card\") {\n      setChildFocus(children);\n      return;\n    }\n\n    if (strategy === \"grid\") {\n      return;\n    }\n\n    const focusableChildren = getFocusableChildren(el);\n    if (focusableChildren.length) {\n      focusableChildren.forEach((child: any) => setTabIndex(child, -1));\n      setChildFocus(focusableChildren[0]);\n    }\n\n    if (tabIndex != null) setTabIndex(el, tabIndex);\n    setHasRunConfig(true);\n  };\n\n  const addFocusClass = (evt: any) => {\n    // evt.currentTarget.classList.add(classes.focused);\n    classes.focused\n      .split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n    // add global class HvIsFocused as a marker\n    // not to be styled directly, only as helper in specific css queries\n    evt.currentTarget.classList.add(\"HvIsFocused\");\n    classes?.focus\n      ?.split(\" \")\n      .forEach((c) => evt.currentTarget.classList.add(c));\n  };\n\n  const removeFocusClass = () => {\n    getFocuses().forEach((element) => {\n      // element.classList.remove(classes.focused);\n      classes.focused.split(\" \").forEach((c) => element.classList.remove(c));\n      // remove the global class HvIsFocused\n      element.classList.remove(\"HvIsFocused\");\n      classes?.focus?.split(\" \").forEach((c) => element.classList.remove(c));\n    });\n  };\n\n  const onFocus = (evt: any) => {\n    addFocusClass(evt);\n    // give focus to child element if any focusable\n\n    childFocus?.focus?.();\n    onFocusStrategy(evt);\n  };\n\n  const onBlur = () => {\n    removeFocusClass();\n    onBlurStrategy();\n  };\n\n  const onMouseDown = (evt: any) => {\n    const hasCard = !!evt.currentTarget?.querySelector(\".HvIsCardGridElement\");\n    if (strategy === \"grid\" && hasCard) return;\n\n    setFocusTo(evt.currentTarget);\n    setTabIndex(evt.currentTarget, 0);\n    // remove focus outline unless explicitly enabled\n    if (!focusOnClick) {\n      // TODO this piece of code works only because onMouseDown is happening after the focus event\n      // There is nothing in here that guarantees the order of these events, so it may present a problem in the future\n      removeFocusClass();\n    }\n  };\n\n  const focusAndUpdateIndex = (\n    nextFocus: Element,\n    previousFocus: any,\n    focusesList: Element[],\n  ) => {\n    if (focusesList?.includes(previousFocus)) {\n      setTabIndex(previousFocus, -1);\n    }\n    setTabIndex(nextFocus, 0);\n    setFocusTo(nextFocus);\n  };\n\n  const getEnabledKeys = (\n    currentFocusIndex: number,\n    jump: number,\n    listSize: number,\n  ) => ({\n    right:\n      (currentFocusIndex + 1) % jump === 0 ||\n      currentFocusIndex + 1 > listSize - 1,\n    left: currentFocusIndex % jump === 0,\n    up: currentFocusIndex - jump < 0,\n    down:\n      currentFocusIndex + jump > listSize ||\n      currentFocusIndex + jump > listSize - 1,\n  });\n\n  const onGridKeyDownHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n    currentFocusIndex: number,\n    jump: number,\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"ArrowLeft\",\n        \"ArrowRight\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    // except for Enter and SpaceBar\n    if (!isOneOfKeys(evt, [\"Enter\", \"Space\"])) {\n      evt.preventDefault();\n      evt.stopPropagation();\n    }\n\n    const blockedKeys = getEnabledKeys(\n      currentFocusIndex,\n      jump,\n      focusesList.length,\n    );\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        if (isBrowser(\"firefox\")) {\n          evt.target.click();\n        } else {\n          evt.currentTarget.click();\n        }\n        break;\n      case \"ArrowUp\":\n        if (!blockedKeys.up) {\n          focusAndUpdateIndex(\n            focuses.jump || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowDown\":\n        if (!blockedKeys.down) {\n          focusAndUpdateIndex(\n            focuses.fall || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowLeft\":\n        if (!blockedKeys.left) {\n          focusAndUpdateIndex(\n            focuses.previous || focuses.last,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"ArrowRight\":\n        if (!blockedKeys.right) {\n          focusAndUpdateIndex(\n            focuses.next || focuses.first,\n            evt.current,\n            focusesList,\n          );\n        }\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onVerticalArrangementHandler = (\n    evt: any,\n    focuses: Focuses,\n    focusesList: Element[],\n  ) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\n        \"ArrowUp\",\n        \"ArrowDown\",\n        \"Home\",\n        \"End\",\n        \"Space\",\n        \"Enter\",\n      ]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    switch (evt.code) {\n      case \"Space\":\n      case \"Enter\":\n        evt.target.click();\n        break;\n      case \"ArrowUp\":\n        focusAndUpdateIndex(\n          focuses.previous || focuses.last,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"ArrowDown\":\n        focusAndUpdateIndex(\n          focuses.next || focuses.first,\n          evt.current,\n          focusesList,\n        );\n        break;\n      case \"Home\":\n        focusAndUpdateIndex(focuses.first, evt.current, focusesList);\n        break;\n      case \"End\":\n        focusAndUpdateIndex(focuses.last, evt.current, focusesList);\n        break;\n      default:\n    }\n  };\n\n  const onSingleHandler = (evt: any) => {\n    const childFocusIsInput = childFocus && childFocus.nodeName === \"INPUT\";\n\n    if (\n      !isOneOfKeys(evt, [\"Space\", \"Enter\"]) ||\n      (childFocusIsInput && isKey(evt, \"Enter\"))\n    ) {\n      // nothing to do\n      return;\n    }\n\n    // we'll do something with the key so prevent default and stop propagation\n    evt.preventDefault();\n    evt.stopPropagation();\n\n    evt.currentTarget.click();\n  };\n\n  const onKeyDown = (evt: any) => {\n    if (rootRef?.current == null) {\n      // operating outside of a composite widget\n      // nothing to manage, just style and trigger clicks\n      onSingleHandler(evt);\n      return;\n    }\n\n    // TODO keep the smart default, but allow to explicitly override if disabled elements should be focusable\n    const isDisabledFocusable = strategy === \"menu\";\n    const focusesList = getFocuses().filter(\n      (el) =>\n        isDisabledFocusable ||\n        !el.classList.contains(classes?.disabled as string),\n    );\n\n    const currentFocus = focusesList.indexOf(evt.currentTarget);\n\n    const focuses: Focuses = {\n      first: focusesList[0],\n      last: focusesList[focusesList.length - 1],\n      previous: focusesList[currentFocus - 1],\n      next: focusesList[currentFocus + 1],\n      fall: focusesList[currentFocus + navigationJump],\n      jump: focusesList[currentFocus - navigationJump],\n    };\n\n    if (strategy === \"grid\") {\n      onGridKeyDownHandler(\n        evt,\n        focuses,\n        focusesList,\n        currentFocus,\n        navigationJump,\n      );\n      return;\n    }\n\n    // TODO add property for specifying the composite widget orientation\n    // TODO implement handler for horizontal orientation\n    onVerticalArrangementHandler(evt, focuses, focusesList);\n  };\n\n  const onKeyUp = (evt: any) => {\n    if (isBrowser(\"firefox\")) evt.preventDefault();\n  };\n\n  if (disabled) return children;\n\n  return cloneElement(children, {\n    className: cx(\n      [classes.root, filterClass],\n      {\n        [classes.selected]: selected,\n        [classes.disabled]: disabledClass,\n        [classes.focusDisabled]: focusDisabled,\n      },\n      children.props.className,\n    ),\n    ref: config,\n    onFocus,\n    onBlur,\n    onMouseDown,\n    onKeyDown,\n    onKeyUp,\n    selected,\n  });\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Focus/Focus.styles.js

@@ -19,23 +19,6 @@ const { staticClasses, useClasses } = createClasses("HvFocus", {
       ...outlineStyles
     }
   },
-  externalReference: {
-    position: "relative"
-  },
-  falseFocus: {
-    width: "98%",
-    height: "98%",
-    position: "absolute",
-    zIndex: "1",
-    ...outlineStyles,
-    "@media (-webkit-min-device-pixel-ratio:0)": {
-      ...outlineStyles
-    },
-    top: 0,
-    left: "0.5%",
-    backgroundColor: "transparent",
-    pointerEvents: "none"
-  },
   focus: {}
 });
 export {

package/dist/esm/Focus/Focus.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Focus.styles.js","sources":["../../../src/Focus/Focus.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFocus\", {\n  root: {},\n  selected: {},\n  disabled: {},\n  focusDisabled: {\n    outline: \"none\",\n    \"& *:focus\": {\n      outline: \"none\",\n    },\n    \"& *\": {\n      outline: \"none !important\",\n    },\n  },\n  focused: {\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n  },\n  externalReference: {\n    position: \"relative\",\n  },\n  falseFocus: {\n    width: \"98%\",\n    height: \"98%\",\n    position: \"absolute\",\n    zIndex: \"1\",\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n    top: 0,\n    left: \"0.5%\",\n    backgroundColor: \"transparent\",\n    pointerEvents: \"none\",\n  },\n  focus: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,SAAS;AAAA,IACP,GAAG;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAG;AAAA,IACL;AAAA,IACA,KAAK;AAAA,IACL,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}
+{"version":3,"file":"Focus.styles.js","sources":["../../../src/Focus/Focus.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFocus\", {\n  root: {},\n  selected: {},\n  disabled: {},\n  focusDisabled: {\n    outline: \"none\",\n    \"& *:focus\": {\n      outline: \"none\",\n    },\n    \"& *\": {\n      outline: \"none !important\",\n    },\n  },\n  focused: {\n    ...outlineStyles,\n    \"@media (-webkit-min-device-pixel-ratio:0)\": {\n      ...outlineStyles,\n    },\n  },\n  focus: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,IACT,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,SAAS;AAAA,IACP,GAAG;AAAA,IACH,6CAA6C;AAAA,MAC3C,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,OAAO,CAAA;AACT,CAAC;"}

package/dist/esm/Footer/Footer.styles.js

@@ -5,7 +5,8 @@ const { staticClasses, useClasses } = createClasses("HvFooter", {
     display: "flex",
     alignItems: "center",
     flexDirection: "row",
-    padding: `${theme.space.xs} ${theme.space.sm}`,
+    gap: theme.space.xs,
+    padding: theme.spacing("xs", "sm"),
     height: 40,
     bottom: 0,
     zIndex: theme.zIndices.base,
@@ -24,7 +25,7 @@ const { staticClasses, useClasses } = createClasses("HvFooter", {
     width: 1,
     height: 16,
     backgroundColor: theme.colors.text,
-    margin: `${theme.space.xs} ${theme.space.sm}`
+    margin: theme.spacing("xs", "sm")
   },
   small: {
     "&$root": {
@@ -32,17 +33,8 @@ const { staticClasses, useClasses } = createClasses("HvFooter", {
       flexDirection: "column",
       padding: theme.space.xs
     },
-    "& $name": {
-      marginBottom: theme.space.xs
-    },
     "& $rightContainer": {
-      flexDirection: "column",
-      textAlign: "center",
-      marginLeft: "unset"
-    },
-    "& $copyright": {
-      flexDirection: "column",
-      marginBottom: theme.space.xs
+      display: "contents"
     },
     "& $separator": { display: "none" }
   }

package/dist/esm/Footer/Footer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.styles.js","sources":["../../../src/Footer/Footer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFooter\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    padding: `${theme.space.xs} ${theme.space.sm}`,\n    height: 40,\n    bottom: 0,\n    zIndex: theme.zIndices.base,\n    backgroundColor: theme.colors.bgContainer,\n    boxShadow: `0 -1px 0 ${theme.colors.border}`,\n  },\n  name: {},\n  rightContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    marginLeft: \"auto\",\n  },\n  copyright: {},\n  separator: {\n    width: 1,\n    height: 16,\n    backgroundColor: theme.colors.text,\n    margin: `${theme.space.xs} ${theme.space.sm}`,\n  },\n  small: {\n    \"&$root\": {\n      height: \"unset\",\n      flexDirection: \"column\",\n      padding: theme.space.xs,\n    },\n    \"& $name\": {\n      marginBottom: theme.space.xs,\n    },\n    \"& $rightContainer\": {\n      flexDirection: \"column\",\n      textAlign: \"center\",\n      marginLeft: \"unset\",\n    },\n    \"& $copyright\": {\n      flexDirection: \"column\",\n      marginBottom: theme.space.xs,\n    },\n    \"& $separator\": { display: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAC5C,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,YAAY,MAAM,OAAO,MAAM;AAAA,EAC5C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,EAC7C;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,WAAW;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,qBAAqB;AAAA,MACnB,eAAe;AAAA,MACf,WAAW;AAAA,MACX,YAAY;AAAA,IACd;AAAA,IACA,gBAAgB;AAAA,MACd,eAAe;AAAA,MACf,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,gBAAgB,EAAE,SAAS,OAAO;AAAA,EAAA;AAEtC,CAAC;"}
+{"version":3,"file":"Footer.styles.js","sources":["../../../src/Footer/Footer.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvFooter\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    gap: theme.space.xs,\n    padding: theme.spacing(\"xs\", \"sm\"),\n    height: 40,\n    bottom: 0,\n    zIndex: theme.zIndices.base,\n    backgroundColor: theme.colors.bgContainer,\n    boxShadow: `0 -1px 0 ${theme.colors.border}`,\n  },\n  name: {},\n  rightContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    flexDirection: \"row\",\n    marginLeft: \"auto\",\n  },\n  copyright: {},\n  separator: {\n    width: 1,\n    height: 16,\n    backgroundColor: theme.colors.text,\n    margin: theme.spacing(\"xs\", \"sm\"),\n  },\n  small: {\n    \"&$root\": {\n      height: \"unset\",\n      flexDirection: \"column\",\n      padding: theme.space.xs,\n    },\n    \"& $rightContainer\": {\n      display: \"contents\",\n    },\n    \"& $separator\": { display: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK,MAAM,MAAM;AAAA,IACjB,SAAS,MAAM,QAAQ,MAAM,IAAI;AAAA,IACjC,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ,MAAM,SAAS;AAAA,IACvB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,YAAY,MAAM,OAAO,MAAM;AAAA,EAC5C;AAAA,EACA,MAAM,CAAC;AAAA,EACP,gBAAgB;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,YAAY;AAAA,EACd;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ,MAAM,QAAQ,MAAM,IAAI;AAAA,EAClC;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,qBAAqB;AAAA,MACnB,SAAS;AAAA,IACX;AAAA,IACA,gBAAgB,EAAE,SAAS,OAAO;AAAA,EAAA;AAEtC,CAAC;"}

package/dist/esm/Header/Header.styles.js

@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = createClasses("HvHeader", {
     alignItems: "center",
     width: "100%",
     height: "100%",
-    padding: `0 ${theme.space.sm}`,
+    padding: theme.spacing(0, "sm"),
     "& > *:not(nav)": {
       zIndex: 2
     }

package/dist/esm/Header/Header.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.bgContainer,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    borderTop: \"none\",\n    boxShadow: theme.colors.shadow,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: `0 ${theme.space.sm}`,\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  fixed: { position: \"fixed\", top: 0, left: \"auto\", right: 0 },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,UAAU,SAAS,KAAK,GAAG,MAAM,QAAQ,OAAO,EAAE;AAAA,EAC3D,iBAAiB,CAAA;AACnB,CAAC;"}
+{"version":3,"file":"Header.styles.js","sources":["../../../src/Header/Header.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvHeader\", {\n  root: {\n    height: theme.header.height,\n    backgroundColor: theme.colors.bgContainer,\n    display: \"flex\",\n    flexDirection: \"column\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    flexShrink: 0,\n    zIndex: theme.zIndices.banner,\n    borderTop: \"none\",\n    boxShadow: theme.colors.shadow,\n  },\n  header: {\n    display: \"flex\",\n    alignItems: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: theme.spacing(0, \"sm\"),\n    \"& > *:not(nav)\": {\n      zIndex: 2,\n    },\n  },\n  fixed: { position: \"fixed\", top: 0, left: \"auto\", right: 0 },\n  backgroundColor: {},\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,YAAY;AAAA,EACrE,MAAM;AAAA,IACJ,QAAQ,MAAM,OAAO;AAAA,IACrB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,WAAW;AAAA,IACX,WAAW,MAAM,OAAO;AAAA,EAC1B;AAAA,EACA,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,OAAO,EAAE,UAAU,SAAS,KAAK,GAAG,MAAM,QAAQ,OAAO,EAAE;AAAA,EAC3D,iBAAiB,CAAA;AACnB,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.js

@@ -79,7 +79,7 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
       ref,
       inputRef,
       classes: {
-        root: classes.inputRoot,
+        inputRoot: classes.inputRoot,
         input: classes.input
       },
       inputProps: {
@@ -98,7 +98,6 @@ const HvInlineEditor = fixedForwardRef(function HvInlineEditor2(props, ref) {
     HvButton,
     {
       variant: "secondaryGhost",
-      overrideIconColors: false,
       endIcon: /* @__PURE__ */ jsx(
         Edit,
         {

package/dist/esm/InlineEditor/InlineEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            root: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          overrideIconColors={false}\n          endIcon={\n            <Edit\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":"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"}
+{"version":3,"file":"InlineEditor.js","sources":["../../../src/InlineEditor/InlineEditor.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Edit } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useEnhancedEffect } from \"../hooks/useEnhancedEffect\";\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTooltip } from \"../Tooltip\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  HvTypography,\n  HvTypographyProps,\n  HvTypographyVariants,\n} from \"../Typography\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { staticClasses, useClasses } from \"./InlineEditor.styles\";\n\nexport { staticClasses as inlineEditorClasses };\n\nexport type HvInlineEditorClasses = ExtractNames<typeof useClasses>;\n\nexport type HvInlineEditorProps<C extends React.ElementType = typeof HvInput> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** The value of the form element. */\n      value?: string;\n      /** The default value of the form element. */\n      defaultValue?: string;\n      /** Whether the Edit icon should always be visible */\n      showIcon?: boolean;\n      /** Variant of the HvTypography to display */\n      variant?: HvTypographyVariants;\n      /** Called when the input is blurred. */\n      onBlur?: (\n        event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>,\n        value: string,\n      ) => void;\n      /** Called when the input value changes. */\n      onChange?: (event: React.SyntheticEvent, value: string) => void;\n      /** Called when there's a keydown event on the input. */\n      onKeyDown?: (\n        event:\n          | React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>\n          | React.MouseEvent,\n        value: string,\n      ) => void;\n      /** Props passed to the HvButton component */\n      buttonProps?: HvButtonProps;\n      /** Props passed to the HvTypography text component */\n      typographyProps?: HvTypographyProps;\n      /** Whether the editor is disabled or not. */\n      disabled?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the empty state component. */\n      classes?: HvInlineEditorClasses;\n      /** The placeholder value of the input. */\n      placeholder?: string;\n    }\n  >;\n\n/**\n * An Inline Editor allows the user to edit a record without making a major switch\n * between viewing and editing, making it an efficient method of updating a record.\n */\nexport const HvInlineEditor = fixedForwardRef(function HvInlineEditor<\n  C extends React.ElementType = typeof HvInput,\n>(props: HvInlineEditorProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    className,\n    classes: classesProp,\n    value: valueProp,\n    defaultValue = \"\",\n    showIcon,\n    component: InputComponent = HvInput,\n    variant = \"body\",\n    placeholder = \"Enter text\",\n    onBlur,\n    onChange,\n    onKeyDown,\n    buttonProps,\n    typographyProps,\n    disabled,\n    ...others\n  } = useDefaultProps(\"HvInlineEditor\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n  const [editMode, setEditMode] = useState(false);\n  const [cachedValue, setCachedValue] = useState(value);\n  const inputRef = useRef<HTMLInputElement>();\n  const { activeTheme } = useTheme();\n  const [isOverflowing, setIsOverflowing] = useState(false);\n\n  const typographyStyles = activeTheme?.typography[variant] || {};\n  const { lineHeight } = typographyStyles;\n\n  const checkOverflow = (el: HTMLElement | null) => {\n    if (!el) return;\n    setIsOverflowing(el.scrollWidth > el.clientWidth);\n  };\n\n  useEnhancedEffect(() => {\n    const input = inputRef.current;\n    if (editMode && input) {\n      input.focus();\n      input.select();\n    }\n  }, [editMode]);\n\n  const handleClick = () => {\n    setEditMode(true);\n    setCachedValue(value);\n  };\n\n  const handleBlur: HvInputProps[\"onBlur\"] = (event) => {\n    setEditMode(false);\n\n    const newValue = value || cachedValue; // empty values should be ignored\n    setValue(newValue);\n    onBlur?.(event, newValue);\n  };\n\n  const handleKeyDown: HvInputProps[\"onKeyDown\"] = (event) => {\n    let newValue = value;\n    if (isKey(event, \"Esc\")) {\n      newValue = cachedValue;\n      setEditMode(false);\n      setValue(newValue);\n    }\n    onKeyDown?.(event, newValue);\n  };\n\n  const handleChange: HvInputProps[\"onChange\"] = (event, val) => {\n    setValue(val);\n    onChange?.(event, val);\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {editMode && !disabled ? (\n        <InputComponent\n          ref={ref}\n          inputRef={inputRef}\n          classes={{\n            inputRoot: classes.inputRoot,\n            input: classes.input,\n          }}\n          inputProps={{\n            style: {\n              ...typographyStyles,\n              height: InputComponent === HvInput ? lineHeight : undefined,\n            },\n          }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          {...others}\n        />\n      ) : (\n        <HvButton\n          variant=\"secondaryGhost\"\n          endIcon={\n            <Edit\n              color=\"textDisabled\"\n              className={cx(classes.icon, {\n                [classes.iconVisible]: showIcon,\n              })}\n            />\n          }\n          className={cx(classes.button, {\n            [classes.largeText]: parseInt(lineHeight as string, 10) >= 28,\n          })}\n          onClick={handleClick}\n          disabled={disabled}\n          {...buttonProps}\n        >\n          <HvTooltip title={isOverflowing && value}>\n            <HvTypography\n              component=\"div\"\n              ref={checkOverflow}\n              variant={variant}\n              noWrap\n              className={cx(classes.text, { [classes.textEmpty]: !value })}\n              {...typographyProps}\n            >\n              {value || placeholder}\n            </HvTypography>\n          </HvTooltip>\n        </HvButton>\n      )}\n    </div>\n  );\n});\n"],"names":["HvInlineEditor"],"mappings":";;;;;;;;;;;;;;AAyEO,MAAM,iBAAiB,gBAAgB,SAASA,gBAErD,OAA+B,KAAwB;AACjD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,WAAW,OAAyB;AACpC,QAAA,EAAE,YAAY,IAAI,SAAS;AACjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,mBAAmB,aAAa,WAAW,OAAO,KAAK,CAAC;AACxD,QAAA,EAAE,eAAe;AAEjB,QAAA,gBAAgB,CAAC,OAA2B;AAChD,QAAI,CAAC,GAAI;AACQ,qBAAA,GAAG,cAAc,GAAG,WAAW;AAAA,EAClD;AAEA,oBAAkB,MAAM;AACtB,UAAM,QAAQ,SAAS;AACvB,QAAI,YAAY,OAAO;AACrB,YAAM,MAAM;AACZ,YAAM,OAAO;AAAA,IAAA;AAAA,EACf,GACC,CAAC,QAAQ,CAAC;AAEb,QAAM,cAAc,MAAM;AACxB,gBAAY,IAAI;AAChB,mBAAe,KAAK;AAAA,EACtB;AAEM,QAAA,aAAqC,CAAC,UAAU;AACpD,gBAAY,KAAK;AAEjB,UAAM,WAAW,SAAS;AAC1B,aAAS,QAAQ;AACjB,aAAS,OAAO,QAAQ;AAAA,EAC1B;AAEM,QAAA,gBAA2C,CAAC,UAAU;AAC1D,QAAI,WAAW;AACX,QAAA,MAAM,OAAO,KAAK,GAAG;AACZ,iBAAA;AACX,kBAAY,KAAK;AACjB,eAAS,QAAQ;AAAA,IAAA;AAEnB,gBAAY,OAAO,QAAQ;AAAA,EAC7B;AAEM,QAAA,eAAyC,CAAC,OAAO,QAAQ;AAC7D,aAAS,GAAG;AACZ,eAAW,OAAO,GAAG;AAAA,EACvB;AAGE,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAY,YAAA,CAAC,WACZ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,WAAW,QAAQ;AAAA,QACnB,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG;AAAA,UACH,QAAQ,mBAAmB,UAAU,aAAa;AAAA,QAAA;AAAA,MAEtD;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EAAA,IAGN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM;AAAA,YAC1B,CAAC,QAAQ,WAAW,GAAG;AAAA,UACxB,CAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAEF,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC5B,CAAC,QAAQ,SAAS,GAAG,SAAS,YAAsB,EAAE,KAAK;AAAA,MAAA,CAC5D;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,WAAA,EAAU,OAAO,iBAAiB,OACjC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL;AAAA,UACA,QAAM;AAAA,UACN,WAAW,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,SAAS,GAAG,CAAC,OAAO;AAAA,UAC1D,GAAG;AAAA,UAEH,UAAS,SAAA;AAAA,QAAA;AAAA,MAAA,EAEd,CAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ,CAAC;"}

package/dist/esm/InlineEditor/InlineEditor.styles.js

@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
     color: theme.colors.textDisabled
   },
   button: {
-    padding: theme.spacing("6px", "8px", "5px", "8px"),
+    padding: theme.spacing(0, "xs"),
     minHeight: "32px",
     boxSizing: "border-box",
     cursor: "text",

package/dist/esm/InlineEditor/InlineEditor.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {},\n  /** @deprecated unused. use `classes.root::after` instead */\n  inputBorderContainer: {},\n  input: {},\n  inputRoot: {\n    height: \"100%\",\n    minHeight: \"32px\",\n  },\n  text: {},\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.textDisabled,\n  },\n  button: {\n    padding: theme.spacing(\"6px\", \"8px\", \"5px\", \"8px\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"start\",\n    textAlign: \"start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.bgContainer,\n    borderColor: \"transparent\",\n\n    \"&:hover, &:focus\": {\n      borderColor: theme.colors.primary,\n      backgroundColor: theme.colors.bgContainer,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      borderColor: theme.colors.text,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: 16,\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,MAAM,CAAC;AAAA,EACP,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,OAAO,OAAO,OAAO,KAAK;AAAA,IACjD,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IAEb,oBAAoB;AAAA,MAClB,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,YAAY;AAAA,MACV,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EAAA;AAEhB,CAAC;"}
+{"version":3,"file":"InlineEditor.styles.js","sources":["../../../src/InlineEditor/InlineEditor.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInlineEditor\", {\n  root: {},\n  /** @deprecated unused. use `classes.root::after` instead */\n  inputBorderContainer: {},\n  input: {},\n  inputRoot: {\n    height: \"100%\",\n    minHeight: \"32px\",\n  },\n  text: {},\n  largeText: {},\n  textEmpty: {\n    color: theme.colors.textDisabled,\n  },\n  button: {\n    padding: theme.spacing(0, \"xs\"),\n    minHeight: \"32px\",\n\n    boxSizing: \"border-box\",\n    cursor: \"text\",\n    height: \"100%\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    justifyContent: \"start\",\n    textAlign: \"start\",\n    alignItems: \"center\",\n\n    backgroundColor: theme.colors.bgContainer,\n    borderColor: \"transparent\",\n\n    \"&:hover, &:focus\": {\n      borderColor: theme.colors.primary,\n      backgroundColor: theme.colors.bgContainer,\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n\n    \"&:active\": {\n      borderColor: theme.colors.text,\n      backgroundColor: \"transparent\",\n\n      \"& $icon\": {\n        visibility: \"visible\",\n      },\n    },\n  },\n  icon: {\n    cursor: \"pointer\",\n    visibility: \"hidden\",\n    alignSelf: \"center\",\n    height: 16,\n  },\n  iconVisible: {\n    visibility: \"visible\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM,CAAC;AAAA;AAAA,EAEP,sBAAsB,CAAC;AAAA,EACvB,OAAO,CAAC;AAAA,EACR,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,MAAM,CAAC;AAAA,EACP,WAAW,CAAC;AAAA,EACZ,WAAW;AAAA,IACT,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,MAAM,QAAQ,GAAG,IAAI;AAAA,IAC9B,WAAW;AAAA,IAEX,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,YAAY;AAAA,IAEZ,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa;AAAA,IAEb,oBAAoB;AAAA,MAClB,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB,MAAM,OAAO;AAAA,MAE9B,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,IAEA,YAAY;AAAA,MACV,aAAa,MAAM,OAAO;AAAA,MAC1B,iBAAiB;AAAA,MAEjB,WAAW;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,EAAA;AAEhB,CAAC;"}

package/dist/esm/MultiButton/MultiButton.styles.js

@@ -15,10 +15,9 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     borderRadius: theme.radii.base,
     "& $button": {
       minWidth: 32,
-      width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: "1 1 auto",
+      flex: "1 1 0%",
       borderColor: "inherit",
       borderRadius: 0,
       fontWeight: theme.typography.body.fontWeight,
@@ -51,8 +50,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       "&$selected": {
         backgroundColor: theme.colors.bgContainer,
         fontWeight: theme.typography.label.fontWeight,
-        borderRadius: "inherit",
-        borderColor: theme.colors.text,
+        borderColor: "currentcolor",
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
           backgroundColor: theme.colors.bgHover
@@ -101,20 +99,25 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   selected: {},
   vertical: {
     flexDirection: "column",
+    alignItems: "stretch",
     height: "auto",
     borderColor: `transparent ${theme.colors.border}`,
     "& $button": {
       minWidth: 32,
-      width: "100%",
+      flex: "1 1 32px",
       "&$firstButton": {
         borderTopColor: theme.colors.border,
         borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit"
+        borderTopRightRadius: "inherit",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
       },
       "&$lastButton": {
         borderBottomColor: theme.colors.border,
         borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit"
+        borderBottomRightRadius: "inherit",
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -122,8 +125,7 @@ const { staticClasses, useClasses } = createClasses("HvMultiButton", {
       },
       "&$selected": {
         height: 32,
-        width: "calc(100% + 2px)",
-        borderColor: theme.colors.text
+        borderColor: "currentcolor"
       }
     }
   },

package/dist/esm/MultiButton/MultiButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.bgPage,\n\n    borderWidth: 0,\n    borderColor: `${theme.colors.border} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      maxWidth: 200,\n      padding: 0,\n      flex: \"1 1 auto\",\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.border,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.border,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.border,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.bgContainer,\n        fontWeight: theme.typography.label.fontWeight,\n        borderRadius: \"inherit\",\n        borderColor: theme.colors.text,\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.bgHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.border,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.border}`,\n    \"& $button\": {\n      minWidth: 32,\n      width: \"100%\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.border,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: \"calc(100% + 2px)\",\n        borderColor: theme.colors.text,\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.js","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { dropDownMenuClasses } from \"../DropDownMenu\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n  },\n  multiple: {\n    backgroundColor: theme.colors.bgPage,\n    borderWidth: 0,\n    borderColor: `${theme.colors.border} transparent`,\n    borderRadius: theme.radii.base,\n\n    \"& $button\": {\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      flex: \"1 1 0%\",\n      borderColor: \"inherit\",\n      borderRadius: 0,\n      fontWeight: theme.typography.body.fontWeight,\n      \"&:disabled\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"inherit\",\n      },\n      \"&:hover\": {\n        borderColor: \"inherit\",\n      },\n      \"&$firstButton\": {\n        borderLeftColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderBottomLeftRadius: \"inherit\",\n        \"&:disabled\": {\n          borderLeftColor: theme.colors.border,\n        },\n      },\n      \"&$lastButton\": {\n        borderRightColor: theme.colors.border,\n        borderTopRightRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        \"&:disabled\": {\n          borderRightColor: theme.colors.border,\n        },\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        backgroundColor: theme.colors.bgContainer,\n        fontWeight: theme.typography.label.fontWeight,\n        borderColor: \"currentcolor\",\n        zIndex: 2,\n        \"&:hover:not(:disabled),&:focus-visible\": {\n          backgroundColor: theme.colors.bgHover,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          borderColor: theme.colors.border,\n        },\n      },\n    },\n  },\n  splitGroup: {\n    width: \"fit-content\",\n\n    \"& $button:not($firstButton)\": {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderLeftWidth: 0,\n      },\n    },\n    \"& $button:not($lastButton)\": {\n      borderTopRightRadius: 0,\n      borderBottomRightRadius: 0,\n      \"&:not([aria-controls])\": {\n        borderRightWidth: 0,\n      },\n\n      \"&::after\": {\n        content: \"''\",\n        position: \"absolute\",\n        inset: \"4px -1px 4px auto\",\n        width: 1,\n        zIndex: 1,\n        height: \"auto\",\n        backgroundColor: \"currentcolor\",\n      },\n    },\n  },\n  splitGroupDisabled: {},\n  button: {\n    position: \"relative\",\n    // prevent the focus ring to be hidden by sibling hover background\n    [`&:focus-visible, &.${dropDownMenuClasses.iconSelected}`]: {\n      zIndex: 5,\n    },\n  },\n  selected: {},\n  vertical: {\n    flexDirection: \"column\",\n    alignItems: \"stretch\",\n    height: \"auto\",\n    borderColor: `transparent ${theme.colors.border}`,\n    \"& $button\": {\n      minWidth: 32,\n      flex: \"1 1 32px\",\n      \"&$firstButton\": {\n        borderTopColor: theme.colors.border,\n        borderTopLeftRadius: \"inherit\",\n        borderTopRightRadius: \"inherit\",\n        borderBottomLeftRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n      \"&$lastButton\": {\n        borderBottomColor: theme.colors.border,\n        borderBottomLeftRadius: \"inherit\",\n        borderBottomRightRadius: \"inherit\",\n        borderTopLeftRadius: 0,\n        borderTopRightRadius: 0,\n      },\n      \"&:not($firstButton)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n\n  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)\n  firstButton: {},\n  lastButton: {},\n\n  // TODO - review the need for these classes in v6\n  primary: {},\n  primarySubtle: {},\n  primaryGhost: {},\n  secondary: {},\n  secondarySubtle: {},\n  secondaryGhost: {},\n});\n"],"names":["dropDownMenuClasses"],"mappings":"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"}

package/dist/esm/Pagination/Pagination.styles.js

@@ -4,7 +4,6 @@ import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
 import "../Input/Input.js";
 import { staticClasses as staticClasses$2 } from "../BaseDropdown/BaseDropdown.styles.js";
 import "../BaseDropdown/BaseDropdown.js";
-const hoverColor = theme.colors.bgHover;
 const { staticClasses, useClasses } = createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {
@@ -30,7 +29,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
       backgroundColor: "transparent",
       height: "24px",
       "&:focus, &:focus-within, &:hover": {
-        backgroundColor: hoverColor
+        backgroundColor: theme.colors.bgHover
       }
     }
   },
@@ -106,7 +105,7 @@ const { staticClasses, useClasses } = createClasses("HvPagination", {
         borderRadius: theme.radii.base,
         MozAppearance: "textfield",
         "&:focus": {
-          backgroundColor: hoverColor
+          backgroundColor: theme.colors.bgHover
         },
         "&:hover": {
           cursor: "pointer"

package/dist/esm/Pagination/Pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseDropdownClasses } from \"../BaseDropdown\";\nimport { inputClasses } from \"../Input\";\n\nconst hoverColor = theme.colors.bgHover;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...theme.typography.caption2,\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: hoverColor,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    gap: theme.space.xs,\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  totalPagesTextContainer: {\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    width: \"auto\",\n\n    ...(theme.typography.caption2 as React.CSSProperties),\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: hoverColor,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;;AAMA,MAAM,aAAa,MAAM,OAAO;AAEzB,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAG,MAAM,WAAW;AAAA,MACpB,WAAW;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,GAAI,MAAM,WAAW;AAAA,EACvB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB;AAAA,QACnB;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EAEJ;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAA;AAC1B,CAAC;"}
+{"version":3,"file":"Pagination.styles.js","sources":["../../../src/Pagination/Pagination.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { baseDropdownClasses } from \"../BaseDropdown\";\nimport { inputClasses } from \"../Input\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPagination\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    zIndex: 1,\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"stretch\",\n    flexWrap: \"wrap\",\n    marginTop: theme.space.sm,\n    [`& $pageSizeInput`]: {\n      ...theme.typography.caption2,\n      \"&:focus\": {\n        padding: 0,\n      },\n    },\n    [`& $pageSizeInputContainer`]: {\n      width: 24,\n      minWidth: 24,\n      maxWidth: theme.spacing(8),\n    },\n    [`&& $pageSizeInputRoot`]: {\n      backgroundColor: \"transparent\",\n      height: \"24px\",\n      \"&:focus, &:focus-within, &:hover\": {\n        backgroundColor: theme.colors.bgHover,\n      },\n    },\n  },\n  /** Styles applied to the page size selector container. */\n  pageSizeOptions: {\n    display: \"flex\",\n    position: \"absolute\",\n    gap: theme.space.xs,\n    height: 24,\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    left: \"0\",\n  },\n  pageSizeHeader: {\n    height: 24,\n    display: \"flex\",\n    alignItems: \"center\",\n    [`& .${baseDropdownClasses.arrowContainer}`]: {\n      marginTop: -2,\n    },\n  },\n  pageSizeRoot: {\n    width: \"auto\",\n  },\n  /** Styles applied to the element that holds the labels for the page size selector */\n  pageSizeTextContainer: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"24px\",\n    padding: \"8px 0\",\n    ...theme.typography.caption2,\n  },\n  totalPagesTextContainer: {\n    ...theme.typography.caption2,\n  },\n  /** Styles applied to the page size selector dropdown element. */\n  pageSizeOptionsSelect: {\n    display: \"inline-block\",\n    width: \"auto\",\n\n    ...theme.typography.caption2,\n  },\n  /** Styles applied to the page navigation container. */\n  pageNavigator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    height: \"32px\",\n    gap: 8,\n  },\n  /** Styles applied to each navigation `HvButton` icon container. */\n  iconContainer: {\n    padding: 0,\n  },\n  /** Styles applied to each navigation icon. */\n  icon: {},\n  /** Styles applied to the central page information container. */\n  pageInfo: {\n    display: \"inline-block\",\n    whiteSpace: \"nowrap\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n  },\n  /** Styles applied to the page selector input container. */\n  pageJump: {\n    display: \"inline-block\",\n    marginRight: `4px`,\n    [`& .${inputClasses.inputRoot}`]: {\n      [`& $pageSizeInput`]: {\n        paddingLeft: `4px`,\n        paddingRight: `4px`,\n        margin: 0,\n        textAlign: \"center\",\n        borderRadius: theme.radii.base,\n        MozAppearance: \"textfield\",\n        \"&:focus\": {\n          backgroundColor: theme.colors.bgHover,\n        },\n        \"&:hover\": {\n          cursor: \"pointer\",\n        },\n      },\n    },\n  },\n  /** Styles passed down to the page selector Input component as `input`. */\n  pageSizeInput: {},\n  /** Styles passed down to the page selector Input root. */\n  pageSizeInputRoot: {},\n  /** Styles passed down to the page selector Input component as `container`. */\n  pageSizeInputContainer: {},\n});\n"],"names":["baseDropdownClasses","inputClasses"],"mappings":";;;;;;AAMO,MAAM,EAAE,eAAe,eAAe,cAAc,gBAAgB;AAAA;AAAA,EAEzE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,WAAW,MAAM,MAAM;AAAA,IACvB,CAAC,kBAAkB,GAAG;AAAA,MACpB,GAAG,MAAM,WAAW;AAAA,MACpB,WAAW;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,CAAC,2BAA2B,GAAG;AAAA,MAC7B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU,MAAM,QAAQ,CAAC;AAAA,IAC3B;AAAA,IACA,CAAC,uBAAuB,GAAG;AAAA,MACzB,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,oCAAoC;AAAA,QAClC,iBAAiB,MAAM,OAAO;AAAA,MAAA;AAAA,IAChC;AAAA,EAEJ;AAAA;AAAA,EAEA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK,MAAM,MAAM;AAAA,IACjB,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,CAAC,MAAMA,gBAAoB,cAAc,EAAE,GAAG;AAAA,MAC5C,WAAW;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,cAAc;AAAA,IACZ,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,yBAAyB;AAAA,IACvB,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,SAAS;AAAA,IACT,OAAO;AAAA,IAEP,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,KAAK;AAAA,EACP;AAAA;AAAA,EAEA,eAAe;AAAA,IACb,SAAS;AAAA,EACX;AAAA;AAAA,EAEA,MAAM,CAAC;AAAA;AAAA,EAEP,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,aAAa;AAAA,IACb,CAAC,MAAMC,gBAAa,SAAS,EAAE,GAAG;AAAA,MAChC,CAAC,kBAAkB,GAAG;AAAA,QACpB,aAAa;AAAA,QACb,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc,MAAM,MAAM;AAAA,QAC1B,eAAe;AAAA,QACf,WAAW;AAAA,UACT,iBAAiB,MAAM,OAAO;AAAA,QAChC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IACF;AAAA,EAEJ;AAAA;AAAA,EAEA,eAAe,CAAC;AAAA;AAAA,EAEhB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,wBAAwB,CAAA;AAC1B,CAAC;"}

package/dist/esm/QueryBuilder/QueryBuilder.styles.js

@@ -75,9 +75,8 @@ const { useClasses, staticClasses } = createClasses("HvQueryBuilder", {
   /** Styles applied to the action button container. */
   actionButtonContainer: {
     marginLeft: "auto",
-    "&>*": {
-      marginLeft: theme.space.sm
-    }
+    display: "flex",
+    gap: theme.space.sm
   },
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {

package/dist/esm/QueryBuilder/QueryBuilder.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../src/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.border}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.border}`,\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc(-1 * ${theme.space.sm})`,\n    left: `calc(-1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.border}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.bgPage,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,EAC1C;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,cAAc,aAAa,MAAM,OAAO,MAAM;AAAA,MAC9C,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM,QAAQ,MAAM,MAAM,EAAE;AAAA,IAAA;AAAA,EAEhC;AAAA;AAAA,EAEA,YAAY,EAAE,UAAU,GAAG;AAAA;AAAA,EAE3B,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK,aAAa,MAAM,MAAM,EAAE;AAAA,IAChC,MAAM,aAAa,MAAM,MAAM,EAAE;AAAA,EACnC;AAAA;AAAA,EAEA,kBAAkB,CAAC;AAAA;AAAA,EAEnB,cAAc,CAAC;AAAA;AAAA,EAEf,iBAAiB,EAAE,UAAU,YAAY,KAAK,KAAK,OAAO,IAAI;AAAA;AAAA,EAE9D,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA;AAAA,EAEhE,gBAAgB,CAAC;AAAA;AAAA,EAEjB,mBAAmB;AAAA,IACjB,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,IAC5C,YAAY,MAAM,MAAM;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,YAAY;AAAA,IAEZ,OAAO;AAAA,MACL,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAE5B;AAAA;AAAA,EAEA,0BAA0B;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ,aAAa,MAAM,MAAM,EAAE;AAAA,IACnC,OAAO,QAAQ,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA;AAAA,EAEA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,kBAAkB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,EACX;AAAA,EACA,uBAAuB;AAAA,IACrB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAC/D;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAAA;AAEjE,CAAC;"}
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../src/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.border}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    paddingBottom: theme.space.lg,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: theme.space.md,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.border}`,\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.border}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc(-1 * ${theme.space.sm})`,\n    left: `calc(-1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.bgPage },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.border}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n    display: \"flex\",\n    gap: theme.space.sm,\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.bgPage,\n    display: \"inline-flex\",\n  },\n  createConditionButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n  createGroupButton: {\n    cursor: \"pointer\",\n    backgroundColor: \"transparent\",\n    padding: 0,\n\n    \"&:disabled\": { cursor: \"not-allowed\", pointerEvents: \"none\" },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,QAAQ,aAAa,MAAM,OAAO,MAAM;AAAA,EAC1C;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,eAAe,MAAM,MAAM;AAAA,EAC7B;AAAA;AAAA,EAEA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe,MAAM,MAAM;AAAA,IAE3B,aAAa;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,cAAc,aAAa,MAAM,OAAO,MAAM;AAAA,MAC9C,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,OAAO;AAAA,MACP,QAAQ;AAAA,MAER,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,MAE5C,KAAK;AAAA,MACL,MAAM,QAAQ,MAAM,MAAM,EAAE;AAAA,IAAA;AAAA,EAEhC;AAAA;AAAA,EAEA,YAAY,EAAE,UAAU,GAAG;AAAA;AAAA,EAE3B,eAAe;AAAA,IACb,UAAU;AAAA,IACV,KAAK,aAAa,MAAM,MAAM,EAAE;AAAA,IAChC,MAAM,aAAa,MAAM,MAAM,EAAE;AAAA,EACnC;AAAA;AAAA,EAEA,kBAAkB,CAAC;AAAA;AAAA,EAEnB,cAAc,CAAC;AAAA;AAAA,EAEf,iBAAiB,EAAE,UAAU,YAAY,KAAK,KAAK,OAAO,IAAI;AAAA;AAAA,EAE9D,yBAAyB,EAAE,iBAAiB,MAAM,OAAO,OAAO;AAAA;AAAA,EAEhE,gBAAgB,CAAC;AAAA;AAAA,EAEjB,mBAAmB;AAAA,IACjB,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA,IAC5C,YAAY,MAAM,MAAM;AAAA,IACxB,cAAc,MAAM,MAAM;AAAA,IAC1B,aAAa,MAAM,MAAM;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA;AAAA,EAEA,uBAAuB;AAAA,IACrB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,KAAK,MAAM,MAAM;AAAA,EACnB;AAAA;AAAA,EAEA,0BAA0B;AAAA,IACxB,UAAU;AAAA,IACV,QAAQ,aAAa,MAAM,MAAM,EAAE;AAAA,IACnC,OAAO,QAAQ,MAAM,MAAM,EAAE;AAAA,EAC/B;AAAA;AAAA,EAEA,mBAAmB,CAAC;AAAA;AAAA,EAEpB,kBAAkB;AAAA,IAChB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS;AAAA,EACX;AAAA,EACA,uBAAuB;AAAA,IACrB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAC/D;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,SAAS;AAAA,IAET,cAAc,EAAE,QAAQ,eAAe,eAAe,OAAO;AAAA,EAAA;AAEjE,CAAC;"}

package/dist/esm/Radio/Radio.styles.js

@@ -18,12 +18,7 @@ const { staticClasses, useClasses } = createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: theme.colors.textDisabled, cursor: "not-allowed" }
   },
-  radio: {
-    "& svg": {
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
+  radio: {},
   invalidRadio: {},
   label: {
     verticalAlign: "middle",