@kaizen/components 1.43.0 → 1.44.0

package/dist/cjs/Modal/ConfirmationModal/ConfirmationModal.cjs

@@ -70,6 +70,7 @@ var ConfirmationModal = function (_a) {
     title = _a.title,
     onConfirm = _a.onConfirm,
     onAfterLeave = _a.onAfterLeave,
+    onAfterEnter = _a.onAfterEnter,
     _d = _a.confirmLabel,
     confirmLabel = _d === void 0 ? "Confirm" : _d,
     _e = _a.dismissLabel,
@@ -77,7 +78,7 @@ var ConfirmationModal = function (_a) {
     confirmWorking = _a.confirmWorking,
     propsOnDismiss = _a.onDismiss,
     children = _a.children,
-    props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+    props = tslib.__rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
   var onDismiss = confirmWorking ? undefined : propsOnDismiss;
   var footerActions = [];
   if (onConfirm) {
@@ -101,7 +102,8 @@ var ConfirmationModal = function (_a) {
     isOpen: isOpen,
     onEscapeKeyup: onDismiss,
     onOutsideModalClick: onDismiss,
-    onAfterLeave: onAfterLeave
+    onAfterLeave: onAfterLeave,
+    onAfterEnter: onAfterEnter
   }, React__default.default.createElement("div", tslib.__assign({
     className: ConfirmationModal_module.modal,
     "data-modal": true

package/dist/cjs/Modal/ContextModal/ContextModal.cjs

@@ -34,6 +34,7 @@ var ContextModal = function (_a) {
     onConfirm = _a.onConfirm,
     propsOnDismiss = _a.onDismiss,
     onAfterLeave = _a.onAfterLeave,
+    onAfterEnter = _a.onAfterEnter,
     _d = _a.confirmLabel,
     confirmLabel = _d === void 0 ? "Confirm" : _d,
     confirmWorking = _a.confirmWorking,
@@ -43,7 +44,7 @@ var ContextModal = function (_a) {
     image = _a.image,
     secondaryLabel = _a.secondaryLabel,
     onSecondaryAction = _a.onSecondaryAction,
-    props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
+    props = tslib.__rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
   var onDismiss = confirmWorking ? undefined : propsOnDismiss;
   var footerActions = [];
   var workingProps = confirmWorking ? {
@@ -69,7 +70,8 @@ var ContextModal = function (_a) {
     isOpen: isOpen,
     onEscapeKeyup: onDismiss,
     onOutsideModalClick: onDismiss,
-    onAfterLeave: onAfterLeave
+    onAfterLeave: onAfterLeave,
+    onAfterEnter: onAfterEnter
   }, React__default.default.createElement("div", tslib.__assign({
     className: ContextModal_module.modal,
     "data-modal": true

package/dist/cjs/Modal/GenericModal/GenericModal.cjs

@@ -22,6 +22,7 @@ var GenericModal = function (_a) {
     focusLockDisabled = _a.focusLockDisabled,
     onEscapeKeyup = _a.onEscapeKeyup,
     onOutsideModalClick = _a.onOutsideModalClick,
+    onAfterEnter = _a.onAfterEnter,
     propsOnAfterLeave = _a.onAfterLeave;
   var reactId = React.useId();
   var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
@@ -47,16 +48,15 @@ var GenericModal = function (_a) {
       onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
     }
   };
-  var focusAccessibleLabel = function () {
-    if (modalLayer) {
-      var labelElement = document.getElementById(labelledByID);
-      if (labelElement) {
-        labelElement.focus();
-      }
+  var focusOnAccessibleLabel = function () {
+    // Check if focus already exists within the modal
+    if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+      return;
     }
+    var labelElement = document.getElementById(labelledByID);
+    labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
   };
   var a11yWarn = function () {
-    if (!modalLayer) return;
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -74,8 +74,11 @@ var GenericModal = function (_a) {
   };
   var onAfterEnterHandler = function () {
     scrollModalToTop();
-    focusAccessibleLabel();
-    a11yWarn();
+    if (modalLayer) {
+      onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
+      focusOnAccessibleLabel();
+      a11yWarn();
+    }
   };
   var onBeforeEnterHandler = function () {
     preventBodyScroll();

package/dist/cjs/Modal/InputEditModal/InputEditModal.cjs

@@ -43,7 +43,8 @@ var InputEditModal = function (_a) {
     _e = _a.unpadded,
     unpadded = _e === void 0 ? false : _e,
     propsOnDismiss = _a.onDismiss,
-    props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss"]);
+    onAfterEnter = _a.onAfterEnter,
+    props = tslib.__rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
   var onDismiss = submitWorking ? undefined : propsOnDismiss;
   var submitAction = {
     label: submitLabel,
@@ -63,7 +64,8 @@ var InputEditModal = function (_a) {
   return React__default.default.createElement(GenericModal.GenericModal, {
     isOpen: isOpen,
     onEscapeKeyup: onDismiss,
-    onAfterLeave: onAfterLeave
+    onAfterLeave: onAfterLeave,
+    onAfterEnter: onAfterEnter
   }, React__default.default.createElement("div", tslib.__assign({
     className: InputEditModal_module.modal,
     dir: localeDirection,

package/dist/cjs/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.cjs

@@ -51,7 +51,11 @@ var LinkModal = function (_a) {
     title: defaultHref ? "Edit link" : "Add link",
     onSubmit: handleSubmit,
     onDismiss: onDismiss,
-    onAfterLeave: onAfterLeave
+    onAfterLeave: onAfterLeave,
+    onAfterEnter: function () {
+      var _a;
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
   }, React__default.default.createElement(TextField.TextField, {
     id: "href",
     type: "text",

package/dist/cjs/index.css

@@ -3,8 +3,8 @@
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
-.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
+.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
 .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}

package/dist/esm/Modal/ConfirmationModal/ConfirmationModal.mjs

@@ -62,6 +62,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
       title = _a.title,
       onConfirm = _a.onConfirm,
       onAfterLeave = _a.onAfterLeave,
+      onAfterEnter = _a.onAfterEnter,
       _d = _a.confirmLabel,
       confirmLabel = _d === void 0 ? "Confirm" : _d,
       _e = _a.dismissLabel,
@@ -69,7 +70,7 @@ const ConfirmationModal = /*#__PURE__*/function () {
       confirmWorking = _a.confirmWorking,
       propsOnDismiss = _a.onDismiss,
       children = _a.children,
-      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
+      props = __rest(_a, ["isOpen", "isProminent", "unpadded", "mood", "title", "onConfirm", "onAfterLeave", "onAfterEnter", "confirmLabel", "dismissLabel", "confirmWorking", "onDismiss", "children"]);
     var onDismiss = confirmWorking ? undefined : propsOnDismiss;
     var footerActions = [];
     if (onConfirm) {
@@ -93,7 +94,8 @@ const ConfirmationModal = /*#__PURE__*/function () {
       isOpen: isOpen,
       onEscapeKeyup: onDismiss,
       onOutsideModalClick: onDismiss,
-      onAfterLeave: onAfterLeave
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
       "data-modal": true

package/dist/esm/Modal/ContextModal/ContextModal.mjs

@@ -26,6 +26,7 @@ const ContextModal = /*#__PURE__*/function () {
       onConfirm = _a.onConfirm,
       propsOnDismiss = _a.onDismiss,
       onAfterLeave = _a.onAfterLeave,
+      onAfterEnter = _a.onAfterEnter,
       _d = _a.confirmLabel,
       confirmLabel = _d === void 0 ? "Confirm" : _d,
       confirmWorking = _a.confirmWorking,
@@ -35,7 +36,7 @@ const ContextModal = /*#__PURE__*/function () {
       image = _a.image,
       secondaryLabel = _a.secondaryLabel,
       onSecondaryAction = _a.onSecondaryAction,
-      props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
+      props = __rest(_a, ["isOpen", "unpadded", "layout", "title", "onConfirm", "onDismiss", "onAfterLeave", "onAfterEnter", "confirmLabel", "confirmWorking", "renderBackground", "children", "contentHeader", "image", "secondaryLabel", "onSecondaryAction"]);
     var onDismiss = confirmWorking ? undefined : propsOnDismiss;
     var footerActions = [];
     var workingProps = confirmWorking ? {
@@ -61,7 +62,8 @@ const ContextModal = /*#__PURE__*/function () {
       isOpen: isOpen,
       onEscapeKeyup: onDismiss,
       onOutsideModalClick: onDismiss,
-      onAfterLeave: onAfterLeave
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
       "data-modal": true

package/dist/esm/Modal/GenericModal/GenericModal.mjs

@@ -14,6 +14,7 @@ const GenericModal = /*#__PURE__*/function () {
       focusLockDisabled = _a.focusLockDisabled,
       onEscapeKeyup = _a.onEscapeKeyup,
       onOutsideModalClick = _a.onOutsideModalClick,
+      onAfterEnter = _a.onAfterEnter,
       propsOnAfterLeave = _a.onAfterLeave;
     var reactId = useId();
     var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
@@ -39,16 +40,15 @@ const GenericModal = /*#__PURE__*/function () {
         onOutsideModalClick === null || onOutsideModalClick === void 0 ? void 0 : onOutsideModalClick(event);
       }
     };
-    var focusAccessibleLabel = function () {
-      if (modalLayer) {
-        var labelElement = document.getElementById(labelledByID);
-        if (labelElement) {
-          labelElement.focus();
-        }
+    var focusOnAccessibleLabel = function () {
+      // Check if focus already exists within the modal
+      if (modalLayer === null || modalLayer === void 0 ? void 0 : modalLayer.contains(document.activeElement)) {
+        return;
       }
+      var labelElement = document.getElementById(labelledByID);
+      labelElement === null || labelElement === void 0 ? void 0 : labelElement.focus();
     };
     var a11yWarn = function () {
-      if (!modalLayer) return;
       // Ensure that consumers have provided an element that labels the modal
       // to meet ARIA accessibility guidelines.
       if (!document.getElementById(labelledByID)) {
@@ -66,8 +66,11 @@ const GenericModal = /*#__PURE__*/function () {
     };
     var onAfterEnterHandler = function () {
       scrollModalToTop();
-      focusAccessibleLabel();
-      a11yWarn();
+      if (modalLayer) {
+        onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
+        focusOnAccessibleLabel();
+        a11yWarn();
+      }
     };
     var onBeforeEnterHandler = function () {
       preventBodyScroll();

package/dist/esm/Modal/InputEditModal/InputEditModal.mjs

@@ -35,7 +35,8 @@ const InputEditModal = /*#__PURE__*/function () {
       _e = _a.unpadded,
       unpadded = _e === void 0 ? false : _e,
       propsOnDismiss = _a.onDismiss,
-      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss"]);
+      onAfterEnter = _a.onAfterEnter,
+      props = __rest(_a, ["isOpen", "mood", "title", "onSubmit", "onSecondaryAction", "onAfterLeave", "localeDirection", "submitLabel", "dismissLabel", "secondaryLabel", "submitWorking", "children", "unpadded", "onDismiss", "onAfterEnter"]);
     var onDismiss = submitWorking ? undefined : propsOnDismiss;
     var submitAction = {
       label: submitLabel,
@@ -55,7 +56,8 @@ const InputEditModal = /*#__PURE__*/function () {
     return /*#__PURE__*/React.createElement(GenericModal, {
       isOpen: isOpen,
       onEscapeKeyup: onDismiss,
-      onAfterLeave: onAfterLeave
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: onAfterEnter
     }, /*#__PURE__*/React.createElement("div", __assign({
       className: styles.modal,
       dir: localeDirection,

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs

@@ -44,7 +44,11 @@ const LinkModal = /*#__PURE__*/function () {
       title: defaultHref ? "Edit link" : "Add link",
       onSubmit: handleSubmit,
       onDismiss: onDismiss,
-      onAfterLeave: onAfterLeave
+      onAfterLeave: onAfterLeave,
+      onAfterEnter: function () {
+        var _a;
+        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }
     }, /*#__PURE__*/React.createElement(TextField, {
       id: "href",
       type: "text",

package/dist/esm/index.css

@@ -3,8 +3,8 @@
 .Wrapper-module_wrapper__89WmC{background:var(--color-gray-100,#f9f9f9);display:grid;grid-template-rows:min-content 1fr min-content;min-height:100vh;position:relative}
 .FooterActions-module_footerAction__v7eL-{display:flex;flex-basis:auto;flex-grow:1}.FooterActions-module_footerActionPrevious__2XByZ{grid-area:"prev";justify-content:start}.FooterActions-module_footerActionNext__IKRta{grid-area:"next";justify-content:end}
 .FooterRoot-module_footerRoot__N-6nQ{align-items:center;background:var(--color-blue-500,#0168b3);display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template-areas:"prev stepper next";grid-template-columns:1fr 2fr 1fr;justify-content:center;padding:var(--spacing-24,1.5rem) var(--spacing-12,.75rem)}@media (min-width:768px){.FooterRoot-module_footerRoot__N-6nQ{bottom:0;grid-template-columns:1fr 5fr 1fr;padding:var(--spacing-24,1.5rem) var(--spacing-32,2rem);position:sticky;z-index:1}}
-.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Titles-module_titles__JYwU0{align-items:center;flex-grow:1;grid-area:titles;justify-content:center}.Titles-module_pageTitle__YDp9S,.Titles-module_titles__JYwU0{display:flex;flex-direction:column}.Titles-module_prefix__40x8n{margin-bottom:var(--spacing-4,.25rem)}.Titles-module_status__huuP7{margin-top:var(--spacing-8,.5rem)}
+.Actions-module_actions__Prrp0{align-items:center;display:flex;flex-direction:column;flex-grow:1;grid-area:actions;justify-content:center}@media (min-width:768px){.Actions-module_actions__Prrp0{align-items:flex-start;flex-direction:row;justify-content:flex-end;margin-top:calc(var(--spacing-12, .75rem)*-1)}}
 .Branding-module_branding__4h-rD{display:flex;flex-grow:1;grid-area:branding;justify-content:center;padding-top:var(--spacing-4,.25rem)}@media (min-width:768px){.Branding-module_branding__4h-rD{justify-content:unset}}.Branding-module_logo__vqqec{flex-basis:7.5rem}
 .ProgressStepper-module_stepsContainer__WMxXN{grid-area:stepper;width:100%}.ProgressStepper-module_stepList__b1wWX{align-items:flex-end;display:none;justify-content:center;list-style:none;margin:0;padding:0}@media (min-width:768px){.ProgressStepper-module_stepList__b1wWX{display:flex}}.ProgressStepper-module_step__-Ep19{container:step/inline-size;display:flex;flex-basis:100%;flex-grow:1;justify-content:center;max-width:var(--spacing-96,6rem);overflow-wrap:break-word;position:relative}.ProgressStepper-module_stepContent__B4uFS{align-items:center;display:flex;flex-direction:column}.ProgressStepper-module_stepIndicator__-qEWT{height:1.25rem;position:relative;width:1.25rem}.ProgressStepper-module_stepName__hS4lp{display:none;font-weight:var(--typography-paragraph-bold-font-weight,600);margin-bottom:var(--spacing-12,.75rem);text-align:center}.ProgressStepper-module_stepIcon__0Kh4y{color:var(--color-white,#fff);height:1.25rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1.25rem}.ProgressStepper-module_stepDivider__KEZPU{border:var(--spacing-1,.0625rem) solid var(--color-white,#fff);border-radius:var(--border-solid-border-radius,7px);display:flex;flex-grow:1;height:0;left:100%;margin:0;min-width:calc(100% - var(--spacing-24, 1.5rem));position:absolute;top:calc(100% - .625rem);transform:translateX(-50%)}[dir=rtl] .ProgressStepper-module_stepDivider__KEZPU{left:unset;right:100%;transform:translateX(50%)}.ProgressStepper-module_stepperDescription__B00hX{display:flex;justify-content:center}@media (min-width:768px){.ProgressStepper-module_stepperDescription__B00hX{height:0;overflow:hidden;position:absolute;width:0}}@container step (min-width: 4.5rem){.ProgressStepper-module_stepName__hS4lp{display:inline}}
 .Root-module_root__7DVw5{align-items:center;background-color:var(--color-white,#fff);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06));display:grid;flex-grow:1;gap:var(--spacing-16,1rem);grid-template:"branding" min-content "titles" max-content "actions" min-content/1fr;justify-content:center;padding:var(--spacing-24,1.5rem);text-align:center}@media (min-width:768px){.Root-module_root__7DVw5{align-items:start;grid-template:"branding titles actions" min-content/1fr max-content 1fr;position:sticky;top:0;z-index:1}}