@helsenorge/designsystem-react 13.4.0 → 13.6.0

package/lib/components/Table/TableExpandedRow/index.js

@@ -1,31 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableExpandedRow, t as TableExpandedRow_default } from "../../../TableExpandedRow.js";
 export { TableExpandedRow, TableExpandedRow_default as default };

package/lib/components/Table/TableExpanderCell/index.js

@@ -1,32 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronDown.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableExpanderCell, t as TableExpanderCell_default } from "../../../TableExpanderCell.js";
 export { TableExpanderCell, TableExpanderCell_default as default };

package/lib/components/Table/TableHead/index.js

@@ -1,15 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as HeaderCategory, r as TableHead, t as TableHead_default } from "../../../TableHead.js";
 export { HeaderCategory, TableHead, TableHead_default as default };

package/lib/components/Table/TableHeadCell/index.js

@@ -1,18 +1,2 @@
-import "../../../constants2.js";
-import "../../../grid.js";
-import "../../../Icon.js";
-import "../../../useBreakpoint.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../ArrowDown.js";
-import "../../../ArrowUp.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as SortDirection, r as TableHeadCell, t as TableHeadCell_default } from "../../../TableHeadCell.js";
 export { SortDirection, TableHeadCell, TableHeadCell_default as default };

package/lib/components/Table/TableRow/index.js

@@ -1,32 +1,2 @@
-import "../../../environment.js";
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../grid.js";
-import "../../../palette.js";
-import "../../../spacers.js";
-import "../../../theme.js";
-import "../../../color.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIcons.js";
-import "../../../useBreakpoint.js";
-import "../../../useIsMobileBreakpoint.js";
-import "../../../ArrowRight.js";
-import "../../../Button.js";
-import "../../../accessibility.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../debounce.js";
-import "../../../useLayoutEvent.js";
-import "../../../useSize.js";
-import "../../../ChevronDown.js";
-import "../../../ChevronUp.js";
-import "../../../usestopPropagation.js";
-import "../../../HorizontalScroll.js";
-import "../../../device.js";
-import "../../../Table.js";
 import { n as TableRow, t as TableRow_default } from "../../../TableRow.js";
 export { TableRow, TableRow_default as default };

package/lib/components/Table/index.js

@@ -1,34 +1,3 @@
-import "../../environment.js";
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../Icon.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIcons.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../ArrowRight.js";
-import "../../Button.js";
-import "../../accessibility.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../debounce.js";
-import "../../useLayoutEvent.js";
-import "../../useSize.js";
-import "../../ChevronDown.js";
-import "../../ChevronUp.js";
-import "../../usestopPropagation.js";
-import "../../HorizontalScroll.js";
-import "../../ArrowDown.js";
-import "../../ArrowUp.js";
-import "../../device.js";
 import { a as simpleConfig, i as defaultConfig, n as ResponsiveTableVariant, r as Table, t as ModeType } from "../../Table.js";
 import { n as TableBody } from "../../TableBody.js";
 import { n as TableCell, r as TextAlign } from "../../TableCell.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.ts"],"sourcesContent":["import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell, TextAlign } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead, HeaderCategory } from './TableHead';\nexport { TableHeadCell, SortDirection } from './TableHeadCell';\nexport { TableRow } from './TableRow';\n\nexport * from './Table';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.ts"],"sourcesContent":["import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell, TextAlign } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead, HeaderCategory } from './TableHead';\nexport { TableHeadCell, SortDirection } from './TableHeadCell';\nexport { TableRow } from './TableRow';\n\nexport * from './Table';\n\nexport default Table;\n"],"mappings":";;;;;;;;AAYA,IAAA,gBAAe"}

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

@@ -1,16 +1,2 @@
-import "../../../constants2.js";
-import "../../../usePseudoClasses.js";
-import "../../../palette.js";
-import "../../../Icon.js";
-import "../../../_rolldown_dynamic_import_helper.js";
-import "../../../useIsServerSide.js";
-import "../../../LazyIcon.js";
-import "../../../component.js";
-import "../../../useIntersectionObserver.js";
-import "../../../useIsVisible.js";
-import "../../../useKeyboardEvent.js";
-import "../../../ChevronLeft.js";
-import "../../../ChevronRight.js";
 import { t as TabList_default } from "../../../TabList.js";
-import "../../../useRovingFocus.js";
 export { TabList_default as default };

package/lib/components/Tabs/index.js

