@helsenorge/designsystem-react 7.2.0 → 7.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## [7.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.2.0&targetVersion=GTv7.2.1) (2024-04-19)
+
+### Bug Fixes
+
+- i button med accessibility-character-arrow er pilen skjult for skjermleser
+  ([0a8fd28](https://github.com/helsenorge/designsystem/commit/0a8fd28f16234ff8ca620c5b086d22b080a2cb17)), closes
+  [#273312](https://github.com/helsenorge/designsystem/issues/273312)
+- width satt feil på popmenu ([fb4dc2d](https://github.com/helsenorge/designsystem/commit/fb4dc2d7af645e640a44f7800318f2ffcc64f195)), closes
+  [#323102](https://github.com/helsenorge/designsystem/issues/323102)
+
+## [7.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.1.0&targetVersion=GTv7.2.0) (2024-04-19)
+
+### Features
+
+- knappen i dropdown skal ikke være fluid
+  ([a3abe2b](https://github.com/helsenorge/designsystem/commit/a3abe2bf5a57e62302b5e4f1a1f1b609452effd0)), closes
+  [#323389](https://github.com/helsenorge/designsystem/issues/323389)
+
+### Bug Fixes
+
+- bruk supernova-sjekk som funker i ff
+  ([afae2a9](https://github.com/helsenorge/designsystem/commit/afae2a90d9e453be054016b5922aa378500f91cc))
+- oppdater sjekk for om vi er i superNova
+  ([b20a776](https://github.com/helsenorge/designsystem/commit/b20a776f293953d78ccab6e40d687bab67676a28))
+- oppdater sjekk for om vi er i superNova
+  ([167d572](https://github.com/helsenorge/designsystem/commit/167d572261a91fd60a8c432d4d990356a610115f))
+
 ## [7.1.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.0.0&targetVersion=GTv7.1.0) (2024-04-17)
 
 ### Features
@@ -1360,12 +1387,12 @@ Dette er fordi vi skal kunne dynamisk importere alt som ligger i Icons, så da b
 
 ### Bug Fixes
 
-- økt kontrast på understreking av lenker
-  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
-  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 - panel har avstand fra tittel til badge
   ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
   [#282359](https://github.com/helsenorge/designsystem/issues/282359)
+- økt kontrast på understreking av lenker
+  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
+  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
 
 ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/components/AnchorLink/AnchorLink.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./AnchorLink").AnchorLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Avatar/Avatar.stories.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { AvatarSize } from './Avatar';
 declare const meta: {
@@ -5,6 +6,7 @@ declare const meta: {
     component: import("./Avatar").AvatarType;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Badge/Badge.stories.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: import("./Badge").BadgeType;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Button/Button.js

@@ -1,5 +1,5 @@
 import o, { useRef as lt, useEffect as ct } from "react";
-import p from "classnames";
+import d from "classnames";
 import { Icon as it } from "../Icon/Icon.js";
 import { AnalyticsId as $, IconSize as v } from "../../constants.js";
 import { useBreakpoint as ut } from "../../hooks/useBreakpoint.js";
@@ -7,16 +7,16 @@ import { useHover as D } from "../../hooks/useHover.js";
 import { useIcons as mt } from "../../hooks/useIcons.js";
 import { getColor as i } from "../../theme/currys/color.js";
 import { breakpoints as bt } from "../../theme/grid.js";
-import { isTest as pt, isProd as dt } from "../../utils/environment.js";
+import { isTest as dt, isProd as pt } from "../../utils/environment.js";
 import ft from "../Icons/ArrowRight.js";
 import t from "../Button/styles.module.scss";
-const ht = (e, r, n, d, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700) : i("white") : n ? !s || e ? i("neutral", 500) : `${i("white")}b3` : e && !s || !e && s ? "white" : d === "normal" ? i("blueberry", 600) : i("cherry", 500), N = (e, r) => r && e ? v.Small : e ? v.Medium : v.XSmall, gt = (e, r, n) => {
+const ht = (e, r, n, p, a, g) => g && n ? !a || e ? i("neutral", r ? 500 : 700) : i("white") : n ? !a || e ? i("neutral", 500) : `${i("white")}b3` : e && !a || !e && a ? "white" : p === "normal" ? i("blueberry", 600) : i("cherry", 500), N = (e, r) => r && e ? v.Small : e ? v.Medium : v.XSmall, gt = (e, r, n) => {
   if (n && e && (r === void 0 || r === ""))
     throw new Error("Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav");
 }, _t = o.forwardRef(function(r, n) {
   const {
-    ariaLabel: d,
-    id: s,
+    ariaLabel: p,
+    id: a,
     children: g,
     wrapperClassName: O,
     className: X,
@@ -37,11 +37,11 @@ const ht = (e, r, n, d, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700)
     target: U,
     type: J = "button",
     ...F
-  } = r, [u, m, H] = mt(o.Children.toArray(g)), { hoverRef: L, isHovered: K } = w === "button" ? D(n) : D(n), Q = lt(null), a = !!(u || m) && !H, M = u && (m || _) && !a, y = j === "ondark", h = ut() < bt.md, P = B === "destructive" && !f, Y = I === "outline", l = I === "borderless", T = ht(I === "fill", l, f, B, y, h), C = _ === "icon" && !l, b = q === "large" && !P && !l, Z = _ === "accessibility-character" && !A && !u && !m && !C && l, tt = { ...F }, V = p(
+  } = r, [u, m, H] = mt(o.Children.toArray(g)), { hoverRef: L, isHovered: K } = w === "button" ? D(n) : D(n), Q = lt(null), s = !!(u || m) && !H, M = u && (m || _) && !s, y = j === "ondark", h = ut() < bt.md, P = B === "destructive" && !f, Y = I === "outline", l = I === "borderless", T = ht(I === "fill", l, f, B, y, h), C = _ === "icon" && !l, b = q === "large" && !P && !l, Z = _ === "accessibility-character" && !A && !u && !m && !C && l, tt = { ...F }, V = d(
     t["button-wrapper"],
     { [t["button-wrapper--fluid"]]: A || R },
     O
-  ), ot = p(
+  ), ot = d(
     t.button,
     {
       [t["button--destructive"]]: P,
@@ -49,36 +49,36 @@ const ht = (e, r, n, d, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700)
       [t["button--large"]]: b,
       [t["button--outline"]]: Y,
       [t["button--borderless"]]: l,
-      [t["button--left-icon"]]: u && !a,
-      [t["button--right-icon"]]: m && !a,
+      [t["button--left-icon"]]: u && !s,
+      [t["button--right-icon"]]: m && !s,
       [t["button--both-icons"]]: M,
-      [t["button--only-icon"]]: a,
+      [t["button--only-icon"]]: s,
       [t["button--arrow"]]: C,
       [t["button--on-dark"]]: y
     },
     X
-  ), et = p(t.button__text, {
+  ), et = d(t.button__text, {
     [t["button__text--ellipsis"]]: R
-  }), rt = p(t.diagonal, {
+  }), rt = d(t.diagonal, {
     [t["diagonal--on-dark"]]: y
   });
   ct(() => {
-    gt(a, d, !pt() && !dt());
+    gt(s, p, !dt() && !pt());
   }, []);
-  const k = (c, st, at) => c ? o.cloneElement(c, {
-    size: st,
+  const k = (c, at, st) => c ? o.cloneElement(c, {
+    size: at,
     color: c != null && c.props.color ? c.props.color : T,
     isHovered: K,
-    className: at
-  }) : null, nt = () => /* @__PURE__ */ o.createElement("span", { className: et, ref: Q }, f && l && /* @__PURE__ */ o.createElement("span", { className: rt }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, a ? d : H)), W = () => /* @__PURE__ */ o.createElement("span", { className: ot }, k(u, N(b, h), a ? void 0 : t["button__left-icon"]), nt(), C ? k(
+    className: st
+  }) : null, nt = () => /* @__PURE__ */ o.createElement("span", { className: et, ref: Q }, f && l && /* @__PURE__ */ o.createElement("span", { className: rt }, /* @__PURE__ */ o.createElement("span", { className: t.diagonal__line })), /* @__PURE__ */ o.createElement("span", null, s ? p : H)), W = () => /* @__PURE__ */ o.createElement("span", { className: ot }, k(u, N(b, h), s ? void 0 : t["button__left-icon"]), nt(), C ? k(
     /* @__PURE__ */ o.createElement(it, { svgIcon: ft }),
     N(b, h),
-    p(t.button__arrow, { [t["button__arrow--both-icons"]]: M })
-  ) : k(m, N(b, h), t["button__right-icon"]), Z && /* @__PURE__ */ o.createElement("span", { style: { color: T }, className: t["button__right-unicode-arrow"] }, "  →"));
+    d(t.button__arrow, { [t["button__arrow--both-icons"]]: M })
+  ) : k(m, N(b, h), t["button__right-icon"]), Z && /* @__PURE__ */ o.createElement("span", { style: { color: T }, className: t["button__right-unicode-arrow"], "aria-hidden": !0 }, "  →"));
   return /* @__PURE__ */ o.createElement(o.Fragment, null, w === "button" && /* @__PURE__ */ o.createElement(
     "button",
     {
-      id: s,
+      id: a,
       onBlur: E,
       onClick: x,
       disabled: f,
@@ -94,7 +94,7 @@ const ht = (e, r, n, d, s, g) => g && n ? !s || e ? i("neutral", r ? 500 : 700)
   ), w === "a" && /* @__PURE__ */ o.createElement(
     "a",
     {
-      id: s,
+      id: a,
       onBlur: E,
       onClick: x,
       "data-testid": z,

package/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']}>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { AriaAttributes, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from './../Icon';\nimport { HTMLButtonProps, HTMLAnchorProps, AnalyticsId } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { BaseIconElement, useIcons } from '../../hooks/useIcons';\nimport { getColor } from '../../theme/currys/color';\nimport { breakpoints } from '../../theme/grid';\nimport { isTest, isProd } from '../../utils/environment';\nimport ArrowRight from '../Icons/ArrowRight';\n\nimport buttonStyles from './styles.module.scss';\n\nexport type ButtonConcept = 'normal' | 'destructive';\nexport type ButtonVariant = 'fill' | 'outline' | 'borderless';\nexport type ButtonSize = 'medium' | 'large';\nexport type ButtonMode = 'onlight' | 'ondark';\nexport type ButtonTags = 'button' | 'a';\nexport type ButtonArrows = 'icon' | 'accessibility-character';\n\nexport interface ButtonProps extends HTMLButtonProps, HTMLAnchorProps, AriaAttributes {\n  /** Sets the aria-label of the button, use when the button only includes an icon */\n  ariaLabel?: string;\n  /** Gives a unique id to the button */\n  id?: string;\n  /** Sets the content of the button. */\n  children: React.ReactNode;\n  /** Adds custom classes to the wrapper element. */\n  wrapperClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Enables an arrow icon to the right inside the button (Not available in borderless variant) */\n  arrow?: ButtonArrows;\n  /** Changes the intent of the button. Mostly changes the color profile. */\n  concept?: ButtonConcept;\n  /** Disables text wrapping and enables ellipsis. */\n  ellipsis?: boolean;\n  /** Makes the button scale to full width of its parent element. */\n  fluid?: boolean;\n  /** Changes the underlying element of the button. */\n  htmlMarkup?: ButtonTags;\n  /** Changes the button colors for different backgrounds. */\n  mode?: ButtonMode;\n  /** Function that is called when the Button loses focus */\n  onBlur?: () => void;\n  /** Function that is called when clicked */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null) => void;\n  /** Changes the button colors for different backgrounds. (Large not available in borderless variant) */\n  size?: ButtonSize;\n  /** Changes the visual representation of the button. */\n  variant?: ButtonVariant;\n  /** Specifies the focus order relative to the other buttons or controls on the page  */\n  tabIndex?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Button type. Default: button */\n  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];\n}\n\nconst getIconColor = (\n  fill: boolean,\n  borderless: boolean,\n  disabled: boolean,\n  concept: ButtonConcept,\n  ondark: boolean,\n  mobile: boolean\n): string => {\n  if (mobile && disabled) {\n    return !ondark || fill ? getColor('neutral', !borderless ? 700 : 500) : getColor('white');\n  }\n  if (disabled) {\n    return !ondark || fill ? getColor('neutral', 500) : `${getColor('white')}b3`;\n  }\n  if ((fill && !ondark) || (!fill && ondark)) {\n    return 'white';\n  }\n\n  return concept === 'normal' ? getColor('blueberry', 600) : getColor('cherry', 500);\n};\nconst getLargeIconSize = (large: boolean, mobile: boolean): IconSize => {\n  if (mobile && large) return IconSize.Small;\n  if (large) return IconSize.Medium;\n  return IconSize.XSmall;\n};\n\nconst checkOnlyIconAria = (onlyIcon: boolean, ariaLabel: string | undefined, devEnv: boolean): void => {\n  if (devEnv && onlyIcon && (ariaLabel === undefined || ariaLabel === '')) {\n    throw new Error('Fyll inn ariaLabel prop på Button uten tekst for å opprettholde UU krav');\n  }\n};\n\nconst Button = React.forwardRef(function ButtonForwardedRef(\n  props: ButtonProps,\n  ref: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>\n) {\n  const {\n    ariaLabel,\n    id,\n    children,\n    wrapperClassName,\n    className,\n    arrow,\n    concept = 'normal',\n    disabled = false,\n    ellipsis = false,\n    fluid = false,\n    htmlMarkup = 'button',\n    mode = 'onlight',\n    onBlur,\n    onClick,\n    size = 'medium',\n    variant = 'fill',\n    href,\n    tabIndex,\n    testId,\n    target,\n    type = 'button',\n    ...restProps\n  } = props;\n\n  const [leftIcon, rightIcon, restChildren] = useIcons(React.Children.toArray(children));\n  const { hoverRef, isHovered } =\n    htmlMarkup === 'button'\n      ? useHover<HTMLButtonElement>(ref as React.RefObject<HTMLButtonElement>)\n      : useHover<HTMLAnchorElement>(ref as React.RefObject<HTMLAnchorElement>);\n  const buttonContentRef = useRef<HTMLDivElement>(null);\n  const onlyIcon = !!(leftIcon || rightIcon) && !restChildren;\n  const bothIcons = leftIcon && (rightIcon || arrow) && !onlyIcon;\n  const onDark = mode === 'ondark';\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  const destructive = concept === 'destructive' && !disabled;\n  const outlineVariant = variant === 'outline';\n  const borderlessVariant = variant === 'borderless';\n  const iconColor = getIconColor(variant === 'fill', borderlessVariant, disabled, concept, onDark, mobile);\n  const hasArrow = arrow === 'icon' && !borderlessVariant;\n  const large = size === 'large' && !destructive && !borderlessVariant;\n  const hasUURightArrow = arrow === 'accessibility-character' && !fluid && !leftIcon && !rightIcon && !hasArrow && borderlessVariant;\n  const rest = { ...restProps };\n\n  const buttonWrapperClasses = classNames(\n    buttonStyles['button-wrapper'],\n    { [buttonStyles['button-wrapper--fluid']]: fluid || ellipsis },\n    wrapperClassName\n  );\n  const buttonClasses = classNames(\n    buttonStyles.button,\n    {\n      [buttonStyles['button--destructive']]: destructive,\n      [buttonStyles['button--normal']]: !large,\n      [buttonStyles['button--large']]: large,\n      [buttonStyles['button--outline']]: outlineVariant,\n      [buttonStyles['button--borderless']]: borderlessVariant,\n      [buttonStyles['button--left-icon']]: leftIcon && !onlyIcon,\n      [buttonStyles['button--right-icon']]: rightIcon && !onlyIcon,\n      [buttonStyles['button--both-icons']]: bothIcons,\n      [buttonStyles['button--only-icon']]: onlyIcon,\n      [buttonStyles['button--arrow']]: hasArrow,\n      [buttonStyles['button--on-dark']]: onDark,\n    },\n    className\n  );\n  const buttonTextClasses = classNames(buttonStyles['button__text'], {\n    [buttonStyles['button__text--ellipsis']]: ellipsis,\n  });\n  const diagonalClasses = classNames(buttonStyles['diagonal'], {\n    [buttonStyles['diagonal--on-dark']]: onDark,\n  });\n\n  useEffect(() => {\n    checkOnlyIconAria(onlyIcon, ariaLabel, !isTest() && !isProd());\n  }, []);\n\n  const renderIcon = (iconElement: BaseIconElement | null, iconSize: number, iconClassName?: string): BaseIconElement | null => {\n    return iconElement\n      ? React.cloneElement(iconElement, {\n          size: iconSize,\n          color: iconElement?.props.color ? iconElement.props.color : iconColor,\n          isHovered,\n          className: iconClassName,\n        })\n      : null;\n  };\n\n  const renderButtonContent = (): JSX.Element => {\n    return (\n      <span className={buttonTextClasses} ref={buttonContentRef}>\n        {disabled && borderlessVariant && (\n          <span className={diagonalClasses}>\n            <span className={buttonStyles['diagonal__line']} />\n          </span>\n        )}\n        <span>{onlyIcon ? ariaLabel : restChildren}</span>\n      </span>\n    );\n  };\n\n  const renderbuttonContentWrapper = (): JSX.Element => (\n    <span className={buttonClasses}>\n      {renderIcon(leftIcon, getLargeIconSize(large, mobile), !onlyIcon ? buttonStyles['button__left-icon'] : undefined)}\n      {renderButtonContent()}\n      {hasArrow\n        ? renderIcon(\n            <Icon svgIcon={ArrowRight} />,\n            getLargeIconSize(large, mobile),\n            classNames(buttonStyles['button__arrow'], { [buttonStyles['button__arrow--both-icons']]: bothIcons })\n          )\n        : renderIcon(rightIcon, getLargeIconSize(large, mobile), buttonStyles['button__right-icon'])}\n      {hasUURightArrow && (\n        <span style={{ color: iconColor }} className={buttonStyles['button__right-unicode-arrow']} aria-hidden>\n          {'  →'}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <>\n      {htmlMarkup === 'button' && (\n        <button\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          disabled={disabled}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          ref={hoverRef as React.ForwardedRef<HTMLButtonElement>}\n          tabIndex={tabIndex}\n          type={type}\n          {...rest}\n        >\n          {renderbuttonContentWrapper()}\n        </button>\n      )}\n      {htmlMarkup === 'a' && (\n        <a\n          id={id}\n          onBlur={onBlur}\n          onClick={onClick}\n          data-testid={testId}\n          data-analyticsid={AnalyticsId.Button}\n          className={buttonWrapperClasses}\n          href={href}\n          target={target}\n          rel={target === '_blank' ? 'noopener noreferrer' : props.rel}\n          ref={hoverRef as React.ForwardedRef<HTMLAnchorElement>}\n          tabIndex={tabIndex}\n          {...restProps}\n        >\n          {renderbuttonContentWrapper()}\n        </a>\n      )}\n    </>\n  );\n});\n\nexport default Button;\n"],"names":["getIconColor","fill","borderless","disabled","concept","ondark","mobile","getColor","getLargeIconSize","large","IconSize","checkOnlyIconAria","onlyIcon","ariaLabel","devEnv","Button","React","props","ref","id","children","wrapperClassName","className","arrow","ellipsis","fluid","htmlMarkup","mode","onBlur","onClick","size","variant","href","tabIndex","testId","target","type","restProps","leftIcon","rightIcon","restChildren","useIcons","hoverRef","isHovered","useHover","buttonContentRef","useRef","bothIcons","onDark","useBreakpoint","breakpoints","destructive","outlineVariant","borderlessVariant","iconColor","hasArrow","hasUURightArrow","rest","buttonWrapperClasses","classNames","buttonStyles","buttonClasses","buttonTextClasses","diagonalClasses","useEffect","isTest","isProd","renderIcon","iconElement","iconSize","iconClassName","renderButtonContent","renderbuttonContentWrapper","Icon","ArrowRight","AnalyticsId","Button$1"],"mappings":"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"}

package/components/Checkbox/Checkbox.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Checkbox").CheckboxProps & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Close/Close.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Close").CloseProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/DictionaryTrigger/DictionaryTrigger.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./DictionaryTrigger").DictionaryTriggerProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Dropdown/Dropdown.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./Dropdown").DropdownProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Duolist/Duolist.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Duolist").DuolistProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Duolist/styles.module.scss

@@ -25,25 +25,6 @@
     font-size: $font-size-md;
   }
 
-  &__dt,
-  &__dd {
-    line-height: $lineheight-size-md;
-    padding-bottom: getSpacer(2xs);
-
-    &:last-of-type {
-      padding-bottom: 0;
-    }
-
-    &--bold {
-      font-weight: 600;
-      line-height: $lineheight-size-sm;
-    }
-
-    &--non-formatted {
-      display: inline;
-    }
-  }
-
   &__dt {
     padding-right: getSpacer(l);
 
@@ -64,6 +45,25 @@
     margin-inline-start: 0;
   }
 
+  &__dt,
+  &__dd {
+    line-height: $lineheight-size-md;
+    padding-bottom: getSpacer(2xs);
+
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+
+    &--bold {
+      font-weight: 600;
+      line-height: $lineheight-size-sm;
+    }
+
+    &--non-formatted {
+      display: inline;
+    }
+  }
+
   &--line &__dt,
   &--line &__dd {
     padding-top: getSpacer(2xs);

package/components/EmptyState/EmptyState.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./EmptyState").EmptyStateProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Expander/Expander.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./Expander").ExpanderProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Expander/styles.module.scss

@@ -34,6 +34,19 @@
     }
   }
 
+  &__button,
+  &__trigger {
+    &--sticky {
+      position: fixed;
+      top: 0;
+    }
+
+    &--absolute {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
   &__button {
     position: relative;
     padding-right: getSpacer(s);
@@ -134,19 +147,6 @@
     }
   }
 
-  &__button,
-  &__trigger {
-    &--sticky {
-      position: fixed;
-      top: 0;
-    }
-
-    &--absolute {
-      position: absolute;
-      bottom: 0;
-    }
-  }
-
   &__content {
     $content: &;
 

package/components/ExpanderHierarchy/ExpanderHierarchy.stories.d.ts

@@ -10,6 +10,7 @@ declare const meta: {
     component: import("./ExpanderHierarchy").ExpanderHierarchyCompound;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/ExpanderList/ExpanderList.stories.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: import("./ExpanderList").ExpanderListCompound;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/FormGroup/FormGroup.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./FormGroup").FormGroupProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/FormLayout/FormLayout.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./FormLayout").FormLayoutProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/HelpBubble/HelpBubble.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./HelpBubble").HelpBubbleProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/HelpPanel/HelpPanel.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./HelpPanel").HelpPanelProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/HelpQuestion/HelpQuestion.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./HelpQuestion").HelpQuestionProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/HighlightBox/HighlightBox.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./HighlightBox").HighlightBoxProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/HorizontalScroll/styles.module.scss

@@ -1,6 +1,8 @@
 @import '../../scss/breakpoints';
 @import '../../scss/palette';
 
+// Disables fordi stylelint og prettier er uenige
+/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
 $gradient:
   rgb(0 0 0 / 27%),
   rgb(0 0 0 / 27%) 18%,

package/components/Icon/Icon.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Icon").IconProps & React.RefAttributes<SVGSVGElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Illustration/Illustration.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Illustration").IllustrationProps & React.RefAttributes<SVGSVGElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Illustration/Illustrations.stories.d.ts

@@ -9,6 +9,7 @@ declare const meta: {
     component: React.FC<import("../LazyIllustration").LazyIllustrationProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Input/Input.stories.d.ts

@@ -10,6 +10,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Label/Label.stories.d.ts

@@ -9,6 +9,7 @@ declare const meta: {
     component: React.FunctionComponent<import("./Label").LabelProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/LazyIcon/LazyIcon.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./LazyIcon").LazyIconProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/LazyIllustration/LazyIllustration.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./LazyIllustration").LazyIllustrationProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/LinkList/LinkList.stories.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: import("./LinkList").CompoundComponent;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/List/styles.module.scss

@@ -20,6 +20,8 @@
 
         > #{$list}__item {
           > #{$list}--bullet {
+            // for å beholde utseende disables warning på whitespace her
+            /* stylelint-disable-next-line no-irregular-whitespace */
             list-style-type: '⬥ ';
 
             > #{$list}__item {
@@ -28,6 +30,8 @@
               }
 
               > #{$list}--bullet {
+                // for å beholde utseende disables warning på whitespace her
+                /* stylelint-disable-next-line no-irregular-whitespace */
                 list-style-type: '– ';
               }
             }
@@ -38,6 +42,8 @@
   }
 
   &--dashed {
+    // for å beholde utseende disables warning på whitespace her
+    /* stylelint-disable-next-line no-irregular-whitespace */
     list-style-type: '– ';
   }
 

package/components/Loader/Loader.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Loader").LoaderProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Logo/Logo.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Logo").LogoProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/NotificationPanel/NotificationPanel.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./NotificationPanel").NotificationPanelProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Panel/Panel.stories.d.ts

@@ -9,6 +9,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Panel").PanelProps & React.RefAttributes<HTMLHeadingElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/PanelList/PanelList.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./PanelList").PanelListProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/PopMenu/PopMenu.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./PopMenu").PopMenuProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/PopMenu/styles.module.scss

@@ -18,20 +18,20 @@
     box-shadow: none;
     outline: none;
   }
+}
 
-  :focus > .pop-menu-button {
-    box-shadow: none;
-  }
+html :focus > .pop-menu-button {
+  box-shadow: none;
+  border: solid;
 }
 
-// overrides
-:focus > .pop-menu-button:hover {
+.pop-menu-button :focus > .pop-menu-button {
   box-shadow: none;
 }
 
-html :focus > .pop-menu-button {
+// overrides
+:focus > .pop-menu-button:hover {
   box-shadow: none;
-  border: solid;
 }
 
 .pop-menu-button--on-white {
@@ -108,7 +108,6 @@ html :focus > .pop-menu-button {
 
 .pop-menu__pop-over {
   width: 20.875rem;
-  width: 26.125rem;
   border: 0.125rem solid rgb(24 128 151);
   box-shadow: 0 0 0.3125rem 0 rgb(0 0 0 / 50%);
 

package/components/PopOver/styles.module.scss

@@ -20,10 +20,6 @@
   z-index: 3;
   visibility: hidden;
 
-  & + &__arrow {
-    visibility: hidden;
-  }
-
   &--visible {
     visibility: visible;
 
@@ -65,4 +61,8 @@
       filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }
   }
+
+  & + &__arrow {
+    visibility: hidden;
+  }
 }

package/components/PromoPanel/PromoPanel.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./PromoPanel").PromoPanelProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/RadioButton/RadioButton.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./RadioButton").RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Select/Select.d.ts

@@ -26,6 +26,8 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
     width?: number;
     /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */
     defaultValue?: string | number;
+    /** Adds custom classes to the wrapper tag */
+    wrapperClassName?: boolean;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/components/Select/Select.js

@@ -1,68 +1,69 @@
 import r from "react";
-import v from "classnames";
-import { FormMode as z, AnalyticsId as D, IconSize as F, AVERAGE_CHARACTER_WIDTH_PX as H } from "../../constants.js";
+import s from "classnames";
+import { FormMode as F, AnalyticsId as H, IconSize as M, AVERAGE_CHARACTER_WIDTH_PX as U } from "../../constants.js";
 import { useUuid as w } from "../../hooks/useUuid.js";
-import { getColor as y } from "../../theme/currys/color.js";
-import M from "../ErrorWrapper/ErrorWrapper.js";
-import { Icon as U } from "../Icon/Icon.js";
-import V from "../Icons/ChevronDown.js";
-import { renderLabel as X } from "../Label/Label.js";
+import { getColor as v } from "../../theme/currys/color.js";
+import V from "../ErrorWrapper/ErrorWrapper.js";
+import { Icon as X } from "../Icon/Icon.js";
+import j from "../Icons/ChevronDown.js";
+import { renderLabel as B } from "../Label/Label.js";
 import e from "../Select/styles.module.scss";
-const j = (o) => `calc(${o * H}px + 2rem)`, B = (o, t) => t ? y("neutral", 500) : y(o ? "cherry" : "blueberry", 600), G = r.forwardRef(function(t, c) {
+const G = (o) => `calc(${o * U}px + 2rem)`, L = (o, t) => t ? v("neutral", 500) : v(o ? "cherry" : "blueberry", 600), P = r.forwardRef(function(t, c) {
   const {
-    className: C,
+    className: y,
     children: I,
     concept: h = "normal",
-    disabled: n,
+    disabled: l,
     error: E,
-    errorText: s,
+    errorText: i,
     errorTextId: x,
     label: S,
-    selectId: i,
-    name: W = i,
-    mode: l = z.onwhite,
-    testId: g,
-    width: d,
-    required: m,
-    value: N,
+    selectId: d,
+    name: W = d,
+    mode: n = F.onwhite,
+    testId: N,
+    width: m,
+    required: p,
+    value: g,
     defaultValue: R,
-    autoComplete: p = "off",
-    ...T
-  } = t, u = w(i), f = w(x), b = l === "onblueberry", a = l === "oninvalid" || !!s || !!E, A = B(a, !!n), _ = d ? j(d) : void 0, $ = v(
+    autoComplete: u = "off",
+    wrapperClassName: T,
+    ...A
+  } = t, f = w(d), b = w(x), C = n === "onblueberry", a = n === "oninvalid" || !!i || !!E, _ = L(a, !!l), $ = m ? G(m) : void 0, q = s(
     e["select-inner-wrapper"],
     {
       [e["select-inner-wrapper--transparent"]]: h === "transparent",
-      [e["select-inner-wrapper--on-blueberry"]]: b,
+      [e["select-inner-wrapper--on-blueberry"]]: C,
       [e["select-inner-wrapper--invalid"]]: a,
-      [e["select-inner-wrapper--disabled"]]: n
+      [e["select-inner-wrapper--disabled"]]: l
     },
-    C
-  ), q = v(e.select, {
-    [e["select--on-blueberry"]]: b,
+    y
+  ), z = s(e.select, {
+    [e["select--on-blueberry"]]: C,
     [e["select--invalid"]]: a
-  });
-  return /* @__PURE__ */ r.createElement(M, { errorText: s, errorTextId: f }, /* @__PURE__ */ r.createElement("div", { "data-testid": g, "data-analyticsid": D.Select, className: e["select-wrapper"], style: { maxWidth: _ } }, X(S, u, l), /* @__PURE__ */ r.createElement("div", { className: $ }, /* @__PURE__ */ r.createElement(U, { className: e["select-arrow"], svgIcon: V, color: A, size: F.XSmall }), /* @__PURE__ */ r.createElement(
+  }), D = s(e["select-wrapper"], T);
+  return /* @__PURE__ */ r.createElement(V, { errorText: i, errorTextId: b }, /* @__PURE__ */ r.createElement("div", { "data-testid": N, "data-analyticsid": H.Select, className: D, style: { maxWidth: $ } }, B(S, f, n), /* @__PURE__ */ r.createElement("div", { className: q }, /* @__PURE__ */ r.createElement(X, { className: e["select-arrow"], svgIcon: j, color: _, size: M.XSmall }), /* @__PURE__ */ r.createElement(
     "select",
     {
       "aria-invalid": !!a,
-      id: u,
+      id: f,
       name: W,
-      className: q,
-      disabled: n,
+      className: z,
+      disabled: l,
       ref: c,
-      required: m,
-      "aria-describedby": [t["aria-describedby"] || "", f].join(" "),
-      "aria-required": !!m,
-      value: N,
+      required: p,
+      "aria-describedby": [t["aria-describedby"] || "", b].join(" "),
+      "aria-required": !!p,
+      value: g,
       defaultValue: R,
-      autoComplete: p || void 0,
-      ...T
+      autoComplete: u || void 0,
+      ...A
     },
     I
   ))));
-}), re = G;
+}), oe = P;
 export {
-  G as Select,
-  re as default
+  P as Select,
+  oe as default
 };
 //# sourceMappingURL=Select.js.map

package/components/Select/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, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper 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 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  mode?: keyof typeof FormMode;\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}\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    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === '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  return (\n    <ErrorWrapper errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\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={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\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":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AA+CA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EACD,IAAAnB,GAEEoB,IAAOC,EAAQZ,CAAQ,GACvBa,IAAgBD,EAAQd,CAAW,GACnCgB,IAAcZ,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDmB,IAAY9B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C6B,IAAWX,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9CY,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGxB,MAAY;AAAA,MACjE,CAACwB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGjC;AAAA,MACjD,CAACiC,EAAa,gCAAgC,CAAC,GAAGhC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI2B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGjC;AAAA,EAAA,CACpC;AAED,yCACGmC,GAAa,EAAA,WAAAxB,GAAsB,aAAagB,KAC/CvB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBkB,EAAY,QAAQ,WAAWH,EAAa,gBAAgB,GAAG,OAAO,EAAE,UAAAH,EACjH,EAAA,GAAAO,EAAYxB,GAAOY,GAAMT,CAAgB,GAC1CZ,gBAAAA,EAAA,cAAC,SAAI,WAAW2B,qCACbO,GAAK,EAAA,WAAWL,EAAa,cAAc,GAAG,SAASM,GAAa,OAAOV,GAAW,MAAMW,EAAS,QAAQ,GAC9GpC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAIyB;AAAA,MACJ,MAAAV;AAAA,MACA,WAAWmB;AAAA,MACX,UAAAjC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkB,CAACf,EAAM,kBAAkB,KAAK,IAAIsB,CAAa,EAAE,KAAK,GAAG;AAAA,MAC3E,iBAAe,CAAC,CAACP;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGC;AAAA,IAAA;AAAA,IAEHhB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDiC,KAAetC;"}
+{"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, FormMode, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper 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 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  mode?: keyof typeof FormMode;\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?: boolean;\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    label,\n    selectId,\n    name = selectId,\n    mode = FormMode.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 = mode === 'onblueberry';\n  const invalid = mode === '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 errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, mode as FormMode)}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\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={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\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":["getSelectMaxWidth","characters","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","className","children","concept","error","errorText","errorTextId","label","selectId","name","mode","FormMode","testId","width","required","value","defaultValue","autoComplete","wrapperClassName","rest","uuid","useUuid","errorTextUuid","onBlueberry","iconColor","maxWidth","selectInnerWrapperClasses","classNames","selectStyles","selectClasses","selectWrapperClasses","ErrorWrapper","AnalyticsId","renderLabel","Icon","ChevronDown","IconSize","Select$1"],"mappings":";;;;;;;;;;AAiDA,MAAMA,IAAoB,CAACC,MAGlB,QAAQA,IAAaC,CAA0B,cAGlDC,IAAe,CAACC,GAAkBC,MAE/BA,IAAWC,EAAS,WAAW,GAAG,IAAIA,EAD3BF,IAAU,WAAW,aAC0B,GAAG,GAGzDG,IAASC,EAAM,WAAW,SAA4BC,GAAoBC,GAAmC;AAClH,QAAA;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAR;AAAA,IACA,OAAAS;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAOD;AAAA,IACP,MAAAE,IAAOC,EAAS;AAAA,IAChB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,kBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAApB,GAEEqB,IAAOC,EAAQb,CAAQ,GACvBc,IAAgBD,EAAQf,CAAW,GACnCiB,IAAcb,MAAS,eACvBhB,IAAUgB,MAAS,eAAe,CAAC,CAACL,KAAa,CAAC,CAACD,GACnDoB,IAAY/B,EAAaC,GAAS,CAAC,CAACC,CAAQ,GAC5C8B,IAAWZ,IAAQvB,EAAkBuB,CAAK,IAAI,QAE9Ca,IAA4BC;AAAA,IAChCC,EAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAACA,EAAa,mCAAmC,CAAC,GAAGzB,MAAY;AAAA,MACjE,CAACyB,EAAa,oCAAoC,CAAC,GAAGL;AAAA,MACtD,CAACK,EAAa,+BAA+B,CAAC,GAAGlC;AAAA,MACjD,CAACkC,EAAa,gCAAgC,CAAC,GAAGjC;AAAA,IACpD;AAAA,IACAM;AAAA,EAAA,GAGI4B,IAAgBF,EAAWC,EAAa,QAAQ;AAAA,IACpD,CAACA,EAAa,sBAAsB,CAAC,GAAGL;AAAA,IACxC,CAACK,EAAa,iBAAiB,CAAC,GAAGlC;AAAA,EAAA,CACpC,GAEKoC,IAAuBH,EAAWC,EAAa,gBAAgB,GAAGV,CAAgB;AAExF,yCACGa,GAAa,EAAA,WAAA1B,GAAsB,aAAaiB,KAC/CxB,gBAAAA,EAAA,cAAC,SAAI,eAAac,GAAQ,oBAAkBoB,EAAY,QAAQ,WAAWF,GAAsB,OAAO,EAAE,UAAAL,EAAA,KACvGQ,EAAY1B,GAAOa,GAAMV,CAAgB,GACzCZ,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW4B,EACd,GAAA5B,gBAAAA,EAAA,cAACoC,KAAK,WAAWN,EAAa,cAAc,GAAG,SAASO,GAAa,OAAOX,GAAW,MAAMY,EAAS,QAAQ,GAC9GtC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,CAAC,CAACJ;AAAA,MAChB,IAAI0B;AAAA,MACJ,MAAAX;AAAA,MACA,WAAWoB;AAAA,MACX,UAAAlC;AAAA,MACA,KAAAK;AAAA,MACA,UAAAc;AAAA,MACA,oBAAkB,CAACf,EAAM,kBAAkB,KAAK,IAAIuB,CAAa,EAAE,KAAK,GAAG;AAAA,MAC3E,iBAAe,CAAC,CAACR;AAAA,MACjB,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAcC,KAA8B;AAAA,MAC3C,GAAGE;AAAA,IAAA;AAAA,IAEHjB;AAAA,EAEL,CAAA,CACF,CACF;AAEJ,CAAC,GAEDmC,KAAexC;"}

package/components/Select/Select.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Select").SelectProps & React.RefAttributes<HTMLSelectElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/ServiceMessage/ServiceMessage.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./ServiceMessage").ServiceMessageProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/SharingStatus/SharingStatus.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./SharingStatus").SharingStatusProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Slider/Slider.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Slider").SliderProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Spacer/Spacer.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Spacer").SpacerProps & React.RefAttributes<HTMLElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/StatusDot/StatusDot.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./StatusDot").StatusDotProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Step/Step.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Step").StepProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/StepButtons/StepButtons.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./StepButtons").StepButtonsProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Stepper/Stepper.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Stepper").StepperProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Table/Table.stories.d.ts

@@ -12,6 +12,7 @@ declare const meta: {
     component: React.FC<import("./Table").Props>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Tag/Tag.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.FC<import("./Tag").TagProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/TagList/TagList.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./TagList").TagListPropsProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Textarea/Textarea.stories.d.ts

@@ -6,6 +6,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Textarea").TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Tile/Tile.stories.d.ts

@@ -1,9 +1,11 @@
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
     component: import("./Tile").TileCompound;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Title/Title.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Title").TitleProps & React.RefAttributes<HTMLHeadingElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Tooltip/Tooltip.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.FC<import("./Tooltip").TooltipProps>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Trigger/Trigger.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: React.ForwardRefExoticComponent<import("./Trigger").TriggerProps & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
             };

package/components/Validation/Validation.stories.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { StoryObj } from '@storybook/react';
 import { FormSize } from '../../constants';
 declare const meta: {
@@ -6,6 +6,7 @@ declare const meta: {
     component: (props: import("../FormExample/FormExample").FormExampleProps) => JSX.Element;
     parameters: {
         docs: {
+            page: () => React.JSX.Element;
             description: {
                 component: string;
                 markdown: string;

package/docs/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 interface DocsProps<T> {
     component: T;
+    hideStories?: boolean;
 }
 export declare const isSupernova: () => boolean;
 declare const Docs: <T>(props: DocsProps<T>) => React.JSX.Element;

package/docs/index.js

@@ -1,9 +1,14 @@
 import * as e from "react";
 import "../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.js";
-import { ArgTypes as n, Title as r, Subtitle as o, Description as l, Primary as a, Stories as i } from "../node_modules/@storybook/blocks/dist/index.js";
-const c = () => (window.location != window.parent.location ? document.referrer : document.location.href).startsWith("https://frankenstein.helsenorge.design") || window.location.search.includes("isSupernova"), u = (t) => c() ? /* @__PURE__ */ e.createElement(n, { of: t.component }) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(r, null), /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement(l, null), /* @__PURE__ */ e.createElement(a, null), /* @__PURE__ */ e.createElement(n, { of: t.component }), /* @__PURE__ */ e.createElement(i, null));
+import { ArgTypes as n, Title as o, Subtitle as l, Description as i, Primary as c, Stories as s } from "../node_modules/@storybook/blocks/dist/index.js";
+const m = () => (window.location != window.parent.location ? document.referrer : document.location.href).startsWith("https://frankenstein.helsenorge.design") || window.location.search.includes("isSupernova"), w = (t) => {
+  if (m())
+    return /* @__PURE__ */ e.createElement(n, { of: t.component });
+  const r = new URLSearchParams(window.location.search), a = `${window.location.pathname}?id=${r.get("id")}&viewMode=docs`;
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { display: "flex", justifyContent: "space-between" } }, /* @__PURE__ */ e.createElement(o, null), /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("a", { target: "_blank", href: a, rel: "noreferrer" }, "Åpne i ny fane"))), /* @__PURE__ */ e.createElement(l, null), /* @__PURE__ */ e.createElement(i, null), /* @__PURE__ */ e.createElement(c, null), /* @__PURE__ */ e.createElement(n, { of: t.component }), !t.hideStories && /* @__PURE__ */ e.createElement(s, null));
+};
 export {
-  u as default,
-  c as isSupernova
+  w as default,
+  m as isSupernova
 };
 //# sourceMappingURL=index.js.map

package/docs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/docs/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Title, Subtitle, Description, Primary, ArgTypes, Stories } from '@storybook/addon-docs';\n\ninterface DocsProps<T> {\n  component: T;\n}\n\nexport const isSupernova = (): boolean => {\n  const url = window.location != window.parent.location ? document.referrer : document.location.href;\n  return url.startsWith('https://frankenstein.helsenorge.design') || window.location.search.includes('isSupernova');\n};\n\nconst Docs = <T,>(props: DocsProps<T>): React.JSX.Element => {\n  if (isSupernova()) {\n    return <ArgTypes of={props.component} />;\n  }\n\n  return (\n    <>\n      <Title />\n      <Subtitle />\n      <Description />\n      <Primary />\n      <ArgTypes of={props.component} />\n      <Stories />\n    </>\n  );\n};\n\nexport default Docs;\n"],"names":["isSupernova","Docs","props","React","ArgTypes","Title","Subtitle","Description","Primary","Stories"],"mappings":";;;AAQO,MAAMA,IAAc,OACb,OAAO,YAAY,OAAO,OAAO,WAAW,SAAS,WAAW,SAAS,SAAS,MACnF,WAAW,wCAAwC,KAAK,OAAO,SAAS,OAAO,SAAS,aAAa,GAG5GC,IAAO,CAAKC,MACZF,MACM,gBAAAG,EAAA,cAAAC,GAAA,EAAS,IAAIF,EAAM,UAAW,CAAA,IAItC,gBAAAC,EAAA,cAAAA,EAAA,UAAA,sCACGE,GAAM,IAAA,mCACNC,GAAS,IAAA,mCACTC,GAAY,IAAA,mCACZC,GAAQ,IAAA,mCACRJ,GAAS,EAAA,IAAIF,EAAM,UAAW,CAAA,GAC9B,gBAAAC,EAAA,cAAAM,GAAA,IAAQ,CACX;"}
+{"version":3,"file":"index.js","sources":["../../src/docs/index.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Title, Subtitle, Description, Primary, ArgTypes, Stories } from '@storybook/addon-docs';\n\ninterface DocsProps<T> {\n  component: T;\n  hideStories?: boolean;\n}\n\nexport const isSupernova = (): boolean => {\n  const url = window.location != window.parent.location ? document.referrer : document.location.href;\n  return url.startsWith('https://frankenstein.helsenorge.design') || window.location.search.includes('isSupernova');\n};\n\nconst Docs = <T,>(props: DocsProps<T>): React.JSX.Element => {\n  if (isSupernova()) {\n    return <ArgTypes of={props.component} />;\n  }\n\n  const searchParams = new URLSearchParams(window.location.search);\n  const newWindowUrl = `${window.location.pathname}?id=${searchParams.get('id')}&viewMode=docs`;\n\n  return (\n    <>\n      <div style={{ display: 'flex', justifyContent: 'space-between' }}>\n        <Title />\n        <div>\n          <a target=\"_blank\" href={newWindowUrl} rel=\"noreferrer\">\n            {'Åpne i ny fane'}\n          </a>\n        </div>\n      </div>\n      <Subtitle />\n      <Description />\n      <Primary />\n      <ArgTypes of={props.component} />\n      {!props.hideStories && <Stories />}\n    </>\n  );\n};\n\nexport default Docs;\n"],"names":["isSupernova","Docs","props","React","ArgTypes","searchParams","newWindowUrl","Title","Subtitle","Description","Primary","Stories"],"mappings":";;;AASO,MAAMA,IAAc,OACb,OAAO,YAAY,OAAO,OAAO,WAAW,SAAS,WAAW,SAAS,SAAS,MACnF,WAAW,wCAAwC,KAAK,OAAO,SAAS,OAAO,SAAS,aAAa,GAG5GC,IAAO,CAAKC,MAA2C;AAC3D,MAAIF;AACF,WAAQ,gBAAAG,EAAA,cAAAC,GAAA,EAAS,IAAIF,EAAM,UAAW,CAAA;AAGxC,QAAMG,IAAe,IAAI,gBAAgB,OAAO,SAAS,MAAM,GACzDC,IAAe,GAAG,OAAO,SAAS,QAAQ,OAAOD,EAAa,IAAI,IAAI,CAAC;AAG3E,SAAA,gBAAAF,EAAA,cAAAA,EAAA,UAAA,sCACG,OAAI,EAAA,OAAO,EAAE,SAAS,QAAQ,gBAAgB,kBAAgB,mCAC5DI,GAAM,IAAA,mCACN,OACC,MAAA,gBAAAJ,EAAA,cAAC,OAAE,QAAO,UAAS,MAAMG,GAAc,KAAI,aAAA,GACxC,gBACH,CACF,CACF,GACC,gBAAAH,EAAA,cAAAK,GAAA,IAAS,GACT,gBAAAL,EAAA,cAAAM,GAAA,IAAY,GACb,gBAAAN,EAAA,cAACO,GAAQ,IAAA,mCACRN,GAAS,EAAA,IAAIF,EAAM,UAAW,CAAA,GAC9B,CAACA,EAAM,eAAgB,gBAAAC,EAAA,cAAAQ,GAAA,IAAQ,CAClC;AAEJ;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {