@hitachivantara/uikit-react-core 5.24.2 → 5.24.3

package/dist/cjs/components/ListContainer/ListItem/ListItem.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport { HvFocus } from \"@core/components/Focus\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nimport listItemClasses from \"./listItemClasses\";\n\nexport const StyledListItem = styled(\n  \"li\",\n  transientOptions\n)(\n  ({\n    $gutters,\n    $interactive,\n    $selected,\n    $disabled,\n    $startAdornment,\n    $endAdornment,\n  }: {\n    $gutters: boolean;\n    $interactive: boolean;\n    $selected: boolean;\n    $disabled: boolean;\n    $startAdornment: boolean;\n    $endAdornment: boolean;\n  }) => ({\n    ...(theme.typography.body as CSSProperties),\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n    [`&.${listItemClasses.condensed}`]: {\n      marginBottom: 0,\n    },\n\n    ...($gutters && {\n      padding: `0 ${theme.space.xs}`,\n\n      [`&.${listItemClasses.withStartAdornment}`]: {\n        paddingLeft: 0,\n      },\n      [`&.${listItemClasses.withEndAdornment}`]: {\n        paddingRight: 0,\n      },\n    }),\n    ...($interactive && {\n      cursor: \"pointer\",\n      [`&:not(.${listItemClasses.disabled}):not(.${listItemClasses.selected}):hover`]:\n        {\n          backgroundColor: theme.list.hoverColor,\n        },\n      [`&.${listItemClasses.disabled}`]: {\n        cursor: \"not-allowed\",\n      },\n    }),\n    ...($selected && {\n      backgroundColor: theme.list.hoverColor,\n    }),\n    ...($disabled && {\n      color: theme.colors.secondary_60,\n      backgroundColor: theme.list.disabledBackgroundColor,\n    }),\n    ...($startAdornment && {\n      \"& > div\": {\n        float: \"left\",\n      },\n\n      \"& svg\": {\n        boxShadow: \"none !important\",\n        outline: \"none !important\",\n      },\n      [`.${listItemClasses.disabled} > svg *.color0`]: {\n        fill: theme.colors.secondary_60,\n      },\n    }),\n    ...($endAdornment && {\n      \"& > div\": { float: \"right\" },\n\n      \"& svg\": {\n        boxShadow: \"none !important\",\n        outline: \"none !important\",\n      },\n      [`.${listItemClasses.disabled} > svg *.color0`]: {\n        fill: theme.colors.secondary_60,\n      },\n    }),\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  })\n);\n\nexport const StyledFocus = styled(HvFocus)({\n  backgroundColor: theme.colors.atmo3,\n  zIndex: 2,\n});\n"],"names":["StyledListItem","process","env","NODE_ENV","_extends","target","transientOptions","label","$gutters","$interactive","$selected","$disabled","$startAdornment","$endAdornment","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","listItemClasses","condensed","space","xs","withStartAdornment","paddingLeft","withEndAdornment","paddingRight","cursor","disabled","selected","backgroundColor","list","hoverColor","color","colors","secondary_60","disabledBackgroundColor","float","boxShadow","outline","fill","outlineStyles","atmo3","zIndex","StyledFocus","HvFocus"],"mappings":"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"}
+{"version":3,"file":"ListItem.styles.cjs","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.list.hoverColor,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.list.hoverColor },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.list.disabledBackgroundColor,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","theme","typography","body","padding","display","height","lineHeight","listStyleType","overflow","textOverflow","whiteSpace","position","marginBottom","outlineStyles","backgroundColor","colors","atmo3","zIndex","focus","startAdornment","endAdornment","gutters","space","xs","paddingLeft","paddingRight","condensed","interactive","cursor","list","hoverColor","selected","disabled","color","secondary_60","disabledBackgroundColor","withStartAdornment","float","boxShadow","outline","fill","withEndAdornment"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,YAAAA,MAAMC,WAAWC;AAAAA,IACpBC,SAAS;AAAA,IACTC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,YAAY;AAAA,IACZC,eAAe;AAAA,IACfC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,YAAY;AAAA,IACZC,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACbA,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAGC,WAAAA;AAAAA,MACHC,iBAAiBd,YAAAA,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,YAAAA,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,YAAAA,MAAMsB,MAAMC;AAAAA,IAE1B,wBAAwB;AAAA,MACtBC,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpBC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACAC,WAAW,CAAC;AAAA,EACZC,aAAa;AAAA,IACXC,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvCd,iBAAiBd,YAAAA,MAAM6B,KAAKC;AAAAA,IAC9B;AAAA,IACA,cAAc;AAAA,MACZF,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAG,UAAU;AAAA,IAAEjB,iBAAiBd,YAAAA,MAAM6B,KAAKC;AAAAA,EAAW;AAAA,EACnDE,UAAU;AAAA,IACRC,OAAOjC,YAAAA,MAAMe,OAAOmB;AAAAA,IACpBpB,iBAAiBd,YAAAA,MAAM6B,KAAKM;AAAAA,EAC9B;AAAA,EACAC,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACTC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,YAAAA,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AAAA,EACAO,kBAAkB;AAAA,IAChB,WAAW;AAAA,MAAEJ,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1BC,MAAMxC,YAAAA,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs

@@ -104,10 +104,10 @@ const HvScrollToHorizontal = (props) => {
       marginRight: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
       marginLeft: position === "fixed" && (upMd || downSm) ? uikitStyles.theme.spacing(upMd ? 4 : 2) : 0,
       backgroundColor: hexToRgbA.hexToRgbA(activeTheme == null ? void 0 : activeTheme.colors.modes[selectedMode].atmo2, activeTheme == null ? void 0 : activeTheme.scrollTo.backgroundColorOpacity)
-    }), className, classes.root, {
+    }), classes.root, {
       [classes.positionSticky]: position === "sticky",
       [classes.positionFixed]: position === "fixed"
-    }),
+    }, className),
     id: elementId,
     ...others,
     children: tabs

package/dist/cjs/components/ScrollTo/Horizontal/ScrollToHorizontal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            activeTheme?.colors.modes[selectedMode].atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        className,\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        }\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":"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"}
+{"version":3,"file":"ScrollToHorizontal.cjs","sources":["../../../../../src/components/ScrollTo/Horizontal/ScrollToHorizontal.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { useTheme as useMuiTheme } from \"@mui/material/styles\";\nimport { useMediaQuery } from \"@mui/material\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { CurrentStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { HvScrollToTooltipPositions } from \"../types\";\nimport { withTooltip } from \"../withTooltip\";\nimport { HvHorizontalScrollListItem } from \"./HorizontalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { staticClasses, useClasses } from \"./ScrollToHorizontal.styles\";\n\nexport { staticClasses as scrollToHorizontalClasses };\n\nexport type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToHorizontalOption {\n  key?: string;\n  label: string;\n  value: string;\n  offset?: number;\n}\n\nexport type HvScrollToHorizontalPositions = \"sticky\" | \"fixed\" | \"relative\";\n\nexport interface HvScrollToHorizontalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToHorizontalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Horizontal scroll to. */\n  position?: HvScrollToHorizontalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToHorizontalClasses;\n}\n\n/**\n * The horizontal scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToHorizontal = (props: HvScrollToHorizontalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"top\",\n    ...others\n  } = useDefaultProps(\"HvScrollToHorizontal\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const muiTheme = useMuiTheme();\n\n  const downSm = useMediaQuery(muiTheme.breakpoints.down(\"sm\"));\n  const upMd = useMediaQuery(muiTheme.breakpoints.up(\"md\"));\n\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvHorizontalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition);\n    });\n  }, [options, tooltipPosition]);\n\n  const NotSelected = useCallback(() => {\n    return (\n      <div className={classes.notSelectedRoot}>\n        <div className={classes.notSelected} />\n      </div>\n    );\n  }, [classes.notSelectedRoot, classes.notSelected]);\n\n  const Selected = useCallback(() => {\n    return (\n      <CurrentStep\n        height={activeTheme?.scrollTo.dotSelectedSize}\n        width={activeTheme?.scrollTo.dotSelectedSize}\n        className={classes.selected}\n      />\n    );\n  }, [classes.selected, activeTheme?.scrollTo.dotSelectedSize]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvHorizontalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n      >\n        <p>{option.label}</p>\n        {selected ? <Selected /> : <NotSelected />}\n      </HvHorizontalScrollListItem>\n    );\n  });\n\n  return (\n    <ol\n      className={cx(\n        css({\n          width:\n            position === \"fixed\" && (upMd || downSm)\n              ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})`\n              : \"100%\",\n          marginTop: 0,\n          marginBottom: 0,\n          marginRight:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          marginLeft:\n            position === \"fixed\" && (upMd || downSm)\n              ? theme.spacing(upMd ? 4 : 2)\n              : 0,\n          backgroundColor: hexToRgbA(\n            activeTheme?.colors.modes[selectedMode].atmo2,\n            activeTheme?.scrollTo.backgroundColorOpacity\n          ),\n        }),\n        classes.root,\n        {\n          [classes.positionSticky]: position === \"sticky\",\n          [classes.positionFixed]: position === \"fixed\",\n        },\n        className\n      )}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToHorizontal","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","others","useDefaultProps","css","cx","useClasses","muiTheme","useMuiTheme","downSm","useMediaQuery","breakpoints","down","upMd","up","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","NotSelected","useCallback","notSelectedRoot","children","notSelected","Selected","CurrentStep","height","scrollTo","dotSelectedSize","width","selected","tabs","tooltipWrapper","HvHorizontalScrollListItem","setId","onKeyDown","isKey","_jsx","key","theme","spacing","marginTop","marginBottom","marginRight","marginLeft","backgroundColor","hexToRgbA","colors","modes","atmo2","backgroundColorOpacity","root","positionSticky","positionFixed"],"mappings":";;;;;;;;;;;;;;;;;;AAiFaA,MAAAA,uBAAuBA,CAACC,UAAqC;AAClE,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,wBAAwBhB,KAAK;AAE3C,QAAA;AAAA,IAAES;AAAAA,IAASQ;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,0BAAAA,WAAWT,WAAW;AACnD,QAAMU,WAAWC,OAAAA;AAEjB,QAAMC,SAASC,SAAAA,cAAcH,SAASI,YAAYC,KAAK,IAAI,CAAC;AAC5D,QAAMC,OAAOH,SAAAA,cAAcH,SAASI,YAAYG,GAAG,IAAI,CAAC;AAElD,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,YAAY/B,IAAI,sBAAsB;AAElD,QAAA,CAACgC,eAAeC,WAAW,IAAIC,wBACnCjC,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAM+B,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5BpC,2CAAWgC,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BhC,WAAAA,QAAQiC,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAYD,YAAAA,OAAOE,OAAO,OAAOjC,eAAe;AAAA,IAAA,CACxD;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAEvBkC,QAAAA,cAAcC,MAAAA,YAAY,MAAM;AACpC,0CACE,OAAA;AAAA,MAAKzC,WAAWC,QAAQyC;AAAAA,MAAgBC,yCACtC,OAAA;AAAA,QAAK3C,WAAWC,QAAQ2C;AAAAA,MAAAA,CAAc;AAAA,IAAA,CACnC;AAAA,KAEN,CAAC3C,QAAQyC,iBAAiBzC,QAAQ2C,WAAW,CAAC;AAE3CC,QAAAA,WAAWJ,MAAAA,YAAY,MAAM;AACjC,0CACGK,gBAAAA,aAAW;AAAA,MACVC,QAAQ3B,2CAAa4B,SAASC;AAAAA,MAC9BC,OAAO9B,2CAAa4B,SAASC;AAAAA,MAC7BjD,WAAWC,QAAQkD;AAAAA,IAAAA,CACpB;AAAA,EAAA,GAEF,CAAClD,QAAQkD,UAAU/B,2CAAa4B,SAASC,eAAe,CAAC;AAE5D,QAAMG,OAAOjD,QAAQiC,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMoB,WAAW1B,kBAAkBM;AAC7BsB,UAAAA,iBAAiBnB,gBAAgBH,KAAK;AAE5C,2CACGuB,yBAAAA,4BAA0B;AAAA,MACzB7D,IAAI8D,MAAAA,MAAMhC,WAAY,QAAOQ,OAAO;AAAA,MACpCjC,SAAU+B,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CjC,2CAAU+B,OAAOE;AAAAA,MACnB;AAAA,MACAyB,WAAY3B,CAAU,UAAA;AACpB,YAAI4B,oBAAM5B,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1ChC,6CAAU8B,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAsB;AAAAA,MACAF;AAAAA,MAAmBR,WAGnBe,2BAAAA,IAAA,KAAA;AAAA,QAAAf,UAAIN,OAAOE;AAAAA,MAAAA,CAAS,GACnBY,WAAWO,2BAAAA,IAACb,UAAU,CAAA,CAAA,IAAKL,2BAAAA,IAAAA,eAAa,CAAC;AAAA,IAHrCH,GAAAA,OAAOsB,OAAOtB,OAAOE,KAIA;AAAA,EAAA,CAE/B;AAED,wCACE,MAAA;AAAA,IACEvC,WAAWU,GACTD,IAAI;AAAA,MACFyC,OACE7C,aAAa,YAAYa,QAAQJ,UAC5B,iBAAgB8C,YAAAA,MAAMC,QAAQ3C,OAAO,IAAI,CAAC,OAC3C;AAAA,MACN4C,WAAW;AAAA,MACXC,cAAc;AAAA,MACdC,aACE3D,aAAa,YAAYa,QAAQJ,UAC7B8C,kBAAMC,QAAQ3C,OAAO,IAAI,CAAC,IAC1B;AAAA,MACN+C,YACE5D,aAAa,YAAYa,QAAQJ,UAC7B8C,kBAAMC,QAAQ3C,OAAO,IAAI,CAAC,IAC1B;AAAA,MACNgD,iBAAiBC,UACf/C,UAAAA,2CAAagD,OAAOC,MAAMhD,cAAciD,OACxClD,2CAAa4B,SAASuB,sBACxB;AAAA,IAAA,CACD,GACDtE,QAAQuE,MACR;AAAA,MACE,CAACvE,QAAQwE,cAAc,GAAGpE,aAAa;AAAA,MACvC,CAACJ,QAAQyE,aAAa,GAAGrE,aAAa;AAAA,OAExCL,SACF;AAAA,IACAP,IAAI8B;AAAAA,IAAU,GACVhB;AAAAA,IAAMoC,UAETS;AAAAA,EAAAA,CACC;AAER;;;"}

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs

