@helsenorge/designsystem-react 2.1.0 → 2.2.0

package/components/FormGroup/FormGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMrE,oBAAY,aAAa,GAAG,UAAU,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,uFAyFpB,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../src/components/FormGroup/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAOrE,oBAAY,aAAa,GAAG,UAAU,GAAG,KAAK,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,aAAa,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,uFAkFpB,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/components/FormGroup/index.js

@@ -1,2 +1,2 @@
-import"../../FormGroup.js";import{F as A,F as B}from"../../FormGroup.js";import"react";import"classnames";import"./styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";export{A as FormGroup,B as default};
+import"../../FormGroup.js";import{F as C,F as D}from"../../FormGroup.js";import"react";import"classnames";import"./styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";export{C as FormGroup,D as default};
 //# sourceMappingURL=index.js.map

package/components/FormGroup/styles.module.scss

@@ -9,48 +9,19 @@
       color: $white;
     }
   }
-
-  &__errors {
-    font-size: $font-size-sm;
-    font-weight: 600;
-    color: $cherry500;
-    margin-top: 0;
-  }
 }
 
 .form-group-wrapper:last-of-type {
   padding-bottom: 0;
 }
 
-.form-group {
-  padding: 0 0 getSpacer(m);
-
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    padding: 0 0 getSpacer(l);
-  }
-
-  &--invalid {
-    padding-top: getSpacer(s);
-    margin-left: getSpacer(xs) * -1;
-    margin-right: getSpacer(xs) * -1;
-    padding-left: getSpacer(2xs);
-    padding-right: getSpacer(xs);
-    background-color: $cherry100;
-    border-left: getSpacer(3xs) solid $cherry500;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      margin-left: (getSpacer(m) + 0.25rem) * -1;
-      margin-right: (getSpacer(m) + 0.25rem) * -1;
-      padding-left: getSpacer(m);
-      padding-right: getSpacer(m);
-    }
-  }
-}
-
 .field-set {
   border: none;
   padding: 0;
   margin: 0;
+  > div {
+    padding-bottom: 0;
+  }
 
   &__legend {
     font-size: $font-size-md;

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

@@ -2,10 +2,7 @@ export type Styles = {
   'field-set': string;
   'field-set__legend': string;
   'field-set__legend--on-dark': string;
-  'form-group': string;
-  'form-group--invalid': string;
   'form-group-wrapper': string;
-  'form-group-wrapper__errors': string;
   'form-group-wrapper__title--on-dark': string;
 };
 

package/components/GridExample/GridExample.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const GridExample: React.FC;
+export default GridExample;
+//# sourceMappingURL=GridExample.d.ts.map

package/components/GridExample/GridExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridExample.d.ts","sourceRoot":"","sources":["../../../src/components/GridExample/GridExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAM/B,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/GridExample/componentdata.json

@@ -0,0 +1 @@
+{"props":{}}

package/components/GridExample/index.d.ts

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

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

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

package/components/GridExample/index.js

@@ -0,0 +1,2 @@
+import e from"react";const c=({children:a})=>e.createElement("div",{className:"container"},e.createElement("div",{className:"row"},e.createElement("div",{className:"col"},a)));export{c as GridExample,c as default};
+//# sourceMappingURL=index.js.map

package/components/GridExample/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/GridExample/GridExample.tsx"],"sourcesContent":["import React from 'react';\n\nexport const GridExample: React.FC = ({ children }) => (\n  <div className=\"container\">\n    <div className=\"row\">\n      <div className=\"col\">{children}</div>\n    </div>\n  </div>\n);\n\nexport default GridExample;\n"],"names":["GridExample","children","React"],"mappings":"qBAEO,MAAMA,EAAwB,CAAC,CAAE,SAAAC,CAAA,IACrCC,EAAA,cAAA,MAAA,CAAI,UAAU,WAAA,EACZA,EAAA,cAAA,MAAA,CAAI,UAAU,KAAA,EACZA,EAAA,cAAA,MAAA,CAAI,UAAU,KAAA,EAAOD,CAAS,CACjC,CACF"}

package/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAErE,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAMnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,CAChG;IACD,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAU7C,QAAA,MAAM,KAAK,qFAuGT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAe,MAAM,iBAAiB,CAAC;AAErE,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAQnD,MAAM,WAAW,UACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,CAChG;IACD,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAU7C,QAAA,MAAM,KAAK,qFAuGT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Input/index.js

@@ -1,2 +1,2 @@
-import"../../Input.js";import{A as n,a as C,I as H}from"../../Input.js";import"react";import"classnames";import"../../constants.js";import"../../uuid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";export{n as AVERAGE_CHARACTER_WIDTH_PX,C as InputTypes,H as default};
+import"../../Input.js";import{A as H,a as d,I as l}from"../../Input.js";import"react";import"classnames";import"../../constants.js";import"../../uuid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"./styles.module.scss";export{H as AVERAGE_CHARACTER_WIDTH_PX,d as InputTypes,l as default};
 //# sourceMappingURL=index.js.map

package/components/Progressbar/Dot.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 interface DotProps {
-    index: number;
+    index?: number;
     completed: boolean;
-    distanceBetweenDots: number;
+    distanceBetweenDots?: number;
+    position?: 'left' | 'right';
 }
 declare const Dot: React.FC<DotProps>;
 export default Dot;

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

@@ -1 +1 @@
-{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Dot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAM7C,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAK3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Dot.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Dot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,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/Progressbar/Progressbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progressbar.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAWtC,MAAM,WAAW,gBAAgB;IAC/B;;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,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwC3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"Progressbar.d.ts","sourceRoot":"","sources":["../../../src/components/Progressbar/Progressbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAYtC,MAAM,WAAW,gBAAgB;IAC/B;;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,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8C3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/Progressbar/index.js

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

package/components/Progressbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/utils.ts","../../../src/components/Progressbar/Dot.tsx","../../../src/components/Progressbar/DotList.tsx","../../../src/components/Progressbar/Progressbar.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å progressbar\n */\nexport const PROGRESS_BAR_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 progressbarWidth Bredde på progressbar\n * @returns Antall prikker\n */\nexport const getMaximumDots = (progressbarWidth: number): number =>\n  Math.floor(progressbarWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param progressbarWidth Bredde på progressbar\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (progressbarWidth: number, dots: number): number => (progressbarWidth - 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 progressbar\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 classNames from 'classnames';\nimport React, { CSSProperties } from 'react';\n\nimport { PROGRESS_BAR_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}\n\nconst Dot: React.FC<DotProps> = ({ index, completed, distanceBetweenDots }) => {\n  const classes = classNames(styles.progressbar__dot, completed && styles['progressbar__dot--completed']);\n  const style: CSSProperties = { left: `${index * distanceBetweenDots + PROGRESS_BAR_PADDING_X_PX}px` };\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 { useSize } from '../../hooks/useSize';\n\nimport DotList from './DotList';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /**\n   * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the progressbar. 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 Progressbar: React.FC<ProgressbarProps> = ({ 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: progressbarWidth = 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(progressbarWidth, allowedValues.length);\n  const markerPosition = getMarkerPosition(distanceBetweenDots, index);\n\n  const showDots = allowedValues.length <= maximumDots;\n  const isCompleted = validatedValue === validatedMax;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n  return (\n    <div className={styles['progressbar-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.progressbar}\n        style={{\n          backgroundPositionX: `${isCompleted ? progressbarWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Progressbar}\n      >\n        {showDots && <DotList allowedValues={allowedValues} currentValue={validatedValue} distanceBetweenDots={distanceBetweenDots} />}\n        <span className={styles.progressbar__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showDots && <span className={styles.progressbar__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","PROGRESS_BAR_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","progressbarWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","classes","classNames","styles","style","React","Dots","allowedValues","currentValue","Progressbar","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","DotList"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Progressbar/utils.ts","../../../src/components/Progressbar/Dot.tsx","../../../src/components/Progressbar/DotList.tsx","../../../src/components/Progressbar/Progressbar.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å progressbar\n */\nexport const PROGRESS_BAR_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 progressbarWidth Bredde på progressbar\n * @returns Antall prikker\n */\nexport const getMaximumDots = (progressbarWidth: number): number =>\n  Math.floor(progressbarWidth / (MARKER_WIDTH_PX + MARKER_DOT_MIN_DISTANCE_PX));\n\n/**\n * Beregn riktig distance mellom prikker\n * @param progressbarWidth Bredde på progressbar\n * @param dots Antall prikker som skal vises\n * @returns Distanse mellom prikker\n */\nexport const getDistanceBetweenDots = (progressbarWidth: number, dots: number): number => (progressbarWidth - 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 progressbar\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 classNames from 'classnames';\nimport React from 'react';\n\nimport { PROGRESS_BAR_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.progressbar__dot,\n    completed && styles['progressbar__dot--completed'],\n    position && styles[`progressbar__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 + PROGRESS_BAR_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 { useSize } from '../../hooks/useSize';\n\nimport DotList from './DotList';\nimport Dot from './Dot';\nimport { getMaximumDots, getDistanceBetweenDots, getMarkerPosition, getAllowedValues, getValidatedProps } from './utils';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface ProgressbarProps {\n  /**\n   * Sets aria-label of the progressbar. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the progressbar. 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 Progressbar: React.FC<ProgressbarProps> = ({ 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: progressbarWidth = 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(progressbarWidth, 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['progressbar-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.progressbar}\n        style={{\n          backgroundPositionX: `${isCompleted ? progressbarWidth : markerPosition}px`,\n        }}\n        ref={ref}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Progressbar}\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.progressbar__marker} style={{ left: `${markerPosition}px` }} />\n      </span>\n      {!showAllDots && <span className={styles.progressbar__number}>{`${validatedValue}/${validatedMax}`}</span>}\n    </div>\n  );\n};\n\nexport default Progressbar;\n"],"names":["MARKER_DOT_MIN_DISTANCE_PX","MARKER_WIDTH_PX","PROGRESS_BAR_PADDING_X_PX","getValidatedMin","min","max","getValidatedMax","getValidatedValue","value","getMaximumDots","progressbarWidth","getDistanceBetweenDots","dots","getMarkerPosition","distanceBetweenDots","index","getAllowedValues","_","getValidatedProps","validatedMin","validatedMax","Dot","completed","position","classes","classNames","styles","style","React","Dots","allowedValues","currentValue","Progressbar","ariaLabelledById","ariaLabel","testId","wrapperRef","useRef","ref","wrapperWidth","useSize","validatedValue","maximumDots","markerPosition","showAllDots","isCompleted","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","DotList"],"mappings":"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"}

package/components/Progressbar/styles.module.scss

@@ -61,6 +61,8 @@ $dotOffset: calc($progressbarPaddingX + $dotSize / 2);
   }
 
   &__number {
+    min-width: 2.5rem;
+    text-align: right;
     margin-left: getSpacer(xs);
     font-size: $font-size-xs;
     line-height: $lineheight-size-xs;
@@ -79,5 +81,11 @@ $dotOffset: calc($progressbarPaddingX + $dotSize / 2);
     &--completed {
       background-color: $blueberry50;
     }
+    &--left {
+      left: $dotOffset;
+    }
+    &--right {
+      right: $dotOffset;
+    }
   }
 }

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

@@ -2,6 +2,8 @@ export type Styles = {
   progressbar: string;
   progressbar__dot: string;
   'progressbar__dot--completed': string;
+  'progressbar__dot--left': string;
+  'progressbar__dot--right': string;
   progressbar__marker: string;
   progressbar__number: string;
   'progressbar-wrapper': string;

package/components/Table/styles.module.scss

@@ -183,10 +183,10 @@ table tbody tr {
 
   height: 3.625rem;
   font-size: $font-size-sm;
-  line-height: 1.5rem;
+  line-height: $lineheight-size-xs;
   text-align: left;
   vertical-align: bottom;
-  font-weight: 200;
+  font-weight: 700;
   padding: 0.5rem 0.75rem;
   border: 1px solid $neutral500;
 
@@ -212,8 +212,8 @@ table tbody tr {
     padding: 1rem;
     height: 5.5rem;
     font-size: $font-size-md;
-    line-height: 1.75rem;
-    font-weight: 200;
+    line-height: $lineheight-size-sm;
+    font-weight: 700;
   }
 }
 

package/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAe,MAAM,iBAAiB,CAAC;AAIxD,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAC9G;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FA8IZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,QAAQ,EAAe,MAAM,iBAAiB,CAAC;AAKxD,UAAU,aACR,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,EAC9C,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CAC9G;IACD,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAUD,QAAA,MAAM,QAAQ,2FA+IZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/components/Textarea/index.js

@@ -1,2 +1,2 @@
-import"../../Textarea.js";import{T as j}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../Input.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../Input/styles.module.scss";export{j as default};
+import"../../Textarea.js";import{T as n}from"../../Textarea.js";import"react";import"classnames";import"./styles.module.scss";import"../../constants.js";import"../../uuid.js";import"../../Input.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";export{n as default};
 //# sourceMappingURL=index.js.map

package/components/Validation/index.js

@@ -1,2 +1,2 @@
-import"../../Validation.js";import{V as D,V as E}from"../../Validation.js";import"react";import"classnames";import"../../FormGroup.js";import"../FormGroup/styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"./styles.module.scss";export{D as Validation,E as default};
+import"../../Validation.js";import{V as F,V as G}from"../../Validation.js";import"react";import"classnames";import"../../FormGroup.js";import"../FormGroup/styles.module.scss";import"../../Checkbox.js";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../RadioButton.js";import"../RadioButton/styles.module.scss";import"../../Input.js";import"../../hooks/useBreakpoint.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Input/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../FormLayout.js";import"../FormLayout/styles.module.scss";import"./styles.module.scss";export{F as Validation,G as default};
 //# sourceMappingURL=index.js.map

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {