@helsenorge/designsystem-react 13.3.0 → 13.5.0

package/lib/LinkList.js

@@ -1,11 +1,12 @@
 import { n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
 import { t as usePseudoClasses } from "./usePseudoClasses.js";
+import { t as ArrowUpRight_default } from "./ArrowUpRight.js";
 import { r as useLanguage } from "./language.js";
 import { i as renderElementHeader } from "./ElementHeader.js";
 import { i as listEditModeWrapperClassnames, t as ListEditMode_default } from "./ListEditMode.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
 var HN_Designsystem_LinkList_en_GB_default = { editMode_deleteButtonAriaLabel: "Delete" };
@@ -18,18 +19,18 @@ const getResources = (language) => {
 	}
 };
 const Link = React.forwardRef((props, ref) => {
-	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false, contentId, resources, ...restProps } = props;
+	const { children, className = "", color = "white", icon, image, size = "medium", chevron = false, linkRef, status = "none", testId, target, variant, htmlMarkup = "a", highlightText, editMode = false, contentId, resources, external = false, ...restProps } = props;
 	const { refObject, isHovered } = usePseudoClasses(linkRef);
 	const isFill = variant === "fill";
 	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,
@@ -41,11 +42,14 @@ const Link = React.forwardRef((props, ref) => {
 		[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
 	});
+	let chevronIcon = void 0;
+	if (external) chevronIcon = ArrowUpRight_default;
+	else if (chevron) chevronIcon = ChevronRight_default;
 	return editMode ? /* @__PURE__ */ jsx("div", {
 		id: contentId,
 		className: liClasses,
@@ -57,7 +61,7 @@ const Link = React.forwardRef((props, ref) => {
 				titleHtmlMarkup: "span",
 				size,
 				parentType: "linklist",
-				chevronIcon: chevron ? ChevronRight_default : void 0,
+				chevronIcon,
 				icon: icon ?? imageContainer,
 				highlightText
 			})]
@@ -78,7 +82,7 @@ const Link = React.forwardRef((props, ref) => {
 				isHovered,
 				size,
 				parentType: "linklist",
-				chevronIcon: chevron ? ChevronRight_default : void 0,
+				chevronIcon,
 				icon: icon ?? imageContainer,
 				highlightText
 			})]
@@ -92,7 +96,7 @@ const Link = React.forwardRef((props, ref) => {
 				isHovered,
 				size,
 				parentType: "linklist",
-				chevronIcon: chevron ? ChevronRight_default : void 0,
+				chevronIcon,
 				icon: icon ?? imageContainer,
 				highlightText
 			})]
@@ -108,7 +112,7 @@ const LinkList = React.forwardRef(function LinkListForwardedRef(props, ref) {
 	};
 	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","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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\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 { AnalyticsId, LanguageLocales } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\nimport { getResources } from './resourceHelper';\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.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\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}\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    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    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\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  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\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    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(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  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: chevron ? ChevronRight : undefined,\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: chevron ? ChevronRight : undefined,\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: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\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  } = 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}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","names":["Link: LinkType","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 { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.LinkList.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.LinkList.nb-NO.json';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\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 { AnalyticsId, LanguageLocales } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { HNDesignsystemLinkList } from '../../resources/Resources';\nimport { PaletteNames } from '../../theme/palette';\nimport { useLanguage } from '../../utils/language';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\nimport { getResources } from './resourceHelper';\nimport ArrowUpRight from '../Icons/ArrowUpRight';\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.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\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}\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    /** 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 = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\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    external = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(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\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\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  } = 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}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n","import LinkList from './LinkList';\nexport * from './LinkList';\nexport default LinkList;\n"],"mappings":"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"}

package/lib/List.js

@@ -1,6 +1,6 @@
 import { n as AnalyticsId } from "./constants2.js";
 import React from "react";
-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", {
@@ -9,7 +9,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: ItemType","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ 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: ItemType;\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":";;;;;AAgBA,IAAMA,QAAkB,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBrG,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;AC7CZ,IAAA,iBD+Ce"}
+{"version":3,"file":"List.js","names":["Item: ItemType","List: ListCompound"],"sources":["../src/components/List/List.tsx","../src/components/List/index.ts"],"sourcesContent":["import React from 'react';\n\nimport 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\ntype ItemType = React.FC<ItemProps>;\n\nconst Item: ItemType = ({ 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: ItemType;\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":";;;;;AAgBA,IAAMA,QAAkB,EAAE,eAA0B,oBAAC,MAAA;CAAG,WAAW,OAAO;CAAa;EAAc;AAmBrG,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;AC7CZ,IAAA,iBD+Ce"}

package/lib/ListEditMode.js

@@ -3,17 +3,17 @@ import { t as usePseudoClasses } from "./usePseudoClasses.js";
 import { t as Icon_default } from "./Icon.js";
 import { t as X_default } from "./X.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
-const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
+const listEditModeWrapperClassnames = cn([styles[`list-edit-mode`]]);
 const IconButton = ({ icon, color, onClick, ariaLabel, ariaDescribedby }) => {
 	const { refObject, isHovered } = usePseudoClasses();
 	return /* @__PURE__ */ jsx("button", {
 		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, {
@@ -27,7 +27,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"
 		}),

package/lib/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\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 listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\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 ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,MAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,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;AClF/B,IAAA,yBDoFe"}
+{"version":3,"file":"ListEditMode.js","names":[],"sources":["../src/components/ListEditMode/ListEditMode.tsx","../src/components/ListEditMode/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\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 listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\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 ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AAgCA,MAAa,gCAAgC,GAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,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;AClF/B,IAAA,yBDoFe"}

package/lib/MaxCharacters.js

@@ -1,11 +1,11 @@
 import { r as FormOnColor } from "./constants2.js";
 import React from "react";
-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
 	});
@@ -15,7 +15,7 @@ var MaxCharacters = ({ maxCharacters, maxText, length, onColor, maxWidth }) => {
 		"aria-atomic": "true",
 		className: counterTextClass,
 		style: { maxWidth },
-		children: `${length}/${maxCharacters} ${maxText ? maxText : "tegn"}`
+		children: `${length}/${maxCharacters} ${maxText}`
 	});
 };
 var MaxCharacters_default = MaxCharacters;

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 React from 'react';\n\nimport 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 ? maxText : 'tegn'}`}\n    </div>\n  );\n};\n\nexport default MaxCharacters;\n"],"mappings":";;;;;AAqBA,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,UAAU,UAAU;GAC/C;;AAIV,IAAA,wBAAe"}
+{"version":3,"file":"MaxCharacters.js","names":["MaxCharacters: React.FC<MaxCharactersProps>"],"sources":["../src/components/MaxCharacters/MaxCharacters.tsx"],"sourcesContent":["import React from 'react';\n\nimport 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":";;;;;AAqBA,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/Panel.js

@@ -9,7 +9,7 @@ import { t as useExpand } from "./useExpand.js";
 import { t as ChevronRight_default } from "./ChevronRight.js";
 import { t as PanelTitle_default } from "./PanelTitle.js";
 import React from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Panel/styles.module.scss";
 var HN_Designsystem_Panel_en_GB_default = {
@@ -53,7 +53,7 @@ let PanelStatus = /* @__PURE__ */ function(PanelStatus$1) {
 	return PanelStatus$1;
 }({});
 var ExpandButton = ({ onClick, isExpanded, resources }) => {
-	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	const buttonClassName = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
 	return /* @__PURE__ */ jsxs(Button_default, {
 		variant: "borderless",
 		textClassName: styles["expander__button__text"],
@@ -127,22 +127,22 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 		}
 	}, [isExpanded]);
 	const colorScheme = variant === PanelVariant.fill ? color : "white";
-	const outerClassnames = classNames(className, {
+	const outerClassnames = cn(className, {
 		[styles["panel__border--outline--outer"]]: variant === PanelVariant.outline,
 		[styles["panel__border--line"]]: variant === PanelVariant.line,
 		[styles["panel__border--fill--neutral"]]: variant === PanelVariant.fill && colorScheme === "neutral",
 		[styles["panel__border--fill--new"]]: variant === PanelVariant.fill && status === PanelStatus.new,
 		[styles["panel__border--fill--status"]]: variant === PanelVariant.fill && status !== PanelStatus.none
 	});
-	const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+	const panelClassnames = cn(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
 		[styles["panel--line"]]: variant === PanelVariant.line,
 		[styles["panel--new"]]: status === PanelStatus.new,
 		[styles["panel--draft"]]: status === PanelStatus.draft,
 		[styles["panel--error"]]: status === PanelStatus.error,
 		[styles["panel--icon"]]: hasIcon
 	});
-	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
-	const expanderBorderLayout = classNames({
+	const contentContainerLayout = cn(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = cn({
 		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
 		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line
@@ -153,7 +153,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsx("div", {
 				className: expanderBorderLayout,
 				children: /* @__PURE__ */ jsxs("div", {
@@ -193,7 +193,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	}) : /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: panelClassnames,
 				"data-testid": testId,
@@ -238,25 +238,25 @@ const PreContainer = ({ children }) => {
 };
 const A = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--a"]),
 		children
 	});
 };
 const B = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--b"]),
 		children
 	});
 };
 const C = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
+		className: cn(styles["panel__content__item"], styles["panel__content__item--c"]),
 		children
 	});
 };
 const ExpandedContent = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: classNames(styles["panel__expander__content"]),
+		className: cn(styles["panel__expander__content"]),
 		children
 	});
 };

package/lib/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","names":["mergedResources: HNDesignsystemPanel","newPreContainer: React.ReactNode[]","newTitle: React.ReactNode[]","newContent: React.ReactNode[]","newExpandableContent: React.ReactNode[]","PreContainer: React.FC<ContentProps>","A: React.FC<ContentProps>","B: React.FC<ContentProps>","C: React.FC<ContentProps>","ExpandedContent: React.FC<ContentProps>"],"sources":["../src/resources/HN.Designsystem.Panel.en-GB.json","../src/resources/HN.Designsystem.Panel.nb-NO.json","../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\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 classNames from 'classnames';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot = React.forwardRef(function PanelForwardedRef(\n  {\n    layout = PanelLayout.vertical,\n    variant = PanelVariant.fill,\n    color = 'neutral',\n    stacking = PanelStacking.default,\n    testId,\n    children,\n    expanded = false,\n    focusable,\n    status = PanelStatus.none,\n    buttonBottomAriaLabel,\n    buttonBottomOnClick,\n    buttonBottomText,\n    className,\n    resources,\n    onExpand,\n    highlightText,\n  }: PanelProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || highlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: variant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: variant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={highlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={highlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={highlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={highlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={highlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"mappings":"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"}
+{"version":3,"file":"Panel.js","names":["mergedResources: HNDesignsystemPanel","newPreContainer: React.ReactNode[]","newTitle: React.ReactNode[]","newContent: React.ReactNode[]","newExpandableContent: React.ReactNode[]","PreContainer: React.FC<ContentProps>","A: React.FC<ContentProps>","B: React.FC<ContentProps>","C: React.FC<ContentProps>","ExpandedContent: React.FC<ContentProps>"],"sources":["../src/resources/HN.Designsystem.Panel.en-GB.json","../src/resources/HN.Designsystem.Panel.nb-NO.json","../src/components/Panel/resourceHelper.ts","../src/components/Panel/Panel.tsx"],"sourcesContent":["{\n  \"expandButtonOpen\": \"See details\",\n  \"expandButtonClose\": \"Hide details\"\n}\n","{\n  \"expandButtonOpen\": \"Se detaljer\",\n  \"expandButtonClose\": \"Skjul detaljer\"\n}\n","import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Panel.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Panel.nb-NO.json';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemPanel => {\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 classNames from 'classnames';\n\nimport { LanguageLocales } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icon';\nimport PanelTitle, { PanelTitleProps } from './PanelTitle';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemPanel } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\nexport enum PanelLayout {\n  vertical = 'vertical',\n  horizontal = 'horizontal',\n  combined = 'combined',\n  bAsRightCol = 'bAsRightCol',\n}\n\nexport type PanelColors = Extract<PaletteNames, 'white' | 'neutral'>;\n\nexport enum PanelVariant {\n  fill = 'fill',\n  line = 'line',\n  outline = 'outline',\n}\n\nexport enum PanelStacking {\n  default = 'default',\n  bFirst = 'bFirst',\n}\n\nexport enum PanelStatus {\n  none = 'none',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport interface PanelProps {\n  /** Aria label on call to action button */\n  buttonBottomAriaLabel?: string;\n  /** Sets the text on the bottom call to action button */\n  buttonBottomText?: string;\n  /** Sets the action on the bottom call to action button */\n  buttonBottomOnClick?: () => void;\n  /** Expands or collapses the panel. Only applicable when ExpandedContent is used */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Sets the layout and order of the content boxes */\n  layout?: PanelLayout;\n  /** Sets the visual variant of panel */\n  variant?: PanelVariant;\n  /** Sets the color for panel if it has variant fill */\n  color?: PanelColors;\n  /** Sets classes on the outermost container of the panel */\n  className?: string;\n  /** Action called when toggling expansion of ExpandedContent */\n  onExpand?: (isExpanded?: boolean) => void;\n  /** Sets the stacking order of the content boxes */\n  stacking?: PanelStacking;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Children elements to be rendered inside the panel */\n  children?: React.ReactNode;\n  /** Displays a status on the left side: default normal */\n  status?: PanelStatus;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemPanel>;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n}\n\nconst ExpandButton = ({\n  onClick,\n  isExpanded,\n  resources,\n}: {\n  onClick: () => void;\n  isExpanded: boolean | undefined;\n  resources: Partial<HNDesignsystemPanel>;\n}): React.JSX.Element => {\n  const buttonClassName = classNames(styles['expander__button'], isExpanded && styles['expander__button--expanded']);\n\n  return (\n    <Button\n      variant=\"borderless\"\n      textClassName={styles['expander__button__text']}\n      wrapperClassName={buttonClassName}\n      aria-expanded={isExpanded}\n      onClick={onClick}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      <span>{isExpanded ? resources.expandButtonClose : resources.expandButtonOpen}</span>\n    </Button>\n  );\n};\nconst PanelRoot = React.forwardRef(function PanelForwardedRef(\n  {\n    layout = PanelLayout.vertical,\n    variant = PanelVariant.fill,\n    color = 'neutral',\n    stacking = PanelStacking.default,\n    testId,\n    children,\n    expanded = false,\n    focusable,\n    status = PanelStatus.none,\n    buttonBottomAriaLabel,\n    buttonBottomOnClick,\n    buttonBottomText,\n    className,\n    resources,\n    onExpand,\n    highlightText,\n  }: PanelProps,\n  ref: React.ForwardedRef<HTMLDivElement>\n) {\n  const [preContainer, setPreContainer] = React.useState<React.ReactNode[]>([]);\n  const [title, setTitle] = React.useState<React.ReactNode[]>([]);\n  const [content, setContent] = React.useState<React.ReactNode[]>([]);\n  const [expandableContent, setExpandableContent] = React.useState<React.ReactNode[]>([]);\n  const [hasIcon, setHasIcon] = React.useState(false);\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const localRef = React.useRef<HTMLDivElement>(null);\n  const panelRef = ref ?? localRef;\n  const expandedContentRef = React.useRef<HTMLDivElement>(null);\n  const defaultScroll = 100;\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemPanel = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  React.useEffect(() => {\n    let index = 0;\n    let localHasIcon = false;\n    const newPreContainer: React.ReactNode[] = [];\n    const newTitle: React.ReactNode[] = [];\n    const newContent: React.ReactNode[] = [];\n    const newExpandableContent: React.ReactNode[] = [];\n\n    React.Children.forEach(children, child => {\n      if (React.isValidElement(child)) {\n        const key = child.key ?? `panel-child-${index++}`;\n\n        if (child.type === PreContainer) {\n          newPreContainer.push(React.cloneElement(child, { key }));\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, {\n              key,\n              highlightText: child.props.highlightText || highlightText,\n            })\n          );\n          if (child.props.icon) {\n            localHasIcon = true;\n          }\n        } else if (child.type === A || child.type === B || child.type === C) {\n          newContent.push(React.cloneElement(child, { key }));\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(React.cloneElement(child, { key }));\n        }\n      }\n    });\n\n    setPreContainer(newPreContainer);\n    setTitle(newTitle);\n    setContent(newContent);\n    setExpandableContent(newExpandableContent);\n    setHasIcon(localHasIcon);\n  }, [children]);\n\n  React.useEffect(() => {\n    if (expanded) {\n      // Hvis panel åpnes controlled skal ikke scroll skje\n      return;\n    }\n    // Scroller oppover når expanded content åpnes uncontrolled\n    if (isExpanded) {\n      if ('current' in panelRef && panelRef.current && expandedContentRef.current) {\n        const panelRect = panelRef.current.getBoundingClientRect();\n        const expandedContentRect = expandedContentRef.current.getBoundingClientRect();\n\n        const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);\n\n        // Scroller kun oppover, og kun dersom expandedContent havner utenfor skjermen når åpnet\n        if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {\n          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n          if (prefersReducedMotion) {\n            return;\n          }\n          window.scrollBy({\n            top: scrollAmount,\n            behavior: 'smooth',\n          });\n        }\n      }\n    }\n  }, [isExpanded]);\n\n  const colorScheme = variant === PanelVariant.fill ? color : 'white';\n\n  const outerClassnames = classNames(className, {\n    [styles['panel__border--outline--outer']]: variant === PanelVariant.outline,\n    [styles['panel__border--line']]: variant === PanelVariant.line,\n    [styles['panel__border--fill--neutral']]: variant === PanelVariant.fill && colorScheme === 'neutral',\n    [styles['panel__border--fill--new']]: variant === PanelVariant.fill && status === PanelStatus.new,\n    [styles['panel__border--fill--status']]: variant === PanelVariant.fill && status !== PanelStatus.none,\n  });\n  const panelClassnames = classNames(styles['panel'], styles[`panel--${colorScheme}`], styles['panel--status'], {\n    [styles['panel--line']]: variant === PanelVariant.line,\n    [styles['panel--new']]: status === PanelStatus.new,\n    [styles['panel--draft']]: status === PanelStatus.draft,\n    [styles['panel--error']]: status === PanelStatus.error,\n    [styles['panel--icon']]: hasIcon,\n  });\n  const contentContainerLayout = classNames(styles['panel__content'], styles[`panel__content--${layout}`], {\n    [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst,\n  });\n  const expanderBorderLayout = classNames({\n    [styles['panel__expander__border--expanded']]: isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,\n    [styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && variant === PanelVariant.line,\n  });\n\n  const handleExpandClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  return expandableContent.length > 0 ? (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={expanderBorderLayout}>\n          <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n            <Highlighter searchText={highlightText}>\n              {preContainer}\n              {title}\n            </Highlighter>\n            <div className={contentContainerLayout}>\n              <Highlighter searchText={highlightText}>{content}</Highlighter>\n            </div>\n            <ExpandButton onClick={handleExpandClick} isExpanded={isExpanded} resources={mergedResources} />\n            {isExpanded && (\n              <div ref={expandedContentRef} data-testid={testId + '-details'}>\n                <div className={styles['panel__expander__separator']} />\n                <Highlighter searchText={highlightText}>{expandableContent}</Highlighter>\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={outerClassnames}>\n      <div className={classNames({ [styles['panel__border--outline--inner']]: variant === PanelVariant.outline })}>\n        <div className={panelClassnames} data-testid={testId} ref={panelRef} tabIndex={focusable ? -1 : undefined}>\n          <Highlighter searchText={highlightText}>\n            {preContainer}\n            {title}\n          </Highlighter>\n          <div className={contentContainerLayout}>\n            <Highlighter searchText={highlightText}>{content}</Highlighter>\n          </div>\n          {buttonBottomText && buttonBottomOnClick && (\n            <div className={styles['panel__button-bottom']}>\n              <Button variant=\"borderless\" type=\"button\" size=\"medium\" onClick={buttonBottomOnClick} aria-label={buttonBottomAriaLabel}>\n                {buttonBottomText}\n                <Icon svgIcon={ChevronRight} size={IconSize.XSmall} />\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport interface ContentProps {\n  /** Children elements to be rendered inside the content box */\n  children?: React.ReactNode;\n}\n\nexport const PreContainer: React.FC<ContentProps> = ({ children }) => {\n  return <div className={styles['panel__pre-container']}>{children}</div>;\n};\n\nexport const A: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--a']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const B: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--b']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const C: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__content__item'], styles['panel__content__item--c']);\n  return <div className={styling}>{children}</div>;\n};\n\nexport const ExpandedContent: React.FC<ContentProps> = ({ children }) => {\n  const styling = classNames(styles['panel__expander__content']);\n  return <div className={styling}>{children}</div>;\n};\n\ntype PanelComponent = typeof PanelRoot & {\n  PreContainer: React.FC<ContentProps>;\n  Title: React.FC<PanelTitleProps>;\n  A: React.FC<ContentProps>;\n  B: React.FC<ContentProps>;\n  C: React.FC<ContentProps>;\n  ExpandedContent: React.FC<ContentProps>;\n};\nPanelRoot.displayName = 'Panel';\nconst Panel = PanelRoot as PanelComponent;\nPanel.PreContainer = PreContainer;\nPanel.Title = PanelTitle;\nPanel.A = A;\nPanel.B = B;\nPanel.C = C;\nPanel.ExpandedContent = ExpandedContent;\n\nexport default Panel;\n"],"mappings":"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"}

package/lib/PanelOld.js

@@ -14,7 +14,7 @@ import { t as Calendar_default } from "./Calendar.js";
 import { t as Pencil_default } from "./Pencil.js";
 import { t as Watch_default } from "./Watch.js";
 import React, { useId } from "react";
-import classNames from "classnames";
+import cn from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import panelStyles from "./components/PanelOld/styles.module.scss";
 let PanelOldStatus = /* @__PURE__ */ function(PanelOldStatus$1) {
@@ -50,7 +50,7 @@ var StatusText = ({ status, statusMessage }) => {
 			svgIcon: Pencil_default
 		};
 	};
-	const statusMessageClass = classNames(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
+	const statusMessageClass = cn(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
 	if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) return /* @__PURE__ */ jsxs("div", {
 		className: statusMessageClass,
 		"data-testid": "display-status",
@@ -93,8 +93,8 @@ var DateTime = ({ date, time }) => {
 	return null;
 };
 var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const panelLayoutClasses = cn(panelStyles["panel__layout-1"], { [panelStyles["panel__layout-1--with-icon"]]: icon });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-1"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	return /* @__PURE__ */ jsxs("div", {
 		className: panelLayoutClasses,
 		children: [
@@ -117,8 +117,8 @@ var PanelLayout1 = ({ contentA, contentB, contentHeader, ctaContainer, icon, sta
 	});
 };
 var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, status, statusMessage, titleElement }) => {
-	const panelLayoutClasses = classNames(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const panelLayoutClasses = cn(panelStyles["panel__layout-2"], { [panelStyles["panel__layout-2--with-icon"]]: icon });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-2"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	const lastColumnClass = panelStyles["panel__layout-2__last-column"];
 	return /* @__PURE__ */ jsxs("div", {
 		className: panelLayoutClasses,
@@ -148,13 +148,13 @@ var PanelLayout2 = ({ contentA, contentB, contentHeader, ctaContainer, icon, sta
 	});
 };
 var PanelLayout3 = ({ contentA, contentB, contentHeader, ctaContainer, icon, layout, status, statusMessage, titleElement }) => {
-	const layoutClasses = classNames(panelStyles["panel__layout-3"], {
+	const layoutClasses = cn(panelStyles["panel__layout-3"], {
 		[panelStyles["panel__layout-3--with-icon"]]: icon,
 		[panelStyles["panel__layout-3--a"]]: layout === PanelOldLayout.layout3a,
 		[panelStyles["panel__layout-3--b"]]: layout === PanelOldLayout.layout3b,
 		[panelStyles["panel__layout-3--c"]]: layout === PanelOldLayout.layout3c
 	});
-	const iconClasses = classNames(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const iconClasses = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
 	return /* @__PURE__ */ jsxs("div", {
 		className: layoutClasses,
 		children: [
@@ -188,8 +188,8 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	const layout1 = layout === "layout1" || noContentB;
 	const layout2 = !noContentB && layout === "layout2";
 	const layout3 = !noContentB && (layout === "layout3a" || layout === "layout3b" || layout === "layout3c");
-	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
-	const panelClasses = classNames(panelStyles.panel, {
+	const panelWrapperClasses = cn(panelStyles["panel-wrapper"], className);
+	const panelClasses = cn(panelStyles.panel, {
 		[panelStyles["panel--fill"]]: variant === PanelOldVariant.fill,
 		[panelStyles["panel--stroke"]]: variant === PanelOldVariant.stroke,
 		[panelStyles["panel--white"]]: variant === PanelOldVariant.white,
@@ -206,7 +206,7 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	});
 	const renderCTAContainer = () => {
 		const hasButton = children || url || buttonOnClick;
-		const btnContainerClasses = classNames(panelStyles["panel__btn-container"], {
+		const btnContainerClasses = cn(panelStyles["panel__btn-container"], {
 			[panelStyles["panel__btn-container--no-content-b"]]: noContentB,
 			[panelStyles["panel__btn-container--no-button"]]: !hasButton
 		});
@@ -258,7 +258,7 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 	const renderContent = () => {
 		if (!children || !renderChildrenWhenClosed && !isExpanded) return null;
 		return /* @__PURE__ */ jsx("div", {
-			className: classNames(panelStyles["panel-details"], {
+			className: cn(panelStyles["panel-details"], {
 				[panelStyles["panel-details--open"]]: isExpanded,
 				[panelStyles["panel-details--line"]]: variant === PanelOldVariant.line,
 				[panelStyles["panel-details--white"]]: variant === PanelOldVariant.white
@@ -268,8 +268,8 @@ var PanelOld_default$1 = React.forwardRef(function PanelForwardedRef(props, ref)
 		});
 	};
 	const renderTitle = () => {
-		const titleContainerClasses = classNames(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
-		const titleClasses = classNames(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
+		const titleContainerClasses = cn(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
+		const titleClasses = cn(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
 		return title && /* @__PURE__ */ jsxs("div", {
 			className: titleContainerClasses,
 			children: [/* @__PURE__ */ jsx(Title_default, {