@@ -78,10 +78,10 @@ const HvScrollToVertical = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx("ol", {
     className: cx(css({
       backgroundColor
-    }), className, classes.root, {
+    }), classes.root, {
       [classes.positionFixed]: position === "fixed",
       [classes.positionAbsolute]: position === "absolute"
-    }),
+    }, className),
     style: {
       top: `calc(50% - ${positionOffset}px)`,
       ...style

package/dist/cjs/components/ScrollTo/Vertical/ScrollToVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(css({ backgroundColor }), className, classes.root, {\n        [classes.positionFixed]: position === \"fixed\",\n        [classes.positionAbsolute]: position === \"absolute\",\n      })}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UAAAA,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACElD,WAAWW,GAAGD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GAAG5C,WAAWC,QAAQkD,MAAM;AAAA,MAC/D,CAAClD,QAAQmD,aAAa,GAAG/C,aAAa;AAAA,MACtC,CAACJ,QAAQoD,gBAAgB,GAAGhD,aAAa;AAAA,IAAA,CAC1C;AAAA,IACDE,OAAO;AAAA,MAAE+C,KAAM,cAAab;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM+C,UAETtB;AAAAA,EAAAA,CACC;AAER;;;"}
+{"version":3,"file":"ScrollToVertical.cjs","sources":["../../../../../src/components/ScrollTo/Vertical/ScrollToVertical.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport {\n  staticClasses,\n  useClasses,\n  calculateOffset,\n} from \"./ScrollToVertical.styles\";\nimport { HvVerticalScrollListItem } from \"./VerticalScrollListItem\";\nimport { useScrollTo } from \"../useScrollTo\";\nimport { withTooltip } from \"../withTooltip\";\nimport {\n  HvScrollToTooltipPositions,\n  HvScrollToVerticalOption,\n  HvScrollToVerticalPositions,\n} from \"../types\";\n\nexport { staticClasses as scrollToVerticalClasses };\n\nexport type HvScrollToVerticalClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvScrollToVerticalProps\n  extends HvBaseProps<HTMLOListElement, \"onChange\" | \"onClick\"> {\n  /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */\n  options: HvScrollToVerticalOption[];\n  /** True if the href location link should be applied. It will create an a element around every list item */\n  href?: boolean;\n  /** Default selected index passed from the parent. */\n  defaultSelectedIndex?: number;\n  /**\n   * The Id of the scrollable container containing displayed elements.\n   *\n   * Defaults to `window` if unspecified.\n   */\n  scrollElementId?: string;\n  /**\n   * Defines the offset from the top of each element for getting an optimal viewing region in the container.\n   * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles)\n   * or to put more breathing room between the targeted element and the edges of the container.\n   *\n   * Each element can also have a specific offset via the options property.\n   */\n  offset?: number;\n  /** Position of the Vertical scroll to. */\n  position?: HvScrollToVerticalPositions;\n  /** Position of tooltip identifying the current item. */\n  tooltipPosition?: HvScrollToTooltipPositions;\n  /** A function called each time the selected index changes. */\n  onChange?: (\n    event:\n      | Event\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    index: number\n  ) => void;\n  /** A function called each time an user clicks on a tab element. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>, index: number) => void;\n  /** A function called each time an user press enter on a tab element. */\n  onEnter?: (event: React.KeyboardEvent<HTMLDivElement>, index: number) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvScrollToVerticalClasses;\n}\n\n/**\n * The vertical scroll to element can be used to quickly navigate in a page.\n */\nexport const HvScrollToVertical = (props: HvScrollToVerticalProps) => {\n  const {\n    id,\n    defaultSelectedIndex = 0,\n    scrollElementId,\n    href = true,\n    onChange,\n    onClick,\n    onEnter,\n    className,\n    classes: classesProp,\n    options,\n    offset = 0,\n    position = \"relative\",\n    tooltipPosition = \"left\",\n    style,\n    ...others\n  } = useDefaultProps(\"HvScrollToVertical\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme, selectedMode } = useTheme();\n\n  const elementId = useUniqueId(id, \"hvVerticalScrollto\");\n\n  const [selectedIndex, setScrollTo] = useScrollTo(\n    defaultSelectedIndex,\n    scrollElementId,\n    href,\n    offset,\n    options,\n    onChange\n  );\n\n  const handleSelection = (\n    event:\n      | React.MouseEvent<HTMLDivElement>\n      | React.KeyboardEvent<HTMLDivElement>,\n    value: string,\n    index: number\n  ) => {\n    event.preventDefault();\n\n    const wrappedOnChange = () => {\n      onChange?.(event, index);\n    };\n\n    setScrollTo(event, value, index, wrappedOnChange);\n  };\n\n  const tooltipWrappers = useMemo(() => {\n    return options.map((option) => {\n      return withTooltip(option.label, \"div\", tooltipPosition, false);\n    });\n  }, [options, tooltipPosition]);\n\n  const tabs = options.map((option, index) => {\n    const selected = selectedIndex === index;\n    const tooltipWrapper = tooltipWrappers[index];\n\n    return (\n      <HvVerticalScrollListItem\n        id={setId(elementId, `item-${index}`)}\n        onClick={(event) => {\n          handleSelection(event, option.value, index);\n          onClick?.(event, index);\n        }}\n        onKeyDown={(event) => {\n          if (isKey(event, \"Enter\") === true) {\n            handleSelection(event, option.value, index);\n            onEnter?.(event, index);\n          }\n        }}\n        tooltipWrapper={tooltipWrapper}\n        selected={selected}\n        key={option.key || option.label}\n        aria-label={option.label}\n      />\n    );\n  });\n\n  const positionOffset = calculateOffset(options.length);\n  const backgroundColor = hexToRgbA(\n    activeTheme?.colors.modes[selectedMode].atmo2,\n    activeTheme?.scrollTo.backgroundColorOpacity\n  );\n\n  return (\n    <ol\n      className={cx(\n        css({ backgroundColor }),\n        classes.root,\n        {\n          [classes.positionFixed]: position === \"fixed\",\n          [classes.positionAbsolute]: position === \"absolute\",\n        },\n        className\n      )}\n      style={{ top: `calc(50% - ${positionOffset}px)`, ...style }}\n      id={elementId}\n      {...others}\n    >\n      {tabs}\n    </ol>\n  );\n};\n"],"names":["HvScrollToVertical","props","id","defaultSelectedIndex","scrollElementId","href","onChange","onClick","onEnter","className","classes","classesProp","options","offset","position","tooltipPosition","style","others","useDefaultProps","css","cx","useClasses","activeTheme","selectedMode","useTheme","elementId","useUniqueId","selectedIndex","setScrollTo","useScrollTo","handleSelection","event","value","index","preventDefault","wrappedOnChange","tooltipWrappers","useMemo","map","option","withTooltip","label","tabs","selected","tooltipWrapper","HvVerticalScrollListItem","setId","onKeyDown","isKey","key","positionOffset","calculateOffset","length","backgroundColor","hexToRgbA","colors","modes","atmo2","scrollTo","backgroundColorOpacity","root","positionFixed","positionAbsolute","top","children"],"mappings":";;;;;;;;;;;;;;AA0EaA,MAAAA,qBAAqBA,CAACC,UAAmC;AAC9D,QAAA;AAAA,IACJC;AAAAA,IACAC,uBAAuB;AAAA,IACvBC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,kBAAkB;AAAA,IAClBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,wBAAAA,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAEzCC,QAAAA,YAAYC,YAAAA,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,wBACnC1B,sBACAC,iBACAC,MACAQ,QACAD,SACAN,QACF;AAEA,QAAMwB,kBAAkBA,CACtBC,OAGAC,OACAC,UACG;AACHF,UAAMG,eAAe;AAErB,UAAMC,kBAAkBA,MAAM;AAC5B7B,2CAAWyB,OAAOE;AAAAA,IAAK;AAGbF,gBAAAA,OAAOC,OAAOC,OAAOE,eAAe;AAAA,EAAA;AAG5CC,QAAAA,kBAAkBC,MAAAA,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,YAAAA,YAAYD,OAAOE,OAAO,OAAO1B,iBAAiB,KAAK;AAAA,IAAA,CAC/D;AAAA,EAAA,GACA,CAACH,SAASG,eAAe,CAAC;AAE7B,QAAM2B,OAAO9B,QAAQ0B,IAAI,CAACC,QAAQN,UAAU;AAC1C,UAAMU,WAAWhB,kBAAkBM;AAC7BW,UAAAA,iBAAiBR,gBAAgBH,KAAK;AAE5C,0CACGY,uBAAAA,0BAAwB;AAAA,MACvB3C,IAAI4C,MAAAA,MAAMrB,WAAY,QAAOQ,OAAO;AAAA,MACpC1B,SAAUwB,CAAU,UAAA;AACFA,wBAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1C1B,2CAAUwB,OAAOE;AAAAA,MACnB;AAAA,MACAc,WAAYhB,CAAU,UAAA;AACpB,YAAIiB,oBAAMjB,OAAO,OAAO,MAAM,MAAM;AAClBA,0BAAAA,OAAOQ,OAAOP,OAAOC,KAAK;AAC1CzB,6CAAUuB,OAAOE;AAAAA,QACnB;AAAA,MACF;AAAA,MACAW;AAAAA,MACAD;AAAAA,MAEA,cAAYJ,OAAOE;AAAAA,IADdF,GAAAA,OAAOU,OAAOV,OAAOE,KAE3B;AAAA,EAAA,CAEJ;AAEKS,QAAAA,iBAAiBC,wBAAAA,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UAAAA,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,wCACE,MAAA;AAAA,IACElD,WAAWW,GACTD,IAAI;AAAA,MAAEkC;AAAAA,IAAAA,CAAiB,GACvB3C,QAAQkD,MACR;AAAA,MACE,CAAClD,QAAQmD,aAAa,GAAG/C,aAAa;AAAA,MACtC,CAACJ,QAAQoD,gBAAgB,GAAGhD,aAAa;AAAA,OAE3CL,SACF;AAAA,IACAO,OAAO;AAAA,MAAE+C,KAAM,cAAab;AAAAA,MAAqB,GAAGlC;AAAAA,IAAM;AAAA,IAC1Dd,IAAIuB;AAAAA,IAAU,GACVR;AAAAA,IAAM+C,UAETtB;AAAAA,EAAAA,CACC;AAER;;;"}

package/dist/cjs/components/Tab/Tab.cjs

@@ -1,30 +1,34 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const material = require("@mui/material");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const clsx = require("clsx");
 const Tab_styles = require("./Tab.styles.cjs");
-const tabClasses = require("./tabClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvTab = (props) => {
   const {
-    classes,
+    classes: classesProp,
     iconPosition = "top",
     disabled = false,
     ...others
   } = useDefaultProps.useDefaultProps("HvTab", props);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tab_styles.StyledTab, {
+  const {
+    classes,
+    cx
+  } = Tab_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tab, {
     classes: {
-      root: clsx.clsx(tabClasses.default.root, classes == null ? void 0 : classes.root),
-      selected: clsx.clsx(tabClasses.default.selected, classes == null ? void 0 : classes.selected),
-      disabled: clsx.clsx(tabClasses.default.disabled, classes == null ? void 0 : classes.disabled)
+      root: classes.root,
+      selected: classes.selected,
+      disabled: classes.disabled
     },
     disableRipple: true,
     disableTouchRipple: true,
-    focusVisibleClassName: clsx.clsx("HvIsFocusVisible", clsx.clsx(tabClasses.default.focusVisible, classes == null ? void 0 : classes.focusVisible)),
+    focusVisibleClassName: cx("HvIsFocusVisible", classes.focusVisible),
     disabled,
     iconPosition,
     ...others
   });
 };
+exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = HvTab;
 //# sourceMappingURL=Tab.cjs.map

package/dist/cjs/components/Tab/Tab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.cjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { TabProps as MuiTabProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { clsx } from \"clsx\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { StyledTab } from \"./Tab.styles\";\nimport tabClasses, { HvTabClasses } from \"./tabClasses\";\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps\n  extends Omit<MuiTabProps, \"children\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n\n  return (\n    <StyledTab\n      classes={{\n        root: clsx(tabClasses.root, classes?.root),\n        selected: clsx(tabClasses.selected, classes?.selected),\n        disabled: clsx(tabClasses.disabled, classes?.disabled),\n      }}\n      disableRipple\n      disableTouchRipple\n      // Exposes the global class HvIsFocusVisible as a marker not to\n      // be styled directly, but only as helper in specific css queries\n      focusVisibleClassName={clsx(\n        \"HvIsFocusVisible\",\n        clsx(tabClasses.focusVisible, classes?.focusVisible)\n      )}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTab","props","classes","iconPosition","disabled","others","useDefaultProps","StyledTab","root","clsx","tabClasses","selected","disableRipple","disableTouchRipple","focusVisibleClassName","focusVisible"],"mappings":";;;;;;;AA0BaA,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC;AAAAA,IACAC,eAAe;AAAA,IACfC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASL,KAAK;AAElC,wCACGM,WAAAA,WAAS;AAAA,IACRL,SAAS;AAAA,MACPM,MAAMC,KAAAA,KAAKC,WAAAA,QAAWF,MAAMN,mCAASM,IAAI;AAAA,MACzCG,UAAUF,KAAAA,KAAKC,WAAAA,QAAWC,UAAUT,mCAASS,QAAQ;AAAA,MACrDP,UAAUK,KAAAA,KAAKC,WAAAA,QAAWN,UAAUF,mCAASE,QAAQ;AAAA,IACvD;AAAA,IACAQ,eAAa;AAAA,IACbC,oBAAkB;AAAA,IAGlBC,uBAAuBL,KAAAA,KACrB,oBACAA,KAAAA,KAAKC,mBAAWK,cAAcb,mCAASa,YAAY,CACrD;AAAA,IACAX;AAAAA,IACAD;AAAAA,IAA2B,GACvBE;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"Tab.cjs","sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { Tab, TabProps as MuiTabProps } from \"@mui/material\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { staticClasses, useClasses } from \"./Tab.styles\";\n\nexport { staticClasses as tabClasses };\n\nexport type HvTabClasses = ExtractNames<typeof useClasses>;\n\n// Mui Tab props: https://mui.com/material-ui/api/tab/#props\nexport interface HvTabProps\n  extends Omit<MuiTabProps, \"children\">,\n    HvBaseProps<HTMLDivElement, \"children\"> {\n  /** If `true`, the tab will be disabled. */\n  disabled?: boolean;\n  /** The icon element. */\n  icon?: React.ReactElement | string;\n  /** The label element. */\n  label?: React.ReactNode;\n  /** The position of the icon relative to the label. */\n  iconPosition?: \"bottom\" | \"end\" | \"start\" | \"top\";\n  /** A Jss Object used to override or extend the component styles. */\n  classes?: HvTabClasses;\n}\n\nexport const HvTab = (props: HvTabProps) => {\n  const {\n    classes: classesProp,\n    iconPosition = \"top\",\n    disabled = false,\n    ...others\n  } = useDefaultProps(\"HvTab\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <Tab\n      classes={{\n        root: classes.root,\n        selected: classes.selected,\n        disabled: classes.disabled,\n      }}\n      disableRipple\n      disableTouchRipple\n      // expose the global class HvIsFocusVisible as a marker\n      // not to be styled directly, only as helper in specific css queries\n      focusVisibleClassName={cx(\"HvIsFocusVisible\", classes.focusVisible)}\n      disabled={disabled}\n      iconPosition={iconPosition}\n      {...others}\n    />\n  );\n};\n"],"names":["HvTab","props","classes","classesProp","iconPosition","disabled","others","useDefaultProps","cx","useClasses","Tab","root","selected","disableRipple","disableTouchRipple","focusVisibleClassName","focusVisible"],"mappings":";;;;;;AA0BaA,MAAAA,QAAQA,CAACC,UAAsB;AACpC,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC,eAAe;AAAA,IACfC,WAAW;AAAA,IACX,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,SAASN,KAAK;AAC5B,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAAA,WAAWN,WAAW;AAE9C,wCACGO,SAAAA,KAAG;AAAA,IACFR,SAAS;AAAA,MACPS,MAAMT,QAAQS;AAAAA,MACdC,UAAUV,QAAQU;AAAAA,MAClBP,UAAUH,QAAQG;AAAAA,IACpB;AAAA,IACAQ,eAAa;AAAA,IACbC,oBAAkB;AAAA,IAGlBC,uBAAuBP,GAAG,oBAAoBN,QAAQc,YAAY;AAAA,IAClEX;AAAAA,IACAD;AAAAA,IAA2B,GACvBE;AAAAA,EAAAA,CACL;AAEL;;;"}

