@helsenorge/designsystem-react 14.7.3 → 15.0.0-beta.0

package/lib/components/Table/index.js

@@ -1,10 +1,10 @@
-import { n as AnalyticsId } from "../../constants2.js";
-import { n as useBreakpoint } from "../../useBreakpoint.js";
-import { n as getAriaLabelAttributes } from "../../accessibility.js";
-import { t as useIsVisible } from "../../useIsVisible.js";
-import { t as useLayoutEvent } from "../../useLayoutEvent.js";
+import { AnalyticsId } from "../../constants.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { useIsVisible } from "../../hooks/useIsVisible.js";
+import { useLayoutEvent } from "../../hooks/useLayoutEvent.js";
 import { t as HorizontalScroll_default } from "../../HorizontalScroll.js";
-import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants3.js";
+import { a as TextAlign, i as SortDirection, n as ModeType, o as defaultConfig, r as ResponsiveTableVariant, s as simpleConfig, t as HeaderCategory } from "../../constants2.js";
 import { a as omitProps, i as mapChildrenWithMode, n as getCenteredOverflowTableStyle, r as getCurrentConfig, t as getBreakpointClass } from "../../utils6.js";
 import { n as TableBody } from "../../TableBody.js";
 import { n as TableCell } from "../../TableCell.js";
@@ -16,8 +16,9 @@ import { n as TableRow } from "../../TableRow.js";
 import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import styles from "./styles.module.scss";
-const Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
+import tableStyles from "./styles.module.scss";
+//#region src/components/Table/Table.tsx
+var Table = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal, scrollAriaLabel, scrollAriaLabelledById, ...rest }) => {
 	const [currentConfig, setCurrentConfig] = useState();
 	const [tableWidth, setTableWidth] = useState(0);
 	const [parentWidth, setParentWidth] = useState(0);
@@ -43,7 +44,7 @@ const Table = ({ id, testId, className, children, breakpointConfig = defaultConf
 	}, [tableWidth, tableIsVisible]);
 	const tableStyle = currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : void 0;
 	const breakpointClass = getBreakpointClass(currentConfig);
-	const tableClass = classNames(styles.table, breakpointClass, className);
+	const tableClass = classNames(tableStyles.table, breakpointClass, className);
 	const domRest = omitProps(rest, [
 		"breakpoint",
 		"variant",
@@ -72,7 +73,10 @@ const Table = ({ id, testId, className, children, breakpointConfig = defaultConf
 	});
 	return table;
 };
+//#endregion
+//#region src/components/Table/index.ts
 var Table_default = Table;
+//#endregion
 export { HeaderCategory, ModeType, ResponsiveTableVariant, SortDirection, Table, TableBody, TableCell, TableExpandedRow, TableExpanderCell, TableHead, TableHeadCell, TableRow, TextAlign, Table_default as default, defaultConfig, getBreakpointClass, getCenteredOverflowTableStyle, getCurrentConfig, mapChildrenWithMode, omitProps, simpleConfig };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Table: React.FC<Props>"],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { defaultConfig, ModeType, ResponsiveTableVariant } from './constants';\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle, mapChildrenWithMode, omitProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...(domRest as React.ComponentPropsWithoutRef<'table'>)}\n    >\n      {mapChildrenWithMode(children, mode)}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n","import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead } from './TableHead';\nexport { TableHeadCell } from './TableHeadCell';\nexport { TableRow } from './TableRow';\nexport { SortDirection, HeaderCategory, TextAlign, ResponsiveTableVariant, ModeType, defaultConfig, simpleConfig } from './constants';\n\nexport * from './Table';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6CA,MAAaA,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,UAA4B;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,WAAW;CACjE,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,iBAAiB,aAAa,UAAU,EAAE;CAChD,MAAM,aAAa,eAAe;AAElC,iBAAgB;AACd,mBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,YAAY,CAAC;IACxF;EAAC;EAAkB;EAAY;EAAY;EAAY,CAAC;AAE3D,iBAAgB;AACd,MACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,iBAElD,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;AAErE,MAAI,eAAe,YAAY,uBAAuB,iBACpD,gBAAe,SAAS,SAAS,eAAe,uBAAuB,CAAC,SAAS,EAAE;IAEpF,CAAC,eAAe,WAAW,CAAC;AAE/B,sBAAqB,eAAe,OAAO,WAAW,EAAE,CAAC,SAAS,EAAE,IAAI;AAExE,iBAAgB;AACd,MAAI,eAAe,KAAK,eACtB,eAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;IAEpE,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,WAAW,GAAG,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,cAAc;CACzD,MAAM,aAAa,WAAW,OAAO,OAAO,iBAAiB,UAAU;CACvE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;EAAiB,CAAC;CAE1H,MAAM,QACJ,oBAAC,SAAA;EACC,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;YAEJ,oBAAoB,UAAU,KAAK;GAC9B;CAGV,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;EAAwB,CAAC;AAE1G,KAAI,eAAe,YAAY,uBAAuB,iBACpD,QACE,oBAAC,0BAAA;EAAiB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;GACgB;AAIvB,QAAO;;ACzGT,IAAA,gBAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/Table.tsx","../../../src/components/Table/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Breakpoint } from '../../hooks/useBreakpoint';\n\nimport { defaultConfig, ModeType, ResponsiveTableVariant } from './constants';\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle, mapChildrenWithMode, omitProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'table'>, 'style'> {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n  ...rest\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const tableIsVisible = useIsVisible(tableRef, 0);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig, breakpoint]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  useEffect(() => {\n    if (tableWidth === 0 && tableIsVisible) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n  }, [tableWidth, tableIsVisible]);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n  const domRest = omitProps(rest as Record<string, unknown>, ['breakpoint', 'variant', 'fallbackVariant', 'headerCategory']);\n\n  const table = (\n    <table\n      className={tableClass}\n      id={id}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Table}\n      ref={tableRef}\n      style={tableStyle}\n      {...(domRest as React.ComponentPropsWithoutRef<'table'>)}\n    >\n      {mapChildrenWithMode(children, mode)}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n","import { Table } from './Table';\n\nexport { TableBody } from './TableBody';\nexport { TableCell } from './TableCell';\nexport { TableExpandedRow } from './TableExpandedRow';\nexport { TableExpanderCell } from './TableExpanderCell';\nexport { TableHead } from './TableHead';\nexport { TableHeadCell } from './TableHeadCell';\nexport { TableRow } from './TableRow';\nexport { SortDirection, HeaderCategory, TextAlign, ResponsiveTableVariant, ModeType, defaultConfig, simpleConfig } from './constants';\n\nexport * from './Table';\nexport * from './utils';\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAA0B,EACrC,IACA,QACA,WACA,UACA,mBAAmB,eACnB,OAAO,SAAS,QAChB,iBACA,wBACA,GAAG,WACC;CACJ,MAAM,CAAC,eAAe,oBAAoB,UAA4B;CACtE,MAAM,CAAC,YAAY,iBAAiB,SAAiB,EAAE;CACvD,MAAM,CAAC,aAAa,kBAAkB,SAAiB,EAAE;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAAS,OAAO,WAAW;CACjE,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,iBAAiB,aAAa,UAAU,EAAE;CAChD,MAAM,aAAa,eAAe;CAElC,gBAAgB;EACd,iBAAiB,iBAAiB,kBAAkB,YAAY,YAAY,YAAY,CAAC;IACxF;EAAC;EAAkB;EAAY;EAAY;EAAY,CAAC;CAE3D,gBAAgB;EACd,IACE,eAAe,YAAY,uBAAuB,oBAClD,eAAe,YAAY,uBAAuB,kBAElD,cAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;EAErE,IAAI,eAAe,YAAY,uBAAuB,kBACpD,eAAe,SAAS,SAAS,eAAe,uBAAuB,CAAC,SAAS,EAAE;IAEpF,CAAC,eAAe,WAAW,CAAC;CAE/B,qBAAqB,eAAe,OAAO,WAAW,EAAE,CAAC,SAAS,EAAE,IAAI;CAExE,gBAAgB;EACd,IAAI,eAAe,KAAK,gBACtB,cAAc,SAAS,SAAS,uBAAuB,CAAC,SAAS,EAAE;IAEpE,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,aACJ,eAAe,YAAY,uBAAuB,mBAAmB,8BAA8B,aAAa,WAAW,GAAG,KAAA;CAEhI,MAAM,kBAAkB,mBAAmB,cAAc;CACzD,MAAM,aAAa,WAAW,YAAO,OAAO,iBAAiB,UAAU;CACvE,MAAM,UAAU,UAAU,MAAiC;EAAC;EAAc;EAAW;EAAmB;EAAiB,CAAC;CAE1H,MAAM,QACJ,oBAAC,SAAD;EACE,WAAW;EACP;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,KAAK;EACL,OAAO;EACP,GAAK;YAEJ,oBAAoB,UAAU,KAAK;EAC9B,CAAA;CAGV,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAiB,IAAI;EAAwB,CAAC;CAE1G,IAAI,eAAe,YAAY,uBAAuB,kBACpD,OACE,oBAAC,0BAAD;EAAkB,YAAY;EAAY,QAAO;EAAoB,GAAI;YACtE;EACgB,CAAA;CAIvB,OAAO;;;;ACzGT,IAAA,gBAAe"}

package/lib/components/Tabs/index.js

@@ -1,6 +1,6 @@
-import { s as LanguageLocales } from "../../constants2.js";
-import { n as useLanguage } from "../../useLanguage.js";
-import { n as Tab_default, t as TabList_default } from "../../TabList.js";
+import { LanguageLocales } from "../../constants.js";
+import { useLanguage } from "../../hooks/useLanguage.js";
+import { n as Tab, t as TabList_default } from "../../TabList.js";
 import { t as TabPanel_default } from "../../TabPanel.js";
 import classNames from "classnames";
 import React, { useRef, useState } from "react";
@@ -15,14 +15,18 @@ var HN_Designsystem_Tabs_nb_NO_default = {
 	ariaLabelRightButton: "Scroll til høyre",
 	ariaLabelLeftButton: "Scroll til venstre"
 };
-const getResources = (language) => {
+//#endregion
+//#region src/components/Tabs/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Tabs_en_GB_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Tabs_nb_NO_default;
 	}
 };
