@helsenorge/designsystem-react 1.0.0-beta139 → 1.0.0-beta140

package/components/Panel/componentdata.json

@@ -363,6 +363,56 @@
         "name": "string"
       }
     },
+    "buttonHtmlMarkup": {
+      "defaultValue": null,
+      "description": "HTML markup for panel button. Default: a",
+      "name": "buttonHtmlMarkup",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "enum",
+        "raw": "ButtonTags | undefined",
+        "value": [
+          {
+            "value": "undefined"
+          },
+          {
+            "value": "\"button\""
+          },
+          {
+            "value": "\"a\""
+          }
+        ]
+      }
+    },
+    "buttonOnClick": {
+      "defaultValue": null,
+      "description": "Callback when panel button is clicked",
+      "name": "buttonOnClick",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((e?: MouseEvent<HTMLElement, MouseEvent> | FormEvent<{}> | KeyboardEvent<HTMLUListElement> | null) => void) | undefined"
+      }
+    },
     "showCloseButtonInExpand": {
       "defaultValue": null,
       "description": "Show close button in bottom of Panel Expand, default: true",
@@ -497,6 +547,44 @@
       "type": {
         "name": "boolean"
       }
+    },
+    "expanded": {
+      "defaultValue": null,
+      "description": "Opens or closes the panel",
+      "name": "expanded",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "boolean"
+      }
+    },
+    "onExpand": {
+      "defaultValue": null,
+      "description": "Called when panel is open/closed.",
+      "name": "onExpand",
+      "parent": {
+        "fileName": "src/components/Panel/Panel.tsx",
+        "name": "PanelProps"
+      },
+      "declarations": [
+        {
+          "fileName": "src/components/Panel/Panel.tsx",
+          "name": "PanelProps"
+        }
+      ],
+      "required": false,
+      "type": {
+        "name": "((isExpanded: boolean) => void)"
+      }
     }
   }
 }

package/components/Panel/index.js

@@ -1,2 +1,2 @@
-export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-de0c5303.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-b5e19cfc.js";import"../Title/styles.module.scss";import"../../constants-d84659f5.js";import"../../Button-1ae9497c.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-877aeed0.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-c8d984bc.js";import"../Loader/styles.module.scss";import"../../useHover-b995a0e6.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-652aa9e9.js";import"../../ChevronUp-558a33cd.js";import"../../ArrowRight-2e4b6122.js";import"../../AlertSignFill-e0a05c2b.js";import"../../Pencil-0b63b983.js";import"../../Calendar-03556b56.js";import"../../Watch-a947e459.js";import"../../Badge-d7e6ebd7.js";import"../Badge/styles.module.scss";
+export{c as PanelLayout,a as PanelStatus,b as PanelVariant,P as default}from"../../Panel-1ce6fe37.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../constants-dbdea596.js";import"../../Button-78f848e6.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js

@@ -1,2 +1,2 @@
-import e from"react";import s from"./styles.module.scss";import{A as t}from"../../constants-d84659f5.js";import{b as r,P as o}from"../../Panel-de0c5303.js";import{c as i}from"../../index-d1c0552c.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"../Panel/styles.module.scss";import"../../Title-b5e19cfc.js";import"../Title/styles.module.scss";import"../../Button-1ae9497c.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-877aeed0.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-c8d984bc.js";import"../Loader/styles.module.scss";import"../../useHover-b995a0e6.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-652aa9e9.js";import"../../ChevronUp-558a33cd.js";import"../../ArrowRight-2e4b6122.js";import"../../AlertSignFill-e0a05c2b.js";import"../../Pencil-0b63b983.js";import"../../Calendar-03556b56.js";import"../../Watch-a947e459.js";import"../../Badge-d7e6ebd7.js";import"../Badge/styles.module.scss";var a=e.forwardRef((function(a,l){var m=a.testId,p=a.children,d=a.variant,n=void 0===d?r.fill:d;return e.createElement("div",{ref:l,"data-testid":m,className:s["panel-list"],"data-analyticsid":t.PanelList},e.Children.map(p,(function(t,a){return p=t,e.isValidElement(p)&&p.type===o?(l=t,m=0===a,e.cloneElement(l,{variant:n,noTopBorder:n===r.line&&!m,className:i(l.props.className,n!==r.line&&s["panel-list__panel"])})):t;var l,m,p})))}));export{a as default};
+import s from"react";import e from"./styles.module.scss";import{A as t}from"../../constants-dbdea596.js";import{b as r,P as o}from"../../Panel-1ce6fe37.js";import{c as i}from"../../index-d1c0552c.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../_tslib-b219470a.js";import"../Panel/styles.module.scss";import"../../Title-01820508.js";import"../Title/styles.module.scss";import"../../Button-78f848e6.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";import"../../ArrowRight-43c97f7a.js";import"../../AlertSignFill-5df5b7c7.js";import"../../Pencil-dd3fe667.js";import"../../Calendar-a9aa98de.js";import"../../Watch-3d5fc351.js";import"../../usePrevious-ae293b10.js";import"../../Badge-eebcb720.js";import"../Badge/styles.module.scss";var a=s.forwardRef((function(a,l){var m=a.testId,p=a.children,d=a.variant,n=void 0===d?r.fill:d;return s.createElement("div",{ref:l,"data-testid":m,className:e["panel-list"],"data-analyticsid":t.PanelList},s.Children.map(p,(function(t,a){return p=t,s.isValidElement(p)&&p.type===o?(l=t,m=0===a,s.cloneElement(l,{variant:n,noTopBorder:n===r.line&&!m,className:i(l.props.className,n!==r.line&&e["panel-list__panel"])})):t;var l,m,p})))}));export{a as default};
 //# sourceMappingURL=index.js.map

