@sats-group/ui-lib 85.3.2 → 85.3.3

package/package.json

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

package/react/modal/modal.d.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { type Modal as Props, backgrounds } from './modal.types';
-declare const RefModal: React.ForwardRefExoticComponent<Props & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLDialogElement>>;
-declare const Modal: typeof RefModal & {
+declare const Modal: React.FC<React.PropsWithChildren<Props>> & {
     backgrounds: typeof backgrounds;
 };
 export default Modal;

package/react/modal/modal.js

@@ -1,2 +1,2 @@
-"use client";var B=Object.defineProperty,I=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var u=(a,e,s)=>e in a?B(a,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[e]=s,n=(a,e)=>{for(var s in e||(e={}))k.call(e,s)&&u(a,s,e[s]);if(_)for(var s of _(e))w.call(e,s)&&u(a,s,e[s]);return a},f=(a,e)=>I(a,P(e));import p from"classnames";import*as o from"react";import*as C from"react-dom";import l from"../button";import c from"../icons/18/close";import O from"../link-button";import A from"./tab-trapper";import m from"../text";import{ActionTypes as y,backgrounds as N}from"./modal.types";const T=o.forwardRef(({actions:a,ariaLabel:e,background:s=N.primary,children:g,closeLabel:v,explanation:r,id:d,onClick:h=()=>{},title:t},M)=>{const[x,b]=o.useState(!1);return o.useEffect(()=>b(!0)),x?C.createPortal(o.createElement("dialog",{"aria-label":e,className:p("modal",{[`modal--${s}`]:s}),id:d,popover:"auto",ref:M},o.createElement(A,{isActive:!0,className:"modal__inner"},o.createElement("div",{className:p("modal__close-action",{"modal__close-action--always-shown":a&&a.length})},o.createElement(l,{leadingIcon:o.createElement(c,null),popoverTarget:d,size:l.sizes.small,text:v,variant:l.variants.secondary,iconOnly:!0})),t||r?o.createElement("div",{className:"modal__nav"},o.createElement("div",{className:"modal__texts"},t?o.createElement(m,{className:"modal__title",size:m.sizes.headline2,theme:m.themes.emphasis},t):null,r?o.createElement("div",{className:p("modal__explanation",{[`modal__explanation--${s}`]:s})},o.createElement(m,{size:m.sizes.small},r)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,g)),a&&a.length?o.createElement("div",{className:"modal__actions"},a.map(i=>i.type===y.LinkButton?o.createElement(O,n({},i.action)):i.type===y.Button?o.createElement(l,f(n({},i.action),{onClick:z=>h(i.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(l,{leadingIcon:o.createElement(c,null),popoverTarget:d,text:v,variant:l.variants.secondary})))),document.body):null});T.displayName="Modal";const D=Object.assign(T,{backgrounds:N});var F=D;export{F as default};
+"use client";var I=Object.defineProperty,P=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var D=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var f=(o,a,l)=>a in o?I(o,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):o[a]=l,p=(o,a)=>{for(var l in a||(a={}))D.call(a,l)&&f(o,l,a[l]);if(c)for(var l of c(a))E.call(a,l)&&f(o,l,a[l]);return o},N=(o,a)=>P(o,B(a));import u from"classnames";import*as e from"react";import*as H from"react-dom";import s from"../button";import T from"../icons/18/close";import L from"../link-button";import w from"./tab-trapper";import r from"../text";import{ActionTypes as g,backgrounds as h}from"./modal.types";const v=({actions:o,ariaLabel:a,background:l=h.primary,children:y,closeLabel:_,explanation:n,id:t,onClick:M=()=>{},ref:x,title:d})=>{const[b,k]=e.useState(!1),m=e.useRef(null);e.useImperativeHandle(x,()=>m.current,[]);const z=()=>{m.current&&m.current.hidePopover()};return e.useEffect(()=>k(!0)),b?H.createPortal(e.createElement("dialog",{"aria-label":a,className:u("modal",{[`modal--${l}`]:l}),id:t,popover:"auto",ref:m},e.createElement("div",{className:"modal__click-trapper",onClick:z}),e.createElement(w,{isActive:!0,className:"modal__inner"},e.createElement("div",{className:u("modal__close-action",{"modal__close-action--always-shown":o&&o.length})},e.createElement(s,{leadingIcon:e.createElement(T,null),popoverTarget:t,size:s.sizes.small,text:_,variant:s.variants.secondary,iconOnly:!0})),d||n?e.createElement("div",{className:"modal__nav"},e.createElement("div",{className:"modal__texts"},d?e.createElement(r,{className:"modal__title",size:r.sizes.headline2,theme:r.themes.emphasis},d):null,n?e.createElement("div",{className:u("modal__explanation",{[`modal__explanation--${l}`]:l})},e.createElement(r,{size:r.sizes.small},n)):null)):null,e.createElement("div",{className:"modal__children"},e.createElement("div",null,y)),o&&o.length?e.createElement("div",{className:"modal__actions"},o.map(i=>i.type===g.LinkButton?e.createElement(L,p({},i.action)):i.type===g.Button?e.createElement(s,N(p({},i.action),{onClick:C=>M(i.buttonId,C)})):null)):e.createElement("div",{className:"modal__close-action-mobile"},e.createElement(s,{leadingIcon:e.createElement(T,null),popoverTarget:t,text:_,variant:s.variants.secondary})))),document.body):null};v.displayName="Modal",v.backgrounds=h;var G=v;export{G 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 Close from '../icons/18/close';\nimport LinkButton from '../link-button';\nimport TabTrapper from './tab-trapper';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\n\nconst RefModal = React.forwardRef<\n  HTMLDialogElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      actions,\n      ariaLabel,\n      background = backgrounds.primary,\n      children,\n      closeLabel,\n      explanation,\n      id,\n      onClick = () => {},\n      title,\n    },\n    ref,\n  ) => {\n    const [isMounted, setIsMounted] = React.useState(false);\n\n    React.useEffect(() => setIsMounted(true));\n\n    return isMounted\n      ? ReactDOM.createPortal(\n          <dialog\n            aria-label={ariaLabel}\n            className={classNames('modal', {\n              [`modal--${background}`]: background,\n            })}\n            id={id}\n            popover=\"auto\"\n            ref={ref}\n          >\n            <TabTrapper isActive={true} className=\"modal__inner\">\n              <div\n                className={classNames('modal__close-action', {\n                  'modal__close-action--always-shown':\n                    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            </TabTrapper>\n          </dialog>,\n          document.body,\n        )\n      : null;\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Modal\"\nRefModal.displayName = 'Modal';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Modal: typeof RefModal & {\n  backgrounds: typeof backgrounds;\n} = Object.assign(RefModal, { backgrounds });\n\nexport default Modal;\n"],
-  "mappings": "0bAEA,OAAOA,MAAgB,aACvB,UAAYC,MAAW,QACvB,UAAYC,MAAc,YAE1B,OAAOC,MAAY,YACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAgB,iBACvB,OAAOC,MAAgB,gBACvB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAE9D,MAAMC,EAAWT,EAAM,WAIrB,CACE,CACE,QAAAU,EACA,UAAAC,EACA,WAAAC,EAAaJ,EAAY,QACzB,SAAAK,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,MAAAC,CACF,EACAC,IACG,CACH,KAAM,CAACC,EAAWC,CAAY,EAAIrB,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAMqB,EAAa,EAAI,CAAC,EAEjCD,EACHnB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,OACR,IAAKG,GAELnB,EAAA,cAACK,EAAA,CAAW,SAAU,GAAM,UAAU,gBACpCL,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCACEW,GAAWA,EAAQ,MACvB,CAAC,GAEDV,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMd,EAAO,MAAM,MACnB,KAAMY,EACN,QAASZ,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCgB,GAASH,EACRf,EAAA,cAAC,OAAI,UAAU,cACbA,EAAA,cAAC,OAAI,UAAU,gBACZkB,EACClB,EAAA,cAACM,EAAA,CACC,UAAU,eACV,KAAMA,EAAK,MAAM,UACjB,MAAOA,EAAK,OAAO,UAElBY,CACH,EACE,KACHH,EACCf,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBa,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDZ,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQS,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJf,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKa,CAAS,CACjB,EACCH,GAAWA,EAAQ,OAClBV,EAAA,cAAC,OAAI,UAAU,kBACZU,EAAQ,IAAIY,GACXA,EAAO,OAASf,EAAY,WAC1BP,EAAA,cAACI,EAAAmB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASf,EAAY,OAC9BP,EAAA,cAACE,EAAAsB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKR,EAAQK,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEAzB,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMF,EACN,QAASZ,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,EACA,SAAS,IACX,EACA,IACN,CACF,EAGAO,EAAS,YAAc,QAGvB,MAAMiB,EAEF,OAAO,OAAOjB,EAAU,CAAE,YAAAD,CAAY,CAAC,EAE3C,IAAOmB,EAAQD",
-  "names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "RefModal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "title", "ref", "isMounted", "setIsMounted", "action", "__spreadValues", "__spreadProps", "e", "Modal", "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 LinkButton from '../link-button';\nimport TabTrapper from './tab-trapper';\nimport Text from '../text';\n\nimport { ActionTypes, type Modal as Props, backgrounds } from './modal.types';\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  ref,\n  title,\n}) => {\n  const [isMounted, setIsMounted] = React.useState(false);\n  const innerRef = React.useRef<HTMLDialogElement>(null);\n\n  React.useImperativeHandle<HTMLDialogElement | null, HTMLDialogElement | null>(\n    ref,\n    () => innerRef.current,\n    [],\n  );\n\n  const hide = () => {\n    if (innerRef.current) {\n      innerRef.current.hidePopover();\n    }\n  };\n\n  React.useEffect(() => setIsMounted(true));\n\n  return isMounted\n    ? ReactDOM.createPortal(\n        <dialog\n          aria-label={ariaLabel}\n          className={classNames('modal', {\n            [`modal--${background}`]: background,\n          })}\n          id={id}\n          popover=\"auto\"\n          ref={innerRef}\n        >\n          <div className=\"modal__click-trapper\" onClick={hide} />\n          <TabTrapper isActive={true} className=\"modal__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                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          </TabTrapper>\n        </dialog>,\n        document.body,\n      )\n    : null;\n};\n\nModal.displayName = 'Modal';\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,MAAgB,iBACvB,OAAOC,MAAgB,gBACvB,OAAOC,MAAU,UAEjB,OAAS,eAAAC,EAAkC,eAAAC,MAAmB,gBAE9D,MAAMC,EAEF,CAAC,CACH,QAAAC,EACA,UAAAC,EACA,WAAAC,EAAaJ,EAAY,QACzB,SAAAK,EACA,WAAAC,EACA,YAAAC,EACA,GAAAC,EACA,QAAAC,EAAU,IAAM,CAAC,EACjB,IAAAC,EACA,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIrB,EAAM,SAAS,EAAK,EAChDsB,EAAWtB,EAAM,OAA0B,IAAI,EAErDA,EAAM,oBACJkB,EACA,IAAMI,EAAS,QACf,CAAC,CACH,EAEA,MAAMC,EAAO,IAAM,CACbD,EAAS,SACXA,EAAS,QAAQ,YAAY,CAEjC,EAEA,OAAAtB,EAAM,UAAU,IAAMqB,EAAa,EAAI,CAAC,EAEjCD,EACHnB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,OACR,IAAKM,GAELtB,EAAA,cAAC,OAAI,UAAU,uBAAuB,QAASuB,EAAM,EACrDvB,EAAA,cAACK,EAAA,CAAW,SAAU,GAAM,UAAU,gBACpCL,EAAA,cAAC,OACC,UAAWD,EAAW,sBAAuB,CAC3C,oCAAqCW,GAAWA,EAAQ,MAC1D,CAAC,GAEDV,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMd,EAAO,MAAM,MACnB,KAAMY,EACN,QAASZ,EAAO,SAAS,UACzB,SAAQ,GACV,CACF,EACCiB,GAASJ,EACRf,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,KACHJ,EACCf,EAAA,cAAC,OACC,UAAWD,EAAW,qBAAsB,CAC1C,CAAC,uBAAuBa,CAAU,EAAE,EAAGA,CACzC,CAAC,GAEDZ,EAAA,cAACM,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQS,CAAY,CAC7C,EACE,IACN,CACF,EACE,KACJf,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAAC,WAAKa,CAAS,CACjB,EACCH,GAAWA,EAAQ,OAClBV,EAAA,cAAC,OAAI,UAAU,kBACZU,EAAQ,IAAIc,GACXA,EAAO,OAASjB,EAAY,WAC1BP,EAAA,cAACI,EAAAqB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASjB,EAAY,OAC9BP,EAAA,cAACE,EAAAwB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKV,EAAQO,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEA3B,EAAA,cAAC,OAAI,UAAU,8BACbA,EAAA,cAACE,EAAA,CACC,YAAaF,EAAA,cAACG,EAAA,IAAM,EACpB,cAAea,EACf,KAAMF,EACN,QAASZ,EAAO,SAAS,UAC3B,CACF,CAEJ,CACF,EACA,SAAS,IACX,EACA,IACN,EAEAO,EAAM,YAAc,QACpBA,EAAM,YAAcD,EAEpB,IAAOoB,EAAQnB",
+  "names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "ref", "title", "isMounted", "setIsMounted", "innerRef", "hide", "action", "__spreadValues", "__spreadProps", "e", "modal_default"]
 }

package/react/modal/modal.scss

@@ -11,7 +11,7 @@
   }
 
   border: none;
-  display: hidden;
+  display: none;
   padding: 0;
   overflow: hidden;
   width: 100vw;
@@ -30,15 +30,32 @@
     display: block;
   }
 
+  :root:has(&:popover-open) {
+    overflow: hidden;
+  }
+
+  &__click-trapper {
+    height: 100vh;
+    height: 100svh;
+    inset: 0;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 0;
+  }
+
   &__inner {
     display: flex;
     flex-direction: column;
     height: 100%;
+    position: relative;
+    z-index: 1;
 
     @include break {
       height: fit-content;
       max-height: calc(100vh - (spacing.$m * 2));
-      max-height: calc(100dvh - (spacing.$m * 2));
+      max-height: calc(100svh - (spacing.$m * 2));
     }
   }
 

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

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { Button } from '../button/button.types';
 import { LinkButton } from '../link-button/link-button.types';
 import { ObjectValues } from '../types';
@@ -19,13 +20,14 @@ type ButtonAction = {
     buttonId: string;
 };
 export type Modal = {
+    actions?: (LinkAction | ButtonAction)[];
     ariaLabel: string;
     background?: ObjectValues<typeof backgrounds>;
     closeLabel: string;
     explanation?: string;
     id: string;
-    title?: string;
-    actions?: (LinkAction | ButtonAction)[];
     onClick?: (id: string, arg?: unknown) => void;
+    ref?: Ref<HTMLDialogElement>;
+    title?: string;
 };
 export {};

package/react/modal/modal.types.js

@@ -1,2 +1,2 @@
-const c={primary:"primary",secondary:"secondary"};var n=(t=>(t.LinkButton="LinkButton",t.Button="Button",t))(n||{});export{n as ActionTypes,c as backgrounds};
+const p={primary:"primary",secondary:"secondary"};var n=(t=>(t.LinkButton="LinkButton",t.Button="Button",t))(n||{});export{n as ActionTypes,p 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  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",
+  "sourcesContent": ["import { Ref } from 'react';\nimport { 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  actions?: (LinkAction | ButtonAction)[];\n  ariaLabel: string;\n  background?: ObjectValues<typeof backgrounds>;\n  closeLabel: string;\n  explanation?: string;\n  id: string;\n  onClick?: (id: string, arg?: unknown) => void;\n  ref?: Ref<HTMLDialogElement>;\n  title?: string;\n};\n"],
+  "mappings": "AAKO,MAAMA,EAAc,CACzB,QAAS,UACT,UAAW,WACb,EAEO,IAAKC,OACVA,EAAA,WAAa,aACbA,EAAA,OAAS,SAFCA,OAAA",
   "names": ["backgrounds", "ActionTypes"]
 }