@helsenorge/designsystem-react 13.0.0-workspaces-beta.0 → 13.0.0-workspaces-beta.1

package/lib/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","names":["Link: LinkType"],"sources":["../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\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}\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  }\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    ...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 (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\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      ) : 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  } = props;\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) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\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"],"sources":["../src/components/LinkList/LinkList.tsx","../src/components/LinkList/index.ts"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\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}\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  }\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    ...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 (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\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      ) : 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  } = props;\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) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\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 cn from "classnames";
+import classNames 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: cn(styles.list, styles[`list--${variant}`], margin && styles["list--margin"], className),
+		className: classNames(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,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"}
+{"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"}

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 cn from "classnames";
+import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/ListEditMode/styles.module.scss";
-const listEditModeWrapperClassnames = cn([styles[`list-edit-mode`]]);
+const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);
 const IconButton = ({ icon, color, onClick }) => {
 	const { refObject, isHovered } = usePseudoClasses();
 	return /* @__PURE__ */ jsx("button", {
 		ref: refObject,
 		onClick,
 		type: "button",
-		className: cn(styles["list-edit-mode__icon-button"]),
+		className: classNames(styles["list-edit-mode__icon-button"]),
 		children: /* @__PURE__ */ jsx(Icon_default, {
 			isHovered,
 			svgIcon: icon,
@@ -25,7 +25,7 @@ const IconButton = ({ icon, color, onClick }) => {
 const ListEditModeItem = (props) => {
 	const { children, variant = "line", color = "neutral", onDelete } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn(styles["list-edit-mode__item"], color && styles[`list-edit-mode__item--${color}`], {
+		className: classNames(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}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\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 } = 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    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AA6BA,MAAa,gCAAgC,GAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,cAKuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EAAO,KAAK;EAAoB;EAAS,MAAK;EAAS,WAAW,GAAW,OAAO,+BAA+B;YAClH,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,aAAa;AAOpE,QACE,qBAAC,OAAA;EAAI,WANgB,GAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;IAAQ,EAClE,SAAA;GACG;;AAIV,iBAAiB,cAAc;ACpE/B,IAAA,yBDsEe"}
+{"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}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\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 } = 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    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n","import ListEditModeItem from './ListEditMode';\nexport * from './ListEditMode';\nexport default ListEditModeItem;\n"],"mappings":";;;;;;;;AA6BA,MAAa,gCAAgC,WAAW,CAAC,OAAO,kBAAkB,CAAC;AAEnF,MAAa,cAAc,EACzB,MACA,OACA,cAKuB;CACvB,MAAM,EAAE,WAAW,cAAc,kBAAqC;AAEtE,QACE,oBAAC,UAAA;EAAO,KAAK;EAAoB;EAAS,MAAK;EAAS,WAAW,WAAW,OAAO,+BAA+B;YAClH,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,aAAa;AAOpE,QACE,qBAAC,OAAA;EAAI,WANgB,WAAW,OAAO,yBAAyB,SAAS,OAAO,yBAAyB,UAAU;IAClH,OAAO,gCAAgC,YAAY;IACnD,OAAO,gCAAgC,YAAY,UAAU,YAAY;GAC3E,CAAC;aAIG,YAAY,oBAAC,YAAA;GAAW,MAAM;GAAG,SAAS;GAAU,OAAM;IAAQ,EAClE,SAAA;GACG;;AAIV,iBAAiB,cAAc;ACpE/B,IAAA,yBDsEe"}

package/lib/MaxCharacters.js

@@ -1,11 +1,11 @@
 import { r as FormOnColor } from "./constants2.js";
 import React from "react";
-import cn from "classnames";
+import classNames 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 = cn(styles["max-characters"], {
+	const counterTextClass = classNames(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 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,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,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 ? 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"}

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 cn from "classnames";
+import classNames 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 = cn(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
+	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
 	return /* @__PURE__ */ jsxs(Button_default, {
 		variant: "borderless",
 		textClassName: styles["expander__button__text"],
@@ -122,22 +122,22 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 		}
 	}, [isExpanded]);
 	const colorScheme = variant === PanelVariant.fill ? color : "white";
-	const outerClassnames = cn(className, {
+	const outerClassnames = classNames(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 = cn(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
+	const panelClassnames = classNames(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 = cn(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
-	const expanderBorderLayout = cn({
+	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
+	const expanderBorderLayout = classNames({
 		[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
@@ -148,7 +148,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsx("div", {
 				className: expanderBorderLayout,
 				children: /* @__PURE__ */ jsxs("div", {
@@ -187,7 +187,7 @@ var PanelRoot = React.forwardRef(function PanelForwardedRef({ layout = PanelLayo
 	}) : /* @__PURE__ */ jsx("div", {
 		className: outerClassnames,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
+			className: classNames({ [styles["panel__border--outline--inner"]]: variant === PanelVariant.outline }),
 			children: /* @__PURE__ */ jsxs("div", {
 				className: panelClassnames,
 				"data-testid": testId,
@@ -231,25 +231,25 @@ const PreContainer = ({ children }) => {
 };
 const A = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--a"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
 		children
 	});
 };
 const B = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--b"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
 		children
 	});
 };
 const C = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__content__item"], styles["panel__content__item--c"]),
+		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
 		children
 	});
 };
 const ExpandedContent = ({ children }) => {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn(styles["panel__expander__content"]),
+		className: classNames(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  /** 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    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 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        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, { highlightText: child.props.highlightText || highlightText })\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(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\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}>\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}>\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  /** 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    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 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        if (child.type === PreContainer) {\n          newPreContainer.push(child);\n        } else if (child.type === PanelTitle) {\n          newTitle.push(\n            React.cloneElement(child as React.ReactElement<PanelTitleProps>, { highlightText: child.props.highlightText || highlightText })\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(child);\n        } else if (child.type === ExpandedContent) {\n          newExpandableContent.push(child);\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}>\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}>\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 cn from "classnames";
+import classNames 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 = cn(panelStyles["status-message"], { [panelStyles["status-message--new"]]: status === PanelOldStatus.new });
+	const statusMessageClass = classNames(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 = 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 });
+	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 });
 	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 = 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 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 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 = cn(panelStyles["panel__layout-3"], {
+	const layoutClasses = classNames(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 = cn(panelStyles.panel__icon, panelStyles["panel__icon--layout-3"], { [panelStyles["panel__icon--no-content"]]: !contentA && !contentB });
+	const iconClasses = classNames(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 = cn(panelStyles["panel-wrapper"], className);
-	const panelClasses = cn(panelStyles.panel, {
+	const panelWrapperClasses = classNames(panelStyles["panel-wrapper"], className);
+	const panelClasses = classNames(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 = cn(panelStyles["panel__btn-container"], {
+		const btnContainerClasses = classNames(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: cn(panelStyles["panel-details"], {
+			className: classNames(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 = cn(panelStyles["title-container"], { [panelStyles["title-container--no-content-a"]]: !contentA });
-		const titleClasses = cn(panelStyles["title-container__title"], { [panelStyles["title-container__title--badge"]]: hasBadge });
+		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 });
 		return title && /* @__PURE__ */ jsxs("div", {
 			className: titleContainerClasses,
 			children: [/* @__PURE__ */ jsx(Title_default, {

package/lib/PanelOld.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelOld.js","names":["StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }>","PreContainer: React.FC<{ children?: React.ReactNode }>","DateTime: React.FC<{ date?: string; time?: string }>","PanelLayout1: React.FC<LayoutProps>","PanelLayout2: React.FC<LayoutProps>","PanelLayout3: React.FC<LayoutProps>","commonProps: Partial<ButtonProps> & AriaLabelAttributes","layoutProps: LayoutProps"],"sources":["../src/components/PanelOld/PanelOld.tsx","../src/components/PanelOld/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useId();\n  const buttonTextId = useId();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n","import PanelOld from './PanelOld';\nexport * from './PanelOld';\nexport default PanelOld;\n"],"mappings":"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"}
+{"version":3,"file":"PanelOld.js","names":["StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }>","PreContainer: React.FC<{ children?: React.ReactNode }>","DateTime: React.FC<{ date?: string; time?: string }>","PanelLayout1: React.FC<LayoutProps>","PanelLayout2: React.FC<LayoutProps>","PanelLayout3: React.FC<LayoutProps>","commonProps: Partial<ButtonProps> & AriaLabelAttributes","layoutProps: LayoutProps"],"sources":["../src/components/PanelOld/PanelOld.tsx","../src/components/PanelOld/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelOldStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelOldVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelOldLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelOldProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelOldLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelOldStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelOldVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelOldProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelOldStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelOldStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelOldStatus.new,\n  });\n\n  if ((status === PanelOldStatus.error || status === PanelOldStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelOldLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelOldLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelOldLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst PanelOld = React.forwardRef(function PanelForwardedRef(props: PanelOldProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelOldLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelOldStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelOldVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useId();\n  const buttonTextId = useId();\n  const hasBadge = statusMessage && status === PanelOldStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelOldVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelOldVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelOldVariant.white,\n    [panelStyles['panel--line']]: variant === PanelOldVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelOldVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelOldStatus.new,\n    [panelStyles['panel--draft']]: status === PanelOldStatus.draft,\n    [panelStyles['panel--error']]: status === PanelOldStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelOldStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelOldVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelOldVariant.white,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.PanelOld}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default PanelOld;\n","import PanelOld from './PanelOld';\nexport * from './PanelOld';\nexport default PanelOld;\n"],"mappings":"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"}

package/lib/PanelTitle.js

@@ -1,13 +1,13 @@
 import { t as Title_default } from "./Title2.js";
 import { t as Highlighter_default } from "./Highlighter.js";
 import React from "react";
-import cn from "classnames";
+import classNames 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: cn(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
+		className: classNames(styles["paneltitle"], { [styles["paneltitle--has-icon"]]: icon }),
 		"data-testid": testId,
 		children: [icon && /* @__PURE__ */ jsx("div", {
 			className: styles["paneltitle__icon"],