@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/HelpPanel/HelpPanel.js

@@ -1,23 +1,23 @@
-import m from "react";
-import n from "classnames";
-import p from "../HighlightBox/HighlightBox.js";
+import s from "react";
+import p from "classnames";
+import n from "../HighlightBox/HighlightBox.js";
 import c from "../Icons/HandWaving.js";
 import e from "../HelpPanel/styles.module.scss";
-const i = ({ className: a, testId: l, size: t, children: o, title: r }) => {
-  const s = n(e["help-panel"], a);
-  return /* @__PURE__ */ m.createElement(
-    p,
+const d = ({ className: a, testId: t, size: l, children: o, title: r }) => {
+  const m = p(e["help-panel"], a);
+  return /* @__PURE__ */ s.createElement(
+    n,
     {
-      className: s,
+      className: m,
       contentWrapperClassName: e["help-panel"],
-      testId: l,
-      size: t,
+      testId: t,
+      size: l,
       svgIcon: c,
       title: r
     },
     o
   );
-}, d = i;
+};
 export {
   d as default
 };

package/components/HelpPanel/HelpPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving","HelpPanel$1"],"mappings":";;;;;AAsBA,MAAMA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP,GAEAQ,IAAeZ;"}
+{"version":3,"file":"HelpPanel.js","sources":["../../../src/components/HelpPanel/HelpPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HighlightBox, { HighlightBoxSize } from '../HighlightBox';\nimport HandWaving from '../Icons/HandWaving';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets title if needed */\n  title?: string;\n}\n\nconst HelpPanel: React.FC<HelpPanelProps> = ({ className, testId, size, children, title }) => {\n  const helpPanelClassName = classNames(styles['help-panel'], className);\n\n  return (\n    <HighlightBox\n      className={helpPanelClassName}\n      contentWrapperClassName={styles['help-panel']}\n      testId={testId}\n      size={size}\n      svgIcon={HandWaving}\n      title={title}\n    >\n      {children}\n    </HighlightBox>\n  );\n};\n\nexport default HelpPanel;\n"],"names":["HelpPanel","className","testId","size","children","title","helpPanelClassName","classNames","styles","React","HighlightBox","HandWaving"],"mappings":";;;;;AAsBM,MAAAA,IAAsC,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,UAAAC,GAAU,OAAAC,QAAY;AAC5F,QAAMC,IAAqBC,EAAWC,EAAO,YAAY,GAAGP,CAAS;AAGnE,SAAAQ,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,yBAAyBE,EAAO,YAAY;AAAA,MAC5C,QAAAN;AAAA,MACA,MAAAC;AAAA,MACA,SAASQ;AAAA,MACT,OAAAN;AAAA,IAAA;AAAA,IAECD;AAAA,EAAA;AAGP;"}

package/components/HelpQuestion/HelpQuestion.js

@@ -1,32 +1,31 @@
 import t from "react";
-import u from "classnames";
-import { AnalyticsId as c } from "../../constants.js";
+import f from "classnames";
+import { AnalyticsId as u } from "../../constants.js";
 import { usePseudoClasses as d } from "../../hooks/usePseudoClasses.js";
-import { mergeRefs as y } from "../../utils/refs.js";
-import H from "../Trigger/Trigger.js";
+import { mergeRefs as c } from "../../utils/refs.js";
+import y from "../Trigger/Trigger.js";
 import s from "../HelpQuestion/styles.module.scss";
-const a = t.forwardRef(
-  ({ children: o, selected: e = !1, className: r, onClick: i, testId: m }, l) => {
-    const { isHovered: n, refObject: p } = d(), f = u(s.helpquestion, e && s["helpquestion--selected"], r);
+const h = t.forwardRef(
+  ({ children: a, selected: e = !1, className: r, onClick: o, testId: i }, m) => {
+    const { isHovered: l, refObject: p } = d(), n = f(s.helpquestion, e && s["helpquestion--selected"], r);
     return /* @__PURE__ */ t.createElement(
       "button",
       {
         type: "button",
-        "data-testid": m,
-        className: f,
-        onClick: i,
-        ref: y([l, p]),
+        "data-testid": i,
+        className: n,
+        onClick: o,
+        ref: c([m, p]),
         "aria-expanded": e,
-        "data-analyticsid": c.HelpQuestion
+        "data-analyticsid": u.HelpQuestion
       },
-      /* @__PURE__ */ t.createElement(H, { variant: "help", htmlMarkup: "span", selected: e, isHovered: n }),
-      o
+      /* @__PURE__ */ t.createElement(y, { variant: "help", htmlMarkup: "span", selected: e, isHovered: l }),
+      a
     );
   }
 );
-a.displayName = "HelpQuestion";
-const v = a;
+h.displayName = "HelpQuestion";
 export {
-  v as default
+  h as default
 };
 //# sourceMappingURL=HelpQuestion.js.map

package/components/HelpQuestion/HelpQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpQuestion.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger","HelpQuestion$1"],"mappings":";;;;;;;AA8BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAO,GAAGC,MAAQ;AACnE,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,EAAoC,GAE/DC,IAAUC,EAAWC,EAAO,cAAcV,KAAYU,EAAO,wBAAwB,GAAGT,CAAS;AAGrG,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,WAAWK;AAAA,QACX,SAAAN;AAAA,QACA,KAAKS,EAAU,CAACP,GAAKE,CAAS,CAAC;AAAA,QAC/B,iBAAeN;AAAA,QACf,oBAAkBY,EAAY;AAAA,MAAA;AAAA,sCAE7BC,GAAQ,EAAA,SAAQ,QAAO,YAAW,QAAO,UAAAb,GAAoB,WAAAK,GAAsB;AAAA,MACnFN;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAa,cAAc;AAE3B,MAAAiB,IAAejB;"}
+{"version":3,"file":"HelpQuestion.js","sources":["../../../src/components/HelpQuestion/HelpQuestion.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Trigger from '../Trigger';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpQuestionProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-controls'> {\n  /**\n   * Help question contents\n   */\n  children: string;\n  /**\n   * Indicates that the help question is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst HelpQuestion = React.forwardRef<HTMLButtonElement, HelpQuestionProps>(\n  ({ children, selected = false, className, onClick, testId }, ref) => {\n    const { isHovered, refObject } = usePseudoClasses<HTMLButtonElement>();\n\n    const classes = classNames(styles.helpquestion, selected && styles['helpquestion--selected'], className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={classes}\n        onClick={onClick}\n        ref={mergeRefs([ref, refObject])}\n        aria-expanded={selected}\n        data-analyticsid={AnalyticsId.HelpQuestion}\n      >\n        <Trigger variant=\"help\" htmlMarkup=\"span\" selected={selected} isHovered={isHovered} />\n        {children}\n      </button>\n    );\n  }\n);\n\nHelpQuestion.displayName = 'HelpQuestion';\n\nexport default HelpQuestion;\n"],"names":["HelpQuestion","React","children","selected","className","onClick","testId","ref","isHovered","refObject","usePseudoClasses","classes","classNames","styles","mergeRefs","AnalyticsId","Trigger"],"mappings":";;;;;;;AA8BA,MAAMA,IAAeC,EAAM;AAAA,EACzB,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,SAAAC,GAAS,QAAAC,EAAO,GAAGC,MAAQ;AACnE,UAAM,EAAE,WAAAC,GAAW,WAAAC,EAAU,IAAIC,EAAoC,GAE/DC,IAAUC,EAAWC,EAAO,cAAcV,KAAYU,EAAO,wBAAwB,GAAGT,CAAS;AAGrG,WAAAH,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaK;AAAA,QACb,WAAWK;AAAA,QACX,SAAAN;AAAA,QACA,KAAKS,EAAU,CAACP,GAAKE,CAAS,CAAC;AAAA,QAC/B,iBAAeN;AAAA,QACf,oBAAkBY,EAAY;AAAA,MAAA;AAAA,sCAE7BC,GAAQ,EAAA,SAAQ,QAAO,YAAW,QAAO,UAAAb,GAAoB,WAAAK,GAAsB;AAAA,MACnFN;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAa,cAAc;"}

package/components/HighlightBox/HighlightBox.js

@@ -4,26 +4,26 @@ import "../../theme/grid.js";
 import { useBreakpoint as w, Breakpoint as y } from "../../hooks/useBreakpoint.js";
 import { AnalyticsId as p, IconSize as N } from "../../constants.js";
 import { Icon as C } from "../Icon/Icon.js";
-import B from "../LazyIcon/LazyIcon.js";
-import W from "../Title/Title.js";
+import { LazyIcon as W } from "../LazyIcon/LazyIcon.js";
+import { Title as z } from "../Title/Title.js";
 import t from "../HighlightBox/styles.module.scss";
-var z = /* @__PURE__ */ ((i) => (i.medium = "medium", i.large = "large", i.fluid = "fluid", i))(z || {});
+var B = /* @__PURE__ */ ((i) => (i.medium = "medium", i.large = "large", i.fluid = "fluid", i))(B || {});
 const u = ({ className: i, size: r, children: s }) => /* @__PURE__ */ e.createElement("div", { className: i, "data-testid": "highlightbox-wrapper" }, /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__row }, /* @__PURE__ */ e.createElement("div", { className: l(t.highlightbox__col, r === "medium" && t["highlightbox__col--offset"]) }, s))), x = (i) => {
   const { children: r, className: s } = i, a = l(t["highlightbox__content-wrapper"], s);
   return /* @__PURE__ */ e.createElement("div", { className: a }, /* @__PURE__ */ e.createElement("div", { className: l(t.highlightbox__row) }, r));
-}, H = (i) => {
+}, j = (i) => {
   const {
     children: r,
     color: s = "white",
     size: a = "medium",
-    testId: o,
+    testId: c,
     svgIcon: n,
     htmlMarkup: b = "div",
     className: v,
     contentWrapperClassName: I,
     title: d,
     titleHtmlMarkup: k = "h2"
-  } = i, _ = w(), c = l(
+  } = i, _ = w(), o = l(
     t[`highlightbox--${s}`],
     t[`highlightbox--${a}`],
     n && t["highlightbox--has-icon"],
@@ -31,31 +31,31 @@ const u = ({ className: i, size: r, children: s }) => /* @__PURE__ */ e.createEl
     v
   ), m = () => {
     if (n) {
-      const f = a === "large" && _ && _ >= y.md ? N.Medium : N.Small, E = /* @__PURE__ */ e.createElement(W, { testId: "titleId", htmlMarkup: k, appearance: "title4" }, d);
-      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__icon }, typeof n == "string" ? /* @__PURE__ */ e.createElement(B, { iconName: n, size: f }) : /* @__PURE__ */ e.createElement(C, { svgIcon: n, size: f }), d && /* @__PURE__ */ e.createElement("div", { className: t.mobile }, E)), /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__content }, d && /* @__PURE__ */ e.createElement("div", { className: t.desktop, "aria-hidden": "true" }, E), r));
+      const f = a === "large" && _ && _ >= y.md ? N.Medium : N.Small, E = /* @__PURE__ */ e.createElement(z, { testId: "titleId", htmlMarkup: k, appearance: "title4" }, d);
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__icon }, typeof n == "string" ? /* @__PURE__ */ e.createElement(W, { iconName: n, size: f }) : /* @__PURE__ */ e.createElement(C, { svgIcon: n, size: f }), d && /* @__PURE__ */ e.createElement("div", { className: t.mobile }, E)), /* @__PURE__ */ e.createElement("div", { className: t.highlightbox__content }, d && /* @__PURE__ */ e.createElement("div", { className: t.desktop, "aria-hidden": "true" }, E), r));
     }
     return r;
   }, h = b, g = l(t["highlightbox__content-wrapper"], I);