@@ -1,19 +1,6 @@
 import { s as LanguageLocales } from "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../palette.js";
-import "../../Icon.js";
 import { r as useLanguage } from "../../language.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../useKeyboardEvent.js";
-import "../../ChevronLeft.js";
-import "../../ChevronRight.js";
 import { n as Tab_default, t as TabList_default } from "../../TabList.js";
-import "../../useRovingFocus.js";
 import { t as TabPanel_default } from "../../TabPanel.js";
 import React, { useRef, useState } from "react";
 import classNames from "classnames";

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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\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 { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\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  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: 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  ariaLabelRightButton,\n  ariaLabelLeftButton,\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    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEKA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmCb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,sBAAA,wBACA,qBAAA,uBACA,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;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAE/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,sBAAsB,0BAAwB,WAAW,wBAAwB,iBAAiB;EAClG,qBAAqB,yBAAuB,WAAW,uBAAuB,iBAAiB;EAChG;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;AC7HvB,IAAA,eD+He"}
+{"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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Tabs.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Tabs.nb-NO.json';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\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 { getResources } from './resourceHelper';\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { LanguageLocales } from '../../constants';\nimport { HNDesignsystemTabs } from '../../resources/Resources';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\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  /** @deprecated Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** @deprecated Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: 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  ariaLabelRightButton,\n  ariaLabelLeftButton,\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    ariaLabelRightButton: ariaLabelRightButton || resources?.ariaLabelRightButton || defaultResources.ariaLabelRightButton,\n    ariaLabelLeftButton: ariaLabelLeftButton || resources?.ariaLabelLeftButton || defaultResources.ariaLabelLeftButton,\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":";;;;;;;;;;;;;;;;;AEKA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmCb,MAAaA,YAAiC,EAC5C,WACA,UACA,WACA,QAAQ,SACR,oBAAoB,MACpB,UAAU,WACV,SAAS,MACT,QACA,sBAAA,wBACA,qBAAA,uBACA,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;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAE/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,sBAAsB,0BAAwB,WAAW,wBAAwB,iBAAiB;EAClG,qBAAqB,yBAAuB,WAAW,uBAAuB,iBAAiB;EAChG;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;AC7HvB,IAAA,eD+He"}

package/lib/components/Tag/index.js

@@ -1,8 +1,6 @@
 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 "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
 import { t as LazyIcon_default } from "../../LazyIcon.js";
 import React from "react";
 import classNames from "classnames";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Tag: React.FC<TagProps>"],"sources":["../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\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 * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAYA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,aAAA;AACA,cAAA,gBAAA;;;AAoBF,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;;ACvDX,IAAA,cD2De"}
+{"version":3,"file":"index.js","names":["Tag: React.FC<TagProps>"],"sources":["../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum TagSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum TagVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\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 * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;;;;AAYA,IAAY,UAAA,yBAAA,WAAL;AACL,WAAA,YAAA;AACA,WAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,aAAA;AACA,cAAA,gBAAA;;;AAoBF,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;;ACvDX,IAAA,cD2De"}

package/lib/components/Textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { FormOnColor } from '../../constants';
 import { HNDesignsystemTextArea } from '../../resources/Resources';
+import { FormOnColor } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export interface TextareaProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange' | 'value'> {
     /** max character limit in textarea  */

package/lib/components/Textarea/index.js

@@ -1,45 +1,2 @@
-import "../../uuid.js";
-import "../../environment.js";
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../spacing.js";
-import "../../currys.js";
-import "../../Icon.js";
-import "../../language.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
-import "../../component.js";
-import "../../useBreakpoint.js";
-import "../../useIdWithFallback.js";
-import "../../accessibility.js";
-import "../../ErrorWrapper.js";
-import "../../Spacer.js";
-import "../../Label.js";
-import "../../FormFieldTag.js";
-import "../../useElementList.js";
-import "../../useFocusableElements.js";
-import "../../useFocusToggle.js";
-import "../../focus.js";
-import "../../useFocusTrap.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../debounce.js";
-import "../../useLayoutEvent.js";
-import "../../usePrevious.js";
-import "../../useSize.js";
-import "../../useResizeObserver.js";
-import "../../useToggle.js";
-import "../../useKeyboardEvent.js";
-import "../../useOutsideEvent.js";
-import "../../mobile.js";
-import "../../src.js";
-import "../../StatusDot.js";
-import "../../MaxCharacters.js";
 import { t as Textarea_default } from "../../Textarea.js";
 export { Textarea_default as default };

package/lib/components/Tile/index.js

@@ -1,8 +1,6 @@
 import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
 import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import "../../grid.js";
 import { n as mergeRefs } from "../../refs.js";
-import "../../Icon.js";
 import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
 import React from "react";
 import classNames from "classnames";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\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}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = 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 = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\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  } = 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        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {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}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;;;AA+CA,IAAM,QAAQ,MAAM,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAW3E,QACE,oBAHgB,YAGf;EAAU,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;GACvC,EACD,UACD;EAI0C;EACtC;GACS;EAEd;AAEF,MAAM,cAAc;AAEpB,MAAa,OAAO,MAAM,YAA0C,OAAO,QAAQ;CACjF,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,YACE;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;eACb,MAAM,aAAa,MAAM;KAAE,MAAM,SAAS,SAAS,QAAQ,SAAS;KAAQ;KAAW,OAAO,cAAc,UAAU;KAAS,CAAC,EAChI,MAAM,aAAa,OAAO;KAAe;KAAsB;KAAS,CAAC,CAAA;KACtE;GACL,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAA;IAAE,WAAW,WAAW;cAAoB;KAAgB;GACpF,YAAY,oBAAC,OAAA;IAAI,WAAW,WAAW;IAAiB;KAAe;;GACtE;EAEN;AAEF,KAAK,cAAc;AACnB,KAAK,QAAQ;ACzHb,IAAA,eD2He"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Tile/Tile.tsx","../../../src/components/Tile/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { TitleTags } from './../Title/Title';\nimport { useBreakpoint, Breakpoint } from '../../hooks/useBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { IconSize } from '../Icon';\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}\n\ninterface TileTitleProps {\n  children: React.ReactNode;\n  className?: string;\n  htmlMarkup?: TitleTags;\n  highlighted?: boolean;\n  compact?: boolean;\n}\n\nexport interface TileCompound extends React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLAnchorElement>> {\n  Title: React.ForwardRefExoticComponent<TileTitleProps & React.RefAttributes<HTMLHeadingElement>>;\n}\n\nconst Title = React.forwardRef<HTMLHeadingElement, TileTitleProps>((props, ref) => {\n  const { compact, children, className, htmlMarkup = 'span', highlighted } = 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 = React.forwardRef<HTMLAnchorElement, TileProps>((props, ref) => {\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  } = 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        {React.cloneElement(icon, { size: mobile ? IconSize.Small : IconSize.Medium, isHovered, color: highlighted ? 'white' : 'black' })}\n        {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}) as TileCompound;\n\nTile.displayName = 'Tile';\nTile.Title = Title;\n\nexport default Tile;\n","import Tile from './Tile';\nexport * from './Tile';\nexport default Tile;\n"],"mappings":";;;;;;;;AA+CA,IAAM,QAAQ,MAAM,YAAgD,OAAO,QAAQ;CACjF,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,gBAAgB;AAW3E,QACE,oBAHgB,YAGf;EAAU,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;GACvC,EACD,UACD;EAI0C;EACtC;GACS;EAEd;AAEF,MAAM,cAAc;AAEpB,MAAa,OAAO,MAAM,YAA0C,OAAO,QAAQ;CACjF,MAAM,EACJ,UACA,MACA,OACA,YAAY,IACZ,aACA,QAAQ,OACR,cAAc,OACd,QACA,QACA,KACA,UAAU,UACV,MACA,YACE;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;eACb,MAAM,aAAa,MAAM;KAAE,MAAM,SAAS,SAAS,QAAQ,SAAS;KAAQ;KAAW,OAAO,cAAc,UAAU;KAAS,CAAC,EAChI,MAAM,aAAa,OAAO;KAAe;KAAsB;KAAS,CAAC,CAAA;KACtE;GACL,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAA;IAAE,WAAW,WAAW;cAAoB;KAAgB;GACpF,YAAY,oBAAC,OAAA;IAAI,WAAW,WAAW;IAAiB;KAAe;;GACtE;EAEN;AAEF,KAAK,cAAc;AACnB,KAAK,QAAQ;ACzHb,IAAA,eD2He"}

