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

package/lib/InfoTeaser.js

@@ -1,8 +1,8 @@
-import { a as IconSize, n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
+import { AnalyticsId, IconSize, LanguageLocales } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
-import { t as Title_default } from "./Title2.js";
+import Title_default from "./components/Title/index.js";
 import classNames from "classnames";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,13 +15,17 @@ var HN_Designsystem_InfoTeaser_nb_NO_default = {
 	expandButtonOpen: "Vis mindre",
 	expandButtonClose: "Vis mer"
 };
-const getResources = (language) => {
+//#endregion
+//#region src/components/InfoTeaser/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_InfoTeaser_en_GB_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_InfoTeaser_nb_NO_default;
 	}
 };
+//#endregion
+//#region src/components/InfoTeaser/InfoTeaser.tsx
 var InfoTeaser = (props) => {
 	const { buttonClassName, children, className, htmlMarkup = "div", resources, svgIcon, testId, title, titleHtmlMarkup = "h2", collapsedMaxHeight } = props;
 	const [expanded, setExpanded] = useState(false);
@@ -75,7 +79,10 @@ var InfoTeaser = (props) => {
 		})]
 	});
 };
-var InfoTeaser_default$1 = InfoTeaser;
-export { InfoTeaser_default$1 as t };
+//#endregion
+//#region src/components/InfoTeaser/index.ts
+var InfoTeaser_default = InfoTeaser;
+//#endregion
+export { InfoTeaser_default as t };
 
 //# sourceMappingURL=InfoTeaser.js.map

