@helsenorge/designsystem-react 1.0.0-beta76 → 1.0.0-beta80

package/components/FormGroup/styles.module.scss

@@ -0,0 +1,79 @@
+@import '../../scss/_spacers.scss';
+@import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
+@import '../../scss/font-settings.scss';
+
+.form-group-wrapper {
+  padding: getSpacer(s) getSpacer(xs) getSpacer(m);
+
+  @media (min-width: map-get($grid-breakpoints, md)) {
+    padding: getSpacer(s) getSpacer(m) getSpacer(l);
+  }
+
+  &--bigform {
+    background-color: $neutral50;
+  }
+
+  &--on-blueberry {
+    background-color: $blueberry50;
+  }
+
+  &--on-dark {
+    background-color: $blueberry800;
+  }
+
+  &--invalid {
+    background-color: $cherry50;
+    border-left: 0.25rem solid $cherry500;
+  }
+
+  &__title {
+    margin-bottom: getSpacer(l) !important;
+
+    &--on-dark {
+      color: $white;
+    }
+
+    &--bigform {
+      margin-left: getSpacer(l) !important;
+    }
+  }
+
+  &__errors {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    color: $cherry500;
+    margin-top: 0;
+
+    &--bigform {
+      margin-left: getSpacer(l);
+    }
+  }
+}
+
+.form-group-wrapper:first-of-type {
+  padding-top: getSpacer(xl);
+}
+
+.form-group-wrapper:last-of-type {
+  padding-bottom: getSpacer(xl);
+}
+
+.form-group {
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  &__legend {
+    font-size: $font-size-md;
+    font-weight: 600;
+
+    &--on-dark {
+      color: $white;
+    }
+
+    &--bigform {
+      padding: 0 getSpacer(l) getSpacer(l);
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+export type Styles = {
+  'form-group': string;
+  'form-group__legend': string;
+  'form-group__legend--bigform': string;
+  'form-group__legend--on-dark': string;
+  'form-group-wrapper': string;
+  'form-group-wrapper__errors': string;
+  'form-group-wrapper__errors--bigform': string;
+  'form-group-wrapper__title': string;
+  'form-group-wrapper__title--bigform': string;
+  'form-group-wrapper__title--on-dark': string;
+  'form-group-wrapper--bigform': string;
+  'form-group-wrapper--invalid': string;
+  'form-group-wrapper--on-blueberry': string;
+  'form-group-wrapper--on-dark': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/LinkList/LinkList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AACvG,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAgDD,eAAO,MAAM,QAAQ,mBAqBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AACvG,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA6CD,eAAO,MAAM,QAAQ,mBAqBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}

package/components/LinkList/index.js

@@ -1,2 +1,2 @@
-import{a as e}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as l}from"../../_tslib-51c8a283.js";import i from"react";import{c as a}from"../../index-9b84fabc.js";import{a as r,I as n}from"../../constants-d1f48e8e.js";import{u as o,B as s}from"../../useBreakpoint-a8fa8a61.js";import{u as t}from"../../useHover-57ad4df9.js";import c from"./styles.module.scss";import"../../useWindowSize-c22d7634.js";import"../../grid-11a70eb7.js";var m=function(e){var l=e.isExtraSmall,a=e.isHovered,r=i.createElement("path",{d:"M19.171 32.951l1.409 1.42L31.031 24 20.58 13.63l-1.409 1.42 9.02 8.95z"}),n=i.createElement("path",{d:"M24.479 11.63L36.93 23.999 24.479 36.37l-1.409-1.419L33.083 25H13v-2h20.085L23.07 13.049z"}),o=i.createElement("path",{d:"M17.885 32.577l1.779 1.793 10.451-10.371L19.664 13.63l-1.779 1.793 8.644 8.576z"});return l?a?i.createElement("path",{d:"M25.98 11.103l12.977 12.896L25.98 36.897l-1.78-1.794 9.899-9.841-20.204.001v-2.526l20.204-.001-9.899-9.839z"}):o:a?n:r},d=i.forwardRef((function(d,f){var _,p=d.children,v=d.className,h=void 0===v?"":v,u=d.color,k=void 0===u?"neutral":u,E=d.icon,z=d.size,N=void 0===z?"medium":z,b=d.chevron,L=void 0!==b&&b,j=l(d,["children","className","color","icon","size","chevron"]),g=t(),H=g.hoverRef,B=g.isHovered,S=o(),M="small"!==N&&!(!L&&!E);return i.createElement("li",{ref:f},i.createElement("a",Object.assign({className:a(c["link-list__anchor"],c["link-list__anchor--"+k],(_={},e(_,c["link-list__anchor--hasicon"],M),e(_,c["link-list__anchor--small"],"small"===N),e(_,c["link-list__anchor--medium"],"medium"===N),e(_,c["link-list__anchor--large"],"large"===N),_),h),ref:H},j),i.createElement("span",{className:c["link-list__content"]},M&&E&&i.createElement("span",{className:"".concat(c["link-list__icon-container"]," ").concat(c["link-list__icon-container--hasmargin"])},i.cloneElement(E,{className:c["link-list__icon"],size:S===s.Xs?r.XSmall:r.Small,isHovered:B})),p),M&&L&&i.createElement("span",{className:c["link-list__icon-container"]},i.createElement(n,{className:c["link-list__icon"],svgIcon:m,isHovered:B,size:r.XSmall}))))})),f=i.forwardRef((function(l,r){var n,o=l.children,s=l.className,t=void 0===s?"":s,m=l.chevron,f=void 0!==m&&m,_=l.size,p=void 0===_?"medium":_,v=l.color,h=l.topBorder,u=void 0===h||h,k=l.bottomBorder,E=void 0===k||k;return i.createElement("ul",{ref:r,className:a(c["link-list"],(n={},e(n,c["link-list--hastopborder"],u),e(n,c["link-list--nobottomborder"],!E),n),t||"")},i.Children.map(o,(function(e){if(e.type===d)return i.cloneElement(e,{color:v,size:p,chevron:f})})))}));f.Link=d,d.displayName="LinkList.Link";export default f;
+import{a as e}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as l}from"../../_tslib-51c8a283.js";import r from"react";import{c as a}from"../../index-9b84fabc.js";import{a as i,I as o}from"../../constants-d1f48e8e.js";import{u as s,B as t}from"../../useBreakpoint-a8fa8a61.js";import{u as n}from"../../useHover-57ad4df9.js";import m from"./styles.module.scss";import"../../useWindowSize-c22d7634.js";import"../../grid-11a70eb7.js";var c=function(e){var l=e.isExtraSmall,a=e.isHovered,i=r.createElement("path",{d:"M19.171 32.951l1.409 1.42L31.031 24 20.58 13.63l-1.409 1.42 9.02 8.95z"}),o=r.createElement("path",{d:"M24.479 11.63L36.93 23.999 24.479 36.37l-1.409-1.419L33.083 25H13v-2h20.085L23.07 13.049z"}),s=r.createElement("path",{d:"M17.885 32.577l1.779 1.793 10.451-10.371L19.664 13.63l-1.779 1.793 8.644 8.576z"});return l?a?r.createElement("path",{d:"M25.98 11.103l12.977 12.896L25.98 36.897l-1.78-1.794 9.899-9.841-20.204.001v-2.526l20.204-.001-9.899-9.839z"}):s:a?o:i},d=r.forwardRef((function(d,f){var v,p=d.children,h=d.className,u=void 0===h?"":h,_=d.color,k=void 0===_?"neutral":_,E=d.icon,z=d.size,b=void 0===z?"medium":z,L=d.chevron,j=void 0!==L&&L,N=l(d,["children","className","color","icon","size","chevron"]),H=n(),g=H.hoverRef,B=H.isHovered,S=s(),M="small"!==b&&!(!j&&!E);return r.createElement("li",{ref:f},r.createElement("a",Object.assign({className:a(m["link-list__anchor"],m["link-list__anchor--"+k],(v={},e(v,m["link-list__anchor--hasicon"],M),e(v,m["link-list__anchor--small"],"small"===b),e(v,m["link-list__anchor--medium"],"medium"===b),e(v,m["link-list__anchor--large"],"large"===b),v),u),ref:g},N),M&&E&&r.createElement("span",{className:m["link-list__icon"]},r.cloneElement(E,{size:S===t.Xs?i.XSmall:i.Small,isHovered:B})),r.createElement("span",{className:m["link-list__content"]},p),M&&j&&r.createElement("span",{className:m["link-list__chevron"]},r.createElement(o,{svgIcon:c,isHovered:B,size:i.XSmall}))))})),f=r.forwardRef((function(l,i){var o,s=l.children,t=l.className,n=void 0===t?"":t,c=l.chevron,f=void 0!==c&&c,v=l.size,p=void 0===v?"medium":v,h=l.color,u=l.topBorder,_=void 0===u||u,k=l.bottomBorder,E=void 0===k||k;return r.createElement("ul",{ref:i,className:a(m["link-list"],(o={},e(o,m["link-list--hastopborder"],_),e(o,m["link-list--nobottomborder"],!E),o),n||"")},r.Children.map(s,(function(e){if(e.type===d)return r.cloneElement(e,{color:h,size:p,chevron:f})})))}));f.Link=d,d.displayName="LinkList.Link";export default f;
 //# sourceMappingURL=index.js.map

package/components/LinkList/styles.module.scss

@@ -27,7 +27,6 @@
     display: flex;
     min-height: 4.5rem;
     text-decoration: none;
-    justify-content: space-between;
     align-items: center;
     color: $black;
     cursor: pointer;
@@ -124,9 +123,6 @@
 
     &:focus {
       outline: none;
-      .link-list__content {
-        border-color: $black;
-      }
     }
   }
 
