@helsenorge/designsystem-react 2.17.0 → 3.0.1

package/components/Select/componentdata.json

@@ -1 +1 @@
-{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"defaultValue":{"defaultValue":null,"description":"Gives defaultvalue to the comp. Preferred over selected prop on option by react","name":"defaultValue","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string | number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}
+{"props":{"afterLabelChildren":{"defaultValue":null,"description":"Component shown after label","name":"afterLabelChildren","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"ReactNode"}},"children":{"defaultValue":null,"description":"Sets the content of the select element.","name":"children","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":true,"type":{"name":"ReactNode"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"concept":{"defaultValue":null,"description":"Changes the visuals of the component","name":"concept","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"SelectConcept","value":[{"value":"\"normal\""},{"value":"\"transparent\""}]}},"label":{"defaultValue":null,"description":"The label text above the select","name":"label","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"mode":{"defaultValue":null,"description":"Changes the visuals of the component","name":"mode","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"enum","raw":"\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\"","value":[{"value":"\"onwhite\""},{"value":"\"ongrey\""},{"value":"\"onblueberry\""},{"value":"\"ondark\""},{"value":"\"oninvalid\""}]}},"error":{"defaultValue":null,"description":"Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup","name":"error","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"boolean"}},"errorText":{"defaultValue":null,"description":"Error text to show above the component","name":"errorText","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"selectId":{"defaultValue":null,"description":"select id of the select element","name":"selectId","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string"}},"width":{"defaultValue":null,"description":"Width of select in characters (approximate)","name":"width","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"number"}},"defaultValue":{"defaultValue":null,"description":"Gives defaultvalue to the comp. Preferred over selected prop on option by react","name":"defaultValue","parent":{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"},"declarations":[{"fileName":"src/components/Select/Select.tsx","name":"SelectProps"}],"required":false,"type":{"name":"string | number"}},"name":{"defaultValue":null,"description":"","name":"name","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string"}},"disabled":{"defaultValue":null,"description":"","name":"disabled","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"required":{"defaultValue":null,"description":"","name":"required","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"boolean"}},"value":{"defaultValue":null,"description":"","name":"value","parent":{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"},"declarations":[{"fileName":"s/node_modules/@types/react/index.d.ts","name":"SelectHTMLAttributes"}],"required":false,"type":{"name":"string | number | readonly string[]"}}}}

package/components/Select/index.js

@@ -1,2 +1,2 @@
-import"../../Select.js";import{S as k,S as n}from"../../Select.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ChevronDown.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";export{k as Select,n as default};
+import{S as o}from"../../Select.js";import{a as k}from"../../Select.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Icons/Icon.js";import"../Icons/ChevronDown.js";import"./styles.module.scss";export{k as Select,o as default};
 //# sourceMappingURL=index.js.map

package/components/Select/styles.module.scss

@@ -1,7 +1,8 @@
-@import '../../scss/_spacers.scss';
-@import '../../scss/_breakpoints.scss';
-@import '../../scss/_palette.scss';
-@import '../../scss/font-settings.scss';
+@use 'sass:map';
+@import '../../scss/spacers';
+@import '../../scss/breakpoints';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
 
 .select-wrapper {
   display: flex;
@@ -15,7 +16,7 @@
     font-weight: 600;
     padding-bottom: getSpacer(xs);
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       line-height: getSpacer(l);
       font-size: $font-size-md;
     }
@@ -35,6 +36,7 @@
   display: inline-grid;
   background-color: $white;
   align-items: center;
+
   // Andre kolonne her styrer plassering av select ikonet
   grid-template-columns: 1fr 2.8rem;
 
@@ -45,16 +47,19 @@
   &:hover {
     background: $neutral50;
   }
+
   &--on-blueberry {
     &:hover {
       background-color: $blueberry50;
     }
   }
+
   &--invalid {
     &:hover {
       background-color: $cherry50;
     }
   }
+
   &--disabled {
     background: $neutral50;
 
@@ -67,7 +72,6 @@
 .select {
   /* Pil fjernes for browsere utenom IE */
   appearance: none;
-
   height: 2.5rem;
   align-items: center;
   background-color: transparent;
@@ -82,7 +86,7 @@
   line-height: $lineheight-size-sm;
   border-radius: 0;
 
-  @media (min-width: map-get($grid-breakpoints, md)) {
+  @media (min-width: map.get($grid-breakpoints, md)) {
     height: 3.125rem;
     font-size: $font-size-md;
   }
@@ -90,6 +94,7 @@
   &--on-blueberry {
     outline-color: $blueberry500;
   }
+
   &--invalid {
     outline-color: $cherry600;
   }
@@ -98,6 +103,7 @@
     outline-width: 3px;
     outline-offset: -1px;
   }
+
   &:focus {
     outline: $black solid 4px;
     outline-offset: -2px;
@@ -113,7 +119,7 @@
     font-family: inherit;
     font-size: $font-size-sm;
 
-    @media (min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map.get($grid-breakpoints, md)) {
       font-size: $font-size-md;
     }
   }

package/components/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA2B3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4KxC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA4B3D,UAAU,WAAW;IACnB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8KxC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import s,{useState as U,useRef as M,useEffect as h}from"react";import P from"classnames";import{T as C}from"../../Title.js";import i from"./styles.module.scss";import{AnalyticsId as K}from"../../constants.js";import{useSize as N}from"../../hooks/useSize.js";import{useUuid as g}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as W}from"../../utils/accessibility.js";import"../Title/styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";const z=(a,k,c)=>{const[u,r]=U(a);return[u,f=>{f>c?r(c):f<k?r(k):r(f)}]},m=100,d=0,V=1,b=10,ae=({title:a,ariaLabel:k,labelLeft:c,labelRight:u,disabled:r=!1,onChange:E,testId:f})=>{const[L,y]=U(!1),[n,o]=z((m-d)/2,d,m),p=g(),w=g(),_=g(),A=M(null),v=M(null),{width:I}=N(A)||{width:0},{width:R}=N(v)||{width:0};h(()=>{const e=()=>{y(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const S=e=>{var l,D;const t=(D=(l=A.current)==null?void 0:l.getBoundingClientRect().x)!=null?D:0;return Math.round((e-t)/I*(m-d))};h(()=>{const e=t=>{if(!r&&L){const l=S(t.clientX);o(l)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[L]),h(()=>{!r&&E&&E(n)},[n]);const T=e=>{if(r)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":o(n-V),t=!0;break;case"PageDown":o(n-b),t=!0;break;case"ArrowRight":case"ArrowUp":o(n+V),t=!0;break;case"PageUp":o(n+b),t=!0;break;case"Home":o(d),t=!0;break;case"End":o(m),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},x=e=>{var l;if(r)return;const t=S(e.clientX);o(t),(l=v.current)==null||l.focus()},B=e=>{var t;r||(y(!0),e.preventDefault(),e.stopPropagation(),(t=v.current)==null||t.focus())},X=(I-R)/(m-d)*n,j=W({label:k,id:(()=>{if(a&&c&&u)return[p,w,_].join(" ");if(a&&c)return[p,w].join(" ");if(a&&u)return[p,_].join(" ");if(a)return p})(),prefer:"label"});return s.createElement("div",{className:i.slider,"data-testid":f,"data-analyticsid":K.Slider},a&&s.createElement(C,{htmlMarkup:"h3",margin:1.5,appearance:"title3",id:p},a),s.createElement("div",{ref:A,className:P(i["slider__track-wrapper"],r&&i["slider__track-wrapper--disabled"]),onClick:x,onPointerDown:B},s.createElement("div",{className:P(i.slider__track,r&&i["slider__track--disabled"])}),s.createElement("div",{role:"slider",ref:v,className:P(i.slider__marker,r&&i["slider__marker--disabled"]),style:{left:`${X}px`},onKeyDown:T,"aria-valuenow":n,"aria-valuemin":d,"aria-valuemax":m,tabIndex:r?void 0:0,"aria-disabled":r,...j})),(c||u)&&s.createElement("span",{className:i.slider__options},s.createElement("span",{id:w},c),s.createElement("span",{id:_},u)))};export{ae as Slider,ae as default};
+import s,{useState as b,useRef as D,useEffect as h}from"react";import P from"classnames";import{AnalyticsId as j}from"../../constants.js";import{useSize as M}from"../../hooks/useSize.js";import{useUuid as g}from"../../hooks/useUuid.js";import{getAriaLabelAttributes as C}from"../../utils/accessibility.js";import{T as K}from"../../Title.js";import i from"./styles.module.scss";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Title/styles.module.scss";const W=(n,k,c)=>{const[u,r]=b(n);return[u,f=>{f>c?r(c):f<k?r(k):r(f)}]},m=100,d=0,N=1,V=10,$=({title:n,ariaLabel:k,labelLeft:c,labelRight:u,disabled:r=!1,onChange:E,testId:f})=>{const[L,S]=b(!1),[a,o]=W((m-d)/2,d,m),p=g(),w=g(),_=g(),A=D(null),v=D(null),{width:y}=M(A)||{width:0},{width:U}=M(v)||{width:0};h(()=>{const e=()=>{S(!1)};return document.addEventListener("pointerup",e),()=>{document.removeEventListener("pointerup",e)}},[]);const I=e=>{var l;const t=((l=A.current)==null?void 0:l.getBoundingClientRect().x)??0;return Math.round((e-t)/y*(m-d))};h(()=>{const e=t=>{if(!r&&L){const l=I(t.clientX);o(l)}};return document.addEventListener("pointermove",e),()=>{document.removeEventListener("pointermove",e)}},[L]),h(()=>{!r&&E&&E(a)},[a]);const R=e=>{if(r)return;let t=!1;switch(e.key){case"ArrowLeft":case"ArrowDown":o(a-N),t=!0;break;case"PageDown":o(a-V),t=!0;break;case"ArrowRight":case"ArrowUp":o(a+N),t=!0;break;case"PageUp":o(a+V),t=!0;break;case"Home":o(d),t=!0;break;case"End":o(m),t=!0;break}t&&(e.preventDefault(),e.stopPropagation())},T=e=>{var l;if(r)return;const t=I(e.clientX);o(t),(l=v.current)==null||l.focus()},x=e=>{var t;r||(S(!0),e.preventDefault(),e.stopPropagation(),(t=v.current)==null||t.focus())},B=(y-U)/(m-d)*a,X=C({label:k,id:(()=>{if(n&&c&&u)return[p,w,_].join(" ");if(n&&c)return[p,w].join(" ");if(n&&u)return[p,_].join(" ");if(n)return p})(),prefer:"label"});return s.createElement("div",{className:i.slider,"data-testid":f,"data-analyticsid":j.Slider},n&&s.createElement(K,{htmlMarkup:"h3",margin:1.5,appearance:"title3",id:p},n),s.createElement("div",{ref:A,className:P(i["slider__track-wrapper"],r&&i["slider__track-wrapper--disabled"]),onClick:T,onPointerDown:x},s.createElement("div",{className:P(i.slider__track,r&&i["slider__track--disabled"])}),s.createElement("div",{role:r?void 0:"slider",ref:v,className:P(i.slider__marker,r&&i["slider__marker--disabled"]),style:{left:`${B}px`},onKeyDown:R,"aria-valuenow":a,"aria-valuemin":d,"aria-valuemax":m,tabIndex:r?void 0:0,"aria-disabled":r,...X})),(c||u)&&s.createElement("span",{className:i.slider__options},s.createElement("span",{id:w},c),s.createElement("span",{id:_},u)))},ne=$;export{$ as Slider,ne as default};
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_b","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  return [value, setSafeValue];\n};\n\ninterface SliderProps {\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Function to be called when the value state has changed. */\n  onChange?: (value: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst MAX_VALUE = 100;\nconst MIN_VALUE = 0;\nconst STEP = 1;\nconst LARGE_STEP = 10;\n\nexport const Slider: React.FC<SliderProps> = ({ title, ariaLabel, labelLeft, labelRight, disabled = false, onChange, testId }) => {\n  const [isMoving, setIsMoving] = useState(false);\n  const [value, setValue] = useSafeNumberValue((MAX_VALUE - MIN_VALUE) / 2, MIN_VALUE, MAX_VALUE);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const markerRef = useRef<HTMLDivElement>(null);\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const { width: markerWidth } = useSize(markerRef) || { width: 0 };\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    return Math.round(((markerPosition - trackPosition) / trackWidth) * (MAX_VALUE - MIN_VALUE));\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValue(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return () => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (!disabled && onChange) {\n      onChange(value);\n    }\n  }, [value]);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValue(value - STEP);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValue(value - LARGE_STEP);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValue(value + STEP);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValue(value + LARGE_STEP);\n        flag = true;\n        break;\n      case 'Home':\n        setValue(MIN_VALUE);\n        flag = true;\n        break;\n      case 'End':\n        setValue(MAX_VALUE);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValue(newValue);\n    markerRef.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    markerRef.current?.focus();\n  };\n\n  const markerXPos = ((trackWidth - markerWidth) / (MAX_VALUE - MIN_VALUE)) * value;\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  return (\n    <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n      {title && (\n        <Title htmlMarkup={'h3'} margin={1.5} appearance={'title3'} id={titleId}>\n          {title}\n        </Title>\n      )}\n      {/* Komponenten er tilgjengelig for mus/keyboard gjennom bruk av slideren */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n      <div\n        ref={trackRef}\n        className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n        onClick={handleTrackClick}\n        onPointerDown={handlePointerDown}\n      >\n        <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])} />\n        <div\n          role={disabled ? undefined : 'slider'}\n          ref={markerRef}\n          className={classNames(styles.slider__marker, disabled && styles['slider__marker--disabled'])}\n          style={{\n            left: `${markerXPos}px`,\n          }}\n          onKeyDown={handleKeyDown}\n          aria-valuenow={value}\n          aria-valuemin={MIN_VALUE}\n          aria-valuemax={MAX_VALUE}\n          tabIndex={disabled ? undefined : 0}\n          aria-disabled={disabled}\n          {...ariaLabelAttributes}\n        />\n      </div>\n      {(labelLeft || labelRight) && (\n        <span className={styles.slider__options}>\n          <span id={labelLeftId}>{labelLeft}</span>\n          <span id={labelRightId}>{labelRight}</span>\n        </span>\n      )}\n    </div>\n  );\n};\n\nexport default Slider;\n"],"names":["useSafeNumberValue","initial","min","max","value","setValue","useState","newValue","MAX_VALUE","MIN_VALUE","STEP","LARGE_STEP","Slider","title","ariaLabel","labelLeft","labelRight","disabled","onChange","testId","isMoving","setIsMoving","titleId","useUuid","labelLeftId","labelRightId","trackRef","useRef","markerRef","trackWidth","useSize","markerWidth","useEffect","handlePointerUp","getValueBasedOnMarkerPosition","markerPosition","trackPosition","_a","handlePointerMove","e","handleKeyDown","flag","handleTrackClick","handlePointerDown","markerXPos","ariaLabelAttributes","getAriaLabelAttributes","React","styles","AnalyticsId","Title","classNames","Slider$1"],"mappings":"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"}

package/components/Slider/styles.module.scss

@@ -11,6 +11,7 @@
   &__track-wrapper {
     width: 100%;
     cursor: pointer;
+    touch-action: none;
 
     &--disabled {
       cursor: default;
@@ -44,7 +45,7 @@
     cursor: pointer;
 
     &:focus-within {
-      box-shadow: 0px 0px 0px 0.1rem $black;
+      box-shadow: 0 0 0 0.1rem $black;
     }
 
     &::after {

package/components/Spacer/Spacer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD,UAAU,WAAW;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,MAAM,iFAuBV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD,UAAU,WAAW;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,MAAM,iFAuBV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Spacer/index.js

@@ -1,2 +1,2 @@
-import"../../Spacer.js";import{S as f}from"../../Spacer.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";export{f as default};
+import{S as o}from"../../Spacer.js";import"react";import"classnames";import"../../constants.js";import"./styles.module.scss";export{o as default};
 //# sourceMappingURL=index.js.map

package/components/Spacer/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/spacers.scss';
+@import '../../scss/spacers';
 
 .spacer {
   display: block;
@@ -8,39 +8,51 @@
   &--4xs {
     height: getSpacer(4xs);
   }
+
   &--3xs {
     height: getSpacer(3xs);
   }
+
   &--2xs {
     height: getSpacer(2xs);
   }
+
   &--xs {
     height: getSpacer(xs);
   }
+
   &--s {
     height: getSpacer(s);
   }
+
   &--m {
     height: getSpacer(m);
   }
+
   &--l {
     height: getSpacer(l);
   }
+
   &--xl {
     height: getSpacer(xl);
   }
+
   &--2xl {
     height: getSpacer(2xl);
   }
+
   &--3xl {
     height: getSpacer(3xl);
   }
+
   &--4xl {
     height: getSpacer(4xl);
   }
+
   &--5xl {
     height: getSpacer(5xl);
   }
+
   &--6xl {
     height: getSpacer(6xl);
   }

package/components/StatusDot/index.js

@@ -1,2 +1,2 @@
-import"../../StatusDot.js";import{a as j,S as k}from"../../StatusDot.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"./styles.module.scss";export{j as StatusDotVariant,k as default};
+import{S as o}from"../../StatusDot.js";import{a as j}from"../../StatusDot.js";import"react";import"classnames";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../constants.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"./styles.module.scss";export{j as StatusDotVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/styles.module.scss

@@ -1,7 +1,7 @@
 @import '../../scss/palette';
-@import '../../scss/spacers.scss';
+@import '../../scss/spacers';
 @import '../../scss/font-settings';
-@import '../../scss/screen-reader.scss';
+@import '../../scss/screen-reader';
 
 .statusdot {
   position: relative;

package/components/Stepper/Dot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Dot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,QAAQ;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAY3B,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/components/Stepper/DotList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotList.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/DotList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,YAAY;IACpB,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMhC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/{Progressbar/Progressbar.d.ts → Stepper/Stepper.d.ts}

@@ -1,11 +1,11 @@
 import React from 'react';
-export interface ProgressbarProps {
+export interface StepperProps {
     /**
-     * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!
+     * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!
      */
     ariaLabel?: string;
     /**
-     * Sets aria-labelledby of the progressbar. ariaLabel or ariaLabelledById MUST be set!
+     * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!
      */
     ariaLabelledById?: string;
     /**
@@ -23,6 +23,6 @@ export interface ProgressbarProps {
     /** Sets the data-testid attribute. */
     testId?: string;
 }
-declare const Progressbar: React.FC<ProgressbarProps>;
-export default Progressbar;
-//# sourceMappingURL=Progressbar.d.ts.map
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

package/components/Stepper/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8CnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/Stepper/componentdata.json

@@ -0,0 +1 @@
+{"props":{"ariaLabel":{"defaultValue":null,"description":"Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabel","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"string"}},"ariaLabelledById":{"defaultValue":null,"description":"Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!","name":"ariaLabelledById","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"string"}},"value":{"defaultValue":null,"description":"Current value. Must be between min and max","name":"value","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"number"}},"min":{"defaultValue":{"value":"0"},"description":"Minimum value","name":"min","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"number"}},"max":{"defaultValue":{"value":"2"},"description":"Maximum value","name":"max","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"},"declarations":[{"fileName":"src/components/Stepper/Stepper.tsx","name":"StepperProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+import Stepper from './Stepper';
+export * from './Stepper';
+export default Stepper;
+//# sourceMappingURL=index.d.ts.map

package/components/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,eAAe,OAAO,CAAC"}

package/components/Stepper/index.js

@@ -0,0 +1,2 @@
+import o,{useRef as D}from"react";import b from"classnames";import l from"./styles.module.scss";import{AnalyticsId as v}from"../../constants.js";import{useSize as A}from"../../hooks/useSize.js";import{getAriaLabelAttributes as R}from"../../utils/accessibility.js";import"../../utils/debounce.js";const S=4,M=24,$=8,x=(e,t)=>e<t?e:t-1,k=(e,t)=>t<e?e:t,I=(e,t,s)=>typeof e>"u"||e<t?t:e>s?s:e,W=e=>Math.floor(e/(M+S)),X=(e,t)=>(e-M)/(t-1),T=(e,t)=>e*t,L=(e,t)=>Array.from(Array(t-e+1),(s,a)=>a+e),C=(e,t,s)=>{const a=x(t,s),r=k(a,s);return{validatedValue:I(e,a,r),validatedMin:a,validatedMax:r}},F=({index:e,completed:t,distanceBetweenDots:s,position:a})=>{const r=b(l.stepper__dot,t&&l["stepper__dot--completed"],a&&l[`stepper__dot--${a}`]),i=!a&&typeof e<"u"&&typeof s<"u"?{left:`${e*s+$}px`}:void 0;return o.createElement("span",{className:r,style:i,"data-testid":"dot"})},f=F,K=({allowedValues:e,currentValue:t,distanceBetweenDots:s})=>o.createElement(o.Fragment,null,e.map((a,r)=>o.createElement(f,{index:r,key:a,completed:a<t,distanceBetweenDots:s}))),O=K,z=({ariaLabelledById:e,ariaLabel:t,value:s,min:a=0,max:r=2,testId:p})=>{const i=D(null),_=D(null),{width:h=0}=A(i)||{},{width:g=0}=A(_)||{},{validatedValue:n,validatedMin:m,validatedMax:c}=C(s,a,r),d=L(m,c),V=d.indexOf(n),w=W(h),E=X(g,d.length),y=T(E,V),u=d.length<=w,P=n===c,N=R({label:t,id:e});return o.createElement("div",{className:l["stepper-wrapper"],ref:i},o.createElement("span",{role:"progressbar",...N,"aria-valuenow":n,"aria-valuemin":m,"aria-valuemax":c,className:l.stepper,style:{backgroundPositionX:`${P?g:y}px`},ref:_,"data-testid":p,"data-analyticsid":v.Stepper},u&&o.createElement(O,{allowedValues:d,currentValue:n,distanceBetweenDots:E}),!u&&o.createElement(o.Fragment,null,o.createElement(f,{completed:n>m,position:"left"}),o.createElement(f,{completed:n===c,position:"right"})),o.createElement("span",{className:l.stepper__marker,style:{left:`${y}px`}})),!u&&o.createElement("span",{className:l.stepper__number},`${n}/${c}`))},U=z;export{U as default};
+//# sourceMappingURL=index.js.map

package/components/Stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Stepper/utils.ts","../../../src/components/Stepper/Dot.tsx","../../../src/components/Stepper/DotList.tsx","../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["/**\n * Minimum avstand fra markør til prikk\n */\nconst MARKER_DOT_MIN_DISTANCE_PX = 4;\n\n/**\n * Bredde på markør\n */\nconst MARKER_WIDTH_PX = 24;\n\n/**\n * Horisontal padding på stepper\n */\nexport const STEPPER_PADDING_X_PX = 8;\n\n/**\n * Valider at minimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Mimimum-verdi, ikke større enn eller lik maksimum-verdi\n */\nexport const getValidatedMin = (min: number, max: number): number => (min < max ? min : max - 1);\n\n/**\n * Valider at maksimum-verdi er innenfor gyldig område\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Maksimum-verdi, ikke mindre enn minimum-verdi\n */\nexport const getValidatedMax = (min: number, max: number): number => (max < min ? min : max);\n\n/**\n * Valider at verdi er innenfor gyldig område\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Verdi, ikke mindre enn 0, ikke mer enn max\n */\nexport const getValidatedValue = (value: number | undefined, min: number, max: number): number => {\n  if (typeof value === 'undefined' || value < min) {\n    return min;\n  }\n\n  return value > max ? max : value;\n};\n\n/**\n * Finn antall prikker det er plass til\n * @param stepperWidth Bredde på stepper\n * @returns Antall prikker\n */\nexport const getMaximumDots = (stepperWidth: number): number => Math.floor(stepperWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param stepperWidth Bredde på stepper\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (stepperWidth: number, dots: number): number => (stepperWidth - MARKER_WIDTH_PX) / (dots - 1);\n\n/**\n * Beregn riktig plassering av markør\n * @param distanceBetweenDots Distanse mellom prikker\n * @param index Nåværende verdi i stepper\n * @returns Plassering til markør fra venstre\n */\nexport const getMarkerPosition = (distanceBetweenDots: number, index: number): number => distanceBetweenDots * index;\n\n/**\n * Lag liste med tillate verdier fra min til maks\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Liste med verdier\n */\nexport const getAllowedValues = (min: number, max: number): number[] => Array.from(Array(max - min + 1), (_, index) => index + min);\n\n/**\n * Valider props som skal brukes til beregning av posisjon m.m.\n * @param value Nåværende verdi\n * @param min Mimimum-verdi\n * @param max Maksimum-verdi\n * @returns Objekt med gyldige verdier\n */\nexport const getValidatedProps = (\n  value: number | undefined,\n  min: number,\n  max: number\n): { validatedValue: number; validatedMin: number; validatedMax: number } => {\n  const validatedMin = getValidatedMin(min, max);\n  const validatedMax = getValidatedMax(validatedMin, max);\n  const validatedValue = getValidatedValue(value, validatedMin, validatedMax);\n\n  return { validatedValue, validatedMin, validatedMax };\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { STEPPER_PADDING_X_PX } from './utils';\n\nimport styles from './styles.module.scss';\n\ninterface DotProps {\n  index?: number;\n  completed: boolean;\n  distanceBetweenDots?: number;\n  position?: 'left' | 'right';\n}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots, position }) => {\n  const classes = classNames(\n    styles.stepper__dot,\n    completed && styles['stepper__dot--completed'],\n    position && styles[`stepper__dot--${position}`]\n  );\n  const positionWithStyle = !position && typeof index !== 'undefined' && typeof distanceBetweenDots !== 'undefined';\n  const style: React.HTMLAttributes<HTMLSpanElement>['style'] = positionWithStyle\n    ? { left: `${index * distanceBetweenDots + STEPPER_PADDING_X_PX}px` }\n    : undefined;\n\n  return <span className={classes} style={style} data-testid=\"dot\" />;\n};\n\nexport default Dot;\n","import React from 'react';\n\nimport Dot from './Dot';\n\ninterface DotListProps {\n  allowedValues: number[];\n  currentValue: number;\n  distanceBetweenDots: number;\n}\n\nconst Dots: React.FC<DotListProps> = ({ allowedValues, currentValue, distanceBetweenDots }) => (\n  <>\n    {allowedValues.map((value, index) => (\n      <Dot index={index} key={value} completed={value < currentValue} distanceBetweenDots={distanceBetweenDots} />\n    ))}\n  </>\n);\n\nexport default Dots;\n","import React, { useRef } from 'react';\n\nimport Dot from './Dot';\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\n\nimport styles from './styles.module.scss';\n\nexport interface StepperProps {\n  /**\n   * Sets aria-label of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the stepper. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Current value. Must be between min and max\n   */\n  value?: number;\n  /**\n   * Minimum value\n   */\n  min?: number;\n  /**\n   * Maximum value\n   */\n  max?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({ ariaLabelledById, ariaLabel, value, min = 0, max = 2, testId }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLSpanElement>(null);\n  const { width: wrapperWidth = 0 } = useSize(wrapperRef) || {};\n  const { width: stepperWidth = 0 } = useSize(ref) || {};\n\n  const { validatedValue, validatedMin, validatedMax } = getValidatedProps(value, min, max);\n  const allowedValues = getAllowedValues(validatedMin, validatedMax);\n  const index = allowedValues.indexOf(validatedValue);\n  const maximumDots = getMaximumDots(wrapperWidth);\n  const distanceBetweenDots = getDistanceBetweenDots(stepperWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showAllDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['stepper-wrapper']} ref={wrapperRef}>\n      <span\n        role=\"progressbar\"\n        {...ariaLabelAttributes}\n        aria-valuenow={validatedValue}\n        aria-valuemin={validatedMin}\n        aria-valuemax={validatedMax}\n        className={styles.stepper}\n        style={{\n          backgroundPositionX: `${isCompleted ? stepperWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Stepper}\n      >\n        {showAllDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        {!showAllDots && (\n          <>\n            <Dot completed={validatedValue > validatedMin} position=\"left\" />\n            <Dot completed={validatedValue === validatedMax} position=\"right\" />\n          </>\n        )}\n        <span className={styles.stepper__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.stepper__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","STEPPER_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","stepperWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","Dot$1","Dots","allowedValues","currentValue","React","DotList","Stepper","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Stepper$1"],"mappings":"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"}

package/components/Stepper/styles.module.scss

@@ -0,0 +1,105 @@
+@use 'sass:map';
+@import '../../scss/breakpoints';
+@import '../../scss/spacers';
+@import '../../scss/palette';
+@import '../../scss/font-settings';
+
+.stepper-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: getSpacer(l);
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    min-height: getSpacer(xl);
+  }
+}
+
+$transition: 0.4s linear 0s;
+
+/**
+ * Bredde og høyde på markør
+ */
+$marker-size: 24px;
+
+/**
+ * Bredde og høyde på prikk
+ */
+$dot-size: 8px;
+
+/**
+ * Høyde på stepper
+ */
+$stepper-height: 12px;
+
+/**
+ * Horisontal padding på stepper
+ */
+$stepper-padding-x: 8px;
+
+/**
+ * Avstand fra venstre kant av stepper til midten av første prikk
+ */
+$dot-offset: calc($stepper-padding-x + $dot-size / 2);
+
+.stepper {
+  flex-grow: 1;
+  position: relative;
+  display: block;
+  height: $stepper-height;
+  border-radius: 4px;
+  background: linear-gradient(to right, $blueberry600, $blueberry600 $dot-offset, $blueberry50 $dot-offset, $blueberry50), $blueberry600;
+  background-repeat: no-repeat;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-position $transition;
+  }
+
+  &__marker {
+    position: absolute;
+    width: $marker-size;
+    height: $marker-size;
+    top: calc(($stepper-height - $marker-size) / 2);
+    background-color: $white;
+    border: 6px solid $blueberry600;
+    border-radius: 50%;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: left $transition;
+    }
+  }
+
+  &__number {
+    min-width: 2.5rem;
+    text-align: right;
+    margin-left: getSpacer(xs);
+    font-size: $font-size-xs;
+    line-height: $lineheight-size-xs;
+    font-weight: 700;
+    color: $blueberry700;
+  }
+
+  &__dot {
+    position: absolute;
+    top: calc(($stepper-height - $dot-size) / 2);
+    width: $dot-size;
+    height: $dot-size;
+    background-color: $blueberry600;
+    border-radius: 50%;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color $transition;
+    }
+
+    &--completed {
+      background-color: $blueberry50;
+    }
+
+    &--left {
+      left: $dot-offset;
+    }
+
+    &--right {
+      right: $dot-offset;
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+export type Styles = {
+  stepper: string;
+  stepper__dot: string;
+  'stepper__dot--completed': string;
+  'stepper__dot--left': string;
+  'stepper__dot--right': string;
+  stepper__marker: string;
+  stepper__number: string;
+  'stepper-wrapper': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/{Progressbar → Stepper}/utils.d.ts

@@ -1,7 +1,7 @@
 /**
- * Horisontal padding på progressbar
+ * Horisontal padding på stepper
  */
-export declare const PROGRESS_BAR_PADDING_X_PX = 8;
+export declare const STEPPER_PADDING_X_PX = 8;
 /**
  * Valider at minimum-verdi er innenfor gyldig område
  * @param min Mimimum-verdi
@@ -26,21 +26,21 @@ export declare const getValidatedMax: (min: number, max: number) => number;
 export declare const getValidatedValue: (value: number | undefined, min: number, max: number) => number;
 /**
  * Finn antall prikker det er plass til
- * @param progressbarWidth Bredde på progressbar
+ * @param stepperWidth Bredde på stepper
  * @returns Antall prikker
  */
-export declare const getMaximumDots: (progressbarWidth: number) => number;
+export declare const getMaximumDots: (stepperWidth: number) => number;
 /**
  * Beregn riktig distance mellom prikker
- * @param progressbarWidth Bredde på progressbar
+ * @param stepperWidth Bredde på stepper
  * @param dots Antall prikker som skal vises
  * @returns Distanse mellom prikker
  */
-export declare const getDistanceBetweenDots: (progressbarWidth: number, dots: number) => number;
+export declare const getDistanceBetweenDots: (stepperWidth: number, dots: number) => number;
 /**
  * Beregn riktig plassering av markør
  * @param distanceBetweenDots Distanse mellom prikker
- * @param index Nåværende verdi i progressbar
+ * @param index Nåværende verdi i stepper
  * @returns Plassering til markør fra venstre
  */
 export declare const getMarkerPosition: (distanceBetweenDots: number, index: number) => number;

package/components/Stepper/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/utils.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MAAqC,CAAC;AAEjG;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QAAS,MAAM,OAAO,MAAM,KAAG,MAAiC,CAAC;AAE7F;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,GAAG,SAAS,OAAO,MAAM,OAAO,MAAM,KAAG,MAMvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,iBAAkB,MAAM,KAAG,MAAmF,CAAC;AAE1I;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,iBAAkB,MAAM,QAAQ,MAAM,KAAG,MAAuD,CAAC;AAEpI;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,wBAAyB,MAAM,SAAS,MAAM,KAAG,MAAqC,CAAC;AAErH;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,QAAS,MAAM,OAAO,MAAM,KAAG,MAAM,EAAiE,CAAC;AAEpI;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,UACrB,MAAM,GAAG,SAAS,OACpB,MAAM,OACN,MAAM;oBACQ,MAAM;kBAAgB,MAAM;kBAAgB,MAAM;CAMtE,CAAC"}