@jobber/components 8.20.1 → 8.21.0

package/dist/styles.css

@@ -4149,6 +4149,773 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
+.qWsLxPjCBI8- {
+  display: inline-block;
+  margin-bottom: 4px;
+  margin-bottom: var(--space-smaller);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  line-height: 1.25;
+  line-height: var(--typography--lineHeight-base);
+}
+
+.EySvIEsW9Q4-,
+.F94vaco3HkM-,
+.IYgNfHHPVFY- {
+  --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
+  --comboboxPrimitive-control-height: calc(
+    var(--comboboxPrimitive-field-height) - (var(--border-base) * 2)
+  );
+  --comboboxPrimitive-field-line-height: calc(var(--base-unit) * 1.25);
+  --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --comboboxPrimitive-field-padding-block: calc(
+    (
+        var(--comboboxPrimitive-field-height) -
+          var(--comboboxPrimitive-field-line-height) - (var(--border-base) * 2)
+      ) / 2
+  );
+}
+
+.EySvIEsW9Q4- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  min-height: var(--comboboxPrimitive-field-height);
+  box-sizing: border-box;
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.EySvIEsW9Q4- * {
+  box-sizing: border-box;
+}
+
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-: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%);
+  box-shadow: var(--shadow-focus);
+}
+
+.EySvIEsW9Q4-[data-invalid],
+.EySvIEsW9Q4-[data-invalid]:focus-within {
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.EySvIEsW9Q4-:not([data-disabled]):not(:has(.L-KgsoDZ360-: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);
+}
+
+.EySvIEsW9Q4-:not([data-disabled])[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
+  border-color: hsl(198, 35%, 21%);
+  border-color: var(--color-interactive--subtle);
+}
+
+.EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
+    :has(.L-KgsoDZ360-:focus-visible)
+  ):hover,
+.EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.EySvIEsW9Q4-[data-disabled] {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+}
+
+.EySvIEsW9Q4-[data-disabled] :disabled {
+  -webkit-text-fill-color: hsl(0, 0%, 58%);
+  -webkit-text-fill-color: var(--color-disabled);
+  opacity: 1;
+}
+
+.L-KgsoDZ360- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+  border: none;
+  border-radius: inherit;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--comboboxPrimitive-field-line-height);
+  background: transparent;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.L-KgsoDZ360-::-webkit-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-:-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-::-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input::-webkit-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input:-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input::-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-::placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-[data-disabled]::-webkit-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]:-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]::-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]::-webkit-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]:-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]::-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]::placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.F94vaco3HkM- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  width: 100%;
+  min-height: var(--comboboxPrimitive-field-height);
+  box-sizing: border-box;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  line-height: var(--comboboxPrimitive-field-line-height);
+  text-align: left;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  cursor: pointer;
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+.F94vaco3HkM-[data-placeholder] {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.KBJi5F0wWc0- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  color: currentColor;
+  line-height: 0;
+}
+
+.IYgNfHHPVFY- {
+  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: var(--comboboxPrimitive-control-height);
+  min-height: var(--comboboxPrimitive-control-height);
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: none;
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.EySvIEsW9Q4- > .F94vaco3HkM- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-pack: center;
+      justify-content: center;
+  width: auto;
+  min-width: var(--comboboxPrimitive-control-height);
+  min-height: var(--comboboxPrimitive-control-height);
+  box-sizing: border-box;
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  text-align: center;
+  background: transparent;
+}
+
+.F94vaco3HkM-:hover,
+.IYgNfHHPVFY-:hover {
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+}
+
+.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 {
+  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;
+  border-radius: var(--radius-small);
+  outline: none;
+}
+
+.IYgNfHHPVFY-:has(+ .F94vaco3HkM-) {
+  min-width: 24px;
+  min-width: var(--space-large);
+  margin-right: 4px;
+  margin-right: var(--space-smaller);
+  padding: 0;
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+}
+
+/* Standalone triggers own field border/shadow states; InputGroup owns them when the trigger is embedded. */
+
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-))[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
+  border-color: hsl(198, 35%, 21%);
+  border-color: var(--color-interactive--subtle);
+}
+
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not([data-disabled]):not(
+    :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);
+}
+
+.F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
+    [data-disabled]
+  ):not(:focus-visible):hover,
+.F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
+    [data-disabled]
+  )[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.F94vaco3HkM-[data-disabled] {
+  --comboboxPrimitive-field-border-width: var(--border-base);
+
+  border-color: hsl(200, 13%, 87%);
+
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+  cursor: default;
+}
+
+.EySvIEsW9Q4- > .F94vaco3HkM-[data-disabled],
+.IYgNfHHPVFY-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background: transparent;
+  cursor: default;
+}
+
+.qfx6EynKdsk- {
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+}
+
+.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));
+  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);
+  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;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.LOetsPPEwOk-[data-starting-style],
+.LOetsPPEwOk-[data-ending-style] {
+  opacity: 0;
+  -webkit-transform: scale(0.98);
+          transform: scale(0.98);
+}
+
+.LOetsPPEwOk-[data-instant] {
+  transition-duration: 0ms;
+}
+
+.LOetsPPEwOk-:has(> .L-KgsoDZ360-) {
+  padding: var(--space-none);
+}
+
+.LOetsPPEwOk- > .L-KgsoDZ360- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding: 16px
+    16px;
+  padding: var(--space-base)
+    var(--components-popup-input-padding, var(--space-base));
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border--interactive);
+  border-radius: var(--radius-none);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.TCtrYZwnZYo- {
+  display: grid;
+  max-height: inherit;
+  min-height: 0;
+  padding: var(--space-none);
+  overflow: auto;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  grid-template-columns: 1fr;
+  -webkit-overflow-scrolling: touch;
+}
+
+.TCtrYZwnZYo-:empty {
+  padding: var(--space-none);
+}
+
+.LOetsPPEwOk- > .L-KgsoDZ360- + .TCtrYZwnZYo- {
+  padding: 8px;
+  padding: var(--space-small);
+}
+
+.M166bxiQs88-:not(:empty) {
+  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);
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.Cm53I7O4mMw- {
+  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-radius: 4px;
+  border-radius: var(--radius-small);
+  outline: transparent;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font-weight: 600;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  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;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.jvrxEbmYGpM- {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  width: 100%;
+  gap: 8px;
+  grid-gap: 8px;
+  grid-gap: var(--space-small);
+  gap: var(--space-small);
+}
+
+.Cm53I7O4mMw-:hover,
+.Cm53I7O4mMw-[data-highlighted] {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.Cm53I7O4mMw-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: default;
+}
+
+.Cm53I7O4mMw-[data-disabled]:hover {
+  background-color: transparent;
+}
+
+.Cm53I7O4mMw-: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);
+}
+
+.GwotZ3R-quw- {
+  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;
+}
+
+.u5M1OKpKSWw- {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.u5M1OKpKSWw-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+.mpkTjdLrAUI- + .u5M1OKpKSWw- {
+  margin-top: var(--space-none);
+}
+
+._6UKKWI-irfo- {
+  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);
+}
+
+.UnM-udfURI4- {
+  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);
+}
+
+.RZ4T5-BjTDY- {
+  width: 8px;
+  width: var(--space-small);
+  height: 8px;
+  height: var(--space-small);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+  border-left: 1px solid hsl(200, 13%, 87%);
+  border-left: var(--border-base) solid var(--color-border);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.pkc7PhhfCuk- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-align: center;
+      align-items: center;
+  min-width: 0;
+  padding: 8px;
+  padding: var(--space-small);
+  gap: 4px;
+  gap: var(--space-smaller);
+}
+
+.pkc7PhhfCuk- .L-KgsoDZ360- {
+  width: auto;
+  height: calc(16px * 1.5);
+  height: calc(var(--base-unit) * 1.5);
+  min-width: 0;
+  padding: 0;
+  line-height: 1.25;
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-:-ms-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::-ms-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input:-ms-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input::-ms-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::placeholder {
+  color: transparent;
+}
+
+.fdKYm3GTKwk- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-height: calc(16px * 1.5);
+  min-height: calc(var(--base-unit) * 1.5);
+  box-sizing: border-box;
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  line-height: 1.25;
+  background-color: hsl(35, 20%, 97%);
+  background-color: var(--color-surface--background--subtle);
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 2px;
+  gap: var(--space-smallest);
+}
+
+.fdKYm3GTKwk-: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;
+}
+
+.fdKYm3GTKwk-:has(.vzuaMzxA96M-:hover) {
+  background-color: hsl(40, 9%, 85%);
+  background-color: var(--color-surface--background--subtle--hover);
+}
+
+.fdKYm3GTKwk-[data-disabled] {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+}
+
+.fdKYm3GTKwk-:has(.vzuaMzxA96M-[aria-disabled="true"]):not([data-disabled]) {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.vzuaMzxA96M- {
+  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;
+  width: 16px;
+  width: var(--space-base);
+  height: 16px;
+  height: var(--space-base);
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  line-height: 1;
+  background: transparent;
+  cursor: pointer;
+}
+
+.vzuaMzxA96M- svg {
+  display: block;
+}
+
+.vzuaMzxA96M-:hover {
+  color: hsl(198, 35%, 21%);
+  color: var(--color-icon);
+}
+
+.vzuaMzxA96M-: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;
+}
+
+.vzuaMzxA96M-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: default;
+}
+
+.fdKYm3GTKwk-[data-disabled] .vzuaMzxA96M-,
+.vzuaMzxA96M-[aria-disabled="true"] {
+  display: none;
+}
+
+.mpkTjdLrAUI- {
+  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;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .LOetsPPEwOk- {
+    transition: opacity 200ms ease-out,
+      -webkit-transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      -webkit-transform var(--timing-base) ease-out;
+    transition: opacity 200ms ease-out,
+      transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      transform var(--timing-base) ease-out;
+    transition: opacity 200ms ease-out,
+      transform 200ms ease-out,
+      -webkit-transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      transform var(--timing-base) ease-out,
+      -webkit-transform var(--timing-base) ease-out;
+    -webkit-transform-origin: var(--transform-origin);
+            transform-origin: var(--transform-origin);
+  }
+}
+
 ._6HZLFIOZh4s- {
   width: 100%;
 }