@@ -134,14 +130,21 @@
     display: flex;
     align-items: center;
     border-bottom: 1px solid transparent;
-  }
-
-  &__icon-container {
-    &--hasmargin {
-      margin-right: getSpacer(xs);
+    :focus > & {
+      border-color: $black;
     }
   }
+
   &__icon {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    margin-right: getSpacer(xs);
+  }
+
+  &__chevron {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: getSpacer(xs);
   }
 }

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

@@ -13,9 +13,9 @@ export type Styles = {
   'link-list__anchor--plum': string;
   'link-list__anchor--small': string;
   'link-list__anchor--white': string;
+  'link-list__chevron': string;
   'link-list__content': string;
   'link-list__icon': string;
-  'link-list__icon-container--hasmargin': string;
   'link-list--hastopborder': string;
   'link-list--nobottomborder': string;
 };

package/components/Loader/Loader.d.ts

@@ -11,6 +11,14 @@ interface LoaderProps {
     size?: LoaderSizes;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Centers the loader in a container */
+    center?: boolean;
+    /** Loader is displayed with grey background covering the entire screen */
+    overlay?: boolean;
+    /**  Individual id for loading icon (aria-labelledby).  */
+    ariaLabelledById?: string;
+    /**  String that labels the current loading element  */
+    ariaLabel?: string;
 }
 declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLElement>>;
 export default Loader;

