@helsenorge/designsystem-react 7.2.1 → 7.3.1

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [7.3.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv7.2.1&targetVersion=GTv7.3.0) (2024-04-22)
+
+### Features
+
+- **designsystem:** select får wrapperclassname prop
+  ([61a1a8c](https://github.com/helsenorge/designsystem/commit/61a1a8c4323c2150ee97d21a7325de6c72cc5198)), closes
+  [#323789](https://github.com/helsenorge/designsystem/issues/323789)
+
+## [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
@@ -1377,12 +1395,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/PopOver/PopOver.js

@@ -1,5 +1,5 @@
-import t, { useRef as v, useState as A, useEffect as B } from "react";
-import b from "classnames";
+import r, { useRef as w, useState as A, useEffect as B } from "react";
+import y from "classnames";
 import { getVerticalPosition as F, getBubbleStyle as L, getArrowStyle as T } from "./utils.js";
 import { ZIndex as V, AnalyticsId as Z } from "../../constants.js";
 import { useInterval as $ } from "../../hooks/useInterval.js";
@@ -7,51 +7,51 @@ import { useIsVisible as j } from "../../hooks/useIsVisible.js";
 import { useLayoutEvent as k } from "../../hooks/useLayoutEvent.js";
 import { useSize as q } from "../../hooks/useSize.js";
 import { mergeRefs as D } from "../../utils/refs.js";
-import r from "../PopOver/styles.module.scss";
-var G = /* @__PURE__ */ ((e) => (e.positionautomatic = "positionautomatic", e.positionbelow = "positionbelow", e.positionabove = "positionabove", e))(G || {});
-const d = t.forwardRef((e, w) => {
+import t from "../PopOver/styles.module.scss";
+var G = /* @__PURE__ */ ((o) => (o.positionautomatic = "positionautomatic", o.positionbelow = "positionbelow", o.positionabove = "positionabove", o))(G || {});
+const S = r.forwardRef((o, _) => {
   const {
-    id: y,
-    children: S,
+    id: R,
+    children: g,
     controllerRef: n,
-    popOverRef: R,
-    show: _ = !1,
-    className: g = "",
-    variant: p = "positionautomatic",
-    role: c,
-    testId: z,
-    arrowClassName: C,
-    zIndex: m = V.PopOver
-  } = e, u = R || v(null), I = v(null), s = q(u), [o, N] = A(), E = j(n, 0), l = () => {
-    var f;
-    N((f = n.current) == null ? void 0 : f.getBoundingClientRect());
+    popOverRef: z,
+    show: p = !1,
+    className: C = "",
+    variant: c = "positionautomatic",
+    role: m,
+    testId: I,
+    arrowClassName: N,
+    zIndex: u = V.PopOver
+  } = o, f = z || w(null), E = w(null), s = q(f), [e, O] = A(), v = j(n, 0), l = () => {
+    var d;
+    O((d = n.current) == null ? void 0 : d.getBoundingClientRect());
   };
   $(l, 500), k(l, ["scroll", "resize"], 10), B(() => {
     l();
   }, []);
-  const O = c === "tooltip", P = b(r.popover, { [r["popover--visible"]]: O ? _ : E }, g), i = o && s && F(o, s, p), x = b(r.popover__arrow, C, {
-    [r["popover__arrow--over"]]: i === "positionbelow",
-    [r["popover__arrow--under"]]: i === "positionabove"
-    /* positionabove */
-  }), a = o && s && L(o, s, p), h = a && o && i && T(a, o, i);
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  const b = m === "tooltip", P = y(t.popover, { [t["popover--visible"]]: b ? p : v }, C), i = e && s && F(e, s, c), x = y(t.popover__arrow, N, {
+    [t["popover__arrow--over"]]: i === "positionbelow",
+    [t["popover__arrow--under"]]: i === "positionabove",
+    [t["popover__arrow--visible"]]: b ? p : v
+  }), a = e && s && L(e, s, c), h = a && e && i && T(a, e, i);
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
     "div",
     {
-      id: y,
-      ref: D([w, u]),
+      id: R,
+      ref: D([_, f]),
       className: P,
-      style: { ...a, zIndex: m },
-      "data-testid": z,
+      style: { ...a, zIndex: u },
+      "data-testid": I,
       "data-analyticsid": Z.PopOver,
-      role: c
+      role: m
     },
-    S
-  ), /* @__PURE__ */ t.createElement("div", { ref: I, className: x, style: { ...h, zIndex: m } }));
+    g
+  ), /* @__PURE__ */ r.createElement("div", { ref: E, className: x, style: { ...h, zIndex: u } }));
 });
-d.displayName = "PopOver";
-const oe = d;
+S.displayName = "PopOver";
+const eo = S;
 export {
   G as PopOverVariant,
-  oe as default
+  eo as default
 };
 //# sourceMappingURL=PopOver.js.map

package/components/PopOver/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["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(controllerRef, 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  });\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","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}
+{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["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(controllerRef, 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","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA,IACxD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAYvB,IAAOgB;AAAA,EAAA,CACzD,GAEKc,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}

package/components/PopOver/styles.module.scss

@@ -22,10 +22,6 @@
 
   &--visible {
     visibility: visible;
-
-    & + #{$popover}__arrow {
-      visibility: visible;
-    }
   }
 
   border: getSpacer(4xs) solid $plum600;
@@ -46,6 +42,7 @@
     border-style: solid;
     border-color: transparent;
     z-index: 3;
+    visibility: hidden;
 
     &--over {
       border-width: 0.625rem;
@@ -60,9 +57,9 @@
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }
-  }
 
-  & + &__arrow {
-    visibility: hidden;
+    &--visible {
+      visibility: visible;
+    }
   }
 }

package/components/PopOver/styles.module.scss.d.ts

@@ -6,6 +6,7 @@ export type Styles = {
   popover__arrow: string;
   'popover__arrow--over': string;
   'popover__arrow--under': string;
+  'popover__arrow--visible': string;
   'popover--visible': 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?: string;
 }
 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?: 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    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/package.json

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