@jobber/components 8.21.1 → 8.23.0

package/dist/styles.css

@@ -3567,6 +3567,27 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   z-index: var(--elevation-modal);
 }
 
+/*
+ * Explicit, documented Base UI Menu backdrop. Base UI renders a transparent
+ * internal backdrop for modal menus to capture outside presses, but that
+ * internal backdrop has no z-index. When a Menu opens inside an overlay that
+ * sets its own stacking (e.g. Dialog's backdrop at --elevation-modal), the
+ * overlay paints above the internal backdrop and steals the dismissing click —
+ * closing the overlay instead of just the menu. Rendering Menu.Backdrop at the
+ * same elevation lets the menu's backdrop win by DOM order and intercept the
+ * click, so an outside press dismisses only the menu.
+ */
+
+.wqvf3hcDMM0- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
 .-DayvgvIcVo- {
   --menu-space: var(--space-small);
   --menu-item-gap: var(--space-small);
@@ -5483,6 +5504,331 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   font-size: var(--typography--fontSize-small);
 }
 
+/* ============================================================
+   SelectPrimitive
+   Styled wrappers around BaseUI Select parts with Atlantis tokens.
+   No field structure abstraction — consumers compose their own.
+   ============================================================ */
+
+/* ------ Trigger ------ */
+
+.WQiJQH4jadQ- {
+  /* Field tokens */
+  --field--placeholder-color: var(--color-text--secondary);
+  --field--value-color: var(--color-heading);
+  --field--border-color: var(--color-border--interactive);
+  --field--height: var(--space-largest);
+  --field--padding-x: var(--space-base);
+  --field--background-color: var(--color-surface);
+  /* Space reserved on the right for the chevron icon */
+  --field--icon-area: calc(
+    var(--base-unit) * 1.25 + var(--field--padding-x) + var(--space-small)
+  );
+
+  display: -ms-flexbox;
+
+  display: flex;
+  position: relative;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  height: 48px;
+  height: var(--field--height);
+  box-sizing: border-box;
+  padding: 0 calc(
+    16px * 1.25 + 16px + 8px
+  ) 0 16px;
+  padding: 0 var(--field--icon-area) 0 var(--field--padding-x);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--field--border-color);
+  border-top-right-radius: 8px;
+  border-top-right-radius: var(
+    --public-field--top-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(
+    --public-field--bottom-right-radius,
+    var(--radius-base)
+  );
+  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(
+    --public-field--bottom-left-radius,
+    var(--radius-base)
+  );
+  border-top-left-radius: 8px;
+  border-top-left-radius: var(
+    --public-field--top-left-radius,
+    var(--radius-base)
+  );
+  outline: none;
+  color: hsl(197, 90%, 12%);
+  color: var(--field--value-color);
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  text-align: left;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--field--background-color);
+  cursor: pointer;
+
+  transition: box-shadow 200ms ease-out,
+    border-color 200ms ease-out;
+
+  transition: box-shadow var(--timing-base) ease-out,
+    border-color var(--timing-base) ease-out;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.WQiJQH4jadQ-:focus-visible,
+.WQiJQH4jadQ-[data-popup-open] {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+.WQiJQH4jadQ-:disabled {
+  --field--placeholder-color: var(--color-disabled);
+  --field--value-color: var(--color-disabled);
+  --field--background-color: var(--color-disabled--secondary);
+  --field--border-color: var(--color-border);
+  cursor: not-allowed;
+}
+
+.WQiJQH4jadQ-[data-readonly] {
+  --field--border-color: var(--color-border);
+  --field--background-color: var(--color-disabled--secondary);
+  pointer-events: none;
+  cursor: default;
+}
+
+.WQiJQH4jadQ-[data-invalid] {
+  --field--border-color: var(--color-critical);
+}
+
+/* ------ Value / placeholder text ------ */
+
+.P2HhjOjxY34- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--field--value-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.WQiJQH4jadQ-[data-placeholder] .P2HhjOjxY34- {
+  color: var(--field--placeholder-color);
+}
+
+/* ------ Chevron icon ------ */
+
+.cxgFUCKcXcw- {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  right: var(--field--padding-x);
+  pointer-events: none;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -ms-flex-align: center;
+      align-items: center;
+}
+
+._3BEK4Z1gGis- {
+  display: -ms-flexbox;
+  display: flex;
+  transition: -webkit-transform 100ms;
+  transition: -webkit-transform var(--timing-quick);
+  transition: transform 100ms;
+  transition: transform var(--timing-quick);
+  transition: transform 100ms, -webkit-transform 100ms;
+  transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);
+}
+
+.WQiJQH4jadQ-[data-popup-open] ._3BEK4Z1gGis- {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+/* ============================================================
+   Popup / Dropdown — mirrors Menu dropdown styling
+   ============================================================ */
+
+.g221yZJtRrU- {
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
+.vifRnCQ18ss- {
+  min-width: var(--anchor-width);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  box-sizing: border-box;
+  padding: 0;
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: none;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.WsOmdkQ0SWU- {
+  --menu-space: var(--space-small);
+  --menu-item-min-height: calc(var(--base-unit) * 2.5);
+  --menu-item-padding-y: var(--space-small);
+  --menu-item-padding-x: var(--space-small);
+  --menu-item-gap: var(--space-small);
+
+  display: -ms-flexbox;
+
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - 16px))
+  );
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - var(--space-base)))
+  );
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--menu-space);
+  border-radius: inherit;
+  overflow: auto;
+}
+
+/* ------ Item ------ */
+
+.wQ2wXu1YH-k- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: var(--menu-item-gap);
+  width: 100%;
+  min-height: var(--menu-item-min-height);
+  box-sizing: border-box;
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  text-align: left;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  background: transparent;
+  cursor: pointer;
+
+  transition: background-color 200ms ease-out;
+
+  transition: background-color var(--timing-base) ease-out;
+}
+
+.wQ2wXu1YH-k-[data-highlighted] {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.wQ2wXu1YH-k-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: not-allowed;
+}
+
+/* ------ Item text ------ */
+
+._--Vi-17OUiU- {
+  -ms-flex: 1;
+      flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ------ Item indicator (checkmark) ------ */
+
+.CfjooR3I8Jc- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  /* Hidden by default; revealed via CSS when the item is selected.
+     Using visibility (not display) so layout width is always reserved. */
+  visibility: hidden;
+  min-width: calc(16px * 1.5);
+  min-width: calc(var(--base-unit) * 1.5);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+
+.wQ2wXu1YH-k-[data-selected] .CfjooR3I8Jc- {
+  visibility: visible;
+}
+
+/* ------ Separator ------ */
+
+.lI5-MyBERFY- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border: none;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+/* ------ Group ------ */
+
+._21z9KBWR06w- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+._21z9KBWR06w-:not(:last-child) {
+  padding-bottom: 8px;
+  padding-bottom: var(--space-small);
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+._21z9KBWR06w-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+/* ------ Group label ------ */
+
+.ZhtKkgZiSQI- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 8px 8px 4px;
+  padding: var(--space-small) var(--space-small) var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  font-weight: 400;
+}
+
 .kub1yKbFFN0- {
   display: -ms-flexbox;
   display: flex;
@@ -10054,6 +10400,345 @@ h2.react-datepicker__current-month {
       flex: 1 1 40%;
 }
 
+/* Dialog Sizes */
+.uYYyCR3l6E8- {
+  --dialog-popup-max-width: 440px;
+}
+.X1jGz-sLWf4- {
+  --dialog-popup-max-width: 720px;
+}
+._4zFf2PkFhaA- {
+  --dialog-popup-max-width: 1032px;
+}
+.nJoCr8oWJ7w- {
+  --dialog-popup-width: 100vw;
+  --dialog-popup-max-width: 100vw;
+  --dialog-popup-min-height: 100dvh;
+  /* No margins full screen — the viewport also drops its padding-block for
+     fullScreen (below) so the popup sits flush against every edge. Zeroing the
+     gap here also makes the sticky-scroll cap resolve to a flush 100dvh. */
+  --dialog-popup-margin-block: 0;
+  --dialog-popup-radius: 0;
+  --dialog-viewport-gap: 0px;
+}
+/* Header — commonly a title on the left and a dismiss button on the right.
+   Pinned via flex when it's a sibling of the scroll region (the default); it
+   scrolls when placed inside a `Dialog.ScrollArea`. `flex: 0 0 auto` keeps a
+   sticky header from shrinking. */
+.XFKiCQ8QbQU- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  gap: 8px;
+  gap: var(--space-small);
+  padding: 20px 24px 0;
+  padding: 20px var(--space-large) 0;
+}
+.FDOhnO0TT08- {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+}
+/* ScrollArea.Root — the scroll region. A `Dialog.Body` wraps itself in one; a
+   `Dialog.ScrollArea` is one placed explicitly. It fills the space between the
+   sticky regions and scrolls its content. */
+._8DjYA23vHXA- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+/* The ScrollArea.Viewport — the scrollable element. */
+.Bwr9IUYpLfM- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+}
+/* Re-enable the browser's native scrollbar — BaseUI hides it by default for its
+   own custom scrollbar. */
+._8DjYA23vHXA- .Bwr9IUYpLfM- {
+  scrollbar-width: auto;
+}
+._8DjYA23vHXA- .Bwr9IUYpLfM-::-webkit-scrollbar {
+  display: revert;
+}
+.zp9kx9uue2I- {
+  box-sizing: border-box;
+  padding: 24px;
+  padding: var(--space-large);
+}
+.EhtwBTy1ai4- {
+  padding: 0;
+}
+/* Footer — generic bottom region; owns padding only. Pinned via flex when it's
+   a sibling of the scroll region (the default); it scrolls when placed inside a
+   `Dialog.ScrollArea`. */
+.DRIJhI1knKw- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding: 0 24px 24px;
+  padding: 0 var(--space-large) var(--space-large);
+}
+/* Slide the bottom sheet up from the bottom on open/close. */
+.vmcZRwOcNMo- {
+  -webkit-transform: translateY(0px);
+  -webkit-transform: translateY(var(--drawer-swipe-movement-y, 0px));
+          transform: translateY(0px);
+          transform: translateY(var(--drawer-swipe-movement-y, 0px));
+  transition: -webkit-transform 200ms ease;
+  transition: -webkit-transform var(--timing-base) ease;
+  transition: transform 200ms ease;
+  transition: transform var(--timing-base) ease;
+  transition: transform 200ms ease, -webkit-transform 200ms ease;
+  transition: transform var(--timing-base) ease, -webkit-transform var(--timing-base) ease;
+}
+.vmcZRwOcNMo-[data-starting-style],
+  .vmcZRwOcNMo-[data-ending-style] {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+  }
+/* Full-screen bottom sheet */
+.vmcZRwOcNMo-[data-size="fullScreen"] {
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+/* Scroll divider — shown on a sticky Header/Footer only while the scroll region
+   actually overflows (BaseUI sets `data-has-overflow-y` on the ScrollArea root
+   when its content overflows). */
+.mFX7qDCd17I-:has([data-has-overflow-y]) .XFKiCQ8QbQU-[data-sticky],
+.vmcZRwOcNMo-:has([data-has-overflow-y]) .XFKiCQ8QbQU-[data-sticky] {
+  padding-bottom: 16px;
+  padding-bottom: var(--space-base);
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+.mFX7qDCd17I-:has([data-has-overflow-y]) .DRIJhI1knKw-[data-sticky],
+.vmcZRwOcNMo-:has([data-has-overflow-y]) .DRIJhI1knKw-[data-sticky] {
+  padding-top: 16px;
+  padding-top: var(--space-base);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+}
+/* Base backdrop styling */
+.NE-BIsVE-hE- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  /*
+   * Use a high (modal) z-index so the dialog and its dimmed backdrop render on
+   * top of the app's nav bars, headers, and other fixed UI instead of behind
+   * them. Every dialog renders its own backdrop at this same elevation (see the
+   * `forceRender` in DialogModal.tsx), so the frontmost dialog — portaled last —
+   * wins by DOM order: it both catches the dismissing outside press and lays its
+   * dim over the dialog beneath it.
+   */
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  background-color: rgba(121, 119, 114, 0.48);
+  backdrop-filter: blur(2px);
+  transition: opacity 200ms ease;
+  transition: opacity var(--timing-base) ease;
+}
+.NE-BIsVE-hE-[data-starting-style],
+  .NE-BIsVE-hE-[data-ending-style] {
+    opacity: 0;
+  }
+/*
+   * A nested dialog's backdrop (Base UI marks its viewport `data-nested`) must
+   * not transition: the outer dialog supplies the dim as it opens and closes, so the
+   * nested backdrop appears at full dim instantly and snaps away on close. A
+   * transition would flash the undimmed page on open and add extra dim on close.
+   */
+.NE-BIsVE-hE-:has(~ .hp70o-3Cf-w-[data-nested]) {
+    transition: none;
+  }
+.NE-BIsVE-hE-[data-starting-style]:has(~ .hp70o-3Cf-w-[data-nested]) {
+      opacity: 1;
+    }
+/*
+   * Only the frontmost dialog shows the dim overlay. When a dialog has another
+   * dialog open within it, Base UI marks its popup with `data-nested-dialog-open`;
+   * we make that dialog's backdrop fully transparent (no dim, no blur) so the dim
+   * is supplied solely by the frontmost dialog's backdrop. This keeps the dimming
+   * from compounding as dialogs stack. The popup lives inside the viewport,
+   * which is the backdrop's sibling.
+   */
+.NE-BIsVE-hE-:has(~ .hp70o-3Cf-w- .mFX7qDCd17I-[data-nested-dialog-open]) {
+    background-color: transparent;
+    backdrop-filter: none;
+  }
+/* Bottom sheet backdrop */
+[data-testid="ATL-BottomSheet-Backdrop"]:has(~ [data-dialog-variant="sheet"]) {
+  background-color: rgba(121, 119, 114, 0.48);
+  backdrop-filter: blur(2px);
+}
+.hp70o-3Cf-w- {
+  /* Gap between the popup and the viewport edge. Used here as the viewport
+     `padding-block`, and by the popup's `max-height` to cap it so the dialog
+     fits within the same gap (the var inherits down to the popup). */
+  --dialog-viewport-gap: var(--space-larger);
+
+  display: -ms-flexbox;
+
+  display: flex;
+  position: fixed;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  /* Vertical centering is done by the popup's `margin-block: auto`, not by
+     `place-items: center`. A centered grid/flex item taller than the viewport
+     drops its block-end gap when scrolled to the bottom (and plain `center`
+     would also push the top under the popup's `overflow: hidden` and clip it).
+     With `align-items: center` on the inline axis + the popup's auto block
+     margins, the popup centers when it fits and top-aligns when it overflows,
+     and this `padding-block` gap is preserved at *both* scroll ends. */
+  -ms-flex-align: center;
+      align-items: center;
+  padding-top: 32px;
+  padding-bottom: 32px;
+  padding-top: var(--dialog-viewport-gap);
+  padding-bottom: var(--dialog-viewport-gap);
+  overflow-y: auto;
+}
+/* Full screen sits flush against every edge — drop the viewport's gap. */
+.hp70o-3Cf-w-:has(.nJoCr8oWJ7w-) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.mFX7qDCd17I- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  width: calc(100vw - 2 * 16px);
+  width: var(--dialog-popup-width, calc(100vw - 2 * var(--space-base)));
+  max-width: 720px;
+  max-width: var(--dialog-popup-max-width, 720px);
+  /* Uncapped by default: with no sticky region the popup grows with its content
+     and the window (viewport) scrolls the whole dialog. A sticky Header/Footer
+     caps it (`.popup:has([data-sticky])` below) so the body scrolls inside. */
+  max-height: none;
+  max-height: var(--dialog-popup-max-height, none);
+  min-height: auto;
+  min-height: var(--dialog-popup-min-height, auto);
+  box-shadow: 0px 16px 16px 0px rgba(0, 0, 0, 0.075), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-high);
+  box-sizing: border-box;
+  border-radius: 8px;
+  border-radius: var(--dialog-popup-radius, var(--radius-base));
+  outline: none;
+  /* Clip content to the rounded corners so full-bleed panes (e.g. a split
+     view's coloured media pane) don't square them off. The popup's own
+     box-shadow (drop shadow + focus ring) is unaffected by its own overflow. */
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  transition: opacity 200ms ease, -webkit-transform 200ms ease;
+  transition: opacity var(--timing-base) ease, -webkit-transform var(--timing-base) ease;
+  transition: opacity 200ms ease, transform 200ms ease;
+  transition: opacity var(--timing-base) ease, transform var(--timing-base) ease;
+  transition: opacity 200ms ease, transform 200ms ease, -webkit-transform 200ms ease;
+  transition: opacity var(--timing-base) ease, transform var(--timing-base) ease, -webkit-transform var(--timing-base) ease;
+  /* `auto` centers the popup vertically in the flex-column viewport when it
+     fits, and collapses to 0 when it overflows (so it top-aligns and scrolls).
+     fullScreen overrides this var to offset the viewport padding. */
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-top: var(--dialog-popup-margin-block, auto);
+  margin-bottom: var(--dialog-popup-margin-block, auto);
+  -ms-flex-direction: column;
+      flex-direction: column;
+  /* Don't shrink — holding content height lets an uncapped (no sticky region)
+     dialog grow so the window scrolls the whole dialog, while a dialog with a
+     sticky Header/Footer is capped by `max-height` and scrolls its body. */
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.mFX7qDCd17I-:focus-visible {
+    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+    box-shadow: var(--shadow-focus);
+  }
+.mFX7qDCd17I-[data-starting-style],
+  .mFX7qDCd17I-[data-ending-style] {
+    opacity: 0;
+    -webkit-transform: scale(0.97);
+            transform: scale(0.97);
+  }
+/* Inside-scroll — when a Header/Footer is sticky (`[data-sticky]`), cap the
+   popup to the viewport (minus the edge gap) so the body scrolls inside between
+   the sticky regions. With nothing sticky the popup stays uncapped and grows,
+   and the window scrolls the whole dialog. */
+.mFX7qDCd17I-:has([data-sticky]) {
+  --dialog-popup-max-height: calc(100dvh - 2 * var(--dialog-viewport-gap));
+}
+/* Honor reduced-motion: drop the backdrop fade, the modal popup scale/fade, and
+   the sheet slide so the dialog appears and dismisses instantly. */
+@media (prefers-reduced-motion: reduce) {
+  .NE-BIsVE-hE-,
+  .mFX7qDCd17I-,
+  .vmcZRwOcNMo- {
+    transition: none;
+  }
+}
+
+/* Action-button layout used inside a Dialog.Footer — tertiary on the left,
+   primary/secondary grouped on the right. */
+.hKVNddbxkmo- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  width: 100%;
+}
+.nslrozOH-v4- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+.BrXAnQBttWE- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+._9Vgd-3YJxlI- {
+  -ms-flex-pack: start;
+      justify-content: flex-start;
+}
+._8HC9NqvmJdo- {
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+.ZZ3XuxGv6ow- > *,
+.ZZ3XuxGv6ow- > .BrXAnQBttWE- > *,
+.ZZ3XuxGv6ow- > .nslrozOH-v4- > *
+ {
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+}
+
 .VMuRkKeqAs8- {
   -webkit-transform-origin: 50% 47.5% 0;
           transform-origin: 50% 47.5% 0;