@helsenorge/designsystem-react 14.0.0-beta.9 → 14.1.0

package/lib/LazyIcon.js

@@ -208,6 +208,7 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/MaleDoctorCompact.tsx": () => import("./components/Icons/MaleDoctorCompact.js"),
 		"../Icons/MaleDoctorCompactFill.tsx": () => import("./components/Icons/MaleDoctorCompactFill.js"),
 		"../Icons/MaleGenitalia.tsx": () => import("./components/Icons/MaleGenitalia.js"),
+		"../Icons/MeasuringTape.tsx": () => import("./components/Icons/MeasuringTape.js"),
 		"../Icons/Medicine.tsx": () => import("./components/Icons/Medicine.js"),
 		"../Icons/MedicineWarning.tsx": () => import("./components/Icons/MedicineWarning.js"),
 		"../Icons/MentalHealthAdult.tsx": () => import("./components/Icons/MentalHealthAdult.js"),
@@ -303,6 +304,8 @@ const LazyIcon = ({ iconName, size = IconSize.Small, ...rest }) => {
 		"../Icons/SortUp.tsx": () => import("./components/Icons/SortUp.js"),
 		"../Icons/SpeechBubble.tsx": () => import("./components/Icons/SpeechBubble.js"),
 		"../Icons/Spray.tsx": () => import("./components/Icons/Spray.js"),
+		"../Icons/StarFill.tsx": () => import("./components/Icons/StarFill.js"),
+		"../Icons/StarStroke.tsx": () => import("./components/Icons/StarStroke.js"),
 		"../Icons/StickyNote.tsx": () => import("./components/Icons/StickyNote.js"),
 		"../Icons/StickyNotes.tsx": () => import("./components/Icons/StickyNotes.js"),
 		"../Icons/Stopwatch.tsx": () => import("./components/Icons/Stopwatch.js"),

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":["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"}

package/lib/LazyIllustration.js

@@ -29,10 +29,14 @@ const LazyIllustration = ({ illustrationName, size = 512, ...rest }) => {
 			"../Illustrations/HealthcarePersonnelSmall.tsx": () => import("./components/Illustrations/HealthcarePersonnelSmall.js"),
 			"../Illustrations/ReadLetters.tsx": () => import("./components/Illustrations/ReadLetters.js"),
 			"../Illustrations/ReadLettersMedium.tsx": () => import("./components/Illustrations/ReadLettersMedium.js"),
+			"../Illustrations/Stork.tsx": () => import("./components/Illustrations/Stork.js"),
+			"../Illustrations/StorkMedium.tsx": () => import("./components/Illustrations/StorkMedium.js"),
 			"../Illustrations/Stroller.tsx": () => import("./components/Illustrations/Stroller.js"),
 			"../Illustrations/StrollerMedium.tsx": () => import("./components/Illustrations/StrollerMedium.js"),
 			"../Illustrations/Support2.tsx": () => import("./components/Illustrations/Support2.js"),
-			"../Illustrations/Support2Medium.tsx": () => import("./components/Illustrations/Support2Medium.js")
+			"../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));
 	};
 	const illustration = useMemo(() => lazyLoadIllustration(illustrationName, size), [illustrationName, size]);

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":["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"}

package/lib/LinkList.js

@@ -5,7 +5,7 @@ import { n as useLanguage } from "./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 classNames from "classnames";
+import cn from "classnames";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
@@ -25,12 +25,12 @@ const Link = (props) => {
 	const isFillNegative = variant === "fill-negative";
 	const isOutline = variant === "outline";
 	const isLine = variant === "line";
-	const liClasses = classNames(LinkListStyles["link-list"], {
+	const liClasses = cn(LinkListStyles["link-list"], {
 		[LinkListStyles["link-list__list-item--line"]]: isLine,
 		[LinkListStyles["link-list__list-item--outline"]]: isOutline,
 		[LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline
 	});
-	const linkClasses = classNames(LinkListStyles["link-list__anchor"], LinkListStyles[`link-list__anchor--${color}`], {
+	const linkClasses = cn(LinkListStyles["link-list__anchor"], LinkListStyles[`link-list__anchor--${color}`], {
 		[LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,
 		[LinkListStyles["link-list__anchor--fill"]]: isFill,
 		[LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,
@@ -42,7 +42,7 @@ const Link = (props) => {
 		[LinkListStyles["link-list__anchor--button"]]: htmlMarkup === "button",
 		[LinkListStyles["link-list__anchor--new"]]: status === "new"
 	}, className);
-	const statusMarkerClasses = classNames(LinkListStyles["link-list__status-marker"], { [LinkListStyles["link-list__status-marker--new"]]: status === "new" });
+	const statusMarkerClasses = cn(LinkListStyles["link-list__status-marker"], { [LinkListStyles["link-list__status-marker--new"]]: status === "new" });
 	const imageContainer = /* @__PURE__ */ jsx("span", {
 		className: LinkListStyles["link-list__image-container"],
 		children: image
@@ -112,7 +112,7 @@ var LinkListComponent = (props) => {
 	};
 	return /* @__PURE__ */ jsx("ul", {
 		ref,
-		className: classNames(LinkListStyles["link-list"], className, {
+		className: cn(LinkListStyles["link-list"], className, {
 			[LinkListStyles[`link-list--outline--${color}`]]: variant === "outline",
 			[listEditModeWrapperClassnames]: editMode
 		}),

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":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAsD;AACjF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC4Fb,MAAaA,QAAkB,UAAqB;CAClD,MAAM,EACJ,UACA,YAAY,IACZ,QAAQ,SACR,MACA,OACA,OAAO,UACP,UAAU,OACV,SACA,SAAS,QACT,QACA,QACA,SACA,aAAa,KACb,eACA,WAAW,OACX,WAEA,WACA,KACA,WAAW,OACX,GAAG,cACD;CACJ,MAAM,EAAE,WAAW,cAAc,iBAA+D,QAAQ;CAExG,MAAM,SAAS,YAAY;CAC3B,MAAM,iBAAiB,YAAY;CACnC,MAAM,YAAY,YAAY;CAC9B,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,WAAG,eAAe,cAAc;GAC/C,eAAe,gCAAgC;GAC/C,eAAe,mCAAmC;GAClD,eAAe,kCAAkC,WAAW;EAC9D,CAAC;CACF,MAAM,cAAc,WAClB,eAAe,sBACf,eAAe,sBAAsB,UACrC;GACG,eAAe,4BAA4B,WAAW;GACtD,eAAe,6BAA6B;GAC5C,eAAe,4BAA4B,WAAW;GACtD,eAAe,gCAAgC;GAC/C,eAAe,+BAA+B,WAAW;GACzD,eAAe,sCAAsC;GACrD,eAAe,qCAAqC,WAAW;GAC/D,eAAe,sBAAsB,UAAU;GAC/C,eAAe,+BAA+B,eAAe;GAC7D,eAAe,4BAA4B,WAAW;EACxD,EACD,UACD;CAED,MAAM,sBAAsB,WAAG,eAAe,6BAA6B,GACxE,eAAe,mCAAmC,WAAW,OAC/D,CAAC;CAEF,MAAM,iBAAiB,oBAAC,QAAA;EAAK,WAAW,eAAe;YAAgC;GAAa;CAEpG,IAAI,cAAc,KAAA;AAClB,KAAI,SACF,eAAc;UACL,QACT,eAAc;AAGhB,QAAO,WACL,oBAAC,OAAA;EAAI,IAAI;EAAW,WAAW;EAAW,eAAa;EAAQ,oBAAkB,YAAY;YAC3F,qBAAC,OAAA;GAAI,WAAW;cACd,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACE;GACF,GAEN,oBAAC,MAAA;EAAG,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACpF,eAAe,MACd,qBAAC,KAAA;GACC,WAAW;GACX,KAAK;GACL,KAAK,WAAW,WAAW,wBAAwB,KAAA;GAC3C;GACR,GAAI;cAEJ,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACA,GAEJ,eAAe,YACb,qBAAC,UAAA;GAAO,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;cACtG,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACK;GAGV;;AAIT,IAAMC,qBAA8C,UAAyB;CAC3E,MAAM,EACJ,UACA,YAAY,IACZ,UAAU,OACV,OAAO,UACP,QAAQ,SACR,QACA,UAAU,QACV,eACA,WAAW,OACX,WACA,QACE;CAEJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA0C;EAC9C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAOD,QACE,oBAAC,MAAA;EAAQ;EAAK,WANO,WAAG,eAAe,cAAc,WAAW;IAC/D,eAAe,uBAAuB,WAAW,YAAY;IAC7D,gCAAgC;GAClC,CAAC;EAGyC,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,OAAwB,UAAU;AAC/D,OAAI,MAAM,eAA0B,MAAM,IAAI,MAAM,SAAS,KAC3D,KAAI,UAAU;IAEZ,MAAM,kBADiB,MAAM,MAAM,WACK,kCAAkC,gBAAgB;IAC1F,MAAM,SAAS,iBAAiB;AAEhC,WACE,oBAAC,sBAAA;KACQ;KACE;KACT,UAAU,MAAM,MAAM;KACtB,WAAW;KACX,uBAAuB;eAEtB,MAAM,aAAa,OAAO;MACzB;MACA;MACA,SAAS;MACT;MACe;MACf,UAAU;MACV,WAAW;MACZ,CAAC;MACe;SAGrB,QAAO,MAAM,aAAa,OAAO;IAC/B;IACA;IACA;IACA;IACe;IACf,UAAU;IACX,CAAC;AAGN,UAAO;IACP;GACC;;AAIT,MAAa,WAAW;AAExB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,KAAK,cAAc;AC7SnB,IAAA,qBD+Se"}
+{"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":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAAsD;AACjF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;AC4Fb,MAAaA,QAAkB,UAAqB;CAClD,MAAM,EACJ,UACA,YAAY,IACZ,QAAQ,SACR,MACA,OACA,OAAO,UACP,UAAU,OACV,SACA,SAAS,QACT,QACA,QACA,SACA,aAAa,KACb,eACA,WAAW,OACX,WAEA,WACA,KACA,WAAW,OACX,GAAG,cACD;CACJ,MAAM,EAAE,WAAW,cAAc,iBAA+D,QAAQ;CAExG,MAAM,SAAS,YAAY;CAC3B,MAAM,iBAAiB,YAAY;CACnC,MAAM,YAAY,YAAY;CAC9B,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAAG,eAAe,cAAc;GAC/C,eAAe,gCAAgC;GAC/C,eAAe,mCAAmC;GAClD,eAAe,kCAAkC,WAAW;EAC9D,CAAC;CACF,MAAM,cAAc,GAClB,eAAe,sBACf,eAAe,sBAAsB,UACrC;GACG,eAAe,4BAA4B,WAAW;GACtD,eAAe,6BAA6B;GAC5C,eAAe,4BAA4B,WAAW;GACtD,eAAe,gCAAgC;GAC/C,eAAe,+BAA+B,WAAW;GACzD,eAAe,sCAAsC;GACrD,eAAe,qCAAqC,WAAW;GAC/D,eAAe,sBAAsB,UAAU;GAC/C,eAAe,+BAA+B,eAAe;GAC7D,eAAe,4BAA4B,WAAW;EACxD,EACD,UACD;CAED,MAAM,sBAAsB,GAAG,eAAe,6BAA6B,GACxE,eAAe,mCAAmC,WAAW,OAC/D,CAAC;CAEF,MAAM,iBAAiB,oBAAC,QAAA;EAAK,WAAW,eAAe;YAAgC;GAAa;CAEpG,IAAI,cAAc,KAAA;AAClB,KAAI,SACF,eAAc;UACL,QACT,eAAc;AAGhB,QAAO,WACL,oBAAC,OAAA;EAAI,IAAI;EAAW,WAAW;EAAW,eAAa;EAAQ,oBAAkB,YAAY;YAC3F,qBAAC,OAAA;GAAI,WAAW;cACd,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACE;GACF,GAEN,oBAAC,MAAA;EAAG,WAAW;EAAgB;EAAK,eAAa;EAAQ,oBAAkB,YAAY;YACpF,eAAe,MACd,qBAAC,KAAA;GACC,WAAW;GACX,KAAK;GACL,KAAK,WAAW,WAAW,wBAAwB,KAAA;GAC3C;GACR,GAAI;cAEJ,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACA,GAEJ,eAAe,YACb,qBAAC,UAAA;GAAO,WAAW;GAAa,KAAK;GAAiD,MAAK;GAAS,GAAI;cACtG,oBAAC,OAAA,EAAI,WAAW,qBAAA,CAA2B,EAC1C,oBAAoB,UAAU;IAC7B,iBAAiB;IACjB;IACA;IACA,YAAY;IACC;IACb,MAAM,QAAQ;IACd;IACD,CAAC,CAAA;IACK;GAGV;;AAIT,IAAMC,qBAA8C,UAAyB;CAC3E,MAAM,EACJ,UACA,YAAY,IACZ,UAAU,OACV,OAAO,UACP,QAAQ,SACR,QACA,UAAU,QACV,eACA,WAAW,OACX,WACA,QACE;CAEJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA0C;EAC9C,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAOD,QACE,oBAAC,MAAA;EAAQ;EAAK,WANO,GAAG,eAAe,cAAc,WAAW;IAC/D,eAAe,uBAAuB,WAAW,YAAY;IAC7D,gCAAgC;GAClC,CAAC;EAGyC,eAAa;EAAQ,oBAAkB,YAAY;YACzF,MAAM,SAAS,IAAI,WAAW,OAAwB,UAAU;AAC/D,OAAI,MAAM,eAA0B,MAAM,IAAI,MAAM,SAAS,KAC3D,KAAI,UAAU;IAEZ,MAAM,kBADiB,MAAM,MAAM,WACK,kCAAkC,gBAAgB;IAC1F,MAAM,SAAS,iBAAiB;AAEhC,WACE,oBAAC,sBAAA;KACQ;KACE;KACT,UAAU,MAAM,MAAM;KACtB,WAAW;KACX,uBAAuB;eAEtB,MAAM,aAAa,OAAO;MACzB;MACA;MACA,SAAS;MACT;MACe;MACf,UAAU;MACV,WAAW;MACZ,CAAC;MACe;SAGrB,QAAO,MAAM,aAAa,OAAO;IAC/B;IACA;IACA;IACA;IACe;IACf,UAAU;IACX,CAAC;AAGN,UAAO;IACP;GACC;;AAIT,MAAa,WAAW;AAExB,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,KAAK,cAAc;AC7SnB,IAAA,qBD+Se"}

package/lib/List.js

@@ -1,5 +1,5 @@
 import { n as AnalyticsId } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/List/styles.module.scss";
 var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
@@ -8,7 +8,7 @@ var Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 });
 var List = ({ children, className, testId, variant = "bullet", margin }) => {
 	return /* @__PURE__ */ jsx(["numbered", "alphabetical"].includes(variant) ? "ol" : "ul", {
-		className: classNames(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
+		className: cn(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
 		"data-testid": testId,
 		"data-analyticsid": AnalyticsId.List,
 		children

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":["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,GAAW,OAAO,MAAM,OAAO,SAAS,YAAY,UAAU,OAAO,iBAAiB,UAAU;EAG/E,eAAa;EAAQ,oBAAkB,YAAY;EACnF;GACS;;AAIhB,KAAK,OAAO;ACzCZ,IAAA,iBD2Ce"}

package/lib/ListEditMode.js

@@ -2,7 +2,7 @@ import { a as IconSize } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as X_default } from "./X.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
 const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
@@ -11,7 +11,7 @@ const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 		ref: refObject,
 		onClick,
 		type: "button",
-		className: classNames(styles["list-edit-mode__icon-button"]),
+		className: cn(styles["list-edit-mode__icon-button"]),
 		"aria-label": ariaLabel,
 		"aria-describedby": ariaDescribedby,
 		children: /* @__PURE__ */ jsx(Icon_default, {
@@ -25,7 +25,7 @@ const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 const ListEditModeItem = (props) => {
 	const { children, variant = "line", color = "neutral", onDelete, deleteButtonAriaLabel, contentId } = props;
 	return /* @__PURE__ */ jsxs("li", {
-		className: classNames(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+		className: cn(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
 			[styles["list-edit-mode__item--line"]]: variant === "line",
 			[styles["list-edit-mode__item--fill"]]: variant === "fill" || variant === "fill-negative"
 		}),
@@ -40,7 +40,7 @@ const ListEditModeItem = (props) => {
 };
 ListEditModeItem.displayName = "ListEditModeItem";
 var ListEditMode_default = ListEditModeItem;
-const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+const listEditModeWrapperClassnames = cn([styles[`list-edit-mode`]]);
 var ListEditMode_default$1 = ListEditMode_default;
 export { ListEditModeItem as i, listEditModeWrapperClassnames as n, IconButton as r, ListEditMode_default$1 as t };
 

package/lib/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;AAgCA,MAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EACC,KAAK;EACI;EACT,MAAK;EACL,WAAW,WAAW,OAAO,+BAA+B;EAC5D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;AAOtG,QACE,qBAAC,MAAA;EAAG,WANiB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,UACA,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;IAAa,CAAA;GAC9H;;AAIT,iBAAiB,cAAc;AAE/B,IAAA,uBAAe;AChFf,MAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;ACDnF,IAAA,yBAAe"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/constants.ts","../src/components/ListEditMode/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport type { SvgIcon } from '../Icon';\nimport type { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n  /** Aria label for delete button */\n  deleteButtonAriaLabel?: string;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  contentId?: string;\n}\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n  ariaLabel,\n  ariaDescribedby,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button\n      ref={refObject}\n      onClick={onClick}\n      type=\"button\"\n      className={classNames(styles['list-edit-mode__icon-button'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n    >\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete, deleteButtonAriaLabel, contentId } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <li className={listClassNames}>\n      {children}\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" ariaLabel={deleteButtonAriaLabel} ariaDescribedby={contentId} />}\n    </li>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import classNames from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport * from './constants';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;AAgCA,MAAa,cAAc,EACzB,MACA,OACA,SACA,WACA,sBAOuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EACC,KAAK;EACI;EACT,MAAK;EACL,WAAW,GAAW,OAAO,+BAA+B;EAC5D,cAAY;EACZ,oBAAkB;YAElB,oBAAC,cAAA;GACY;GACX,SAAS;GACT,MAAM,SAAS;GACf,OAAO,UAAU,SAAS,yCAAyC;IACnE;GACK;;AAIb,MAAa,oBAAoB,UAAgD;CAC/E,MAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,UAAU,uBAAuB,cAAc;AAOtG,QACE,qBAAC,MAAA;EAAG,WANiB,GAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,UACA,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;GAAM,WAAW;GAAuB,iBAAiB;IAAa,CAAA;GAC9H;;AAIT,iBAAiB,cAAc;AAE/B,IAAA,uBAAe;AChFf,MAAa,gCAAgC,GAAW,CAAC,OAAO,kBAAkB,CAAC;ACDnF,IAAA,yBAAe"}

package/lib/MaxCharacters.js

@@ -1,10 +1,10 @@
 import { r as FormOnColor } from "./constants2.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/MaxCharacters/styles.module.scss";
 var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
 	const progress = length / maxCharacters;
-	const counterTextClass = classNames(styles["max-characters"], {
+	const counterTextClass = cn(styles["max-characters"], {
 		[styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,
 		[styles[`max-characters--invalid`]]: progress > 1
 	});

package/lib/MaxCharacters.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;AAmBA,IAAMA,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,WAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG;GAC3B;;AAIV,IAAA,wBAAe"}
+{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { FormOnColor } from '../../constants';\n\nimport styles from './styles.module.scss';\n\ninterface MaxCharactersProps {\n  /** Current input length */\n  length: number;\n  /** max character limit in textarea  */\n  maxCharacters: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText: string;\n  /** Changes the visuals of the textarea */\n  onColor?: keyof typeof FormOnColor;\n  /** Max width of the component */\n  maxWidth?: string;\n}\n\nconst MaxCharacters: React.FC<MaxCharactersProps> = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {\n  const progress = length / maxCharacters;\n\n  const counterTextClass = classNames(styles['max-characters'], {\n    [styles[`max-characters--on-dark`]]: onColor === FormOnColor.ondark,\n    [styles[`max-characters--invalid`]]: progress > 1,\n  });\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n\n  return (\n    <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n      {`${length}/${maxCharacters} ${maxText}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;AAmBA,IAAMA,iBAA+C,EAAE,eAAe,SAAS,QAAQ,SAAS,eAAe;CAC7G,MAAM,WAAW,SAAS;CAE1B,MAAM,mBAAmB,GAAW,OAAO,mBAAmB;GAC3D,OAAO,6BAA6B,YAAY,YAAY;GAC5D,OAAO,6BAA6B,WAAW;EACjD,CAAC;CAEF,MAAM,YAAY,WAAW,MAAO,WAAW;AAE/C,QACE,oBAAC,OAAA;EAAI,aAAW;EAAW,eAAa;EAAQ,WAAW;EAAkB,OAAO,EAAE,UAAU;YAC7F,GAAG,OAAO,GAAG,cAAc,GAAG;GAC3B;;AAIV,IAAA,wBAAe"}

package/lib/PanelTitle.js

@@ -1,12 +1,12 @@
 import { t as Title_default } from "./Title2.js";
 import { t as Highlighter_default } from "./Highlighter.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Panel/PanelTitle/styles.module.scss";
 var PanelTitle = (props) => {
 	const { testId, icon, badge, title, titleMarkup = "h3", highlightText } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
+		className: cn(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
 		"data-testid": testId,
 		children: [icon && /* @__PURE__ */ jsx("div", {
 			className: styles["paneltitle__icon"],

package/lib/PanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelTitle.js","names":["PanelTitle: React.FC<PanelTitleProps>"],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;AAsBA,IAAMA,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,QACE,qBAAC,OAAA;EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;aACxG,QAAQ,oBAAC,OAAA;GAAI,WAAW,OAAO;aAAsB;IAAW,EAChE,SACC,qBAAC,OAAA;GAAI,WAAW,OAAO;cACrB,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAA;KAAY,YAAY;eAAgB;MAAoB;KACvD,EACP,SAAS,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAuB;KAAY,CAAA;IAChE,CAAA;GAEJ;;ACjCV,IAAA,uBDqCe"}
+{"version":3,"file":"PanelTitle.js","names":["PanelTitle: React.FC<PanelTitleProps>"],"sources":["../src/components/Panel/PanelTitle/PanelTitle.tsx","../src/components/Panel/PanelTitle/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport Highlighter from '../../Highlighter';\nimport Title from '../../Title';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelTitleProps {\n  /** Badge displayed in title */\n  badge?: React.ReactNode;\n  /** Icon displayed in title. Only IconSize Small is supported */\n  icon?: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title text */\n  title: string | React.ReactNode;\n  /** Title HTML markup */\n  titleMarkup?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst PanelTitle: React.FC<PanelTitleProps> = (props: PanelTitleProps) => {\n  const { testId, icon, badge, title, titleMarkup = 'h3', highlightText } = props;\n  return (\n    <div className={classNames(styles['paneltitle'], { [styles['paneltitle--has-icon']]: icon })} data-testid={testId}>\n      {icon && <div className={styles['paneltitle__icon']}>{icon}</div>}\n      {title && (\n        <div className={styles['paneltitle__title']}>\n          <Title appearance=\"title3\" htmlMarkup={titleMarkup}>\n            <Highlighter searchText={highlightText}>{title}</Highlighter>\n          </Title>\n          {badge && <div className={styles['paneltitle__badge']}>{badge}</div>}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default PanelTitle;\n","import PanelTitle from './PanelTitle';\nexport * from './PanelTitle';\nexport default PanelTitle;\n"],"mappings":";;;;;AAsBA,IAAMA,cAAyC,UAA2B;CACxE,MAAM,EAAE,QAAQ,MAAM,OAAO,OAAO,cAAc,MAAM,kBAAkB;AAC1E,QACE,qBAAC,OAAA;EAAI,WAAW,GAAW,OAAO,eAAe,GAAG,OAAO,0BAA0B,MAAM,CAAC;EAAE,eAAa;aACxG,QAAQ,oBAAC,OAAA;GAAI,WAAW,OAAO;aAAsB;IAAW,EAChE,SACC,qBAAC,OAAA;GAAI,WAAW,OAAO;cACrB,oBAAC,eAAA;IAAM,YAAW;IAAS,YAAY;cACrC,oBAAC,qBAAA;KAAY,YAAY;eAAgB;MAAoB;KACvD,EACP,SAAS,oBAAC,OAAA;IAAI,WAAW,OAAO;cAAuB;KAAY,CAAA;IAChE,CAAA;GAEJ;;ACjCV,IAAA,uBDqCe"}

package/lib/PopOver.js

@@ -1,7 +1,7 @@
 import { c as ZIndex, n as AnalyticsId } from "./constants2.js";
 import { n as getAriaLabelAttributes } from "./accessibility.js";
 import { _ as autoUpdate, a as useDismiss, d as arrow, f as flip, h as shift, i as useClick, l as useInteractions, m as offset, o as useFloating, p as hide, r as FloatingFocusManager, t as FloatingArrow, u as useMergeRefs } from "./floating-ui.react.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/PopOver/styles.module.scss";
@@ -44,7 +44,7 @@ var PopOver = (props) => {
 				visibility: isVisible ? "visible" : "hidden",
 				zIndex
 			},
-			className: classNames(styles.popover, className),
+			className: cn(styles.popover, className),
 			...getFloatingProps(),
 			role,
 			"data-testid": testId,

package/lib/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","names":["PopOver: React.FC<PopOverProps>"],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;AAEA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,uBAAA;AACA,kBAAA,mBAAA;AACA,kBAAA,mBAAA;;;ACuDF,IAAMA,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAE9F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,GAAG;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,GAAG,CAAC;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,UAAU,CAAC;GAAC;EAC7F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,SAC1B;EACF,CAAC;CAKF,MAAM,EAAE,qBAAqB,gBAAgB,CAH/B,SAAS,QAAQ,EACf,WAAW,QAAQ,CAE0B,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;AAIhD,QACE,oBAAC,sBAAA;EAA8B;EAAS,OAAO;YAC7C,qBAAC,OAAA;GACK;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAAC;GAO9E,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;IAAQ;GAC1F,WAAW,WAAW,OAAO,SAAS,UAAU;GAChD,GAAI,kBAAkB;GAChB;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;cAEH,UACD,oBAAC,eAAA;IACC,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb,CAAA;IACE;GACe;;AAI3B,QAAQ,cAAc;AC5HtB,IAAA,oBD8He"}
+{"version":3,"file":"PopOver.js","names":["PopOver: React.FC<PopOverProps>"],"sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx","../src/components/PopOver/index.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import { useRef } from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  FloatingArrow,\n  arrow,\n  hide,\n  FloatingFocusManager,\n  useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\n\nimport { PopOverVariant } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport type PopOverRole = 'tooltip' | 'dialog' | 'group';\n\nexport type PopOverPlacement = 'top' | 'bottom';\n\nexport interface PopOverProps {\n  /** Sets aria-label of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabel?: string;\n  /** Sets aria-labelledby of the bubble. If role is set to dialog ariaLabel or ariaLabelledById MUST be set! */\n  ariaLabelledById?: string;\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement | null>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */\n  placement?: PopOverPlacement;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLDivElement | SVGSVGElement | HTMLElement | null>;\n}\n\nconst PopOver: React.FC<PopOverProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledById,\n    id,\n    children,\n    controllerRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role = 'dialog',\n    testId,\n    zIndex = ZIndex.PopOver,\n    placement,\n    ref,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  const placementProp = placement ?? (variant === PopOverVariant.positionabove ? 'top' : 'bottom');\n\n  const arrowRef = useRef(null);\n  const { refs, floatingStyles, context, middlewareData } = useFloating({\n    middleware: [offset(10), flip(), shift({ padding: 8 }), hide(), arrow({ element: arrowRef })],\n    placement: placementProp,\n    whileElementsMounted: autoUpdate,\n    elements: {\n      reference: controllerRef.current,\n    },\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps } = useInteractions([click, dismiss]);\n\n  const isVisible = show && !middlewareData.hide?.referenceHidden;\n\n  const mergedRef = useMergeRefs<HTMLElement | SVGSVGElement>([refs.setFloating, ref]);\n\n  return (\n    <FloatingFocusManager context={context} modal={false}>\n      <div\n        id={id}\n        ref={mergedRef}\n        style={{ ...floatingStyles, visibility: isVisible ? 'visible' : 'hidden', zIndex: zIndex }}\n        className={classNames(styles.popover, className)}\n        {...getFloatingProps()}\n        role={role}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        {...ariaLabelAttributes}\n      >\n        {children}\n        <FloatingArrow\n          ref={arrowRef}\n          className={styles['popover__arrow']}\n          context={context}\n          fill={'var(--core-color-white)'}\n          stroke={'var(--color-base-border-onlight)'}\n          strokeWidth={1}\n        />\n      </div>\n    </FloatingFocusManager>\n  );\n};\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n","import PopOver from './PopOver';\nexport { PopOverVariant } from './utils';\nexport * from './PopOver';\nexport default PopOver;\n"],"mappings":";;;;;;;AAEA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,uBAAA;AACA,kBAAA,mBAAA;AACA,kBAAA,mBAAA;;;ACuDF,IAAMA,WAAkC,UAAS;CAC/C,MAAM,EACJ,WACA,kBACA,IACA,UACA,eACA,OAAO,OACP,YAAY,IACZ,UAAU,eAAe,mBACzB,OAAO,UACP,QACA,SAAS,OAAO,SAChB,WACA,QACE;CAEJ,MAAM,sBAAsB,uBAAuB;EAAE,OAAO;EAAW,IAAI;EAAkB,CAAC;CAE9F,MAAM,gBAAgB,cAAc,YAAY,eAAe,gBAAgB,QAAQ;CAEvF,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,EAAE,MAAM,gBAAgB,SAAS,mBAAmB,YAAY;EACpE,YAAY;GAAC,OAAO,GAAG;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,GAAG,CAAC;GAAE,MAAM;GAAE,MAAM,EAAE,SAAS,UAAU,CAAC;GAAC;EAC7F,WAAW;EACX,sBAAsB;EACtB,UAAU,EACR,WAAW,cAAc,SAC1B;EACF,CAAC;CAKF,MAAM,EAAE,qBAAqB,gBAAgB,CAH/B,SAAS,QAAQ,EACf,WAAW,QAAQ,CAE0B,CAAC;CAE9D,MAAM,YAAY,QAAQ,CAAC,eAAe,MAAM;AAIhD,QACE,oBAAC,sBAAA;EAA8B;EAAS,OAAO;YAC7C,qBAAC,OAAA;GACK;GACJ,KANY,aAA0C,CAAC,KAAK,aAAa,IAAI,CAAC;GAO9E,OAAO;IAAE,GAAG;IAAgB,YAAY,YAAY,YAAY;IAAkB;IAAQ;GAC1F,WAAW,GAAW,OAAO,SAAS,UAAU;GAChD,GAAI,kBAAkB;GAChB;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,GAAI;cAEH,UACD,oBAAC,eAAA;IACC,KAAK;IACL,WAAW,OAAO;IACT;IACT,MAAM;IACN,QAAQ;IACR,aAAa;KACb,CAAA;IACE;GACe;;AAI3B,QAAQ,cAAc;AC5HtB,IAAA,oBD8He"}

package/lib/Select.js

@@ -6,7 +6,7 @@ import { t as getAriaDescribedBy } from "./accessibility.js";
 import { t as ErrorWrapper_default } from "./ErrorWrapper.js";
 import { n as renderLabel } from "./utils2.js";
 import { t as ChevronDown_default } from "./ChevronDown.js";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import selectStyles from "./components/Select/styles.module.scss";
 var getSelectMaxWidth = (characters) => {
@@ -23,17 +23,17 @@ const Select = (props) => {
 	const invalid = onColor === "oninvalid" || !!errorText || !!error;
 	const iconColor = getIconColor(invalid, !!disabled);
 	const maxWidth = width ? getSelectMaxWidth(width) : void 0;
-	const selectInnerWrapperClasses = classNames(selectStyles["select-inner-wrapper"], {
+	const selectInnerWrapperClasses = cn(selectStyles["select-inner-wrapper"], {
 		[selectStyles["select-inner-wrapper--transparent"]]: concept === "transparent",
 		[selectStyles["select-inner-wrapper--on-blueberry"]]: onBlueberry,
 		[selectStyles["select-inner-wrapper--invalid"]]: invalid,
 		[selectStyles["select-inner-wrapper--disabled"]]: disabled
 	}, className);
-	const selectClasses = classNames(selectStyles.select, {
+	const selectClasses = cn(selectStyles.select, {
 		[selectStyles["select--on-blueberry"]]: onBlueberry,
 		[selectStyles["select--invalid"]]: invalid
 	});
-	const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
+	const selectWrapperClasses = cn(selectStyles["select-wrapper"], wrapperClassName);
 	return /* @__PURE__ */ jsx(ErrorWrapper_default, {
 		className: errorWrapperClassName,
 		errorText,

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,WAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,WAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,WAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,CAAC,EAClF,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}
+{"version":3,"file":"Select.js","names":["Select: React.FC<SelectProps>"],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ErrorWrapperClassNameProps } from '../ErrorWrapper';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label/utils';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\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  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n  /** Ref passed to the select element */\n  ref?: React.Ref<HTMLSelectElement | null>;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select: React.FC<SelectProps> = props => {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId: errorTextIdProp,\n    selectId: selectIdProp,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ref,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(selectIdProp);\n  const errorTextId = useIdWithFallback(errorTextIdProp);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel({ label: label, inputId: selectId, onColor: onColor as FormOnColor })}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n};\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAsDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAaA,UAAgC,UAAS;CACpD,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,aAAa,iBACb,UAAU,cACV,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,kBACA,KACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,aAAa;CAChD,MAAM,cAAc,kBAAkB,gBAAgB;CACtD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,GAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,GAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,GAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY;IAAS;IAAO,SAAS;IAAmB;IAAwB,CAAC,EAClF,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;;AChJnB,IAAA,mBDoJe"}

package/lib/SingleSelectItem.js

@@ -1,5 +1,5 @@
 import { t as AsChildSlot_default } from "./AsChildSlot.js";
-import classNames from "classnames";
+import cn from "classnames";
 import React, { useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Dropdown/SingleSelect/styles.module.scss";
@@ -21,8 +21,8 @@ const SingleSelectItem = (props) => {
 		group,
 		optionValue
 	]);
-	const contentClasses = classNames(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
-	const dotClasses = classNames(styles["single-select-item__dot"], {
+	const contentClasses = cn(styles["single-select-item__content"], { [styles["single-select-item__content--disabled"]]: isDisabled });
+	const dotClasses = cn(styles["single-select-item__dot"], {
 		[styles["single-select-item__dot--disabled"]]: isDisabled,
 		[styles["single-select-item__dot--checked"]]: isSelected
 	});

package/lib/SingleSelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,WAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,WAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}
+{"version":3,"file":"SingleSelectItem.js","names":["SingleSelectItem: React.FC<SingleSelectItemProps>"],"sources":["../src/components/Dropdown/SingleSelect/utils.tsx","../src/components/Dropdown/SingleSelect/SingleSelectItem.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SingleSelectContextType } from './SingleSelect';\n\nexport const SingleSelectContext = React.createContext<SingleSelectContextType | null>(null);\n\nexport const useSingleSelect = (): SingleSelectContextType | null => React.useContext(SingleSelectContext);\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { AsChildSlotHandle } from '../../AsChildSlot';\n\nimport { useSingleSelect } from './utils';\nimport AsChildSlot from '../../AsChildSlot';\n\nimport styles from './styles.module.scss';\n\nexport interface SingleSelectItemProps extends Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {\n  /** The text to the singleSelectItem */\n  text?: string;\n  /** input id of the singleSelectItem */\n  inputId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** When true, onclick and keyboard events will be passed to the child Button or AnchorLink. */\n  asChild?: boolean;\n  /** Only use when asChild is set to true and only pass one child */\n  children?: React.ReactNode;\n  /** Value for this singleSelectItem option - used by the parent wrapper to keep track of the context */\n  value?: string;\n  /** aria-describedby passthrough if needed */\n  ['aria-describedby']?: string;\n  /** Marks this option as initially selected */\n  defaultSelected?: boolean;\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLElement | null>;\n}\n\nexport const SingleSelectItem: React.FC<SingleSelectItemProps> = props => {\n  const { text, value, testId, asChild = false, children, disabled, defaultSelected, ref, ...rest } = props;\n\n  const generatedId = useId();\n  const inputId = props.inputId ?? generatedId;\n  const group = useSingleSelect();\n  const optionValue = typeof value === 'string' && value.length > 0 ? value : inputId;\n  const isSelected = group ? group.value === optionValue : false;\n  const isDisabled = !!disabled || !!group?.disabled;\n  const asChildSlotRef = React.useRef<AsChildSlotHandle | null>(null);\n\n  React.useEffect(() => {\n    if (defaultSelected && group && typeof group.value === 'undefined') {\n      group.onValueChange?.(optionValue);\n    }\n  }, [defaultSelected, group, optionValue]);\n\n  const contentClasses = classNames(styles['single-select-item__content'], {\n    [styles['single-select-item__content--disabled']]: isDisabled,\n  });\n  const dotClasses = classNames(styles['single-select-item__dot'], {\n    [styles['single-select-item__dot--disabled']]: isDisabled,\n    [styles['single-select-item__dot--checked']]: isSelected,\n  });\n\n  const childArray = React.Children.toArray(children).filter(React.isValidElement) as React.ReactElement[];\n  const childElement = childArray[0] ?? null;\n\n  const selectThis = (e?: React.SyntheticEvent): void => {\n    if (isDisabled) return;\n    if (group && group.value !== optionValue) {\n      group.onValueChange?.(optionValue, e);\n    }\n  };\n\n  const content = (\n    <>\n      <span className={dotClasses} aria-hidden />\n      <span>{text}</span>\n    </>\n  );\n\n  const Component = (asChild ? AsChildSlot : 'button') as React.ElementType;\n  const childWithInjectedContent = childElement ? React.cloneElement(childElement, undefined, content) : null;\n\n  const componentProps = asChild\n    ? {\n        ref: asChildSlotRef,\n        elementRef: ref,\n        className: contentClasses,\n        disabled: isDisabled,\n        onSelect: (e: React.SyntheticEvent): void => selectThis(e),\n        ariaCurrent: isSelected ? 'true' : undefined,\n        children: childWithInjectedContent,\n      }\n    : {\n        ...rest,\n        type: 'button' as const,\n        className: contentClasses,\n        disabled: isDisabled,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>): void => {\n          e.preventDefault();\n          selectThis(e);\n        },\n        onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>): void => {\n          if (e.key === 'Enter') {\n            e.preventDefault();\n            selectThis(e);\n          }\n        },\n        ref: ref,\n        'aria-disabled': isDisabled || undefined,\n        'aria-current': isSelected ? 'true' : undefined,\n        children: content,\n      };\n\n  return (\n    <div data-testid={testId} className={styles['single-select-item']}>\n      <Component {...componentProps} />\n    </div>\n  );\n};\n\nSingleSelectItem.displayName = 'Dropdown.SingleSelectItem';\n\nexport default SingleSelectItem;\n"],"mappings":";;;;;AAIA,MAAa,sBAAsB,MAAM,cAA8C,KAAK;AAE5F,MAAa,wBAAwD,MAAM,WAAW,oBAAoB;AC0B1G,MAAaA,oBAAoD,UAAS;CACxE,MAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,OAAO,UAAU,UAAU,iBAAiB,KAAK,GAAG,SAAS;CAEpG,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,WAAW;CACjC,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,cAAc,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI,QAAQ;CAC5E,MAAM,aAAa,QAAQ,MAAM,UAAU,cAAc;CACzD,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO;CAC1C,MAAM,iBAAiB,MAAM,OAAiC,KAAK;AAEnE,OAAM,gBAAgB;AACpB,MAAI,mBAAmB,SAAS,OAAO,MAAM,UAAU,YACrD,OAAM,gBAAgB,YAAY;IAEnC;EAAC;EAAiB;EAAO;EAAY,CAAC;CAEzC,MAAM,iBAAiB,GAAW,OAAO,gCAAgC,GACtE,OAAO,2CAA2C,YACpD,CAAC;CACF,MAAM,aAAa,GAAW,OAAO,4BAA4B;GAC9D,OAAO,uCAAuC;GAC9C,OAAO,sCAAsC;EAC/C,CAAC;CAGF,MAAM,eADa,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,MAAM,eAAe,CAChD,MAAM;CAEtC,MAAM,cAAc,MAAmC;AACrD,MAAI,WAAY;AAChB,MAAI,SAAS,MAAM,UAAU,YAC3B,OAAM,gBAAgB,aAAa,EAAE;;CAIzC,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAA;EAAK,WAAW;EAAY,eAAA;GAAc,EAC3C,oBAAC,QAAA,EAAA,UAAM,MAAA,CAAY,CAAA,EAAA,CAClB;CAGL,MAAM,YAAa,UAAU,sBAAc;CAC3C,MAAM,2BAA2B,eAAe,MAAM,aAAa,cAAc,KAAA,GAAW,QAAQ,GAAG;CAEvG,MAAM,iBAAiB,UACnB;EACE,KAAK;EACL,YAAY;EACZ,WAAW;EACX,UAAU;EACV,WAAW,MAAkC,WAAW,EAAE;EAC1D,aAAa,aAAa,SAAS,KAAA;EACnC,UAAU;EACX,GACD;EACE,GAAG;EACH,MAAM;EACN,WAAW;EACX,UAAU;EACV,UAAU,MAAiD;AACzD,KAAE,gBAAgB;AAClB,cAAW,EAAE;;EAEf,YAAY,MAAoD;AAC9D,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAgB;AAClB,eAAW,EAAE;;;EAGZ;EACL,iBAAiB,cAAc,KAAA;EAC/B,gBAAgB,aAAa,SAAS,KAAA;EACtC,UAAU;EACX;AAEL,QACE,oBAAC,OAAA;EAAI,eAAa;EAAQ,WAAW,OAAO;YAC1C,oBAAC,WAAA,EAAU,GAAI,gBAAA,CAAkB;GAC7B;;AAIV,iBAAiB,cAAc;AAE/B,IAAA,2BAAe"}