@helsenorge/designsystem-react 1.0.0-beta78 → 1.0.0-beta79

package/Button-619210b9.js

@@ -0,0 +1,2 @@
+import{_ as t,a as e}from"./_rollupPluginBabelHelpers-e1c7fe69.js";import{_ as n}from"./_tslib-51c8a283.js";import o from"react";import{g as r}from"./color-acb834c6.js";import{a as l}from"./constants-d1f48e8e.js";import{L as i}from"./Loader-084dd998.js";import{u as a}from"./useHover-57ad4df9.js";import{u as s}from"./useWindowSize-c22d7634.js";import{b as d}from"./grid-11a70eb7.js";import{c as u}from"./index-9b84fabc.js";import c from"./components/Button/styles.module.scss";var m={primary:"blueberry",warning:"banana",danger:"cherry"};var f=function(t,e){return e&&e<d.md&&t?l.Small:t?l.Medium:l.XSmall},b=o.forwardRef((function(d,b){var v,p,_,g=d.children,h=d.className,w=void 0===h?"":h,j=d.fluid,E=void 0!==j&&j,y=d.intent,N=void 0===y?"primary":y,k=d.inverted,C=void 0!==k&&k,I=d.htmlMarkup,H=void 0===I?"button":I,O=d.onClick,S=d.large,z=void 0!==S&&S,B=d.loading,F=void 0!==B&&B,M=d.variant,x=void 0===M?"fill":M,L=d.disabled,R=void 0!==L&&L,X=d.ellipsis,A=void 0!==X&&X,P=d.testId,W=d.href,q=d.target,D=n(d,["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;return 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()),[l,i,t]}(o.Children.toArray(g)),J=t(G,3),K=J[0],Q=J[1],T=J[2],U=a(b),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,N,C,Y),$=s(),tt="fill"===x,et="outline"===x,nt="borderless"===x,ot="warning"===N,rt="danger"===N,lt=!(!K&&!Q||F),it=Object.assign({},D),at=u(c.button,(e(v={},c["button--fluid"],E),e(v,c["button--large"],z),e(v,c["button--warning"],ot),e(v,c["button--danger"],rt),e(v,c["button--inverted"],C),e(v,c["button--fill"],tt),e(v,c["button--outline"],et),e(v,c["button--borderless"],nt),e(v,c["button--with-icon"],lt),e(v,c["button--ellipsis"],A),v),w),st=u(c.button__content,(e(p={},c["button__content--warning"],ot),e(p,c["button__content--danger"],rt),e(p,c["button__content--fill"],tt),e(p,c["button__content--borderless"],nt),e(p,c["button__content--with-icon"],lt),e(p,c["button__content--large"],z),e(p,c["button__content--ellipsis"],A),e(p,c["button__content--inverted"],C),e(p,c["button__content--fluid"],E),p)),dt=u(c["button__left-fluid-content"],(e(_={},c["button__left-fluid-content--with-icon"],lt),e(_,c["button__left-fluid-content--large"],z),_));function ut(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 o.createElement("span",{className:st},T)},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||C?m[N]:"white",size:"tiny"})):o.createElement(o.Fragment,null,E?o.createElement("div",{className:dt},ut(K,f(z,$.width),Z,Y),ct()):o.createElement(o.Fragment,null,ut(K,f(z,$.width),Z,Y),ct()),ut(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,ref:V},D),mt()))}));export{b as B};
+//# sourceMappingURL=Button-619210b9.js.map

package/Button-619210b9.js.map

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

package/{Modal-a9124cca.js → Modal-52971fb1.js}

@@ -1,2 +1,2 @@
-import e,{useRef as t,useEffect as a}from"react";import{c as n}from"./index-9b84fabc.js";import{p as r}from"./palette-f206f488.js";import{B as o}from"./Button-f5b8067b.js";import{I as l}from"./constants-d1f48e8e.js";import{X as c,A as i,a as s}from"./AlertSignFill-64bfef57.js";import m from"./components/Modal/styles.module.scss";import{T as d}from"./Title-863af332.js";import{v as u}from"./Loader-084dd998.js";function v(){var e=t(null);function n(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),n=a[0],r=1===a.length?n:a[a.length-1];"Tab"===t.key&&(t.shiftKey?document.activeElement===n&&(r.focus(),t.preventDefault()):document.activeElement===r&&(n.focus(),t.preventDefault()))}function r(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');1===a.length&&(a[0].focus(),t.preventDefault())}return a((function(){var t=e.current;return t.addEventListener("keydown",n),t.addEventListener("click",r),function(){t.removeEventListener("keydown",n),t.removeEventListener("click",r)}}),[]),e}var p;!function(e){e.normal="normal",e.warning="warning",e.error="error",e.image="image"}(p||(p={}));var f={variant:p.normal,primaryButtonText:"OK",large:!1,className:""},y=function(t){return e.createElement("button",{className:m.modal__lukkekryss,"aria-label":t.ariaLabel||"Lukk",onClick:t.onClick,autoFocus:!0,role:"button"},e.createElement(l,{svgIcon:c,color:r.blueberry600,size:42}))},E=e.forwardRef((function(t,c){var f,E,b;function g(e){"Escape"===e.key&&t.onClose&&(e.stopPropagation(),t.onClose())}function _(e){e.target&&C.current===e.target&&t.onClose&&(e.stopPropagation(),t.onClose())}var k,h=t.variant===p.image,L=null!==(f=t.titleId)&&void 0!==f?f:u(),x=e.useRef(null),C=e.useRef(null),B=t.secondaryButtonText&&(null===(E=t.secondaryButtonText)||void 0===E?void 0:E.length)>0||t.onSuccess,N=t.ariaLabelledBy?void 0:t.ariaLabel,w=t.ariaLabelledBy?t.ariaLabelledBy:t.ariaLabel?void 0:L;return a((function(){var e=x.current,t=C.current;return document.body.style.overflow="hidden",e&&(e.addEventListener("keydown",g),t.addEventListener("click",_)),function(){document.body.style.removeProperty("overflow"),e.removeEventListener("keydown",g),t.removeEventListener("click",_)}})),e.createElement("div",{ref:x,"data-testid":"dialog-container"},e.createElement("div",{ref:C,className:m["modal-overlay"],"data-testid":t.testId},e.createElement("div",{className:m.align,ref:v()},e.createElement("div",{className:n(t.className,m.modal,m["modal--".concat(t.variant)],t.large?m["modal--large"]:""),role:"dialog","aria-label":N,"aria-labelledby":w},!t.noCloseButton&&e.createElement("div",{className:h?m["modal__close--image"]:m.modal__close},e.createElement(y,{onClick:t.onClose,ariaLabel:t.ariaLabelCloseBtn})),e.createElement("div",{className:h?m["modal__contentWrapper--image"]:m.modal__contentWrapper},e.createElement("div",{className:m.modal__contentWrapper__title},t.variant&&((k=t.variant)===p.error?e.createElement("div",null,e.createElement(l,{svgIcon:i,color:r.cherry500,hoverColor:r.cherry500})):k===p.warning?e.createElement("div",null,e.createElement(l,{svgIcon:s,color:r.black,hoverColor:r.black})):null),e.createElement("div",null,e.createElement(d,{id:L,htmlMarkup:"h3",appearance:"title3"},t.title))),e.createElement("div",{className:h?m["modal__contentWrapper__content--image"]:m.modal__contentWrapper__content},h?t.children&&e.createElement("div",null,e.createElement("div",{className:m["modal--image__img"]},t.children),e.createElement("span",{className:m["modal--image__text"]},t.description)):t.children&&e.createElement("div",null,t.children),t.description&&!t.children&&e.createElement("p",{className:m.modal__description},t.description)),B&&e.createElement("div",{className:m.modal__actions},t.onSuccess&&e.createElement(o,{onClick:t.onSuccess},t.primaryButtonText),t.secondaryButtonText&&(null===(b=t.secondaryButtonText)||void 0===b?void 0:b.length)>0&&e.createElement(o,{variant:"borderless",onClick:t.onClose},t.secondaryButtonText)))))))}));E.defaultProps=f;export{E as M};
-//# sourceMappingURL=Modal-a9124cca.js.map
+import e,{useRef as t,useEffect as a}from"react";import{c as n}from"./index-9b84fabc.js";import{p as r}from"./palette-f206f488.js";import{B as o}from"./Button-619210b9.js";import{I as l}from"./constants-d1f48e8e.js";import{X as c,A as i,a as s}from"./AlertSignFill-64bfef57.js";import m from"./components/Modal/styles.module.scss";import{T as d}from"./Title-863af332.js";import{v as u}from"./Loader-084dd998.js";function v(){var e=t(null);function n(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'),n=a[0],r=1===a.length?n:a[a.length-1];"Tab"===t.key&&(t.shiftKey?document.activeElement===n&&(r.focus(),t.preventDefault()):document.activeElement===r&&(n.focus(),t.preventDefault()))}function r(t){var a=e.current.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');1===a.length&&(a[0].focus(),t.preventDefault())}return a((function(){var t=e.current;return t.addEventListener("keydown",n),t.addEventListener("click",r),function(){t.removeEventListener("keydown",n),t.removeEventListener("click",r)}}),[]),e}var p;!function(e){e.normal="normal",e.warning="warning",e.error="error",e.image="image"}(p||(p={}));var f={variant:p.normal,primaryButtonText:"OK",large:!1,className:""},y=function(t){return e.createElement("button",{className:m.modal__lukkekryss,"aria-label":t.ariaLabel||"Lukk",onClick:t.onClick,autoFocus:!0,role:"button"},e.createElement(l,{svgIcon:c,color:r.blueberry600,size:42}))},E=e.forwardRef((function(t,c){var f,E,g;function b(e){"Escape"===e.key&&t.onClose&&(e.stopPropagation(),t.onClose())}function _(e){e.target&&C.current===e.target&&t.onClose&&(e.stopPropagation(),t.onClose())}var k,h=t.variant===p.image,L=null!==(f=t.titleId)&&void 0!==f?f:u(),x=e.useRef(null),C=e.useRef(null),B=t.secondaryButtonText&&(null===(E=t.secondaryButtonText)||void 0===E?void 0:E.length)>0||t.onSuccess,N=t.ariaLabelledBy?void 0:t.ariaLabel,w=t.ariaLabelledBy?t.ariaLabelledBy:t.ariaLabel?void 0:L;return a((function(){var e=x.current,t=C.current;return document.body.style.overflow="hidden",e&&(e.addEventListener("keydown",b),t.addEventListener("click",_)),function(){document.body.style.removeProperty("overflow"),e.removeEventListener("keydown",b),t.removeEventListener("click",_)}})),e.createElement("div",{ref:x,"data-testid":"dialog-container"},e.createElement("div",{ref:C,className:m["modal-overlay"],"data-testid":t.testId},e.createElement("div",{className:m.align,ref:v()},e.createElement("div",{className:n(t.className,m.modal,m["modal--".concat(t.variant)],t.large?m["modal--large"]:""),role:"dialog","aria-label":N,"aria-labelledby":w},!t.noCloseButton&&e.createElement("div",{className:h?m["modal__close--image"]:m.modal__close},e.createElement(y,{onClick:t.onClose,ariaLabel:t.ariaLabelCloseBtn})),e.createElement("div",{className:h?m["modal__contentWrapper--image"]:m.modal__contentWrapper},e.createElement("div",{className:m.modal__contentWrapper__title},t.variant&&((k=t.variant)===p.error?e.createElement("div",null,e.createElement(l,{svgIcon:i,color:r.cherry500,hoverColor:r.cherry500})):k===p.warning?e.createElement("div",null,e.createElement(l,{svgIcon:s,color:r.black,hoverColor:r.black})):null),e.createElement("div",null,e.createElement(d,{id:L,htmlMarkup:"h3",appearance:"title3"},t.title))),e.createElement("div",{className:h?m["modal__contentWrapper__content--image"]:m.modal__contentWrapper__content},h?t.children&&e.createElement("div",null,e.createElement("div",{className:m["modal--image__img"]},t.children),e.createElement("span",{className:m["modal--image__text"]},t.description)):t.children&&e.createElement("div",null,t.children),t.description&&!t.children&&e.createElement("p",{className:m.modal__description},t.description)),B&&e.createElement("div",{className:m.modal__actions},t.onSuccess&&e.createElement(o,{onClick:t.onSuccess},t.primaryButtonText),t.secondaryButtonText&&(null===(g=t.secondaryButtonText)||void 0===g?void 0:g.length)>0&&e.createElement(o,{variant:"borderless",onClick:t.onClose},t.secondaryButtonText)))))))}));E.defaultProps=f;export{E as M};
+//# sourceMappingURL=Modal-52971fb1.js.map

package/Modal-52971fb1.js.map

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

package/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAYnE,oBAAY,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7D,oBAAY,mBAAmB,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1F,oBAAY,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AACxC,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAE/D,UAAU,aAAa;IACrB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,aAI3B,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,MAAM,2GAuKV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAYnE,oBAAY,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC7D,oBAAY,mBAAmB,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1F,oBAAY,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAC;AACxC,oBAAY,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;AAE/D,UAAU,aAAa;IACrB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,mBAAmB,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,aAI3B,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,uDAAuD;IACvD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8BD,QAAA,MAAM,MAAM,2GAuJV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/components/Button/index.js

@@ -1,2 +1,2 @@
-import{B as o}from"../../Button-f5b8067b.js";export{B as default}from"../../Button-f5b8067b.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"react";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-084dd998.js";import"../../index-9b84fabc.js";import"../Loader/styles.module.scss";import"crypto";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"./styles.module.scss";
+import{B as o}from"../../Button-619210b9.js";export{B as default}from"../../Button-619210b9.js";import"../../_rollupPluginBabelHelpers-e1c7fe69.js";import"../../_tslib-51c8a283.js";import"react";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-084dd998.js";import"../../index-9b84fabc.js";import"../Loader/styles.module.scss";import"crypto";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"./styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/Button/styles.module.scss

@@ -63,7 +63,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     border-style: solid;
     background-color: $blueberry500;
     border-color: $blueberry500;
-    color: $blueberry500;
+    color: $white;
 
     &:hover,
     &:active,
@@ -78,33 +78,34 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       color: $neutral600;
     }
   }
-  &--fill-warning {
+  &--fill#{&}--warning {
     background-color: $banana500;
     border-color: $banana500;
-    color: $banana500;
 
     &:hover,
     &:active,
     &:focus {
       background-color: $banana700;
+      border-color: $banana700;
       box-shadow: 0 0 0 0.25rem $banana700;
     }
   }
-  &--fill-danger {
+  &--fill#{&}--danger {
     background-color: $cherry500;
     border-color: $cherry500;
-    color: $cherry500;
 
     &:hover,
     &:active,
     &:focus {
       background-color: $cherry700;
+      border-color: $cherry700;
       box-shadow: 0 0 0 0.25rem $cherry700;
     }
   }
-  &--fill-inverted {
+  &--fill#{&}--inverted {
     background-color: $white;
     border-color: $white;
+    color: $blueberry500;
 
     &:hover,
     &:active,
@@ -114,8 +115,11 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       box-shadow: 0 0 0 0.25rem $white;
     }
   }
-  &--fill-not-inverted {
-    color: $white;
+  &--fill#{&}--warning#{&}--inverted {
+    color: $banana500;
+  }
+  &--fill#{&}--danger#{&}--inverted {
+    color: $cherry500;
   }
 
   &--outline {
@@ -163,7 +167,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       color: $neutral600;
     }
   }
