@jobber/components 7.8.0 → 7.9.0

package/dist/styles.css

@@ -3070,6 +3070,305 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-shadow: var(--shadow-high);
 }
 
+.h-nk89U2n6Q- * {
+  box-sizing: border-box;
+}
+
+.h-nk89U2n6Q- {
+  position: relative;
+}
+
+.krpkWzoaVcc- {
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+}
+
+._7sU7mp1w0jM- {
+  --menu-space: var(--space-small);
+  --menu-offset: var(--space-smallest);
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  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: 8px;
+  padding: var(--menu-space);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + var(--menu-space));
+  border-radius: 8px 8px 0 0;
+  border-radius: var(--radius-base) var(--radius-base) 0 0;
+  outline: none;
+  overflow-y: scroll;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 489px) {
+
+._7sU7mp1w0jM- {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    max-height: 70vh;
+}
+  }
+
+@media (--small-screens-and-below) {
+
+._7sU7mp1w0jM- {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    max-height: 70vh;
+}
+  }
+
+@media (min-width: 490px) {
+
+._7sU7mp1w0jM- {
+    width: calc(16px * 12.5);
+    width: calc(var(--base-unit) * 12.5);
+    padding: var(--menu-space);
+    border: 1px solid hsl(200, 13%, 87%);
+    border: var(--border-base) solid var(--color-border);
+    border-radius: 8px;
+    border-radius: var(--radius-base);
+    overflow: auto;
+}
+  }
+
+@media (--small-screens-and-up) {
+
+._7sU7mp1w0jM- {
+    width: calc(16px * 12.5);
+    width: calc(var(--base-unit) * 12.5);
+    padding: var(--menu-space);
+    border: 1px solid hsl(200, 13%, 87%);
+    border: var(--border-base) solid var(--color-border);
+    border-radius: 8px;
+    border-radius: var(--radius-base);
+    overflow: auto;
+}
+  }
+
+._4x-vvEmn4gM- {
+  padding: var(--menu-space) 0;
+}
+
+._4x-vvEmn4gM-,
+.i0QNcs4S-wk- {
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+}
+
+._4x-vvEmn4gM-:last-of-type {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+._4x-vvEmn4gM-:first-of-type {
+  padding-top: 0;
+}
+
+.i0QNcs4S-wk- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  grid-column: 1 / -1;
+}
+
+._7CsejipGrzM- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  outline: none;
+}
+
+.bO7lGVQC42c- {
+  display: grid;
+  max-height: inherit;
+  grid-template-columns: auto 1fr auto;
+}
+
+.u6fDgbWmPck- {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  -ms-flex-align: center;
+      align-items: center;
+  grid-gap: var(--menu-space);
+  gap: var(--menu-space);
+}
+
+.u6fDgbWmPck- > [data-menu-slot="icon"] {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+
+.u6fDgbWmPck- > [data-menu-slot="label"] {
+  grid-column-start: 2;
+}
+
+.-TSNrZBKZJI- {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+}
+
+.bO7lGVQC42c- .-TSNrZBKZJI-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+/* When a section follows a separator, avoid doubling vertical spacing.
+   Grid items don't collapse margins, so the section's top margin would add
+   to the separator's bottom margin. Remove the section margin in this case. */
+
+.bO7lGVQC42c- .i0QNcs4S-wk- + .-TSNrZBKZJI- {
+  margin-top: 0;
+}
+
+.zs7dS2pKjEw- {
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+}
+
+.MZJgunQcmdQ- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: calc(var(--menu-space) * 1.5) var(--menu-space);
+}
+
+._-1GOlrzd098- {
+  display: -ms-flexbox;
+  display: flex;
+  gap: var(--menu-space);
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+}
+
+/* Legacy variant focus-visible styling */
+
+._-1GOlrzd098-: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);
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.NYXV5w4pd0c- {
+  box-sizing: border-box;
+  padding: var(--menu-space);
+  border: none;
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: transparent;
+  text-align: left;
+  background-color: transparent;
+  cursor: pointer;
+
+  transition: background-color 200ms ease-out,
+    box-shadow 200ms ease-out;
+
+  transition: background-color var(--timing-base) ease-out,
+    box-shadow var(--timing-base) ease-out;
+}
+
+.NYXV5w4pd0c-:hover {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+/* Background on both legacy (:focus-visible) and RAC ([data-focused]) */
+
+.NYXV5w4pd0c-[data-focused] {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+/* Focus ring for legacy and RAC keyboard focus */
+
+.NYXV5w4pd0c-[data-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);
+}
+
+/* Do not show focus ring when item is hovered (pointer interaction) */
+
+.NYXV5w4pd0c-[data-hovered][data-focus-visible] {
+  box-shadow: none;
+}
+
+.NYXV5w4pd0c- span {
+  /* match appearance of Button labels */
+  -webkit-font-smoothing: antialiased;
+}
+
+.NYXV5w4pd0c-.baYK2zQ6-GA- > span {
+  color: hsl(6, 64%, 51%);
+  color: var(--color-destructive);
+}
+
+.A7T14ALVEKg- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--color-overlay);
+}
+
+@media (min-width: 490px) {
+
+.A7T14ALVEKg- {
+    background-color: transparent;
+}
+  }
+
+@media (--small-screens-and-up) {
+
+.A7T14ALVEKg- {
+    background-color: transparent;
+}
+  }
+
+.Lgbn9IRPI5Y- {
+  width: 100%;
+}
+
+.o-ps580KdWI- {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.Vw9MFreevMU- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  padding: 16px 16px 0;
+  padding: var(--space-base) var(--space-base) 0;
+}
+
+.wpNMcBuNwwY- {
+  min-width: 0;
+}
+
 .fpi0W91w2ag- * {
   box-sizing: border-box;
 }
