@helsenorge/designsystem-react 1.0.0-beta94 → 1.0.0-beta95

package/components/Textarea/componentdata.json

@@ -131,25 +131,25 @@
       "required": false,
       "type": {
         "name": "enum",
-        "raw": "\"OnWhite\" | \"OnGrey\" | \"OnBlueberry\" | \"OnDark\" | \"OnError\" | undefined",
+        "raw": "\"onwhite\" | \"ongrey\" | \"onblueberry\" | \"ondark\" | \"oninvalid\" | undefined",
         "value": [
           {
             "value": "undefined"
           },
           {
-            "value": "\"OnWhite\""
+            "value": "\"onwhite\""
           },
           {
-            "value": "\"OnGrey\""
+            "value": "\"ongrey\""
           },
           {
-            "value": "\"OnBlueberry\""
+            "value": "\"onblueberry\""
           },
           {
-            "value": "\"OnDark\""
+            "value": "\"ondark\""
           },
           {
-            "value": "\"OnError\""
+            "value": "\"oninvalid\""
           }
         ]
       }
@@ -249,6 +249,44 @@
         "name": "string"
       }
     },
+    "afterLabelChildren": {
+      "defaultValue": null,
+      "description": "Component shown after label",
+      "name": "afterLabelChildren",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
+    "belowLabelChildren": {
+      "defaultValue": null,
+      "description": "Component shown under label",
+      "name": "belowLabelChildren",
+      "parent": {
+        "fileName": "src/components/Textarea/Textarea.tsx",
+        "name": "TextareaProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Textarea/Textarea.tsx",
+          "name": "TextareaProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "ReactNode"
+      }
+    },
     "autoFocus": {
       "defaultValue": null,
       "description": "",

package/components/Textarea/index.js

@@ -1,2 +1,2 @@
-import{T as s}from"../../Textarea-9c91191a.js";export{T as default}from"../../Textarea-9c91191a.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../../_tslib-51c8a283.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../constants-a4b0b501.js";import"../../uuid-8870ab4b.js";
+import{T as s}from"../../Textarea-05e33ba3.js";export{T as default}from"../../Textarea-05e33ba3.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../../_tslib-51c8a283.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";import"../../constants-42547490.js";import"../../uuid-8870ab4b.js";
 //# sourceMappingURL=index.js.map

package/components/Textarea/styles.module.scss

@@ -2,10 +2,10 @@
 @import '../../scss/_breakpoints.scss';
 @import '../../scss/_palette.scss';
 @import '../../scss/_font-settings.scss';
+@import '../../scss/_input.scss';
 
 .textarea {
-  width: 100%;
-  line-height: 0;
+  @include input-wrapper;
 
   &__error-text {
     font-size: $font-size-sm;
@@ -19,113 +19,6 @@
     margin-bottom: getSpacer(s);
   }
 
-  &__label {
-    line-height: getSpacer(m);
-    font-size: $font-size-sm;
-    font-weight: 600;
-    padding-bottom: getSpacer(2xs);
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      line-height: getSpacer(l);
-      font-size: $font-size-md;
-    }
-
-    &--OnDark {
-      color: $white;
-    }
-  }
-
-  &__input {
-    line-height: 26px;
-    font-size: $font-size-sm;
-    width: 100%;
-    padding: 16px;
-    resize: none;
-    border: $neutral700 2px solid;
-    outline: none;
-
-    @media (min-width: map-get($grid-breakpoints, md)) {
-      line-height: 28px;
-      font-size: $font-size-md;
-    }
-
-    &:hover {
-      background: $neutral50;
-      border-color: $neutral700;
-      box-shadow: 0px 0px 0px 1px $neutral700;
-    }
-    &:focus {
-      background: $white;
-      border-radius: 0;
-      border-color: $neutral900;
-      box-shadow: 0px 0px 0px 2px $neutral900;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      background: $neutral50;
-      border-color: $neutral500;
-      color: $neutral500;
-    }
-    &::placeholder {
-      color: $neutral500;
-    }
-
-    &--OnBlueberry {
-      border-color: $blueberry500;
-
-      &:hover {
-        background: $blueberry50;
-        box-shadow: 0px 0px 0px 1px $blueberry500;
-        border-color: $blueberry500;
-      }
-
-      &:focus {
-        background: $white;
-        border-color: $neutral900;
-        box-shadow: 0px 0px 0px 2px $neutral900;
-      }
-      &:disabled {
-        background: $neutral50;
-        border-color: $neutral500;
-        color: $neutral500;
-      }
-    }
-    &--OnDark {
-      border-color: $blueberry900;
-      &:hover {
-        background: $blueberry50;
-        border-color: $blueberry900;
-        box-shadow: 0px 0px 0px 1px $blueberry900;
-      }
-      &:focus {
-        background: $white;
-        border-color: $neutral900;
-        box-shadow: 0px 0px 0px 2px $neutral900;
-      }
-      &:disabled {
-        background: $neutral50;
-      }
-    }
-    &--invalid {
-      border-color: $cherry500;
-      &:focus {
-        border-color: $cherry500;
-        box-shadow: 0px 0px 0px 2px $cherry500;
-      }
-    }
-
-    &--transparent {
-      background: transparent;
-      &:hover {
-        background: transparent;
-      }
-      &:focus {
-        background: $white;
-      }
-    }
-  }
-
   &__counter-wrapper {
     display: flex;
     justify-content: end;
@@ -143,7 +36,7 @@
       margin: 0;
     }
 
-    &--OnDark {
+    &--on-dark {
       color: $white;
     }
     &--invalid {
@@ -152,3 +45,13 @@
     }
   }
 }
+
+.content-wrapper {
+  @include content-wrapper;
+  &__input {
+    line-height: 28px;
+    height: auto;
+    padding: 16px;
+    resize: none;
+  }
+}

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

@@ -1,16 +1,21 @@
 export type Styles = {
+  'content-wrapper': string;
+  'content-wrapper__input': string;
+  'content-wrapper__input--disabled': string;
+  'content-wrapper--bigform': string;
+  'content-wrapper--disabled': string;
+  'content-wrapper--invalid': string;
+  'content-wrapper--on-blueberry': string;
+  'content-wrapper--on-dark': string;
+  'content-wrapper--transparent': string;
   textarea: string;
+  'textarea__after-label-children': string;
   'textarea__counter-wrapper': string;
   'textarea__counter-wrapper--invalid': string;
-  'textarea__counter-wrapper--OnDark': string;
+  'textarea__counter-wrapper--on-dark': string;
   'textarea__error-text': string;
-  textarea__input: string;
-  'textarea__input--invalid': string;
-  'textarea__input--OnBlueberry': string;
-  'textarea__input--OnDark': string;
-  'textarea__input--transparent': string;
-  textarea__label: string;
-  'textarea__label--OnDark': string;
+  'textarea__label-wrapper': string;
+  'textarea__label-wrapper--on-dark': string;
   'textarea--gutterBottom': string;
 };
 

package/components/Tile/index.js

@@ -1,2 +1,2 @@
-import{_ as e,a as t}from"../../_rollupPluginBabelHelpers-d0752906.js";import{_ as i}from"../../_tslib-51c8a283.js";import r,{useState as l}from"react";import{c as o}from"../../index-9b84fabc.js";import"../../Icon-9b4a8a2d.js";import{I as a}from"../../constants-a4b0b501.js";import n from"./styles.module.scss";var s=r.forwardRef((function(e,i){var l,a=e.children,s=e.className,c=e.htmlMarkup,m=void 0===c?"span":c,d=e.highlighted,p=e.compact,f=o(n.tile__title,(t(l={},n["tile__title--highlighted"],d),t(l,n["tile__title--compact"],p),l),s),u=m;return r.createElement(u,{className:f,ref:i},a)})),c=r.forwardRef((function(s,c){var m,d=s.icon,p=s.title,f=s.className,u=void 0===f?"":f,h=s.description,g=s.fixed,_=void 0!==g&&g,b=s.highlighted,v=void 0!==b&&b,E=s.testId,N=i(s,["icon","title","className","description","fixed","highlighted","testId"]),j=l(!1),x=e(j,2),w=x[0],I=x[1],M=!h,k=o(n.tile,(t(m={},n["tile--fixed"],_),t(m,n["tile--compact"],M),t(m,n["tile--highlighted"],v),m),u),B=o(n["title-wrapper"],t({},n["title-wrapper--compact"],M));return r.createElement("a",Object.assign({ref:c,className:k,onMouseEnter:function(){return I(!0)},onMouseLeave:function(){return I(!1)},onFocus:function(){return I(!0)},onBlur:function(){return I(!1)},"data-testid":E,rel:"_blank"===s.target?"noopener noreferrer":s.rel},N),r.createElement("div",{className:B},r.cloneElement(d,{size:a.Medium,isHovered:w,color:v?"white":"black"}),r.cloneElement(p,{highlighted:v,compact:M})),h?r.createElement("p",{className:n.tile__description},h):null)}));c.Title=s;export default c;export{c as Tile};
+import{_ as e,a as t}from"../../_rollupPluginBabelHelpers-d0752906.js";import{_ as i}from"../../_tslib-51c8a283.js";import r,{useState as l}from"react";import{c as o}from"../../index-9b84fabc.js";import"../../Icon-04613a89.js";import{I as a}from"../../constants-42547490.js";import n from"./styles.module.scss";var s=r.forwardRef((function(e,i){var l,a=e.children,s=e.className,c=e.htmlMarkup,m=void 0===c?"span":c,d=e.highlighted,p=e.compact,f=o(n.tile__title,(t(l={},n["tile__title--highlighted"],d),t(l,n["tile__title--compact"],p),l),s),u=m;return r.createElement(u,{className:f,ref:i},a)})),c=r.forwardRef((function(s,c){var m,d=s.icon,p=s.title,f=s.className,u=void 0===f?"":f,h=s.description,g=s.fixed,_=void 0!==g&&g,v=s.highlighted,b=void 0!==v&&v,E=s.testId,N=i(s,["icon","title","className","description","fixed","highlighted","testId"]),j=l(!1),x=e(j,2),w=x[0],I=x[1],M=!h,k=o(n.tile,(t(m={},n["tile--fixed"],_),t(m,n["tile--compact"],M),t(m,n["tile--highlighted"],b),m),u),B=o(n["title-wrapper"],t({},n["title-wrapper--compact"],M));return r.createElement("a",Object.assign({ref:c,className:k,onMouseEnter:function(){return I(!0)},onMouseLeave:function(){return I(!1)},onFocus:function(){return I(!0)},onBlur:function(){return I(!1)},"data-testid":E,rel:"_blank"===s.target?"noopener noreferrer":s.rel},N),r.createElement("div",{className:B},r.cloneElement(d,{size:a.Medium,isHovered:w,color:b?"white":"black"}),r.cloneElement(p,{highlighted:b,compact:M})),h?r.createElement("p",{className:n.tile__description},h):null)}));c.Title=s;export default c;export{c as Tile};
 //# sourceMappingURL=index.js.map

package/components/Validation/componentdata.json

@@ -74,16 +74,16 @@
       "required": false,
       "type": {
         "name": "enum",
-        "raw": "\"Normal\" | \"BigForm\" | undefined",
+        "raw": "\"normal\" | \"bigform\" | undefined",
         "value": [
           {
             "value": "undefined"
           },
           {
-            "value": "\"Normal\""
+            "value": "\"normal\""
           },
           {
-            "value": "\"BigForm\""
+            "value": "\"bigform\""
           }
         ]
       }

package/components/Validation/index.js

@@ -1,2 +1,2 @@
-import{V as s}from"../../Validation-ef9ee0ae.js";export{V as Validation,V as default}from"../../Validation-ef9ee0ae.js";import"react";import"../../index-9b84fabc.js";import"../../FormGroup-68288be3.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../FormGroup/styles.module.scss";import"../../Checkbox-0ba01292.js";import"../../uuid-8870ab4b.js";import"../../Check-6291ad09.js";import"../../Icon-9b4a8a2d.js";import"../../_tslib-51c8a283.js";import"../../constants-a4b0b501.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../Checkbox/styles.module.scss";import"../../Title-90910763.js";import"../Title/styles.module.scss";import"../../RadioButton-84ca988e.js";import"../RadioButton/styles.module.scss";import"./styles.module.scss";
+import{V as s}from"../../Validation-9bf0c0ec.js";export{V as Validation,V as default}from"../../Validation-9bf0c0ec.js";import"react";import"../../index-9b84fabc.js";import"../../FormGroup-6c545646.js";import"../../_rollupPluginBabelHelpers-d0752906.js";import"../FormGroup/styles.module.scss";import"../../Checkbox-fb5dff56.js";import"../../uuid-8870ab4b.js";import"../../Check-6291ad09.js";import"../../Icon-04613a89.js";import"../../_tslib-51c8a283.js";import"../../constants-42547490.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../Checkbox/styles.module.scss";import"../../RadioButton-d90884c9.js";import"../RadioButton/styles.module.scss";import"../../Input-adeb7f88.js";import"../../useBreakpoint-324a9b14.js";import"../../useWindowSize-73b47451.js";import"../Input/styles.module.scss";import"../../Title-90910763.js";import"../Title/styles.module.scss";import"./styles.module.scss";
 //# sourceMappingURL=index.js.map

package/constants-42547490.js

@@ -0,0 +1,2 @@
+var a,n,o,r;!function(a){a[a.XSmall=38]="XSmall",a[a.Small=48]="Small",a[a.Medium=64]="Medium",a[a.Large=80]="Large",a[a.XLarge=130]="XLarge"}(a||(a={})),function(a){a[a.Modal=13e5]="Modal"}(n||(n={})),function(a){a.onwhite="onwhite",a.ongrey="ongrey",a.onblueberry="onblueberry",a.ondark="ondark",a.oninvalid="oninvalid"}(o||(o={})),function(a){a.normal="normal",a.bigform="bigform"}(r||(r={}));export{o as F,a as I,n as Z,r as a};
+//# sourceMappingURL=constants-42547490.js.map

package/constants-42547490.js.map

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

package/constants.d.ts

@@ -48,14 +48,14 @@ export interface HTMLAnchorProps {
 }
 export declare type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;
 export declare enum FormMode {
-    OnWhite = "OnWhite",
-    OnGrey = "OnGrey",
-    OnBlueberry = "OnBlueberry",
-    OnDark = "OnDark",
-    OnError = "OnError"
+    onwhite = "onwhite",
+    ongrey = "ongrey",
+    onblueberry = "onblueberry",
+    ondark = "ondark",
+    oninvalid = "oninvalid"
 }
 export declare enum FormVariant {
-    Normal = "Normal",
-    BigForm = "BigForm"
+    normal = "normal",
+    bigform = "bigform"
 }
 //# sourceMappingURL=constants.d.ts.map

package/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,MAAM,KAAK;IACX,KAAK,KAAK;IACV,MAAM,KAAK;IACX,KAAK,KAAK;IACV,MAAM,MAAM;CACb;AAED,oBAAY,MAAM;IAChB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EACX,EAAE,GACF,aAAa,GACb,aAAa,GACb,4BAA4B,GAC5B,QAAQ,GACR,0BAA0B,GAC1B,eAAe,GACf,iCAAiC,GACjC,YAAY,CAAC;CAClB;AAED,oBAAY,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAEjF,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB;AAED,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,QAAQ;IAClB,MAAM,KAAK;IACX,KAAK,KAAK;IACV,MAAM,KAAK;IACX,KAAK,KAAK;IACV,MAAM,MAAM;CACb;AAED,oBAAY,MAAM;IAChB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EACX,EAAE,GACF,aAAa,GACb,aAAa,GACb,4BAA4B,GAC5B,QAAQ,GACR,0BAA0B,GAC1B,eAAe,GACf,iCAAiC,GACjC,YAAY,CAAC;CAClB;AAED,oBAAY,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;AAEjF,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,MAAM,WAAW;IACjB,SAAS,cAAc;CACxB;AAED,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,OAAO,YAAY;CACpB"}

package/hooks/useIcons.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '../components/Icons';
+export declare const useIcons: (children: import("react").ReactNode[]) => (string | number | boolean | {} | import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | import("react").ReactNodeArray | import("react").ReactPortal | import("react").ReactElement<IconProps, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)> | null | undefined)[];
+//# sourceMappingURL=useIcons.d.ts.map

