@jobber/components 9.5.3 → 9.6.0

package/dist/styles.css

@@ -4210,8 +4210,8 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .EySvIEsW9Q4-,
-.F94vaco3HkM-,
-.IYgNfHHPVFY- {
+:where(.F94vaco3HkM-),
+:where(.IYgNfHHPVFY-) {
   --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
   --comboboxPrimitive-control-height: calc(
     var(--comboboxPrimitive-field-height) - (var(--border-base) * 2)
@@ -4251,7 +4251,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   box-sizing: border-box;
 }
 
-.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible):not([data-popup-open]) {
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible):not(
+    [data-popup-open]
+  ) {
   z-index: 1;
   z-index: var(--elevation-base);
   box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
@@ -4264,7 +4266,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border-color: var(--color-critical);
 }
 
-.EySvIEsW9Q4-:not([data-disabled]):not(:has(.L-KgsoDZ360-:focus-visible)):hover {
+.EySvIEsW9Q4-:not([data-disabled]):not(
+    :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
+  ):hover {
   box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
   box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
 }
@@ -4277,7 +4281,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
-    :has(.L-KgsoDZ360-:focus-visible)
+    :has(.L-KgsoDZ360-:focus-visible, > .F94vaco3HkM-:focus-visible)
   ):hover,
 .EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
   box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
@@ -4293,11 +4297,13 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
   background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
+  cursor: not-allowed;
 }
 
 .EySvIEsW9Q4-[data-disabled] :disabled {
   -webkit-text-fill-color: hsl(0, 0%, 58%);
   -webkit-text-fill-color: var(--color-disabled);
+  cursor: not-allowed;
   opacity: 1;
 }
 
@@ -4320,6 +4326,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
           appearance: none;
 }
 
+.EySvIEsW9Q4- > .L-KgsoDZ360- {
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+  width: auto;
+}
+
 .L-KgsoDZ360-::-webkit-input-placeholder {
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
@@ -4390,7 +4402,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
 }
 