package/components/Portal/index.js

@@ -1,2 +1,2 @@
-export{P as default}from"../../index-7f01d36f.js";import"react";import"react-dom";import"../../constants-d84659f5.js";
+export{P as default}from"../../index-28ed5ede.js";import"react";import"react-dom";import"../../constants-dbdea596.js";
 //# sourceMappingURL=index.js.map

package/components/RadioButton/index.js

@@ -1,2 +1,2 @@
-export{R as RadioButton,R as default}from"../../RadioButton-dba5974f.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"../../uuid-11037462.js";import"./styles.module.scss";import"../../constants-d84659f5.js";
+export{R as RadioButton,R as default}from"../../RadioButton-3ce7a88d.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"../../uuid-11037462.js";import"./styles.module.scss";import"../../constants-dbdea596.js";
 //# sourceMappingURL=index.js.map

package/components/Slider/index.js

@@ -1,2 +1,2 @@
-import{_ as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import t,{useState as n,useRef as r,useEffect as a}from"react";import{c as o}from"../../index-d1c0552c.js";import{T as i}from"../../Title-b5e19cfc.js";import c from"./styles.module.scss";import{A as u}from"../../constants-d84659f5.js";import"../Title/styles.module.scss";var s=function(e){return e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1},l=function(e){return m(e)?e.touches[0].pageX:e.pageX},d=function(e){var t=e?e.getBoundingClientRect():void 0;return t?t.right-t.left:0},m=function(e){return("touchcancel"===e.type||"touchend"===e.type||"touchenter"===e.type||"touchleave"===e.type||"touchmove"===e.type||"touchstart"===e.type)&&!(0===e.touches.length)},f=function(e,t,n){var r=e-e%t,a=Math.floor(n/t)*t;e>a&&(e>a+(n-a)/2&&(r=n));return Math.round(r)},v=t.forwardRef((function(m,v){var p=m.title,h=m.labelLeft,_=m.labelRight,g=m.disabled,E=void 0!==g&&g,y=m.step,b=void 0===y?1:y,w=m.onChange,k=m.testId,L=n(50),N=e(L,2),x=N[0],A=N[1],D=n(!1),M=e(D,2),R=M[0],j=M[1],T=n(0),B=e(T,2),C=B[0],P=B[1],I=n(0),S=e(I,2),X=S[0],H=S[1],K=n(0),U=e(K,2),q=U[0],z=U[1],F=n(0),G=e(F,2),J=G[0],O=G[1],Q=v||r(null),V=r(null),W=100,Y=function(e){re(e)},Z=function(e){ne(e)},$=function(e){re(e)},ee=function(e){ne(e)};a((function(){var e=d(Q.current),t=d(V.current);z(function(e,t,n,r,a){return(t-n)/(a-r)*e}(x,e,t,0,W)),P(e),H(t)}),[]),a((function(){R&&(function(e,t){document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)}(Y,Z),function(e,t){document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)}($,ee))}),[R]),a((function(){!E&&w&&w(x)}),[x]);var te=function(e){var t;if(!E){var n=d(Q.current),r=d(V.current),a=l(e);!function(e,t,n,r){var a=t?t.getBoundingClientRect():void 0,o=a?a.left:0;r(o?e-(o+n/2):0)}(a,V.current,r,ae),j(!0),O(a),P(n),H(r),null===(t=V.current)||void 0===t||t.focus(),s(e)}},ne=function(e){E||(j(!1),function(e,t){document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)}(Y,Z),function(e,t){document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)}($,ee),s(e))},re=function(e){if(!E&&R){var t=l(e);ae(t-J),s(e)}},ae=function(e){if(0!==e){var t=function(e,t,n,r){var a=r+e;return a<0&&(a=0),a>t-n&&(a=t-n),a}(e,C,X,q);z(t),O(t+e),A(function(e,t,n,r,a,o){var i=(t-n)/(o-a),c=Math.round(e/i);return f(c,r,o)}(t,C,X,b,0,W))}};return t.createElement("div",{className:c.slider,"data-testid":k,"data-analyticsid":u.Slider},p&&t.createElement(i,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},p),t.createElement("div",{ref:Q,className:o(c["slider__track-wrapper"],E?c["slider__track-wrapper--disabled"]:""),onMouseDown:te,onTouchStart:te,"data-testid":"tracker"},t.createElement("div",{className:o(c.slider__track,E?c["slider__track--disabled"]:"")}),t.createElement("div",{ref:V,className:o(c.slider__trigger,E?c["slider__trigger--disabled"]:""),style:{left:"".concat(q,"px")},onKeyDown:function(e){if(!E){var t=(C-X)/100;"ArrowRight"!==e.key&&"ArrowDown"!==e.key||ae(b*t),"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||ae(-b*t)}},role:"slider","aria-valuenow":x,"aria-valuemin":0,"aria-valuemax":W,"aria-label":"".concat(p?p+" ":"").concat(h?h+" ":"").concat(_?_+" ":""),tabIndex:E?-1:0},t.createElement("div",{className:o(c["slider__trigger-inner"],E?c["slider__trigger-inner--disabled"]:"")}))),(h||_)&&t.createElement("span",{className:c.slider__options},t.createElement("p",{className:c.slider__text,"aria-hidden":!0},h),t.createElement("p",{className:c.slider__text,"aria-hidden":!0},_)))}));export{v as Slider,v as default};
+import{_ as e}from"../../_rollupPluginBabelHelpers-0f007973.js";import t,{useState as n,useRef as r,useEffect as a}from"react";import{c as o}from"../../index-d1c0552c.js";import{T as i}from"../../Title-01820508.js";import c from"./styles.module.scss";import{A as u}from"../../constants-dbdea596.js";import"../Title/styles.module.scss";var s=function(e){return e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),!1},l=function(e){return m(e)?e.touches[0].pageX:e.pageX},d=function(e){var t=e?e.getBoundingClientRect():void 0;return t?t.right-t.left:0},m=function(e){return("touchcancel"===e.type||"touchend"===e.type||"touchenter"===e.type||"touchleave"===e.type||"touchmove"===e.type||"touchstart"===e.type)&&!(0===e.touches.length)},f=function(e,t,n){var r=e-e%t,a=Math.floor(n/t)*t;e>a&&(e>a+(n-a)/2&&(r=n));return Math.round(r)},v=t.forwardRef((function(m,v){var p=m.title,h=m.labelLeft,_=m.labelRight,g=m.disabled,E=void 0!==g&&g,y=m.step,b=void 0===y?1:y,w=m.onChange,k=m.testId,L=n(50),N=e(L,2),x=N[0],A=N[1],D=n(!1),M=e(D,2),R=M[0],j=M[1],T=n(0),B=e(T,2),C=B[0],P=B[1],I=n(0),S=e(I,2),X=S[0],H=S[1],K=n(0),U=e(K,2),q=U[0],z=U[1],F=n(0),G=e(F,2),J=G[0],O=G[1],Q=v||r(null),V=r(null),W=100,Y=function(e){re(e)},Z=function(e){ne(e)},$=function(e){re(e)},ee=function(e){ne(e)};a((function(){var e=d(Q.current),t=d(V.current);z(function(e,t,n,r,a){return(t-n)/(a-r)*e}(x,e,t,0,W)),P(e),H(t)}),[]),a((function(){R&&(function(e,t){document.addEventListener("mousemove",e,!1),document.addEventListener("mouseup",t,!1)}(Y,Z),function(e,t){document.addEventListener("touchmove",e,!1),document.addEventListener("touchend",t,!1)}($,ee))}),[R]),a((function(){!E&&w&&w(x)}),[x]);var te=function(e){var t;if(!E){var n=d(Q.current),r=d(V.current),a=l(e);!function(e,t,n,r){var a=t?t.getBoundingClientRect():void 0,o=a?a.left:0;r(o?e-(o+n/2):0)}(a,V.current,r,ae),j(!0),O(a),P(n),H(r),null===(t=V.current)||void 0===t||t.focus(),s(e)}},ne=function(e){E||(j(!1),function(e,t){document.removeEventListener("mousemove",e,!1),document.removeEventListener("mouseup",t,!1)}(Y,Z),function(e,t){document.removeEventListener("touchmove",e,!1),document.removeEventListener("touchend",t,!1)}($,ee),s(e))},re=function(e){if(!E&&R){var t=l(e);ae(t-J),s(e)}},ae=function(e){if(0!==e){var t=function(e,t,n,r){var a=r+e;return a<0&&(a=0),a>t-n&&(a=t-n),a}(e,C,X,q);z(t),O(t+e),A(function(e,t,n,r,a,o){var i=(t-n)/(o-a),c=Math.round(e/i);return f(c,r,o)}(t,C,X,b,0,W))}};return t.createElement("div",{className:c.slider,"data-testid":k,"data-analyticsid":u.Slider},p&&t.createElement(i,{htmlMarkup:"h3",margin:1.5,appearance:"title3"},p),t.createElement("div",{ref:Q,className:o(c["slider__track-wrapper"],E?c["slider__track-wrapper--disabled"]:""),onMouseDown:te,onTouchStart:te,"data-testid":"tracker"},t.createElement("div",{className:o(c.slider__track,E?c["slider__track--disabled"]:"")}),t.createElement("div",{ref:V,className:o(c.slider__trigger,E?c["slider__trigger--disabled"]:""),style:{left:"".concat(q,"px")},onKeyDown:function(e){if(!E){var t=(C-X)/100;"ArrowRight"!==e.key&&"ArrowDown"!==e.key||ae(b*t),"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||ae(-b*t)}},role:"slider","aria-valuenow":x,"aria-valuemin":0,"aria-valuemax":W,"aria-label":"".concat(p?p+" ":"").concat(h?h+" ":"").concat(_?_+" ":""),tabIndex:E?-1:0},t.createElement("div",{className:o(c["slider__trigger-inner"],E?c["slider__trigger-inner--disabled"]:"")}))),(h||_)&&t.createElement("span",{className:c.slider__options},t.createElement("p",{className:c.slider__text,"aria-hidden":!0},h),t.createElement("p",{className:c.slider__text,"aria-hidden":!0},_)))}));export{v as Slider,v as default};
 //# sourceMappingURL=index.js.map

package/components/Spacer/index.js

@@ -1,2 +1,2 @@
-import{d as s}from"../../_rollupPluginBabelHelpers-0f007973.js";import a from"react";import{c as r}from"../../index-d1c0552c.js";import e from"./styles.module.scss";import{A as c}from"../../constants-d84659f5.js";var l=a.forwardRef((function(l,p){var t,x=l.size,o=void 0===x?"s":x,m=l.className,d=l.testId,i=r(e.spacer,(s(t={},e["spacer--4xs"],"4xs"===o),s(t,e["spacer--3xs"],"3xs"===o),s(t,e["spacer--2xs"],"2xs"===o),s(t,e["spacer--xs"],"xs"===o),s(t,e["spacer--s"],"s"===o),s(t,e["spacer--m"],"m"===o),s(t,e["spacer--l"],"l"===o),s(t,e["spacer--xl"],"xl"===o),s(t,e["spacer--2xl"],"2xl"===o),s(t,e["spacer--3xl"],"3xl"===o),s(t,e["spacer--4xl"],"4xl"===o),s(t,e["spacer--5xl"],"5xl"===o),s(t,e["spacer--6xl"],"6xl"===o),t),m);return a.createElement("span",{className:i,ref:p,"data-testid":d,"data-analyticsid":c.Spacer})}));export{l as default};
+import{d as s}from"../../_rollupPluginBabelHelpers-0f007973.js";import a from"react";import{c as e}from"../../index-d1c0552c.js";import r from"./styles.module.scss";import{A as c}from"../../constants-dbdea596.js";var l=a.forwardRef((function(l,p){var t,x=l.size,o=void 0===x?"s":x,m=l.className,d=l.testId,i=e(r.spacer,(s(t={},r["spacer--4xs"],"4xs"===o),s(t,r["spacer--3xs"],"3xs"===o),s(t,r["spacer--2xs"],"2xs"===o),s(t,r["spacer--xs"],"xs"===o),s(t,r["spacer--s"],"s"===o),s(t,r["spacer--m"],"m"===o),s(t,r["spacer--l"],"l"===o),s(t,r["spacer--xl"],"xl"===o),s(t,r["spacer--2xl"],"2xl"===o),s(t,r["spacer--3xl"],"3xl"===o),s(t,r["spacer--4xl"],"4xl"===o),s(t,r["spacer--5xl"],"5xl"===o),s(t,r["spacer--6xl"],"6xl"===o),t),m);return a.createElement("span",{className:i,ref:p,"data-testid":d,"data-analyticsid":c.Spacer})}));export{l as default};
 //# sourceMappingURL=index.js.map

package/components/StatusDot/index.js

@@ -1,2 +1,2 @@
-import{d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import a from"react";import{c as e}from"../../index-d1c0552c.js";import s from"./styles.module.scss";import{I as r,A as o}from"../../constants-d84659f5.js";import{I as c}from"../../Icon-877aeed0.js";import{U as n}from"../../Undo-7021257e.js";import{g as i}from"../../color-e7d082c1.js";import{G as l}from"../../Group-4d979be0.js";import{N as m}from"../../NoAccess-c1a3f055.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../useBreakpoint-a74f5af5.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../index-d1c9177a.js";var d;!function(t){t.info="info",t.warning="warning",t.alert="alert",t.cancelled="cancelled",t.active="active",t.transparent="transparent",t.recurring="recurring",t.group="group",t.noaccess="noaccess"}(d||(d={}));var p=a.forwardRef((function(p,u){var f=p.variant,g=void 0===f?d.info:f,j=p.text,_=p.className,v=g===d.recurring||g===d.group||g===d.noaccess,b=g===d.cancelled,E=e(s.statusdot,t({},s["statusdot--cancelled"],b),_),I=e(s.statusdot__dot,[v?s["statusdot__dot--icon"]:s["statusdot__dot--".concat(g)]]),N=e(s.statusdot__label,t({},s["statusdot__label--icon"],v)),X=null;return g===d.recurring?X=a.createElement(c,{size:r.XXSmall,svgIcon:n}):g===d.group?X=a.createElement(c,{size:r.XXSmall,svgIcon:l}):g===d.noaccess&&(X=a.createElement(c,{size:r.XXSmall,svgIcon:m,color:i("cherry",600)})),a.createElement("div",{className:E,"data-analyticsid":o.StatusDot},a.createElement("span",{className:I},X),a.createElement("span",{className:N},j))}));export{d as StatusDotVariant,p as default};
+import{d as t}from"../../_rollupPluginBabelHelpers-0f007973.js";import a from"react";import{c as e}from"../../index-d1c0552c.js";import s from"./styles.module.scss";import{I as r,A as o}from"../../constants-dbdea596.js";import{I as c}from"../../Icon-d69d65b3.js";import{U as n}from"../../Undo-cc42e7d0.js";import{g as i}from"../../color-e7d082c1.js";import{G as l}from"../../Group-71b8ae99.js";import{N as m}from"../../NoAccess-53a59f7d.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../useBreakpoint-a74f5af5.js";import"../../_tslib-b219470a.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../index-d1c9177a.js";var d;!function(t){t.info="info",t.warning="warning",t.alert="alert",t.cancelled="cancelled",t.active="active",t.transparent="transparent",t.recurring="recurring",t.group="group",t.noaccess="noaccess"}(d||(d={}));var p=a.forwardRef((function(p,u){var f=p.variant,g=void 0===f?d.info:f,j=p.text,_=p.className,v=g===d.recurring||g===d.group||g===d.noaccess,b=g===d.cancelled,E=e(s.statusdot,t({},s["statusdot--cancelled"],b),_),I=e(s.statusdot__dot,[v?s["statusdot__dot--icon"]:s["statusdot__dot--".concat(g)]]),N=e(s.statusdot__label,t({},s["statusdot__label--icon"],v)),X=null;return g===d.recurring?X=a.createElement(c,{size:r.XXSmall,svgIcon:n}):g===d.group?X=a.createElement(c,{size:r.XXSmall,svgIcon:l}):g===d.noaccess&&(X=a.createElement(c,{size:r.XXSmall,svgIcon:m,color:i("cherry",600)})),a.createElement("div",{className:E,"data-analyticsid":o.StatusDot},a.createElement("span",{className:I},X),a.createElement("span",{className:N},j))}));export{d as StatusDotVariant,p as default};
 //# sourceMappingURL=index.js.map

package/components/Table/Table.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare enum SmallViewportVariant {
+    horizontalscroll = "horizontalscroll",
+    block = "block"
+}
+export interface Props {
+    /** Unique ID */
+    id?: string;
+    /** Id used for testing */
+    testId?: string;
+    /** Type of table view om small devices */
+    smallViewportVariant?: SmallViewportVariant;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table. Use TableHead and TableBody */
+    children: React.ReactNode;
+}
+export declare const Table: ({ id, testId, className, children, smallViewportVariant }: Props) => JSX.Element;
+export default Table;
+//# sourceMappingURL=Table.d.ts.map

package/components/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,oBAAoB;IAC9B,gBAAgB,qBAAqB;IACrC,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,gBAAgB;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAC5C,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK,8DAA0G,KAAK,gBAYhI,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/components/Table/TableBody.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface Props {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table body. Use TableRows */
+    children?: React.ReactNode;
+}
+export declare const TableBody: ({ className, children }: Props) => JSX.Element;
+export default TableBody;
+//# sourceMappingURL=TableBody.d.ts.map

package/components/Table/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,4BAA+C,KAAK,gBAEzE,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableBody.js

@@ -0,0 +1,2 @@
+export{T as TableBody,T as default}from"../../TableBody-eac2c23b.js";import"react";
+//# sourceMappingURL=TableBody.js.map

package/components/Table/TableBody.js.map

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

package/components/Table/TableCell.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare enum TextAlign {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export interface Props {
+    /** Label used for small viewport block */
+    dataLabel: string;
+    /**  text align in cell */
+    textAlign?: TextAlign;
+    /**  nowrap for white space */
+    nowrap?: boolean;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the table cell */
+    children: React.ReactNode;
+}
+export declare const TableCell: ({ nowrap, textAlign, dataLabel, children, className }: Props) => JSX.Element;
+export default TableCell;
+//# sourceMappingURL=TableCell.d.ts.map

package/components/Table/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,0DAAsG,KAAK,gBAchI,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableCell.js

@@ -0,0 +1,2 @@
+export{T as TableCell,a as TextAlign,T as default}from"../../TableCell-cc644eb5.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";
+//# sourceMappingURL=TableCell.js.map

package/components/Table/TableCell.js.map

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

package/components/Table/TableExpandedRow.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface Props {
+    /** Row is expanded. */
+    expanded: boolean;
+    /** Number of columns in table. */
+    numberOfColumns: number;
+    /** Text for hide button. */
+    hideDetailsText: string;
+    /** When hide button inside expanded row is clicked. */
+    toggleClick: () => void;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the expanded row.  */
+    children: React.ReactNode;
+}
+export declare const TableExpandedRow: ({ numberOfColumns, expanded, hideDetailsText, toggleClick, children, className, }: Props) => JSX.Element;
+export default TableExpandedRow;
+//# sourceMappingURL=TableExpandedRow.d.ts.map

package/components/Table/TableExpandedRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpandedRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableExpandedRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,WAAW,KAAK;IACpB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,4BAA4B;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,sFAO1B,KAAK,gBA8BP,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/Table/TableExpandedRow.js

@@ -0,0 +1,2 @@
+export{T as TableExpandedRow,T as default}from"../../TableExpandedRow-44b09912.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";
+//# sourceMappingURL=TableExpandedRow.js.map

package/components/Table/TableExpandedRow.js.map

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

package/components/Table/TableExpanderCell.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface Props {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Row is expanded. */
+    expanded: boolean;
+    /** Id for expanded row. */
+    expandableRowId: string;
+    /** Text for hide button used for aria label. */
+    hideDetailsText: string;
+    /** Text for show button used for aria label. */
+    showDetailsText: string;
+}
+export declare const TableExpanderCell: ({ expandableRowId, hideDetailsText, showDetailsText, expanded, className, }: Props) => JSX.Element;
+export default TableExpanderCell;
+//# sourceMappingURL=TableExpanderCell.d.ts.map

package/components/Table/TableExpanderCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExpanderCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableExpanderCell.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,KAAK;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,iBAAiB,gFAM3B,KAAK,gBAgBP,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/Table/TableExpanderCell.js

@@ -0,0 +1,2 @@
+export{T as TableExpanderCell,T as default}from"../../TableExpanderCell-015d3db2.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"../../uuid-11037462.js";import"../../Button-78f848e6.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronDown-2b3daace.js";import"../../ChevronUp-dfafe27b.js";
+//# sourceMappingURL=TableExpanderCell.js.map

package/components/Table/TableExpanderCell.js.map

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

package/components/Table/TableHead.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare enum HeaderCategory {
+    normal = "normal",
+    transparent = "transparent",
+    sortable = "sortable"
+}
+export interface Props {
+    /** Header category for styling */
+    category: HeaderCategory;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the thead. Add table rows  */
+    children: React.ReactNode;
+}
+export declare const TableHead: ({ category, className, children }: Props) => JSX.Element;
+export default TableHead;
+//# sourceMappingURL=TableHead.d.ts.map

package/components/Table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHead.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,cAAc;IACxB,MAAM,WAAW;IACjB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,kCAAkC;IAClC,QAAQ,EAAE,cAAc,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,sCAAyD,KAAK,gBAYnF,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/Table/TableHead.js

@@ -0,0 +1,2 @@
+export{H as HeaderCategory,T as TableHead,T as default}from"../../TableHead-5ed58948.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";
+//# sourceMappingURL=TableHead.js.map

package/components/Table/TableHead.js.map

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

package/components/Table/TableHeadCell.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare enum SortDirection {
+    asc = "asc",
+    desc = "desc"
+}
+export interface Props {
+    /** Sets if column for head cell should be sortable*/
+    sortable?: boolean;
+    /** Sort direction  */
+    sortDir?: SortDirection;
+    /** Function that is called when clicked */
+    onClick?: () => void;
+    /** Sets tabIndex on th element */
+    tabIndex?: 0 | -1;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the content of the td element.  */
+    children?: React.ReactNode;
+}
+export declare const TableHeadCell: ({ sortable, onClick, className, children, sortDir, tabIndex }: Props) => JSX.Element;
+export default TableHeadCell;
+//# sourceMappingURL=TableHeadCell.d.ts.map

package/components/Table/TableHeadCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeadCell.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableHeadCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,oBAAY,aAAa;IACvB,GAAG,QAAQ;IACX,IAAI,SAAS;CACd;AAED,MAAM,WAAW,KAAK;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,kEAAyF,KAAK,gBAqCvH,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/components/Table/TableHeadCell.js

@@ -0,0 +1,2 @@
+export{S as SortDirection,T as TableHeadCell,T as default}from"../../TableHeadCell-84651910.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Icon-d69d65b3.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../ArrowUp-e7787d9c.js";import"../../ArrowDown-88b2c27a.js";
+//# sourceMappingURL=TableHeadCell.js.map

package/components/Table/TableHeadCell.js.map

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

package/components/Table/TableRow.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface Props {
+    /** Sets if expanded row can be expanded */
+    expandable?: boolean;
+    /** Sets if expanded row is expanded */
+    expanded?: boolean;
+    /** When hide/show button for expanded row is clicked. */
+    onClick?: () => void;
+    /** Text for expanded row hide button. */
+    hideDetailsText?: string;
+    /** Text for expanded row show button. */
+    showDetailsText?: string;
+    /** Key attribute for row */
+    key?: string;
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets the cells of the table row element.  */
+    children?: React.ReactNode;
+}
+export declare const TableRow: ({ key, hideDetailsText, showDetailsText, expandable, expanded, onClick, className, children, }: Props) => JSX.Element;
+export default TableRow;
+//# sourceMappingURL=TableRow.d.ts.map

package/components/Table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,KAAK;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,mGASlB,KAAK,gBA0CP,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Table/TableRow.js

@@ -0,0 +1,2 @@
+export{T as TableRow,T as default}from"../../TableRow-19db3001.js";import"../../_rollupPluginBabelHelpers-0f007973.js";import"react";import"../../index-d1c0552c.js";import"./styles.module.scss";import"../../Button-78f848e6.js";import"../../_tslib-b219470a.js";import"../../constants-dbdea596.js";import"../../color-e7d082c1.js";import"../../index-d1c9177a.js";import"../../palette-f206f488.js";import"../../grid-c105cad1.js";import"../../Icon-d69d65b3.js";import"../../useUuid-3b1e73f2.js";import"../../uuid-11037462.js";import"../../Loader-06293a27.js";import"../Loader/styles.module.scss";import"../../useHover-18479690.js";import"../../useBreakpoint-a74f5af5.js";import"../Button/styles.module.scss";import"../../ChevronUp-dfafe27b.js";import"../../ChevronDown-2b3daace.js";
+//# sourceMappingURL=TableRow.js.map

package/components/Table/TableRow.js.map

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

package/components/Table/collapseTwoCol.scss

@@ -0,0 +1,144 @@
+.table {
+  &--collapse2col {
+    @media (max-width: map-get($grid-max-breakpoints, sm)) {
+      .table__cell-expander {
+        display: none;
+      }
+
+      .table__head {
+        display: none;
+      }
+
+      display: block;
+      clear: both;
+
+      tbody,
+      tr,
+      th,
+      td {
+        display: block;
+      }
+
+      tr {
+        clear: both;
+      }
+
+      select {
+        max-width: 100%;
+      }
+
+      th:focus {
+        outline: none;
+        background-color: $blueberry800;
+        text-decoration: underline;
+      }
+      td {
+        position: relative;
+        padding-left: 40%;
+        padding-right: 0;
+        padding-top: 0.75rem;
+        padding-bottom: 0.75rem;
+        float: left;
+        clear: both;
+        width: 100%;
+
+        &:not(.expandable-container) {
+          font-weight: 400;
+        }
+
+        /* Get data from the td-tag attribute "data-label"   and use this to populate :before content */
+        &::before {
+          content: attr(data-label);
+          position: relative;
+          top: 0;
+          left: 0;
+          width: 60%;
+          padding-right: $spacer;
+          white-space: normal;
+          display: block;
+          float: left;
+          word-wrap: break-word;
+          margin-left: -67%;
+          padding-left: 0.75rem;
+          font-weight: 400;
+        }
+      }
+
+      .table__expander-cell-mobile {
+        padding-left: 0.75rem;
+      }
+
+      .table__expander-button-mobile {
+        font-weight: 100;
+        padding-right: 1rem;
+        &:hover {
+          background-color: $blueberry50;
+        }
+        &--expanded {
+          background-color: $blueberry50;
+        }
+      }
+
+      .table__expanded-row td {
+        text-align: left;
+        padding: 0.75rem;
+      }
+
+      .table__expanded-row {
+        display: none;
+        &--expanded {
+          display: block;
+        }
+      }
+
+      .table__cell {
+        border-top: 0;
+        border-bottom: 0;
+
+        outline: 0;
+
+        &--center {
+          text-align: left;
+        }
+        &--right {
+          text-align: left;
+        }
+      }
+      .table__cell:first-child {
+        border-collapse: collapse;
+        border-top: 1px solid $neutral500;
+      }
+      .table__expanded-row {
+        .table__cell:first-child {
+          border-top: 0;
+        }
+      }
+      .table__row--expandable {
+        .table__cell:nth-child(2) {
+          border-collapse: collapse;
+          border-top: 1px solid $neutral500;
+        }
+      }
+
+      tr:last-child .table__cell:last-child {
+        border-bottom: 1px solid $neutral500;
+      }
+
+      .table__expander-cell-mobile {
+        border-bottom: 1px solid $neutral500;
+        &--expanded {
+          border-bottom: 0;
+        }
+      }
+
+      .table__row--expandable {
+        &:focus-within {
+          outline: none;
+        }
+      }
+      .table__expanded-row-button {
+        display: none;
+      }
+    }
+  }
+}