-  return a === "medium" ? /* @__PURE__ */ e.createElement(u, { className: c, size: a }, /* @__PURE__ */ e.createElement(h, { className: g, "data-testid": o, "data-analyticsid": p.HighlightBox }, m())) : a === "large" && n ? /* @__PURE__ */ e.createElement(u, { className: c, size: a }, /* @__PURE__ */ e.createElement(x, { className: g }, /* @__PURE__ */ e.createElement(
+  return a === "medium" ? /* @__PURE__ */ e.createElement(u, { className: o, size: a }, /* @__PURE__ */ e.createElement(h, { className: g, "data-testid": c, "data-analyticsid": p.HighlightBox }, m())) : a === "large" && n ? /* @__PURE__ */ e.createElement(u, { className: o, size: a }, /* @__PURE__ */ e.createElement(x, { className: g }, /* @__PURE__ */ e.createElement(
     h,
     {
       className: l(t.highlightbox__col, t["highlightbox__col--large-with-icon"]),
-      "data-testid": o,
+      "data-testid": c,
       "data-analyticsid": p.HighlightBox
     },
     m()
-  ))) : a === "large" ? /* @__PURE__ */ e.createElement(u, { className: c, size: a }, /* @__PURE__ */ e.createElement(x, { className: g }, /* @__PURE__ */ e.createElement(
+  ))) : a === "large" ? /* @__PURE__ */ e.createElement(u, { className: o, size: a }, /* @__PURE__ */ e.createElement(x, { className: g }, /* @__PURE__ */ e.createElement(
     h,
     {
       className: l(t.highlightbox__col, t["highlightbox__col--offset"]),
-      "data-testid": o,
+      "data-testid": c,
       "data-analyticsid": p.HighlightBox
     },
     m()
-  ))) : a === "fluid" ? /* @__PURE__ */ e.createElement(h, { className: c, "data-testid": o }, m()) : null;
-}, q = H;
+  ))) : a === "fluid" ? /* @__PURE__ */ e.createElement(h, { className: o, "data-testid": c }, m()) : null;
+};
 export {
-  z as HighlightBoxSize,
-  q as default
+  B as HighlightBoxSize,
+  j as default
 };
 //# sourceMappingURL=HighlightBox.js.map

