@sats-group/ui-lib 84.0.0 → 85.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "84.0.0",
+  "version": "85.0.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/modal/modal.js

@@ -1,2 +1,2 @@
-"use client";var C=Object.defineProperty,B=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var f=(s,l,i)=>l in s?C(s,l,{enumerable:!0,configurable:!0,writable:!0,value:i}):s[l]=i,v=(s,l)=>{for(var i in l||(l={}))P.call(l,i)&&f(s,i,l[i]);if(c)for(var i of c(l))E.call(l,i)&&f(s,i,l[i]);return s},N=(s,l)=>B(s,I(l));import u from"classnames";import*as o from"react";import*as w from"react-dom";import e from"../button";import A from"../hooks/use-escape";import{useIsMounted as D}from"../hooks/use-is-mounted";import h from"../icons/18/close";import r from"../text";import{ActionTypes as y,backgrounds as T}from"./modal.types";import H from"./tab-trapper";import L from"../link-button";const k=({ariaLabel:s,background:l=T.primary,children:i,closeLabel:_,explanation:d,id:M,onClose:n=()=>{},title:t,actions:m,onClick:g=()=>{}})=>{const p=o.useRef(null),x=D();if(A(n),!x)return null;const b=a=>{p.current&&p.current===a.target&&n()};return w.createPortal(o.createElement("div",{"aria-label":s,className:"modal",id:M,onClick:b,ref:p,role:"dialog"},o.createElement("div",{className:u("modal__content",{[`modal__content--${l}`]:l})},o.createElement(H,{isActive:!0,className:"modal__content-inner"},o.createElement("div",{className:u("modal__close-action",{"modal__close-action--always-shown":m&&m.length})},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:n,size:e.sizes.small,text:_,variant:e.variants.secondary,iconOnly:!0})),t||d?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},t?o.createElement(r,{className:"modal__title",size:r.sizes.headline2,theme:r.themes.emphasis},t):null,d?o.createElement("div",{className:u("modal__explanation",{[`modal__explanation--${l}`]:l})},o.createElement(r,{size:r.sizes.small},d)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,i)),m&&m.length?o.createElement("div",{className:"modal__actions"},m.map(a=>a.type===y.LinkButton?o.createElement(L,v({},a.action)):a.type===y.Button?o.createElement(e,N(v({},a.action),{onClick:z=>g(a.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(e,{leadingIcon:o.createElement(h,null),onClick:n,text:_,variant:e.variants.secondary}))))),document.body)};k.backgrounds=T;var S=k;export{S as default};
+"use client";var T=Object.defineProperty,b=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var u=(l,a,s)=>a in l?T(l,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):l[a]=s,t=(l,a)=>{for(var s in a||(a={}))B.call(a,s)&&u(l,s,a[s]);if(_)for(var s of _(a))C.call(a,s)&&u(l,s,a[s]);return l},y=(l,a)=>b(l,k(a));import p from"classnames";import*as o from"react";import*as P from"react-dom";import i from"../button";import c from"../icons/18/close";import e from"../text";import{ActionTypes as f,backgrounds as h}from"./modal.types";import I from"../link-button";const N=({actions:l,ariaLabel:a,background:s=h.primary,children:g,closeLabel:v,explanation:d,id:r,onClick:x=()=>{},title:n})=>P.createPortal(o.createElement("dialog",{"aria-label":a,className:p("modal",{[`modal--${s}`]:s}),id:r,popover:"auto"},o.createElement("div",{className:p("modal__close-action",{"modal__close-action--always-shown":l&&l.length})},o.createElement(i,{leadingIcon:o.createElement(c,null),popoverTarget:r,size:i.sizes.small,text:v,variant:i.variants.secondary,iconOnly:!0})),n||d?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},n?o.createElement(e,{className:"modal__title",size:e.sizes.headline2,theme:e.themes.emphasis},n):null,d?o.createElement("div",{className:p("modal__explanation",{[`modal__explanation--${s}`]:s})},o.createElement(e,{size:e.sizes.small},d)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,g)),l&&l.length?o.createElement("div",{className:"modal__actions"},l.map(m=>m.type===f.LinkButton?o.createElement(I,t({},m.action)):m.type===f.Button?o.createElement(i,y(t({},m.action),{onClick:z=>x(m.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(i,{leadingIcon:o.createElement(c,null),popoverTarget:r,text:v,variant:i.variants.secondary}))),document.body);N.backgrounds=h;var L=N;export{L as default};
 //# sourceMappingURL=modal.js.map

package/react/modal/modal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/modal/modal.tsx"],
-  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport useEscape from '../hooks/use-escape';\nimport { useIsMounted } from '../hooks/use-is-mounted';\nimport Close from '../icons/18/close';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\nimport TabTrapper from './tab-trapper';\nimport LinkButton from '../link-button';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n  backgrounds: typeof backgrounds;\n} = ({\n  ariaLabel,\n  background = backgrounds.primary,\n  children,\n  closeLabel,\n  explanation,\n  id,\n  onClose = () => {},\n  title,\n  actions,\n  onClick = () => {},\n}) => {\n  const modal = React.useRef<HTMLDivElement>(null);\n  const isMounted = useIsMounted();\n  useEscape(onClose);\n\n  if (!isMounted) {\n    return null;\n  }\n\n  const handleModalClick: React.MouseEventHandler = e => {\n    if (modal.current && modal.current === e.target) {\n      onClose();\n    }\n  };\n\n  return ReactDOM.createPortal(\n    <div\n      aria-label={ariaLabel}\n      className=\"modal\"\n      id={id}\n      onClick={handleModalClick}\n      ref={modal}\n      role=\"dialog\"\n    >\n      <div\n        className={classNames('modal__content', {\n          [`modal__content--${background}`]: background,\n        })}\n      >\n        <TabTrapper isActive={true} className=\"modal__content-inner\">\n          <div\n            className={classNames('modal__close-action', {\n              'modal__close-action--always-shown': actions && actions.length,\n            })}\n          >\n            <Button\n              leadingIcon={<Close />}\n              onClick={onClose}\n              size={Button.sizes.small}\n              text={closeLabel}\n              variant={Button.variants.secondary}\n              iconOnly\n            />\n          </div>\n          {title || explanation ? (\n            <div className=\"modal__nav\">\n              <div className=\"modal__texts\">\n                {title ? (\n                  <Text\n                    className=\"modal__title\"\n                    size={Text.sizes.headline2}\n                    theme={Text.themes.emphasis}\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {explanation ? (\n                  <div\n                    className={classNames('modal__explanation', {\n                      [`modal__explanation--${background}`]: background,\n                    })}\n                  >\n                    <Text size={Text.sizes.small}>{explanation}</Text>\n                  </div>\n                ) : null}\n              </div>\n            </div>\n          ) : null}\n          <div className=\"modal__children\">\n            <div>{children}</div>\n          </div>\n          {actions && actions.length ? (\n            <div className=\"modal__actions\">\n              {actions.map(action =>\n                action.type === ActionTypes.LinkButton ? (\n                  <LinkButton {...action.action} />\n                ) : action.type === ActionTypes.Button ? (\n                  <Button\n                    {...action.action}\n                    onClick={e => onClick(action.buttonId, e)}\n                  />\n                ) : null,\n              )}\n            </div>\n          ) : (\n            <div className=\"modal__close-action-mobile\">\n              <Button\n                leadingIcon={<Close />}\n                onClick={onClose}\n                text={closeLabel}\n                variant={Button.variants.secondary}\n              />\n            </div>\n          )}\n        </TabTrapper>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
-  "mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAe,sBACtB,OAAS,gBAAAC,MAAoB,0BAC7B,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAC9D,OAAOC,MAAgB,gBACvB,OAAOC,MAAgB,iBAEvB,MAAMC,EAEF,CAAC,CACH,UAAAC,EACA,WAAAC,EAAaL,EAAY,QACzB,SAAAM,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,EACA,QAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,CACnB,IAAM,CACJ,MAAMC,EAAQtB,EAAM,OAAuB,IAAI,EACzCuB,EAAYnB,EAAa,EAG/B,GAFAD,EAAUe,CAAO,EAEb,CAACK,EACH,OAAO,KAGT,MAAMC,EAA4CC,GAAK,CACjDH,EAAM,SAAWA,EAAM,UAAYG,EAAE,QACvCP,EAAQ,CAEZ,EAEA,OAAOjB,EAAS,aACdD,EAAA,cAAC,OACC,aAAYY,EACZ,UAAU,QACV,GAAIK,EACJ,QAASO,EACT,IAAKF,EACL,KAAK,UAELtB,EAAA,cAAC,OACC,UAAWD,EAAW,iBAAkB,CACtC,CAAC,mBAAmBc,CAAU,EAAE,EAAGA,CACrC,CAAC,GAEDb,EAAA,cAACS,EAAA,CAAW,SAAU,GAAM,UAAU,wBACpCT,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCqB,GAAWA,EAAQ,MAC1D,CAAC,GAEDpB,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMhB,EAAO,MAAM,MACnB,KAAMa,EACN,QAASb,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCiB,GAASH,EACRhB,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZmB,EACCnB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHH,EACChB,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBc,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDb,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQU,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJhB,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKc,CAAS,CACjB,EACCM,GAAWA,EAAQ,OAClBpB,EAAA,cAAC,OAAI,UAAU,kBACZoB,EAAQ,IAAIM,GACXA,EAAO,OAASnB,EAAY,WAC1BP,EAAA,cAACU,EAAAiB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASnB,EAAY,OAC9BP,EAAA,cAACE,EAAA0B,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASD,GAAKJ,EAAQK,EAAO,SAAUD,CAAC,GAC1C,EACE,IACN,CACF,EAEAzB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACK,EAAA,IAAM,EACpB,QAASa,EACT,KAAMH,EACN,QAASb,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,CACF,EACA,SAAS,IACX,CACF,EAEAS,EAAM,YAAcH,EAEpB,IAAOqB,EAAQlB",
-  "names": ["classNames", "React", "ReactDOM", "Button", "useEscape", "useIsMounted", "Close", "Text", "ActionTypes", "backgrounds", "TabTrapper", "LinkButton", "Modal", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClose", "title", "actions", "onClick", "modal", "isMounted", "handleModalClick", "e", "action", "__spreadValues", "__spreadProps", "modal_default"]
+  "sourcesContent": ["'use client';\n\nimport classNames from 'classnames';\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\n\nimport Button from '../button';\nimport Close from '../icons/18/close';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\nimport LinkButton from '../link-button';\n\nconst Modal: React.FC<React.PropsWithChildren<Props>> & {\n  backgrounds: typeof backgrounds;\n} = ({\n  actions,\n  ariaLabel,\n  background = backgrounds.primary,\n  children,\n  closeLabel,\n  explanation,\n  id,\n  onClick = () => {},\n  title,\n}) => {\n  return ReactDOM.createPortal(\n    <dialog\n      aria-label={ariaLabel}\n      className={classNames('modal', {\n        [`modal--${background}`]: background,\n      })}\n      id={id}\n      popover=\"auto\"\n    >\n      <div\n        className={classNames('modal__close-action', {\n          'modal__close-action--always-shown': actions && actions.length,\n        })}\n      >\n        <Button\n          leadingIcon={<Close />}\n          popoverTarget={id}\n          size={Button.sizes.small}\n          text={closeLabel}\n          variant={Button.variants.secondary}\n          iconOnly\n        />\n      </div>\n      {title || explanation ? (\n        <div className=\"modal__nav\">\n          <div className=\"modal__texts\">\n            {title ? (\n              <Text\n                className=\"modal__title\"\n                size={Text.sizes.headline2}\n                theme={Text.themes.emphasis}\n              >\n                {title}\n              </Text>\n            ) : null}\n            {explanation ? (\n              <div\n                className={classNames('modal__explanation', {\n                  [`modal__explanation--${background}`]: background,\n                })}\n              >\n                <Text size={Text.sizes.small}>{explanation}</Text>\n              </div>\n            ) : null}\n          </div>\n        </div>\n      ) : null}\n      <div className=\"modal__children\">\n        <div>{children}</div>\n      </div>\n      {actions && actions.length ? (\n        <div className=\"modal__actions\">\n          {actions.map(action =>\n            action.type === ActionTypes.LinkButton ? (\n              <LinkButton {...action.action} />\n            ) : action.type === ActionTypes.Button ? (\n              <Button\n                {...action.action}\n                onClick={e => onClick(action.buttonId, e)}\n              />\n            ) : null,\n          )}\n        </div>\n      ) : (\n        <div className=\"modal__close-action-mobile\">\n          <Button\n            leadingIcon={<Close />}\n            popoverTarget={id}\n            text={closeLabel}\n            variant={Button.variants.secondary}\n          />\n        </div>\n      )}\n    </dialog>,\n    document.body,\n  );\n};\n\nModal.backgrounds = backgrounds;\n\nexport default Modal;\n"],
+  "mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAC9D,OAAOC,MAAgB,iBAEvB,MAAMC,EAEF,CAAC,CACH,QAAAC,EACA,UAAAC,EACA,WAAAC,EAAaL,EAAY,QACzB,SAAAM,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,CACF,IACShB,EAAS,aACdD,EAAA,cAAC,UACC,aAAYU,EACZ,UAAWX,EAAW,QAAS,CAC7B,CAAC,UAAUY,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,QAERf,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCU,GAAWA,EAAQ,MAC1D,CAAC,GAEDT,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAeY,EACf,KAAMb,EAAO,MAAM,MACnB,KAAMW,EACN,QAASX,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCe,GAASH,EACRd,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZiB,EACCjB,EAAA,cAACI,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBa,CACH,EACE,KACHH,EACCd,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBY,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDX,EAAA,cAACI,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQU,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJd,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKY,CAAS,CACjB,EACCH,GAAWA,EAAQ,OAClBT,EAAA,cAAC,OAAI,UAAU,kBACZS,EAAQ,IAAIS,GACXA,EAAO,OAASb,EAAY,WAC1BL,EAAA,cAACO,EAAAY,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASb,EAAY,OAC9BL,EAAA,cAACE,EAAAkB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKL,EAAQE,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEArB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAeY,EACf,KAAMF,EACN,QAASX,EAAO,SAAS,UAC3B,CACF,CAEJ,EACA,SAAS,IACX,EAGFM,EAAM,YAAcF,EAEpB,IAAOgB,EAAQd",
+  "names": ["classNames", "React", "ReactDOM", "Button", "Close", "Text", "ActionTypes", "backgrounds", "LinkButton", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "title", "action", "__spreadValues", "__spreadProps", "e", "modal_default"]
 }

package/react/modal/modal.scss

@@ -4,35 +4,50 @@
 @use '../../tokens/spacing';
 
 .modal {
-  background: color-mix(
-    in srgb,
-    var(--fixed-background-primary-default)
-    70%, transparent
-  );
-  box-sizing: border-box;
-  display: grid;
-  height: 100vh;
-  height: 100dvh;
-  left: 0;
-  overflow: hidden;
-  overscroll-behavior: contain;
-  place-items: center;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  width: 100dvw;
-  z-index: 900;
-
   @mixin break {
     @media (min-width: 500px) {
       @content;
     }
   }
 
-  $padding: spacing.$m;
+  border: none;
+  display: none;
+  height: 100vh;
+  height: 100svh;
+  overflow: hidden;
+  padding: 0;
+  width: 100vw;
+  padding: 0 spacing.$m;
+
+  &::backdrop {
+    background: color-mix(
+      in srgb,
+      var(--fixed-background-primary-default) 70%,
+      transparent
+    );
+  }
+
+  &:popover-open {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &--primary {
+    background: var(--surface-primary-default);
+  }
+
+  &--secondary {
+    background: var(--surface-secondary-default);
+  }
 
   @include break {
-    padding: $padding;
+    @include elevation.level(24);
+    padding: 0 spacing.$l;
+    border-radius: corner-radius.$s;
+    max-width: 640px;
+    height: min-content;
+    max-height: 95vh;
+    max-height: 95svh;
   }
 
   &__texts {
@@ -57,56 +72,16 @@
     }
   }
 
-  &__content {
-    position: relative;
-    height: 100vh;
-    height: 100dvh;
-    max-height: 100vh;
-    max-height: 100dvh;
-    max-width: 100vw;
-    max-width: 100dvw;
-    width: 100vw;
-    width: 100dvw;
-    overflow: auto;
-
-    &--primary {
-      background: var(--surface-primary-default);
-    }
-
-    &--secondary {
-      background: var(--surface-secondary-default);
-    }
-
-    @include break {
-      @include elevation.level(24);
-      border-radius: corner-radius.$s;
-      height: max-content;
-      max-height: calc(100vh - (spacing.$m * 2));
-      max-height: calc(100dvh - (spacing.$m * 2));
-      max-width: 640px;
-      width: 100%;
-    }
-  }
-
-  &__content-inner {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    @include break {
-      max-height: calc(100vh - (spacing.$m * 2));
-      max-height: calc(100dvh - (spacing.$m * 2));
-    }
-  }
-
   &__actions,
   &__close-action-mobile {
-    background: var(--surface-primary-default);
+    align-items: center;
+    background: transparent;
     border-top: 1px solid var(--ge-border-default);
     display: flex;
-    justify-content: center;
     gap: spacing.$s;
-    padding: spacing.$s spacing.$m;
+    justify-content: center;
+    margin-top: auto;
+    padding: spacing.$s 0;
 
     @include break {
       border-radius: 0 0 corner-radius.$s corner-radius.$s;
@@ -139,11 +114,11 @@
     display: flex;
     gap: spacing.$m;
     justify-content: space-between;
-    padding: spacing.$l spacing.$m 0 spacing.$m;
+    padding-top: spacing.$l;
+    height: min-content;
 
     @include break {
       margin-bottom: 0;
-      padding: spacing.$l spacing.$l 0 spacing.$l;
     }
   }
 
@@ -152,11 +127,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     overscroll-behavior: contain;
-    padding: spacing.$l spacing.$m;
-
-    @include break {
-      margin-bottom: 0;
-      padding: spacing.$l;
-    }
+    padding: spacing.$l 0;
+    margin-bottom: auto;
   }
 }

package/react/modal/modal.types.d.ts

@@ -24,7 +24,6 @@ export type Modal = {
     closeLabel: string;
     explanation?: string;
     id: string;
-    onClose?: () => void;
     title?: string;
     actions?: (LinkAction | ButtonAction)[];
     onClick?: (id: string, arg?: unknown) => void;

package/react/modal/modal.types.js

@@ -1,2 +1,2 @@
-const s={primary:"primary",secondary:"secondary"};var n=(t=>(t.LinkButton="LinkButton",t.Button="Button",t))(n||{});export{n as ActionTypes,s as backgrounds};
+const c={primary:"primary",secondary:"secondary"};var n=(t=>(t.LinkButton="LinkButton",t.Button="Button",t))(n||{});export{n as ActionTypes,c as backgrounds};
 //# sourceMappingURL=modal.types.js.map

package/react/modal/modal.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/modal/modal.types.ts"],
-  "sourcesContent": ["import { Button } from '../button/button.types';\nimport { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\n\nexport const backgrounds = {\n  primary: 'primary',\n  secondary: 'secondary',\n} as const;\n\nexport enum ActionTypes {\n  LinkButton = 'LinkButton',\n  Button = 'Button',\n}\n\ntype LinkAction = {\n  type: ActionTypes.LinkButton;\n  action: LinkButton;\n};\n\ntype ButtonAction = {\n  type: ActionTypes.Button;\n  action: Button;\n  buttonId: string;\n};\n\nexport type Modal = {\n  ariaLabel: string;\n  background?: ObjectValues<typeof backgrounds>;\n  closeLabel: string;\n  explanation?: string;\n  id: string;\n  onClose?: () => void;\n  title?: string;\n  actions?: (LinkAction | ButtonAction)[];\n  onClick?: (id: string, arg?: unknown) => void;\n};\n"],
+  "sourcesContent": ["import { Button } from '../button/button.types';\nimport { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\n\nexport const backgrounds = {\n  primary: 'primary',\n  secondary: 'secondary',\n} as const;\n\nexport enum ActionTypes {\n  LinkButton = 'LinkButton',\n  Button = 'Button',\n}\n\ntype LinkAction = {\n  type: ActionTypes.LinkButton;\n  action: LinkButton;\n};\n\ntype ButtonAction = {\n  type: ActionTypes.Button;\n  action: Button;\n  buttonId: string;\n};\n\nexport type Modal = {\n  ariaLabel: string;\n  background?: ObjectValues<typeof backgrounds>;\n  closeLabel: string;\n  explanation?: string;\n  id: string;\n  title?: string;\n  actions?: (LinkAction | ButtonAction)[];\n  onClick?: (id: string, arg?: unknown) => void;\n};\n"],
   "mappings": "AAIO,MAAMA,EAAc,CACzB,QAAS,UACT,UAAW,WACb,EAEO,IAAKC,OACVA,EAAA,WAAa,aACbA,EAAA,OAAS,SAFCA,OAAA",
   "names": ["backgrounds", "ActionTypes"]
 }