@purpurds/modal 5.11.2 → 5.13.0

package/dist/styles.css

@@ -1 +1 @@
-._purpur-notification_10qwf_1{display:flex;flex-direction:column;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-250);box-sizing:border-box;width:100%;background:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-md);border:var(--purpur-border-width-sm) solid;border-left:var(--purpur-border-width-lg) solid;gap:var(--purpur-spacing-150);position:relative}._purpur-notification__top_10qwf_14{display:flex;align-items:flex-start;align-self:stretch;justify-content:space-between}._purpur-notification__header_10qwf_20{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-notification__close-button_10qwf_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}._purpur-notification__icon_10qwf_30{flex-shrink:0}._purpur-notification__body_10qwf_33{padding:var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50) var(--purpur-spacing-0)}._purpur-notification--success_10qwf_36{border-color:var(--purpur-color-border-status-success)}._purpur-notification--success_10qwf_36 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-success-strong)}._purpur-notification--success_10qwf_36 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-success-medium)}._purpur-notification--warning_10qwf_45{border-color:var(--purpur-color-border-status-warning)}._purpur-notification--warning_10qwf_45 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-warning-strong)}._purpur-notification--warning_10qwf_45 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-warning-medium)}._purpur-notification--error_10qwf_54{border-color:var(--purpur-color-border-status-error)}._purpur-notification--error_10qwf_54 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-error-strong)}._purpur-notification--error_10qwf_54 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-error-medium)}._purpur-notification--info_10qwf_63{border-color:var(--purpur-color-border-status-info)}._purpur-notification--info_10qwf_63 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-info-strong)}._purpur-notification--info_10qwf_63 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-info-medium)}._purpur-notification--hidden_10qwf_72{display:none;visibility:hidden}._purpur-notification--has-close-button_10qwf_76 ._purpur-notification__top_10qwf_14{padding-right:var(--purpur-spacing-400)}._purpur-modal-content_rblrn_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary);animation:_fadeIn_rblrn_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_rblrn_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_rblrn_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px){._purpur-modal-content__overlay_rblrn_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_rblrn_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_rblrn_1 ._purpur-modal-content__close-button_rblrn_37{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_rblrn_1 ._purpur-modal-content__close-button_rblrn_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_rblrn_48{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_rblrn_48{display:flex;flex-direction:column;overflow:hidden}}._purpur-modal-content__wrapper-inner_rblrn_59{display:flex;flex-direction:column}@media (min-width: 600px){._purpur-modal-content__wrapper-inner_rblrn_59{overflow:hidden}}._purpur-modal-content__image-wrapper_rblrn_68{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_rblrn_68{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_rblrn_68 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_rblrn_91{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary);z-index:1}@media (min-width: 600px){._purpur-modal-content__header_rblrn_91{position:static;padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_rblrn_105,._purpur-modal-content__description_rblrn_108{margin:0}._purpur-modal-content__body_rblrn_111{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_rblrn_111{height:100%;overflow:auto;padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_rblrn_121{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_rblrn_121{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_rblrn_133{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_rblrn_133{flex-direction:row-reverse;flex-grow:0}}._purpur-modal-content__actions-button_rblrn_133{width:100%}@media (min-width: 600px){._purpur-modal-content__actions-button_rblrn_133{width:auto}._purpur-modal-content__actions-button_rblrn_133:nth-child(3){margin-right:auto}}._purpur-modal-content__notification_rblrn_156{padding-top:var(--purpur-spacing-300)}._purpur-modal-content--with-image_rblrn_159:not(._purpur-modal-content--overflow_rblrn_159) ._purpur-modal-content__header_rblrn_91{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_rblrn_159:not(._purpur-modal-content--with-image_rblrn_159) ._purpur-modal-content__header_rblrn_91{position:relative}._purpur-modal-content--overflow_rblrn_159:not(._purpur-modal-content--with-image_rblrn_159) ._purpur-modal-content__close-button_rblrn_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__header_rblrn_91{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__body_rblrn_111{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__body_rblrn_111{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__actions_rblrn_133{position:relative}._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__actions-buttons_rblrn_133{position:relative;z-index:2}._purpur-modal-content--overflow_rblrn_159 ._purpur-modal-content__actions-separator_rblrn_190{position:absolute;bottom:calc(100% - 1px);left:0;z-index:1;width:calc(100% - var(--purpur-spacing-300));height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));background:linear-gradient(transparent,var(--purpur-color-background-primary));pointer-events:none}._purpur-modal-content--overflow_rblrn_159._purpur-modal-content--sticky-footer_rblrn_200 ._purpur-modal-content__actions-buttons_rblrn_133{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_rblrn_200{justify-content:space-between}._purpur-modal-content--sticky-footer_rblrn_200 ._purpur-modal-content__body-inner_rblrn_121{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_rblrn_200 ._purpur-modal-content__actions-buttons_rblrn_133{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_rblrn_200 ._purpur-modal-content__actions-buttons_rblrn_133{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}._purpur-modal-content--sticky-footer_rblrn_200 ._purpur-modal-content__notification_rblrn_156{padding:var(--purpur-spacing-100) var(--purpur-spacing-300) var(--purpur-spacing-200)}@keyframes _fadeIn_rblrn_1{0%{opacity:0}to{opacity:1}}
+._purpur-notification_10qwf_1{display:flex;flex-direction:column;padding:var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-200) var(--purpur-spacing-250);box-sizing:border-box;width:100%;background:var(--purpur-color-background-primary);border-radius:var(--purpur-border-radius-md);border:var(--purpur-border-width-sm) solid;border-left:var(--purpur-border-width-lg) solid;gap:var(--purpur-spacing-150);position:relative}._purpur-notification__top_10qwf_14{display:flex;align-items:flex-start;align-self:stretch;justify-content:space-between}._purpur-notification__header_10qwf_20{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-notification__close-button_10qwf_25{position:absolute;right:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25));top:calc(var(--purpur-spacing-50) + var(--purpur-spacing-25))}._purpur-notification__icon_10qwf_30{flex-shrink:0}._purpur-notification__body_10qwf_33{padding:var(--purpur-spacing-0) var(--purpur-spacing-150) var(--purpur-spacing-50) var(--purpur-spacing-0)}._purpur-notification--success_10qwf_36{border-color:var(--purpur-color-border-status-success)}._purpur-notification--success_10qwf_36 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-success-strong)}._purpur-notification--success_10qwf_36 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-success-medium)}._purpur-notification--warning_10qwf_45{border-color:var(--purpur-color-border-status-warning)}._purpur-notification--warning_10qwf_45 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-warning-strong)}._purpur-notification--warning_10qwf_45 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-warning-medium)}._purpur-notification--error_10qwf_54{border-color:var(--purpur-color-border-status-error)}._purpur-notification--error_10qwf_54 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-error-strong)}._purpur-notification--error_10qwf_54 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-error-medium)}._purpur-notification--info_10qwf_63{border-color:var(--purpur-color-border-status-info)}._purpur-notification--info_10qwf_63 ._purpur-notification__heading_10qwf_39{color:var(--purpur-color-text-status-info-strong)}._purpur-notification--info_10qwf_63 ._purpur-notification__icon_10qwf_30{color:var(--purpur-color-text-status-info-medium)}._purpur-notification--hidden_10qwf_72{display:none;visibility:hidden}._purpur-notification--has-close-button_10qwf_76 ._purpur-notification__top_10qwf_14{padding-right:var(--purpur-spacing-400)}._purpur-modal-content_1ifm3_1{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:auto;background-color:var(--purpur-color-background-primary);animation:_fadeIn_1ifm3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_1ifm3_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_1ifm3_1{inset:unset;top:50%;left:50%;width:720px;max-width:calc(100% - var(--purpur-spacing-300) * 2);min-height:320px;max-height:80%;overflow:hidden;border-radius:var(--purpur-border-radius-lg);box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:var(--purpur-shadow-lg)}}@media (min-width: 600px){._purpur-modal-content__overlay_1ifm3_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_1ifm3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_1ifm3_1 ._purpur-modal-content__close-button_1ifm3_37{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_1ifm3_1 ._purpur-modal-content__close-button_1ifm3_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_1ifm3_48{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_1ifm3_48{display:flex;flex-direction:column}}._purpur-modal-content__wrapper-inner_1ifm3_58{display:flex;flex-direction:column}._purpur-modal-content__image-wrapper_1ifm3_62{position:relative;flex-shrink:0;order:-1;width:100%;aspect-ratio:2/1;overflow:hidden}@media (((min-width: 600px) and (max-width: 649px) and (max-height: 720px)) or ((min-width: 650px) and (max-height: 820px))){._purpur-modal-content__image-wrapper_1ifm3_62{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_1ifm3_62 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_1ifm3_85{position:sticky;top:0;flex-grow:0;padding:var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);background:var(--purpur-color-background-primary);z-index:1}@media (min-width: 600px){._purpur-modal-content__header_1ifm3_85{padding:var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300)}}._purpur-modal-content__title_1ifm3_98,._purpur-modal-content__description_1ifm3_101{margin:0}._purpur-modal-content__body_1ifm3_104{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_1ifm3_104{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_1ifm3_112{position:relative;display:flex;flex-direction:column;gap:var(--purpur-spacing-400);padding-bottom:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content__body-inner_1ifm3_112{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_1ifm3_124{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_1ifm3_124{flex-direction:row-reverse;flex-grow:0}}._purpur-modal-content__actions-button_1ifm3_124{width:100%}@media (min-width: 600px){._purpur-modal-content__actions-button_1ifm3_124{width:auto}._purpur-modal-content__actions-button_1ifm3_124:nth-child(3){margin-right:auto}}._purpur-modal-content__notification_1ifm3_147{padding-top:var(--purpur-spacing-300)}._purpur-modal-content--with-image_1ifm3_150:not(._purpur-modal-content--overflow_1ifm3_150) ._purpur-modal-content__header_1ifm3_85{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_1ifm3_150:not(._purpur-modal-content--with-image_1ifm3_150) ._purpur-modal-content__header_1ifm3_85{position:relative}._purpur-modal-content--overflow_1ifm3_150:not(._purpur-modal-content--with-image_1ifm3_150) ._purpur-modal-content__close-button_1ifm3_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__header_1ifm3_85{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__body_1ifm3_104{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__body_1ifm3_104{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__actions_1ifm3_124{position:relative}._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__actions-buttons_1ifm3_124{position:relative;z-index:2}._purpur-modal-content--overflow_1ifm3_150 ._purpur-modal-content__actions-separator_1ifm3_181{position:absolute;bottom:calc(100% - 1px);left:0;z-index:1;width:calc(100% - var(--purpur-spacing-300));height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));background:linear-gradient(transparent,var(--purpur-color-background-primary));pointer-events:none}._purpur-modal-content--overflow_1ifm3_150._purpur-modal-content--sticky-footer_1ifm3_191 ._purpur-modal-content__actions-buttons_1ifm3_124{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_1ifm3_191{justify-content:space-between}._purpur-modal-content--sticky-footer_1ifm3_191 ._purpur-modal-content__body-inner_1ifm3_112{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_1ifm3_191 ._purpur-modal-content__actions-buttons_1ifm3_124{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_1ifm3_191 ._purpur-modal-content__actions-buttons_1ifm3_124{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}._purpur-modal-content--sticky-footer_1ifm3_191 ._purpur-modal-content__notification_1ifm3_147{padding:var(--purpur-spacing-100) var(--purpur-spacing-300) var(--purpur-spacing-200)}@keyframes _fadeIn_1ifm3_1{0%{opacity:0}to{opacity:1}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "5.11.2",
+  "version": "5.13.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/modal.cjs.js",
   "types": "./dist/modal.d.ts",
@@ -16,14 +16,14 @@
   "dependencies": {
     "@radix-ui/react-dialog": "~1.0.5",
     "classnames": "~2.5.0",
-    "@purpurds/button": "5.11.2",
-    "@purpurds/paragraph": "5.11.2",
-    "@purpurds/text-spacing": "5.11.2",
-    "@purpurds/tokens": "5.11.2",
-    "@purpurds/visually-hidden": "5.11.2",
-    "@purpurds/heading": "5.11.2",
-    "@purpurds/notification": "5.11.2",
-    "@purpurds/icon": "5.11.2"
+    "@purpurds/button": "5.13.0",
+    "@purpurds/icon": "5.13.0",
+    "@purpurds/heading": "5.13.0",
+    "@purpurds/paragraph": "5.13.0",
+    "@purpurds/text-spacing": "5.13.0",
+    "@purpurds/visually-hidden": "5.13.0",
+    "@purpurds/tokens": "5.13.0",
+    "@purpurds/notification": "5.13.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/modal-content.module.scss

@@ -59,17 +59,12 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     @media (min-width: $purpur-breakpoint-md) {
       display: flex;
       flex-direction: column;
-      overflow: hidden;
     }
   }
 
   &__wrapper-inner {
     display: flex;
     flex-direction: column;
-
-    @media (min-width: $purpur-breakpoint-md) {
-      overflow: hidden;
-    }
   }
 
   &__image-wrapper {
@@ -100,15 +95,12 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     position: sticky;
     top: 0;
     flex-grow: 0;
-    padding: var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0
-      var(--purpur-spacing-200);
+    padding: var(--purpur-spacing-200) calc(var(--purpur-spacing-600) + var(--purpur-spacing-150)) 0 var(--purpur-spacing-200);
     background: var(--purpur-color-background-primary);
     z-index: 1;
 
     @media (min-width: $purpur-breakpoint-md) {
-      position: static;
-      padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50))
-        0 var(--purpur-spacing-300);
+      padding: var(--purpur-spacing-250) calc(var(--purpur-spacing-800) + var(--purpur-spacing-50)) 0 var(--purpur-spacing-300);
     }
   }
 
@@ -124,8 +116,6 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
     padding: var(--purpur-spacing-200) var(--purpur-spacing-200) 0;
 
     @media (min-width: $purpur-breakpoint-md) {
-      height: 100%;
-      overflow: auto;
       padding: var(--purpur-spacing-250) var(--purpur-spacing-300) 0;
     }
   }
@@ -256,4 +246,4 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
   to {
     opacity: 1;
   }
-}
+}

package/src/modal-content.tsx

@@ -4,7 +4,6 @@ import { Button, ButtonVariant } from "@purpurds/button";
 import { Heading } from "@purpurds/heading";
 import { IconClose } from "@purpurds/icon";
 import { Paragraph } from "@purpurds/paragraph";
-import { purpurBreakpointMd } from "@purpurds/tokens";
 import { VisuallyHidden } from "@purpurds/visually-hidden";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import c from "classnames/bind";
@@ -20,7 +19,7 @@ export type DefaultProps = {
   /**
    * An array of actions to be displayed at the bottom of the modal in the form of buttons. A maximum of 3 buttons will be rendered,
    * */
-  actions?: Array<{ label: string; onClick: () => void }>;
+  actions?: Array<{ label: string; onClick: () => void; disabled?: boolean; loading?: boolean }>;
   children: ReactNode;
   className?: string;
   /**
@@ -117,8 +116,6 @@ export const ModalContent = forwardRef(
     const [contentOverflow, setContentOverflow] = useState(false);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const wrapperInnerRef = useRef<HTMLDivElement>(null);
-    const bodyWrapperRef = useRef<HTMLDivElement>(null);
-    const bodyInnerRef = useRef<HTMLDivElement>(null);
 
     const classes = cx([
       rootClassName,
@@ -137,25 +134,13 @@ export const ModalContent = forwardRef(
     };
 
     const handleContentOverflow = useCallback(() => {
-      if (
-        !wrapperRef.current ||
-        !wrapperInnerRef.current ||
-        !bodyWrapperRef.current ||
-        !bodyInnerRef.current
-      ) {
+      if (!wrapperRef.current || !wrapperInnerRef.current) {
         return;
       }
 
-      const isMobile = window.innerWidth < parseInt(purpurBreakpointMd);
-
-      const computedStyle = window.getComputedStyle(
-        isMobile ? wrapperRef.current : bodyWrapperRef.current,
-        null
-      );
+      const computedStyle = window.getComputedStyle(wrapperRef.current, null);
       const wrapperHeight = parseFloat(computedStyle.getPropertyValue("height"));
-      const innerHeight = isMobile
-        ? wrapperInnerRef.current.offsetHeight
-        : bodyInnerRef.current.offsetHeight;
+      const innerHeight = wrapperInnerRef.current.offsetHeight;
 
       setContentOverflow(wrapperHeight < innerHeight);
     }, []);
@@ -226,8 +211,8 @@ export const ModalContent = forwardRef(
                   {image}
                 </div>
               )}
-              <div ref={bodyWrapperRef} className={cx(`${rootClassName}__body`)}>
-                <div ref={bodyInnerRef} className={cx(`${rootClassName}__body-inner`)}>
+              <div className={cx(`${rootClassName}__body`)}>
+                <div className={cx(`${rootClassName}__body-inner`)}>
                   {description && hideDescription && (
                     <VisuallyHidden asChild>
                       <RadixDialog.Description data-testid={getTestId("description")}>
@@ -301,7 +286,7 @@ export const ModalActions = ({
   primaryActionVariant,
   notification,
 }: Pick<ModalContentProps, "actions" | "notification"> & {
-  primaryActionVariant?: "primary" | "expressive" | "destructive";
+  primaryActionVariant?: PrimaryActionVariant;
 }) => {
   const notificationRef = useRef<HTMLDivElement>(null);
   const buttonVariants = [primaryActionVariant, "secondary", "text"];
@@ -315,17 +300,21 @@ export const ModalActions = ({
   return actions && actions.length > 0 ? (
     <div className={cx(`${rootClassName}__actions`)}>
       <div className={cx(`${rootClassName}__actions-buttons`)} data-testid="modal actions">
-        {actions.slice(0, MAX_NUMBER_OF_ACTIONS).map(({ label, onClick }, index) => (
-          <Button
-            key={label}
-            data-testid="modal actions button"
-            variant={(buttonVariants[index] as ButtonVariant) || ""}
-            onClick={onClick}
-            className={cx(`${rootClassName}__actions-button`)}
-          >
-            {label}
-          </Button>
-        ))}
+        {actions
+          .slice(0, MAX_NUMBER_OF_ACTIONS)
+          .map(({ label, onClick, disabled, loading }, index) => (
+            <Button
+              key={label}
+              data-testid="modal actions button"
+              variant={(buttonVariants[index] as ButtonVariant) || ""}
+              onClick={onClick}
+              disabled={disabled}
+              loading={loading}
+              className={cx(`${rootClassName}__actions-button`)}
+            >
+              {label}
+            </Button>
+          ))}
       </div>
       {notification && (
         <div className={cx(`${rootClassName}__notification`)} ref={notificationRef}>

package/src/modal.stories.tsx

@@ -77,7 +77,7 @@ export const Showcase: Story = {
             stickyButtons
             zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
           >
-            <Paragraph variant="paragraph-100">
+            <Paragraph>
               By clicking &quot;I accept cookies&quot; you consent to the storage of cookies on your
               device to improve website navigation, analyze website usage and assist in our
               marketing efforts.
@@ -95,7 +95,7 @@ export const Showcase: Story = {
             zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
           >
             <TextSpacing>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 We are Telia Sverige AB (org. nr 556430-0142), (hereafter ‘Telia’). In this Privacy
                 policy we describe how we, as the controller, process and protect your personal data
                 (hereafter ‘data’). Telia recognizes that the protection of your personal data is
@@ -104,14 +104,14 @@ export const Showcase: Story = {
                 the General Data Protection Regulation (GDPR), the Data Protection Act 2018:2181 ,
                 The Electronic Communications Act 2022:
               </Paragraph>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 This Privacy policy applies to the processing of personal data of individuals,
                 regardless of whether you are a consumer or business customer. In addition, Telia
                 may have service-specific privacy policys, which describe the processing of personal
                 data in the context of a specific service. These can be found along with the
                 specific services that we provide.
               </Paragraph>
-              <Paragraph variant="paragraph-100">This Privacy policy sets out:</Paragraph>
+              <Paragraph>This Privacy policy sets out:</Paragraph>
               <ul>
                 <li>how we collect personal data</li>
                 <li>what personal data we process</li>
@@ -124,7 +124,7 @@ export const Showcase: Story = {
                   can execute these rights.
                 </li>
               </ul>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 This Privacy policy does not apply to the processing of personal data processed by
                 other companies when you are using their services or websites, even if they were
                 accessed through Telia&apos;s communications network or services.
@@ -145,7 +145,7 @@ export const Showcase: Story = {
             stickyButtons={false}
             zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
           >
-            <Paragraph variant="paragraph-100">
+            <Paragraph>
               Upon termination of the main subscription, all related data sims and e-sims are
               terminated. The notice period may vary.
             </Paragraph>
@@ -158,6 +158,11 @@ export const Showcase: Story = {
 
 export const ModalContentWithImage: Story = {
   render: () => {
+    const actions = [
+      { label: "Primary action", onClick: () => {} },
+      { label: "Secondary action", onClick: () => {} },
+    ];
+
     return (
       <div style={{ display: "flex", gap: "var(--purpur-spacing-200)" }}>
         <Modal>
@@ -165,6 +170,8 @@ export const ModalContentWithImage: Story = {
             <Button variant="primary">Open</Button>
           </Modal.Trigger>
           <Modal.Content
+            closeButtonAllyLabel="Close"
+            showCloseButton
             zIndex={Z_INDEX_TO_MAKE_IT_LOOK_GOOD_IN_STORYBOOK}
             image={
               // eslint-disable-next-line react/jsx-wrap-multilines
@@ -173,21 +180,57 @@ export const ModalContentWithImage: Story = {
                 alt="Familjens unga ser på tv tillsammans mysig stämning men spännande"
               />
             }
+            actions={actions}
             title="Modal with image"
           >
             <TextSpacing>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam
                 faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
                 placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
                 faucibus diam faucibus eu.
               </Paragraph>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
                 placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
                 faucibus diam faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id
                 aenean aliquam nibh placerat.
               </Paragraph>
+              <Paragraph>
+                Donec at ipsum dui. Aenean vitae odio ultrices, efficitur justo vitae, dignissim
+                felis. Donec sodales sed sapien id commodo. In scelerisque, est nec lacinia dictum,
+                tellus nisi vulputate turpis, quis laoreet nisl nibh rhoncus nisi. Pellentesque vel
+                dictum elit. Curabitur suscipit diam ut dictum vestibulum. Pellentesque et mi ut ex
+                maximus dignissim. Maecenas id maximus magna. Nam venenatis sem elit, sit amet
+                varius tellus vulputate id. Etiam pharetra mollis tempus. Vestibulum quis euismod
+                mauris. Sed porta sagittis tempor. Aliquam fermentum, sem tempus fermentum rhoncus,
+                neque diam condimentum dui, nec sodales diam nunc sit amet velit. Aenean eu
+                hendrerit ligula, et sodales orci.
+              </Paragraph>
+              <Paragraph>
+                Nam imperdiet ante nulla, non bibendum odio fringilla at. Curabitur aliquam sem
+                diam, non eleifend ipsum hendrerit eu. Pellentesque bibendum, dolor et varius
+                imperdiet, risus metus auctor enim, consectetur dictum ex justo ut turpis. Nullam
+                vel ligula ex. Curabitur cursus, metus sit amet porta fermentum, odio leo ultricies
+                orci, sed ornare nisi enim et massa. Nulla cursus ex et lectus congue malesuada.
+                Aliquam consectetur sem eu mauris imperdiet convallis a eu eros. Nam turpis dui,
+                placerat sit amet lacus tincidunt, tempor volutpat ligula. Vivamus dapibus arcu eu
+                sollicitudin tempus. Nullam sollicitudin augue quis dictum eleifend. Sed condimentum
+                elit risus, tincidunt fermentum quam vulputate ut. In hac habitasse platea dictumst.
+                Fusce mattis gravida neque, non blandit tellus tempor sit amet. Aliquam tristique
+                accumsan mi sed tincidunt.
+              </Paragraph>
+              <Paragraph>
+                Nullam eu lacus et sapien faucibus blandit ac non ex. Maecenas eget nibh nisl. Nam
+                quam eros, fringilla sed tempor ut, semper a est. Nullam massa diam, vestibulum a
+                massa at, dignissim sagittis diam. Morbi malesuada, massa vel condimentum tincidunt,
+                turpis est elementum tellus, id blandit erat metus vitae neque. Donec et laoreet
+                magna. Mauris eget lorem ut orci eleifend imperdiet. Suspendisse a euismod nulla,
+                sed auctor neque. Quisque tempor sollicitudin vulputate. Phasellus auctor urna sed
+                nunc dignissim, in mollis leo tincidunt. Pellentesque venenatis suscipit ipsum.
+                Vestibulum at condimentum tortor. Donec vestibulum lorem eu odio pellentesque, id
+                pretium urna gravida.
+              </Paragraph>
             </TextSpacing>
           </Modal.Content>
         </Modal>
@@ -216,13 +259,13 @@ export const ModalContentWithNotification: Story = {
             title="Notification heading"
           >
             <TextSpacing>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut faucibus diam
                 faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
                 placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
                 faucibus diam faucibus eu.
               </Paragraph>
-              <Paragraph variant="paragraph-100">
+              <Paragraph>
                 Pellentesque quis pellentesque sit fermentum. Mi id aenean aliquam nibh
                 placerat.Lorem ipsum dolor sit amet consectetur. Diam vitae leo amet tortor ut
                 faucibus diam faucibus eu. Pellentesque quis pellentesque sit fermentum. Mi id