package/lib/components/Title/index.js

@@ -1,4 +1,3 @@
-import "../../constants2.js";
 import { r as instanceOfTitleMargin, t as Title } from "../../Title.js";
 import { t as Title_default } from "../../Title2.js";
 export { Title, Title_default as default, instanceOfTitleMargin };

package/lib/components/Toast/index.js

@@ -1,13 +1,3 @@
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../refs.js";
-import "../../Icon.js";
-import "../../CheckFill.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../X.js";
-import "../../Close.js";
 import { t as Toast_default$1 } from "../../Toast.js";
 var Toast_default = Toast_default$1;
 export { Toast_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toast/index.ts"],"sourcesContent":["import Toast from './Toast';\nexport * from './Toast';\nexport default Toast;\n"],"mappings":";;;;;;;;;;;AAEA,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Toast/index.ts"],"sourcesContent":["import Toast from './Toast';\nexport * from './Toast';\nexport default Toast;\n"],"mappings":";AAEA,IAAA,gBAAe"}

package/lib/components/ToastList/index.js

@@ -1,13 +1,4 @@
-import "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
 import { n as mergeRefs } from "../../refs.js";
-import "../../Icon.js";
-import "../../CheckFill.js";
-import "../../useBreakpoint.js";
-import "../../useIsMobileBreakpoint.js";
-import "../../X.js";
-import "../../Close.js";
 import { t as Toast_default } from "../../Toast.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ToastList/ToastList.tsx","../../../src/components/ToastList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { mergeRefs } from '../../utils/refs';\nimport Toast from '../Toast/Toast';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastData {\n  id: string;\n  title: string;\n  message?: string;\n}\n\nexport interface ToastListProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Array of toast data to display */\n  toasts?: ToastData[];\n}\n\nconst DURATION = 8000;\n\nconst ToastList = React.forwardRef<HTMLElement, ToastListProps>((props, ref) => {\n  const { testId, toasts = [] } = props;\n  const internalRef = React.useRef<HTMLElement | null>(null);\n  const [visibleToasts, setVisibleToasts] = React.useState<ToastData[]>([]);\n  const [removedToastIds, setRemovedToastIds] = React.useState<Set<string>>(new Set());\n  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());\n\n  React.useEffect(() => {\n    const newToasts = toasts.filter(toast => !visibleToasts.some(vt => vt.id === toast.id) && !removedToastIds.has(toast.id));\n    if (newToasts.length > 0) {\n      setVisibleToasts(prev => [...prev, ...newToasts]);\n    }\n  }, [toasts, visibleToasts, removedToastIds]);\n\n  // Handles removal of a toast\n  const handleRemoveToast = React.useCallback((id: string): void => {\n    setVisibleToasts(prev => prev.filter(t => t.id !== id));\n    // Add to removed IDs to prevent re-appearance\n    setRemovedToastIds(prev => new Set([...prev, id]));\n\n    // Clear timeout if exists\n    const timeout = timeoutRefs.current.get(id);\n    if (timeout) {\n      clearTimeout(timeout);\n      timeoutRefs.current.delete(id);\n    }\n  }, []);\n\n  // Handle auto-removal of toasts after duration\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n\n    // Set up timeouts for new visible toasts that don't have timeout yet\n    visibleToasts.forEach(toast => {\n      if (!timeouts.has(toast.id)) {\n        const timeout = setTimeout(() => {\n          handleRemoveToast(toast.id);\n        }, DURATION);\n\n        timeouts.set(toast.id, timeout);\n      }\n    });\n  }, [visibleToasts, handleRemoveToast]);\n\n  // Cleanup timeouts for removed toasts\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n    const currentToastIds = new Set(visibleToasts.map(t => t.id));\n\n    timeouts.forEach((timeout, id) => {\n      if (!currentToastIds.has(id)) {\n        clearTimeout(timeout);\n        timeouts.delete(id);\n      }\n    });\n  }, [visibleToasts]);\n\n  // Cleanup all timeouts on unmount\n  React.useEffect(() => {\n    return (): void => {\n      timeoutRefs.current.forEach(timeout => clearTimeout(timeout));\n      timeoutRefs.current.clear();\n    };\n  }, []);\n\n  const setRefs = mergeRefs([internalRef, ref]);\n\n  return (\n    <section ref={setRefs} className={styles['toast-list']} data-testid={testId}>\n      <AnimatePresence mode=\"popLayout\">\n        {visibleToasts.map(toast => (\n          <motion.div\n            key={toast.id}\n            layout\n            initial={{ opacity: 0, y: 50 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -20 }}\n            transition={{\n              layout: { type: 'spring', duration: 0.4, bounce: 0.1 },\n            }}\n          >\n            <Toast\n              testId={`${testId}-${toast.id}`}\n              title={toast.title}\n              message={toast.message}\n              onClose={() => handleRemoveToast(toast.id)}\n            />\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </section>\n  );\n});\n\nToastList.displayName = 'ToastList';\n\nexport default ToastList;\n","import ToastList from './ToastList';\nexport * from './ToastList';\nexport default ToastList;\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAM,WAAW;AAEjB,IAAM,YAAY,MAAM,YAAyC,OAAO,QAAQ;CAC9E,MAAM,EAAE,QAAQ,SAAS,EAAE,KAAK;CAChC,MAAM,cAAc,MAAM,OAA2B,KAAK;CAC1D,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAsB,EAAE,CAAC;CACzE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,yBAAsB,IAAI,KAAK,CAAC;CACpF,MAAM,cAAc,MAAM,uBAAoC,IAAI,KAAK,CAAC;AAExE,OAAM,gBAAgB;EACpB,MAAM,YAAY,OAAO,QAAO,UAAS,CAAC,cAAc,MAAK,OAAM,GAAG,OAAO,MAAM,GAAG,IAAI,CAAC,gBAAgB,IAAI,MAAM,GAAG,CAAC;AACzH,MAAI,UAAU,SAAS,EACrB,mBAAiB,SAAQ,CAAC,GAAG,MAAM,GAAG,UAAU,CAAC;IAElD;EAAC;EAAQ;EAAe;EAAgB,CAAC;CAG5C,MAAM,oBAAoB,MAAM,aAAa,OAAqB;AAChE,oBAAiB,SAAQ,KAAK,QAAO,MAAK,EAAE,OAAO,GAAG,CAAC;AAEvD,sBAAmB,SAAQ,IAAI,IAAI,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;EAGlD,MAAM,UAAU,YAAY,QAAQ,IAAI,GAAG;AAC3C,MAAI,SAAS;AACX,gBAAa,QAAQ;AACrB,eAAY,QAAQ,OAAO,GAAG;;IAE/B,EAAE,CAAC;AAGN,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAG7B,gBAAc,SAAQ,UAAS;AAC7B,OAAI,CAAC,SAAS,IAAI,MAAM,GAAG,EAAE;IAC3B,MAAM,UAAU,iBAAiB;AAC/B,uBAAkB,MAAM,GAAG;OAC1B,SAAS;AAEZ,aAAS,IAAI,MAAM,IAAI,QAAQ;;IAEjC;IACD,CAAC,eAAe,kBAAkB,CAAC;AAGtC,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAC7B,MAAM,kBAAkB,IAAI,IAAI,cAAc,KAAI,MAAK,EAAE,GAAG,CAAC;AAE7D,WAAS,SAAS,SAAS,OAAO;AAChC,OAAI,CAAC,gBAAgB,IAAI,GAAG,EAAE;AAC5B,iBAAa,QAAQ;AACrB,aAAS,OAAO,GAAG;;IAErB;IACD,CAAC,cAAc,CAAC;AAGnB,OAAM,gBAAgB;AACpB,eAAmB;AACjB,eAAY,QAAQ,SAAQ,YAAW,aAAa,QAAQ,CAAC;AAC7D,eAAY,QAAQ,OAAO;;IAE5B,EAAE,CAAC;AAIN,QACE,oBAAC,WAAA;EAAQ,KAHK,UAAU,CAAC,aAAa,IAAI,CAAC;EAGpB,WAAW,OAAO;EAAe,eAAa;YACnE,oBAAC,iBAAA;GAAgB,MAAK;aACnB,cAAc,KAAI,UACjB,oBAAC,OAAO,KAAA;IAEN,QAAA;IACA,SAAS;KAAE,SAAS;KAAG,GAAG;KAAI;IAC9B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,MAAM;KAAE,SAAS;KAAG,GAAG;KAAK;IAC5B,YAAY,EACV,QAAQ;KAAE,MAAM;KAAU,UAAU;KAAK,QAAQ;KAAK,EACvD;cAED,oBAAC,eAAA;KACC,QAAQ,GAAG,OAAO,GAAG,MAAM;KAC3B,OAAO,MAAM;KACb,SAAS,MAAM;KACf,eAAe,kBAAkB,MAAM,GAAG;MAC1C;MAdG,MAAM,GAeA,CACb;IACc;GACV;EAEZ;AAEF,UAAU,cAAc;ACpHxB,IAAA,oBDsHe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ToastList/ToastList.tsx","../../../src/components/ToastList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { mergeRefs } from '../../utils/refs';\nimport Toast from '../Toast/Toast';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastData {\n  id: string;\n  title: string;\n  message?: string;\n}\n\nexport interface ToastListProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Array of toast data to display */\n  toasts?: ToastData[];\n}\n\nconst DURATION = 8000;\n\nconst ToastList = React.forwardRef<HTMLElement, ToastListProps>((props, ref) => {\n  const { testId, toasts = [] } = props;\n  const internalRef = React.useRef<HTMLElement | null>(null);\n  const [visibleToasts, setVisibleToasts] = React.useState<ToastData[]>([]);\n  const [removedToastIds, setRemovedToastIds] = React.useState<Set<string>>(new Set());\n  const timeoutRefs = React.useRef<Map<string, NodeJS.Timeout>>(new Map());\n\n  React.useEffect(() => {\n    const newToasts = toasts.filter(toast => !visibleToasts.some(vt => vt.id === toast.id) && !removedToastIds.has(toast.id));\n    if (newToasts.length > 0) {\n      setVisibleToasts(prev => [...prev, ...newToasts]);\n    }\n  }, [toasts, visibleToasts, removedToastIds]);\n\n  // Handles removal of a toast\n  const handleRemoveToast = React.useCallback((id: string): void => {\n    setVisibleToasts(prev => prev.filter(t => t.id !== id));\n    // Add to removed IDs to prevent re-appearance\n    setRemovedToastIds(prev => new Set([...prev, id]));\n\n    // Clear timeout if exists\n    const timeout = timeoutRefs.current.get(id);\n    if (timeout) {\n      clearTimeout(timeout);\n      timeoutRefs.current.delete(id);\n    }\n  }, []);\n\n  // Handle auto-removal of toasts after duration\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n\n    // Set up timeouts for new visible toasts that don't have timeout yet\n    visibleToasts.forEach(toast => {\n      if (!timeouts.has(toast.id)) {\n        const timeout = setTimeout(() => {\n          handleRemoveToast(toast.id);\n        }, DURATION);\n\n        timeouts.set(toast.id, timeout);\n      }\n    });\n  }, [visibleToasts, handleRemoveToast]);\n\n  // Cleanup timeouts for removed toasts\n  React.useEffect(() => {\n    const timeouts = timeoutRefs.current;\n    const currentToastIds = new Set(visibleToasts.map(t => t.id));\n\n    timeouts.forEach((timeout, id) => {\n      if (!currentToastIds.has(id)) {\n        clearTimeout(timeout);\n        timeouts.delete(id);\n      }\n    });\n  }, [visibleToasts]);\n\n  // Cleanup all timeouts on unmount\n  React.useEffect(() => {\n    return (): void => {\n      timeoutRefs.current.forEach(timeout => clearTimeout(timeout));\n      timeoutRefs.current.clear();\n    };\n  }, []);\n\n  const setRefs = mergeRefs([internalRef, ref]);\n\n  return (\n    <section ref={setRefs} className={styles['toast-list']} data-testid={testId}>\n      <AnimatePresence mode=\"popLayout\">\n        {visibleToasts.map(toast => (\n          <motion.div\n            key={toast.id}\n            layout\n            initial={{ opacity: 0, y: 50 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -20 }}\n            transition={{\n              layout: { type: 'spring', duration: 0.4, bounce: 0.1 },\n            }}\n          >\n            <Toast\n              testId={`${testId}-${toast.id}`}\n              title={toast.title}\n              message={toast.message}\n              onClose={() => handleRemoveToast(toast.id)}\n            />\n          </motion.div>\n        ))}\n      </AnimatePresence>\n    </section>\n  );\n});\n\nToastList.displayName = 'ToastList';\n\nexport default ToastList;\n","import ToastList from './ToastList';\nexport * from './ToastList';\nexport default ToastList;\n"],"mappings":";;;;;;AAsBA,IAAM,WAAW;AAEjB,IAAM,YAAY,MAAM,YAAyC,OAAO,QAAQ;CAC9E,MAAM,EAAE,QAAQ,SAAS,EAAE,KAAK;CAChC,MAAM,cAAc,MAAM,OAA2B,KAAK;CAC1D,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAsB,EAAE,CAAC;CACzE,MAAM,CAAC,iBAAiB,sBAAsB,MAAM,yBAAsB,IAAI,KAAK,CAAC;CACpF,MAAM,cAAc,MAAM,uBAAoC,IAAI,KAAK,CAAC;AAExE,OAAM,gBAAgB;EACpB,MAAM,YAAY,OAAO,QAAO,UAAS,CAAC,cAAc,MAAK,OAAM,GAAG,OAAO,MAAM,GAAG,IAAI,CAAC,gBAAgB,IAAI,MAAM,GAAG,CAAC;AACzH,MAAI,UAAU,SAAS,EACrB,mBAAiB,SAAQ,CAAC,GAAG,MAAM,GAAG,UAAU,CAAC;IAElD;EAAC;EAAQ;EAAe;EAAgB,CAAC;CAG5C,MAAM,oBAAoB,MAAM,aAAa,OAAqB;AAChE,oBAAiB,SAAQ,KAAK,QAAO,MAAK,EAAE,OAAO,GAAG,CAAC;AAEvD,sBAAmB,SAAQ,IAAI,IAAI,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;EAGlD,MAAM,UAAU,YAAY,QAAQ,IAAI,GAAG;AAC3C,MAAI,SAAS;AACX,gBAAa,QAAQ;AACrB,eAAY,QAAQ,OAAO,GAAG;;IAE/B,EAAE,CAAC;AAGN,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAG7B,gBAAc,SAAQ,UAAS;AAC7B,OAAI,CAAC,SAAS,IAAI,MAAM,GAAG,EAAE;IAC3B,MAAM,UAAU,iBAAiB;AAC/B,uBAAkB,MAAM,GAAG;OAC1B,SAAS;AAEZ,aAAS,IAAI,MAAM,IAAI,QAAQ;;IAEjC;IACD,CAAC,eAAe,kBAAkB,CAAC;AAGtC,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAC7B,MAAM,kBAAkB,IAAI,IAAI,cAAc,KAAI,MAAK,EAAE,GAAG,CAAC;AAE7D,WAAS,SAAS,SAAS,OAAO;AAChC,OAAI,CAAC,gBAAgB,IAAI,GAAG,EAAE;AAC5B,iBAAa,QAAQ;AACrB,aAAS,OAAO,GAAG;;IAErB;IACD,CAAC,cAAc,CAAC;AAGnB,OAAM,gBAAgB;AACpB,eAAmB;AACjB,eAAY,QAAQ,SAAQ,YAAW,aAAa,QAAQ,CAAC;AAC7D,eAAY,QAAQ,OAAO;;IAE5B,EAAE,CAAC;AAIN,QACE,oBAAC,WAAA;EAAQ,KAHK,UAAU,CAAC,aAAa,IAAI,CAAC;EAGpB,WAAW,OAAO;EAAe,eAAa;YACnE,oBAAC,iBAAA;GAAgB,MAAK;aACnB,cAAc,KAAI,UACjB,oBAAC,OAAO,KAAA;IAEN,QAAA;IACA,SAAS;KAAE,SAAS;KAAG,GAAG;KAAI;IAC9B,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG;IAC7B,MAAM;KAAE,SAAS;KAAG,GAAG;KAAK;IAC5B,YAAY,EACV,QAAQ;KAAE,MAAM;KAAU,UAAU;KAAK,QAAQ;KAAK,EACvD;cAED,oBAAC,eAAA;KACC,QAAQ,GAAG,OAAO,GAAG,MAAM;KAC3B,OAAO,MAAM;KACb,SAAS,MAAM;KACf,eAAe,kBAAkB,MAAM,GAAG;MAC1C;MAdG,MAAM,GAeA,CACb;IACc;GACV;EAEZ;AAEF,UAAU,cAAc;ACpHxB,IAAA,oBDsHe"}

