@sats-group/ui-lib 84.0.0 → 85.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "84.0.0",
+  "version": "85.1.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 M=Object.defineProperty,k=Object.defineProperties;var B=Object.getOwnPropertyDescriptors;var u=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var _=(s,l,a)=>l in s?M(s,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[l]=a,n=(s,l)=>{for(var a in l||(l={}))C.call(l,a)&&_(s,a,l[a]);if(u)for(var a of u(l))I.call(l,a)&&_(s,a,l[a]);return s},f=(s,l)=>k(s,B(l));import p from"classnames";import*as o from"react";import*as P from"react-dom";import e from"../button";import c from"../icons/18/close";import w from"../link-button";import A from"./tab-trapper";import m from"../text";import{ActionTypes as y,backgrounds as h}from"./modal.types";const N=({actions:s,ariaLabel:l,background:a=h.primary,children:T,closeLabel:v,explanation:r,id:d,onClick:g=()=>{},title:t})=>{const[x,b]=o.useState(!1);return o.useEffect(()=>b(!0)),x?P.createPortal(o.createElement("dialog",{"aria-label":l,className:p("modal",{[`modal--${a}`]:a}),id:d,popover:"auto"},o.createElement(A,{isActive:!0},o.createElement("div",{className:p("modal__close-action",{"modal__close-action--always-shown":s&&s.length})},o.createElement(e,{leadingIcon:o.createElement(c,null),popoverTarget:d,size:e.sizes.small,text:v,variant:e.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--${a}`]:a})},o.createElement(m,{size:m.sizes.small},r)):null)):null,o.createElement("div",{className:"modal__children"},o.createElement("div",null,T)),s&&s.length?o.createElement("div",{className:"modal__actions"},s.map(i=>i.type===y.LinkButton?o.createElement(w,n({},i.action)):i.type===y.Button?o.createElement(e,f(n({},i.action),{onClick:z=>g(i.buttonId,z)})):null)):o.createElement("div",{className:"modal__close-action-mobile"},o.createElement(e,{leadingIcon:o.createElement(c,null),popoverTarget:d,text:v,variant:e.variants.secondary})))),document.body):null};N.backgrounds=h;var j=N;export{j 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 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  title,\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        >\n          <TabTrapper isActive={true}>\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.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,MAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIpB,EAAM,SAAS,EAAK,EAEtD,OAAAA,EAAM,UAAU,IAAMoB,EAAa,EAAI,CAAC,EAEjCD,EACHlB,EAAS,aACPD,EAAA,cAAC,UACC,aAAYW,EACZ,UAAWZ,EAAW,QAAS,CAC7B,CAAC,UAAUa,CAAU,EAAE,EAAGA,CAC5B,CAAC,EACD,GAAII,EACJ,QAAQ,QAERhB,EAAA,cAACK,EAAA,CAAW,SAAU,IACpBL,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,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,IAAIW,GACXA,EAAO,OAASd,EAAY,WAC1BP,EAAA,cAACI,EAAAkB,EAAA,GAAeD,EAAO,OAAQ,EAC7BA,EAAO,OAASd,EAAY,OAC9BP,EAAA,cAACE,EAAAqB,EAAAD,EAAA,GACKD,EAAO,QADZ,CAEC,QAASG,GAAKP,EAAQI,EAAO,SAAUG,CAAC,GAC1C,EACE,IACN,CACF,EAEAxB,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,YAAcD,EAEpB,IAAOiB,EAAQhB",
+  "names": ["classNames", "React", "ReactDOM", "Button", "Close", "LinkButton", "TabTrapper", "Text", "ActionTypes", "backgrounds", "Modal", "actions", "ariaLabel", "background", "children", "closeLabel", "explanation", "id", "onClick", "title", "isMounted", "setIsMounted", "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"]
 }