@purpurds/modal 5.4.0 → 5.4.2

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_ofk9m_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_ofk9m_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-modal-content_ofk9m_1:focus{outline:0}@media (min-width: 600px){._purpur-modal-content_ofk9m_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_ofk9m_30{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--purpur-color-overlay-default);animation:_fadeIn_ofk9m_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-modal-content_ofk9m_1 ._purpur-modal-content__close-button_ofk9m_37{position:absolute;top:var(--purpur-spacing-100);right:var(--purpur-spacing-100);z-index:2}@media (min-width: 600px){._purpur-modal-content_ofk9m_1 ._purpur-modal-content__close-button_ofk9m_37{top:var(--purpur-spacing-150)}}._purpur-modal-content__wrapper_ofk9m_48{height:100%;overflow:auto}@media (min-width: 600px){._purpur-modal-content__wrapper_ofk9m_48{display:flex;flex-direction:column;overflow:hidden}}._purpur-modal-content__wrapper-inner_ofk9m_59{display:flex;flex-direction:column}@media (min-width: 600px){._purpur-modal-content__wrapper-inner_ofk9m_59{overflow:hidden}}._purpur-modal-content__image-wrapper_ofk9m_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_ofk9m_68{aspect-ratio:3/1}}._purpur-modal-content__image-wrapper_ofk9m_68 img{position:absolute;top:50%;left:50%;display:block;width:100%;height:auto;transform:translate(-50%,-50%)}._purpur-modal-content__header_ofk9m_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)}@media (min-width: 600px){._purpur-modal-content__header_ofk9m_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_ofk9m_104,._purpur-modal-content__description_ofk9m_107{margin:0}._purpur-modal-content__body_ofk9m_110{padding:var(--purpur-spacing-200) var(--purpur-spacing-200) 0}@media (min-width: 600px){._purpur-modal-content__body_ofk9m_110{height:100%;overflow:auto;padding:var(--purpur-spacing-250) var(--purpur-spacing-300) 0}}._purpur-modal-content__body-inner_ofk9m_120{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_ofk9m_120{padding-bottom:var(--purpur-spacing-300)}}._purpur-modal-content__actions-buttons_ofk9m_132{display:flex;flex-direction:column;gap:var(--purpur-spacing-200);margin-top:auto}@media (min-width: 600px){._purpur-modal-content__actions-buttons_ofk9m_132{flex-direction:row-reverse;flex-grow:0}}._purpur-modal-content__actions-button_ofk9m_132{width:100%}@media (min-width: 600px){._purpur-modal-content__actions-button_ofk9m_132{width:auto}._purpur-modal-content__actions-button_ofk9m_132:nth-child(3){margin-right:auto}}._purpur-modal-content__notification_ofk9m_155{padding-top:var(--purpur-spacing-300)}._purpur-modal-content--with-image_ofk9m_158:not(._purpur-modal-content--overflow_ofk9m_158) ._purpur-modal-content__header_ofk9m_91{padding-top:var(--purpur-spacing-250)}@media (min-width: 600px){._purpur-modal-content--overflow_ofk9m_158:not(._purpur-modal-content--with-image_ofk9m_158) ._purpur-modal-content__header_ofk9m_91{position:relative}._purpur-modal-content--overflow_ofk9m_158:not(._purpur-modal-content--with-image_ofk9m_158) ._purpur-modal-content__close-button_ofk9m_37{top:50%;transform:translateY(-50%)}}._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__header_ofk9m_91{padding-bottom:var(--purpur-spacing-200);border-bottom:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__body_ofk9m_110{padding-top:var(--purpur-spacing-300)}@media (min-width: 600px){._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__body_ofk9m_110{padding-top:var(--purpur-spacing-400)}}._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__actions_ofk9m_132{position:relative}._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__actions-buttons_ofk9m_132{position:relative;z-index:2}._purpur-modal-content--overflow_ofk9m_158 ._purpur-modal-content__actions-separator_ofk9m_189{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(180deg,rgba(255,255,255,0) 0%,var(--purpur-color-background-primary) 100%);pointer-events:none}._purpur-modal-content--overflow_ofk9m_158._purpur-modal-content--sticky-footer_ofk9m_199 ._purpur-modal-content__actions-buttons_ofk9m_132{border-top:1px solid var(--purpur-color-border-weak)}._purpur-modal-content--sticky-footer_ofk9m_199 ._purpur-modal-content__body-inner_ofk9m_120{padding-bottom:var(--purpur-spacing-300)}._purpur-modal-content--sticky-footer_ofk9m_199 ._purpur-modal-content__actions-buttons_ofk9m_132{padding:var(--purpur-spacing-200)}@media (min-width: 600px){._purpur-modal-content--sticky-footer_ofk9m_199 ._purpur-modal-content__actions-buttons_ofk9m_132{padding-left:var(--purpur-spacing-300);padding-right:var(--purpur-spacing-300)}}._purpur-modal-content--sticky-footer_ofk9m_199 ._purpur-modal-content__notification_ofk9m_155{padding:var(--purpur-spacing-100) var(--purpur-spacing-300) var(--purpur-spacing-200)}@keyframes _fadeIn_ofk9m_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_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}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/modal",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "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.4.0",
-    "@purpurds/icon": "5.4.0",
-    "@purpurds/text-spacing": "5.4.0",
-    "@purpurds/heading": "5.4.0",
-    "@purpurds/paragraph": "5.4.0",
-    "@purpurds/tokens": "5.4.0",
-    "@purpurds/notification": "5.4.0",
-    "@purpurds/visually-hidden": "5.4.0"
+    "@purpurds/heading": "5.4.2",
+    "@purpurds/button": "5.4.2",
+    "@purpurds/icon": "5.4.2",
+    "@purpurds/paragraph": "5.4.2",
+    "@purpurds/tokens": "5.4.2",
+    "@purpurds/visually-hidden": "5.4.2",
+    "@purpurds/text-spacing": "5.4.2",
+    "@purpurds/notification": "5.4.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/modal-content.module.scss

@@ -100,12 +100,15 @@ $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);
     }
   }
 