package/dist/cjs/components/Tab/Tab.styles.cjs

@@ -1,68 +1,64 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _styled = require("@emotion/styled/base");
+const classes = require("../../utils/classes.cjs");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const material = require("@mui/material");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const StyledTab = /* @__PURE__ */ _styled__default.default(material.Tab, process.env.NODE_ENV === "production" ? {
-  target: "evi6req0"
-} : {
-  target: "evi6req0",
-  label: "StyledTab"
-})({
-  // Root
-  marginTop: "3px",
-  padding: uikitStyles.theme.tab.padding,
-  minWidth: 70,
-  minHeight: 32,
-  textTransform: "none",
-  fontFamily: uikitStyles.theme.fontFamily.body,
-  ...uikitStyles.theme.typography.body,
-  opacity: 1,
-  "&::after": {
-    position: "absolute",
-    left: 0,
-    top: "calc(100% - 1px)",
-    height: "1px",
-    width: "100%",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
-    content: "''"
-  },
-  "&:hover": {
-    backgroundColor: uikitStyles.theme.tab.hoverBackgroundColor,
-    borderRadius: uikitStyles.theme.tab.hoverBackgroundBorderRadius,
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvTab", {
+  root: {
+    marginTop: "3px",
+    padding: uikitStyles.theme.tab.padding,
+    minWidth: 70,
+    minHeight: 32,
+    textTransform: "none",
+    fontFamily: uikitStyles.theme.fontFamily.body,
+    ...uikitStyles.theme.typography.body,
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.tab.hoverBackgroundColor,
+      borderRadius: uikitStyles.theme.tab.hoverBackgroundBorderRadius,
+      "&::after": {
+        height: "1px",
+        backgroundColor: uikitStyles.theme.tab.hoverUnderlineBackgroundColor
+      }
+    },
+    "&$selected": {
+      color: uikitStyles.theme.typography.label.color,
+      fontWeight: uikitStyles.theme.typography.label.fontWeight,
+      lineHeight: uikitStyles.theme.typography.label.lineHeight,
+      letterSpacing: uikitStyles.theme.typography.label.letterSpacing
+    },
+    "&$disabled": {
+      color: uikitStyles.theme.colors.secondary_60,
+      cursor: "not-allowed",
+      pointerEvents: "all",
+      opacity: 1,
+      "&:hover": {
+        background: "none"
+      }
+    },
+    opacity: 1,
     "&::after": {
+      position: "absolute",
+      left: 0,
+      top: "calc(100% - 1px)",
       height: "1px",
-      backgroundColor: uikitStyles.theme.tab.hoverUnderlineBackgroundColor
+      width: "100%",
+      backgroundColor: uikitStyles.theme.colors.atmo4,
+      content: "''"
+    },
+    // Override Mui styling: https://mui.com/material-ui/api/tab/#css
+    "& .MuiTab-iconWrapper": {
+      margin: 0
     }
   },
-  "&:focus-visible": {
+  focusVisible: {
     ...focusUtils.outlineStyles
   },
-  "&:focus": {
-    outline: "none"
-  },
-  // Override Mui styling: https://mui.com/material-ui/api/tab/#css
-  "&.Mui-selected": {
-    color: uikitStyles.theme.colors.secondary,
-    letterSpacing: uikitStyles.theme.typography.label.letterSpacing,
-    lineHeight: uikitStyles.theme.typography.label.lineHeight,
-    fontWeight: uikitStyles.theme.typography.label.fontWeight
-  },
-  "&.Mui-disabled": {
-    color: uikitStyles.theme.colors.secondary_60,
-    cursor: "not-allowed",
-    pointerEvents: "all",
-    opacity: 1,
-    "&:hover": {
-      background: "none"
-    }
-  },
-  "& .MuiTab-iconWrapper": {
-    margin: 0
-  }
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFiL1RhYi5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVV5QiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay9odi11aWtpdC1yZWFjdC9odi11aWtpdC1yZWFjdC9wYWNrYWdlcy9jb3JlL3NyYy9jb21wb25lbnRzL1RhYi9UYWIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENTU1Byb3BlcnRpZXMgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHN0eWxlZCBmcm9tIFwiQGVtb3Rpb24vc3R5bGVkXCI7XG5cbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcblxuaW1wb3J0IHsgVGFiIGFzIE11aVRhYiB9IGZyb20gXCJAbXVpL21hdGVyaWFsXCI7XG5cbmltcG9ydCB7IG91dGxpbmVTdHlsZXMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvZm9jdXNVdGlsc1wiO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGFiID0gc3R5bGVkKE11aVRhYikoe1xuICAvLyBSb290XG4gIG1hcmdpblRvcDogXCIzcHhcIixcbiAgcGFkZGluZzogdGhlbWUudGFiLnBhZGRpbmcsXG4gIG1pbldpZHRoOiA3MCxcbiAgbWluSGVpZ2h0OiAzMixcbiAgdGV4dFRyYW5zZm9ybTogXCJub25lXCIsXG4gIGZvbnRGYW1pbHk6IHRoZW1lLmZvbnRGYW1pbHkuYm9keSxcbiAgLi4uKHRoZW1lLnR5cG9ncmFwaHkuYm9keSBhcyBDU1NQcm9wZXJ0aWVzKSxcbiAgb3BhY2l0eTogMSxcbiAgXCImOjphZnRlclwiOiB7XG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICBsZWZ0OiAwLFxuICAgIHRvcDogXCJjYWxjKDEwMCUgLSAxcHgpXCIsXG4gICAgaGVpZ2h0OiBcIjFweFwiLFxuICAgIHdpZHRoOiBcIjEwMCVcIixcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLmNvbG9ycy5hdG1vNCxcbiAgICBjb250ZW50OiBcIicnXCIsXG4gIH0sXG4gIFwiJjpob3ZlclwiOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWIuaG92ZXJCYWNrZ3JvdW5kQ29sb3IsXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS50YWIuaG92ZXJCYWNrZ3JvdW5kQm9yZGVyUmFkaXVzLFxuICAgIFwiJjo6YWZ0ZXJcIjoge1xuICAgICAgaGVpZ2h0OiBcIjFweFwiLFxuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWIuaG92ZXJVbmRlcmxpbmVCYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgfSxcbiAgXCImOmZvY3VzLXZpc2libGVcIjoge1xuICAgIC4uLm91dGxpbmVTdHlsZXMsXG4gIH0sXG4gIFwiJjpmb2N1c1wiOiB7XG4gICAgb3V0bGluZTogXCJub25lXCIsXG4gIH0sXG5cbiAgLy8gT3ZlcnJpZGUgTXVpIHN0eWxpbmc6IGh0dHBzOi8vbXVpLmNvbS9tYXRlcmlhbC11aS9hcGkvdGFiLyNjc3NcbiAgXCImLk11aS1zZWxlY3RlZFwiOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgbGV0dGVyU3BhY2luZzogdGhlbWUudHlwb2dyYXBoeS5sYWJlbC5sZXR0ZXJTcGFjaW5nLFxuICAgIGxpbmVIZWlnaHQ6IHRoZW1lLnR5cG9ncmFwaHkubGFiZWwubGluZUhlaWdodCxcbiAgICBmb250V2VpZ2h0OiB0aGVtZS50eXBvZ3JhcGh5LmxhYmVsLmZvbnRXZWlnaHQsXG4gIH0sXG4gIFwiJi5NdWktZGlzYWJsZWRcIjoge1xuICAgIGNvbG9yOiB0aGVtZS5jb2xvcnMuc2Vjb25kYXJ5XzYwLFxuICAgIGN1cnNvcjogXCJub3QtYWxsb3dlZFwiLFxuICAgIHBvaW50ZXJFdmVudHM6IFwiYWxsXCIsXG4gICAgb3BhY2l0eTogMSxcbiAgICBcIiY6aG92ZXJcIjoge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgXCImIC5NdWlUYWItaWNvbldyYXBwZXJcIjoge1xuICAgIG1hcmdpbjogMCxcbiAgfSxcbn0pO1xuIl19 */");
-exports.StyledTab = StyledTab;
+  selected: {},
+  disabled: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Tab.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.cjs","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { Tab as MuiTab } from \"@mui/material\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const StyledTab = styled(MuiTab)({\n  // Root\n  marginTop: \"3px\",\n  padding: theme.tab.padding,\n  minWidth: 70,\n  minHeight: 32,\n  textTransform: \"none\",\n  fontFamily: theme.fontFamily.body,\n  ...(theme.typography.body as CSSProperties),\n  opacity: 1,\n  \"&::after\": {\n    position: \"absolute\",\n    left: 0,\n    top: \"calc(100% - 1px)\",\n    height: \"1px\",\n    width: \"100%\",\n    backgroundColor: theme.colors.atmo4,\n    content: \"''\",\n  },\n  \"&:hover\": {\n    backgroundColor: theme.tab.hoverBackgroundColor,\n    borderRadius: theme.tab.hoverBackgroundBorderRadius,\n    \"&::after\": {\n      height: \"1px\",\n      backgroundColor: theme.tab.hoverUnderlineBackgroundColor,\n    },\n  },\n  \"&:focus-visible\": {\n    ...outlineStyles,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n\n  // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n  \"&.Mui-selected\": {\n    color: theme.colors.secondary,\n    letterSpacing: theme.typography.label.letterSpacing,\n    lineHeight: theme.typography.label.lineHeight,\n    fontWeight: theme.typography.label.fontWeight,\n  },\n  \"&.Mui-disabled\": {\n    color: theme.colors.secondary_60,\n    cursor: \"not-allowed\",\n    pointerEvents: \"all\",\n    opacity: 1,\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n  \"& .MuiTab-iconWrapper\": {\n    margin: 0,\n  },\n});\n"],"names":["StyledTab","MuiTab","process","env","NODE_ENV","target","label","marginTop","padding","theme","tab","minWidth","minHeight","textTransform","fontFamily","body","typography","opacity","position","left","top","height","width","backgroundColor","colors","atmo4","content","hoverBackgroundColor","borderRadius","hoverBackgroundBorderRadius","hoverUnderlineBackgroundColor","outlineStyles","outline","color","secondary","letterSpacing","lineHeight","fontWeight","secondary_60","cursor","pointerEvents","background","margin"],"mappings":";;;;;;;;AAUO,MAAMA,YAAmBC,iCAAAA,QAAAA,SAAAA,KAAMC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA;AAAA,EAEtCC,WAAW;AAAA,EACXC,SAASC,YAAAA,MAAMC,IAAIF;AAAAA,EACnBG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,EAC7B,GAAIN,YAAAA,MAAMO,WAAWD;AAAAA,EACrBE,SAAS;AAAA,EACT,YAAY;AAAA,IACVC,UAAU;AAAA,IACVC,MAAM;AAAA,IACNC,KAAK;AAAA,IACLC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC,iBAAiBd,YAAAA,MAAMe,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTH,iBAAiBd,YAAAA,MAAMC,IAAIiB;AAAAA,IAC3BC,cAAcnB,YAAAA,MAAMC,IAAImB;AAAAA,IACxB,YAAY;AAAA,MACVR,QAAQ;AAAA,MACRE,iBAAiBd,YAAAA,MAAMC,IAAIoB;AAAAA,IAC7B;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC,WAAAA;AAAAA,EACL;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,kBAAkB;AAAA,IAChBC,OAAOxB,YAAAA,MAAMe,OAAOU;AAAAA,IACpBC,eAAe1B,YAAMO,MAAAA,WAAWV,MAAM6B;AAAAA,IACtCC,YAAY3B,YAAMO,MAAAA,WAAWV,MAAM8B;AAAAA,IACnCC,YAAY5B,YAAMO,MAAAA,WAAWV,MAAM+B;AAAAA,EACrC;AAAA,EACA,kBAAkB;AAAA,IAChBJ,OAAOxB,YAAAA,MAAMe,OAAOc;AAAAA,IACpBC,QAAQ;AAAA,IACRC,eAAe;AAAA,IACfvB,SAAS;AAAA,IACT,WAAW;AAAA,MACTwB,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,yBAAyB;AAAA,IACvBC,QAAQ;AAAA,EACV;AACF,GAACxC,QAAAC,IAAAC,aAAC,eAAA,KAAA,6lFAAA;;"}
+{"version":3,"file":"Tab.styles.cjs","sources":["../../../../src/components/Tab/Tab.styles.tsx"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTab\", {\n  root: {\n    marginTop: \"3px\",\n    padding: theme.tab.padding,\n    minWidth: 70,\n    minHeight: 32,\n    textTransform: \"none\",\n    fontFamily: theme.fontFamily.body,\n    ...(theme.typography.body as CSSProperties),\n    \"&:hover\": {\n      backgroundColor: theme.tab.hoverBackgroundColor,\n      borderRadius: theme.tab.hoverBackgroundBorderRadius,\n      \"&::after\": {\n        height: \"1px\",\n        backgroundColor: theme.tab.hoverUnderlineBackgroundColor,\n      },\n    },\n    \"&$selected\": {\n      color: theme.typography.label.color,\n      fontWeight: theme.typography.label.fontWeight,\n      lineHeight: theme.typography.label.lineHeight,\n      letterSpacing: theme.typography.label.letterSpacing,\n    },\n    \"&$disabled\": {\n      color: theme.colors.secondary_60,\n      cursor: \"not-allowed\",\n      pointerEvents: \"all\",\n      opacity: 1,\n      \"&:hover\": {\n        background: \"none\",\n      },\n    },\n    opacity: 1,\n    \"&::after\": {\n      position: \"absolute\",\n      left: 0,\n      top: \"calc(100% - 1px)\",\n      height: \"1px\",\n      width: \"100%\",\n      backgroundColor: theme.colors.atmo4,\n      content: \"''\",\n    },\n    // Override Mui styling: https://mui.com/material-ui/api/tab/#css\n    \"& .MuiTab-iconWrapper\": {\n      margin: 0,\n    },\n  },\n  focusVisible: {\n    ...outlineStyles,\n  },\n  selected: {},\n  disabled: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","marginTop","padding","theme","tab","minWidth","minHeight","textTransform","fontFamily","body","typography","backgroundColor","hoverBackgroundColor","borderRadius","hoverBackgroundBorderRadius","height","hoverUnderlineBackgroundColor","color","label","fontWeight","lineHeight","letterSpacing","colors","secondary_60","cursor","pointerEvents","opacity","background","position","left","top","width","atmo4","content","margin","focusVisible","outlineStyles","selected","disabled"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC,YAAAA,MAAMC,IAAIF;AAAAA,IACnBG,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYL,YAAAA,MAAMK,WAAWC;AAAAA,IAC7B,GAAIN,YAAAA,MAAMO,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBR,YAAAA,MAAMC,IAAIQ;AAAAA,MAC3BC,cAAcV,YAAAA,MAAMC,IAAIU;AAAAA,MACxB,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRJ,iBAAiBR,YAAAA,MAAMC,IAAIY;AAAAA,MAC7B;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOd,YAAMO,MAAAA,WAAWQ,MAAMD;AAAAA,MAC9BE,YAAYhB,YAAMO,MAAAA,WAAWQ,MAAMC;AAAAA,MACnCC,YAAYjB,YAAMO,MAAAA,WAAWQ,MAAME;AAAAA,MACnCC,eAAelB,YAAMO,MAAAA,WAAWQ,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOd,YAAAA,MAAMmB,OAAOC;AAAAA,MACpBC,QAAQ;AAAA,MACRC,eAAe;AAAA,MACfC,SAAS;AAAA,MACT,WAAW;AAAA,QACTC,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IACAD,SAAS;AAAA,IACT,YAAY;AAAA,MACVE,UAAU;AAAA,MACVC,MAAM;AAAA,MACNC,KAAK;AAAA,MACLf,QAAQ;AAAA,MACRgB,OAAO;AAAA,MACPpB,iBAAiBR,YAAAA,MAAMmB,OAAOU;AAAAA,MAC9BC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC,WAAAA;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/TagsInput/TagsInput.styles.cjs

@@ -7,7 +7,8 @@ const tagsInputClasses = require("./tagsInputClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const BaseInput_styles = require("../BaseInput/BaseInput.styles.cjs");
 require("../BaseInput/BaseInput.cjs");
-const listItemClasses = require("../ListContainer/ListItem/listItemClasses.cjs");
+const ListItem_styles = require("../ListContainer/ListItem/ListItem.styles.cjs");
+const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Tag = require("../Tag/Tag.cjs");
 const Input = require("../Input/Input.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
@@ -16,7 +17,6 @@ const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const ListItem = require("../ListContainer/ListItem/ListItem.cjs");
 const Suggestions = require("../Forms/Suggestions/Suggestions.cjs");
 const Suggestions_styles = require("../Forms/Suggestions/Suggestions.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -220,7 +220,7 @@ const StyledListItem = /* @__PURE__ */ _styled__default.default((props) => /* @_
   "&:not(:last-child)": {
     marginBottom: 2
   },
-  [`&.${listItemClasses.default.gutters}`]: {
+  [`&.${ListItem_styles.staticClasses.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {
@@ -264,7 +264,7 @@ const StyledInputListItem = /* @__PURE__ */ _styled__default.default((props) =>
   flexGrow: 1,
   height: 24,
   lineHeight: "24px",
-  [`&.${listItemClasses.default.gutters}`]: {
+  [`&.${ListItem_styles.staticClasses.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.styles.cjs","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvCharCounter,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n  HvFormElementProps,\n  HvLabelProps,\n  HvInfoMessageProps,\n  HvCharCounterProps,\n  HvWarningTextProps,\n  HvSuggestionsProps,\n  suggestionsClasses,\n} from \"@core/components/Forms\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport {\n  HvListContainer,\n  HvListItemProps,\n  HvListItem,\n  listItemClasses,\n} from \"@core/components/ListContainer\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport tagsInputClasses from \"./tagsInputClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  float: \"left\",\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n  <HvLabel {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n  paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n  <HvInfoMessage {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n  <HvCharCounter {...props} />\n))(() => ({\n  display: \"block\",\n  float: \"right\",\n  textAlign: \"right\",\n  marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n  HvListContainer,\n  transientOptions\n)(\n  ({\n    $disabled,\n    $singleLine,\n    $error,\n    $resizable,\n    $invalid,\n    $readOnly,\n  }: {\n    $disabled: boolean;\n    $singleLine: boolean;\n    $error: boolean;\n    $resizable: boolean;\n    $invalid: boolean;\n    $readOnly: boolean;\n  }) => ({\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.tagsInput.borderColor}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.tagsInput.hoverColor}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    ...($disabled && {\n      backgroundColor: theme.tagsInput.disabledBackgroundColor,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    }),\n\n    ...($readOnly && {\n      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      \"&:hover\": {\n        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      },\n    }),\n\n    ...($singleLine && {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    }),\n\n    ...($error && {\n      border: `1px solid ${theme.colors.negative}`,\n    }),\n\n    ...($resizable && {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    }),\n\n    ...($invalid && {\n      border: `1px solid ${theme.colors.negative}!important`,\n    }),\n  })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n  <HvWarningText {...props} />\n))({\n  float: \"left\",\n});\n\nexport const StyledListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  marginBottom: 2,\n  height: 24,\n  lineHeight: \"24px\",\n  \"&:not(:last-child)\": {\n    marginBottom: 2,\n  },\n  [`&.${listItemClasses.gutters}`]: {\n    padding: \"0 5px\",\n  },\n  ...($singleLine && {\n    display: \"table-cell\",\n    paddingTop: \"2px!important\",\n  }),\n}));\n\nexport const StyledTag = styled(\n  (props: HvTagProps) => <HvTag {...props} />,\n  transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n  [`& .${tagsInputClasses.chipRoot}`]: {\n    maxWidth: \"none\",\n  },\n  ...($selected && {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  }),\n}));\n\nexport const StyledInputListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(\n  ({\n    $singleLine,\n    $isTagSelected,\n  }: {\n    $singleLine: boolean;\n    $isTagSelected: boolean;\n  }) => ({\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n    [`&.${listItemClasses.gutters}`]: {\n      padding: \"0 5px\",\n    },\n    ...($singleLine && {\n      display: \"table-cell\",\n      minWidth: 100,\n      width: \"100%\",\n      paddingTop: \"3px!important\",\n      verticalAlign: \"middle\",\n    }),\n    ...($isTagSelected && {\n      [`& .${baseInputClasses.inputRoot}`]: {\n        backgroundColor: theme.colors.atmo1,\n      },\n    }),\n  })\n);\n\nexport const StyledInput = styled(\n  (props: HvInputProps) => <HvInput {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  [`& .${baseInputClasses.root}`]: {\n    width: \"100%\",\n    border: \"none\",\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.inputRoot}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    flex: \"1 1 auto\",\n    minWidth: 48,\n    height: 24,\n    lineHeight: \"24px\",\n    padding: 0,\n    border: \"none\",\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    border: \"none\",\n    background: \"none\",\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    outline: \"none!important\",\n    boxShadow: \"none!important\",\n  },\n  [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n    backgroundColor: \"transparent \",\n    border: \"none\",\n    \"&:hover\": {\n      border: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.input}`]: {\n    marginLeft: 0,\n  },\n  ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  top: 59,\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}
+{"version":3,"file":"TagsInput.styles.cjs","sources":["../../../../src/components/TagsInput/TagsInput.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  HvCharCounter,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestions,\n  HvWarningText,\n  HvFormElementProps,\n  HvLabelProps,\n  HvInfoMessageProps,\n  HvCharCounterProps,\n  HvWarningTextProps,\n  HvSuggestionsProps,\n  suggestionsClasses,\n} from \"@core/components/Forms\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { HvTag, HvTagProps } from \"@core/components/Tag\";\nimport { baseInputClasses } from \"@core/components/BaseInput\";\nimport {\n  HvListContainer,\n  HvListItemProps,\n  HvListItem,\n  listItemClasses,\n} from \"@core/components/ListContainer\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\n\nimport tagsInputClasses from \"./tagsInputClasses\";\n\nexport const StyledFormElement = styled((props: HvFormElementProps) => (\n  <HvFormElement {...props} />\n))({\n  display: \"inline-block\",\n  width: \"100%\",\n});\n\nexport const StyledLabelContainer = styled(\"div\")({\n  float: \"left\",\n  display: \"flex\",\n  alignItems: \"flex-start\",\n});\n\nexport const StyledLabel = styled((props: HvLabelProps) => (\n  <HvLabel {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n  paddingBottom: \"6px\",\n});\n\nexport const StyledDescription = styled((props: HvInfoMessageProps) => (\n  <HvInfoMessage {...props} />\n))({\n  display: \"block\",\n  float: \"left\",\n});\n\nexport const StyledCharCounter = styled((props: HvCharCounterProps) => (\n  <HvCharCounter {...props} />\n))(() => ({\n  display: \"block\",\n  float: \"right\",\n  textAlign: \"right\",\n  marginBottom: \"6px\",\n}));\n\nexport const StyledTagsList = styled(\n  HvListContainer,\n  transientOptions\n)(\n  ({\n    $disabled,\n    $singleLine,\n    $error,\n    $resizable,\n    $invalid,\n    $readOnly,\n  }: {\n    $disabled: boolean;\n    $singleLine: boolean;\n    $error: boolean;\n    $resizable: boolean;\n    $invalid: boolean;\n    $readOnly: boolean;\n  }) => ({\n    display: \"flex\",\n    alignContent: \"flex-start\",\n    float: \"left\",\n    clear: \"both\",\n    width: \"100%\",\n    maxWidth: \"100%\",\n    height: \"32px\",\n    padding: 5,\n    overflow: \"auto\",\n    position: \"relative\",\n\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    backgroundColor: theme.colors.atmo1,\n    border: `1px solid ${theme.tagsInput.borderColor}`,\n    borderRadius: theme.radii.base,\n\n    \"&:hover\": {\n      cursor: \"text\",\n      border: `1px solid ${theme.tagsInput.hoverColor}`,\n    },\n\n    [`& .${baseInputClasses.inputRoot}`]: {\n      border: \"none\",\n    },\n\n    \"&:focus, &:focus-within, &:focus-visible\": {\n      outlineColor: \"#52A8EC\",\n      outlineStyle: \"solid\",\n      outlineWidth: \"0px\",\n      outlineOffset: \"-1px\",\n      boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n    },\n\n    ...($disabled && {\n      backgroundColor: theme.tagsInput.disabledBackgroundColor,\n      border: `1px solid ${theme.colors.atmo4}`,\n\n      \"&:focus-within, &:hover\": {\n        border: `1px solid ${theme.colors.atmo4}`,\n      },\n    }),\n\n    ...($readOnly && {\n      backgroundColor: theme.tagsInput.readOnlyBackgroundColor,\n      border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      \"&:hover\": {\n        border: `1px solid ${theme.tagsInput.readOnlyBorderColor}`,\n      },\n    }),\n\n    ...($singleLine && {\n      overflowX: \"hidden\",\n      overflowY: \"hidden\",\n      height: 32,\n      display: \"table-row\",\n      paddingTop: 0,\n    }),\n\n    ...($error && {\n      border: `1px solid ${theme.colors.negative}`,\n    }),\n\n    ...($resizable && {\n      width: \"auto\",\n      resize: \"both\",\n      overflow: \"auto\",\n    }),\n\n    ...($invalid && {\n      border: `1px solid ${theme.colors.negative}!important`,\n    }),\n  })\n);\n\nexport const StyledError = styled((props: HvWarningTextProps) => (\n  <HvWarningText {...props} />\n))({\n  float: \"left\",\n});\n\nexport const StyledListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  marginBottom: 2,\n  height: 24,\n  lineHeight: \"24px\",\n  \"&:not(:last-child)\": {\n    marginBottom: 2,\n  },\n  [`&.${listItemClasses.gutters}`]: {\n    padding: \"0 5px\",\n  },\n  ...($singleLine && {\n    display: \"table-cell\",\n    paddingTop: \"2px!important\",\n  }),\n}));\n\nexport const StyledTag = styled(\n  (props: HvTagProps) => <HvTag {...props} />,\n  transientOptions\n)(({ $selected }: { $selected: boolean }) => ({\n  [`& .${tagsInputClasses.chipRoot}`]: {\n    maxWidth: \"none\",\n  },\n  ...($selected && {\n    outlineColor: \"#52A8EC\",\n    outlineStyle: \"solid\",\n    outlineWidth: \"0px\",\n    outlineOffset: \"-1px\",\n    boxShadow: \"0 0 0 1px #52A8EC, 0 0 0 4px rgba(29,155,209,.3)\",\n  }),\n}));\n\nexport const StyledInputListItem = styled(\n  (props: HvListItemProps) => <HvListItem {...props} />,\n  transientOptions\n)(\n  ({\n    $singleLine,\n    $isTagSelected,\n  }: {\n    $singleLine: boolean;\n    $isTagSelected: boolean;\n  }) => ({\n    display: \"flex\",\n    flexGrow: 1,\n    height: 24,\n    lineHeight: \"24px\",\n    [`&.${listItemClasses.gutters}`]: {\n      padding: \"0 5px\",\n    },\n    ...($singleLine && {\n      display: \"table-cell\",\n      minWidth: 100,\n      width: \"100%\",\n      paddingTop: \"3px!important\",\n      verticalAlign: \"middle\",\n    }),\n    ...($isTagSelected && {\n      [`& .${baseInputClasses.inputRoot}`]: {\n        backgroundColor: theme.colors.atmo1,\n      },\n    }),\n  })\n);\n\nexport const StyledInput = styled(\n  (props: HvInputProps) => <HvInput {...props} />,\n  transientOptions\n)(({ $singleLine }: { $singleLine: boolean }) => ({\n  [`& .${baseInputClasses.root}`]: {\n    width: \"100%\",\n    border: \"none\",\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n    [`&:hover .${tagsInputClasses.tagInputBorderContainer}`]: {\n      background: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.inputRoot}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    flex: \"1 1 auto\",\n    minWidth: 48,\n    height: 24,\n    lineHeight: \"24px\",\n    padding: 0,\n    border: \"none\",\n  },\n  [`& .${baseInputClasses.inputBorderContainer}`]: {\n    border: \"none\",\n    background: \"none\",\n  },\n  [`& .${baseInputClasses.inputRootFocused}`]: {\n    outline: \"none!important\",\n    boxShadow: \"none!important\",\n  },\n  [`& .${baseInputClasses.root} .${baseInputClasses.inputRootReadOnly}`]: {\n    backgroundColor: \"transparent \",\n    border: \"none\",\n    \"&:hover\": {\n      border: \"none\",\n    },\n  },\n  [`&& .${baseInputClasses.input}`]: {\n    marginLeft: 0,\n  },\n  ...($singleLine && {}),\n}));\n\nexport const StyledSuggestions = styled((props: HvSuggestionsProps) => (\n  <HvSuggestions {...props} />\n))({\n  width: \"100%\",\n  position: \"relative\",\n  top: 59,\n  [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n    width: \"100%\",\n  },\n});\n"],"names":["StyledFormElement","_styled","props","HvFormElement","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledLabelContainer","StyledLabel","HvLabel","StyledDescription","HvInfoMessage","StyledCharCounter","HvCharCounter","display","float","textAlign","marginBottom","StyledTagsList","HvListContainer","_extends","transientOptions","$disabled","$singleLine","$error","$resizable","$invalid","$readOnly","alignContent","clear","width","maxWidth","height","padding","overflow","position","flexDirection","flexWrap","backgroundColor","theme","colors","atmo1","border","tagsInput","borderColor","borderRadius","radii","base","cursor","hoverColor","baseInputClasses","inputRoot","outlineColor","outlineStyle","outlineWidth","outlineOffset","boxShadow","disabledBackgroundColor","atmo4","readOnlyBackgroundColor","readOnlyBorderColor","overflowX","overflowY","paddingTop","negative","resize","StyledError","HvWarningText","StyledListItem","HvListItem","lineHeight","listItemClasses","gutters","StyledTag","HvTag","$selected","tagsInputClasses","chipRoot","StyledInputListItem","$isTagSelected","flexGrow","minWidth","verticalAlign","StyledInput","HvInput","root","tagInputBorderContainer","background","marginLeft","marginRight","flex","inputBorderContainer","inputRootFocused","outline","inputRootReadOnly","input","StyledSuggestions","HvSuggestions","top","suggestionsClasses","list"],"mappings":"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"}

package/dist/cjs/components/Typography/Typography.cjs

@@ -54,11 +54,11 @@ const HvTypography = React.forwardRef((props, ref) => {
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, {
     ref,
-    className: cx(classes.root, classes[variant], className, {
+    className: cx(classes.root, classes[variant], {
       [classes.isLink]: link,
       [classes.noWrap]: noWrap,
       [classes.disabled]: disabled
-    }),
+    }, className),
     ...others
   });
 });

package/dist/cjs/components/Typography/Typography.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(classes.root, classes[variant], className, {\n          [classes.isLink]: link,\n          [classes.noWrap]: noWrap,\n          [classes.disabled]: disabled,\n        })}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,wCACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GAAGT,QAAQgB,MAAMhB,QAAQE,OAAO,GAAGL,WAAW;AAAA,MACvD,CAACG,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,IAAAA,CACrB;AAAA,IAAE,GACCG;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}
+{"version":3,"file":"Typography.cjs","sources":["../../../../src/components/Typography/Typography.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { PolymorphicComponentRef, PolymorphicRef } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTypographyLegacyVariants,\n  HvTypographyVariants,\n  mapVariant,\n} from \"./utils\";\nimport { staticClasses, useClasses } from \"./Typography.styles\";\n\nexport { staticClasses as typographyClasses };\n\nexport type HvTypographyClasses = ExtractNames<typeof useClasses>;\n\nconst HvTypographyMap = {\n  display: \"h1\",\n  title1: \"h1\",\n  title2: \"h2\",\n  title3: \"h3\",\n  title4: \"h4\",\n  body: \"p\",\n  label: \"span\",\n  caption1: \"p\",\n  caption2: \"p\",\n  // LEGACY\n  \"5xlTitle\": \"h1\",\n  \"4xlTitle\": \"h1\",\n  xxlTitle: \"h1\",\n  lTitle: \"h2\",\n  sTitle: \"h4\",\n  xxsTitle: \"h6\",\n  sectionTitle: \"p\",\n  placeholderText: \"p\",\n  link: \"p\",\n  disabledText: \"p\",\n  selectedNavText: \"p\",\n  vizTextDisabled: \"p\",\n  xsInlineLink: \"p\",\n} as const;\n\nexport type HvTypographyProps<C extends React.ElementType = \"p\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the Typography. */\n      variant?: HvTypographyVariants | HvTypographyLegacyVariants;\n      /** If `true` the typography will display the look of a link. */\n      link?: boolean;\n      /** If `true` the typography will display the look of a disabled state. */\n      disabled?: boolean;\n      /** If `true`, the text will have a bottom margin. */\n      paragraph?: boolean;\n      /**\n       * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis.\n       *\n       * Note that text overflow can only happen with block or inline-block level elements\n       * (the element needs to have a width in order to overflow).\n       */\n      noWrap?: boolean;\n      /** A Jss Object used to override or extend the styles applied to the component. */\n      classes?: HvTypographyClasses;\n    }\n  >;\n\n/**\n * Typography component is used to render text and paragraphs within an interface.\n */\nexport const HvTypography: <C extends React.ElementType = \"p\">(\n  props: HvTypographyProps<C>\n) => React.ReactElement | null = forwardRef(\n  <C extends React.ElementType = \"p\">(\n    props: HvTypographyProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const {\n      className,\n      component: ComponentProp,\n      classes: classesProp,\n      variant: variantProp = \"body\",\n      link = false,\n      disabled = false,\n      noWrap = false,\n      paragraph = false,\n      ...others\n    } = useDefaultProps(\"HvTypography\", props);\n    const { classes, cx } = useClasses(classesProp);\n    const { activeTheme } = useTheme();\n\n    const variant = mapVariant(variantProp, activeTheme?.name);\n\n    const Component =\n      ComponentProp || (paragraph && \"p\") || HvTypographyMap[variant] || \"span\";\n\n    return (\n      <Component\n        ref={ref}\n        className={cx(\n          classes.root,\n          classes[variant],\n          {\n            [classes.isLink]: link,\n            [classes.noWrap]: noWrap,\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvTypographyMap","display","title1","title2","title3","title4","body","label","caption1","caption2","xxlTitle","lTitle","sTitle","xxsTitle","sectionTitle","placeholderText","link","disabledText","selectedNavText","vizTextDisabled","xsInlineLink","HvTypography","forwardRef","props","ref","className","component","ComponentProp","classes","classesProp","variant","variantProp","disabled","noWrap","paragraph","others","useDefaultProps","cx","useClasses","activeTheme","useTheme","mapVariant","name","Component","root","isLink"],"mappings":";;;;;;;;AAkBA,MAAMA,kBAAkB;AAAA,EACtBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,OAAO;AAAA,EACPC,UAAU;AAAA,EACVC,UAAU;AAAA;AAAA,EAEV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZC,UAAU;AAAA,EACVC,QAAQ;AAAA,EACRC,QAAQ;AAAA,EACRC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,MAAM;AAAA,EACNC,cAAc;AAAA,EACdC,iBAAiB;AAAA,EACjBC,iBAAiB;AAAA,EACjBC,cAAc;AAChB;AA6BO,MAAMC,eAEoBC,MAAAA,WAC/B,CACEC,OACAC,QACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC,WAAWC;AAAAA,IACXC,SAASC;AAAAA,IACTC,SAASC,cAAc;AAAA,IACvBf,OAAO;AAAA,IACPgB,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZ,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS,SAAA;AAEjC,QAAMV,UAAUW,MAAAA,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,wCACGa,WAAS;AAAA,IACRnB;AAAAA,IACAC,WAAWY,GACTT,QAAQgB,MACRhB,QAAQE,OAAO,GACf;AAAA,MACE,CAACF,QAAQiB,MAAM,GAAG7B;AAAAA,MAClB,CAACY,QAAQK,MAAM,GAAGA;AAAAA,MAClB,CAACL,QAAQI,QAAQ,GAAGA;AAAAA,OAEtBP,SACF;AAAA,IAAE,GACEU;AAAAA,EAAAA,CACL;AAEL,CACF;;;"}

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("@emotion/styled/base");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
-const listItemClasses = require("../../ListContainer/ListItem/listItemClasses.cjs");
+const ListItem_styles = require("../../ListContainer/ListItem/ListItem.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const StyledListItem = /* @__PURE__ */ _styled__default.default(ListItem.HvListItem, process.env.NODE_ENV === "production" ? {
@@ -20,14 +20,14 @@ const StyledListItem = /* @__PURE__ */ _styled__default.default(ListItem.HvListI
   "& > button": {
     marginLeft: "auto"
   },
-  [`&.${listItemClasses.default.selected}`]: {
+  [`&.${ListItem_styles.staticClasses.selected}`]: {
     background: uikitStyles.theme.colors.atmo3,
     borderLeft: uikitStyles.theme.verticalNavigation.activeBorderLeft,
     "& *": {
       background: uikitStyles.theme.colors.atmo3
     }
   },
-  [`&.${listItemClasses.default.focus}`]: {
+  [`&.${ListItem_styles.staticClasses.focus}`]: {
     background: uikitStyles.theme.colors.atmo3,
     "& *": {
       background: uikitStyles.theme.colors.atmo3