@hitachivantara/uikit-react-core 5.24.2 → 5.24.3

package/dist/esm/components/ListContainer/ListItem/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","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":";;;;;;;;;;;;;;;;;;;;AAYaA,MAAAA,yCACX,MAAIC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACJC,gBAAgB,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,gBAAgB,CAClB,EACE,CAAC;AAAA,EACCE;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAQF,OAAO;AAAA,EACL,GAAIC,MAAMC,WAAWC;AAAAA,EACrBC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,YAAY;AAAA,EACZC,eAAe;AAAA,EACfC,UAAU;AAAA,EACVC,cAAc;AAAA,EACdC,YAAY;AAAA,EACZC,UAAU;AAAA,EAEV,sBAAsB;AAAA,IACpBC,cAAc;AAAA,EAChB;AAAA,EACA,CAAE,KAAIC,gBAAgBC,WAAW,GAAG;AAAA,IAClCF,cAAc;AAAA,EAChB;AAAA,EAEA,GAAIlB,YAAY;AAAA,IACdS,SAAU,KAAIH,MAAMe,MAAMC;AAAAA,IAE1B,CAAE,KAAIH,gBAAgBI,oBAAoB,GAAG;AAAA,MAC3CC,aAAa;AAAA,IACf;AAAA,IACA,CAAE,KAAIL,gBAAgBM,kBAAkB,GAAG;AAAA,MACzCC,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,GAAIzB,gBAAgB;AAAA,IAClB0B,QAAQ;AAAA,IACR,CAAE,UAASR,gBAAgBS,kBAAkBT,gBAAgBU,iBAAiB,GAC5E;AAAA,MACEC,iBAAiBxB,MAAMyB,KAAKC;AAAAA,IAC9B;AAAA,IACF,CAAE,KAAIb,gBAAgBS,UAAU,GAAG;AAAA,MACjCD,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,GAAIzB,aAAa;AAAA,IACf4B,iBAAiBxB,MAAMyB,KAAKC;AAAAA,EAC9B;AAAA,EACA,GAAI7B,aAAa;AAAA,IACf8B,OAAO3B,MAAM4B,OAAOC;AAAAA,IACpBL,iBAAiBxB,MAAMyB,KAAKK;AAAAA,EAC9B;AAAA,EACA,GAAIhC,mBAAmB;AAAA,IACrB,WAAW;AAAA,MACTiC,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,CAAE,IAAGpB,gBAAgBS,yBAAyB,GAAG;AAAA,MAC/CY,MAAMlC,MAAM4B,OAAOC;AAAAA,IACrB;AAAA,EACF;AAAA,EACA,GAAI9B,iBAAiB;AAAA,IACnB,WAAW;AAAA,MAAEgC,OAAO;AAAA,IAAQ;AAAA,IAE5B,SAAS;AAAA,MACPC,WAAW;AAAA,MACXC,SAAS;AAAA,IACX;AAAA,IACA,CAAE,IAAGpB,gBAAgBS,yBAAyB,GAAG;AAAA,MAC/CY,MAAMlC,MAAM4B,OAAOC;AAAAA,IACrB;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,GAAGM;AAAAA,IACHX,iBAAiBxB,MAAM4B,OAAOQ;AAAAA,IAC9BC,QAAQ;AAAA,EACV;AACF,IAAElD,QAAAC,IAAAC,stIACJ;AAEO,MAAMiD,cAAqBC,wBAAAA,SAAOpD,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CAAA,EAAE;AAAA,EACzC+B,iBAAiBxB,MAAM4B,OAAOQ;AAAAA,EAC9BC,QAAQ;AACV,GAAClD,QAAAC,IAAAC,aAAC,eAAA,KAAA,qrIAAA;"}
+{"version":3,"file":"ListItem.styles.js","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,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJ,GAAGC,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;AAAAA,MACHC,iBAAiBd,MAAMe,OAAOC;AAAAA,MAC9BC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IAAEJ,iBAAiBd,MAAMe,OAAOC;AAAAA,IAAOC,QAAQ;AAAA,EAAE;AAAA,EACxDE,gBAAgB,CAAC;AAAA,EACjBC,cAAc,CAAC;AAAA,EACfC,SAAS;AAAA,IACPlB,SAAU,KAAIH,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,MAAM6B,KAAKC;AAAAA,IAC9B;AAAA,IACA,cAAc;AAAA,MACZF,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAG,UAAU;AAAA,IAAEjB,iBAAiBd,MAAM6B,KAAKC;AAAAA,EAAW;AAAA,EACnDE,UAAU;AAAA,IACRC,OAAOjC,MAAMe,OAAOmB;AAAAA,IACpBpB,iBAAiBd,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,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,MAAMe,OAAOmB;AAAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js

@@ -103,10 +103,10 @@ const HvScrollToHorizontal = (props) => {
       marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
       marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
       backgroundColor: 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/esm/components/ScrollTo/Horizontal/ScrollToHorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToHorizontal.js","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.js","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":"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"}

package/dist/esm/components/ScrollTo/Vertical/ScrollToVertical.js

@@ -77,10 +77,10 @@ const HvScrollToVertical = (props) => {
   return /* @__PURE__ */ 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/esm/components/ScrollTo/Vertical/ScrollToVertical.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollToVertical.js","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,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,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,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,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,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,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,MAAMjB,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,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,6BACE,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.js","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,sBAAsBjB,KAAK;AAEzC,QAAA;AAAA,IAAES;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS;AAEzCC,QAAAA,YAAYC,YAAYxB,IAAI,oBAAoB;AAEhD,QAAA,CAACyB,eAAeC,WAAW,IAAIC,YACnC1B,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,QAAQ,MAAM;AAC7BzB,WAAAA,QAAQ0B,IAAKC,CAAW,WAAA;AAC7B,aAAOC,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,+BACGY,0BAAwB;AAAA,MACvB3C,IAAI4C,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,MAAMjB,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,gBAAgBvC,QAAQwC,MAAM;AAC/CC,QAAAA,kBAAkBC,UACtBhC,2CAAaiC,OAAOC,MAAMjC,cAAckC,OACxCnC,2CAAaoC,SAASC,sBACxB;AAEA,6BACE,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/esm/components/Tab/Tab.js

@@ -1,30 +1,35 @@
+import { Tab } from "@mui/material";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
-import { clsx } from "clsx";
-import { StyledTab } from "./Tab.styles.js";
-import tabClasses from "./tabClasses.js";
+import { useClasses } from "./Tab.styles.js";
+import { staticClasses } from "./Tab.styles.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvTab = (props) => {
   const {
-    classes,
+    classes: classesProp,
     iconPosition = "top",
     disabled = false,
     ...others
   } = useDefaultProps("HvTab", props);
-  return /* @__PURE__ */ jsx(StyledTab, {
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(Tab, {
     classes: {
-      root: clsx(tabClasses.root, classes == null ? void 0 : classes.root),
-      selected: clsx(tabClasses.selected, classes == null ? void 0 : classes.selected),
-      disabled: clsx(tabClasses.disabled, classes == null ? void 0 : classes.disabled)
+      root: classes.root,
+      selected: classes.selected,
+      disabled: classes.disabled
     },
     disableRipple: true,
     disableTouchRipple: true,
-    focusVisibleClassName: clsx("HvIsFocusVisible", clsx(tabClasses.focusVisible, classes == null ? void 0 : classes.focusVisible)),
+    focusVisibleClassName: cx("HvIsFocusVisible", classes.focusVisible),
     disabled,
     iconPosition,
     ...others
   });
 };
 export {
-  HvTab
+  HvTab,
+  staticClasses as tabClasses
 };
 //# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","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,SAASL,KAAK;AAElC,6BACGM,WAAS;AAAA,IACRL,SAAS;AAAA,MACPM,MAAMC,KAAKC,WAAWF,MAAMN,mCAASM,IAAI;AAAA,MACzCG,UAAUF,KAAKC,WAAWC,UAAUT,mCAASS,QAAQ;AAAA,MACrDP,UAAUK,KAAKC,WAAWN,UAAUF,mCAASE,QAAQ;AAAA,IACvD;AAAA,IACAQ,eAAa;AAAA,IACbC,oBAAkB;AAAA,IAGlBC,uBAAuBL,KACrB,oBACAA,KAAKC,WAAWK,cAAcb,mCAASa,YAAY,CACrD;AAAA,IACAX;AAAAA,IACAD;AAAAA,IAA2B,GACvBE;AAAAA,EAAAA,CACL;AAEL;"}
+{"version":3,"file":"Tab.js","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,SAASN,KAAK;AAC5B,QAAA;AAAA,IAAEC;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAE9C,6BACGO,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/esm/components/Tab/Tab.styles.js

@@ -1,66 +1,64 @@
-import _styled from "@emotion/styled/base";
+import { createClasses } from "../../utils/classes.js";
 import { theme } from "@hitachivantara/uikit-styles";
-import { Tab } from "@mui/material";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const StyledTab = /* @__PURE__ */ _styled(Tab, process.env.NODE_ENV === "production" ? {
-  target: "evi6req0"
-} : {
-  target: "evi6req0",
-  label: "StyledTab"
-})({
-  // Root
-  marginTop: "3px",
-  padding: theme.tab.padding,
-  minWidth: 70,
-  minHeight: 32,
-  textTransform: "none",
-  fontFamily: theme.fontFamily.body,
-  ...theme.typography.body,
-  opacity: 1,
-  "&::after": {
-    position: "absolute",
-    left: 0,
-    top: "calc(100% - 1px)",
-    height: "1px",
-    width: "100%",
-    backgroundColor: theme.colors.atmo4,
-    content: "''"
-  },
-  "&:hover": {
-    backgroundColor: theme.tab.hoverBackgroundColor,
-    borderRadius: theme.tab.hoverBackgroundBorderRadius,
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTab", {
+  root: {
+    marginTop: "3px",
+    padding: theme.tab.padding,
+    minWidth: 70,
+    minHeight: 32,
+    textTransform: "none",
+    fontFamily: theme.fontFamily.body,
+    ...theme.typography.body,
+    "&:hover": {
+      backgroundColor: theme.tab.hoverBackgroundColor,
+      borderRadius: theme.tab.hoverBackgroundBorderRadius,
+      "&::after": {
+        height: "1px",
+        backgroundColor: theme.tab.hoverUnderlineBackgroundColor
+      }
+    },
+    "&$selected": {
+      color: theme.typography.label.color,
+      fontWeight: theme.typography.label.fontWeight,
+      lineHeight: theme.typography.label.lineHeight,
+      letterSpacing: theme.typography.label.letterSpacing
+    },
+    "&$disabled": {
+      color: 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: theme.tab.hoverUnderlineBackgroundColor
+      width: "100%",
+      backgroundColor: theme.colors.atmo4,
+      content: "''"
+    },
+    // Override Mui styling: https://mui.com/material-ui/api/tab/#css
+    "& .MuiTab-iconWrapper": {
+      margin: 0
     }
   },
-  "&:focus-visible": {
+  focusVisible: {
     ...outlineStyles
   },
-  "&:focus": {
-    outline: "none"
-  },
-  // Override Mui styling: https://mui.com/material-ui/api/tab/#css
-  "&.Mui-selected": {
-    color: theme.colors.secondary,
-    letterSpacing: theme.typography.label.letterSpacing,
-    lineHeight: theme.typography.label.lineHeight,
-    fontWeight: theme.typography.label.fontWeight
-  },
-  "&.Mui-disabled": {
-    color: 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 */");
+  selected: {},
+  disabled: {}
+});
 export {
-  StyledTab
+  staticClasses,
+  useClasses
 };
 //# sourceMappingURL=Tab.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.js","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,wBAAAA,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,MAAMC,IAAIF;AAAAA,EACnBG,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,eAAe;AAAA,EACfC,YAAYL,MAAMK,WAAWC;AAAAA,EAC7B,GAAIN,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,MAAMe,OAAOC;AAAAA,IAC9BC,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACTH,iBAAiBd,MAAMC,IAAIiB;AAAAA,IAC3BC,cAAcnB,MAAMC,IAAImB;AAAAA,IACxB,YAAY;AAAA,MACVR,QAAQ;AAAA,MACRE,iBAAiBd,MAAMC,IAAIoB;AAAAA,IAC7B;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,GAAGC;AAAAA,EACL;AAAA,EACA,WAAW;AAAA,IACTC,SAAS;AAAA,EACX;AAAA;AAAA,EAGA,kBAAkB;AAAA,IAChBC,OAAOxB,MAAMe,OAAOU;AAAAA,IACpBC,eAAe1B,MAAMO,WAAWV,MAAM6B;AAAAA,IACtCC,YAAY3B,MAAMO,WAAWV,MAAM8B;AAAAA,IACnCC,YAAY5B,MAAMO,WAAWV,MAAM+B;AAAAA,EACrC;AAAA,EACA,kBAAkB;AAAA,IAChBJ,OAAOxB,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.js","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,cAAc,SAAS;AAAA,EAClEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,SAASC,MAAMC,IAAIF;AAAAA,IACnBG,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfC,YAAYL,MAAMK,WAAWC;AAAAA,IAC7B,GAAIN,MAAMO,WAAWD;AAAAA,IACrB,WAAW;AAAA,MACTE,iBAAiBR,MAAMC,IAAIQ;AAAAA,MAC3BC,cAAcV,MAAMC,IAAIU;AAAAA,MACxB,YAAY;AAAA,QACVC,QAAQ;AAAA,QACRJ,iBAAiBR,MAAMC,IAAIY;AAAAA,MAC7B;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZC,OAAOd,MAAMO,WAAWQ,MAAMD;AAAAA,MAC9BE,YAAYhB,MAAMO,WAAWQ,MAAMC;AAAAA,MACnCC,YAAYjB,MAAMO,WAAWQ,MAAME;AAAAA,MACnCC,eAAelB,MAAMO,WAAWQ,MAAMG;AAAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZJ,OAAOd,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,MAAMmB,OAAOU;AAAAA,MAC9BC,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,yBAAyB;AAAA,MACvBC,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZ,GAAGC;AAAAA,EACL;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU,CAAC;AACb,CAAC;"}

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

@@ -5,7 +5,8 @@ import tagsInputClasses from "./tagsInputClasses.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 import { staticClasses } from "../BaseInput/BaseInput.styles.js";
 import "../BaseInput/BaseInput.js";
-import listItemClasses from "../ListContainer/ListItem/listItemClasses.js";
+import { staticClasses as staticClasses$1 } from "../ListContainer/ListItem/ListItem.styles.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvTag } from "../Tag/Tag.js";
 import { HvInput } from "../Input/Input.js";
 import { HvFormElement } from "../Forms/FormElement/FormElement.js";
@@ -14,9 +15,8 @@ import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
 import { HvCharCounter } from "../Forms/CharCounter/CharCounter.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../Forms/WarningText/WarningText.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
-import { staticClasses as staticClasses$1 } from "../Forms/Suggestions/Suggestions.styles.js";
+import { staticClasses as staticClasses$2 } from "../Forms/Suggestions/Suggestions.styles.js";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
@@ -216,7 +216,7 @@ const StyledListItem = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(Hv
   "&:not(:last-child)": {
     marginBottom: 2
   },
-  [`&.${listItemClasses.gutters}`]: {
+  [`&.${staticClasses$1.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {
@@ -260,7 +260,7 @@ const StyledInputListItem = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ j
   flexGrow: 1,
   height: 24,
   lineHeight: "24px",
-  [`&.${listItemClasses.gutters}`]: {
+  [`&.${staticClasses$1.gutters}`]: {
     padding: "0 5px"
   },
   ...$singleLine && {
@@ -337,7 +337,7 @@ const StyledSuggestions = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx
   width: "100%",
   position: "relative",
   top: 59,
-  [`& .${staticClasses$1.root} .${staticClasses$1.list} &`]: {
+  [`& .${staticClasses$2.root} .${staticClasses$2.list} &`]: {
     width: "100%"
   }
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvVGFnc0lucHV0L1RhZ3NJbnB1dC5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJSaUMiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9UYWdzSW5wdXQvVGFnc0lucHV0LnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcblxuaW1wb3J0IHsgdGhlbWUgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXN0eWxlc1wiO1xuXG5pbXBvcnQge1xuICBIdkNoYXJDb3VudGVyLFxuICBIdkZvcm1FbGVtZW50LFxuICBIdkluZm9NZXNzYWdlLFxuICBIdkxhYmVsLFxuICBIdlN1Z2dlc3Rpb25zLFxuICBIdldhcm5pbmdUZXh0LFxuICBIdkZvcm1FbGVtZW50UHJvcHMsXG4gIEh2TGFiZWxQcm9wcyxcbiAgSHZJbmZvTWVzc2FnZVByb3BzLFxuICBIdkNoYXJDb3VudGVyUHJvcHMsXG4gIEh2V2FybmluZ1RleHRQcm9wcyxcbiAgSHZTdWdnZXN0aW9uc1Byb3BzLFxuICBzdWdnZXN0aW9uc0NsYXNzZXMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0Zvcm1zXCI7XG5pbXBvcnQgeyBIdklucHV0LCBIdklucHV0UHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9JbnB1dFwiO1xuaW1wb3J0IHsgSHZUYWcsIEh2VGFnUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9UYWdcIjtcbmltcG9ydCB7IGJhc2VJbnB1dENsYXNzZXMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50cy9CYXNlSW5wdXRcIjtcbmltcG9ydCB7XG4gIEh2TGlzdENvbnRhaW5lcixcbiAgSHZMaXN0SXRlbVByb3BzLFxuICBIdkxpc3RJdGVtLFxuICBsaXN0SXRlbUNsYXNzZXMsXG59IGZyb20gXCJAY29yZS9jb21wb25lbnRzL0xpc3RDb250YWluZXJcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuXG5pbXBvcnQgdGFnc0lucHV0Q2xhc3NlcyBmcm9tIFwiLi90YWdzSW5wdXRDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRGb3JtRWxlbWVudCA9IHN0eWxlZCgocHJvcHM6IEh2Rm9ybUVsZW1lbnRQcm9wcykgPT4gKFxuICA8SHZGb3JtRWxlbWVudCB7Li4ucHJvcHN9IC8+XG4pKSh7XG4gIGRpc3BsYXk6IFwiaW5saW5lLWJsb2NrXCIsXG4gIHdpZHRoOiBcIjEwMCVcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWxDb250YWluZXIgPSBzdHlsZWQoXCJkaXZcIikoe1xuICBmbG9hdDogXCJsZWZ0XCIsXG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBhbGlnbkl0ZW1zOiBcImZsZXgtc3RhcnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkTGFiZWwgPSBzdHlsZWQoKHByb3BzOiBIdkxhYmVsUHJvcHMpID0+IChcbiAgPEh2TGFiZWwgey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbiAgcGFkZGluZ0JvdHRvbTogXCI2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkRGVzY3JpcHRpb24gPSBzdHlsZWQoKHByb3BzOiBIdkluZm9NZXNzYWdlUHJvcHMpID0+IChcbiAgPEh2SW5mb01lc3NhZ2Ugey4uLnByb3BzfSAvPlxuKSkoe1xuICBkaXNwbGF5OiBcImJsb2NrXCIsXG4gIGZsb2F0OiBcImxlZnRcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2hhckNvdW50ZXIgPSBzdHlsZWQoKHByb3BzOiBIdkNoYXJDb3VudGVyUHJvcHMpID0+IChcbiAgPEh2Q2hhckNvdW50ZXIgey4uLnByb3BzfSAvPlxuKSkoKCkgPT4gKHtcbiAgZGlzcGxheTogXCJibG9ja1wiLFxuICBmbG9hdDogXCJyaWdodFwiLFxuICB0ZXh0QWxpZ246IFwicmlnaHRcIixcbiAgbWFyZ2luQm90dG9tOiBcIjZweFwiLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkVGFnc0xpc3QgPSBzdHlsZWQoXG4gIEh2TGlzdENvbnRhaW5lcixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKShcbiAgKHtcbiAgICAkZGlzYWJsZWQsXG4gICAgJHNpbmdsZUxpbmUsXG4gICAgJGVycm9yLFxuICAgICRyZXNpemFibGUsXG4gICAgJGludmFsaWQsXG4gICAgJHJlYWRPbmx5LFxuICB9OiB7XG4gICAgJGRpc2FibGVkOiBib29sZWFuO1xuICAgICRzaW5nbGVMaW5lOiBib29sZWFuO1xuICAgICRlcnJvcjogYm9vbGVhbjtcbiAgICAkcmVzaXphYmxlOiBib29sZWFuO1xuICAgICRpbnZhbGlkOiBib29sZWFuO1xuICAgICRyZWFkT25seTogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBhbGlnbkNvbnRlbnQ6IFwiZmxleC1zdGFydFwiLFxuICAgIGZsb2F0OiBcImxlZnRcIixcbiAgICBjbGVhcjogXCJib3RoXCIsXG4gICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgIG1heFdpZHRoOiBcIjEwMCVcIixcbiAgICBoZWlnaHQ6IFwiMzJweFwiLFxuICAgIHBhZGRpbmc6IDUsXG4gICAgb3ZlcmZsb3c6IFwiYXV0b1wiLFxuICAgIHBvc2l0aW9uOiBcInJlbGF0aXZlXCIsXG5cbiAgICBmbGV4RGlyZWN0aW9uOiBcInJvd1wiLFxuICAgIGZsZXhXcmFwOiBcIndyYXBcIixcblxuICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLmF0bW8xLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLnRhZ3NJbnB1dC5ib3JkZXJDb2xvcn1gLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUucmFkaWkuYmFzZSxcblxuICAgIFwiJjpob3ZlclwiOiB7XG4gICAgICBjdXJzb3I6IFwidGV4dFwiLFxuICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUudGFnc0lucHV0LmhvdmVyQ29sb3J9YCxcbiAgICB9LFxuXG4gICAgW2AmIC4ke2Jhc2VJbnB1dENsYXNzZXMuaW5wdXRSb290fWBdOiB7XG4gICAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIH0sXG5cbiAgICBcIiY6Zm9jdXMsICY6Zm9jdXMtd2l0aGluLCAmOmZvY3VzLXZpc2libGVcIjoge1xuICAgICAgb3V0bGluZUNvbG9yOiBcIiM1MkE4RUNcIixcbiAgICAgIG91dGxpbmVTdHlsZTogXCJzb2xpZFwiLFxuICAgICAgb3V0bGluZVdpZHRoOiBcIjBweFwiLFxuICAgICAgb3V0bGluZU9mZnNldDogXCItMXB4XCIsXG4gICAgICBib3hTaGFkb3c6IFwiMCAwIDAgMXB4ICM1MkE4RUMsIDAgMCAwIDRweCByZ2JhKDI5LDE1NSwyMDksLjMpXCIsXG4gICAgfSxcblxuICAgIC4uLigkZGlzYWJsZWQgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWdzSW5wdXQuZGlzYWJsZWRCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMuYXRtbzR9YCxcblxuICAgICAgXCImOmZvY3VzLXdpdGhpbiwgJjpob3ZlclwiOiB7XG4gICAgICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3RoZW1lLmNvbG9ycy5hdG1vNH1gLFxuICAgICAgfSxcbiAgICB9KSxcblxuICAgIC4uLigkcmVhZE9ubHkgJiYge1xuICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS50YWdzSW5wdXQucmVhZE9ubHlCYWNrZ3JvdW5kQ29sb3IsXG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS50YWdzSW5wdXQucmVhZE9ubHlCb3JkZXJDb2xvcn1gLFxuICAgICAgXCImOmhvdmVyXCI6IHtcbiAgICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUudGFnc0lucHV0LnJlYWRPbmx5Qm9yZGVyQ29sb3J9YCxcbiAgICAgIH0sXG4gICAgfSksXG5cbiAgICAuLi4oJHNpbmdsZUxpbmUgJiYge1xuICAgICAgb3ZlcmZsb3dYOiBcImhpZGRlblwiLFxuICAgICAgb3ZlcmZsb3dZOiBcImhpZGRlblwiLFxuICAgICAgaGVpZ2h0OiAzMixcbiAgICAgIGRpc3BsYXk6IFwidGFibGUtcm93XCIsXG4gICAgICBwYWRkaW5nVG9wOiAwLFxuICAgIH0pLFxuXG4gICAgLi4uKCRlcnJvciAmJiB7XG4gICAgICBib3JkZXI6IGAxcHggc29saWQgJHt0aGVtZS5jb2xvcnMubmVnYXRpdmV9YCxcbiAgICB9KSxcblxuICAgIC4uLigkcmVzaXphYmxlICYmIHtcbiAgICAgIHdpZHRoOiBcImF1dG9cIixcbiAgICAgIHJlc2l6ZTogXCJib3RoXCIsXG4gICAgICBvdmVyZmxvdzogXCJhdXRvXCIsXG4gICAgfSksXG5cbiAgICAuLi4oJGludmFsaWQgJiYge1xuICAgICAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLm5lZ2F0aXZlfSFpbXBvcnRhbnRgLFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZEVycm9yID0gc3R5bGVkKChwcm9wczogSHZXYXJuaW5nVGV4dFByb3BzKSA9PiAoXG4gIDxIdldhcm5pbmdUZXh0IHsuLi5wcm9wc30gLz5cbikpKHtcbiAgZmxvYXQ6IFwibGVmdFwiLFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRMaXN0SXRlbSA9IHN0eWxlZChcbiAgKHByb3BzOiBIdkxpc3RJdGVtUHJvcHMpID0+IDxIdkxpc3RJdGVtIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNpbmdsZUxpbmUgfTogeyAkc2luZ2xlTGluZTogYm9vbGVhbiB9KSA9PiAoe1xuICBtYXJnaW5Cb3R0b206IDIsXG4gIGhlaWdodDogMjQsXG4gIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICBcIiY6bm90KDpsYXN0LWNoaWxkKVwiOiB7XG4gICAgbWFyZ2luQm90dG9tOiAyLFxuICB9LFxuICBbYCYuJHtsaXN0SXRlbUNsYXNzZXMuZ3V0dGVyc31gXToge1xuICAgIHBhZGRpbmc6IFwiMCA1cHhcIixcbiAgfSxcbiAgLi4uKCRzaW5nbGVMaW5lICYmIHtcbiAgICBkaXNwbGF5OiBcInRhYmxlLWNlbGxcIixcbiAgICBwYWRkaW5nVG9wOiBcIjJweCFpbXBvcnRhbnRcIixcbiAgfSksXG59KSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRUYWcgPSBzdHlsZWQoXG4gIChwcm9wczogSHZUYWdQcm9wcykgPT4gPEh2VGFnIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoKHsgJHNlbGVjdGVkIH06IHsgJHNlbGVjdGVkOiBib29sZWFuIH0pID0+ICh7XG4gIFtgJiAuJHt0YWdzSW5wdXRDbGFzc2VzLmNoaXBSb290fWBdOiB7XG4gICAgbWF4V2lkdGg6IFwibm9uZVwiLFxuICB9LFxuICAuLi4oJHNlbGVjdGVkICYmIHtcbiAgICBvdXRsaW5lQ29sb3I6IFwiIzUyQThFQ1wiLFxuICAgIG91dGxpbmVTdHlsZTogXCJzb2xpZFwiLFxuICAgIG91dGxpbmVXaWR0aDogXCIwcHhcIixcbiAgICBvdXRsaW5lT2Zmc2V0OiBcIi0xcHhcIixcbiAgICBib3hTaGFkb3c6IFwiMCAwIDAgMXB4ICM1MkE4RUMsIDAgMCAwIDRweCByZ2JhKDI5LDE1NSwyMDksLjMpXCIsXG4gIH0pLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkSW5wdXRMaXN0SXRlbSA9IHN0eWxlZChcbiAgKHByb3BzOiBIdkxpc3RJdGVtUHJvcHMpID0+IDxIdkxpc3RJdGVtIHsuLi5wcm9wc30gLz4sXG4gIHRyYW5zaWVudE9wdGlvbnNcbikoXG4gICh7XG4gICAgJHNpbmdsZUxpbmUsXG4gICAgJGlzVGFnU2VsZWN0ZWQsXG4gIH06IHtcbiAgICAkc2luZ2xlTGluZTogYm9vbGVhbjtcbiAgICAkaXNUYWdTZWxlY3RlZDogYm9vbGVhbjtcbiAgfSkgPT4gKHtcbiAgICBkaXNwbGF5OiBcImZsZXhcIixcbiAgICBmbGV4R3JvdzogMSxcbiAgICBoZWlnaHQ6IDI0LFxuICAgIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICAgIFtgJi4ke2xpc3RJdGVtQ2xhc3Nlcy5ndXR0ZXJzfWBdOiB7XG4gICAgICBwYWRkaW5nOiBcIjAgNXB4XCIsXG4gICAgfSxcbiAgICAuLi4oJHNpbmdsZUxpbmUgJiYge1xuICAgICAgZGlzcGxheTogXCJ0YWJsZS1jZWxsXCIsXG4gICAgICBtaW5XaWR0aDogMTAwLFxuICAgICAgd2lkdGg6IFwiMTAwJVwiLFxuICAgICAgcGFkZGluZ1RvcDogXCIzcHghaW1wb3J0YW50XCIsXG4gICAgICB2ZXJ0aWNhbEFsaWduOiBcIm1pZGRsZVwiLFxuICAgIH0pLFxuICAgIC4uLigkaXNUYWdTZWxlY3RlZCAmJiB7XG4gICAgICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5pbnB1dFJvb3R9YF06IHtcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgICB9LFxuICAgIH0pLFxuICB9KVxuKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZElucHV0ID0gc3R5bGVkKFxuICAocHJvcHM6IEh2SW5wdXRQcm9wcykgPT4gPEh2SW5wdXQgey4uLnByb3BzfSAvPixcbiAgdHJhbnNpZW50T3B0aW9uc1xuKSgoeyAkc2luZ2xlTGluZSB9OiB7ICRzaW5nbGVMaW5lOiBib29sZWFuIH0pID0+ICh7XG4gIFtgJiAuJHtiYXNlSW5wdXRDbGFzc2VzLnJvb3R9YF06IHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgICBbYCY6aG92ZXIgLiR7dGFnc0lucHV0Q2xhc3Nlcy50YWdJbnB1dEJvcmRlckNvbnRhaW5lcn1gXToge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgICBbYCY6aG92ZXIgLiR7dGFnc0lucHV0Q2xhc3Nlcy50YWdJbnB1dEJvcmRlckNvbnRhaW5lcn1gXToge1xuICAgICAgYmFja2dyb3VuZDogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgW2AmJiAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0Um9vdH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgbWFyZ2luUmlnaHQ6IDAsXG4gICAgZmxleDogXCIxIDEgYXV0b1wiLFxuICAgIG1pbldpZHRoOiA0OCxcbiAgICBoZWlnaHQ6IDI0LFxuICAgIGxpbmVIZWlnaHQ6IFwiMjRweFwiLFxuICAgIHBhZGRpbmc6IDAsXG4gICAgYm9yZGVyOiBcIm5vbmVcIixcbiAgfSxcbiAgW2AmIC4ke2Jhc2VJbnB1dENsYXNzZXMuaW5wdXRCb3JkZXJDb250YWluZXJ9YF06IHtcbiAgICBib3JkZXI6IFwibm9uZVwiLFxuICAgIGJhY2tncm91bmQ6IFwibm9uZVwiLFxuICB9LFxuICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5pbnB1dFJvb3RGb2N1c2VkfWBdOiB7XG4gICAgb3V0bGluZTogXCJub25lIWltcG9ydGFudFwiLFxuICAgIGJveFNoYWRvdzogXCJub25lIWltcG9ydGFudFwiLFxuICB9LFxuICBbYCYgLiR7YmFzZUlucHV0Q2xhc3Nlcy5yb290fSAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0Um9vdFJlYWRPbmx5fWBdOiB7XG4gICAgYmFja2dyb3VuZENvbG9yOiBcInRyYW5zcGFyZW50IFwiLFxuICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJvcmRlcjogXCJub25lXCIsXG4gICAgfSxcbiAgfSxcbiAgW2AmJiAuJHtiYXNlSW5wdXRDbGFzc2VzLmlucHV0fWBdOiB7XG4gICAgbWFyZ2luTGVmdDogMCxcbiAgfSxcbiAgLi4uKCRzaW5nbGVMaW5lICYmIHt9KSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFN1Z2dlc3Rpb25zID0gc3R5bGVkKChwcm9wczogSHZTdWdnZXN0aW9uc1Byb3BzKSA9PiAoXG4gIDxIdlN1Z2dlc3Rpb25zIHsuLi5wcm9wc30gLz5cbikpKHtcbiAgd2lkdGg6IFwiMTAwJVwiLFxuICBwb3NpdGlvbjogXCJyZWxhdGl2ZVwiLFxuICB0b3A6IDU5LFxuICBbYCYgLiR7c3VnZ2VzdGlvbnNDbGFzc2VzLnJvb3R9IC4ke3N1Z2dlc3Rpb25zQ2xhc3Nlcy5saXN0fSAmYF06IHtcbiAgICB3aWR0aDogXCIxMDAlXCIsXG4gIH0sXG59KTtcbiJdfQ== */");

package/dist/esm/components/Typography/Typography.js

@@ -53,11 +53,11 @@ const HvTypography = forwardRef((props, ref) => {
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
   return /* @__PURE__ */ 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/esm/components/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","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,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,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAEjC,QAAMV,UAAUW,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGa,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.js","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,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,gBAAgBb,KAAK;AACnC,QAAA;AAAA,IAAEK;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxC,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAEjC,QAAMV,UAAUW,WAAWV,aAAaQ,2CAAaG,IAAI;AAEzD,QAAMC,YACJhB,iBAAkBO,aAAa,OAAQlC,gBAAgB8B,OAAO,KAAK;AAErE,6BACGa,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/esm/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js

@@ -1,7 +1,7 @@
 import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
-import listItemClasses from "../../ListContainer/ListItem/listItemClasses.js";
+import { staticClasses } from "../../ListContainer/ListItem/ListItem.styles.js";
 const StyledListItem = /* @__PURE__ */ _styled(HvListItem, process.env.NODE_ENV === "production" ? {
   target: "e13y3edh0"
 } : {
@@ -16,14 +16,14 @@ const StyledListItem = /* @__PURE__ */ _styled(HvListItem, process.env.NODE_ENV
   "& > button": {
     marginLeft: "auto"
   },
-  [`&.${listItemClasses.selected}`]: {
+  [`&.${staticClasses.selected}`]: {
     background: theme.colors.atmo3,
     borderLeft: theme.verticalNavigation.activeBorderLeft,
     "& *": {
       background: theme.colors.atmo3
     }
   },
-  [`&.${listItemClasses.focus}`]: {
+  [`&.${staticClasses.focus}`]: {
     background: theme.colors.atmo3,
     "& *": {
       background: theme.colors.atmo3

package/dist/esm/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvListItem, listItemClasses } from \"@core/components/ListContainer\";\n\nexport const StyledListItem = styled(HvListItem)({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  minHeight: \"48px\",\n  marginBottom: \"8px\",\n  \"& > button\": {\n    marginLeft: \"auto\",\n  },\n\n  [`&.${listItemClasses.selected}`]: {\n    background: theme.colors.atmo3,\n    borderLeft: theme.verticalNavigation.activeBorderLeft,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n\n  [`&.${listItemClasses.focus}`]: {\n    background: theme.colors.atmo3,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n});\n"],"names":["StyledListItem","HvListItem","process","env","NODE_ENV","target","label","display","alignItems","borderLeft","theme","verticalNavigation","inactiveBorderLeft","minHeight","marginBottom","marginLeft","listItemClasses","selected","background","colors","atmo3","activeBorderLeft","focus"],"mappings":";;;;AAIO,MAAMA,iBAAwBC,wBAAAA,YAAUC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,YAAYC,MAAMC,mBAAmBC;AAAAA,EACrCC,WAAW;AAAA,EACXC,cAAc;AAAA,EACd,cAAc;AAAA,IACZC,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,KAAIC,gBAAgBC,UAAU,GAAG;AAAA,IACjCC,YAAYR,MAAMS,OAAOC;AAAAA,IACzBX,YAAYC,MAAMC,mBAAmBU;AAAAA,IACrC,OAAO;AAAA,MACLH,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EAEA,CAAE,KAAIJ,gBAAgBM,OAAO,GAAG;AAAA,IAC9BJ,YAAYR,MAAMS,OAAOC;AAAAA,IACzB,OAAO;AAAA,MACLF,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qmDAAA;"}
+{"version":3,"file":"NavigationSlider.styles.js","sources":["../../../../../src/components/VerticalNavigation/NavigationSlider/NavigationSlider.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvListItem, listItemClasses } from \"@core/components/ListContainer\";\n\nexport const StyledListItem = styled(HvListItem)({\n  display: \"flex\",\n  alignItems: \"center\",\n  borderLeft: theme.verticalNavigation.inactiveBorderLeft,\n  minHeight: \"48px\",\n  marginBottom: \"8px\",\n  \"& > button\": {\n    marginLeft: \"auto\",\n  },\n\n  [`&.${listItemClasses.selected}`]: {\n    background: theme.colors.atmo3,\n    borderLeft: theme.verticalNavigation.activeBorderLeft,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n\n  [`&.${listItemClasses.focus}`]: {\n    background: theme.colors.atmo3,\n    \"& *\": {\n      background: theme.colors.atmo3,\n    },\n  },\n});\n"],"names":["StyledListItem","HvListItem","process","env","NODE_ENV","target","label","display","alignItems","borderLeft","theme","verticalNavigation","inactiveBorderLeft","minHeight","marginBottom","marginLeft","listItemClasses","selected","background","colors","atmo3","activeBorderLeft","focus"],"mappings":";;;;AAIO,MAAMA,iBAAwBC,wBAAAA,YAAUC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC/CC,SAAS;AAAA,EACTC,YAAY;AAAA,EACZC,YAAYC,MAAMC,mBAAmBC;AAAAA,EACrCC,WAAW;AAAA,EACXC,cAAc;AAAA,EACd,cAAc;AAAA,IACZC,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,KAAIC,cAAgBC,UAAU,GAAG;AAAA,IACjCC,YAAYR,MAAMS,OAAOC;AAAAA,IACzBX,YAAYC,MAAMC,mBAAmBU;AAAAA,IACrC,OAAO;AAAA,MACLH,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AAAA,EAEA,CAAE,KAAIJ,cAAgBM,OAAO,GAAG;AAAA,IAC9BJ,YAAYR,MAAMS,OAAOC;AAAAA,IACzB,OAAO;AAAA,MACLF,YAAYR,MAAMS,OAAOC;AAAAA,IAC3B;AAAA,EACF;AACF,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qmDAAA;"}