-  &--outline-warning {
+  &--outline#{&}--warning {
     border-color: $banana500;
     color: $banana600;
 
@@ -171,6 +175,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     &:active,
     &:focus {
       background-color: $warningHoverColor;
+      border-color: transparent;
 
       &:before {
         border-color: $warningHoverColor;
@@ -180,7 +185,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       }
     }
   }
-  &--outline-danger {
+  &--outline#{&}--danger {
     border-color: $cherry500;
     color: $cherry600;
 
@@ -188,6 +193,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     &:active,
     &:focus {
       background-color: $dangerHoverColor;
+      border-color: transparent;
 
       &:before {
         border-color: $dangerHoverColor;
@@ -197,7 +203,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       }
     }
   }
-  &--outline-inverted {
+  &--outline#{&}--inverted {
     border-color: $white;
     color: $white;
 
@@ -205,6 +211,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     &:active,
     &:focus {
       background-color: $invertedHoverColor;
+      border-color: transparent;
 
       &:before {
         border-color: $invertedHoverColor;
@@ -232,13 +239,13 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       color: $neutral600;
     }
   }
-  &--borderless-warning {
+  &--borderless#{&}--warning {
     color: $banana600;
   }
-  &--borderless-danger {
+  &--borderless#{&}--danger {
     color: $cherry600;
   }
-  &--borderless-inverted {
+  &--borderless#{&}--inverted {
     color: $white;
   }
 
@@ -254,17 +261,17 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       }
     }
   }
