@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/LinkList.js

@@ -1,12 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { useHover } from "./hooks/useHover.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
 import { r as renderListHeader } from "./ListHeader.js";
 import LinkListStyles from "./components/LinkList/styles.module.scss";
-const Link = React.forwardRef((props, ref) => {
+const Link = React__default.forwardRef((props, ref) => {
   const {
     children,
     className = "",
@@ -60,11 +60,11 @@ const Link = React.forwardRef((props, ref) => {
     htmlMarkup === "button" && /* @__PURE__ */ jsx("button", { className: linkClasses, ref: hoverRef, type: "button", ...restProps, children: renderListHeader(children, "span", isHovered, size, chevron ? ChevronRight : void 0, icon) })
   ] });
 });
-const LinkList = React.forwardRef(function LinkListForwardedRef(props, ref) {
+const LinkList = React__default.forwardRef(function LinkListForwardedRef(props, ref) {
   const { children, className = "", chevron = false, size = "medium", color, testId, variant = "line" } = props;
-  return /* @__PURE__ */ jsx("ul", { ref, className: classNames(LinkListStyles["link-list"], className), "data-testid": testId, "data-analyticsid": AnalyticsId.LinkList, children: React.Children.map(children, (child) => {
+  return /* @__PURE__ */ jsx("ul", { ref, className: classNames(LinkListStyles["link-list"], className), "data-testid": testId, "data-analyticsid": AnalyticsId.LinkList, children: React__default.Children.map(children, (child) => {
     if (child.type === Link) {
-      return React.cloneElement(child, { color, size, chevron, variant });
+      return React__default.cloneElement(child, { color, size, chevron, variant });
     }
   }) });
 });

package/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\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  ListHeader?: ListHeaderType;\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}\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    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  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<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({\n    [LinkListStyles['link-list__list-item--line']]: isLine,\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--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["cn"],"mappings":";;;;;;;;AAoEA,MAAM,OAAiB,MAAM,WAAW,CAAC,OAAkB,QAAkC;AACrF,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,UAAU,cAAc,SAAgD,OAAO;AAEvF,QAAM,SAAS,YAAY;AAC3B,QAAM,iBAAiB,YAAY;AACnC,QAAM,YAAY,YAAY;AAC9B,QAAM,SAAS,YAAY;AAE3B,QAAM,YAAYA,WAAG;AAAA,IACnB,CAAC,eAAe,4BAA4B,CAAC,GAAG;AAAA,IAChD,CAAC,eAAe,kCAAkC,KAAK,EAAE,CAAC,GAAG;AAAA,EAAA,CAC9D;AACD,QAAM,cAAcA;AAAAA,IAClB,eAAe,mBAAmB;AAAA,IAClC,eAAe,sBAAsB,KAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAAC,eAAe,4BAA4B,KAAK,EAAE,CAAC,GAAG;AAAA,MACvD,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,MAC7C,CAAC,eAAe,4BAA4B,KAAK,EAAE,CAAC,GAAG;AAAA,MACvD,CAAC,eAAe,4BAA4B,CAAC,GAAG;AAAA,MAChD,CAAC,eAAe,+BAA+B,KAAK,EAAE,CAAC,GAAG;AAAA,MAC1D,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,MACtD,CAAC,eAAe,sBAAsB,IAAI,EAAE,CAAC,GAAG;AAAA,MAChD,CAAC,eAAe,2BAA2B,CAAC,GAAG,eAAe;AAAA,IAChE;AAAA,IACA;AAAA,EACF;AAEE,SAAA,qBAAC,QAAG,WAAW,WAAW,KAAU,eAAa,QAAQ,oBAAkB,YAAY,MACpF,UAAA;AAAA,IAAA,eAAe,OACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK,WAAW,WAAW,wBAAwB;AAAA,QACnD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,iBAAiB,UAAU,QAAQ,WAAW,MAAM,UAAU,eAAe,QAAW,IAAI;AAAA,MAAA;AAAA,IAC/F;AAAA,IAED,eAAe,YACb,oBAAA,UAAA,EAAO,WAAW,aAAa,KAAK,UAAgD,MAAK,UAAU,GAAG,WACpG,UAAA,iBAAiB,UAAU,QAAQ,WAAW,MAAM,UAAU,eAAe,QAAW,IAAI,EAC/F,CAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAEM,MAAM,WAAW,MAAM,WAAW,SAAS,qBAAqB,OAAsB,KAAkC;AAC7H,QAAM,EAAE,UAAU,YAAY,IAAI,UAAU,OAAO,OAAO,UAAU,OAAO,QAAQ,UAAU,OAAW,IAAA;AAEtG,SAAA,oBAAC,QAAG,KAAU,WAAWA,WAAG,eAAe,WAAW,GAAG,SAAS,GAAG,eAAa,QAAQ,oBAAkB,YAAY,UACrH,UAAA,MAAM,SAAS,IAAI,UAAU,CAAC,UAA2D;AACnF,QAAA,MAAwC,SAAS,MAAM;AACnD,aAAA,MAAM,aAAa,OAAwC,EAAE,OAAO,MAAM,SAAS,SAAS;AAAA,IAAA;AAAA,EAEtG,CAAA,GACH;AAEJ,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,KAAK,cAAc;"}
+{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\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  ListHeader?: ListHeaderType;\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}\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    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  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'>;\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<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({\n    [LinkListStyles['link-list__list-item--line']]: isLine,\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--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderListHeader(children, 'span', isHovered, size, chevron ? ChevronRight : undefined, icon)}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, testId, variant = 'line' } = props;\n  return (\n    <ul ref={ref} className={cn(LinkListStyles['link-list'], className)} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron, variant });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["React","cn"],"mappings":";;;;;;;;AAoEA,MAAM,OAAiBA,eAAM,WAAW,CAAC,OAAkB,QAAkC;AACrF,QAAA;AAAA,IACJ;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,GAAG;AAAA,EAAA,IACD;AACJ,QAAM,EAAE,UAAU,cAAc,SAAgD,OAAO;AAEvF,QAAM,SAAS,YAAY;AAC3B,QAAM,iBAAiB,YAAY;AACnC,QAAM,YAAY,YAAY;AAC9B,QAAM,SAAS,YAAY;AAE3B,QAAM,YAAYC,WAAG;AAAA,IACnB,CAAC,eAAe,4BAA4B,CAAC,GAAG;AAAA,IAChD,CAAC,eAAe,kCAAkC,KAAK,EAAE,CAAC,GAAG;AAAA,EAAA,CAC9D;AACD,QAAM,cAAcA;AAAAA,IAClB,eAAe,mBAAmB;AAAA,IAClC,eAAe,sBAAsB,KAAK,EAAE;AAAA,IAC5C;AAAA,MACE,CAAC,eAAe,4BAA4B,KAAK,EAAE,CAAC,GAAG;AAAA,MACvD,CAAC,eAAe,yBAAyB,CAAC,GAAG;AAAA,MAC7C,CAAC,eAAe,4BAA4B,KAAK,EAAE,CAAC,GAAG;AAAA,MACvD,CAAC,eAAe,4BAA4B,CAAC,GAAG;AAAA,MAChD,CAAC,eAAe,+BAA+B,KAAK,EAAE,CAAC,GAAG;AAAA,MAC1D,CAAC,eAAe,kCAAkC,CAAC,GAAG;AAAA,MACtD,CAAC,eAAe,sBAAsB,IAAI,EAAE,CAAC,GAAG;AAAA,MAChD,CAAC,eAAe,2BAA2B,CAAC,GAAG,eAAe;AAAA,IAChE;AAAA,IACA;AAAA,EACF;AAEE,SAAA,qBAAC,QAAG,WAAW,WAAW,KAAU,eAAa,QAAQ,oBAAkB,YAAY,MACpF,UAAA;AAAA,IAAA,eAAe,OACd;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,KAAK;AAAA,QACL,KAAK,WAAW,WAAW,wBAAwB;AAAA,QACnD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA,iBAAiB,UAAU,QAAQ,WAAW,MAAM,UAAU,eAAe,QAAW,IAAI;AAAA,MAAA;AAAA,IAC/F;AAAA,IAED,eAAe,YACb,oBAAA,UAAA,EAAO,WAAW,aAAa,KAAK,UAAgD,MAAK,UAAU,GAAG,WACpG,UAAA,iBAAiB,UAAU,QAAQ,WAAW,MAAM,UAAU,eAAe,QAAW,IAAI,EAC/F,CAAA;AAAA,EAAA,GAEJ;AAEJ,CAAC;AAEM,MAAM,WAAWD,eAAM,WAAW,SAAS,qBAAqB,OAAsB,KAAkC;AAC7H,QAAM,EAAE,UAAU,YAAY,IAAI,UAAU,OAAO,OAAO,UAAU,OAAO,QAAQ,UAAU,OAAW,IAAA;AAEtG,SAAA,oBAAC,QAAG,KAAU,WAAWC,WAAG,eAAe,WAAW,GAAG,SAAS,GAAG,eAAa,QAAQ,oBAAkB,YAAY,UACrH,UAAAD,eAAM,SAAS,IAAI,UAAU,CAAC,UAA2D;AACnF,QAAA,MAAwC,SAAS,MAAM;AACnD,aAAAA,eAAM,aAAa,OAAwC,EAAE,OAAO,MAAM,SAAS,SAAS;AAAA,IAAA;AAAA,EAEtG,CAAA,GACH;AAEJ,CAAC;AAED,SAAS,cAAc;AACvB,SAAS,OAAO;AAChB,KAAK,cAAc;"}

package/ListHeader.js

@@ -1,17 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
 import classNames from "classnames";
 import { L as ListHeaderText } from "./ListHeaderText.js";
 import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
 import { isComponent, isComponentWithChildren } from "./utils/component.js";
-import { A as Avatar, a as AvatarSize } from "./Avatar.js";
+import { a as AvatarSize, A as Avatar } from "./Avatar.js";
 import { B as Badge } from "./Badge.js";
 import { I as Icon } from "./Icon.js";
 import { IconSize } from "./constants.js";
 import styles from "./components/ListHeader/styles.module.scss";
 const renderListHeader = (element, titleHtmlMarkup, isHovered, size, chevronIcon, icon) => {
   if (isComponent(element, ListHeader)) {
-    return React.cloneElement(element, {
+    return React__default.cloneElement(element, {
       chevronIcon,
       icon,
       isHovered,
@@ -29,7 +29,7 @@ const mapChildren = (children, isJsxChild = false) => {
   const listHeaderTextChildren = [];
   const stringChildren = [];
   const remainingChildren = [];
-  React.Children.forEach(children, (child) => {
+  React__default.Children.forEach(children, (child) => {
     if (child === null || typeof child === "undefined") return;
     if (isComponent(child, Avatar)) {
       avatarChild = child;
@@ -69,11 +69,11 @@ const ListHeader = (props) => {
   const avatarClasses = classNames(styles["list-header__avatar"], {});
   const CustomTag = titleHtmlMarkup;
   return /* @__PURE__ */ jsxs("span", { "data-testid": testId, className: listLabelClasses, children: [
-    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React.cloneElement(icon, {
+    showIcon && icon && /* @__PURE__ */ jsx("span", { className: iconClasses, children: React__default.cloneElement(icon, {
       size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,
       isHovered
     }) }),
-    size !== "small" && (mappedChildren == null ? void 0 : mappedChildren.avatarChild) && /* @__PURE__ */ jsx("span", { className: avatarClasses, children: React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall }) }),
+    size !== "small" && (mappedChildren == null ? void 0 : mappedChildren.avatarChild) && /* @__PURE__ */ jsx("span", { className: avatarClasses, children: React__default.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall }) }),
     /* @__PURE__ */ jsxs("span", { className: contentClasses, children: [
       mappedChildren == null ? void 0 : mappedChildren.listHeaderTextChildren,
       !!(mappedChildren == null ? void 0 : mappedChildren.stringChildren.length) && /* @__PURE__ */ jsx(CustomTag, { className: styles["list-header__title"], children: mappedChildren.stringChildren }),

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n\n  const listLabelClasses = cn(styles['list-header'], className);\n  const badgeContainerClasses = cn(styles['list-header__badge-container']);\n  const badgeClasses = cn(styles['list-header__badge']);\n  const chevronClasses = cn(styles['list-header__chevron']);\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--element']]: !contentIsString,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {});\n  const avatarClasses = cn(styles['list-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["cn"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showIcon = size !== 'small' && !!icon;\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n\n  const listLabelClasses = cn(styles['list-header'], className);\n  const badgeContainerClasses = cn(styles['list-header__badge-container']);\n  const badgeClasses = cn(styles['list-header__badge']);\n  const chevronClasses = cn(styles['list-header__chevron']);\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--element']]: !contentIsString,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {});\n  const avatarClasses = cn(styles['list-header__avatar'], {});\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      <span className={badgeContainerClasses}>\n        {mappedChildren?.badgeChildren &&\n          mappedChildren.badgeChildren.map((badgeChild, index) => {\n            return (\n              <span key={index} className={badgeClasses}>\n                {badgeChild}\n              </span>\n            );\n          })}\n      </span>\n      {chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["React","cn"],"mappings":"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"}

package/Panel.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId, IconSize } from "./constants.js";
 import { useExpand } from "./hooks/useExpand.js";
@@ -171,7 +171,7 @@ const PanelLayout3 = ({
     ] })
   ] });
 };
-const Panel = React.forwardRef(function PanelForwardedRef(props, ref) {
+const Panel = React__default.forwardRef(function PanelForwardedRef(props, ref) {
   const {
     buttonAriaLabel,
     buttonAriaLabelledById,

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\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 PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\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 PanelLayout;\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 PanelStatus;\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 PanelVariant;\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<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.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 === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.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 === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.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 Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, 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 = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.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 === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.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 === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.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      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\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 Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\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 PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\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 PanelLayout;\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 PanelStatus;\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 PanelVariant;\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<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.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 === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.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 === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.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 Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, 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 = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.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 === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.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 === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.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      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\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 Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","React"],"mappings":"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"}

package/PopOver.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect } from "react";
+import React__default, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
 import { ZIndex, AnalyticsId } from "./constants.js";
 import { useInterval } from "./hooks/useInterval.js";
@@ -138,7 +138,7 @@ var PopOverVariant = /* @__PURE__ */ ((PopOverVariant2) => {
   PopOverVariant2["positionabove"] = "positionabove";
   return PopOverVariant2;
 })(PopOverVariant || {});
-const PopOver = React.forwardRef((props, ref) => {
+const PopOver = React__default.forwardRef((props, ref) => {
   const {
     id,
     children,

package/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(bubbleRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant"],"mappings":"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"}
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(bubbleRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","React"],"mappings":"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"}

package/RadioButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useState } from "react";
+import React__default, { useState } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
@@ -20,7 +20,7 @@ const getRadioLabelClasses = (radioId, onColor, large, checkedRadioId) => {
     [radioButtonStyles["radio-button-label__large--selected-invalid"]]: large && checked && onCherry
   });
 };
-const RadioButton = React.forwardRef((props, ref) => {
+const RadioButton = React__default.forwardRef((props, ref) => {
   const {
     className,
     defaultChecked,

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":[],"mappings":";;;;;;;;;;;;AA2CO,MAAM,uBAAuB,CAClC,SACA,SACA,OACA,mBACuB;AACvB,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,YAAY;AAE5B,SAAO,WAAW;AAAA,IAChB,CAAC,kBAAkB,oCAAoC,CAAC,GAAG,SAAS,YAAY,YAAY,CAAC;AAAA,IAC7F,CAAC,kBAAkB,yCAAyC,CAAC,GAAG,YAAY,iBAAiB,CAAC,WAAW;AAAA,IACzG,CAAC,kBAAkB,qCAAqC,CAAC,GAAG,SAAS,WAAW,CAAC;AAAA,IACjF,CAAC,kBAAkB,6CAA6C,CAAC,GAAG,SAAS,WAAW;AAAA,EAAA,CACzF;AACH;AAEO,MAAM,cAAc,MAAM,WAAW,CAAC,OAAyB,QAAqC;AACnG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,KAAK;AAAA,IACf,UAAU,YAAY;AAAA,IACtB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACE,QAAA,UAAU,SAAS,YAAY,YAAY;AAC3C,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AACtC,QAAA,WAAW,YAAY,YAAY;AACnC,QAAA,UAAU,SAAS,SAAS;AAClC,QAAM,CAAC,SAAS,aAAa,IAAI,SAAkB;AAC7C,QAAA,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;AACxG,QAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;AACvC,QAAA,gBAAgB,QAAQ,WAAW;AAEzC,QAAM,4BAA4B,WAAW,kBAAkB,sBAAsB,GAAG;AAAA,IACtF,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,IACpD,CAAC,kBAAkB,sCAAsC,CAAC,GAAG,WAAW;AAAA,IACxE,CAAC,kBAAkB,uCAAuC,CAAC,GAAG,WAAW,WAAW;AAAA,IACpF,CAAC,kBAAkB,sCAAsC,CAAC,GAAG,WAAW,YAAY;AAAA,IACpF,CAAC,kBAAkB,2CAA2C,CAAC,GAAG,WAAW,eAAe;AAAA,EAAA,CAC7F;AACD,QAAM,0BAA0B;AAAA,IAC9B,kBAAkB,oBAAoB;AAAA,IACtC;AAAA,MACE,CAAC,kBAAkB,8BAA8B,CAAC,GAAG;AAAA,MACrD,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,MACpD,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,MACpD,CAAC,kBAAkB,2BAA2B,CAAC,GAAG;AAAA,MAClD,CAAC,kBAAkB,qCAAqC,CAAC,GAAG,WAAW;AAAA,IACzE;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB;AAAA,IACzB,kBAAkB,cAAc;AAAA,IAChC;AAAA,MACE,CAAC,kBAAkB,uBAAuB,CAAC,GAAG;AAAA,MAC9C,CAAC,kBAAkB,wBAAwB,CAAC,GAAG;AAAA,MAC/C,CAAC,kBAAkB,4BAA4B,CAAC,GAAG;AAAA,MACnD,CAAC,kBAAkB,uBAAuB,CAAC,GAAG;AAAA,MAC9C,CAAC,kBAAkB,qBAAqB,CAAC,GAAG;AAAA,MAC5C,CAAC,kBAAkB,+BAA+B,CAAC,GAAG,WAAW;AAAA,MACjE,CAAC,kBAAkB,8BAA8B,CAAC,GAAG,WAAW;AAAA,IAClE;AAAA,IACA;AAAA,EACF;AAEM,QAAA,SAAS,CAAC,MAAiD;AACjD,kBAAA,EAAE,OAAO,OAAO;AAC9B,gBAAY,SAAS,CAAC;AAAA,EACxB;AAEA,QAAM,kBAAkB,MACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MACJ,UAAU,CAAC,MAAY,OAAO,CAAC;AAAA,IAAA;AAAA,EACjC;AAGF,SACG,oBAAA,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,oBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,aAAa,WAAW,2BAC7E,UAAA;AAAA,IACC;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,8BAA8B;AAAA,IAChD;AAAA,KAEJ,EACF,CAAA;AAEJ,CAAC;AAED,YAAY,cAAc;"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AA2CO,MAAM,uBAAuB,CAClC,SACA,SACA,OACA,mBACuB;AACvB,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,YAAY;AAE5B,SAAO,WAAW;AAAA,IAChB,CAAC,kBAAkB,oCAAoC,CAAC,GAAG,SAAS,YAAY,YAAY,CAAC;AAAA,IAC7F,CAAC,kBAAkB,yCAAyC,CAAC,GAAG,YAAY,iBAAiB,CAAC,WAAW;AAAA,IACzG,CAAC,kBAAkB,qCAAqC,CAAC,GAAG,SAAS,WAAW,CAAC;AAAA,IACjF,CAAC,kBAAkB,6CAA6C,CAAC,GAAG,SAAS,WAAW;AAAA,EAAA,CACzF;AACH;AAEO,MAAM,cAAcA,eAAM,WAAW,CAAC,OAAyB,QAAqC;AACnG,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,KAAK;AAAA,IACf,UAAU,YAAY;AAAA,IACtB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,QAAQ,CAAC,CAAC;AAAA,IACV;AAAA,IACA;AAAA,IACA,QAAQ,aAAa,KAAK;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AACE,QAAA,UAAU,SAAS,YAAY,YAAY;AAC3C,QAAA,SAAS,YAAY,YAAY;AACjC,QAAA,cAAc,YAAY,YAAY;AACtC,QAAA,WAAW,YAAY,YAAY;AACnC,QAAA,UAAU,SAAS,SAAS;AAClC,QAAM,CAAC,SAAS,aAAa,IAAI,SAAkB;AAC7C,QAAA,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,GAAG,IAAI,MAAM,IAAI;AACxG,QAAM,aAAa,UAAU,CAAC,KAAK,SAAS,CAAC;AACvC,QAAA,gBAAgB,QAAQ,WAAW;AAEzC,QAAM,4BAA4B,WAAW,kBAAkB,sBAAsB,GAAG;AAAA,IACtF,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,IACpD,CAAC,kBAAkB,sCAAsC,CAAC,GAAG,WAAW;AAAA,IACxE,CAAC,kBAAkB,uCAAuC,CAAC,GAAG,WAAW,WAAW;AAAA,IACpF,CAAC,kBAAkB,sCAAsC,CAAC,GAAG,WAAW,YAAY;AAAA,IACpF,CAAC,kBAAkB,2CAA2C,CAAC,GAAG,WAAW,eAAe;AAAA,EAAA,CAC7F;AACD,QAAM,0BAA0B;AAAA,IAC9B,kBAAkB,oBAAoB;AAAA,IACtC;AAAA,MACE,CAAC,kBAAkB,8BAA8B,CAAC,GAAG;AAAA,MACrD,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,MACpD,CAAC,kBAAkB,6BAA6B,CAAC,GAAG;AAAA,MACpD,CAAC,kBAAkB,2BAA2B,CAAC,GAAG;AAAA,MAClD,CAAC,kBAAkB,qCAAqC,CAAC,GAAG,WAAW;AAAA,IACzE;AAAA,IACA;AAAA,EACF;AACA,QAAM,qBAAqB;AAAA,IACzB,kBAAkB,cAAc;AAAA,IAChC;AAAA,MACE,CAAC,kBAAkB,uBAAuB,CAAC,GAAG;AAAA,MAC9C,CAAC,kBAAkB,wBAAwB,CAAC,GAAG;AAAA,MAC/C,CAAC,kBAAkB,4BAA4B,CAAC,GAAG;AAAA,MACnD,CAAC,kBAAkB,uBAAuB,CAAC,GAAG;AAAA,MAC9C,CAAC,kBAAkB,qBAAqB,CAAC,GAAG;AAAA,MAC5C,CAAC,kBAAkB,+BAA+B,CAAC,GAAG,WAAW;AAAA,MACjE,CAAC,kBAAkB,8BAA8B,CAAC,GAAG,WAAW;AAAA,IAClE;AAAA,IACA;AAAA,EACF;AAEM,QAAA,SAAS,CAAC,MAAiD;AACjD,kBAAA,EAAE,OAAO,OAAO;AAC9B,gBAAY,SAAS,CAAC;AAAA,EACxB;AAEA,QAAM,kBAAkB,MACtB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,MACzD;AAAA,MACC,GAAG;AAAA,MACJ,UAAU,CAAC,MAAY,OAAO,CAAC;AAAA,IAAA;AAAA,EACjC;AAGF,SACG,oBAAA,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,oBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,aAAa,WAAW,2BAC7E,UAAA;AAAA,IACC;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,8BAA8B;AAAA,IAChD;AAAA,KAEJ,EACF,CAAA;AAEJ,CAAC;AAED,YAAY,cAAc;"}

package/Select.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { FormOnColor, AnalyticsId, IconSize, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
 import { useUuid } from "./hooks/useUuid.js";
@@ -18,7 +18,7 @@ const getIconColor = (invalid, disabled) => {
   const iconColor = invalid ? "cherry" : "blueberry";
   return disabled ? getColor("neutral", 500) : getColor(iconColor, 600);
 };
-const Select = React.forwardRef(function SelectForwardedRef(props, ref) {
+const Select = React__default.forwardRef(function SelectForwardedRef(props, ref) {
   const {
     className,
     children,

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":[],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AACtD,QAAA,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AAClH,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,OAAO,QAAQ,QAAQ;AACvB,QAAA,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IACpD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAa,EAAA,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,qBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,SACvG,GAAA,UAAA;AAAA,IAAY,YAAA,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAI,EAAA,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnB;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AACtD,QAAA,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AAClH,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,OAAO,QAAQ,QAAQ;AACvB,QAAA,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IACpD;AAAA,IACA;AAAA,EACF;AAEM,QAAA,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAa,EAAA,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAC,qBAAA,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,SACvG,GAAA,UAAA;AAAA,IAAY,YAAA,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAI,EAAA,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MACnB;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAC3C,GAAG;AAAA,UAEH;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EACF,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ,CAAC;"}

package/Slider.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { useSize } from "./hooks/useSize.js";
 import { useUuid } from "./hooks/useUuid.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
-import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
+import { mergeRefs, isMutableRefObject } from "./utils/refs.js";
 import { E as ErrorWrapper } from "./ErrorWrapper.js";
 import { T as Title } from "./Title.js";
 import styles from "./components/Slider/styles.module.scss";
@@ -26,7 +26,7 @@ const useSafeNumberValue = (initial, min, max) => {
   }, [min, max]);
   return [value, setSafeValue];
 };
-const Slider = React.forwardRef((props, ref) => {
+const Slider = React__default.forwardRef((props, ref) => {
   const {
     title,
     ariaLabel,