@@ -7997,14 +8764,14 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
  */
 @supports ((-webkit-appearance: base-select) or (appearance: base-select)) {
     /* opt into customizing select */
-    .-hmXAsAfH9U-,
-    .-hmXAsAfH9U-::picker(select) {
+    .Bm9c8--1XKs-,
+    .Bm9c8--1XKs-::picker(select) {
       -webkit-appearance: base-select;
               appearance: base-select;
     }
 
     /* Dropdown styling + transitions */
-    .-hmXAsAfH9U-::picker(select) {
+    .Bm9c8--1XKs-::picker(select) {
       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);
       margin-top: 8px;
@@ -8044,24 +8811,24 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
         -webkit-transform var(--timing-base) ease-out;
     }
 
-    .-hmXAsAfH9U-::picker-icon {
+    .Bm9c8--1XKs-::picker-icon {
       display: none;
     }
 
-    .-hmXAsAfH9U-:not(:open)::picker(select) {
+    .Bm9c8--1XKs-:not(:open)::picker(select) {
       opacity: 0;
       -webkit-transform: scale(0.95);
               transform: scale(0.95);
     }
 
-    .-hmXAsAfH9U-:open::picker(select) {
+    .Bm9c8--1XKs-:open::picker(select) {
       opacity: 1;
       -webkit-transform: translateY(0) scale(1);
               transform: translateY(0) scale(1);
     }
 
     /* options */
-    .-hmXAsAfH9U- option {
+    .Bm9c8--1XKs- option {
       padding: 4px 0;
       padding: var(--space-smaller) 0;
       color: hsl(198, 35%, 21%);
@@ -8071,16 +8838,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       cursor: pointer;
     }
 
-    .-hmXAsAfH9U- option:hover,
-    .-hmXAsAfH9U- option:focus,
-    .-hmXAsAfH9U- option:focus-visible,
-    .-hmXAsAfH9U- option:checked {
+    .Bm9c8--1XKs- option:hover,
+    .Bm9c8--1XKs- option:focus,
+    .Bm9c8--1XKs- option:focus-visible,
+    .Bm9c8--1XKs- option:checked {
       background-color: hsl(43, 18%, 92%);
       background-color: var(--color-surface--hover);
     }
 
     /* optgroup headers */
-    .-hmXAsAfH9U- optgroup {
+    .Bm9c8--1XKs- optgroup {
       padding: 8px 0 0 0;
       padding: var(--space-small) 0 0 0;
       color: hsl(197, 90%, 12%);
@@ -8095,36 +8862,36 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     }
 
     /* Divider directly under the group label */
-    .-hmXAsAfH9U- optgroup option:first-child {
+    .Bm9c8--1XKs- optgroup option:first-child {
       border-top: 1px solid hsl(200, 13%, 87%);
       border-top: var(--border-base) solid var(--color-border);
     }
 
     /* Disabled groups and their options */
-    .-hmXAsAfH9U- optgroup[disabled] {
+    .Bm9c8--1XKs- optgroup[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
     }
-    .-hmXAsAfH9U- optgroup[disabled] option,
-    .-hmXAsAfH9U- option[disabled] {
+    .Bm9c8--1XKs- optgroup[disabled] option,
+    .Bm9c8--1XKs- option[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
       cursor: default;
     }
 
-    .-hmXAsAfH9U- optgroup[disabled] option:focus,
-    .-hmXAsAfH9U- optgroup[disabled] option:focus-visible,
-    .-hmXAsAfH9U- optgroup[disabled] option:checked,
-    .-hmXAsAfH9U- optgroup[disabled] option:hover,
-    .-hmXAsAfH9U- option[disabled]:focus,
-    .-hmXAsAfH9U- option[disabled]:focus-visible,
-    .-hmXAsAfH9U- option[disabled]:checked,
-    .-hmXAsAfH9U- option[disabled]:hover {
+    .Bm9c8--1XKs- optgroup[disabled] option:focus,
+    .Bm9c8--1XKs- optgroup[disabled] option:focus-visible,
+    .Bm9c8--1XKs- optgroup[disabled] option:checked,
+    .Bm9c8--1XKs- optgroup[disabled] option:hover,
+    .Bm9c8--1XKs- option[disabled]:focus,
+    .Bm9c8--1XKs- option[disabled]:focus-visible,
+    .Bm9c8--1XKs- option[disabled]:checked,
+    .Bm9c8--1XKs- option[disabled]:hover {
       background-color: transparent;
     }
 
     /* Animate the chevron rotation for the provided postfix class */
-    .-hmXAsAfH9U- + ._5ST4c1fXDYU- svg {
+    .Bm9c8--1XKs- + .LBiZF2RZlxc- svg {
       transition: -webkit-transform 100ms;
       transition: -webkit-transform var(--timing-quick);
       transition: transform 100ms;
@@ -8135,7 +8902,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
               transform-origin: 50% 50%;
     }
     /* Rotate the postfix chevron when the select is open */
-    .-hmXAsAfH9U-:open + ._5ST4c1fXDYU- svg {
+    .Bm9c8--1XKs-:open + .LBiZF2RZlxc- svg {
       -webkit-transform: rotate(180deg);
               transform: rotate(180deg);
     }