package/components/HighlightBox/HighlightBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightBox.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightbox__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightBoxSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightbox__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightBox","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","LazyIcon","Icon","CustomTag","AnalyticsId","HighlightBox$1"],"mappings":"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"}
+{"version":3,"file":"HighlightBox.js","sources":["../../../src/components/HighlightBox/HighlightBox.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightBoxColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightBoxSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightBoxTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightBoxProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightBoxColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightBoxSize;\n  /** Adds an icon to the highlightbox. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightBoxTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  className: string;\n  size?: keyof typeof HighlightBoxSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightbox-wrapper'}>\n    <div className={styles.highlightbox__row}>\n      <div className={classNames(styles.highlightbox__col, size === HighlightBoxSize.medium && styles['highlightbox__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightbox__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightBox: React.FC<HighlightBoxProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightBoxSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightbox--${color}`],\n    styles[`highlightbox--${size}`],\n    svgIcon && styles['highlightbox--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightBoxSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightbox__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightbox__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightbox__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightBoxSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightBox}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightbox__col, styles['highlightbox__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightBox}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightBoxSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightBox;\n"],"names":["HighlightBoxSize","Wrapper","className","size","children","React","styles","classNames","ContentWrapper","props","contentWrapperClasses","HighlightBox","color","testId","svgIcon","htmlMarkup","contentWrapperClassName","title","titleHtmlMarkup","breakpoint","useBreakpoint","containerClassName","renderContent","iconSize","Breakpoint","IconSize","titleElement","Title","LazyIcon","Icon","CustomTag","AnalyticsId"],"mappings":"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"}