@@ -214,9 +217,7 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
       z-index: 1;
       width: calc(100% - var(--purpur-spacing-300));
       height: calc(var(--purpur-spacing-400) + var(--purpur-spacing-100));
-      background: linear-gradient(180deg,
-          rgba(255, 255, 255, 0) 0%,
-          var(--purpur-color-background-primary) 100%);
+      background: linear-gradient(transparent, var(--purpur-color-background-primary));
       pointer-events: none;
     }
 
@@ -226,6 +227,8 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
   }
 
   &--sticky-footer {
+    justify-content: space-between;
+
     #{$root}__body-inner {
       padding-bottom: var(--purpur-spacing-300);
     }
@@ -253,4 +256,4 @@ $fadeIn: fadeIn var(--purpur-motion-duration-200) var(--purpur-motion-easing-eas
   to {
     opacity: 1;
   }
-}
+}

package/src/modal-content.stories.tsx

@@ -55,21 +55,7 @@ export const ModalContent: Story = {
   render: (args) => {
     return (
       <RadixDialog.Root open>
-        <ModalContentCmp {...args}>
-          <TextSpacing>
-            <Paragraph variant="paragraph-100">
-              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">
-              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>
-          </TextSpacing>
-        </ModalContentCmp>
+        <ModalContentCmp {...args} />
       </RadixDialog.Root>
     );
   },

package/src/modal-content.tsx

@@ -55,6 +55,10 @@ export type DefaultProps = {
    * An accessible title to be announced when the dialog is opened.
    * */
   title: string;
+  /**
+   * z-index of the modal
+   * */
+  zIndex?: number;
 };
 
 type NoCloseButtonProps = {
@@ -103,6 +107,7 @@ export const ModalContent = forwardRef(
       stickyButtons = true,
       title,
       notification = undefined,
+      zIndex,
       ...props
     }: ModalContentProps,
     ref: ForwardedRef<HTMLDivElement>
@@ -174,7 +179,7 @@ export const ModalContent = forwardRef(
 
     return (
       <RadixDialog.Portal>
-        <RadixDialog.Overlay className={cx(`${rootClassName}__overlay`)} />
+        <RadixDialog.Overlay className={cx(`${rootClassName}__overlay`)} style={{ zIndex }} />
         <RadixDialog.Content
           {...rest}
           className={classes}
@@ -184,6 +189,7 @@ export const ModalContent = forwardRef(
           onPointerDownOutside={handlePointerDownOutside}
           onOpenAutoFocus={handleContentOverflow}
           onEscapeKeyDown={handleEscapeKeyDown}
+          style={{ zIndex: `calc(${zIndex} + 1)` }}
         >
           <div ref={wrapperRef} className={cx(`${rootClassName}__wrapper`)}>
             {hasCloseButtonProps(props) && closeButtonAllyLabel && image && (

package/src/modal.stories.tsx

@@ -50,7 +50,12 @@ export const Showcase: Story = {
           <Modal.Trigger>
             <Button variant="primary">Open cookie consent</Button>
           </Modal.Trigger>
-          <Modal.Content title="We use cookies" actions={cookieActions}>
+          <Modal.Content
+            title="We use cookies"
+            actions={cookieActions}
+            description="Sticky buttons"
+            stickyButtons
+          >
             <Paragraph variant="paragraph-100">
               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
@@ -111,6 +116,8 @@ export const Showcase: Story = {
             title="Do you want to cancel the main subscription?"
             actions={subscriptionActions}
             primaryActionVariant="destructive"
+            description="Not sticky buttons"
+            stickyButtons={false}
           >
             <Paragraph variant="paragraph-100">
               Upon termination of the main subscription, all related data sims and e-sims are