@jobber/components 8.21.0 → 8.22.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);
@@ -10054,6 +10075,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;