package/hooks/useIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIcons.d.ts","sourceRoot":"","sources":["../../src/hooks/useIcons.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,eAAO,MAAM,QAAQ,qgBAapB,CAAC"}

package/index.js

@@ -1,2 +1,2 @@
-export{t as theme}from"./index-19b48c51.js";export{u as useHover}from"./useHover-037be19d.js";export{F as FormMode,a as FormVariant,I as IconSize,Z as ZIndex}from"./constants-a4b0b501.js";import"./palette-f206f488.js";import"./grid-11a70eb7.js";import"./_rollupPluginBabelHelpers-d0752906.js";import"react";
+export{t as theme}from"./index-19b48c51.js";export{u as useHover}from"./useHover-037be19d.js";export{F as FormMode,a as FormVariant,I as IconSize,Z as ZIndex}from"./constants-42547490.js";import"./palette-f206f488.js";import"./grid-11a70eb7.js";import"./_rollupPluginBabelHelpers-d0752906.js";import"react";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
-  "version": "1.0.0-beta94",
+  "version": "1.0.0-beta95",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "tfs",

package/scss/_input.scss

@@ -0,0 +1,174 @@
+@mixin input-wrapper {
+  width: 100%;
+  line-height: 0;
+
+  &__label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    line-height: getSpacer(m);
+    font-size: $font-size-sm;
+    font-weight: 600;
+    padding-bottom: getSpacer(xs);
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      line-height: getSpacer(l);
+      font-size: $font-size-md;
+    }
+
+    &--on-dark {
+      color: $white;
+    }
+  }
+
+  &__after-label-children {
+    padding-left: 0.75rem;
+  }
+}
+
+@mixin content-wrapper {
+  font-size: $font-size-sm;
+  width: 100%;
+  border: $neutral700 2px solid;
+  outline: none;
+  background: $white;
+
+  svg:first-child {
+    padding-left: 0.375rem;
+  }
+
+  svg:last-child {
+    padding-right: 0.375rem;
+  }
+
+  &--bigform {
+    padding: getSpacer(xs) 0;
+
+    svg:first-child {
+      padding-left: getSpacer(xs);
+    }
+
+    svg:last-child {
+      padding-right: getSpacer(xs);
+    }
+  }
+
+  &:hover {
+    background: $neutral50;
+    border-color: $neutral700;
+    box-shadow: 0px 0px 0px 1px $neutral700;
+
+    &:focus-within {
+      border-color: $black;
+      box-shadow: 0px 0px 0px 2px $black;
+    }
+  }
+  &:focus-within {
+    background: $white;
+    border-color: $neutral900;
+    box-shadow: 0px 0px 0px 2px $neutral900;
+  }
+
+  &--on-blueberry {
+    border-color: $blueberry500;
+
+    &:hover {
+      background: $blueberry50;
+      box-shadow: 0px 0px 0px 1px $blueberry500;
+      border-color: $blueberry500;
+    }
+
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--on-dark {
+    border-color: $blueberry900;
+    &:hover {
+      background: $blueberry50;
+      border-color: $blueberry900;
+      box-shadow: 0px 0px 0px 1px $blueberry900;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--invalid {
+    border-color: $cherry500;
+
+    &:hover {
+      background: $cherry100;
+      border-color: $cherry500;
+      box-shadow: 0px 0px 0px 2px $cherry500;
+    }
+    &:focus-within {
+      background: $white;
+      border-color: $neutral900;
+      box-shadow: 0px 0px 0px 2px $neutral900;
+    }
+  }
+  &--transparent {
+    background: transparent;
+
+    &:hover {
+      background: $neutral100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+  &--transparent#{&}--on-blueberry {
+    &:hover {
+      background: $blueberry100;
+    }
+
+    &:focus-within {
+      background: $white;
+    }
+  }
+
+  &--disabled {
+    background: $neutral50;
+    border-color: $neutral500;
+    color: $neutral500;
+
+    &:hover {
+      border-color: $neutral500;
+      box-shadow: none;
+    }
+  }
+
+  &__input {
+    line-height: 1.625rem;
+    font-size: $font-size-sm;
+    padding: 0 getSpacer(xs);
+    border: none;
+    outline: none;
+    background-color: transparent;
+    width: 100%;
+
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      font-size: $font-size-md;
+    }
+
+    &::placeholder {
+      color: $neutral500;
+    }
+
+    &--disabled {
+      color: $neutral500;
+    }
+
+    &:first-child {
+      padding-left: getSpacer(s);
+    }
+
+    &:last-child {
+      padding-right: getSpacer(s);
+    }
+  }
+}

package/Button-72f96290.js

@@ -1,2 +0,0 @@
-import{_ as t,a as e}from"./_rollupPluginBabelHelpers-d0752906.js";import{_ as n}from"./_tslib-51c8a283.js";import o from"react";import{g as r}from"./color-acb834c6.js";import"./Icon-9b4a8a2d.js";import{I as l}from"./constants-a4b0b501.js";import{L as i}from"./Loader-b3fd59f4.js";import{u as a}from"./useHover-037be19d.js";import{u as s}from"./useWindowSize-73b47451.js";import{b as u}from"./grid-11a70eb7.js";import{c as d}from"./index-9b84fabc.js";import c from"./components/Button/styles.module.scss";var m={primary:"blueberry",warning:"banana",danger:"cherry"};var b=function(t,e){return e&&e<u.md&&t?l.Small:t?l.Medium:l.XSmall},f=o.forwardRef((function(u,f){var p,v,_,g=u.children,h=u.className,j=void 0===h?"":h,w=u.fluid,E=void 0!==w&&w,k=u.intent,y=void 0===k?"primary":k,N=u.inverted,I=void 0!==N&&N,C=u.htmlMarkup,H=void 0===C?"button":C,O=u.onClick,S=u.large,z=void 0!==S&&S,B=u.loading,F=void 0!==B&&B,M=u.variant,x=void 0===M?"fill":M,L=u.disabled,R=void 0!==L&&L,X=u.ellipsis,A=void 0!==X&&X,P=u.testId,W=u.href,q=u.target,D=n(u,["children","className","fluid","intent","inverted","htmlMarkup","onClick","large","loading","variant","disabled","ellipsis","testId","href","target"]),G=function(t){var e,n,o,r,l=null,i=null;void 0!==(null===(n=null===(e=t[0])||void 0===e?void 0:e.props)||void 0===n?void 0:n.svgIcon)&&(l=t.shift()),void 0!==(null===(r=null===(o=t[t.length-1])||void 0===o?void 0:o.props)||void 0===r?void 0:r.svgIcon)&&(i=t.pop());var a=t.filter((function(t){return t}));return[l,i,a.length>0?a:null]}(o.Children.toArray(g)),J=t(G,3),K=J[0],Q=J[1],T=J[2],U=a(f),V=U.hoverRef,Y=U.isHovered,Z=function(t,e,n,o,l){return e?r("neutral",600):t&&!o||!t&&o?"white":r(m[n],l?700:600)}("fill"===x,R,y,I,Y),$=s(),tt="fill"===x,et="outline"===x,nt="borderless"===x,ot="warning"===y,rt="danger"===y,lt=!(!K&&!Q||F),it=Object.assign({},D),at=d(c.button,(e(p={},c["button--fluid"],E),e(p,c["button--large"],z),e(p,c["button--warning"],ot),e(p,c["button--danger"],rt),e(p,c["button--inverted"],I),e(p,c["button--fill"],tt),e(p,c["button--outline"],et),e(p,c["button--borderless"],nt),e(p,c["button--with-icon"],lt),e(p,c["button--ellipsis"],A),p),j),st=d(c.button__content,(e(v={},c["button__content--warning"],ot),e(v,c["button__content--danger"],rt),e(v,c["button__content--fill"],tt),e(v,c["button__content--borderless"],nt),e(v,c["button__content--with-icon"],lt),e(v,c["button__content--large"],z),e(v,c["button__content--ellipsis"],A),e(v,c["button__content--inverted"],I),e(v,c["button__content--fluid"],E),v)),ut=d(c["button__left-fluid-content"],(e(_={},c["button__left-fluid-content--with-icon"],lt),e(_,c["button__left-fluid-content--large"],z),_));function dt(t,e,n,r){var l=t&&t.props&&t.props.color?t.props.color:n;return t&&Object.keys(t).length>0?o.cloneElement(t,{size:e,color:l,isHovered:r}):null}var ct=function(){return T?o.createElement("span",{className:st},T):null},mt=function(){return o.createElement("span",{className:c["content-wrapper"]},F?o.createElement("div",{className:c["button__left-fluid-content"]},o.createElement(i,{testId:"test-id-loader",color:"fill"!==x||I?m[y]:"white",size:"tiny"})):o.createElement(o.Fragment,null,E?o.createElement("div",{className:ut},dt(K,b(z,$.width),Z,Y),ct()):o.createElement(o.Fragment,null,dt(K,b(z,$.width),Z,Y),ct()),dt(Q,l.XSmall,Z,Y)))};return o.createElement(o.Fragment,null,"button"===H&&o.createElement("button",Object.assign({onClick:O,disabled:R,"data-testid":P,className:at,ref:V},it),mt()),"a"===H&&o.createElement("a",Object.assign({onClick:O,"data-testid":P,className:at,href:W,target:q,rel:"_blank"===q?"noopener noreferrer":u.rel,ref:V},D),mt()))}));export{f as B,m as i};
-//# sourceMappingURL=Button-72f96290.js.map

package/Button-72f96290.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-72f96290.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/Checkbox-0ba01292.js

@@ -1,2 +0,0 @@
-import{_ as e,a as r}from"./_rollupPluginBabelHelpers-d0752906.js";import a,{useState as c,useEffect as o}from"react";import{c as b}from"./index-9b84fabc.js";import{u as l}from"./uuid-8870ab4b.js";import{C as i}from"./Check-6291ad09.js";import{I as s}from"./Icon-9b4a8a2d.js";import{F as n,a as t}from"./constants-a4b0b501.js";import{g as m}from"./color-acb834c6.js";import p from"./components/Checkbox/styles.module.scss";var d=a.forwardRef((function(d,h){var k,x,u,f=d.className,_=d.checked,v=void 0!==_&&_,w=d.disabled,g=d.label,y=d.inputid,j=void 0===y?l():y,E=d.mode,N=d.name,C=void 0===N?j:N,I=d.variant,B=d.errorText,F=d.error,O=void 0===F?!!B:F,z=d.value,D=void 0===z?g:z,H=c(v),P=e(H,2),R=P[0],T=P[1],q=O||E===n.OnError,A=E===n.OnDark,G=E===n.OnBlueberry,J=I===t.BigForm,K=b(p["checkbox-wrapper"],(r(k={},p["checkbox-wrapper--with-error"],B),r(k,p["checkbox-wrapper--bigform"],J),k)),L=b(p["checkbox-label"],(r(x={},p["checkbox-label--disabled"],w),r(x,p["checkbox-label--on-dark"],A),r(x,p["checkbox-label--on-blueberry"],G),r(x,p["checkbox-label--invalid"],q),r(x,p["checkbox-label--bigform"],J),x)),M=b(p.checkbox,f),Q=b(p["checkbox__icon-wrapper"],(r(u={},p["checkbox__icon-wrapper--checked"],R),r(u,p["checkbox__icon-wrapper--disabled"],w),r(u,p["checkbox__icon-wrapper--on-dark"],A),r(u,p["checkbox__icon-wrapper--on-blueberry"],G),r(u,p["checkbox__icon-wrapper--invalid"],q),u)),S=b(p["checkbox-errors"],r({},p["checkbox-errors--bigform"],J)),U=m("blueberry",500);return w&&(U=m("neutral",400)),A&&(U=m("blueberry",200)),q&&(U=m("cherry",500)),o((function(){T(v)}),[v]),a.createElement("div",{"data-testid":d.testId,className:K},B&&a.createElement("p",{className:S},B),a.createElement("label",{htmlFor:j,className:L},a.createElement("input",{id:j,name:C,className:M,type:"checkbox",checked:R,disabled:w,onChange:function(){T(!R)},value:D,ref:h,"aria-invalid":O}),a.createElement("span",{className:Q},R&&a.createElement(s,{color:U,className:p.checkbox__icon,svgIcon:i,size:38})),g))}));export{d as C};
-//# sourceMappingURL=Checkbox-0ba01292.js.map

package/Checkbox-0ba01292.js.map

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

package/Close-80751ae6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Close-80751ae6.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/FormGroup-68288be3.js

@@ -1,2 +0,0 @@
-import{a as e}from"./_rollupPluginBabelHelpers-d0752906.js";import r from"react";import{c as a}from"./index-9b84fabc.js";import o from"./components/FormGroup/styles.module.scss";import{C as t}from"./Checkbox-0ba01292.js";import{F as m,a as l}from"./constants-a4b0b501.js";import{T as n}from"./Title-90910763.js";import{R as i}from"./RadioButton-84ca988e.js";var p=r.forwardRef((function(p,s){var f,d,c,u=p.className,g=p.mode,_=void 0===g?m.OnWhite:g,v=p.variant,b=void 0===v?l.Normal:v,w=p.error,E=p.name,N=_===m.OnDark,h=b===l.BigForm,j=a(o["form-group-wrapper"],(e(f={},o["form-group-wrapper--on-dark"],N),e(f,o["form-group-wrapper--invalid"],w),f),u),k=a(o["form-group-wrapper__title"],(e(d={},o["form-group-wrapper__title--on-dark"],N&&!w),e(d,o["form-group-wrapper__title--bigform"],h),d)),y=a(o["form-group"],e({},o["form-group--invalid"],w)),B=a(o["form-group-wrapper__errors"],e({},o["form-group-wrapper__errors--bigform"],h)),F=a(o["field-set__legend"],(e(c={},o["field-set__legend--on-dark"],N&&!w),e(c,o["field-set__legend--bigform"],h),c));return r.createElement("div",{"data-testid":p.testId,className:j},p.title&&r.createElement(n,{className:k,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:2}},p.title),r.createElement("div",{className:y},w&&r.createElement("p",{className:B},w),r.createElement("fieldset",{name:p.title,className:o["field-set"]},p.legend&&r.createElement("legend",{className:F},p.legend),r.Children.map(p.children,(function(e){if(e.type===t){var a=e.type===t;return r.cloneElement(e,{name:null!=E?E:a.valueOf.name,mode:_,variant:b,error:!!w})}if(e.type===i){var o=e.type===i;return r.cloneElement(e,{name:null!=E?E:o.valueOf.name,mode:_,variant:b,error:!!w})}return e})))))}));export{p as F};
-//# sourceMappingURL=FormGroup-68288be3.js.map

package/FormGroup-68288be3.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormGroup-68288be3.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/Icon-9b4a8a2d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon-9b4a8a2d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/Modal-6b4a2c9c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal-6b4a2c9c.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/RadioButton-84ca988e.js

@@ -1,2 +0,0 @@
-import{a as r}from"./_rollupPluginBabelHelpers-d0752906.js";import a from"react";import{c as o}from"./index-9b84fabc.js";import{u as e}from"./uuid-8870ab4b.js";import t from"./components/RadioButton/styles.module.scss";import{F as i,a as d}from"./constants-a4b0b501.js";var l=a.forwardRef((function(l,n){var b,s,u,m=l.className,p=l.defaultChecked,c=void 0!==p&&p,f=l.disabled,v=l.label,g=l.inputid,k=void 0===g?e():g,w=l.mode,y=l.name,E=void 0===y?k:y,N=l.variant,h=l.errorText,j=l.error,B=void 0===j?!!h:j,x=l.value,F=void 0===x?v:x,O=B||w===i.OnError,R=w===i.OnDark,C=w===i.OnBlueberry,D=N===d.BigForm,H=o(t["radio-button-wrapper"],(r(b={},t["radio-button-wrapper--with-error"],h),r(b,t["radio-button-wrapper--bigform"],D),b)),I=o(t["radio-button-label"],(r(s={},t["radio-button-label--disabled"],f),r(s,t["radio-button-label--on-dark"],R),r(s,t["radio-button-label--on-blueberry"],C),r(s,t["radio-button-label--invalid"],O),r(s,t["radio-button-label--bigform"],D),s)),P=o(t["radio-button"],(r(u={},t["radio-button--on-dark"],R),r(u,t["radio-button--disabled"],f),r(u,t["radio-button--on-blueberry"],C),r(u,t["radio-button--invalid"],O),u),m),T=o(t["radio-button-errors"],r({},t["radio-button-errors--bigform"],D));return a.createElement("div",{"data-testid":l.testId,className:H},h&&a.createElement("p",{className:T},h),a.createElement("label",{htmlFor:k,className:I},a.createElement("input",{id:k,name:E,className:P,type:"radio",disabled:f,value:F,ref:n,"aria-invalid":B,defaultChecked:c}),v))}));export{l as R};
-//# sourceMappingURL=RadioButton-84ca988e.js.map

package/RadioButton-84ca988e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RadioButton-84ca988e.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/Textarea-9c91191a.js

@@ -1,2 +0,0 @@
-import{_ as e,a}from"./_rollupPluginBabelHelpers-d0752906.js";import{_ as t}from"./_tslib-51c8a283.js";import r,{useState as n,useRef as o,useEffect as l}from"react";import{c as i}from"./index-9b84fabc.js";import s from"./components/Textarea/styles.module.scss";import{F as c}from"./constants-a4b0b501.js";import{u as m}from"./uuid-8870ab4b.js";var u=r.forwardRef((function(u,d){var p,x,v,_=u.maxCharacters,f=u.maxText,b=u.testId,g=u.defaultValue,w=u.marginBottom,h=u.transparent,E=u.mode,O=u.label,T=u.minRows,j=void 0===T?3:T,B=u.maxRows,R=void 0===B?10:B,k=u.grow,D=u.errorText,N=t(u,["maxCharacters","maxText","testId","defaultValue","marginBottom","transparent","mode","label","minRows","maxRows","grow","errorText"]),y=n(j),C=e(y,2),H=C[0],V=C[1],F=n(g||""),I=e(F,2),M=I[0],P=I[1],q=o(null),z=function(e){var a=e.rows;e.rows=j;var t=Math.floor((e.scrollHeight-16)/28);t===a&&(e.rows=t),t>=R&&(e.rows=R,e.scrollTop=e.scrollHeight),V(t<R?t:R)},A=E===c.OnDark,G=E===c.OnBlueberry,J=_&&M.length>_,K=E===c.OnError||D||J,L=i(s.textarea,(a(p={},s["textarea--gutterBottom"],w),a(p,s["textarea--invalid"],D),p)),Q=i(s.textarea__input,(a(x={},s["textarea__input--transparent"],h),a(x,s["textarea__input--".concat(c.OnBlueberry)],G),a(x,s["textarea__input--".concat(c.OnDark)],A),a(x,s["textarea__input--invalid"],K),x)),S=i(s["textarea__counter-wrapper"],(a(v={},s["textarea__counter-wrapper--".concat(c.OnDark)],A),a(v,s["textarea__counter-wrapper--invalid"],K),v)),U=i(s.textarea__label,a({},s["textarea__label--".concat(c.OnDark)],A)),W=O?m():void 0;return l((function(){var e,a,t;if(k&&(null===(e=q.current)||void 0===e?void 0:e.children)&&(null===(a=q.current)||void 0===a?void 0:a.children[0])){var r=null===(t=q.current)||void 0===t?void 0:t.children[0];z(r)}}),[]),r.createElement("div",{"data-testid":b,className:L},O&&r.createElement("div",{className:U},r.createElement("label",{htmlFor:W},O)),r.createElement("div",{ref:q},r.createElement("textarea",Object.assign({rows:H,defaultValue:g,id:W,className:Q,ref:d,onChange:function(e){k&&z(e.target),P(e.target.value)},"aria-invalid":!!K},N)),_&&r.createElement("div",{className:S},r.createElement("p",null,"".concat(M.length,"/").concat(_," ").concat(f||"tegn")))))}));export{u as T};
-//# sourceMappingURL=Textarea-9c91191a.js.map

package/Textarea-9c91191a.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea-9c91191a.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/Validation-ef9ee0ae.js.map

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

package/constants-a4b0b501.js

@@ -1,2 +0,0 @@
-var r,a,n,e;!function(r){r[r.XSmall=38]="XSmall",r[r.Small=48]="Small",r[r.Medium=64]="Medium",r[r.Large=80]="Large",r[r.XLarge=130]="XLarge"}(r||(r={})),function(r){r[r.Modal=13e5]="Modal"}(a||(a={})),function(r){r.OnWhite="OnWhite",r.OnGrey="OnGrey",r.OnBlueberry="OnBlueberry",r.OnDark="OnDark",r.OnError="OnError"}(n||(n={})),function(r){r.Normal="Normal",r.BigForm="BigForm"}(e||(e={}));export{n as F,r as I,a as Z,e as a};
-//# sourceMappingURL=constants-a4b0b501.js.map

package/constants-a4b0b501.js.map

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