-const TabsRoot = ({ activeTab, children, className, color = "white", containerBreakout = true, onColor = "onwhite", sticky = true, testId, resources, zIndex }) => {
+//#endregion
+//#region src/components/Tabs/Tabs.tsx
+var TabsRoot = ({ activeTab, children, className, color = "white", containerBreakout = true, onColor = "onwhite", sticky = true, testId, resources, zIndex }) => {
 	const isControlled = activeTab !== void 0;
 	const [uncontrolledValue, setUncontrolledValue] = useState(0);
 	const tabsRef = useRef(null);
@@ -70,9 +74,12 @@ const TabsRoot = ({ activeTab, children, className, color = "white", containerBr
 var Tabs = TabsRoot;
 TabsRoot.displayName = "Tabs";
 Tabs.displayName = "Tabs";
-Tabs.Tab = Tab_default;
+Tabs.Tab = Tab;
 Tabs.Tab.displayName = "Tabs.Tab";
+//#endregion
+//#region src/components/Tabs/index.ts
 var Tabs_default = Tabs;
+//#endregion
 export { TabsRoot, Tabs_default as default };
 
 //# sourceMappingURL=index.js.map

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":[],"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,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;AC+Bb,IAAa,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,MAAM,kBAAsC;EAC1C,GAHuB,aAAa,SAGjC;EACH,GAAG;EACJ;CAED,IAAI,cAA2B;CAC/B,IAAI,UAAU,SACZ,cAAc;CAGhB,MAAM,iBAAiB,aAA2B;EAChD,IAAI,CAAC,cACH,qBAAqB,SAAS;;CAIlC,MAAM,iBAAiB,eAAe,YAAY;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,sBAAsB;EAAE,eAAa;YAAnH,CACE,qBAAC,OAAD;GACE,KAAK;GACL,WAAW,WAAW,OAAO,qBAAqB,GAC/C,OAAO,8BAA8B,QACvC,CAAC;GACF,OAAO,EACG,QACT;aAPH,CASE,oBAAC,iBAAD;IACE,iBAAiB,UAAkB,cAAc,MAAM;IACvD,aAAa;IACN;IACP,SAAS;IACT,qBAAqB,gBAAgB;IACrC,sBAAsB,gBAAgB;IAErC;IACO,CAAA,EACV,oBAAC,OAAD,EAAK,WAAW,WAAW,OAAO,kBAAkB,OAAO,kBAAkB,SAAS,EAAQ,CAAA,CAC1F;MACN,oBAAC,OAAD;GAAK,KAAK;GAAS,OAAO,EAAE,WAAW,SAAS;aAC9C,oBAAC,kBAAD;IAAU,KAAK;IAAoB;IAAO,SAAS,kBAAkB;cAClE,MAAM,SAAS,QAAQ,SAAS,CAAC;IACzB,CAAA;GACP,CAAA,CACF;;;AAOV,IAAM,OAAO;AACb,SAAS,cAAc;AACvB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;;;ACtHvB,IAAA,eAAe"}

package/lib/components/Tag/Tag.d.ts

@@ -1,17 +1,7 @@
-import { PaletteNames } from '../../theme/palette';
-import { SvgIcon } from '../Icon';
-import { IconName } from '../Icons/IconNames';
-import { TagSize, TagVariant } from './constants';
-export type TagColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;
+import { TagVariant } from './constants';
 export interface TagProps {
     /** Sets the text of the tag */
     children: string;
-    /** Sets the size of the tag. Default: medium */
-    size?: keyof typeof TagSize;
-    /** Sets the background of the tag. Default: blueberry */
-    color?: TagColors;
-    /** Adds an icon to the tag. */
-    svgIcon?: SvgIcon | IconName;
     variant?: keyof typeof TagVariant;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;

package/lib/components/Tag/constants.d.ts

@@ -1,9 +1,5 @@
-export declare enum TagSize {
-    medium = "medium",
-    large = "large"
-}
 export declare enum TagVariant {
     normal = "normal",
-    oncolor = "oncolor",
-    emphasised = "emphasised"
+    accent1 = "accent1",
+    accent2 = "accent2"
 }

package/lib/components/Tag/index.d.ts

@@ -1,4 +1,4 @@
 import { default as Tag } from './Tag';
-export { TagSize, TagVariant } from './constants';
+export { TagVariant } from './constants';
 export * from './Tag';
 export default Tag;

package/lib/components/Tag/index.js

@@ -1,44 +1,29 @@
-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 { AnalyticsId } from "../../constants.js";
 import classNames from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
-let TagSize = /* @__PURE__ */ function(TagSize$1) {
-	TagSize$1["medium"] = "medium";
-	TagSize$1["large"] = "large";
-	return TagSize$1;
-}({});
-let TagVariant = /* @__PURE__ */ function(TagVariant$1) {
-	TagVariant$1["normal"] = "normal";
-	TagVariant$1["oncolor"] = "oncolor";
-	TagVariant$1["emphasised"] = "emphasised";
-	return TagVariant$1;
-}({});
+//#region src/components/Tag/Tag.tsx
 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}`], {
-			[styles["tag--has-icon"]]: svgIcon,
-			[styles["tag--emphasised"]]: variant == TagVariant.emphasised
-		}),
+	const { children, variant = "normal", testId } = props;
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(styles.tag, styles[`tag--${variant}`]),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.Tag,
-		children: [svgIcon && (typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon_default, {
-			iconName: svgIcon,
-			size: IconSize.XXSmall,
-			color: palette[`${color}800`],
-			className: styles.tag__icon
-		}) : /* @__PURE__ */ jsx(Icon_default, {
-			svgIcon,
-			size: IconSize.XXSmall,
-			color: palette[`${color}800`],
-			className: styles.tag__icon
-		})), children]
+		children
 	});
 };
+//#endregion
+//#region src/components/Tag/constants.ts
+var TagVariant = /* @__PURE__ */ function(TagVariant) {
+	TagVariant["normal"] = "normal";
+	TagVariant["accent1"] = "accent1";
+	TagVariant["accent2"] = "accent2";
+	return TagVariant;
+}({});
+//#endregion
+//#region src/components/Tag/index.ts
 var Tag_default = Tag;
-export { TagSize, TagVariant, Tag_default as default };
+//#endregion
+export { TagVariant, Tag_default as default };
 
 //# sourceMappingURL=index.js.map

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":[],"sources":["../../../src/components/Tag/Tag.tsx","../../../src/components/Tag/constants.ts","../../../src/components/Tag/index.ts"],"sourcesContent":["import cn from 'classnames';\n\nimport type { TagVariant } from './constants';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagProps {\n  /** Sets the text of the tag */\n  children: string;\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, variant = 'normal', testId } = props;\n\n  const tagClasses = cn(styles.tag, styles[`tag--${variant}`]);\n\n  return (\n    <span className={tagClasses} data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n    </span>\n  );\n};\n\nexport default Tag;\n","export enum TagVariant {\n  normal = 'normal',\n  accent1 = 'accent1',\n  accent2 = 'accent2',\n}\n","import Tag from './Tag';\nexport { TagVariant } from './constants';\nexport * from './Tag';\nexport default Tag;\n"],"mappings":";;;;;AAiBA,IAAM,OAA0B,UAAS;CACvC,MAAM,EAAE,UAAU,UAAU,UAAU,WAAW;CAIjD,OACE,oBAAC,QAAD;EAAM,WAHW,WAAG,OAAO,KAAK,OAAO,QAAQ,WAG9B;EAAY,eAAa;EAAQ,oBAAkB,YAAY;EAC7E;EACI,CAAA;;;;ACzBX,IAAY,aAAL,yBAAA,YAAA;CACL,WAAA,YAAS;CACT,WAAA,aAAU;CACV,WAAA,aAAU;;KACX;;;ACDD,IAAA,cAAe"}

package/lib/components/Tag/styles.module.scss

@@ -1,72 +1,39 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
-@use '../../scss/palette' as palette;
 @use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/spacers.css';
 
 .tag {
   $tag: &;
 
   display: inline-flex;
-  justify-content: space-between;
+  box-sizing: border-box;
   align-items: center;
   text-transform: uppercase;
-  border-width: 1px;
-  border-style: solid;
-  background-color: transparent;
-
-  // komponenten bruker ekstra liten font-size og line-height
+  border: 1px solid transparent;
+  height: 1.25rem;
   font-size: 0.875rem;
-  line-height: 1.125rem;
+  line-height: 1.25rem;
   font-weight: 600;
   border-radius: 4px;
+  padding: 0 var(--core-space-2xs);
+  padding-top: 0.1875rem;
 
-  $colors: 'blueberry', 'neutral', 'cherry', 'banana', 'kiwi', 'plum';
-
-  @each $color in $colors {
-    &--#{$color},
-    // Sørg for at fargene overstyrer dersom tag har type=button
-    &--#{$color}[type='button'] {
-      // banana og kiwi har unntak fra hovedregelen
-      @if $color == 'banana' {
-        color: map.get(palette.$palette-map, #{$color}800);
-        border-color: map.get(palette.$palette-map, #{$color}700);
-      } @else if $color == 'kiwi' {
-        color: map.get(palette.$palette-map, #{$color}900);
-        border-color: map.get(palette.$palette-map, #{$color}700);
-      } @else {
-        color: map.get(palette.$palette-map, #{$color}800);
-        border-color: map.get(palette.$palette-map, #{$color}800);
-      }
-
-      &#{$tag}--emphasised {
-        background-color: map.get(palette.$palette-map, #{$color}50);
-      }
-    }
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    height: 1.5rem;
   }
 
-  &--medium {
-    padding: 0 spacers.getSpacer(2xs);
-    min-height: 1.625rem;
-
-    &#{$tag}--has-icon {
-      padding: 0 spacers.getSpacer(2xs) 0 0.375rem;
-    }
-
-    #{$tag}__icon {
-      margin-right: spacers.getSpacer(4xs);
-    }
+  &--normal {
+    color: var(--core-color-neutral-800);
+    border-color: var(--core-color-neutral-600);
   }
 
-  &--large {
-    padding: 0 spacers.getSpacer(xs);
-    min-height: 1.875rem;
-
-    &#{$tag}--has-icon {
-      padding: spacers.getSpacer(4xs) spacers.getSpacer(xs) spacers.getSpacer(4xs) 0.375rem;
-    }
+  &--accent1 {
+    color: var(--core-color-kiwi-900);
+    border-color: var(--core-color-kiwi-700);
+  }
 
-    #{$tag}__icon {
-      margin-right: spacers.getSpacer(4xs);
-    }
+  &--accent2 {
+    color: var(--core-color-banana-800);
+    border-color: var(--core-color-banana-700);
   }
 }

package/lib/components/Tag/styles.module.scss.d.ts

@@ -1,16 +1,8 @@
 export type Styles = {
   tag: string;
-  tag__icon: string;
-  'tag--banana': string;
-  'tag--blueberry': string;
-  'tag--cherry': string;
-  'tag--emphasised': string;
-  'tag--has-icon': string;
-  'tag--kiwi': string;
-  'tag--large': string;
-  'tag--medium': string;
-  'tag--neutral': string;
-  'tag--plum': string;
+  'tag--accent1': string;
+  'tag--accent2': string;
+  'tag--normal': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/TagList/index.js

@@ -1,7 +1,8 @@
-import { n as AnalyticsId } from "../../constants2.js";
+import { AnalyticsId } from "../../constants.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import styles from "./styles.module.scss";
+//#region src/components/TagList/TagList.tsx
 var TagList = ({ children, testId }) => {
 	return /* @__PURE__ */ jsx("ul", {
 		className: styles["tag-list"],
@@ -13,7 +14,10 @@ var TagList = ({ children, testId }) => {
 		}))
 	});
 };
+//#endregion
+//#region src/components/TagList/index.ts
 var TagList_default = TagList;
+//#endregion
 export { TagList_default as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TagList: React.FC<TagListPropsProps>"],"sources":["../../../src/components/TagList/TagList.tsx","../../../src/components/TagList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n","import TagList from './TagList';\nexport * from './TagList';\nexport default TagList;\n"],"mappings":";;;;AAYA,IAAMA,WAAwC,EAAE,UAAU,aAAa;AACrE,QACE,oBAAC,MAAA;EAAG,WAAW,OAAO;EAAa,eAAa;EAAQ,oBAAkB,YAAY;YACnF,MAAM,SAAS,IAAI,WAAU,UAC5B,oBAAC,MAAA;GAAG,WAAW,OAAO;aAAoB;IAAW,CACrD;GACC;;AChBT,IAAA,kBDoBe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/TagList/TagList.tsx","../../../src/components/TagList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TagListPropsProps {\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst TagList: React.FC<TagListPropsProps> = ({ children, testId }) => {\n  return (\n    <ul className={styles['tag-list']} data-testid={testId} data-analyticsid={AnalyticsId.TagList}>\n      {React.Children.map(children, child => (\n        <li className={styles['tag-list__item']}>{child}</li>\n      ))}\n    </ul>\n  );\n};\n\nexport default TagList;\n","import TagList from './TagList';\nexport * from './TagList';\nexport default TagList;\n"],"mappings":";;;;;AAYA,IAAM,WAAwC,EAAE,UAAU,aAAa;CACrE,OACE,oBAAC,MAAD;EAAI,WAAW,OAAO;EAAa,eAAa;EAAQ,oBAAkB,YAAY;YACnF,MAAM,SAAS,IAAI,WAAU,UAC5B,oBAAC,MAAD;GAAI,WAAW,OAAO;aAAoB;GAAW,CAAA,CACrD;EACC,CAAA;;;;AChBT,IAAA,kBAAe"}

package/lib/components/Tile/index.js

@@ -1,14 +1,15 @@
-import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
-import { t as usePseudoClasses } from "../../usePseudoClasses.js";
-import { n as mergeRefs } from "../../refs.js";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { mergeRefs } from "../../utils/refs.js";
 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 { isComponent } from "../../utils/component.js";
+import { Breakpoint, useBreakpoint } from "../../hooks/useBreakpoint.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import tileStyles from "./styles.module.scss";
+//#region src/components/Tile/Tile.tsx
 var Title = (props) => {
 	const { compact, children, className, htmlMarkup = "span", highlighted, ref } = props;
 	return /* @__PURE__ */ jsx(htmlMarkup, {
@@ -21,7 +22,7 @@ var Title = (props) => {
 	});
 };
 Title.displayName = "Title";
-const Tile = (props) => {
+var Tile = (props) => {
 	const { children, icon, title, className = "", description, fixed = false, highlighted = false, testId, target, rel, variant = "normal", href, onClick, ref } = props;
 	const { refObject, isHovered } = usePseudoClasses();
 	const mobile = useBreakpoint() < Breakpoint.md;
@@ -66,7 +67,10 @@ const Tile = (props) => {
 };
 Tile.displayName = "Tile";
 Tile.Title = Title;
+//#endregion
+//#region src/components/Tile/index.ts
 var Tile_default = Tile;
+//#endregion
 export { Tile, Tile_default as default };
 
 //# sourceMappingURL=index.js.map

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":[],"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,IAAM,SAAkC,UAAS;CAC/C,MAAM,EAAE,SAAS,UAAU,WAAW,aAAa,QAAQ,aAAa,QAAQ;CAWhF,OACE,oBAAC,YAAD;EAAW,WAXQ,WACnB,WAAW,gBACX;IACG,WAAW,8BAA8B;IACzC,WAAW,0BAA0B;GACvC,EACD,UAKsB;EAAmB;EACtC;EACS,CAAA;;AAIhB,MAAM,cAAc;AAEpB,IAAa,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,eACJ,GAAa,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;CAEF,OACE,qBAAC,KAAD;EACE,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAC1B;EACE;EACR,KAAK,WAAW,WAAW,wBAAwB;EACnD,WAAW;EACX,eAAa;EACb,oBAAkB,YAAY;EACrB;YARX;GAUE,qBAAC,OAAD;IAAK,WAAW;cAAhB,EACI,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,CACxH;;GACL,CAAC,WAAW,CAAC,UAAU,oBAAC,KAAD;IAAG,WAAW,WAAW;cAAoB;IAAgB,CAAA;GACpF,YAAY,oBAAC,OAAD;IAAK,WAAW,WAAW;IAAiB;IAAe,CAAA;GACtE;;;AAIR,KAAK,cAAc;AACnB,KAAK,QAAQ;;;ACvIb,IAAA,eAAe"}

package/lib/components/Title/index.js

@@ -1,3 +1,7 @@
-import { r as instanceOfTitleMargin, t as Title } from "../../Title.js";
-import { t as Title_default } from "../../Title2.js";
+import { n as instanceOfTitleMargin, t as Title } from "../../Title.js";
+//#region src/components/Title/index.ts
+var Title_default = Title;
+//#endregion
 export { Title, Title_default as default, instanceOfTitleMargin };
+
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/Toast/index.js

@@ -1,5 +1,7 @@
-import { t as Toast_default$1 } from "../../Toast.js";
-var Toast_default = Toast_default$1;
+import { t as Toast } from "../../Toast.js";
+//#region src/components/Toast/index.ts
+var Toast_default = Toast;
+//#endregion
 export { Toast_default as default };
 
 //# sourceMappingURL=index.js.map

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,9 +1,10 @@
-import { n as mergeRefs } from "../../refs.js";
-import { t as Toast_default } from "../../Toast.js";
+import { mergeRefs } from "../../utils/refs.js";
+import { t as Toast } from "../../Toast.js";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 import styles from "./styles.module.scss";
+//#region src/components/ToastList/ToastList.tsx
 var DURATION = 8e3;
 var ToastList = (props) => {
 	const { testId, toasts = [], ref } = props;
@@ -80,7 +81,7 @@ var ToastList = (props) => {
 					duration: .4,
 					bounce: .1
 				} },
-				children: /* @__PURE__ */ jsx(Toast_default, {
+				children: /* @__PURE__ */ jsx(Toast, {
 					testId: `${testId}-${toast.id}`,
 					title: toast.title,
 					message: toast.message,
@@ -91,7 +92,10 @@ var ToastList = (props) => {
 	});
 };
 ToastList.displayName = "ToastList";
+//#endregion
+//#region src/components/ToastList/index.ts
 var ToastList_default = ToastList;
+//#endregion
 export { ToastList_default as default };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ToastList: React.FC<ToastListProps>"],"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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst DURATION = 8000;\n\nconst ToastList: React.FC<ToastListProps> = props => {\n  const { testId, toasts = [], ref } = 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":";;;;;;AAwBA,IAAM,WAAW;AAEjB,IAAMA,aAAsC,UAAS;CACnD,MAAM,EAAE,QAAQ,SAAS,EAAE,EAAE,QAAQ;CACrC,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;;AAId,UAAU,cAAc;ACtHxB,IAAA,oBDwHe"}
+{"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  /** Ref passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nconst DURATION = 8000;\n\nconst ToastList: React.FC<ToastListProps> = props => {\n  const { testId, toasts = [], ref } = 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":";;;;;;;AAwBA,IAAM,WAAW;AAEjB,IAAM,aAAsC,UAAS;CACnD,MAAM,EAAE,QAAQ,SAAS,EAAE,EAAE,QAAQ;CACrC,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;CAExE,MAAM,gBAAgB;EACpB,MAAM,YAAY,OAAO,QAAO,UAAS,CAAC,cAAc,MAAK,OAAM,GAAG,OAAO,MAAM,GAAG,IAAI,CAAC,gBAAgB,IAAI,MAAM,GAAG,CAAC;EACzH,IAAI,UAAU,SAAS,GACrB,kBAAiB,SAAQ,CAAC,GAAG,MAAM,GAAG,UAAU,CAAC;IAElD;EAAC;EAAQ;EAAe;EAAgB,CAAC;CAG5C,MAAM,oBAAoB,MAAM,aAAa,OAAqB;EAChE,kBAAiB,SAAQ,KAAK,QAAO,MAAK,EAAE,OAAO,GAAG,CAAC;EAEvD,oBAAmB,SAAQ,IAAI,IAAI,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC;EAGlD,MAAM,UAAU,YAAY,QAAQ,IAAI,GAAG;EAC3C,IAAI,SAAS;GACX,aAAa,QAAQ;GACrB,YAAY,QAAQ,OAAO,GAAG;;IAE/B,EAAE,CAAC;CAGN,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAG7B,cAAc,SAAQ,UAAS;GAC7B,IAAI,CAAC,SAAS,IAAI,MAAM,GAAG,EAAE;IAC3B,MAAM,UAAU,iBAAiB;KAC/B,kBAAkB,MAAM,GAAG;OAC1B,SAAS;IAEZ,SAAS,IAAI,MAAM,IAAI,QAAQ;;IAEjC;IACD,CAAC,eAAe,kBAAkB,CAAC;CAGtC,MAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;EAC7B,MAAM,kBAAkB,IAAI,IAAI,cAAc,KAAI,MAAK,EAAE,GAAG,CAAC;EAE7D,SAAS,SAAS,SAAS,OAAO;GAChC,IAAI,CAAC,gBAAgB,IAAI,GAAG,EAAE;IAC5B,aAAa,QAAQ;IACrB,SAAS,OAAO,GAAG;;IAErB;IACD,CAAC,cAAc,CAAC;CAGnB,MAAM,gBAAgB;EACpB,aAAmB;GACjB,YAAY,QAAQ,SAAQ,YAAW,aAAa,QAAQ,CAAC;GAC7D,YAAY,QAAQ,OAAO;;IAE5B,EAAE,CAAC;CAIN,OACE,oBAAC,WAAD;EAAS,KAHK,UAAU,CAAC,aAAa,IAAI,CAG5B;EAAS,WAAW,OAAO;EAAe,eAAa;YACnE,oBAAC,iBAAD;GAAiB,MAAK;aACnB,cAAc,KAAI,UACjB,oBAAC,OAAO,KAAR;IAEE,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,OAAD;KACE,QAAQ,GAAG,OAAO,GAAG,MAAM;KAC3B,OAAO,MAAM;KACb,SAAS,MAAM;KACf,eAAe,kBAAkB,MAAM,GAAG;KAC1C,CAAA;IACS,EAfN,MAAM,GAeA,CACb;GACc,CAAA;EACV,CAAA;;AAId,UAAU,cAAc;;;ACtHxB,IAAA,oBAAe"}