package/components/Loader/Loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAInD,oBAAY,YAAY,GAAG,YAAY,CAAC;AACxC,oBAAY,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,UAAU,WAAW;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,MAAM,iFAmCV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,oBAAY,YAAY,GAAG,YAAY,CAAC;AACxC,oBAAY,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE,UAAU,WAAW;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,iFA0DV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Loader/componentdata.json

@@ -123,6 +123,82 @@
       "type": {
         "name": "string"
       }
+    },
+    "center": {
+      "defaultValue": null,
+      "description": "Centers the loader in a container",
+      "name": "center",
+      "parent": {
+        "fileName": "src/components/Loader/Loader.tsx",
+        "name": "LoaderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Loader/Loader.tsx",
+          "name": "LoaderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "overlay": {
+      "defaultValue": null,
+      "description": "Loader is displayed with grey background covering the entire screen",
+      "name": "overlay",
+      "parent": {
+        "fileName": "src/components/Loader/Loader.tsx",
+        "name": "LoaderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Loader/Loader.tsx",
+          "name": "LoaderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "ariaLabelledById": {
+      "defaultValue": null,
+      "description": "Individual id for loading icon (aria-labelledby).",
+      "name": "ariaLabelledById",
+      "parent": {
+        "fileName": "src/components/Loader/Loader.tsx",
+        "name": "LoaderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Loader/Loader.tsx",
+          "name": "LoaderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
+    },
+    "ariaLabel": {
+      "defaultValue": null,
+      "description": "String that labels the current loading element",
+      "name": "ariaLabel",
+      "parent": {
+        "fileName": "src/components/Loader/Loader.tsx",
+        "name": "LoaderProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Loader/Loader.tsx",
+          "name": "LoaderProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "string"
+      }
     }
   }
 }

package/components/Loader/index.js

@@ -1,2 +1,2 @@
-import{L as e}from"../../Loader-ad8bcd78.js";export{L as default}from"../../Loader-ad8bcd78.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"./styles.module.scss";
+import{L as e}from"../../Loader-9e099b42.js";export{L as default}from"../../Loader-9e099b42.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"./styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Loader/styles.module.scss

@@ -1,4 +1,5 @@
 @import '../../scss/_palette.scss';
+@import 'bootstrap/scss/mixins/_screen-reader.scss';
 
 @mixin keyframes($name) {
   @keyframes #{$name} {
@@ -35,6 +36,25 @@
   @include animate($name, translate, 0.6s, infinite);
 }
 
+.loader-wrapper {
+  &--center {
+    text-align: center;
+  }
+
+  &--overlay {
+    z-index: 9999;
+    background: $transparentGrey;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .loader {
   display: inline-block;
   position: relative;
@@ -56,6 +76,10 @@
     height: 24px;
   }
 
+  &__hidden-text {
+    @include sr-only();
+  }
+
   &__dot {
     position: absolute;
     width: 8px;

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

@@ -1,6 +1,8 @@
 export type Styles = {
+  center: string;
   loader: string;
   loader__dot: string;
+ ' loader__hidden-text': string;
   'loader__dot--banana': string;
   'loader__dot--black': string;
   'loader__dot--cherry': string;
@@ -14,6 +16,7 @@ export type Styles = {
   'loader--large': string;
   'loader--medium': string;
   'loader--small': string;
+  overlay: string;
   scale: string;
   'scale-regular': string;
   'scale-reverse': string;

package/components/Modal/Modal.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 export declare enum ModalVariants {
     normal = "normal",
     warning = "warning",
-    error = "error"
+    error = "error",
+    image = "image"
 }
 export interface ModalProps {
     /** Title of the modal */

package/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD,QAAA,MAAM,KAAK,kFA2FT,CAAC;AAIH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAgBzC,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2BAA2B;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAgCD,QAAA,MAAM,KAAK,kFA0GT,CAAC;AAIH,eAAe,KAAK,CAAC"}

package/components/Modal/componentdata.json

@@ -89,6 +89,9 @@
           },
           {
             "value": "\"error\""
+          },
+          {
+            "value": "\"image\""
           }
         ]
       }

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import{M as s}from"../../Modal-ab87aab2.js";export{M as default}from"../../Modal-ab87aab2.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-79ff79f4.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-ad8bcd78.js";import"../Loader/styles.module.scss";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"./styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";import"crypto";
+import{M as s}from"../../Modal-5c2defa7.js";export{M as default}from"../../Modal-5c2defa7.js";import"react";import"../../index-9b84fabc.js";import"../../uuid-484288be.js";import"../../palette-f206f488.js";import"../../Button-7200b617.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-9e099b42.js";import"../Loader/styles.module.scss";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"./styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Modal/styles.module.scss

@@ -38,22 +38,22 @@
     font-size: 20px;
   }
 
-  &.normal {
+  &--normal {
     background-color: $white;
   }
-  &.error {
+  &--error {
     background-color: $cherry100;
 
-    .title {
+    &__title {
       color: $cherry600;
     }
   }
-  &.warning {
+  &--warning {
     background-color: $banana50;
   }
-  &.error,
-  &.warning {
-    .title {
+  &--error,
+  &--warning {
+    &__title {
       div:nth-child(2) {
         padding-left: 8px;
       }
@@ -74,7 +74,7 @@
     width: 515px;
   }
 
-  &.large {
+  &--large {
     @media (min-width: map-get($grid-breakpoints, md)) {
       width: 612px;
     }
@@ -82,78 +82,114 @@
       width: 696px;
     }
   }
-}
 
-.close {
-  position: absolute;
-  right: 15px;
-  top: 15px;
-  @media (max-width: map-get($grid-breakpoints, md)) {
-    right: 0px;
-    top: 0px;
-  }
-}
+  &--image {
+    max-height: calc(100vh - 24px);
+    max-width: calc(100vw - 24px);
+    width: 100%;
 
-.contentWrapper {
-  padding: 48px;
-  @media (max-width: map-get($grid-breakpoints, sm)) {
-    padding: 32px 24px;
+    &__img {
+      max-height: calc(100vh - 185px);
+      max-width: calc(100vw - 40px);
+      width: 100%;
+      line-height: 0px;
+      overflow: hidden;
+    }
+
+    &__text {
+      font-size: 12pt;
+      padding-top: 16px;
+      display: block;
+    }
   }
-  .content {
-    margin: 20px 0;
+
+  &__close {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    @media (max-width: map-get($grid-breakpoints, md)) {
+      right: 0px;
+      top: 0px;
+    }
+
+    &--image {
+      position: absolute;
+      right: 0px;
+      margin: 8px;
+    }
   }
-  .title {
-    display: flex;
-    div {
+
+  &__contentWrapper {
+    padding: 48px;
+    @media (max-width: map-get($grid-breakpoints, sm)) {
+      padding: 32px 24px;
+    }
+
+    &--image {
+      padding: 48px 16px 32px;
+    }
+
+    &__content {
+      margin: 20px 0;
+
+      &--image {
+        margin-top: 10px;
+      }
+    }
+
+    &__title {
       display: flex;
-      justify-content: center;
-      align-items: center;
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
-}
 
-.description {
-  white-space: pre-line;
-}
+  &__description {
+    white-space: pre-line;
+  }
 
-.lukkekryss {
-  height: 42px;
-  width: 42px;
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-
-  &:hover,
-  &:active {
-    background-color: rgba(88, 171, 187, 0.1);
-  }
-  &:focus {
-    box-shadow: 0px 0px 0px 2px $black;
-    background-color: rgba(88, 171, 187, 0.1);
-    border-radius: 0;
+  &__lukkekryss {
+    height: 42px;
+    width: 42px;
+    padding: 0;
     border: 0;
-    outline: none;
-  }
-}
+    background-color: transparent;
+    cursor: pointer;
 
-.actions {
-  display: flex;
-  padding: 5px 0;
-  button:first-child {
-    margin-right: 24px;
+    &:hover,
+    &:active {
+      background-color: rgba(88, 171, 187, 0.1);
+    }
+    &:focus {
+      box-shadow: 0px 0px 0px 2px $black;
+      background-color: rgba(88, 171, 187, 0.1);
+      border-radius: 0;
+      border: 0;
+      outline: none;
+    }
   }
-}
 
-/* animation on open */
-@keyframes open {
-  0% {
-    opacity: 0;
-    transform: scale(0.9);
+  &__actions {
+    display: flex;
+    padding: 5px 0;
+    button:first-child {
+      margin-right: 24px;
+    }
   }
 
-  100% {
-    opacity: 1;
-    transform: scale(1);
+  /* animation on open */
+  @keyframes open {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }

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

@@ -1,20 +1,28 @@
 export type Styles = {
-  actions: string;
   align: string;
-  close: string;
-  content: string;
-  contentWrapper: string;
-  description: string;
-  error: string;
-  large: string;
-  lukkekryss: string;
   modal: string;
+  modal__actions: string;
+  modal__close: string;
+  'modal__close--image': string;
+  modal__contentWrapper: string;
+  modal__contentWrapper__content: string;
+  'modal__contentWrapper__content--image': string;
+  modal__contentWrapper__title: string;
+  'modal__contentWrapper--image': string;
+  modal__description: string;
+  modal__lukkekryss: string;
+  'modal--error': string;
+  'modal--error__title': string;
+  'modal--image': string;
+  'modal--image__img': string;
+  'modal--image__text': string;
+  'modal--large': string;
+  'modal--normal': string;
+  'modal--warning': string;
+  'modal--warning__title': string;
   'modal-overlay': string;
   'modal-overlay--lowerzindex': string;
-  normal: string;
   open: string;
-  title: string;
-  warning: string;
 };
 
 export type ClassNames = keyof Styles;

package/components/Validation/Validation.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormVariant } from '../FormGroup/FormGroup';
+interface ValidationProps {
+    /** text placed in the legend tag of the fieldset */
+    errorSummary?: string;
+    /** Items in the ExpanderList */
+    children?: React.ReactNode;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Changes the visuals of the formgroup */
+    variant?: FormVariant;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const Validation: React.ForwardRefExoticComponent<ValidationProps & React.RefAttributes<HTMLElement>>;
+export default Validation;
+//# sourceMappingURL=Validation.d.ts.map

package/components/Validation/Validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Validation.d.ts","sourceRoot":"","sources":["../../../src/components/Validation/Validation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,UAAU,eAAe;IACvB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,qFAgBrB,CAAC;AAEH,eAAe,UAAU,CAAC"}