-  &--large-with-icon {
+  &--large#{&}--with-icon {
     svg {
       margin: 0 0.5rem;
     }
   }
 
-  &--ellipsis-with-icon {
+  &--ellipsis#{&}--with-icon {
     max-width: 100%;
   }
 
-  &--borderless-with-icon {
+  &--borderless#{&}--with-icon {
     svg:first-child {
       margin-right: 0.125rem;
       @media (min-width: map-get($grid-breakpoints, md)) {
@@ -278,7 +285,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
       }
     }
   }
-  &--large-borderless-with-icon {
+  &--large#{&}--borderless#{&}--with-icon {
     svg:first-child {
       margin-right: 0.5rem;
       @media (min-width: map-get($grid-breakpoints, md)) {
@@ -298,19 +305,26 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     margin-bottom: 0.5rem;
     white-space: normal;
 
-    #{$button}:focus & {
-      &--fill {
-        border-bottom: 1px solid $blueberry700;
+    &--fill {
+      #{$button}:focus & {
+        border-bottom: 1px solid $white;
+      }
+    }
+
+    &--fill#{&}--inverted {
+      #{$button}:focus & {
+        border-bottom-color: $blueberry700;
       }
-      &--fill-warning {
+    }
+    &--fill#{&}--warning#{&}--inverted {
+      #{$button}:focus & {
         border-bottom-color: $banana700;
       }
-      &--fill-danger {
+    }
+    &--fill#{&}--danger#{&}--inverted {
+      #{$button}:focus & {
         border-bottom-color: $cherry700;
       }