package/lib/InfoTeaser.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTeaser.js","names":["InfoTeaser: React.FC<InfoTeaserProps>","mergedResources: HNDesignsystemInfoTeaser"],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAwD;AACnF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC+Bb,IAAMA,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAMC,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;AAID,QACE,qBAHiB,YAGhB;EAAW,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aACxF,qBAAC,OAAA;GACC,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;GACF,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,GAAW;;IAEnG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAA;KAAS,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB,GAEzF,oBAAC,cAAA;KAAc;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;MAAoB;IAExF,oBAAC,eAAA;KAAM,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;MACK;IACR,oBAAC,OAAA;KAAI,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;MACG;;IACF,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;AACb,gBAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AClGjB,IAAA,uBDsGe"}
+{"version":3,"file":"InfoTeaser.js","names":[],"sources":["../src/resources/HN.Designsystem.InfoTeaser.en-GB.json","../src/resources/HN.Designsystem.InfoTeaser.nb-NO.json","../src/components/InfoTeaser/resourceHelper.ts","../src/components/InfoTeaser/InfoTeaser.tsx","../src/components/InfoTeaser/index.ts"],"sourcesContent":["{\n  \"expandButtonOpen\": \"Show less\",\n  \"expandButtonClose\": \"Show more\"\n}\n","{\n  \"expandButtonOpen\": \"Vis mindre\",\n  \"expandButtonClose\": \"Vis mer\"\n}\n","import type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.InfoTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.InfoTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInfoTeaser => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemInfoTeaser } from '../../resources/Resources';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport LazyIcon from '../LazyIcon';\nimport Title from '../Title';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type InfoTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface InfoTeaserProps {\n  /** For overriding styling on the button */\n  buttonClassName?: string;\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Override the default max height for collapsed teaser. Default is 12.25rem */\n  collapsedMaxHeight?: string;\n  /** For overriding styling on infoteaser box */\n  className?: string;\n  /** Changes the underlying element of the wrapper */\n  htmlMarkup?: InfoTeaserTags;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInfoTeaser>;\n  /** Adds an icon */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the data-testid attribute */\n  testId?: string;\n  /** Title on top of the component */\n  title: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\nconst InfoTeaser: React.FC<InfoTeaserProps> = props => {\n  const {\n    buttonClassName,\n    children,\n    className,\n    htmlMarkup = 'div',\n    resources,\n    svgIcon,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    collapsedMaxHeight,\n  } = props;\n  const [expanded, setExpanded] = useState(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const infoteaserTextId = useId();\n\n  const mergedResources: HNDesignsystemInfoTeaser = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const WrapperTag = htmlMarkup;\n\n  return (\n    <WrapperTag className={styles.wrapper} data-testid={testId} data-analyticsid={AnalyticsId.InfoTeaser}>\n      <div\n        className={classNames(styles.infoteaser, className, {\n          [styles['infoteaser--collapsed']]: !expanded,\n        })}\n        style={{ maxHeight: !expanded ? (collapsedMaxHeight ? collapsedMaxHeight : '12.25rem') : undefined }}\n      >\n        {svgIcon &&\n          (typeof svgIcon === 'string' ? (\n            <LazyIcon iconName={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ) : (\n            <Icon svgIcon={svgIcon} size={IconSize.Small} className={styles.infoteaser__icon} />\n          ))}\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\" className={styles.infoteaser__title}>\n          {title}\n        </Title>\n        <div className={styles.infoteaser__text} aria-hidden={expanded ? false : true} id={infoteaserTextId}>\n          {children}\n        </div>\n      </div>\n      <button\n        type=\"button\"\n        className={classNames(styles.infoteaser__button, buttonClassName)}\n        onClick={() => {\n          setExpanded(!expanded);\n        }}\n        aria-expanded={expanded}\n        aria-controls={infoteaserTextId}\n      >\n        {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n      </button>\n    </WrapperTag>\n  );\n};\n\nexport default InfoTeaser;\n","import InfoTeaser from './InfoTeaser';\nexport * from './InfoTeaser';\nexport default InfoTeaser;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAwD;CACnF,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;AC+Bb,IAAM,cAAwC,UAAS;CACrD,MAAM,EACJ,iBACA,UACA,WACA,aAAa,OACb,WACA,SACA,QACA,OACA,kBAAkB,MAClB,uBACE;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,mBAAmB,OAAO;CAEhC,MAAM,kBAA4C;EAChD,GAAG;EACH,GAAG;EACJ;CAID,OACE,qBAAC,YAAD;EAAY,WAAW,OAAO;EAAS,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACE,qBAAC,OAAD;GACE,WAAW,WAAW,OAAO,YAAY,WAAW,GACjD,OAAO,2BAA2B,CAAC,UACrC,CAAC;GACF,OAAO,EAAE,WAAW,CAAC,WAAY,qBAAqB,qBAAqB,aAAc,KAAA,GAAW;aAJtG;IAMG,YACE,OAAO,YAAY,WAClB,oBAAC,kBAAD;KAAU,UAAU;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;KAAoB,CAAA,GAEzF,oBAAC,cAAD;KAAe;KAAS,MAAM,SAAS;KAAO,WAAW,OAAO;KAAoB,CAAA;IAExF,oBAAC,eAAD;KAAO,QAAO;KAAU,YAAY;KAAiB,YAAW;KAAS,WAAW,OAAO;eACxF;KACK,CAAA;IACR,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAkB,eAAa,WAAW,QAAQ;KAAM,IAAI;KAChF;KACG,CAAA;IACF;MACN,oBAAC,UAAD;GACE,MAAK;GACL,WAAW,WAAW,OAAO,oBAAoB,gBAAgB;GACjE,eAAe;IACb,YAAY,CAAC,SAAS;;GAExB,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;GACxD,CAAA,CACE;;;;;AClGjB,IAAA,qBAAe"}

package/lib/Input.js

@@ -1,35 +1,38 @@
-import { a as IconSize, i as FormSize, n as AnalyticsId, r as FormOnColor, s as LanguageLocales, t as AVERAGE_CHARACTER_WIDTH_PX } from "./constants2.js";
-import { t as getColor } from "./color.js";
-import { n as mergeRefs } from "./refs.js";
+import { AnalyticsId, FormOnColor, FormSize, IconSize, LanguageLocales } from "./constants.js";
+import { getColor } from "./theme/currys/color.js";
+import { mergeRefs } from "./utils/refs.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { t as LazyIcon_default } from "./LazyIcon.js";
-import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
-import { t as useIdWithFallback } from "./useIdWithFallback.js";
-import { t as getAriaDescribedBy } from "./accessibility.js";
+import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
+import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
-import { t as MaxCharacters_default } from "./MaxCharacters.js";
+import { t as MaxCharacters } from "./MaxCharacters.js";
 import classNames from "classnames";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Input/styles.module.scss";
-let InputTypes = /* @__PURE__ */ function(InputTypes$1) {
-	InputTypes$1["text"] = "text";
-	InputTypes$1["number"] = "number";
-	InputTypes$1["email"] = "email";
-	InputTypes$1["password"] = "password";
-	InputTypes$1["search"] = "search";
-	InputTypes$1["tel"] = "tel";
-	InputTypes$1["url"] = "url";
-	InputTypes$1["date"] = "date";
-	InputTypes$1["time"] = "time";
-	return InputTypes$1;
+//#region src/components/Input/constants.ts
+var InputTypes = /* @__PURE__ */ function(InputTypes) {
+	InputTypes["text"] = "text";
+	InputTypes["number"] = "number";
+	InputTypes["email"] = "email";
+	InputTypes["password"] = "password";
+	InputTypes["search"] = "search";
+	InputTypes["tel"] = "tel";
+	InputTypes["url"] = "url";
+	InputTypes["date"] = "date";
+	InputTypes["time"] = "time";
+	return InputTypes;
 }({});
 var HN_Designsystem_Input_en_GB_default = { characters: "characters" };
 var HN_Designsystem_Input_nb_NO_default = { characters: "tegn" };
 var HN_Designsystem_Input_nn_NO_default = { characters: "teikn" };
-const getResources = (language) => {
+//#endregion
+//#region src/components/Input/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Input_en_GB_default;
 		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Input_nn_NO_default;
@@ -37,10 +40,12 @@ const getResources = (language) => {
 		default: return HN_Designsystem_Input_nb_NO_default;
 	}
 };
-var getInputMaxWidth = (characters$3, hasIcon, iconSize) => {
+//#endregion
+//#region src/components/Input/Input.tsx
+var getInputMaxWidth = (characters, hasIcon, iconSize) => {
 	const paddingWidth = hasIcon ? "1.5rem" : "2rem";
 	const iconWidth = hasIcon ? `${iconSize}px` : "0px";
-	return `calc(${characters$3 * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
+	return `calc(${characters * 12}px + ${paddingWidth} + ${iconWidth} + 4px)`;
 };
 var Input = (props) => {
 	const { className, defaultValue, placeholder, type = InputTypes.text, name, transparent = false, icon, iconRight, inputWrapperRef, onColor = FormOnColor.onwhite, size, baseIncrementValue, label, error, errorText, errorTextId: errorTextIdProp, inputId: inputIdProp, errorWrapperClassName, testId, disabled, readOnly, autoComplete = "off", afterInputChildren, rightOfInput, width, required, onChange, onKeyDown, autoFocus, maxCharacters, inputContainerRef, resources, ref, ...rest } = props;
@@ -177,7 +182,7 @@ var Input = (props) => {
 						children: rightOfInput
 					})]
 				}),
-				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters_default, {
+				maxCharacters && /* @__PURE__ */ jsx(MaxCharacters, {
 					maxCharacters,
 					length: input.toString().length,
 					maxText: mergedResources.characters,
@@ -190,7 +195,7 @@ var Input = (props) => {
 	});
 };
 Input.displayName = "Input";
-var Input_default = Input;
-export { InputTypes as n, Input_default as t };
+//#endregion
+export { InputTypes as n, Input as t };
 
 //# sourceMappingURL=Input.js.map

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Input: React.FC<InputProps>","mergedResources: HNDesignsystemInput"],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/constants.ts","../src/resources/HN.Designsystem.Input.en-GB.json","../src/resources/HN.Designsystem.Input.nb-NO.json","../src/resources/HN.Designsystem.Input.nn-NO.json","../src/components/Input/resourceHelper.ts","../src/components/Input/Input.tsx"],"sourcesContent":["export enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n","{\n  \"characters\": \"characters\"\n}\n","{\n  \"characters\": \"tegn\"\n}\n","{\n  \"characters\": \"teikn\"\n}\n","import type { HNDesignsystemInput } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Input.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Input.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Input.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemInput => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemInput } from '../../resources/Resources';\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport { InputTypes } from './constants';\nimport { getResources } from './resourceHelper';\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, LanguageLocales } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize } from '../Icon';\nimport { renderLabel } from '../Label/utils';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      | 'disabled'\n      | 'readOnly'\n      | 'autoComplete'\n      | 'name'\n      | 'placeholder'\n      | 'defaultValue'\n      | 'required'\n      | 'value'\n      | 'min'\n      | 'max'\n      | 'aria-describedby'\n      | 'aria-labelledby'\n      | 'onBlur'\n      | 'onClick'\n      | 'onChange'\n      | 'onFocus'\n      | 'onKeyDown'\n      | 'autoFocus'\n      | 'inputMode'\n    > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon | IconName;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputContainerRef */\n  inputContainerRef?: React.RefObject<HTMLDivElement | null>;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement | null>;\n  /** Changes the color profile of the input */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the input */\n  size?: keyof typeof FormSize;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemInput>;\n  /** Ref passed to the input element */\n  ref?: React.Ref<HTMLInputElement | null>;\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input: React.FC<InputProps> = props => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputWrapperRef,\n    onColor = FormOnColor.onwhite,\n    size,\n    baseIncrementValue,\n    label,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    inputId: inputIdProp,\n    errorWrapperClassName,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete = 'off',\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    inputContainerRef,\n    resources,\n    ref,\n    ...rest\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemInput = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const breakpoint = useBreakpoint();\n  const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n  const inputId = useIdWithFallback(inputIdProp);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevDefaultValue, setPrevDefaultValue] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const numRegex = /^[0-9]$/;\n\n  if (defaultValue !== prevDefaultValue) {\n    setPrevDefaultValue(defaultValue);\n    setInput(defaultValue || '');\n  }\n\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const isLarge = size === FormSize.large;\n  const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n    [styles['input-container--with-icon--right']]: icon && iconRight,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--large']]: isLarge,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    if (!icon) {\n      return;\n    }\n\n    if (typeof icon === 'string') {\n      return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n    }\n\n    return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      if (props.onClick) props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    if (onKeyDown) onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel({ label: label, inputId: inputId, onColor: onColor as FormOnColor })}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            onClick={handleClick}\n            ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n            className={inputContainer}\n            style={{ maxWidth }}\n          >\n            {!iconRight && renderIcon()}\n            <input\n              {...rest}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputId}\n              className={inputClass}\n              ref={ref}\n              aria-describedby={getAriaDescribedBy(props, errorTextId)}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={input.toString().length}\n            maxText={mergedResources.characters}\n            onColor={onColor}\n            maxWidth={maxWidth}\n          />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/LazyIcon.js

@@ -1,11 +1,12 @@
-import { a as IconSize } from "./constants2.js";
+import { IconSize } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
-import { t as useIsServerSide } from "./useIsServerSide.js";
+import { n as _rolldown_dynamic_import_helper_default, t as ErrorBoundary } from "./ErrorBoundary.js";
+import { useIsServerSide } from "./hooks/useIsServerSide.js";
 import { Suspense, lazy, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
-	const lazyLoadIcon = (iconName$1) => lazy(() => __rolldown_dynamic_import_helper_default({
+//#region src/components/LazyIcon/LazyIcon.tsx
+var LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
+	const lazyLoadIcon = (iconName) => lazy(() => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
 		"../Icons/ActiveMonitoring.tsx": () => import("./components/Icons/ActiveMonitoring.js"),
 		"../Icons/AcupunctureBack.tsx": () => import("./components/Icons/AcupunctureBack.js"),
 		"../Icons/AlarmClock.tsx": () => import("./components/Icons/AlarmClock.js"),
@@ -356,7 +357,7 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/Zoom.tsx": () => import("./components/Icons/Zoom.js"),
 		"../Icons/ZoomInLeft.tsx": () => import("./components/Icons/ZoomInLeft.js"),
 		"../Icons/ZoomOutLeft.tsx": () => import("./components/Icons/ZoomOutLeft.js")
-	}, `../Icons/${iconName$1}.tsx`, 3));
+	}), `../Icons/${iconName}.tsx`, 3));
 	const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);
 	if (useIsServerSide()) return null;
 	const fallback = /* @__PURE__ */ jsx("svg", {
@@ -372,7 +373,7 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		width: size,
 		height: size
 	});
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		reset: iconName,
 		children: /* @__PURE__ */ jsx(Suspense, {
@@ -385,9 +386,14 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		})
 	});
 };
+//#endregion
+//#region src/components/LazyIcon/utils.ts
+/** @deprecated Use the useIsServerSide hook instead */
+var isServerSide = () => typeof document === "undefined";
+//#endregion
+//#region src/components/LazyIcon/index.ts
 var LazyIcon_default = LazyIcon;
-const isServerSide = () => typeof document === "undefined";
-var LazyIcon_default$1 = LazyIcon_default;
-export { isServerSide as n, LazyIcon as r, LazyIcon_default$1 as t };
+//#endregion
+export { isServerSide as n, LazyIcon as r, LazyIcon_default as t };
 
 //# sourceMappingURL=LazyIcon.js.map

package/lib/LazyIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIcon.js","names":["LazyIcon: React.FC<LazyIconProps>"],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":";;;;;;AAcA,MAAaA,YAAqC,EAAE,UAAU,OAAO,SAAS,OAAO,GAAG,WAAW;CACjG,MAAM,gBAAgB,eAA2D,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAA2B,YAAY,WAAS,OAAA,EAAA,CAAO;CAExI,MAAM,OAAO,cAAc,aAAa,SAAS,EAAE,CAAC,SAAS,CAAC;AAG9D,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,cAAA;IAAK,SAAS;IAAY;IAAM,GAAI;KAAQ;IACpC;GACG;;AAIpB,IAAA,mBAAe;AC7Cf,MAAa,qBAA8B,OAAO,aAAa;ACE/D,IAAA,qBAAe"}
+{"version":3,"file":"LazyIcon.js","names":[],"sources":["../src/components/LazyIcon/LazyIcon.tsx","../src/components/LazyIcon/utils.ts","../src/components/LazyIcon/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIconProps, SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\n\nimport ErrorBoundary from './ErrorBoundary';\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Icon, { IconSize } from '../Icon';\n\nexport interface LazyIconProps extends BaseIconProps {\n  // Navnet på ikonet som skal vises. Tilsvarer filnavnet til ikonet i Icons-mappen\n  iconName: IconName;\n}\n\nexport const LazyIcon: React.FC<LazyIconProps> = ({ iconName, size = IconSize.Small, ...rest }) => {\n  const lazyLoadIcon = (iconName: IconName): React.LazyExoticComponent<SvgIcon> => lazy<SvgIcon>(() => import(`../Icons/${iconName}.tsx`));\n\n  const icon = useMemo(() => lazyLoadIcon(iconName), [iconName]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 48 48\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={iconName}>\n      <Suspense fallback={fallback}>\n        <Icon svgIcon={icon} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIcon;\n","/** @deprecated Use the useIsServerSide hook instead */\nexport const isServerSide = (): boolean => typeof document === 'undefined';\n","import LazyIcon from './LazyIcon';\nexport * from './LazyIcon';\nexport * from './utils';\nexport default LazyIcon;\n"],"mappings":"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"}

package/lib/LazyIllustration.js

@@ -1,18 +1,19 @@
-import { n as ErrorBoundary_default, t as __rolldown_dynamic_import_helper_default } from "./_rolldown_dynamic_import_helper.js";
-import { t as useIsServerSide } from "./useIsServerSide.js";
+import { n as _rolldown_dynamic_import_helper_default, t as ErrorBoundary } from "./ErrorBoundary.js";
+import { useIsServerSide } from "./hooks/useIsServerSide.js";
 import { n as getIllustration } from "./utils4.js";
 import { t as Illustration_default } from "./Illustration.js";
-import { n as IllustrationSizeList } from "./IllustrationNames.js";
+import { IllustrationSizeList } from "./components/Illustrations/IllustrationNames.js";
 import { Suspense, lazy, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
-	const lazyLoadIllustration = (illustrationName$1, size$1) => {
-		const sizes = IllustrationSizeList[illustrationName$1];
+//#region src/components/LazyIllustration/LazyIllustration.tsx
+var LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
+	const lazyLoadIllustration = (illustrationName, size) => {
+		const sizes = IllustrationSizeList[illustrationName];
 		const illustrationFileName = getIllustration({
-			size: size$1,
+			size,
 			...sizes
 		});
-		return lazy(() => __rolldown_dynamic_import_helper_default({
+		return lazy(() => _rolldown_dynamic_import_helper_default(/* @__PURE__ */ Object.assign({
 			"../Illustrations/BabyMobile.tsx": () => import("./components/Illustrations/BabyMobile.js"),
 			"../Illustrations/BabyMobileMedium.tsx": () => import("./components/Illustrations/BabyMobileMedium.js"),
 			"../Illustrations/Child.tsx": () => import("./components/Illustrations/Child.js"),
@@ -37,7 +38,7 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/Support2Medium.tsx": () => import("./components/Illustrations/Support2Medium.js"),
 			"../Illustrations/Thinking.tsx": () => import("./components/Illustrations/Thinking.js"),
 			"../Illustrations/ThinkingMedium.tsx": () => import("./components/Illustrations/ThinkingMedium.js")
-		}, `../Illustrations/${illustrationFileName}.tsx`, 3));
+		}), `../Illustrations/${illustrationFileName}.tsx`, 3));
 	};
 	const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);
 	if (useIsServerSide()) return null;
@@ -54,7 +55,7 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 		width: size,
 		height: size
 	});
-	return /* @__PURE__ */ jsx(ErrorBoundary_default, {
+	return /* @__PURE__ */ jsx(ErrorBoundary, {
 		fallback,
 		reset: illustrationName,
 		children: /* @__PURE__ */ jsx(Suspense, {
@@ -67,7 +68,10 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 		})
 	});
 };
-var LazyIllustration_default$1 = LazyIllustration;
-export { LazyIllustration as n, LazyIllustration_default$1 as t };
+//#endregion
+//#region src/components/LazyIllustration/index.ts
+var LazyIllustration_default = LazyIllustration;
+//#endregion
+export { LazyIllustration as n, LazyIllustration_default as t };
 
 //# sourceMappingURL=LazyIllustration.js.map

package/lib/LazyIllustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"LazyIllustration.js","names":["LazyIllustration: React.FC<LazyIllustrationProps>"],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;AAgBA,MAAaA,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,oBAAoC,WAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE,MAAA;GAAM,GAAG;GAAO,CAAC;AAEhE,SAAO,WAAA,yCAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAAmC,oBAAoB,qBAAqB,OAAA,EAAA,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;AAG1G,KAFqB,iBAAiB,CAGpC,QAAO;CAGT,MAAM,WACJ,oBAAC,OAAA;EACC,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;GACR;AAGJ,QACE,oBAAC,uBAAA;EAAwB;EAAU,OAAO;YACxC,oBAAC,UAAA;GAAmB;aAClB,oBAAC,sBAAA;IAA2B;IAAoB;IAAM,GAAI;KAAQ;IACzD;GACG;;AC/CpB,IAAA,6BDmDe"}
+{"version":3,"file":"LazyIllustration.js","names":[],"sources":["../src/components/LazyIllustration/LazyIllustration.tsx","../src/components/LazyIllustration/index.ts"],"sourcesContent":["import { lazy, Suspense, useMemo } from 'react';\n\nimport type { BaseIllustrationProps, SvgIllustration } from '../Illustration';\nimport type { IllustrationName } from '../Illustrations/IllustrationNames';\n\nimport { useIsServerSide } from '../../hooks/useIsServerSide';\nimport Illustration from '../Illustration';\nimport { getIllustration } from '../Illustration/utils';\nimport { IllustrationSizeList } from '../Illustrations/IllustrationNames';\nimport ErrorBoundary from '../LazyIcon/ErrorBoundary';\n\nexport interface LazyIllustrationProps extends BaseIllustrationProps {\n  // Navnet på illustrasjonen som skal vises. Tilsvarer filnavnet til illustrasjonen i Icons-mappen\n  illustrationName: IllustrationName;\n}\n\nexport const LazyIllustration: React.FC<LazyIllustrationProps> = ({ illustrationName, size = 512, ...rest }) => {\n  const lazyLoadIllustration = (illustrationName: IllustrationName, size: number): React.LazyExoticComponent<SvgIllustration> => {\n    const sizes = IllustrationSizeList[illustrationName];\n    const illustrationFileName = getIllustration({ size, ...sizes });\n\n    return lazy<SvgIllustration>(() => import(`../Illustrations/${illustrationFileName}.tsx`));\n  };\n\n  const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);\n  const isServerSide = useIsServerSide();\n\n  if (isServerSide) {\n    return null;\n  }\n\n  const fallback = (\n    <svg\n      data-testid={'fallback'}\n      role={'presentation'}\n      focusable={false}\n      aria-hidden={true}\n      viewBox=\"0 0 512 512\"\n      style={{ minWidth: size, minHeight: size }}\n      width={size}\n      height={size}\n    />\n  );\n\n  return (\n    <ErrorBoundary fallback={fallback} reset={illustrationName}>\n      <Suspense fallback={fallback}>\n        <Illustration illustration={illustration} size={size} {...rest} />\n      </Suspense>\n    </ErrorBoundary>\n  );\n};\n\nexport default LazyIllustration;\n","import LazyIllustration from './LazyIllustration';\nexport * from './LazyIllustration';\nexport default LazyIllustration;\n"],"mappings":";;;;;;;;AAgBA,IAAa,oBAAqD,EAAE,kBAAkB,OAAO,KAAK,GAAG,WAAW;CAC9G,MAAM,wBAAwB,kBAAoC,SAA6D;EAC7H,MAAM,QAAQ,qBAAqB;EACnC,MAAM,uBAAuB,gBAAgB;GAAE;GAAM,GAAG;GAAO,CAAC;EAEhE,OAAO,WAA4B,wCAAA,uBAAA,OAAA;GAAA,yCAAA,OAAA;GAAA,+CAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,qCAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,2DAAA,OAAA;GAAA,iEAAA,OAAA;GAAA,2CAAA,OAAA;GAAA,iDAAA,OAAA;GAAA,kDAAA,OAAA;GAAA,wDAAA,OAAA;GAAA,uDAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,gDAAA,OAAA;GAAA,oCAAA,OAAA;GAAA,0CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,uCAAA,OAAA;GAAA,6CAAA,OAAA;GAAA,CAAA,EAAA,oBAAA,qBAAA,OAAA,EAAgD,CAAO;;CAG5F,MAAM,eAAe,cAAc,qBAAqB,kBAAkB,KAAK,EAAE,CAAC,kBAAkB,KAAK,CAAC;CAG1G,IAFqB,iBAEjB,EACF,OAAO;CAGT,MAAM,WACJ,oBAAC,OAAD;EACE,eAAa;EACb,MAAM;EACN,WAAW;EACX,eAAa;EACb,SAAQ;EACR,OAAO;GAAE,UAAU;GAAM,WAAW;GAAM;EAC1C,OAAO;EACP,QAAQ;EACR,CAAA;CAGJ,OACE,oBAAC,eAAD;EAAyB;EAAU,OAAO;YACxC,oBAAC,UAAD;GAAoB;aAClB,oBAAC,sBAAD;IAA4B;IAAoB;IAAM,GAAI;IAAQ,CAAA;GACzD,CAAA;EACG,CAAA;;;;AC/CpB,IAAA,2BAAe"}

package/lib/LinkList.js

@@ -1,24 +1,28 @@
-import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { t as ArrowUpRight_default } from "./ArrowUpRight.js";
-import { n as useLanguage } from "./useLanguage.js";
+import { AnalyticsId, LanguageLocales } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import ArrowUpRight from "./components/Icons/ArrowUpRight.js";
+import { useLanguage } from "./hooks/useLanguage.js";
 import { i as renderElementHeader } from "./ElementHeader.js";
 import { n as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
-import { t as ChevronRight_default } from "./ChevronRight.js";
+import ChevronRight from "./components/Icons/ChevronRight.js";
 import classNames from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
 var HN_Designsystem_LinkList_en_GB_default = { editMode_deleteButtonAriaLabel: "Delete" };
 var HN_Designsystem_LinkList_nb_NO_default = { editMode_deleteButtonAriaLabel: "Slett" };
-const getResources = (language) => {
+//#endregion
+//#region src/components/LinkList/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_LinkList_en_GB_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_LinkList_nb_NO_default;
 	}
 };
-const Link = (props) => {
+//#endregion
+//#region src/components/LinkList/LinkList.tsx
+var Link = (props) => {
 	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false, contentId, resources, ref, external = false, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
 	const isFill = variant === "fill";
@@ -48,8 +52,8 @@ const Link = (props) => {
 		children: image
 	});
 	let chevronIcon = void 0;
-	if (external) chevronIcon = ArrowUpRight_default;
-	else if (chevron) chevronIcon = ChevronRight_default;
+	if (external) chevronIcon = ArrowUpRight;
+	else if (chevron) chevronIcon = ChevronRight;
 	return editMode ? /* @__PURE__ */ jsx("div", {
 		id: contentId,
 		className: liClasses,
@@ -150,11 +154,14 @@ var LinkListComponent = (props) => {
 		})
 	});
 };
-const LinkList = LinkListComponent;
+var LinkList = LinkListComponent;
 LinkList.displayName = "LinkList";
 LinkList.Link = Link;
 Link.displayName = "LinkList.Link";
-var LinkList_default$1 = LinkList;
-export { Link as n, LinkList as r, LinkList_default$1 as t };
+//#endregion
+//#region src/components/LinkList/index.ts
+var LinkList_default = LinkList;
+//#endregion
+export { Link as n, LinkList as r, LinkList_default as t };
 
 //# sourceMappingURL=LinkList.js.map

package/lib/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","names":["Link: LinkType","LinkListComponent: React.FC<LinkListProps>","mergedResources: HNDesignsystemLinkList"],"sources":["../src/resources/HN.Designsystem.LinkList.en-GB.json","../src/resources/HN.Designsystem.LinkList.nb-NO.json","../src/components/LinkList/resourceHelper.ts","../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["{\n  \"editMode_deleteButtonAriaLabel\": \"Delete\"\n}\n","{\n  \"editMode_deleteButtonAriaLabel\": \"Slett\"\n}\n","import type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","names":[],"sources":["../src/resources/HN.Designsystem.LinkList.en-GB.json","../src/resources/HN.Designsystem.LinkList.nb-NO.json","../src/components/LinkList/resourceHelper.ts","../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["{\n  \"editMode_deleteButtonAriaLabel\": \"Delete\"\n}\n","{\n  \"editMode_deleteButtonAriaLabel\": \"Slett\"\n}\n","import type { HNDesignsystemLinkList } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemLinkList => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport cn from 'classnames';\n\nimport type { HNDesignsystemLinkList } from '../../resources/Resources';\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.FC<LinkProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.FC<LinkListProps> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemLinkList>;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    /** @private Turns chevron icon on/off. Overwritten by LinkList so not possible to set on LinkList.Link */\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /** Ref for lenke/knapp */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement | null>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n    /** Resources for component */\n    resources?: Partial<HNDesignsystemLinkList>;\n    /** @experimental id for content (only used in edit mode for aria-describedby) */\n    contentId?: string;\n    /** Ref passed to the list item element */\n    ref?: React.Ref<HTMLLIElement | null>;\n    /** Replaces the chevron with an arrow up right which is used for indicating external links */\n    external?: boolean;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = (props: LinkProps) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    contentId,\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    resources, // used by ListEditModeItem in LinkList\n    ref,\n    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement | null>(linkRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles['link-list__list-item--outline']]: isOutline,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  let chevronIcon = undefined;\n  if (external) {\n    chevronIcon = ArrowUpRight;\n  } else if (chevron) {\n    chevronIcon = ChevronRight;\n  }\n\n  return editMode ? (\n    <div id={contentId} className={liClasses} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      <div className={linkClasses}>\n        <div className={statusMarkerClasses}></div>\n        {renderElementHeader(children, {\n          titleHtmlMarkup: 'span',\n          size,\n          parentType: 'linklist',\n          chevronIcon: chevronIcon,\n          icon: icon ?? imageContainer,\n          highlightText,\n        })}\n      </div>\n    </div>\n  ) : (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevronIcon,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevronIcon,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n};\n\nconst LinkListComponent: React.FC<LinkListProps> = (props: LinkListProps) => {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n    resources,\n    ref,\n  } = props;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemLinkList = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode, index) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            const childResources = child.props.resources;\n            const deleteAriaLabel = childResources?.editMode_deleteButtonAriaLabel ?? mergedResources.editMode_deleteButtonAriaLabel;\n            const itemId = `linklist-item-${index}`;\n\n            return (\n              <ListEditModeItem\n                color={color}\n                variant={variant}\n                onDelete={child.props.onDelete}\n                contentId={itemId}\n                deleteButtonAriaLabel={deleteAriaLabel}\n              >\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                  contentId: itemId,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport const LinkList = LinkListComponent as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}

package/lib/List.js

@@ -1,7 +1,8 @@
-import { n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId } from "./constants.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/List/styles.module.scss";
+//#region src/components/List/List.tsx
 var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 	className: styles.list__item,
 	children
@@ -15,7 +16,10 @@ var List = ({ children, className, testId, variant = "bullet", margin }) => {
 	});
 };
 List.Item = Item;
-var List_default$1 = List;
-export { List_default$1 as t };
+//#endregion
+//#region src/components/List/index.ts
+var List_default = List;
+//#endregion
+export { List_default as t };
 
 //# sourceMappingURL=List.js.map

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["Item: React.FC<ItemProps>","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\nconst Item: React.FC<ItemProps> = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: typeof Item;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n","import List from './List';\nexport * from './List';\nexport default List;\n"],"mappings":";;;;AAYA,IAAMA,QAA6B,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBhH,IAAMC,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;AAKrG,QACE,oBALgB,CAAC,YAAY,eAAe,CAAC,SAAS,QAAQ,GAAG,OAAO,MAKvE;EAAU,WAHO,WAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAAU;EAG/E,eAAa;EAAQ,oBAAkB,YAAY;EACnF;GACS;;AAIhB,KAAK,OAAO;ACzCZ,IAAA,iBD2Ce"}
+{"version":3,"file":"List.js","names":[],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport type ListVariant = 'bullet' | 'dashed' | 'numbered' | 'alphabetical';\n\nexport interface ItemProps {\n  children: React.ReactNode;\n}\n\nconst Item: React.FC<ItemProps> = ({ children }: ItemProps) => <li className={styles.list__item}>{children}</li>;\n\nexport interface ListProps {\n  /** List contents */\n  children: React.ReactNode;\n  /** Changes the visual representation of the list. */\n  variant?: ListVariant;\n  /** Adds margin above/below list */\n  margin?: boolean;\n  /** Adds className to list element */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface ListCompound extends React.FC<ListProps> {\n  Item: typeof Item;\n}\n\nconst List: ListCompound = ({ children, className, testId, variant = 'bullet', margin }: ListProps) => {\n  const CustomTag = ['numbered', 'alphabetical'].includes(variant) ? 'ol' : 'ul';\n\n  const listClasses = classNames(styles.list, styles[`list--${variant}`], margin && styles['list--margin'], className);\n\n  return (\n    <CustomTag className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.List}>\n      {children}\n    </CustomTag>\n  );\n};\n\nList.Item = Item;\n\nexport default List;\n","import List from './List';\nexport * from './List';\nexport default List;\n"],"mappings":";;;;;AAYA,IAAM,QAA6B,EAAE,eAA0B,oBAAC,MAAD;CAAI,WAAW,OAAO;CAAa;CAAc,CAAA;AAmBhH,IAAM,QAAsB,EAAE,UAAU,WAAW,QAAQ,UAAU,UAAU,aAAwB;CAKrG,OACE,oBALgB,CAAC,YAAY,eAAe,CAAC,SAAS,QAAQ,GAAG,OAAO,MAKxE;EAAW,WAHO,WAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAGlF;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EACnF;EACS,CAAA;;AAIhB,KAAK,OAAO;;;ACzCZ,IAAA,eAAe"}