package/lib/components/Toggle/index.js

@@ -98,7 +98,7 @@ var Toggle = ({ checked = false, label, onChange, onColor = ToggleOnColor.onwhit
 				onChange: handleChange,
 				className: styles["toggle-container__input"],
 				"aria-label": label.map((l) => l.text).join(" "),
-				"aria-describedby": `${subLabel ? subLabelId + " " : void 0} ${statusText ? toggleId + "-status" : void 0}`,
+				"aria-describedby": [subLabel ? subLabelId : null, statusText ? toggleId + "-status" : null].filter(Boolean).join(" ") || void 0,
 				role: "switch"
 			}), /* @__PURE__ */ jsx("span", {
 				id: toggleId,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Toggle: React.FC<ToggleProps>"],"sources":["../../../src/components/Toggle/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\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 enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\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  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\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: 0.2, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    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  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  });\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={classNames(styles['toggle-container__toggle-group'])}>\n        <input\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 + ' ' : undefined} ${statusText ? toggleId + '-status' : 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=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\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={classNames(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 * 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/Toggle.tsx","../../../src/components/Toggle/index.ts"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react';\n\nimport classNames from 'classnames';\nimport { useAnimate } from 'motion/react';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\n\nimport styles from './styles.module.scss';\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 enum TogglePosition {\n  left = 'left',\n  right = 'right',\n}\n\nexport enum ToggleOnColor {\n  onwhite = 'onwhite',\n  onneutral = 'onneutral',\n  onblueberry = 'onblueberry',\n}\n\nexport interface ToggleProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\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  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\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: 0.2, ease: 'easeInOut' });\n    animate(\n      toggleDotRef.current,\n      { background: checkedState ? 'var(--color-action-graphics-ondark)' : 'var(--core-color-neutral-700)' },\n      { duration: 0.2, ease: 'easeInOut' }\n    );\n    animate(toggleDotRef.current, { x: showHoveredStyling ? 9 : checkedState ? 18 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n    animate('svg', { opacity: checkedState ? 1 : 0 }, { duration: 0.2, ease: 'easeInOut' });\n  }, [checkedState, showHoveredStyling, isActive]);\n\n  const getBackgroundColor = (): string => {\n    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  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  });\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={classNames(styles['toggle-container__toggle-group'])}>\n        <input\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=\"17\"\n              height=\"13\"\n              viewBox=\"0 0 17 13\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              className={styles['toggle-container__toggle__dot__icon']}\n            >\n              <path d=\"M15 2L6.80839 10.548L2 5.53145\" fill=\"none\" strokeWidth=\"3\" />\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={classNames(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 * from './Toggle';\nexport default Toggle;\n"],"mappings":"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"}

package/lib/components/Validation/index.js

@@ -1,59 +1,8 @@
-import "../../uuid.js";
-import "../../environment.js";
 import { n as AnalyticsId } from "../../constants2.js";
-import "../../usePseudoClasses.js";
-import "../../grid.js";
-import "../../palette.js";
-import "../../spacers.js";
-import "../../theme.js";
-import "../../color.js";
-import "../../spacing.js";
-import "../../currys.js";
-import "../../refs.js";
-import "../../AsChildSlot.js";
-import "../../Icon.js";
-import "../../ArrowUpRight.js";
 import { t as AnchorLink_default } from "../../AnchorLink.js";
-import "../../language.js";
-import "../../Check.js";
-import "../../_rolldown_dynamic_import_helper.js";
-import "../../useIsServerSide.js";
-import "../../LazyIcon.js";
 import { r as isComponentWithDisplayName, t as isComponent } from "../../component.js";
-import "../../useBreakpoint.js";
-import "../../useIdWithFallback.js";
-import "../../accessibility.js";
-import "../../ErrorWrapper.js";
-import "../../Spacer.js";
-import "../../Label.js";
-import "../../FormFieldTag.js";
-import "../../useElementList.js";
-import "../../useFocusableElements.js";
-import "../../useFocusToggle.js";
-import "../../focus.js";
-import "../../useFocusTrap.js";
-import "../../useIntersectionObserver.js";
-import "../../useIsVisible.js";
-import "../../debounce.js";
-import "../../useLayoutEvent.js";
-import "../../usePrevious.js";
-import "../../useSize.js";
-import "../../useResizeObserver.js";
-import "../../useToggle.js";
-import "../../useKeyboardEvent.js";
-import "../../useOutsideEvent.js";
-import "../../mobile.js";
-import "../../src.js";
-import "../../StatusDot.js";
-import "../../Checkbox.js";
 import { t as Checkbox_default } from "../../Checkbox2.js";
-import "../../Title.js";
 import { t as Title_default } from "../../Title2.js";
-import "../../ChevronDown.js";
-import "../../FormLayout.js";
-import "../../Input.js";
-import "../../MaxCharacters.js";
-import "../../RadioButton.js";
 import { t as Select_default } from "../../Select.js";
 import { t as Slider_default } from "../../Slider.js";
 import { t as Textarea_default } from "../../Textarea.js";