@helsenorge/designsystem-react 14.6.0 → 14.7.1

package/lib/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TabsRoot: React.FC<TabsProps>","mergedResources: HNDesignsystemTabs","onColorUsed: TabsOnColor"],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,EAAE;CAC7D,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAAsC;EAC1C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,IAAIC,cAA2B;AAC/B,KAAI,UAAU,QACZ,eAAc;CAGhB,MAAM,iBAAiB,aAA2B;AAChD,MAAI,CAAC,aACH,sBAAqB,SAAS;;CAIlC,MAAM,iBAAiB,eAAe,YAAY;AAElD,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,sBAAsB;EAAE,eAAa;aACjH,qBAAC,OAAA;GACC,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,QACvC,CAAC;GACF,OAAO,EACG,QACT;cAED,oBAAC,iBAAA;IACC,iBAAiB,UAAkB,cAAc,MAAM;IACvD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;KACO,EACV,oBAAC,OAAA,EAAI,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,SAAS,EAAA,CAAQ,CAAA;IAC1F,EACN,oBAAC,OAAA;GAAI,KAAK;GAAS,OAAO,EAAE,WAAW,SAAS;aAC9C,oBAAC,kBAAA;IAAS,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,SAAS,CAAC;KACzB;IACP,CAAA;GACF;;AAOV,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;ACtHvB,IAAA,eDwHe"}
+{"version":3,"file":"index.js","names":["TabsRoot: React.FC<TabsProps>","mergedResources: HNDesignsystemTabs","onColorUsed: TabsOnColor"],"sources":["../../../src/resources/HN.Designsystem.Tabs.en-GB.json","../../../src/resources/HN.Designsystem.Tabs.nb-NO.json","../../../src/components/Tabs/resourceHelper.ts","../../../src/components/Tabs/Tabs.tsx","../../../src/components/Tabs/index.ts"],"sourcesContent":["{\n  \"ariaLabelRightButton\": \"Scroll right\",\n  \"ariaLabelLeftButton\": \"Scroll left\"\n}\n","{\n  \"ariaLabelRightButton\": \"Scroll til høyre\",\n  \"ariaLabelLeftButton\": \"Scroll til venstre\"\n}\n","import type { HNDesignsystemTabs } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemTabs => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemTabs } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\n\nimport { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport designsystemlayout from '../../scss/layout.module.scss';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemTabs>;\n  /** Overrides the default z-index of the tabs header */\n  zIndex?: number;\n}\n\nexport const TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  resources,\n  zIndex,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemTabs = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n        style={{\n          zIndex: zIndex,\n        }}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={mergedResources.ariaLabelLeftButton}\n          ariaLabelRightButton={mergedResources.ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabsRoot.displayName = 'Tabs';\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n","import Tabs from './Tabs';\nexport * from './Tabs';\nexport default Tabs;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,WACA,aACI;CACJ,MAAM,eAAe,cAAc,KAAA;CACnC,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,EAAE;CAC7D,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,cAAc,OAAuB,KAAK;CAChD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAAsC;EAC1C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,IAAIC,cAA2B;AAC/B,KAAI,UAAU,QACZ,eAAc;CAGhB,MAAM,iBAAiB,aAA2B;AAChD,MAAI,CAAC,aACH,sBAAqB,SAAS;;CAIlC,MAAM,iBAAiB,eAAe,YAAY;AAElD,QACE,qBAAC,OAAA;EAAI,WAAW,GAAW,WAAW,qBAAqB,mBAAmB,sBAAsB;EAAE,eAAa;aACjH,qBAAC,OAAA;GACC,KAAK;GACL,WAAW,GAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,QACvC,CAAC;GACF,OAAO,EACG,QACT;cAED,oBAAC,iBAAA;IACC,iBAAiB,UAAkB,cAAc,MAAM;IACvD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;KACO,EACV,oBAAC,OAAA,EAAI,WAAW,GAAW,OAAO,kBAAkB,OAAO,kBAAkB,SAAS,EAAA,CAAQ,CAAA;IAC1F,EACN,oBAAC,OAAA;GAAI,KAAK;GAAS,OAAO,EAAE,WAAW,SAAS;aAC9C,oBAAC,kBAAA;IAAS,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,SAAS,CAAC;KACzB;IACP,CAAA;GACF;;AAOV,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;ACtHvB,IAAA,eDwHe"}

package/lib/components/Tag/index.js

@@ -2,7 +2,7 @@ import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
 import { t as palette } from "../../palette.js";
 import { t as Icon_default } from "../../Icon.js";
 import { t as LazyIcon_default } from "../../LazyIcon.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
 let TagSize = /* @__PURE__ */ function(TagSize$1) {
@@ -19,7 +19,7 @@ let TagVariant = /* @__PURE__ */ function(TagVariant$1) {
 var Tag = (props) => {
 	const { children, size = TagSize.medium, color = "blueberry", svgIcon, variant = "normal", testId } = props;
 	return /* @__PURE__ */ jsxs("span", {
-		className: classNames(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {
+		className: cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {
 			[styles["tag--has-icon"]]: svgIcon,
 			[styles["tag--emphasised"]]: variant == TagVariant.emphasised
 		}),

package/lib/components/Tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Tag: React.FC<TagProps>"],"sources":["../../../src/components/Tag/constants.ts","../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/index.ts"],"sourcesContent":["export enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { TagSize, TagVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n","import Tag from './Tag';\nexport { TagSize, TagVariant } from './constants';\nexport * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,aAAA;AACA,cAAA,gBAAA;;;ACuBF,IAAMA,OAA0B,UAAS;CACvC,MAAM,EAAE,UAAU,OAAO,QAAQ,QAAQ,QAAQ,aAAa,SAAS,UAAU,UAAU,WAAW;AAOtG,QACE,qBAAC,QAAA;EAAK,WANW,WAAG,OAAO,KAAK,OAAO,QAAQ,SAAS,OAAO,QAAQ,UAAU;IAChF,OAAO,mBAAmB;IAC1B,OAAO,qBAAqB,WAAW,WAAW;GACpD,CAAC;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;aAC7E,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;GAAS,UAAU;GAAS,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAO,WAAW,OAAO;IAAa,GAEnH,oBAAC,cAAA;GAAc;GAAS,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAO,WAAW,OAAO;IAAa,GAEjH,SAAA;GACI;;AC7CX,IAAA,cDiDe"}
+{"version":3,"file":"index.js","names":["Tag: React.FC<TagProps>"],"sources":["../../../src/components/Tag/constants.ts","../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/index.ts"],"sourcesContent":["export enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { TagSize, TagVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\n  /** Sets the size of the tag. Default: medium */\n  size?: keyof typeof TagSize;\n  /** Sets the background of the tag. Default: blueberry */\n  color?: TagColors;\n  /** Adds an icon to the tag. */\n  svgIcon?: SvgIcon | IconName;\n  /* Changes the appearance of the tag. Default: normal */\n  variant?: keyof typeof TagVariant;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Tag: React.FC<TagProps> = props => {\n  const { children, size = TagSize.medium, color = 'blueberry', svgIcon, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${size}`], styles[`tag--${color}`], {\n    [styles['tag--has-icon']]: svgIcon,\n    [styles['tag--emphasised']]: variant == TagVariant.emphasised,\n  });\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {svgIcon &&\n        (typeof svgIcon === 'string' ? (\n          <LazyIcon iconName={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ) : (\n          <Icon svgIcon={svgIcon} size={IconSize.XXSmall} color={palette[`${color}800`]} className={styles.tag__icon} />\n        ))}\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n","import Tag from './Tag';\nexport { TagSize, TagVariant } from './constants';\nexport * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;;;AAAA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,aAAA;AACA,cAAA,gBAAA;;;ACuBF,IAAMA,OAA0B,UAAS;CACvC,MAAM,EAAE,UAAU,OAAO,QAAQ,QAAQ,QAAQ,aAAa,SAAS,UAAU,UAAU,WAAW;AAOtG,QACE,qBAAC,QAAA;EAAK,WANW,GAAG,OAAO,KAAK,OAAO,QAAQ,SAAS,OAAO,QAAQ,UAAU;IAChF,OAAO,mBAAmB;IAC1B,OAAO,qBAAqB,WAAW,WAAW;GACpD,CAAC;EAG6B,eAAa;EAAQ,oBAAkB,YAAY;aAC7E,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;GAAS,UAAU;GAAS,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAO,WAAW,OAAO;IAAa,GAEnH,oBAAC,cAAA;GAAc;GAAS,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAO,WAAW,OAAO;IAAa,GAEjH,SAAA;GACI;;AC7CX,IAAA,cDiDe"}

package/lib/components/Tile/index.js

@@ -5,14 +5,14 @@ import { t as Icon_default } from "../../Icon.js";
 import { t as LazyIcon_default } from "../../LazyIcon.js";
 import { t as isComponent } from "../../component.js";
 import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import tileStyles from "./styles.module.scss";
 var Title = (props) => {
 	const { compact, children, className, htmlMarkup = "span", highlighted, ref } = props;
 	return /* @__PURE__ */ jsx(htmlMarkup, {
-		className: classNames(tileStyles["tile__title"], {
+		className: cn(tileStyles["tile__title"], {
 			[tileStyles["tile__title--highlighted"]]: highlighted,
 			[tileStyles["tile__title--compact"]]: compact
 		}, className),
@@ -26,12 +26,12 @@ const Tile = (props) => {
 	const { refObject, isHovered } = usePseudoClasses();
 	const mobile = useBreakpoint() < Breakpoint.md;
 	const compact = variant === "compact";
-	const tileClasses = classNames(tileStyles.tile, {
+	const tileClasses = cn(tileStyles.tile, {
 		[tileStyles["tile--fixed"]]: fixed,
 		[tileStyles["tile--compact"]]: compact,
 		[tileStyles["tile--highlighted"]]: highlighted
 	}, className);
-	const tileTitleWrapperClasses = classNames(tileStyles["title-wrapper"], { [tileStyles["title-wrapper--compact"]]: compact });
+	const tileTitleWrapperClasses = cn(tileStyles["title-wrapper"], { [tileStyles["title-wrapper--compact"]]: compact });
 	return /* @__PURE__ */ jsxs("a", {
 		ref: mergeRefs([ref, refObject]),
 		href,

package/lib/components/Tile/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Title: React.FC<TileTitleProps>","Tile: TileCompound"],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;AAuDA,IAAMA,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;AAWhF,QACE,oBAHgB,YAGf;EAAU,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;GACvC,EACD,UACD;EAI0C;EACtC;GACS;;AAIhB,MAAM,cAAc;AAEpB,MAAaC,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,SADa,eAAe,GACN,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,WAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;EACpC,EACD,UACD;CACD,MAAM,0BAA0B,WAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,SACzC,CAAC;AAEF,QACE,qBAAC,KAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAC1B;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;;GAET,qBAAC,OAAA;IAAI,WAAW;gBACZ,YAAuB,MAAM,aAAK,IAAI,YAA2B,MAAM,iBAAS,KAChF,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;KAChC,CAAC,EACH,YAA4B,OAAO,KAAK,MAAM,IAAI,MAAM,aAAa,OAAO;KAAe;KAAsB;KAAS,CAAC,CAAA;KACxH;GACL,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAA;IAAE,WAAW,WAAW;cAAoB;KAAgB;GACpF,YAAY,oBAAC,OAAA;IAAI,WAAW,WAAW;IAAiB;KAAe;;GACtE;;AAIR,KAAK,cAAc;AACnB,KAAK,QAAQ;ACvIb,IAAA,eDyIe"}
+{"version":3,"file":"index.js","names":["Title: React.FC<TileTitleProps>","Tile: TileCompound"],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { LazyIconProps } from '../LazyIcon';\nimport type { TitleTags } from './../Title/Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { IconSize, type BaseIconProps, type IconProps } from '../Icon';\nimport LazyIcon from '../LazyIcon';\n\nimport tileStyles from './styles.module.scss';\n\nexport type TileVariants = 'normal' | 'compact';\n\ninterface TileProps extends Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick' | 'rel'> {\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**\tSets the icon to be displayed inside the tile. */\n  icon: React.ReactElement;\n  /**\tSets the title to be displayed inside the tile. */\n  title: React.ReactElement;\n  /** Toggles the highlighted style of the tile. */\n  highlighted?: boolean;\n  /** Sets the description to be displayed inside the tile. */\n  description?: string;\n  /** Sets a fixed max and min width for the tile. */\n  fixed?: boolean;\n  /** Sets the visual variant of the component */\n  variant?: TileVariants;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLAnchorElement | null>;\n}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n  /** Ref passed to the title element */\n  ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport interface TileCompound extends React.FC<TileProps> {\n  Title: React.FC<TileTitleProps>;\n}\n\nconst Title: React.FC<TileTitleProps> = props => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted, ref } = props;\n  const titleClasses = classNames(\n    tileStyles['tile__title'],\n    {\n      [tileStyles['tile__title--highlighted']]: highlighted,\n      [tileStyles['tile__title--compact']]: compact,\n    },\n    className\n  );\n  const CustomTag = htmlMarkup;\n\n  return (\n    <CustomTag className={titleClasses} ref={ref}>\n      {children}\n    </CustomTag>\n  );\n};\n\nTitle.displayName = 'Title';\n\nexport const Tile: TileCompound = props => {\n  const {\n    children,\n    icon,\n    title,\n    className = '',\n    description,\n    fixed = false,\n    highlighted = false,\n    testId,\n    target,\n    rel,\n    variant = 'normal',\n    href,\n    onClick,\n    ref,\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < Breakpoint.md;\n  const compact = variant === 'compact';\n  const tileClasses = classNames(\n    tileStyles.tile,\n    {\n      [tileStyles['tile--fixed']]: fixed,\n      [tileStyles['tile--compact']]: compact,\n      [tileStyles['tile--highlighted']]: highlighted,\n    },\n    className\n  );\n  const tileTitleWrapperClasses = classNames(tileStyles['title-wrapper'], {\n    [tileStyles['title-wrapper--compact']]: compact,\n  });\n\n  return (\n    <a\n      ref={mergeRefs([ref, refObject])}\n      href={href}\n      target={target}\n      rel={target === '_blank' ? 'noopener noreferrer' : rel}\n      className={tileClasses}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tile}\n      onClick={onClick}\n    >\n      <div className={tileTitleWrapperClasses}>\n        {(isComponent<IconProps>(icon, Icon) || isComponent<LazyIconProps>(icon, LazyIcon)) &&\n          React.cloneElement(icon as React.ReactElement<BaseIconProps>, {\n            size: mobile ? IconSize.Small : IconSize.Medium,\n            isHovered,\n            color: highlighted ? 'white' : 'black',\n          })}\n        {isComponent<TileTitleProps>(title, Tile.Title) && React.cloneElement(title, { highlighted: highlighted, compact: compact })}\n      </div>\n      {!compact && !mobile && <p className={tileStyles.tile__description}>{description}</p>}\n      {children && <div className={tileStyles.tile__children}>{children}</div>}\n    </a>\n  );\n};\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;;AAuDA,IAAMA,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;AAWhF,QACE,oBAHgB,YAGf;EAAU,WAXQ,GACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;GACvC,EACD,UACD;EAI0C;EACtC;GACS;;AAIhB,MAAM,cAAc;AAEpB,MAAaC,QAAqB,UAAS;CACzC,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,SACA,QACE;CACJ,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,SADa,eAAe,GACN,WAAW;CACvC,MAAM,UAAU,YAAY;CAC5B,MAAM,cAAc,GAClB,WAAW,MACX;GACG,WAAW,iBAAiB;GAC5B,WAAW,mBAAmB;GAC9B,WAAW,uBAAuB;EACpC,EACD,UACD;CACD,MAAM,0BAA0B,GAAW,WAAW,kBAAkB,GACrE,WAAW,4BAA4B,SACzC,CAAC;AAEF,QACE,qBAAC,KAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAC1B;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;;GAET,qBAAC,OAAA;IAAI,WAAW;gBACZ,YAAuB,MAAM,aAAK,IAAI,YAA2B,MAAM,iBAAS,KAChF,MAAM,aAAa,MAA2C;KAC5D,MAAM,SAAS,SAAS,QAAQ,SAAS;KACzC;KACA,OAAO,cAAc,UAAU;KAChC,CAAC,EACH,YAA4B,OAAO,KAAK,MAAM,IAAI,MAAM,aAAa,OAAO;KAAe;KAAsB;KAAS,CAAC,CAAA;KACxH;GACL,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAA;IAAE,WAAW,WAAW;cAAoB;KAAgB;GACpF,YAAY,oBAAC,OAAA;IAAI,WAAW,WAAW;IAAiB;KAAe;;GACtE;;AAIR,KAAK,cAAc;AACnB,KAAK,QAAQ;ACvIb,IAAA,eDyIe"}

package/lib/components/Title/Title.d.ts

@@ -12,6 +12,8 @@ export interface TitleProps {
     htmlMarkup?: TitleTags;
     /** Changes the appearance of the title. */
     appearance?: TitleAppearances;
+    /** Sets the tabIndex. Use this with caution. */
+    tabIndex?: number;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Ref passed to the heading element */

package/lib/components/Toggle/index.js

@@ -1,6 +1,6 @@
 import { n as AnalyticsId } from "../../constants2.js";
 import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useEffect, useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useAnimate } from "motion/react";
@@ -79,18 +79,18 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 		setShowToggleAnimation(true);
 		onChange?.(event);
 	};
-	const toggleContainerClassNames = classNames(styles["toggle-container"], {
+	const toggleContainerClassNames = cn(styles["toggle-container"], {
 		[styles["toggle-container--position-right"]]: togglePosition === TogglePosition.right,
 		[styles["toggle-container--with-status"]]: statusText !== void 0 && statusText !== null,
 		[styles["toggle-container--disabled"]]: disabled
 	});
-	const subLabelClassNames = classNames(styles["toggle-container__sublabel"]);
-	const statusTextClassNames = classNames(styles["toggle-container__status"], { [styles["toggle-container__status--checked"]]: checkedState });
-	const toggleClassNames = classNames(styles["toggle-container__toggle"], {
+	const subLabelClassNames = cn(styles["toggle-container__sublabel"]);
+	const statusTextClassNames = cn(styles["toggle-container__status"], { [styles["toggle-container__status--checked"]]: checkedState });
+	const toggleClassNames = cn(styles["toggle-container__toggle"], {
 		[styles["toggle-container__toggle--ignore-hover"]]: showToggleAnimation,
 		[styles["toggle-container__toggle--on-white"]]: onColor === ToggleOnColor.onwhite
 	});
-	const toggleDotClassNames = classNames(styles["toggle-container__toggle__dot"], { [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation });
+	const toggleDotClassNames = cn(styles["toggle-container__toggle__dot"], { [styles["toggle-container__toggle__dot--ignore-hover"]]: showToggleAnimation });
 	const renderToggle = () => /* @__PURE__ */ jsxs("div", {
 		className: styles["toggle-container__outer-toggle"],
 		children: [/* @__PURE__ */ jsxs("label", {
@@ -143,7 +143,7 @@ var Toggle = ({ checked = false, disabled, label, onChange, onColor = ToggleOnCo
 				className: styles["toggle-container__label"],
 				children: label.map((labelText) => {
 					return /* @__PURE__ */ jsx("span", {
-						className: classNames({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
+						className: cn({ [styles["toggle-container__label__text--subdued"]]: labelText.type === "subdued" }),
 						children: labelText.text
 					}, labelId + labelText.text);
 				})

package/lib/components/Toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/constants.ts","../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["export enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n","import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { ToggleOnColor, TogglePosition } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\n\nimport '../../scss/supernova/styles/colors.css';\n\nexport type LabelText = {\n  text: string;\n  type?: 'subdued' | 'normal';\n};\n\nexport type StatusTextType = {\n  checked: string;\n  unchecked: string;\n};\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'disabled'> {\n  /**  Determines if the Toggle is checked */\n  checked?: boolean;\n  /** Sets the label of the Toggle */\n  label: LabelText[];\n  /** Defines the color of the toggle */\n  onColor?: keyof typeof ToggleOnColor;\n  /** A text that is shown under the Toggle switch */\n  statusText?: StatusTextType;\n  /** Sets the sublabel of the Toggle */\n  subLabel?: string;\n  /** Sets the position of the toggle relative to the label */\n  togglePosition?: keyof typeof TogglePosition;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Toggle: React.FC<ToggleProps> = ({\n  checked = false,\n  disabled,\n  label,\n  onChange,\n  onColor = ToggleOnColor.onwhite,\n  statusText,\n  subLabel,\n  togglePosition = TogglePosition.left,\n  testId,\n}: ToggleProps) => {\n  const [checkedState, setCheckedState] = useState(checked);\n  const [showToggleAnimation, setShowToggleAnimation] = useState(false);\n  const [scope, animate] = useAnimate();\n  const baseId = useId();\n  const toggleId = 'toggle-' + baseId;\n  const inputId = 'input-' + baseId;\n  const labelId = 'label-' + baseId;\n  const subLabelId = 'sublabel-' + baseId;\n  const toggleRef = React.useRef<HTMLSpanElement>(null);\n  const toggleDotRef = React.useRef<HTMLSpanElement>(null);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLLabelElement>(scope);\n  const showHoveredStyling = isHovered && !showToggleAnimation;\n  const isOnWhite = onColor === ToggleOnColor.onwhite;\n  const animationDuration = disabled ? 0 : 0.2;\n  const dotBackgroundColor = disabled\n    ? 'var(--color-disabled-graphics)'\n    : checkedState\n      ? 'var(--color-action-graphics-ondark)'\n      : 'var(--core-color-neutral-700)';\n\n  const getBackgroundColor = (): string => {\n    if (disabled) {\n      return 'transparent';\n    } else if (checkedState && isActive) {\n      return 'var(--core-color-blueberry-800)';\n    } else if (checkedState) {\n      return showHoveredStyling ? 'var(--color-action-graphics-onlight-hover)' : 'var(--color-action-graphics-onlight)';\n    } else if (isOnWhite && isActive) {\n      return 'var(--core-color-neutral-400)';\n    } else if (isOnWhite) {\n      return showHoveredStyling ? 'var(--core-color-neutral-200)' : 'var(--core-color-neutral-50)';\n    } else if (isActive) {\n      return 'var(--core-color-neutral-200)';\n    } else {\n      return showHoveredStyling ? 'var(--core-color-neutral-50)' : 'var(--core-color-white)';\n    }\n  };\n\n  useEffect(() => {\n    if (showToggleAnimation) {\n      const timer = setTimeout(() => setShowToggleAnimation(false), 300);\n      return (): void => clearTimeout(timer);\n    }\n  }, [showToggleAnimation]);\n\n  useEffect(() => {\n    setCheckedState(checked);\n  }, [checked]);\n\n  useEffect(() => {\n    if (!toggleRef.current || !toggleDotRef.current) return;\n    animate(toggleRef.current, { background: getBackgroundColor() }, { duration: animationDuration, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      {\n        background: dotBackgroundColor,\n      },\n      { duration: animationDuration, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: checkedState ? 16 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: animationDuration, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive, disabled]);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    setCheckedState(event.target.checked);\n    setShowToggleAnimation(true);\n    onChange?.(event);\n  };\n\n  const toggleContainerClassNames = classNames(styles['toggle-container'], {\n    [styles['toggle-container--position-right']]: togglePosition === TogglePosition.right,\n    [styles['toggle-container--with-status']]: statusText !== undefined && statusText !== null,\n    [styles['toggle-container--disabled']]: disabled,\n  });\n\n  const subLabelClassNames = classNames(styles['toggle-container__sublabel']);\n\n  const statusTextClassNames = classNames(styles['toggle-container__status'], {\n    [styles['toggle-container__status--checked']]: checkedState,\n  });\n\n  const toggleClassNames = classNames(styles['toggle-container__toggle'], {\n    [styles['toggle-container__toggle--ignore-hover']]: showToggleAnimation,\n    [styles['toggle-container__toggle--on-white']]: onColor === ToggleOnColor.onwhite,\n  });\n\n  const toggleDotClassNames = classNames(styles['toggle-container__toggle__dot'], {\n    [styles['toggle-container__toggle__dot--ignore-hover']]: showToggleAnimation,\n  });\n\n  const renderToggle = (): React.ReactElement => (\n    <div className={styles['toggle-container__outer-toggle']}>\n      <label ref={refObject} className={styles['toggle-container__toggle-group']}>\n        <input\n          disabled={disabled}\n          id={inputId}\n          type=\"checkbox\"\n          checked={checkedState}\n          onChange={handleChange}\n          className={styles['toggle-container__input']}\n          aria-label={label.map(l => l.text).join(' ')}\n          aria-describedby={[subLabel ? subLabelId : null, statusText ? toggleId + '-status' : null].filter(Boolean).join(' ') || undefined}\n          role=\"switch\"\n        />\n        <span id={toggleId} ref={toggleRef} className={toggleClassNames} aria-hidden=\"true\">\n          <span ref={toggleDotRef} className={toggleDotClassNames} aria-hidden=\"true\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M11 2.65247L4.69877 9.34741L1 5.41836\" strokeWidth=\"2.2\" />\n            </svg>\n          </span>\n        </span>\n      </label>\n      {statusText && (\n        <span className={statusTextClassNames} id={toggleId + '-status'}>\n          {checkedState ? statusText.checked : statusText.unchecked}\n        </span>\n      )}\n    </div>\n  );\n\n  const renderLabelText = (): React.ReactElement => {\n    return (\n      <div className={styles['toggle-container__outer-label']}>\n        <span id={labelId} className={styles['toggle-container__label']}>\n          {label.map(labelText => {\n            const labelClassNames = classNames({\n              [styles['toggle-container__label__text--subdued']]: labelText.type === 'subdued',\n            });\n\n            return (\n              <span key={labelId + labelText.text} className={labelClassNames}>\n                {labelText.text}\n              </span>\n            );\n          })}\n        </span>\n        {subLabel && (\n          <div id={subLabelId} className={subLabelClassNames}>\n            {subLabel}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <div className={toggleContainerClassNames} data-testid={testId} data-analyticsid={AnalyticsId.Toggle}>\n      {togglePosition === TogglePosition.left && (\n        <>\n          {renderToggle()}\n          {renderLabelText()}\n        </>\n      )}\n      {togglePosition === TogglePosition.right && (\n        <>\n          {renderLabelText()}\n          {renderToggle()}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default Toggle;\n","import Toggle from './Toggle';\nexport { TogglePosition, ToggleOnColor } from './constants';\nexport * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/components/Validation/index.js

@@ -10,7 +10,7 @@ import { n as FormGroup_default } from "../../FormGroup.js";
 import { t as Input_default } from "../../Input2.js";
 import { t as List_default } from "../../List.js";
 import { t as RadioButton_default } from "../../RadioButton.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
@@ -37,7 +37,7 @@ var ValidationSummary = (props) => {
 	const titleId = useId();
 	const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
 	const visuallyHidden = props.visuallyHidden;
-	const summaryClasses = classNames(styles["validation__summary"], {
+	const summaryClasses = cn(styles["validation__summary"], {
 		[styles["validation__summary--visible"]]: hasErrors && !visuallyHidden,
 		[styles["validation__summary--sr-only"]]: visuallyHidden
 	});

package/lib/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>","Validation: React.FC<ValidationProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;AClBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACMf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,WAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;AChBf,MAAaC,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,YAAiC,OAAO,MAAM,SAAS,CACzD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;;AAIP,WAAW,cAAc;ACvFzB,IAAA,qBDyFe"}
+{"version":3,"file":"index.js","names":["ErrorListItem: React.FC<ErrorElementProps>","ErrorList: React.FC<ErrorListProps>","ValidationSummary: React.FC<ValidationSummaryProps>","Validation: React.FC<ValidationProps>"],"sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx","../../../src/components/Validation/index.ts"],"sourcesContent":["import type { ErrorDetails, FocusableElement } from './types';\nimport type { AnchorLinkOnClickEvent } from '../AnchorLink';\n\nimport AnchorLink from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    if (element?.focus) element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import type { ValidationErrors } from './types';\n\nimport ErrorListItem from './ErrorListItem';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ValidationErrors } from './types';\nimport type { TitleTags } from '../Title';\n\nimport ErrorList from './ErrorList';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n  /** Hides the list visually - summary is still announced by screen readers */\n  visuallyHidden?: boolean;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useId();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n  const visuallyHidden = props.visuallyHidden;\n\n  const summaryClasses = classNames(styles['validation__summary'], {\n    [styles['validation__summary--visible']]: hasErrors && !visuallyHidden,\n    [styles['validation__summary--sr-only']]: visuallyHidden,\n  });\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport type { ValidationErrors } from './types';\nimport type { FormSize } from '../../constants';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { FormGroupProps } from '../FormGroup/FormGroup';\nimport type { InputProps } from '../Input';\nimport type { RadioButtonProps } from '../RadioButton';\nimport type { SelectProps } from '../Select';\nimport type { SliderProps } from '../Slider';\nimport type { TextareaProps } from '../Textarea';\n\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport Input from '../Input';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Slider from '../Slider';\nimport Textarea from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Hides the ValidationSummary list visually - summary is still announced by screen readers */\n  visuallyHiddenSummary?: boolean;\n  /** Ref passed to the component */\n  ref?: React.Ref<HTMLDivElement | null>;\n}\n\nexport const Validation: React.FC<ValidationProps> = (props: ValidationProps) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (isComponent<React.FragmentProps>(child, React.Fragment)) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={props.ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} visuallyHidden={props.visuallyHiddenSummary} />\n    </>\n  );\n};\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n","import Validation from './Validation';\nexport * from './Validation';\nexport default Validation;\n"],"mappings":";;;;;;;;;;;;;;;;AAUA,IAAMA,iBAA6C,UAAS;CAC1D,MAAM,eAAe,OAAgC,YAAqC;AACxF,SAAO,gBAAgB;AACvB,MAAI,SAAS,MAAO,UAAS,OAAO;;AAGtC,KAAI,MAAM,MAAM,IACd,QACE,oBAAC,oBAAA;EAAW,MAAM,IAAI,MAAM;EAAQ,UAAU,MAAY,YAAY,GAAG,MAAM,MAAM,IAAI;YACtF,MAAM,MAAM;GACF;AAIjB,QAAO,oBAAA,UAAA,EAAA,UAAG,MAAM,MAAM,SAAA,CAAW;;AAGnC,IAAA,wBAAe;AClBf,IAAMC,aAAsC,UAC1C,oBAAC,cAAA,EAAA,UACE,OAAO,QAAQ,MAAM,OAAO,CAAC,KAAK,CAAC,MAAM,WACxC,oBAAC,aAAK,MAAA,EAAA,UACJ,oBAAC,uBAAA;CAAoB;CAAa;EAAS,EAAA,EAD7B,KAEJ,CACZ,EAAA,CACG;AAGT,IAAA,oBAAe;ACMf,IAAMC,qBAAsD,UAAS;CACnE,MAAM,EAAE,uBAAuB,SAAS;CACxC,MAAM,UAAU,OAAO;CAEvB,MAAM,YAAY,CAAC,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,OAAO,CAAC,SAAS;CAC1E,MAAM,iBAAiB,MAAM;CAE7B,MAAM,iBAAiB,GAAW,OAAO,wBAAwB;GAC9D,OAAO,kCAAkC,aAAa,CAAC;GACvD,OAAO,kCAAkC;EAC3C,CAAC;AAEF,QACE,qBAAC,OAAA;EACC,MAAM;EACN,eAAa;EACb,aAAW;EACX,iBAAe;EACf,mBAAiB,aAAa,MAAM,aAAa,UAAU,KAAA;EAC3D,WAAW;aAEV,aACC,qBAAA,UAAA,EAAA,UAAA,CACG,MAAM,cACL,oBAAC,eAAA;GAAM,YAAW;GAAS,IAAI;GAAS,YAAY;GAAsB,QAAQ;IAAE,WAAW;IAAG,cAAc;IAAG;aAChH,MAAM;IACD,EAEV,oBAAC,mBAAA,EAAU,QAAQ,MAAM,QAAA,CAAW,CAAA,EAAA,CACnC,EAEJ,MAAM,SAAA;GACH;;AAIV,IAAA,4BAAe;AChBf,MAAaC,cAAyC,UAA2B;CAC/E,MAAM,uBAAuB,OAAO;CAEpC,MAAM,oBAA0D,UAAwD;AACtH,SAAO,MAAM,aAAa,OAAO;GAC/B,GAAG,MAAM;GACT,uBAAuB;GACxB,CAAC;;CAGJ,MAAM,eAAe,UAA4C;AAC/D,MACE,YAA4B,OAAO,kBAAU,IAC7C,YAA2B,OAAO,iBAAS,IAC3C,YAA8B,OAAO,oBAAY,IACjD,YAA2B,OAAO,iBAAS,IAC3C,YAAwB,OAAO,cAAM,IACrC,YAAyB,OAAO,eAAO,IACvC,YAAyB,OAAO,eAAO,IACvC,2BAAuD,OAAO,wBAAwB,IACtF,2BAAuD,OAAO,aAAa,IAC3E,2BAAuD,OAAO,WAAW,CAEzE,QAAO,iBAA6C,MAAM;AAE5D,MAAI,YAAiC,OAAO,MAAM,SAAS,CACzD,QAAO,MAAM,SAAS,IAAI,MAAM,MAAM,WAAW,YAA2B;AAC1E,UAAO,YAAY,QAAM;IACzB;AAGJ,SAAO;;AAGT,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAA;EAAI,eAAa,MAAM;EAAQ,oBAAkB,YAAY;EAAY,WAAW,MAAM;EAAW,KAAK,MAAM;YAC9G,MAAM,SAAS,IAAI,MAAM,WAAW,UAA2B,YAAY,MAAM,CAAC;GAC/E,EACN,oBAAC,2BAAA;EAAkB,YAAY,MAAM;EAAY,QAAQ,MAAM;EAAQ,gBAAgB,MAAM;GAAyB,CAAA,EAAA,CACrH;;AAIP,WAAW,cAAc;ACvFzB,IAAA,qBDyFe"}

package/lib/getFilterChips.js

@@ -0,0 +1,30 @@
+import { t as Chip_default } from "./Chip.js";
+import { jsx } from "react/jsx-runtime";
+function getFilterChips({ filter, getLabel, onChipClick, onChipRemove, onOverflowChipClick, willShowCloseButton }) {
+	const maxVisible = 5;
+	const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {
+		return [raw ?? []].flat().map((v) => ({
+			key,
+			value: v
+		}));
+	});
+	const visibleChips = allChips.slice(0, maxVisible);
+	const overflowCount = allChips.length - maxVisible;
+	return [visibleChips.map(({ key, value: v }) => /* @__PURE__ */ jsx(Chip_default, {
+		onChipClick: () => onChipClick(key, v),
+		onCloseClick: () => {
+			if (onChipRemove) onChipRemove(key, v);
+			else filter.removeFilter(key, v);
+		},
+		withCloseButton: willShowCloseButton?.(key, v),
+		children: getLabel(key, v)
+	}, `${key}-${v}`)), overflowCount > 0 && /* @__PURE__ */ jsx(Chip_default, {
+		onChipClick: onOverflowChipClick,
+		withCloseButton: false,
+		children: `+${overflowCount}`
+	}, "overflow")];
+}
+var getFilterChips_default$1 = getFilterChips;
+export { getFilterChips_default$1 as t };
+
+//# sourceMappingURL=getFilterChips.js.map

package/lib/getFilterChips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFilterChips.js","names":[],"sources":["../src/components/Filter/getFilterChips/getFilterChips.tsx","../src/components/Filter/getFilterChips/index.ts"],"sourcesContent":["import type { FilterValues, UseFilterReturn } from '../useFilter';\n\nimport Chip from '../../Chip';\n\nexport interface GetFilterChipsArgs<T extends FilterValues> {\n  /** The filter instance from useFilter */\n  filter: UseFilterReturn<T>;\n  /** Look up the display label for a filter key + value */\n  getLabel: (key: keyof T, value: unknown) => string;\n  /** Called when a chip is clicked (f.ex. to open the drawer at that filter category) */\n  onChipClick: (key: keyof T, value: unknown) => void;\n  /** Called when a chip's close button is clicked. If not provided, defaults to filter.removeFilter */\n  onChipRemove?: (key: keyof T, value: unknown) => void;\n  /** Called when the overflow chip is clicked */\n  onOverflowChipClick: () => void;\n  /** Function for mapping if close button is shown on chip or not */\n  willShowCloseButton?: (key: keyof T, value?: unknown) => boolean;\n}\n\nfunction getFilterChips<T extends FilterValues>({\n  filter,\n  getLabel,\n  onChipClick,\n  onChipRemove,\n  onOverflowChipClick,\n  willShowCloseButton,\n}: GetFilterChipsArgs<T>): React.ReactNode[] {\n  const maxVisible = 5;\n\n  const allChips = Object.entries(filter.filters).flatMap(([key, raw]) => {\n    const values = [raw ?? []].flat();\n    return values.map(v => ({ key, value: v }));\n  });\n\n  const visibleChips = allChips.slice(0, maxVisible);\n  const overflowCount = allChips.length - maxVisible;\n\n  return [\n    visibleChips.map(({ key, value: v }) => (\n      <Chip\n        key={`${key}-${v}`}\n        onChipClick={() => onChipClick(key as keyof T, v)}\n        onCloseClick={() => {\n          if (onChipRemove) {\n            onChipRemove(key as keyof T, v);\n          } else {\n            filter.removeFilter(key, v);\n          }\n        }}\n        withCloseButton={willShowCloseButton?.(key, v)}\n      >\n        {getLabel(key as keyof T, v)}\n      </Chip>\n    )),\n    overflowCount > 0 && <Chip key=\"overflow\" onChipClick={onOverflowChipClick} withCloseButton={false}>{`+${overflowCount}`}</Chip>,\n  ];\n}\n\nexport default getFilterChips;\n","import getFilterChips from './getFilterChips';\nexport * from './getFilterChips';\nexport default getFilterChips;\n"],"mappings":";;AAmBA,SAAS,eAAuC,EAC9C,QACA,UACA,aACA,cACA,qBACA,uBAC2C;CAC3C,MAAM,aAAa;CAEnB,MAAM,WAAW,OAAO,QAAQ,OAAO,QAAQ,CAAC,SAAS,CAAC,KAAK,SAAS;AAEtE,SADe,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CACnB,KAAI,OAAM;GAAE;GAAK,OAAO;GAAG,EAAE;GAC3C;CAEF,MAAM,eAAe,SAAS,MAAM,GAAG,WAAW;CAClD,MAAM,gBAAgB,SAAS,SAAS;AAExC,QAAO,CACL,aAAa,KAAK,EAAE,KAAK,OAAO,QAC9B,oBAAC,cAAA;EAEC,mBAAmB,YAAY,KAAgB,EAAE;EACjD,oBAAoB;AAClB,OAAI,aACF,cAAa,KAAgB,EAAE;OAE/B,QAAO,aAAa,KAAK,EAAE;;EAG/B,iBAAiB,sBAAsB,KAAK,EAAE;YAE7C,SAAS,KAAgB,EAAE;IAXvB,GAAG,IAAI,GAAG,IAYV,CACP,EACF,gBAAgB,KAAK,oBAAC,cAAA;EAAoB,aAAa;EAAqB,iBAAiB;YAAQ,IAAI;IAA1E,WAAiG,CACjI;;ACrDH,IAAA,2BDwDe"}

package/lib/index.d.ts

@@ -15,4 +15,5 @@ export { useOutsideEvent } from './hooks/useOutsideEvent';
 export { useLanguage } from './hooks/useLanguage';
 export { isMobileUA } from './utils/mobile';
 export { uuid } from './utils/uuid';
+export { formatResource } from './utils/resource';
 export * from './constants';

package/lib/index.js

@@ -16,4 +16,5 @@ import { t as useToggle } from "./useToggle.js";
 import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
 import { t as useOutsideEvent } from "./useOutsideEvent.js";
 import { t as isMobileUA } from "./mobile.js";
-export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };
+import { t as formatResource } from "./resource.js";
+export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, formatResource, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };

package/lib/resource.js

@@ -0,0 +1,4 @@
+const formatResource = (template, ...args) => args.reduce((result, arg, index) => result.replace(`{${index}}`, String(arg)), template);
+export { formatResource as t };
+
+//# sourceMappingURL=resource.js.map

package/lib/resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource.js","names":[],"sources":["../src/utils/resource.ts"],"sourcesContent":["/**\n * Replace `{0}`, `{1}` etc. placeholders in a resource string with the supplied values.\n * @example formatResource('Siste {0} måneder', 6)  // 'Siste 6 måneder'\n * @example formatResource('{0} av {1}', 'side', 10) // 'side av 10'\n */\nexport const formatResource = (template: string, ...args: (string | number)[]): string =>\n  args.reduce<string>((result, arg, index) => result.replace(`{${index}}`, String(arg)), template);\n"],"mappings":"AAKA,MAAa,kBAAkB,UAAkB,GAAG,SAClD,KAAK,QAAgB,QAAQ,KAAK,UAAU,OAAO,QAAQ,IAAI,MAAM,IAAI,OAAO,IAAI,CAAC,EAAE,SAAS"}

package/lib/resourceHelper.js

@@ -0,0 +1,31 @@
+import { s as LanguageLocales } from "./constants2.js";
+var HN_Designsystem_Filter_en_GB_default = {
+	filterButtonText: "Find...",
+	sortLabel: "Sorting",
+	resetButtonText: "Reset",
+	showButtonText: "Show {0} results",
+	filterOverviewTitle: "Find...",
+	searchPlaceholder: "Search the list",
+	searchClearButtonAriaLabel: "Reset",
+	searchButtonAriaLabel: "Search"
+};
+var HN_Designsystem_Filter_nb_NO_default = {
+	filterButtonText: "Finn...",
+	sortLabel: "Sortering",
+	resetButtonText: "Nullstill",
+	showButtonText: "Vis {0} treff",
+	filterOverviewTitle: "Finn...",
+	searchPlaceholder: "Søk i listen",
+	searchClearButtonAriaLabel: "Nullstill",
+	searchButtonAriaLabel: "Søk"
+};
+const getResources = (language) => {
+	switch (language) {
+		case LanguageLocales.ENGLISH: return HN_Designsystem_Filter_en_GB_default;
+		case LanguageLocales.NORWEGIAN:
+		default: return HN_Designsystem_Filter_nb_NO_default;
+	}
+};
+export { getResources as t };
+
+//# sourceMappingURL=resourceHelper.js.map

package/lib/resourceHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resourceHelper.js","names":[],"sources":["../src/resources/HN.Designsystem.Filter.en-GB.json","../src/resources/HN.Designsystem.Filter.nb-NO.json","../src/components/Filter/resourceHelper.ts"],"sourcesContent":["{\n  \"filterButtonText\": \"Find...\",\n  \"sortLabel\": \"Sorting\",\n  \"resetButtonText\": \"Reset\",\n  \"showButtonText\": \"Show {0} results\",\n  \"filterOverviewTitle\": \"Find...\",\n  \"searchPlaceholder\": \"Search the list\",\n  \"searchClearButtonAriaLabel\": \"Reset\",\n  \"searchButtonAriaLabel\": \"Search\"\n}\n","{\n  \"filterButtonText\": \"Finn...\",\n  \"sortLabel\": \"Sortering\",\n  \"resetButtonText\": \"Nullstill\",\n  \"showButtonText\": \"Vis {0} treff\",\n  \"filterOverviewTitle\": \"Finn...\",\n  \"searchPlaceholder\": \"Søk i listen\",\n  \"searchClearButtonAriaLabel\": \"Nullstill\",\n  \"searchButtonAriaLabel\": \"Søk\"\n}\n","import type { HNDesignsystemFilter } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Filter.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Filter.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFilter => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAoD;AAC/E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO"}

package/lib/resources/HN.Designsystem.Drawer.nn-NO.json.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+  "ariaLabelCloseBtn": "Lukk",
+  "ariaLabelBackButton": "Gå tilbake"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Filter.en-GB.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "filterButtonText": "Find...",
+  "sortLabel": "Sorting",
+  "resetButtonText": "Reset",
+  "showButtonText": "Show {0} results",
+  "filterOverviewTitle": "Find...",
+  "searchPlaceholder": "Search the list",
+  "searchClearButtonAriaLabel": "Reset",
+  "searchButtonAriaLabel": "Search"
+}
+;
+
+export default _default;

package/lib/resources/HN.Designsystem.Filter.nb-NO.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "filterButtonText": "Finn...",
+  "sortLabel": "Sortering",
+  "resetButtonText": "Nullstill",
+  "showButtonText": "Vis {0} treff",
+  "filterOverviewTitle": "Finn...",
+  "searchPlaceholder": "Søk i listen",
+  "searchClearButtonAriaLabel": "Nullstill",
+  "searchButtonAriaLabel": "Søk"
+}
+;
+
+export default _default;

package/lib/utils/resource.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Replace `{0}`, `{1}` etc. placeholders in a resource string with the supplied values.
+ * @example formatResource('Siste {0} måneder', 6)  // 'Siste 6 måneder'
+ * @example formatResource('{0} av {1}', 'side', 10) // 'side av 10'
+ */
+export declare const formatResource: (template: string, ...args: (string | number)[]) => string;

package/lib/utils/resource.js

@@ -0,0 +1,2 @@
+import { t as formatResource } from "../resource.js";
+export { formatResource };

package/lib/utils2.js

@@ -3,14 +3,14 @@ import { t as isComponent } from "./component.js";
 import { t as Spacer_default } from "./Spacer.js";
 import { t as FormFieldTag_default } from "./FormFieldTag.js";
 import { t as StatusDot_default } from "./StatusDot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Label/styles.module.scss";
 const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
 	const mapSublabels = (hideFromScreenReader) => {
 		return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
-			const labelClasses = classNames(styles.label, styles["sublabel"], {
+			const labelClasses = cn(styles.label, styles["sublabel"], {
 				[styles["sublabel--subdued"]]: sublabelText.type === "subdued",
 				[styles["sublabel--on-dark"]]: onColor === FormOnColor.ondark
 			});
@@ -40,13 +40,13 @@ const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =
 };
 var Label = ({ afterLabelChildren, children, className, formFieldTag, htmlFor, htmlMarkup = "label", labelClassName, labelTextClassName, labelId, labelTexts, onColor = FormOnColor.onwhite, statusDot, sublabel, sublabelWrapperClassName, testId, afterLabelChildrenClassName }) => {
 	const hasChildren = children && typeof children !== "undefined";
-	const labelWrapperClasses = classNames(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
-	const mainLabelWrapperClasses = classNames({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
-	const afterLabelChildrenClasses = classNames(styles["after-label-children"], afterLabelChildrenClassName);
+	const labelWrapperClasses = cn(styles["label-wrapper"], { [styles["label-wrapper--no-bottom-margin"]]: hasChildren }, className);
+	const mainLabelWrapperClasses = cn({ [styles["label-wrapper--after-label-children"]]: afterLabelChildren });
+	const afterLabelChildrenClasses = cn(styles["after-label-children"], afterLabelChildrenClassName);
 	const mapLabels = () => {
 		if (typeof labelTexts === "undefined") return null;
 		return labelTexts.map((labelText, index) => {
-			const labelClasses = classNames(styles.label, {
+			const labelClasses = cn(styles.label, {
 				[styles["label--subdued"]]: labelText.type === "subdued",
 				[styles["label--on-dark"]]: onColor === FormOnColor.ondark
 			}, labelTextClassName);
@@ -100,14 +100,16 @@ const renderLabel = (props) => {
 	return /* @__PURE__ */ jsx(Fragment, { children: props.label && isComponent(props.label, Label_default) ? React.cloneElement(props.label, {
 		htmlFor: props.inputId,
 		htmlMarkup: props.markup || "label",
-		onColor: props.onColor
+		onColor: props.onColor,
+		className: props.className
 	}) : typeof props.label === "string" && /* @__PURE__ */ jsx(Label_default, {
 		labelTexts: [{
 			text: props.label,
 			type: "normal"
 		}],
 		htmlFor: props.inputId,
-		onColor: props.onColor
+		onColor: props.onColor,
+		className: props.className
 	}) });
 };
 const renderLabelAsParent = (props) => {
@@ -115,7 +117,7 @@ const renderLabelAsParent = (props) => {
 		htmlFor: props.inputId,
 		onColor: props.onColor,
 		children: props.children,
-		labelClassName: classNames(props.labelClassName, props.label.props.labelClassName),
+		labelClassName: cn(props.labelClassName, props.label.props.labelClassName),
 		labelTextClassName: props.labelTextClassName,
 		htmlMarkup: props.markup || "label",
 		sublabelWrapperClassName: props.sublabelWrapperClassName,