-      &--fill-not-inverted {
-        border-bottom-color: $white;
-      }
     }
 
     &--borderless {
@@ -322,21 +336,21 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
         border-bottom-color: $blueberry700;
       }
     }
-    &--borderless-warning {
+    &--borderless#{&}--warning {
       #{$button}:hover &,
       #{$button}:active &,
       #{$button}:focus & {
         border-bottom-color: $banana700;
       }
     }
-    &--borderless-danger {
+    &--borderless#{&}--danger {
       #{$button}:hover &,
       #{$button}:active &,
       #{$button}:focus & {
         border-bottom-color: $cherry700;
       }
     }
-    &--borderless-inverted {
+    &--borderless#{&}--inverted {
       #{$button}:hover &,
       #{$button}:active &,
       #{$button}:focus & {
@@ -350,26 +364,26 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
     &--with-icon:last-child {
       margin-right: 1.5rem;
     }
-    &--large-with-icon:first-child {
+    &--large#{&}--with-icon:first-child {
       margin-left: 2.5rem;
     }
-    &--large-with-icon:last-child {
+    &--large#{&}--with-icon:last-child {
       margin-right: 2.5rem;
     }
 
-    &--ellipsis-with-icon {
+    &--ellipsis#{&}--with-icon {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
-    &--fluid-with-icon:last-child {
+    &--fluid#{&}--with-icon:last-child {
       margin-right: 0;
       @media (min-width: map-get($grid-breakpoints, md)) {
         margin-right: 1.5rem;
       }
     }
-    &--large-fluid-with-icon:last-child {
+    &--large-fluid#{&}--with-icon:last-child {
       @media (min-width: map-get($grid-breakpoints, md)) {
         margin-right: 2.5rem;
       }
@@ -391,7 +405,7 @@ $invertedHoverColor: #ffffff0d; //$white + '0D';
         margin-right: 0;
       }
     }
-    &--large-with-icon:last-child {
+    &--large#{&}--with-icon:last-child {
       margin-right: 2.5rem;
       @media (min-width: map-get($grid-breakpoints, md)) {
         margin-right: 0;

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

@@ -2,40 +2,27 @@ export type Styles = {
   button: string;
   button__content: string;
   'button__content--borderless': string;
-  'button__content--borderless-danger': string;
-  'button__content--borderless-inverted': string;
-  'button__content--borderless-warning': string;
-  'button__content--ellipsis-with-icon': string;
+  'button__content--danger': string;
+  'button__content--ellipsis': string;
   'button__content--fill': string;
-  'button__content--fill-danger': string;
-  'button__content--fill-not-inverted': string;
-  'button__content--fill-warning': string;
-  'button__content--fluid-with-icon': string;
-  'button__content--large-fluid-with-icon': string;
-  'button__content--large-with-icon': string;
+  'button__content--fluid': string;
+  'button__content--inverted': string;
+  'button__content--large': string;
+  'button__content--large-fluid': string;
+  'button__content--warning': string;
   'button__content--with-icon': string;
   'button__left-fluid-content': string;
-  'button__left-fluid-content--large-with-icon': string;
+  'button__left-fluid-content--large': string;
   'button__left-fluid-content--with-icon': string;
   'button--borderless': string;
-  'button--borderless-danger': string;
-  'button--borderless-inverted': string;
-  'button--borderless-warning': string;
-  'button--borderless-with-icon': string;
-  'button--ellipsis-with-icon': string;
+  'button--danger': string;
+  'button--ellipsis': string;
   'button--fill': string;
-  'button--fill-danger': string;
-  'button--fill-inverted': string;
-  'button--fill-not-inverted': string;
-  'button--fill-warning': string;
   'button--fluid': string;
+  'button--inverted': string;
   'button--large': string;
-  'button--large-borderless-with-icon': string;
-  'button--large-with-icon': string;
   'button--outline': string;
-  'button--outline-danger': string;
-  'button--outline-inverted': string;
-  'button--outline-warning': string;
+  'button--warning': string;
   'button--with-icon': string;
   'content-wrapper': string;
 };

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import{_ as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import e,{useState as o}from"react";import{B as r}from"../../Button-f5b8067b.js";import{M as s}from"../../Modal-a9124cca.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-084dd998.js";import"../../index-9b84fabc.js";import"../Loader/styles.module.scss";import"crypto";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"../Modal/styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";var i=e.forwardRef((function(i){var m=o(!1),l=t(m,2),a=l[0],n=l[1];return e.createElement("div",null,e.createElement(r,{onClick:function(){return n(!0)}},i.buttonText),a&&e.createElement(s,Object.assign({},i,{onClose:function(){return n(!1)}})))}));export default i;
+import{_ as t}from"../../_rollupPluginBabelHelpers-e1c7fe69.js";import e,{useState as o}from"react";import{B as r}from"../../Button-619210b9.js";import{M as s}from"../../Modal-52971fb1.js";import"../../_tslib-51c8a283.js";import"../../color-acb834c6.js";import"../../index-19b48c51.js";import"../../palette-f206f488.js";import"../../grid-11a70eb7.js";import"../../constants-d1f48e8e.js";import"../../Loader-084dd998.js";import"../../index-9b84fabc.js";import"../Loader/styles.module.scss";import"crypto";import"../../useHover-57ad4df9.js";import"../../useWindowSize-c22d7634.js";import"../Button/styles.module.scss";import"../../AlertSignFill-64bfef57.js";import"../Modal/styles.module.scss";import"../../Title-863af332.js";import"../Title/styles.module.scss";var i=e.forwardRef((function(i){var m=o(!1),l=t(m,2),n=l[0],p=l[1];return e.createElement("div",null,e.createElement(r,{onClick:function(){return p(!0)}},i.buttonText),n&&e.createElement(s,Object.assign({},i,{onClose:function(){return p(!1)}})))}));export default i;
 //# sourceMappingURL=index.js.map

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import{M as s}from"../../Modal-a9124cca.js";export{M as default}from"../../Modal-a9124cca.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-f5b8067b.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-084dd998.js";import"../Loader/styles.module.scss";import"crypto";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{M as s}from"../../Modal-52971fb1.js";export{M as default}from"../../Modal-52971fb1.js";import"react";import"../../index-9b84fabc.js";import"../../palette-f206f488.js";import"../../Button-619210b9.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-084dd998.js";import"../Loader/styles.module.scss";import"crypto";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/package.json

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

package/Button-f5b8067b.js

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

package/Button-f5b8067b.js.map

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

package/Modal-a9124cca.js.map

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