@@ -3085,6 +3384,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .-DayvgvIcVo- {
   --menu-space: var(--space-small);
+  --menu-item-gap: 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-padding-right: var(--space-small);
   --menu-offset: var(--space-smallest);
   z-index: 1001;
   z-index: var(--elevation-modal);
@@ -3107,6 +3411,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 @media (max-width: 489px) {
 
 .-DayvgvIcVo- {
+    --menu-space: var(--space-base);
+    --menu-item-gap: var(--space-small);
+    --menu-item-min-height: calc(var(--base-unit) * 3);
+    --menu-item-padding-y: var(--space-small);
+    --menu-item-padding-x: var(--space-small);
+    --menu-item-padding-right: var(--space-small);
     position: fixed;
     right: 0;
     bottom: 0;
@@ -3118,6 +3428,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 @media (--small-screens-and-below) {
 
 .-DayvgvIcVo- {
+    --menu-space: var(--space-base);
+    --menu-item-gap: var(--space-small);
+    --menu-item-min-height: calc(var(--base-unit) * 3);
+    --menu-item-padding-y: var(--space-small);
+    --menu-item-padding-x: var(--space-small);
+    --menu-item-padding-right: var(--space-small);
     position: fixed;
     right: 0;
     bottom: 0;
@@ -3191,50 +3507,112 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   grid-template-columns: auto 1fr auto;
 }
 
+.J3CW8IU48RM- {
+  --menu-space: var(--space-base);
+  --menu-item-gap: var(--space-small);
+  --menu-item-min-height: calc(var(--base-unit) * 3);
+  --menu-item-padding-y: var(--space-small);
+  --menu-item-padding-x: var(--space-small);
+  --menu-item-padding-right: var(--space-small);
+  box-sizing: border-box;
+  padding: 16px;
+  padding: var(--menu-space);
+  padding-bottom: 16px;
+  padding-bottom: var(--menu-space);
+}
+
 .bWR8m7-LKg4- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
   -ms-flex-align: center;
       align-items: center;
-  grid-gap: var(--menu-space);
-  gap: var(--menu-space);
+  width: 100%;
+  grid-gap: var(--menu-item-gap);
+  gap: var(--menu-item-gap);
 }
 
-.bWR8m7-LKg4- > [data-menu-slot="icon"] {
+.bWR8m7-LKg4- > [data-menu-slot="icon"],
+.bWR8m7-LKg4- > [data-menu-slot="prefix"] {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  justify-self: start;
   grid-column-start: 1;
   grid-row-start: 1;
 }
 
 .bWR8m7-LKg4- > [data-menu-slot="label"] {
   grid-column-start: 2;
+  width: 100%;
+  min-width: 0;
+  justify-self: start;
 }
 
-.PH5vvtLgvXI- {
+.fzLvI88EH3s- > [data-menu-slot="label"] {
+  grid-column: 1 / 3;
+}
+
+.bWR8m7-LKg4- > [data-menu-slot="suffix"] {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  grid-column-start: 3;
+  grid-row-start: 1;
+  justify-self: end;
+  min-width: calc(16px * 1.5);
+  min-width: calc(var(--base-unit) * 1.5);
+}
+
+.bWR8m7-LKg4- > [data-menu-slot="suffix"][data-unchecked] {
+  visibility: hidden;
+}
+
+.PH5vvtLgvXI-,
+.Q0ssxff-Qo4- {
   display: grid;
   grid-template-columns: subgrid;
   grid-column: 1 / -1;
   grid-column-start: 1;
 }
 
-.QInUBKqkrl0- .PH5vvtLgvXI-:not(:first-child) {
+._2hYsKO-OHAI- {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-column-start: 1;
+}
+
+.QInUBKqkrl0- .PH5vvtLgvXI-:not(:first-child),
+.QInUBKqkrl0- .Q0ssxff-Qo4-:not(:first-child) {
   margin-top: 8px;
   margin-top: var(--space-small);
 }
 
-/* When a section follows a separator, avoid doubling vertical spacing.
-   Grid items don't collapse margins, so the section's top margin would add
-   to the separator's bottom margin. Remove the section margin in this case. */
-
-.QInUBKqkrl0- .jnggqK3YTIU- + .PH5vvtLgvXI- {
+.QInUBKqkrl0- .jnggqK3YTIU- + .PH5vvtLgvXI-,
+.QInUBKqkrl0- .jnggqK3YTIU- + .Q0ssxff-Qo4- {
   margin-top: 0;
 }
 
-.iJjIifpa9bk- {
+.iJjIifpa9bk-,
+.BklkzNPbJ5Q- {
   grid-column: 1 / -1;
   grid-column-start: 1;
 }
 
+._5-p9DbyRav4- {
+  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);
+}
+
 .Bq7pLWj3jm4- {
   display: -ms-flexbox;
   display: flex;
@@ -3252,8 +3630,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: 100%;
 }
 
-/* Legacy variant focus-visible styling */
-
 .P4Sdaq0-lZs-: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);
@@ -3262,23 +3638,42 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .M1BgN-oCmKw- {
+  width: 100%;
+  min-height: var(--menu-item-min-height);
   box-sizing: border-box;
-  padding: var(--menu-space);
+  padding-top: var(--menu-item-padding-y);
+  padding-bottom: var(--menu-item-padding-y);
+  padding-left: var(--menu-item-padding-x);
+  padding-right: var(--menu-item-padding-right);
   border: none;
-  border-radius: 8px;
-  border-radius: var(--radius-base);
+  border-radius: 4px;
+  border-radius: var(--radius-small);
   outline: transparent;
+  color: inherit;
   text-align: left;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
   background-color: transparent;
   cursor: pointer;
 
-  transition:
-    background-color 200ms ease-out,
+  transition: background-color 200ms ease-out,
     box-shadow 200ms ease-out;
 
-  transition:
-    background-color var(--timing-base) ease-out,
+  transition: background-color var(--timing-base) ease-out,
     box-shadow var(--timing-base) ease-out;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.fzLvI88EH3s- {
+  --menu-item-padding-right: var(--space-smaller);
+}
+
+.M1BgN-oCmKw-:visited {
+  color: inherit;
 }
 
 .M1BgN-oCmKw-:hover {
@@ -3286,28 +3681,27 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: var(--color-surface--hover);
 }
 
-/* Background on both legacy (:focus-visible) and RAC ([data-focused]) */
+.M1BgN-oCmKw-.U9ihZZavz9w-:hover {
+  background-color: hsl(7, 63%, 95%);
+  background-color: var(--color-critical--surface);
+}
 
-.M1BgN-oCmKw-[data-focused] {
+.M1BgN-oCmKw-[data-highlighted] {
   background-color: hsl(43, 18%, 92%);
   background-color: var(--color-surface--hover);
 }
 
-/* Focus ring for legacy and RAC keyboard focus */
+.M1BgN-oCmKw-.U9ihZZavz9w-[data-highlighted] {
+  background-color: hsl(7, 63%, 95%);
+  background-color: var(--color-critical--surface);
+}
 
-.M1BgN-oCmKw-[data-focus-visible] {
+.M1BgN-oCmKw-: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);
 }
 
-/* Do not show focus ring when item is hovered (pointer interaction) */
-
-.M1BgN-oCmKw-[data-hovered][data-focus-visible] {
-  box-shadow: none;
-}
-
 .M1BgN-oCmKw- span {
-  /* match appearance of Button labels */
   -webkit-font-smoothing: antialiased;
 }
 
@@ -3342,6 +3736,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
+.nf47GCAYI-c- {
+  padding: 0;
+}
+
+.cuw8ct7rX6s- {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.a6uZEXgX8sg- {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  padding: 0 16px
+    calc(env(safe-area-inset-bottom) + 16px);
+  padding: 0 var(--space-base)
+    calc(env(safe-area-inset-bottom) + var(--space-base));
+}
+
 ._5OJ7B6mFcwk- {
   width: 100%;
 }
@@ -3356,6 +3768,103 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   white-space: nowrap;
 }
 
+.P9RktRZz8u4- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+  grid-column: 1 / -1;
+}
+
+.Qf3IFhKJwQ0- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--color-overlay);
+}
+
+._868PDAA3U2M- {
+  display: -ms-flexbox;
+  display: flex;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  max-height: 70vh;
+  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);
+  border-radius: 16px 16px 0 0;
+  border-radius: var(--radius-large) var(--radius-large) 0 0;
+  outline: none;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -ms-flex-direction: column;
+      flex-direction: column;
+}
+
+.eKuxReHyju8- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+}
+
+._1I0eaFciaWo- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  min-height: 0;
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.BYEzqcZUGls- {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: calc(40px + env(safe-area-inset-bottom));
+  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1));
+  background: linear-gradient(to bottom, transparent, var(--color-surface));
+  pointer-events: none;
+}
+
+.yL7--3ni8BM- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+      align-items: flex-start;
+}
+
+.T8y6sv17efg- {
+  gap: 0;
+}
+
+.VOiBogstpjU- {
+  gap: 4px;
+  gap: var(--space-smaller);
+}
+
+.bvlhcaSPuO8- {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  line-height: 0;
+}
+
 .kub1yKbFFN0- {
   display: -ms-flexbox;
   display: flex;