package/components/HighlightBox/styles.module.scss

@@ -77,10 +77,10 @@
 
   &--medium {
     #{$box}__content-wrapper {
-      padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+      padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
       @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+        padding: getSpacer(m) getSpacer(m) getSpacer(l);
       }
 
       @media (min-width: map.get($grid-breakpoints, lg)) {
@@ -91,10 +91,10 @@
 
   // fluid skal ha bakgrunnsfarge på den ytre containeren
   &--fluid {
-    padding: getSpacer(m) getSpacer(s) getSpacer(l) getSpacer(s);
+    padding: getSpacer(m) getSpacer(s) getSpacer(l);
 
     @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding: getSpacer(m) getSpacer(m) getSpacer(l) getSpacer(m);
+      padding: getSpacer(m) getSpacer(m) getSpacer(l);
     }
 
     @each $color in $colors {

package/components/HorizontalScroll/HorizontalScroll.js

@@ -3,7 +3,7 @@ import i from "classnames";
 import { useIsVisible as c } from "../../hooks/useIsVisible.js";
 import { useSize as g } from "../../hooks/useSize.js";
 import o from "../HorizontalScroll/styles.module.scss";
-const d = "3px", p = ({ children: m, childWidth: _, testId: f, ...l }) => {
+const d = "3px", O = ({ children: m, childWidth: _, testId: f, ...l }) => {
   const t = e(null), a = e(null), s = e(null), h = c(a, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), u = c(s, 1, { root: t == null ? void 0 : t.current, rootMargin: d }, !0), { width: v = 0 } = g(t) || {}, z = _ > v, b = i(o.horizontalscroll__viewport, z && o["horizontalscroll__viewport--overflow"]), n = l["aria-label"] || l["aria-labelledby"];
   return /* @__PURE__ */ r.createElement("div", { className: o.horizontalscroll, "data-testid": f }, /* @__PURE__ */ r.createElement(
     "div",
@@ -38,9 +38,9 @@ const d = "3px", p = ({ children: m, childWidth: _, testId: f, ...l }) => {
     m,
     /* @__PURE__ */ r.createElement("div", { ref: s })
   ));
-}, S = p;
+};
 export {
-  p as HorizontalScroll,
-  S as default
+  O as HorizontalScroll,
+  O as default
 };
 //# sourceMappingURL=HorizontalScroll.js.map

package/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React","HorizontalScroll$1"],"mappings":";;;;;AAWA,MAAMA,IAAqB,OAWdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,yCACG,OAAI,EAAA,WAAWa,EAAO,kBAAkB,eAAad,EAGpD,GAAAgB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJe,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDkB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKX,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ,GAEAY,IAAepB;"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React"],"mappings":";;;;;AAWA,MAAMA,IAAqB,OAWdC,IAA0E,CAAC,EAAE,UAAAC,GAAU,YAAAC,GAAY,QAAAC,GAAQ,GAAGC,QAAW;AAC9H,QAAAC,IAAcC,EAAuB,IAAI,GACzCC,IAAUD,EAAuB,IAAI,GACrCE,IAAWF,EAAuB,IAAI,GACtCG,IAAgBC,EAAaH,GAAS,GAAG,EAAE,MAAMF,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC7GY,IAAiBD,EAAaF,GAAU,GAAG,EAAE,MAAMH,KAAA,gBAAAA,EAAa,SAAS,YAAYN,EAAmB,GAAG,EAAI,GAC/G,EAAE,OAAOa,IAAgB,MAAMC,EAAQR,CAAW,KAAK,IAEvDS,IAAgBZ,IAAaU,GAC7BG,IAAkBC,EAAWC,EAAO,4BAA4BH,KAAiBG,EAAO,sCAAsC,CAAC,GAC/HC,IAAoBd,EAAK,YAAY,KAAKA,EAAK,iBAAiB;AAEtE,yCACG,OAAI,EAAA,WAAWa,EAAO,kBAAkB,eAAad,EAGpD,GAAAgB,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,KAAKV;AAAA,MACL,UAAUa,IAAoB,IAAI;AAAA,MAClC,MAAMA,IAAoB,WAAW;AAAA,MACpC,GAAGd;AAAA,IAAA;AAAA,IAEJe,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,mCAAmC;AAAA,UAC1C,CAACR,KAAiBQ,EAAO,sCAAsC;AAAA,QACjE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWH;AAAA,UACTC,EAAO;AAAA,UACPA,EAAO,oCAAoC;AAAA,UAC3C,CAACN,KAAkBM,EAAO,sCAAsC;AAAA,QAClE;AAAA,MAAA;AAAA,IACF;AAAA,IACAE,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKZ,EAAS,CAAA;AAAA,IAClBN;AAAA,IACDkB,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKX,EAAU,CAAA;AAAA,EAAA,CAExB;AAEJ;"}

package/components/HorizontalScroll/index.js

@@ -1,7 +1,6 @@
-import r from "./HorizontalScroll.js";
-import { HorizontalScroll as a } from "./HorizontalScroll.js";
+import { HorizontalScroll as r } from "./HorizontalScroll.js";
 export {
-  a as HorizontalScroll,
+  r as HorizontalScroll,
   r as default
 };
 //# sourceMappingURL=index.js.map

package/components/HorizontalScroll/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Illustration/Illustration.js

@@ -1,42 +1,41 @@
 import a from "react";
-import { getIllustration as p } from "./utils.js";
-import { AnalyticsId as I } from "../../constants.js";
+import { getIllustration as f } from "./utils.js";
+import { AnalyticsId as p } from "../../constants.js";
 import { useUuid as g } from "../../hooks/useUuid.js";
 var h = /* @__PURE__ */ ((e) => (e.Medium = "0 0 512 512", e.Small = "0 0 200 200", e))(h || {});
-const o = a.forwardRef((e, s) => {
-  const { illustration: n, ariaLabel: l, className: d = "", size: t = 512, color: i = "neutral", testId: m, ...u } = e, r = g(), c = p({
+const v = a.forwardRef((e, o) => {
+  const { illustration: s, ariaLabel: l, className: n = "", size: t = 512, color: i = "neutral", testId: d, ...m } = e, r = g(), u = f({
     size: t,
     medium: "0 0 512 512",
     small: "0 0 200 200"
     /* Small */
-  }), f = {
-    "data-testid": m,
-    "data-analyticsid": I.Illustration,
-    ref: s,
-    className: d,
+  }), c = {
+    "data-testid": d,
+    "data-analyticsid": p.Illustration,
+    ref: o,
+    className: n,
     role: l ? "img" : "presentation",
     "aria-labelledby": l ? r : void 0,
     focusable: !1,
     "aria-hidden": l ? void 0 : !0,
-    viewBox: c,
+    viewBox: u,
     style: { minWidth: t, minHeight: t },
     width: t,
     height: t,
     fill: i,
-    ...u
+    ...m
   };
-  return a.createElement(n, {
+  return a.createElement(s, {
     size: t,
     color: i,
-    svgProperties: f,
+    svgProperties: c,
     title: l && /* @__PURE__ */ a.createElement("title", { id: r }, l)
   });
 });
-o.displayName = "Illustration";
-const N = o;
+v.displayName = "Illustration";
 export {
-  o as Illustration,
+  v as Illustration,
   h as ViewBoxSize,
-  N as default
+  v as default
 };
 //# sourceMappingURL=Illustration.js.map

package/components/Illustration/Illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Illustration.js","sources":["../../../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize","Illustration","React","props","ref","illustration","ariaLabel","className","size","color","testId","other","titleId","useUuid","viewBox","getIllustration","svgProperties","AnalyticsId","Illustration$1"],"mappings":";;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,eACTA,EAAA,QAAQ,eAFEA,IAAAA,KAAA,CAAA,CAAA;AAkCL,MAAMC,IAAeC,EAAM,WAA6C,CAACC,GAAOC,MAAQ;AAC7F,QAAM,EAAE,cAAAC,GAAc,WAAAC,GAAW,WAAAC,IAAY,IAAI,MAAAC,IAAO,KAAK,OAAAC,IAAQ,WAAW,QAAAC,GAAQ,GAAGC,EAAA,IAAUR,GAE/FS,IAAUC,KACVC,IAAUC,EAAgB;AAAA,IAAE,MAAAP;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB,GAExFQ,IAAgB;AAAA,IACpB,eAAeN;AAAA,IACf,oBAAoBO,EAAY;AAAA,IAChC,KAAAb;AAAA,IACA,WAAAG;AAAA,IACA,MAAMD,IAAY,QAAQ;AAAA,IAC1B,mBAAmBA,IAAYM,IAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAeN,IAAY,SAAY;AAAA,IACvC,SAAAQ;AAAA,IACA,OAAO,EAAE,UAAUN,GAAM,WAAWA,EAAK;AAAA,IACzC,OAAOA;AAAA,IACP,QAAQA;AAAA,IACR,MAAMC;AAAA,IACN,GAAGE;AAAA,EAAA;AAUE,SAPYT,EAAM,cAAcG,GAAc;AAAA,IACnD,MAAAG;AAAA,IACA,OAAAC;AAAA,IACA,eAAAO;AAAA,IACA,OAAOV,KAAaJ,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAIU,KAAUN,CAAU;AAAA,EAAA,CACpD;AAGH,CAAC;AAEDL,EAAa,cAAc;AAE3B,MAAAiB,IAAejB;"}
+{"version":3,"file":"Illustration.js","sources":["../../../src/components/Illustration/Illustration.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIllustration } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nexport type IllustrationColor = 'neutral' | 'cherry' | 'blueberry';\n\nexport enum ViewBoxSize {\n  Medium = '0 0 512 512',\n  Small = '0 0 200 200',\n}\n\nexport interface BaseSvgIllustrationProps {\n  color: IllustrationColor;\n  svgProperties: React.SVGProps<SVGSVGElement>;\n  title: React.ReactNode;\n}\nexport interface SvgIllustrationProps extends BaseSvgIllustrationProps {\n  size: number;\n}\n\nexport type SvgIllustration = React.ComponentType<SvgIllustrationProps>;\n\nexport interface BaseIllustrationProps {\n  /* aria-label for the <svg> element. Used as <title> tag. */\n  ariaLabel?: string;\n  /* Changes the size of the illustration. */\n  size?: number;\n  /* Changes the color of the illustration. */\n  color?: IllustrationColor;\n  /* Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface IllustrationProps extends BaseIllustrationProps {\n  /* Sets which illustration should be displayed. */\n  illustration: SvgIllustration;\n}\n\nexport const Illustration = React.forwardRef<SVGSVGElement, IllustrationProps>((props, ref) => {\n  const { illustration, ariaLabel, className = '', size = 512, color = 'neutral', testId, ...other } = props;\n\n  const titleId = useUuid();\n  const viewBox = getIllustration({ size, medium: ViewBoxSize.Medium, small: ViewBoxSize.Small });\n\n  const svgProperties = {\n    'data-testid': testId,\n    'data-analyticsid': AnalyticsId.Illustration,\n    ref,\n    className,\n    role: ariaLabel ? 'img' : 'presentation',\n    'aria-labelledby': ariaLabel ? titleId : undefined,\n    focusable: false,\n    'aria-hidden': ariaLabel ? undefined : true,\n    viewBox,\n    style: { minWidth: size, minHeight: size },\n    width: size,\n    height: size,\n    fill: color,\n    ...other,\n  };\n\n  const svgElement = React.createElement(illustration, {\n    size,\n    color,\n    svgProperties: svgProperties,\n    title: ariaLabel && <title id={titleId}>{ariaLabel}</title>,\n  });\n\n  return svgElement;\n});\n\nIllustration.displayName = 'Illustration';\n\nexport default Illustration;\n"],"names":["ViewBoxSize","Illustration","React","props","ref","illustration","ariaLabel","className","size","color","testId","other","titleId","useUuid","viewBox","getIllustration","svgProperties","AnalyticsId"],"mappings":";;;;AAQY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,eACTA,EAAA,QAAQ,eAFEA,IAAAA,KAAA,CAAA,CAAA;AAkCL,MAAMC,IAAeC,EAAM,WAA6C,CAACC,GAAOC,MAAQ;AAC7F,QAAM,EAAE,cAAAC,GAAc,WAAAC,GAAW,WAAAC,IAAY,IAAI,MAAAC,IAAO,KAAK,OAAAC,IAAQ,WAAW,QAAAC,GAAQ,GAAGC,EAAA,IAAUR,GAE/FS,IAAUC,KACVC,IAAUC,EAAgB;AAAA,IAAE,MAAAP;AAAA,IAAM,QAAQ;AAAA,IAAoB,OAAO;AAAA;AAAA,GAAmB,GAExFQ,IAAgB;AAAA,IACpB,eAAeN;AAAA,IACf,oBAAoBO,EAAY;AAAA,IAChC,KAAAb;AAAA,IACA,WAAAG;AAAA,IACA,MAAMD,IAAY,QAAQ;AAAA,IAC1B,mBAAmBA,IAAYM,IAAU;AAAA,IACzC,WAAW;AAAA,IACX,eAAeN,IAAY,SAAY;AAAA,IACvC,SAAAQ;AAAA,IACA,OAAO,EAAE,UAAUN,GAAM,WAAWA,EAAK;AAAA,IACzC,OAAOA;AAAA,IACP,QAAQA;AAAA,IACR,MAAMC;AAAA,IACN,GAAGE;AAAA,EAAA;AAUE,SAPYT,EAAM,cAAcG,GAAc;AAAA,IACnD,MAAAG;AAAA,IACA,OAAAC;AAAA,IACA,eAAAO;AAAA,IACA,OAAOV,KAAaJ,gBAAAA,EAAA,cAAC,SAAM,EAAA,IAAIU,KAAUN,CAAU;AAAA,EAAA,CACpD;AAGH,CAAC;AAEDL,EAAa,cAAc;"}

package/components/Illustration/index.js

@@ -1,8 +1,8 @@
-import t from "./Illustration.js";
-import { Illustration as i, ViewBoxSize as l } from "./Illustration.js";
+import { Illustration as r } from "./Illustration.js";
+import { ViewBoxSize as i } from "./Illustration.js";
 export {
-  i as Illustration,
-  l as ViewBoxSize,
-  t as default
+  r as Illustration,
+  i as ViewBoxSize,
+  r as default
 };
 //# sourceMappingURL=index.js.map

package/components/Input/Input.js

@@ -1,118 +1,116 @@
-import r, { useRef as D, useState as K, useEffect as Ce } from "react";
+import r, { useRef as K, useState as $, useEffect as xe } from "react";
 import v from "classnames";
-import { FormMode as l, FormSize as _e, IconSize as B, AnalyticsId as ve, AVERAGE_CHARACTER_WIDTH_PX as ye } from "../../constants.js";
-import { useBreakpoint as Ee, Breakpoint as ke } from "../../hooks/useBreakpoint.js";
+import { FormMode as l, FormSize as Ce, IconSize as B, AnalyticsId as _e, AVERAGE_CHARACTER_WIDTH_PX as ve } from "../../constants.js";
+import { useBreakpoint as ye, Breakpoint as Ee } from "../../hooks/useBreakpoint.js";
 import { useUuid as U } from "../../hooks/useUuid.js";
 import { getColor as F } from "../../theme/currys/color.js";
-import { getAriaDescribedBy as we } from "../../utils/accessibility.js";
-import Ie from "../ErrorWrapper/ErrorWrapper.js";
+import { getAriaDescribedBy as ke } from "../../utils/accessibility.js";
+import { ErrorWrapper as we } from "../ErrorWrapper/ErrorWrapper.js";
 import { Icon as Ne } from "../Icon/Icon.js";
-import { renderLabel as Re } from "../Label/Label.js";
-import We from "../LazyIcon/LazyIcon.js";
-import Se from "../MaxCharacters/MaxCharacters.js";
+import { renderLabel as Ie } from "../Label/Label.js";
+import { LazyIcon as Re } from "../LazyIcon/LazyIcon.js";
+import We from "../MaxCharacters/MaxCharacters.js";
 import t from "../Input/styles.module.scss";
-var ze = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(ze || {});
-const Ae = (e, s, p) => {
+var Se = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.search = "search", e.tel = "tel", e.url = "url", e.date = "date", e.time = "time", e))(Se || {});
+const ze = (e, s, p) => {
   const i = s ? "1.5rem" : "2rem", f = s ? `${p}px` : "0px";
-  return `calc(${e * ye}px + ${i} + ${f} + 4px)`;
-}, L = r.forwardRef((e, s) => {
+  return `calc(${e * ve}px + ${i} + ${f} + 4px)`;
+}, Ae = r.forwardRef((e, s) => {
   const {
     className: p,
     defaultValue: i,
     placeholder: f,
     type: h = "text",
-    name: M,
-    transparent: P = !1,
+    name: L,
+    transparent: M = !1,
     icon: a,
     iconRight: b,
-    inputId: H,
-    inputWrapperRef: O,
+    inputId: P,
+    inputWrapperRef: H,
     mode: c = l.onwhite,
-    size: X,
+    size: O,
     baseIncrementValue: y,
-    label: q,
-    error: G,
+    label: X,
+    error: q,
     errorText: E,
-    errorTextId: j,
-    testId: J,
+    errorTextId: G,
+    testId: j,
     disabled: u,
-    readOnly: Q,
-    autoComplete: T = "off",
-    afterInputChildren: Y,
-    rightOfInput: Z,
+    readOnly: J,
+    autoComplete: Q = "off",
+    afterInputChildren: T,
+    rightOfInput: Y,
     width: k,
-    required: ee,
+    required: Z,
     onChange: w,
-    onKeyDown: I,
-    autoFocus: te,
+    onKeyDown: N,
+    autoFocus: ee,
     maxCharacters: d,
-    maxText: ne,
-    ...re
-  } = e, ae = Ee(), m = D(null), N = U(H), [R, W] = K(i || ""), [oe, ie] = K(void 0), g = D(!1), S = U(j), z = /^[0-9]$/;
-  Ce(() => {
+    maxText: te,
+    ...ne
+  } = e, re = ye(), m = K(null), I = U(P), [R, W] = $(i || ""), [ae, oe] = $(void 0), g = K(!1), S = U(G), z = /^[0-9]$/;
+  xe(() => {
     W(i || "");
   }, [i]);
-  const ce = c === l.ondark, le = c === l.onblueberry, se = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!G || se, C = X === _e.large, ue = P && c !== l.ondark && !x, de = v(t["input-wrapper"], p), me = v(t["input-container"], {
-    [t["input-container--transparent"]]: ue,
-    [t["input-container--on-blueberry"]]: le,
-    [t["input-container--on-dark"]]: ce,
+  const ie = c === l.ondark, ce = c === l.onblueberry, le = !!d && R.toString().length > d, x = c === l.oninvalid || !!E || !!q || le, C = O === Ce.large, se = M && c !== l.ondark && !x, ue = v(t["input-wrapper"], p), de = v(t["input-container"], {
+    [t["input-container--transparent"]]: se,
+    [t["input-container--on-blueberry"]]: ce,
+    [t["input-container--on-dark"]]: ie,
     [t["input-container--invalid"]]: x,
     [t["input-container--large"]]: C,
     [t["input-container--disabled"]]: u,
     [t["input-container--with-icon"]]: a
-  }), pe = v(t["input-container__input"], {
+  }), me = v(t["input-container__input"], {
     [t["input-container__input--large"]]: C,
     [t["input-container__input--disabled"]]: u
-  }), A = u ? F("neutral", 700) : F("black"), _ = ae === ke.xs || !C ? B.XSmall : B.Small, V = () => {
+  }), A = u ? F("neutral", 700) : F("black"), _ = re === Ee.xs || !C ? B.XSmall : B.Small, V = () => {
     if (a)
-      return typeof a == "string" ? /* @__PURE__ */ r.createElement(We, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
-  }, fe = (n) => {
+      return typeof a == "string" ? /* @__PURE__ */ r.createElement(Re, { className: t["input-container__input__icon"], color: A, size: _, iconName: a }) : /* @__PURE__ */ r.createElement(Ne, { className: t["input-container__input__icon"], color: A, size: _, svgIcon: a });
+  }, pe = (n) => {
     if (m && m.current && a) {
       const o = b ? 0 : 1;
       m.current.children[o].focus(), e.onClick && e.onClick(n);
     }
+  }, fe = (n) => {
+    const o = he(n);
+    w && w(n), W(o), oe(o);
   }, he = (n) => {
-    const o = be(n);
-    w && w(n), W(o), ie(o);
-  }, be = (n) => {
-    if (typeof y > "u" || h !== "number")
-      return n.target.value;
+    if (typeof y > "u" || h !== "number") return n.target.value;
     const o = Number(n.target.value);
-    return !oe && !g.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
+    return !ae && !g.current && (o === 1 || o === -1) && (n.target.value = y + ""), n.target.value;
+  }, be = (n) => {
+    z.test(n.key) && (g.current = !0), N && N(n);
   }, ge = (n) => {
-    z.test(n.key) && (g.current = !0), I && I(n);
-  }, xe = (n) => {
     z.test(n.key) && (g.current = !1);
-  }, $ = k ? Ae(k, !!a, _) : void 0;
-  return /* @__PURE__ */ r.createElement(Ie, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": J, "data-analyticsid": ve.Input, className: de, ref: O }, Re(q, N, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: fe, ref: m, className: me, style: { maxWidth: $ } }, !b && V(), /* @__PURE__ */ r.createElement(
+  }, D = k ? ze(k, !!a, _) : void 0;
+  return /* @__PURE__ */ r.createElement(we, { errorText: E, errorTextId: S }, /* @__PURE__ */ r.createElement("div", { "data-testid": j, "data-analyticsid": _e.Input, className: ue, ref: H }, Ie(X, I, c), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper"] }, /* @__PURE__ */ r.createElement("div", { onClick: pe, ref: m, className: de, style: { maxWidth: D } }, !b && V(), /* @__PURE__ */ r.createElement(
     "input",
     {
-      onChange: he,
-      onKeyDown: ge,
-      onKeyUp: xe,
-      name: M,
+      onChange: fe,
+      onKeyDown: be,
+      onKeyUp: ge,
+      name: L,
       type: h,
       defaultValue: i,
-      id: N,
-      className: pe,
+      id: I,
+      className: me,
       ref: s,
       "aria-labelledby": e["aria-labelledby"] ?? void 0,
-      "aria-describedby": we(e, S),
+      "aria-describedby": ke(e, S),
       "aria-invalid": !!x,
       disabled: u,
       placeholder: f,
-      readOnly: Q,
-      autoComplete: T || "off",
-      required: ee,
-      autoFocus: te,
-      ...re
+      readOnly: J,
+      autoComplete: Q || "off",
+      required: Z,
+      autoFocus: ee,
+      ...ne
     }
-  ), b && V()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Z)), d && /* @__PURE__ */ r.createElement(Se, { maxCharacters: d, length: R.toString().length, maxText: ne, mode: c, maxWidth: $ }), Y));
+  ), b && V()), /* @__PURE__ */ r.createElement("div", { className: t["content-wrapper__right-of-input"] }, Y)), d && /* @__PURE__ */ r.createElement(We, { maxCharacters: d, length: R.toString().length, maxText: te, mode: c, maxWidth: D }), T));
 });
-L.displayName = "Input";
-const Ge = L;
+Ae.displayName = "Input";
 export {
-  ze as InputTypes,
-  Ge as default
+  Se as InputTypes,
+  Ae as default
 };
 //# sourceMappingURL=Input.js.map