-.F94vaco3HkM- {
+:where(.F94vaco3HkM-) {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -4436,7 +4448,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
-.IYgNfHHPVFY- {
+:where(.IYgNfHHPVFY-) {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex: 0 0 auto;
@@ -4456,7 +4468,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   cursor: pointer;
 }
 
-.EySvIEsW9Q4- > .F94vaco3HkM- {
+.EySvIEsW9Q4- > :where(.F94vaco3HkM-) {
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;
   -ms-flex-pack: center;
@@ -4476,20 +4488,20 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background: transparent;
 }
 
-.F94vaco3HkM-:hover,
-.IYgNfHHPVFY-:hover {
+:where(.F94vaco3HkM-:hover, .IYgNfHHPVFY-:hover) {
   color: hsl(197, 90%, 12%);
   color: var(--color-heading);
 }
 
-.F94vaco3HkM-:focus-visible:not([data-popup-open]) {
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):focus-visible:not(
+    [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);
   outline: none;
 }
 
-.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible,
-.IYgNfHHPVFY-:focus-visible {
+:where(.IYgNfHHPVFY-: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);
   border-radius: 4px;
@@ -4497,7 +4509,11 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   outline: none;
 }
 
-.IYgNfHHPVFY-:has(+ .F94vaco3HkM-) {
+:where(.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible) {
+  outline: none;
+}
+
+:where(.IYgNfHHPVFY-:has(+ .F94vaco3HkM-)) {
   min-width: 24px;
   min-width: var(--space-large);
   margin-right: 4px;
@@ -4545,7 +4561,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: var(--color-disabled);
   background-color: hsl(0, 0%, 93%);
   background-color: var(--color-disabled--secondary);
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .EySvIEsW9Q4- > .F94vaco3HkM-[data-disabled],
@@ -4553,30 +4569,35 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
   background: transparent;
-  cursor: default;
+  cursor: not-allowed;
 }
 
-.qfx6EynKdsk- {
+:where(.qfx6EynKdsk-) {
   z-index: 1001;
   z-index: var(--elevation-modal);
   width: var(--anchor-width);
   max-width: var(--available-width);
 }
 
-.LOetsPPEwOk- {
+:where(.LOetsPPEwOk-) {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
-  max-height: min(calc(16px * 18), var(--available-height));
-  max-height: min(calc(var(--base-unit) * 18), var(--available-height));
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - 16px))
+  );
+  max-height: min(
+    72vh,
+    max(0px, calc(var(--available-height) - var(--space-base)))
+  );
   min-width: calc(16px * 12.5);
   min-width: calc(var(--base-unit) * 12.5);
   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(--space-small);
+  padding: var(--space-none);
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   border-radius: 8px;
@@ -4618,27 +4639,28 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   background-color: var(--color-surface);
 }
 
-.TCtrYZwnZYo- {
+:where(.TCtrYZwnZYo-) {
   display: grid;
+  -ms-flex-line-pack: start;
+      align-content: start;
   max-height: inherit;
   min-height: 0;
-  padding: var(--space-none);
+  padding: 8px;
+  padding: var(--space-small);
   overflow: auto;
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
+  grid-auto-rows: -webkit-max-content;
+  grid-auto-rows: max-content;
   grid-template-columns: 1fr;
   -webkit-overflow-scrolling: touch;
 }
 
-.TCtrYZwnZYo-:empty {
+.TCtrYZwnZYo-:empty,
+.TCtrYZwnZYo-[data-empty] {
   padding: var(--space-none);
 }
 
-.LOetsPPEwOk- > .L-KgsoDZ360- + .TCtrYZwnZYo- {
-  padding: 8px;
-  padding: var(--space-small);
-}
-
 .M166bxiQs88-:not(:empty) {
   display: -ms-flexbox;
   display: flex;
@@ -4647,12 +4669,18 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   min-height: calc(16px * 2.5);
   min-height: calc(var(--base-unit) * 2.5);
   box-sizing: border-box;
-  padding: 8px;
-  padding: var(--space-small);
+  padding: 16px;
+  padding: var(--space-base);
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
 }
 
+:where(._4lKs8q6dvXs-) {
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+}
+
 .Cm53I7O4mMw- {
   display: -ms-flexbox;
   display: flex;
@@ -4701,7 +4729,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .Cm53I7O4mMw-[data-disabled] {
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .Cm53I7O4mMw-[data-disabled]:hover {
@@ -4776,7 +4804,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
           transform: rotate(45deg);
 }
 
-.pkc7PhhfCuk- {
+:where(.pkc7PhhfCuk-) {
   display: -ms-flexbox;
   display: flex;
   -ms-flex: 1 1 auto;
@@ -4794,11 +4822,12 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
 .pkc7PhhfCuk- .L-KgsoDZ360- {
   width: auto;
-  height: calc(16px * 1.5);
-  height: calc(var(--base-unit) * 1.5);
+  height: calc(16px * 1.25);
+  height: calc(var(--base-unit) * 1.25);
   min-width: 0;
   padding: 0;
-  line-height: 1.25;
+  line-height: calc(16px * 1.25);
+  line-height: calc(var(--base-unit) * 1.25);
   -ms-flex: 1 1 0px;
       flex: 1 1 0;
 }
@@ -4834,11 +4863,13 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .fdKYm3GTKwk- {
   display: -ms-inline-flexbox;
   display: inline-flex;
-  min-height: calc(16px * 1.5);
-  min-height: calc(var(--base-unit) * 1.5);
+  height: calc(16px * 1.25);
+  height: calc(var(--base-unit) * 1.25);
+  min-height: calc(16px * 1.25);
+  min-height: calc(var(--base-unit) * 1.25);
   box-sizing: border-box;
-  padding: 0 8px;
-  padding: 0 var(--space-small);
+  padding: 0 calc(8px - 2px);
+  padding: 0 calc(var(--space-small) - var(--space-smallest));
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border--interactive);
   border-radius: 4px;
@@ -4929,7 +4960,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .vzuaMzxA96M-[data-disabled] {
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .fdKYm3GTKwk-[data-disabled] .vzuaMzxA96M-,
@@ -5435,6 +5466,692 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   width: 100%;
 }
 
+.B0QmBtwlnHs- {
+  display: grid;
+  gap: 4px;
+  grid-gap: 4px;
+  grid-gap: var(--space-smaller);
+  gap: var(--space-smaller);
+}
+
+.RViH4KcR7S4-.RViH4KcR7S4- {
+  --comboboxPrimitive-field-height: calc(var(--base-unit) * 3);
+  --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-chip-padding-block: var(--space-small);
+  --combobox-chip-padding-inline: var(--space-slim);
+  --combobox-hasLabel-control-padding-top: calc(
+    var(--space-base) + var(--space-smaller)
+  );
+  --combobox-hasLabel-control-padding-bottom: calc(
+    var(--space-small) - var(--space-smallest)
+  );
+  --combobox-hasLabel-chips-padding-top: calc(
+    var(--space-base) + var(--space-smaller)
+  );
+  --combobox-hasLabel-chips-padding-bottom: calc(
+    var(--space-small) - var(--space-smallest)
+  );
+  --combobox-trigger-padding-inline-start: var(--space-small);
+  --combobox-trigger-padding-inline-end: var(--space-base);
+}
+
+.PhTQQLSQRfU-.PhTQQLSQRfU- {
+  --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.25);
+  --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-chip-padding-block: var(--space-smaller);
+  --combobox-chip-padding-inline: var(--space-slim);
+  --combobox-hasLabel-control-padding-top: var(
+    --comboboxPrimitive-field-padding-block
+  );
+  --combobox-hasLabel-control-padding-bottom: var(
+    --comboboxPrimitive-field-padding-block
+  );
+  --combobox-hasLabel-chips-padding-top: var(--combobox-chip-padding-block);
+  --combobox-hasLabel-chips-padding-bottom: var(--combobox-chip-padding-block);
+  --combobox-trigger-padding-inline-start: var(--space-smaller);
+  --combobox-trigger-padding-inline-end: var(--space-slim);
+}
+
+._2GAP0lCM9iU-._2GAP0lCM9iU- {
+  --comboboxPrimitive-field-height: calc(var(--base-unit) * 3.5);
+  --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --combobox-chip-padding-block: var(--space-slim);
+  --combobox-chip-padding-inline: var(--space-slim);
+  --combobox-hasLabel-control-padding-top: calc(
+    var(--space-large) + var(--space-smaller) - var(--border-base)
+  );
+  --combobox-hasLabel-control-padding-bottom: calc(
+    var(--space-small) - var(--border-base)
+  );
+  --combobox-hasLabel-chips-padding-top: calc(
+    var(--space-large) + var(--space-smaller) - var(--border-base)
+  );
+  --combobox-hasLabel-chips-padding-bottom: calc(
+    var(--space-small) - var(--border-base)
+  );
+  --combobox-trigger-padding-inline-start: var(--space-small);
+  --combobox-trigger-padding-inline-end: var(--space-base);
+}
+
+.dCxC3YMhuE8-:not(.PhTQQLSQRfU-) {
+  --comboboxPrimitive-field-padding-inline: var(--space-base);
+}
+
+._0Ro-CPw-pBk- {
+  display: inline-block;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  line-height: 1.25;
+  line-height: var(--typography--lineHeight-base);
+}
+
+.DZ76oTE8arw- {
+  position: absolute;
+  top: 2px;
+  top: var(--space-smallest);
+  left: 0;
+  z-index: 1;
+  z-index: var(--elevation-base);
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0
+    calc(
+      var(--comboboxPrimitive-field-padding-inline) + 1px +
+        (16px * 3)
+    )
+    0 calc(var(--comboboxPrimitive-field-padding-inline) + 1px);
+  padding: 0
+    calc(
+      var(--comboboxPrimitive-field-padding-inline) + var(--border-base) +
+        (var(--base-unit) * 3)
+    )
+    0 calc(var(--comboboxPrimitive-field-padding-inline) + var(--border-base));
+  overflow: hidden;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  line-height: calc(16px * 1.25);
+  line-height: calc(var(--base-unit) * 1.25);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.DZ76oTE8arw-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.g6OcEs38-W4- {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.glfCUzOoqRs- {
+  margin-left: 4px;
+  margin-left: var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-weight: normal;
+}
+
+.hJLDca6C4mg- {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  line-height: 1.143;
+  line-height: var(--typography--lineHeight-tighter);
+}
+
+.Otz3vBkHwV4- {
+  color: hsl(6, 64%, 51%);
+  color: var(--color-critical);
+}
+
+.CU-nnrvSp74- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 8px;
+  gap: var(--space-small);
+  min-width: 0;
+}
+
+.YSCJxqQHVik-,
+.N-6lDLwoViE-,
+.UBwTOYJSaBc- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  min-width: calc(16px * 1.5);
+  min-width: calc(var(--base-unit) * 1.5);
+  min-height: calc(16px * 1.5);
+  min-height: calc(var(--base-unit) * 1.5);
+}
+
+.UBwTOYJSaBc- {
+  margin-left: 8px;
+  margin-left: var(--space-small);
+}
+
+.TysU0fU7VI0- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-pack: center;
+      justify-content: center;
+  min-width: 0;
+  gap: 2px;
+  gap: var(--space-smallest);
+}
+
+.oV92tIYbjmQ- {
+  min-width: 0;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font-weight: 600;
+  line-height: 1.25;
+  line-height: var(--typography--lineHeight-base);
+}
+
+.xN4obreiDIQ- {
+  min-width: 0;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  font-weight: normal;
+  line-height: 1.143;
+  line-height: var(--typography--lineHeight-tighter);
+}
+
+.N-6lDLwoViE- {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+}
+
+[data-disabled] .oV92tIYbjmQ-,
+[data-disabled] .xN4obreiDIQ-,
+[data-disabled] .N-6lDLwoViE- {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.wOdZIAytarU- {
+  width: calc(16px * 1.5);
+  width: calc(var(--base-unit) * 1.5);
+  height: calc(16px * 1.5);
+  height: calc(var(--base-unit) * 1.5);
+  min-width: calc(16px * 1.5);
+  min-width: calc(var(--base-unit) * 1.5);
+  min-height: calc(16px * 1.5);
+  min-height: calc(var(--base-unit) * 1.5);
+  box-sizing: border-box;
+  margin-right: 4px;
+  margin-right: var(--space-smaller);
+  padding: 4px;
+  padding: var(--space-smaller);
+  border-radius: 100%;
+  border-radius: var(--radius-circle);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-icon);
+  background-color: hsl(40, 9%, 85%);
+  background-color: var(--color-interactive--background);
+}
+
+.wOdZIAytarU-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: transparent;
+}
+
+.wOdZIAytarU-:not([data-disabled]):hover,
+.wOdZIAytarU-:not([data-disabled]):focus-visible {
+  color: hsl(198, 35%, 21%);
+  color: var(--color-icon);
+  background-color: hsl(43, 5%, 72%);
+  background-color: var(--color-interactive--background--hover);
+}
+
+.wOdZIAytarU-:not([data-disabled]):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);
+  outline: none;
+}
+
+._0jDShCnQjxc- {
+  display: -ms-inline-flexbox;
+  display: inline-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);
+}
+
+.mKKJ60Qxxmw-[data-popup-open] ._0jDShCnQjxc- {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+.v6DatDYO-gk- {
+  position: relative;
+  width: 100%;
+}
+
+.LyrziI4LY5w- {
+  padding: 0;
+}
+
+.ayWSHF3Mwfc- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  min-width: 0;
+  padding: var(--comboboxPrimitive-field-padding-block) 8px
+    var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+  padding: var(--comboboxPrimitive-field-padding-block) var(--space-small)
+    var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+}
+
+.Glijnn9-fUw- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-item-align: stretch;
+      align-self: stretch;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  min-width: 0;
+  padding-left: var(--combobox-trigger-padding-inline-start);
+  padding-right: var(--combobox-trigger-padding-inline-end);
+}
+
+._-0af5xRGjJ8- {
+  display: none;
+}
+
+.-io5LRdyoKw- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+}
+
+.dCxC3YMhuE8-:not(.PhTQQLSQRfU-) .-io5LRdyoKw- {
+  padding-top: var(--combobox-hasLabel-control-padding-top);
+  padding-bottom: var(--combobox-hasLabel-control-padding-bottom);
+}
+
+.dCxC3YMhuE8-:not(.PhTQQLSQRfU-) .ayWSHF3Mwfc- {
+  padding-top: var(--combobox-hasLabel-control-padding-top);
+  padding-bottom: var(--combobox-hasLabel-control-padding-bottom);
+}
+
+.QW4rICN6z4c- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  position: sticky;
+  bottom: 0;
+  padding: 8px;
+  padding: var(--space-small);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+._5BO0h44F148- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  min-height: calc(16px * 2.5);
+  min-height: calc(var(--base-unit) * 2.5);
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  line-height: var(--typography--lineHeight-base);
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+._5BO0h44F148-:hover,
+._5BO0h44F148-:focus-visible {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+._5BO0h44F148-: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);
+  outline: none;
+}
+
+.Anagh40JJn8- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  color: hsl(107, 58%, 33%);
+  color: var(--color-interactive);
+  line-height: 0;
+}
+
+.h7YEFty4FKU- {
+  min-width: 0;
+  color: inherit;
+}
+
+._9lX7ptB9-fA- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: end;
+      justify-content: flex-end;
+  position: sticky;
+  bottom: 0;
+  min-height: calc(16px * 4);
+  min-height: calc(var(--base-unit) * 4);
+  box-sizing: border-box;
+  padding: 16px;
+  padding: var(--space-base);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+.OrcuITnCXZk- {
+  margin-right: auto;
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  font-size: 12px;
+  font-size: var(--typography--fontSize-small);
+  line-height: 1.143;
+  line-height: var(--typography--lineHeight-tighter);
+}
+
+.ba6Qla9fx-g- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  min-height: calc(16px * 2.5);
+  min-height: calc(var(--base-unit) * 2.5);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  text-align: center;
+}
+
+.ba6Qla9fx-g-:empty {
+  min-height: 0;
+  padding: 0;
+}
+
+._5zl8TjDQSnQ- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  padding: 8px;
+  padding: var(--space-small);
+}
+
+.eir2NHzbDEQ- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  min-height: calc(16px * 2.5);
+  min-height: calc(var(--base-unit) * 2.5);
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+}
+
+.eCs-SVKfAYc- {
+  width: 100%;
+  height: 8px;
+  height: var(--space-small);
+}
+
+/* Size-specific chip padding lives in the sugared recipe because the primitive mirrors Base UI and has no size prop. */
+
+.eGxgqB0y1PA- {
+  padding: var(--combobox-chip-padding-block)
+    var(--combobox-chip-padding-inline);
+}
+
+.dCxC3YMhuE8- .eGxgqB0y1PA-:not(.PhTQQLSQRfU-) {
+  --combobox-chip-padding-inline: var(--space-base);
+}
+
+.Z07vGalCLy0- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  min-height: calc(16px * 1.25);
+  min-height: calc(var(--base-unit) * 1.25);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+  line-height: calc(16px * 1.25);
+  line-height: calc(var(--base-unit) * 1.25);
+}
+
+.dCxC3YMhuE8-:not(.PhTQQLSQRfU-) .eGxgqB0y1PA- {
+  padding-top: var(--combobox-hasLabel-chips-padding-top);
+  padding-bottom: var(--combobox-hasLabel-chips-padding-bottom);
+}
+
+.RViH4KcR7S4- > .mKKJ60Qxxmw-:not(.LyrziI4LY5w-),
+.PhTQQLSQRfU- > .mKKJ60Qxxmw-:not(.LyrziI4LY5w-),
+._2GAP0lCM9iU- > .mKKJ60Qxxmw-:not(.LyrziI4LY5w-) {
+  padding-left: var(--combobox-trigger-padding-inline-start);
+  padding-right: var(--combobox-trigger-padding-inline-end);
+}
+
+.eGxgqB0y1PA-:has(.d3M1dXi1qlU-) ._-3jWBOtOWpY-::-webkit-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.eGxgqB0y1PA-:has(.d3M1dXi1qlU-) ._-3jWBOtOWpY-:-ms-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.eGxgqB0y1PA-:has(.d3M1dXi1qlU-) ._-3jWBOtOWpY-::-ms-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.multipleChips:has(.multipleChip) .multipleInput::-webkit-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.multipleChips:has(.multipleChip) .multipleInput:-ms-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.multipleChips:has(.multipleChip) .multipleInput::-ms-input-placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+.eGxgqB0y1PA-:has(.d3M1dXi1qlU-) ._-3jWBOtOWpY-::placeholder {
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  opacity: 0;
+}
+
+@media (max-width: 489px) {
+  ._-0af5xRGjJ8- {
+    display: block;
+    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);
+  }
+
+  ._-0af5xRGjJ8-[hidden] {
+    display: none;
+  }
+
+  .m417c1Vd--E- {
+    width: 100%;
+    height: 90dvh;
+    max-height: 90dvh;
+    min-width: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 16px 16px 0 0;
+    border-radius: var(--radius-large) var(--radius-large) 0 0;
+  }
+
+  .m417c1Vd--E- > .zKAmeSlRRN4- {
+    -ms-flex-line-pack: start;
+        align-content: start;
+    grid-auto-rows: -webkit-max-content;
+    grid-auto-rows: max-content;
+    padding: 16px;
+    padding: var(--space-base);
+  }
+
+  .m417c1Vd--E- > .-io5LRdyoKw- + .zKAmeSlRRN4-:not([data-empty]) {
+    padding: 16px;
+    padding: var(--space-base);
+  }
+
+  ._9lX7ptB9-fA- {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    padding-bottom: calc(var(--space-base) + env(safe-area-inset-bottom));
+  }
+}
+
+@media (--small-screens-and-below) {
+  ._-0af5xRGjJ8- {
+    display: block;
+    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);
+  }
+
+  ._-0af5xRGjJ8-[hidden] {
+    display: none;
+  }
+
+  .m417c1Vd--E- {
+    width: 100%;
+    height: 90dvh;
+    max-height: 90dvh;
+    min-width: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 16px 16px 0 0;
+    border-radius: var(--radius-large) var(--radius-large) 0 0;
+  }
+
+  .m417c1Vd--E- > .zKAmeSlRRN4- {
+    -ms-flex-line-pack: start;
+        align-content: start;
+    grid-auto-rows: -webkit-max-content;
+    grid-auto-rows: max-content;
+    padding: 16px;
+    padding: var(--space-base);
+  }
+
+  .m417c1Vd--E- > .-io5LRdyoKw- + .zKAmeSlRRN4-:not([data-empty]) {
+    padding: 16px;
+    padding: var(--space-base);
+  }
+
+  ._9lX7ptB9-fA- {
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    padding-bottom: calc(var(--space-base) + env(safe-area-inset-bottom));
+  }
+}
+
 .Aj6o8FcaKHc- {
   container-name: var(--public-container-name);
   container-type: inline-size;