@jobber/components 6.68.2 → 6.69.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/Autocomplete/Autocomplete.types.d.ts +1 -1
  2. package/dist/Autocomplete/Menu/DefaultMenu.d.ts +3 -3
  3. package/dist/Autocomplete/Menu/MenuWrapper.d.ts +2 -3
  4. package/dist/Autocomplete/constants.d.ts +2 -0
  5. package/dist/Autocomplete/index.cjs +16 -26
  6. package/dist/Autocomplete/index.mjs +16 -26
  7. package/dist/Autocomplete/useRepositionMenu.d.ts +5 -18
  8. package/dist/Autocomplete-cjs.js +62 -46
  9. package/dist/Autocomplete-es.js +63 -47
  10. package/dist/Popover-es.js +1 -1
  11. package/dist/floating-ui.react-cjs.js +94 -0
  12. package/dist/floating-ui.react-es.js +94 -1
  13. package/dist/index.cjs +3 -3
  14. package/dist/index.mjs +3 -3
  15. package/dist/styles.css +1276 -1277
  16. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -40,7 +40,6 @@
40
40
  visibility: visible;
41
41
  width: 100%;
42
42
  height: auto;
43
- max-height: 300px;
44
43
  opacity: 1;
45
44
  }
46
45
 
@@ -127,184 +126,6 @@
127
126
  text-align: right;
128
127
  }
129
128
 
130
- :root {
131
- --modal--width: 600px;
132
- --modal--padding-horizontal: var(--space-base);
133
- --modal--padding-vertical: var(--space-base);
134
- --modal--padding: var(--modal--padding-vertical)
135
- var(--modal--padding-horizontal);
136
-
137
- --modal--shadow: var(--shadow-base);
138
- }
139
-
140
- @media (min-width: 768px) {
141
-
142
- :root {
143
- --modal--padding-horizontal: var(--space-large);
144
- --modal--padding-vertical: var(--space-large);
145
- --modal--padding: var(--modal--padding-vertical)
146
- var(--modal--padding-horizontal);
147
- }
148
- }
149
-
150
- @media (--medium-screens-and-up) {
151
-
152
- :root {
153
- --modal--padding-horizontal: var(--space-large);
154
- --modal--padding-vertical: var(--space-large);
155
- --modal--padding: var(--modal--padding-vertical)
156
- var(--modal--padding-horizontal);
157
- }
158
- }
159
-
160
- .y3M-9xoEnk0- {
161
- display: -ms-flexbox;
162
- display: flex;
163
- -ms-flex-direction: column;
164
- flex-direction: column;
165
- z-index: 1001;
166
- z-index: var(--elevation-modal);
167
- padding: 8px;
168
- padding: var(--space-small);
169
- overflow: auto;
170
- }
171
-
172
- .y3M-9xoEnk0-,
173
- .zkyJp1mib-U- {
174
- position: fixed;
175
- top: 0;
176
- right: 0;
177
- bottom: 0;
178
- left: 0;
179
- }
180
-
181
- .zkyJp1mib-U- {
182
- background-color: rgba(0, 0, 0, 0.32);
183
- background-color: var(--color-overlay);
184
- }
185
-
186
- .gMPgiggaud8- {
187
- position: relative;
188
- width: 100%;
189
- max-width: 600px;
190
- max-width: var(--modal--width);
191
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
192
- box-shadow: var(--modal--shadow);
193
- margin: auto;
194
- border: 1px solid hsl(200, 13%, 87%);
195
- border: var(--border-base) solid var(--color-border);
196
- border-radius: 8px;
197
- border-radius: var(--radius-base);
198
- background-color: rgba(255, 255, 255, 1);
199
- background-color: var(--color-surface);
200
- -ms-flex: 0 0 auto;
201
- flex: 0 0 auto;
202
- outline-color: hsl(198, 12%, 57%);
203
- outline-color: var(--color-focus);
204
- }
205
-
206
- /* Adjust `Content` and `Tab` components public padding to match the modal */
207
-
208
- .gMPgiggaud8- > * {
209
- --public-content--padding: var(--modal--padding);
210
- --public-tab--inset: var(--modal--padding-horizontal);
211
- }
212
-
213
- /* Remove the nested `Content` components public padding */
214
-
215
- .gMPgiggaud8- > * > * {
216
- --public-content--padding: 0;
217
- }
218
-
219
- ._5sBzUnyOqD0- {
220
- display: -ms-flexbox;
221
- display: flex;
222
- -ms-flex-pack: justify;
223
- justify-content: space-between;
224
- padding: 16px
225
- 16px;
226
- padding: var(--modal--padding);
227
- background-color: transparent;
228
- }
229
-
230
- /**
231
- * Ensure there's no extra padding top on the next element. This mostly negates
232
- * the <Content /> padding
233
- */
234
-
235
- ._5sBzUnyOqD0- + * {
236
- padding-top: 0 !important;
237
- }
238
-
239
- ._4gw63G7IYG0- {
240
- margin-top: -6px;
241
- margin-right: -6px;
242
- }
243
-
244
- .cwVJrrJkNDg- {
245
- display: -ms-flexbox;
246
- display: flex;
247
- padding: 16px
248
- 16px;
249
- padding: var(--modal--padding);
250
- padding-top: 0;
251
- -ms-flex: 1 1 100%;
252
- flex: 1 1 100%;
253
- -ms-flex-pack: end;
254
- justify-content: flex-end;
255
- }
256
-
257
- /**
258
- * 1. Use CSS `order` to adjust the buttons position on the UI
259
- */
260
-
261
- .MkD4pNUKeAA- {
262
- -ms-flex: 1 1 auto;
263
- flex: 1 1 auto;
264
- -ms-flex-order: 1;
265
- order: 1; /* 1 */
266
- }
267
-
268
- .C-yC8JKpQLg- {
269
- display: -ms-flexbox;
270
- display: flex;
271
- -ms-flex: 0 0 auto;
272
- flex: 0 0 auto;
273
- -ms-flex-order: 2;
274
- order: 2; /* 1 */
275
- }
276
-
277
- /* This is in a correct position and order */
278
-
279
- /* stylelint-disable-next-line no-descending-specificity */
280
-
281
- .C-yC8JKpQLg- > * {
282
- margin-left: 8px !important;
283
- margin-left: var(--space-small) !important;
284
- }
285
-
286
- .C-yC8JKpQLg- > *:first-child {
287
- -ms-flex-order: 2;
288
- order: 2; /* 1 */
289
- }
290
-
291
- .C-yC8JKpQLg- > *:nth-child(2) {
292
- -ms-flex-order: 1;
293
- order: 1; /* 1 */
294
- }
295
-
296
- .BSZvIAUzFEU- {
297
- --modal--padding: var(--space-base);
298
- --public-tab--inset: var(--space-base);
299
- --modal--width: 400px;
300
- max-width: 400px;
301
- }
302
-
303
- .-ydIALYVvGg- {
304
- --modal--width: 940px;
305
- max-width: 940px;
306
- }
307
-
308
129
  .j4h-0Mxa5gk- {
309
130
  margin: 0;
310
131
  padding: 0;
@@ -814,988 +635,821 @@
814
635
  }
815
636
 
816
637
  :root {
817
- --public--button--color-variation: var(--color-interactive);
818
- --public--button--color-variation--hover: var(--color-interactive--hover);
819
- }
820
-
821
- ._7BLGtYNuJOU- {
822
- --button--color-surface: var(--color-surface);
823
- --button--color-surface--hover: var(--color-surface--hover);
824
- --button--color-primaryLabel: var(--color-surface);
825
- --button--duration-loading: var(--timing-loading--extended);
826
- --button--size: 40px;
638
+ /**
639
+ * These `--public-field` properties are used in other components such
640
+ * as InputGroup, therefore they must stay on :root
641
+ **/
642
+ --public-field--top-left-radius: var(--radius-base);
643
+ --public-field--top-right-radius: var(--radius-base);
644
+ --public-field--bottom-left-radius: var(--radius-base);
645
+ --public-field--bottom-right-radius: var(--radius-base);
827
646
 
828
- display: -ms-inline-flexbox;
647
+ --field--placeholder-color: var(--color-base-blue--600);
648
+ --field--value-color: var(--color-heading);
649
+ --field--border-color: var(--color-border--interactive);
829
650
 
830
- display: inline-flex;
831
- min-height: 40px;
832
- min-height: var(--button--size);
833
- box-sizing: border-box;
834
- margin: 0;
835
- border: 1px solid hsl(107, 58%, 33%);
836
- border: var(--border-base) solid var(--public--button--color-variation);
837
- border-radius: 8px;
838
- border-radius: var(--radius-base);
839
- color: hsl(107, 58%, 33%);
840
- color: var(--public--button--color-variation);
841
- -webkit-font-smoothing: antialiased;
842
- line-height: 1;
843
- text-align: center;
844
- -webkit-text-decoration: none;
845
- text-decoration: none;
846
- vertical-align: middle;
847
- background-color: rgba(255, 255, 255, 1);
848
- background-color: var(--button--color-surface);
849
- cursor: pointer;
850
- transition: all 200ms ease-out;
851
- transition: all var(--timing-base) ease-out;
852
- -webkit-appearance: none;
853
- appearance: none;
854
- fill: hsl(107, 58%, 33%);
855
- fill: var(--public--button--color-variation);
856
- -ms-flex-align: center;
857
- align-items: center;
858
- -ms-flex-pack: center;
859
- justify-content: center;
860
- gap: 4px;
861
- gap: var(--space-smaller);
651
+ --postfix-right: var(--space-base);
862
652
  }
863
653
 
864
- ._7BLGtYNuJOU- * {
865
- fill: inherit !important;
654
+ .YL-mNv-Bl6g- {
655
+ width: 100%;
866
656
  }
867
657
 
868
- ._7BLGtYNuJOU- * {
869
- color: inherit;
870
- /* required to over-ride very specific fill from <Icon> */
871
- }
658
+ /**
659
+ * Wrapper
660
+ **/
872
661
 
873
- ._7BLGtYNuJOU-:hover,
874
- a._7BLGtYNuJOU-:hover,
875
- ._7BLGtYNuJOU-:focus-visible,
876
- a._7BLGtYNuJOU-:focus-visible,
877
- ._7BLGtYNuJOU-:active,
878
- a._7BLGtYNuJOU-:active {
879
- border-color: hsl(107, 65%, 24%);
880
- border-color: var(--public--button--color-variation--hover);
881
- color: hsl(107, 65%, 24%);
882
- color: var(--public--button--color-variation--hover);
883
- fill: hsl(107, 65%, 24%);
884
- fill: var(--public--button--color-variation--hover);
885
- background-color: var(--button--color-surface--hover);
886
- }
662
+ ._8lhbGTQ-hhg- {
663
+ --field--placeholder-offset: 50%;
664
+ --field--placeholder-transform: -50%;
887
665
 
888
- ._7BLGtYNuJOU-:focus-visible,
889
- a._7BLGtYNuJOU-:focus-visible,
890
- ._7BLGtYNuJOU-:active,
891
- a._7BLGtYNuJOU-:active {
892
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
893
- box-shadow: var(--shadow-focus);
894
- outline: transparent;
895
- }
666
+ --field--textAlign: left;
896
667
 
897
- /* Variation */
668
+ --field--height: var(--space-largest);
898
669
 
899
- .amVSJ50CiOo- {
900
- --public--button--color-variation: var(--color-interactive);
901
- --public--button--color-variation--hover: var(--color-interactive--hover);
902
- }
670
+ --field--padding-top: calc(var(--space-base) - var(--space-smallest));
671
+ --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));
672
+ --field--padding-left: var(--space-base);
673
+ --field--padding-right: var(--space-base);
903
674
 
904
- .V4GfDDF1ESI-,
905
- .MVT-qs-bO9M- {
906
- --public--button--color-variation: var(--color-interactive--subtle);
907
- --public--button--color-variation--hover: var(
908
- --color-interactive--subtle--hover
909
- );
910
- }
675
+ --field--value-lineHeight: calc(var(--base-unit) * 1.25);
911
676
 
912
- ._9YS8IK6Inew- {
913
- --public--button--color-variation: var(--color-destructive);
914
- --public--button--color-variation--hover: var(--color-destructive--hover);
915
- }
677
+ --field--background-color: var(--color-surface);
916
678
 
917
- /* Type */
679
+ --field--base-elevation: var(--elevation-base);
680
+ --field--label-elevation: calc(var(--field--base-elevation) + 1);
681
+ --field--postfix-elevation: calc(var(--field--base-elevation) - 1);
682
+ --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);
918
683
 
919
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-),
920
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
921
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
922
- color: var(--button--color-primaryLabel);
923
- background-color: hsl(107, 58%, 33%);
924
- background-color: var(--public--button--color-variation);
925
- fill: var(--button--color-primaryLabel);
926
- }
684
+ display: -ms-flexbox;
927
685
 
928
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
929
- .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
930
- background-color: hsl(107, 65%, 24%);
931
- background-color: var(--public--button--color-variation--hover);
686
+ display: flex;
687
+ -ms-flex-direction: column;
688
+ flex-direction: column;
689
+ width: 100%;
690
+ border: 1px solid hsl(200, 13%, 87%);
691
+ border: var(--border-base) solid var(--field--border-color);
692
+ border-radius: 8px;
693
+ border-radius: var(--radius-base);
694
+ border-top-right-radius: 8px;
695
+ border-top-right-radius: var(--public-field--top-right-radius);
696
+ border-bottom-right-radius: 8px;
697
+ border-bottom-right-radius: var(--public-field--bottom-right-radius);
698
+ border-bottom-left-radius: 8px;
699
+ border-bottom-left-radius: var(--public-field--bottom-left-radius);
700
+ border-top-left-radius: 8px;
701
+ border-top-left-radius: var(--public-field--top-left-radius);
702
+ color: hsl(197, 90%, 12%);
703
+ color: var(--field--value-color);
704
+ font-size: 14px;
705
+ font-size: var(--typography--fontSize-base);
706
+ background-color: rgba(255, 255, 255, 1);
707
+ background-color: var(--field--background-color);
932
708
  }
933
709
 
934
- .MVT-qs-bO9M-.TrzCxs3OEpM- {
935
- color: hsl(107, 58%, 33%);
936
- color: var(--public--button--color-variation);
937
- fill: hsl(107, 58%, 33%);
938
- fill: var(--public--button--color-variation);
939
- background-color: var(--button--color-surface);
710
+ ._8lhbGTQ-hhg- * {
711
+ box-sizing: border-box;
940
712
  }
941
713
 
942
- .QaWL8FLJ5Aw-,
943
- .MVT-qs-bO9M-.TrzCxs3OEpM- {
944
- border-color: hsl(200, 13%, 87%);
945
- border-color: var(--color-border--interactive);
714
+ ._8lhbGTQ-hhg-:not(.Tz9LK9ABKMk-):focus-within {
715
+ position: relative;
716
+ z-index: var(--field--base-elevation);
717
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
718
+ box-shadow: var(--shadow-focus);
946
719
  }
947
720
 
948
- .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
949
- .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
950
- color: hsl(107, 65%, 24%);
951
- color: var(--public--button--color-variation--hover);
952
- background-color: var(--button--color-surface--hover);
953
- fill: hsl(107, 65%, 24%);
954
- fill: var(--public--button--color-variation--hover);
721
+ .b5mv1x1H7YE- {
722
+ display: -ms-flexbox;
723
+ display: flex;
724
+ height: var(--field--height);
725
+ -ms-flex: 1;
726
+ flex: 1;
955
727
  }
956
728
 
957
- .QaWL8FLJ5Aw-:hover,
958
- .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
959
- .QaWL8FLJ5Aw-:focus-visible,
960
- .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
961
- border-color: hsl(107, 65%, 24%);
962
- border-color: var(--public--button--color-variation--hover);
729
+ .hGr6YW4AeLM-.QBCWi9GBgMs- .b5mv1x1H7YE- {
730
+ margin-right: var(--field--padding-right);
963
731
  }
964
732
 
965
- .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
966
- background-color: var(--button--color-surface);
967
- }
733
+ /* When there's placeholder text on an EMPTY time input
734
+ - we hide the field value when the input is:
735
+ - not focused or disabled
736
+ */
968
737
 
969
- .MhDYVRl8PUc-,
970
- .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
971
- border-color: transparent;
738
+ ._0pmqVa2zSE4- input:disabled,
739
+ ._0pmqVa2zSE4-:not(:focus-within) input {
740
+ color: var(--field--background-color);
741
+ -webkit-text-fill-color: var(--field--background-color);
972
742
  }
973
743
 
974
- .MhDYVRl8PUc- {
975
- border-color: transparent;
976
- -webkit-text-decoration: underline;
977
- text-decoration: underline;
978
- text-decoration-thickness: 2px;
979
- text-decoration-thickness: var(--border-thick);
980
- text-underline-offset: 2px;
981
- text-underline-offset: var(--space-smallest);
744
+ ._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-):focus-within,
745
+ .F1t76G6bDKo- {
746
+ --field--placeholder-color: var(--color-text--secondary);
747
+ --field--placeholder-offset: var(--space-smallest);
748
+ --field--placeholder-transform: 0;
749
+ --field--padding-top: calc(var(--space-base) + var(--space-smaller));
750
+ --field--padding-bottom: var(--space-small);
982
751
  }
983
752
 
984
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
985
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible {
986
- background-color: var(--button--color-surface--hover);
753
+ ._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-)._9tjyT9QUtP8-:focus-within,
754
+ .F1t76G6bDKo-._9tjyT9QUtP8- {
755
+ --field--padding-top: calc(var(--space-large) + var(--space-smaller));
987
756
  }
988
757
 
989
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
990
- .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
991
- a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
992
- a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
993
- .MhDYVRl8PUc-:hover,
994
- .MhDYVRl8PUc-:focus-visible,
995
- a.MhDYVRl8PUc-:hover,
996
- a.MhDYVRl8PUc-:focus-visible {
997
- border-color: transparent;
758
+ ._8lhbGTQ-hhg-.QmMiyoAWp-g- {
759
+ --field--placeholder-offset: 0;
760
+ --field--placeholder-transform: 0;
761
+ min-height: auto;
998
762
  }
999
763
 
1000
- .MVT-qs-bO9M-.MhDYVRl8PUc- {
1001
- border-color: transparent;
1002
- background-color: transparent;
764
+ ._8lhbGTQ-hhg-.hGr6YW4AeLM- {
765
+ resize: vertical;
766
+ overflow: auto;
1003
767
  }
1004
768
 
1005
- .MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
1006
- .MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible,
1007
- a.MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
1008
- a.MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible {
1009
- color: hsl(197, 90%, 12%);
1010
- color: var(--color-interactive--subtle--hover);
1011
- background-color: hsl(53, 21%, 93%);
1012
- background-color: var(--color-surface--hover);
1013
- fill: hsl(197, 90%, 12%);
1014
- fill: var(--color-interactive--subtle--hover);
769
+ .XWDSfe6weSY-:not(.Tz9LK9ABKMk-),
770
+ .XWDSfe6weSY-:not(.Tz9LK9ABKMk-):focus-within {
771
+ --field--border-color: var(--color-critical);
772
+ position: relative;
1015
773
  }
1016
774
 
1017
- /* Disabled */
1018
-
1019
- ._7BLGtYNuJOU-.zgRx3ehZ2z8-,
1020
- a._7BLGtYNuJOU-.zgRx3ehZ2z8-,
1021
- ._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover,
1022
- a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1023
- border-color: hsl(0, 0%, 93%);
1024
- border-color: var(--color-disabled--secondary);
1025
- color: hsl(0, 0%, 72%);
1026
- color: var(--color-disabled);
1027
- -webkit-user-select: none;
1028
- -ms-user-select: none;
1029
- user-select: none;
1030
- background-color: hsl(0, 0%, 93%);
1031
- background-color: var(--color-disabled--secondary);
1032
- fill: hsl(0, 0%, 72%);
1033
- fill: var(--color-disabled);
1034
- pointer-events: none;
1035
- cursor: not-allowed;
775
+ .Tz9LK9ABKMk- {
776
+ --field--placeholder-color: var(--color-disabled);
777
+ --field--value-color: var(--color-disabled);
778
+ --field--background-color: var(--color-disabled--secondary);
779
+ --field--border-color: var(--color-border);
1036
780
  }
1037
781
 
1038
- /* Sizes */
782
+ /* override iOS default styling for disabled input */
1039
783
 
1040
- .lPPuBfTJl5k- {
1041
- --button--size: 32px;
1042
- padding: 4px 12px;
1043
- padding: var(--space-smaller) var(--space-slim);
784
+ .Tz9LK9ABKMk- :disabled {
785
+ -webkit-text-fill-color: hsl(197, 90%, 12%);
786
+ -webkit-text-fill-color: var(--field--value-color);
787
+ opacity: 1;
1044
788
  }
1045
789
 
1046
- .VyMJpVxCrxI- {
1047
- padding: 0 16px;
1048
- padding: 0 var(--space-base);
790
+ .Sw5O4I0lMJg- {
791
+ --field--padding-left: var(--space-slim);
792
+ --field--padding-right: var(--space-slim);
793
+ --field--padding-top: var(--space-small);
794
+ --field--padding-bottom: var(--space-small);
795
+ --field--height: calc(var(--space-larger) + var(--space-smaller));
796
+ --postfix-right: calc(var(--space-small) + var(--space-smaller));
1049
797
  }
1050
798
 
1051
- .Uh29dvNk6I0- {
1052
- --button--size: 48px;
1053
- padding: 0 calc(16px + 4px);
1054
- padding: 0 calc(var(--space-base) + var(--space-smaller));
799
+ ._9tjyT9QUtP8- {
800
+ --field--padding-left: var(--space-large);
801
+ --field--padding-right: var(--space-large);
802
+ --field--height: calc(var(--space-extravagant));
803
+ --postfix-right: var(--space-large);
1055
804
  }
1056
805
 
1057
- /* Icon */
1058
-
1059
- ._7BLGtYNuJOU- svg {
1060
- -ms-flex-negative: 0;
1061
- flex-shrink: 0;
806
+ .SaORbL7SYWY- {
807
+ display: inline-block;
808
+ width: auto;
1062
809
  }
1063
810
 
1064
- .H8uYM7Udc4o-:has(> svg:only-child) {
1065
- width: var(--button--size);
1066
- padding: 0;
811
+ .ozy2UoT2vsg- {
812
+ --field--textAlign: center;
1067
813
  }
1068
814
 
1069
- /** Icon on Right */
1070
-
1071
- .H8uYM7Udc4o- > span ~ svg {
1072
- margin-right: calc(4px * -1);
1073
- margin-right: calc(var(--space-smaller) * -1);
815
+ ._3TJdT91YD3c- {
816
+ --field--textAlign: right;
1074
817
  }
1075
818
 
1076
- /** Icon on Left */
1077
-
1078
- .H8uYM7Udc4o- > svg:has(+ span:nth-child(2)) {
1079
- margin-left: calc(4px * -1);
1080
- margin-left: calc(var(--space-smaller) * -1);
1081
- }
1082
-
1083
- .yBId-F-geAA- {
1084
- width: 100%;
1085
- }
819
+ /**
820
+ * The custom property --formField-maxLength is getting defined inside the
821
+ * component.
822
+ */
1086
823
 
1087
- .NCs-BISj1XU- {
1088
- background-image: linear-gradient(
1089
- 135deg,
1090
- rgba(0, 0, 0, 0.1) 0%,
1091
- rgba(0, 0, 0, 0.1) 25%,
1092
- transparent 25%,
1093
- transparent 50%,
1094
- rgba(0, 0, 0, 0.1) 50%,
1095
- rgba(0, 0, 0, 0.1) 75%,
1096
- transparent 75%,
1097
- transparent 100%
824
+ .W6GrMqLy2qk- {
825
+ width: calc(
826
+ (16px * var(--formField-maxLength)) + var(--field--padding-left) +
827
+ var(--field--padding-right)
1098
828
  );
1099
- background-size: 32px 32px;
1100
- background-size: var(--space-larger) var(--space-larger);
1101
- pointer-events: none;
1102
- cursor: not-allowed;
1103
- -webkit-animation-duration: var(--button--duration-loading);
1104
- animation-duration: var(--button--duration-loading);
1105
- -webkit-animation-iteration-count: infinite;
1106
- animation-iteration-count: infinite;
1107
- -webkit-animation-name: M0LU-Rdq-MA-;
1108
- animation-name: M0LU-Rdq-MA-;
1109
- -webkit-animation-timing-function: linear;
1110
- animation-timing-function: linear;
1111
- }
1112
-
1113
- .TrzCxs3OEpM-.NCs-BISj1XU-:not(.MVT-qs-bO9M-) {
1114
- background-image: linear-gradient(
1115
- 135deg,
1116
- rgba(255, 255, 255, 0.25) 0%,
1117
- rgba(255, 255, 255, 0.25) 25%,
1118
- transparent 25%,
1119
- transparent 50%,
1120
- rgba(255, 255, 255, 0.25) 50%,
1121
- rgba(255, 255, 255, 0.25) 75%,
1122
- transparent 75%,
1123
- transparent 100%
829
+ width: calc(
830
+ (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +
831
+ var(--field--padding-right)
1124
832
  );
1125
833
  }
1126
834
 
1127
- @-webkit-keyframes M0LU-Rdq-MA- {
1128
- 0% {
1129
- background-position: 0 0;
1130
- }
1131
-
1132
- 100% {
1133
- background-position: 32px 32px;
1134
- background-position: var(--space-larger) var(--space-larger);
1135
- }
1136
- }
1137
-
1138
- @keyframes M0LU-Rdq-MA- {
1139
- 0% {
1140
- background-position: 0 0;
1141
- }
1142
-
1143
- 100% {
1144
- background-position: 32px 32px;
1145
- background-position: var(--space-larger) var(--space-larger);
1146
- }
1147
- }
1148
-
1149
- :root {
1150
- --modal--width: 600px;
1151
- --modal--padding-horizontal: var(--space-base);
1152
- --modal--padding-vertical: var(--space-base);
1153
- --modal--padding: var(--modal--padding-vertical)
1154
- var(--modal--padding-horizontal);
1155
-
1156
- --modal--shadow: var(--shadow-base);
1157
- }
1158
-
1159
- @media (min-width: 768px) {
1160
-
1161
- :root {
1162
- --modal--padding-horizontal: var(--space-large);
1163
- --modal--padding-vertical: var(--space-large);
1164
- --modal--padding: var(--modal--padding-vertical)
1165
- var(--modal--padding-horizontal);
1166
- }
1167
- }
1168
-
1169
- @media (--medium-screens-and-up) {
835
+ /**
836
+ * Input Wrapper
837
+ **/
1170
838
 
1171
- :root {
1172
- --modal--padding-horizontal: var(--space-large);
1173
- --modal--padding-vertical: var(--space-large);
1174
- --modal--padding: var(--modal--padding-vertical)
1175
- var(--modal--padding-horizontal);
839
+ .-LmjnYRU0r0- {
840
+ display: -ms-flexbox;
841
+ display: flex;
842
+ -ms-flex: 1;
843
+ flex: 1;
844
+ position: relative;
845
+ /* Ensure input stays with the rest of the element stack */
846
+ z-index: 0;
847
+ z-index: var(--elevation-default);
1176
848
  }
1177
- }
1178
849
 
1179
- .cRhQeXmZobs- {
1180
- display: grid;
1181
- z-index: 1001;
1182
- z-index: var(--elevation-modal);
1183
- -ms-flex-align: center;
1184
- align-items: center;
1185
- justify-items: center;
1186
- place-items: center;
850
+ .yVXYv6hkuOA- {
851
+ position: relative;
852
+ -ms-flex: 1;
853
+ flex: 1;
1187
854
  }
1188
855
 
1189
- .PO6ZUDxQoFE- {
1190
- position: fixed;
1191
- top: 0;
1192
- right: 0;
1193
- bottom: 0;
1194
- left: 0;
1195
- z-index: 1001;
1196
- z-index: var(--elevation-modal);
1197
- background-color: rgba(0, 0, 0, 0.32);
1198
- background-color: var(--color-overlay);
1199
- opacity: 0.8;
1200
- }
856
+ /**
857
+ * Input
858
+ **/
1201
859
 
1202
- .OiqCKNmbHZ0- {
860
+ .vtSDcuzNr9Q- {
1203
861
  position: relative;
1204
- z-index: 1001;
1205
- z-index: var(--elevation-modal);
862
+ z-index: var(--field--base-elevation);
1206
863
  width: 100%;
1207
- max-width: 600px;
1208
- max-width: var(--modal--width);
1209
- box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
1210
- box-shadow: var(--modal--shadow);
1211
- margin: auto;
1212
- padding: 8px;
1213
- padding: var(--space-small);
1214
- border: 1px solid hsl(200, 13%, 87%);
1215
- border: var(--border-base) solid var(--color-border);
864
+ padding-top: var(--field--padding-top);
865
+ padding-bottom: var(--field--padding-bottom);
866
+ padding-left: var(--field--padding-left);
867
+ padding-right: var(--field--padding-right);
868
+ border: none;
1216
869
  border-radius: 8px;
1217
870
  border-radius: var(--radius-base);
1218
- background-color: rgba(255, 255, 255, 1);
1219
- background-color: var(--color-surface);
1220
- -ms-flex: 0 0 auto;
1221
- flex: 0 0 auto;
1222
- outline-color: hsl(198, 12%, 57%);
1223
- outline-color: var(--color-focus);
871
+ color: inherit;
872
+ font-family: inherit;
873
+ font-size: inherit;
874
+ line-height: var(--field--value-lineHeight);
875
+ text-align: var(--field--textAlign);
876
+ background: transparent;
877
+ -webkit-appearance: none;
878
+ appearance: none;
1224
879
  }
1225
880
 
1226
- /* Adjust `Content` and `Tab` components public padding to match the modal */
1227
-
1228
- .OiqCKNmbHZ0- > * {
1229
- --public-content--padding: var(--modal--padding);
1230
- --public-tab--inset: var(--modal--padding-horizontal);
881
+ .vtSDcuzNr9Q-:focus {
882
+ outline: none;
1231
883
  }
1232
884
 
1233
- /* Remove the nested `Content` components public padding */
1234
-
1235
- .OiqCKNmbHZ0- > * > * {
1236
- --public-content--padding: 0;
885
+ .MVhuQuzUBUs- {
886
+ padding-left: calc(var(--field--padding-left) + 4px);
887
+ padding-left: calc(var(--field--padding-left) + var(--space-smaller));
1237
888
  }
1238
889
 
1239
- .GDWGHwmjgAc- {
890
+ .hGr6YW4AeLM- .yVXYv6hkuOA- {
1240
891
  display: -ms-flexbox;
1241
892
  display: flex;
1242
- -ms-flex-pack: justify;
1243
- justify-content: space-between;
1244
- padding: 16px
1245
- 16px;
1246
- padding: var(--modal--padding);
1247
- background-color: transparent;
1248
- }
1249
-
1250
- /**
1251
- * Ensure there's no extra padding top on the next element. This mostly negates
1252
- * the <Content /> padding
1253
- */
1254
-
1255
- .GDWGHwmjgAc- + * {
1256
- padding-top: 0 !important;
893
+ min-height: var(--field--height);
894
+ -ms-flex-direction: column;
895
+ flex-direction: column;
1257
896
  }
1258
897
 
1259
- .KJlGo4z-E6Q- {
1260
- margin-top: -6px;
1261
- margin-right: -6px;
898
+ .hGr6YW4AeLM- .-LmjnYRU0r0-:has(.Dgk00tzlODA-) .yVXYv6hkuOA- {
899
+ padding-top: var(--field--padding-top);
1262
900
  }
1263
901
 
1264
- .ZGrhWCAymCw- {
1265
- display: -ms-flexbox;
1266
- display: flex;
1267
- padding: 16px
1268
- 16px;
1269
- padding: var(--modal--padding);
902
+ .hGr6YW4AeLM- .vtSDcuzNr9Q- {
903
+ -ms-flex: 1;
904
+ flex: 1;
905
+ resize: none;
906
+ scroll-padding-bottom: 16px;
907
+ scroll-padding-bottom: var(--space-base);
1270
908
  padding-top: 0;
1271
- -ms-flex: 1 1 100%;
1272
- flex: 1 1 100%;
1273
- -ms-flex-pack: end;
1274
- justify-content: flex-end;
1275
- }
1276
-
1277
- /**
1278
- * 1. Use CSS `order` to adjust the buttons position on the UI
1279
- */
1280
-
1281
- .hOiEWds2Vq8- {
1282
- -ms-flex: 1 1 auto;
1283
- flex: 1 1 auto;
1284
- -ms-flex-order: 1;
1285
- order: 1; /* 1 */
1286
- }
1287
-
1288
- .K31NzxPZP9s- {
1289
- display: -ms-flexbox;
1290
- display: flex;
1291
- -ms-flex: 0 0 auto;
1292
- flex: 0 0 auto;
1293
- -ms-flex-order: 2;
1294
- order: 2; /* 1 */
1295
909
  }
1296
910
 
1297
- /* This is in a correct position and order */
1298
-
1299
- /* stylelint-disable-next-line no-descending-specificity */
1300
-
1301
- .K31NzxPZP9s- > * {
1302
- margin-left: 8px !important;
1303
- margin-left: var(--space-small) !important;
911
+ .NwQGiWBWIsc- .vtSDcuzNr9Q- {
912
+ z-index: var(--field--label-elevation);
1304
913
  }
1305
914
 
1306
- .K31NzxPZP9s- > *:first-child {
1307
- -ms-flex-order: 2;
1308
- order: 2; /* 1 */
915
+ .vtSDcuzNr9Q-:-webkit-autofill,
916
+ .vtSDcuzNr9Q-:-webkit-autofill:hover,
917
+ .vtSDcuzNr9Q-:-webkit-autofill:focus,
918
+ .vtSDcuzNr9Q-:-webkit-autofill:active {
919
+ -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset !important;
920
+ -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;
1309
921
  }
1310
922
 
1311
- .K31NzxPZP9s- > *:nth-child(2) {
1312
- -ms-flex-order: 1;
1313
- order: 1; /* 1 */
923
+ .vtSDcuzNr9Q-:-webkit-autofill,
924
+ .vtSDcuzNr9Q-:-webkit-autofill:hover,
925
+ .vtSDcuzNr9Q-:-webkit-autofill:focus,
926
+ .vtSDcuzNr9Q-:-webkit-autofill:active {
927
+ -webkit-text-fill-color: hsl(197, 90%, 12%);
928
+ -webkit-text-fill-color: var(--field--value-color);
1314
929
  }
1315
930
 
1316
- :root {
1317
- /**
1318
- * These `--public-field` properties are used in other components such
1319
- * as InputGroup, therefore they must stay on :root
1320
- **/
1321
- --public-field--top-left-radius: var(--radius-base);
1322
- --public-field--top-right-radius: var(--radius-base);
1323
- --public-field--bottom-left-radius: var(--radius-base);
1324
- --public-field--bottom-right-radius: var(--radius-base);
1325
-
1326
- --field--placeholder-color: var(--color-base-blue--600);
1327
- --field--value-color: var(--color-heading);
1328
- --field--border-color: var(--color-border--interactive);
1329
-
1330
- --postfix-right: var(--space-base);
1331
- }
931
+ .hGr6YW4AeLM-:not(:has(.Dgk00tzlODA-)) .vtSDcuzNr9Q- {
932
+ padding-top: var(--field--padding-top);
933
+ }
1332
934
 
1333
- .YL-mNv-Bl6g- {
1334
- width: 100%;
935
+ .hGr6YW4AeLM-.QBCWi9GBgMs- .vtSDcuzNr9Q- {
936
+ padding-right: 0;
1335
937
  }
1336
938
 
1337
939
  /**
1338
- * Wrapper
940
+ * Label
1339
941
  **/
1340
942
 
1341
- ._8lhbGTQ-hhg- {
1342
- --field--placeholder-offset: 50%;
1343
- --field--placeholder-transform: -50%;
1344
-
1345
- --field--textAlign: left;
1346
-
1347
- --field--height: var(--space-largest);
1348
-
1349
- --field--padding-top: calc(var(--space-base) - var(--space-smallest));
1350
- --field--padding-bottom: calc(var(--space-base) - var(--space-smallest));
1351
- --field--padding-left: var(--space-base);
1352
- --field--padding-right: var(--space-base);
1353
-
1354
- --field--value-lineHeight: calc(var(--base-unit) * 1.25);
1355
-
1356
- --field--background-color: var(--color-surface);
1357
-
1358
- --field--base-elevation: var(--elevation-base);
1359
- --field--label-elevation: calc(var(--field--base-elevation) + 1);
1360
- --field--postfix-elevation: calc(var(--field--base-elevation) - 1);
1361
- --field--postfix-action-elevation: calc(var(--field--base-elevation) + 2);
1362
-
1363
- display: -ms-flexbox;
1364
-
1365
- display: flex;
1366
- -ms-flex-direction: column;
1367
- flex-direction: column;
943
+ .Dgk00tzlODA- {
944
+ position: absolute;
945
+ top: var(--field--placeholder-offset);
946
+ z-index: var(--field--label-elevation);
1368
947
  width: 100%;
1369
- border: 1px solid hsl(200, 13%, 87%);
1370
- border: var(--border-base) solid var(--field--border-color);
1371
- border-radius: 8px;
1372
- border-radius: var(--radius-base);
1373
- border-top-right-radius: 8px;
1374
- border-top-right-radius: var(--public-field--top-right-radius);
1375
- border-bottom-right-radius: 8px;
1376
- border-bottom-right-radius: var(--public-field--bottom-right-radius);
1377
- border-bottom-left-radius: 8px;
1378
- border-bottom-left-radius: var(--public-field--bottom-left-radius);
1379
- border-top-left-radius: 8px;
1380
- border-top-left-radius: var(--public-field--top-left-radius);
1381
- color: hsl(197, 90%, 12%);
1382
- color: var(--field--value-color);
1383
- font-size: 14px;
1384
- font-size: var(--typography--fontSize-base);
1385
- background-color: rgba(255, 255, 255, 1);
1386
- background-color: var(--field--background-color);
948
+ padding-left: var(--field--padding-left);
949
+ padding-right: var(--field--padding-right);
950
+ overflow: hidden;
951
+ color: hsl(197, 15%, 43%);
952
+ color: var(--field--placeholder-color);
953
+ line-height: var(--field--value-lineHeight);
954
+ text-align: var(--field--textAlign);
955
+ text-overflow: ellipsis;
956
+ white-space: nowrap;
957
+ pointer-events: none;
958
+ -webkit-transform: translateY(var(--field--placeholder-transform));
959
+ transform: translateY(var(--field--placeholder-transform));
960
+ transition: all 100ms;
961
+ transition: all var(--timing-quick);
1387
962
  }
1388
963
 
1389
- ._8lhbGTQ-hhg- * {
1390
- box-sizing: border-box;
964
+ .Qb8zQ8n-8vc- {
965
+ display: block;
966
+ margin-bottom: 4px;
967
+ margin-bottom: var(--space-smaller);
968
+ color: hsl(197, 15%, 43%);
969
+ color: var(--field--placeholder-color);
970
+ line-height: 1.25;
971
+ line-height: var(--typography--lineHeight-base);
1391
972
  }
1392
973
 
1393
- ._8lhbGTQ-hhg-:not(.Tz9LK9ABKMk-):focus-within {
1394
- position: relative;
1395
- z-index: var(--field--base-elevation);
1396
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
1397
- box-shadow: var(--shadow-focus);
974
+ .NwQGiWBWIsc- select,
975
+ ._3TJdT91YD3c- select,
976
+ .NwQGiWBWIsc- .Dgk00tzlODA- {
977
+ padding-right: calc(var(--field--padding-right) + 16px * 2);
978
+ padding-right: calc(var(--field--padding-right) + var(--base-unit) * 2);
1398
979
  }
1399
980
 
1400
- .b5mv1x1H7YE- {
1401
- display: -ms-flexbox;
1402
- display: flex;
1403
- height: var(--field--height);
1404
- -ms-flex: 1;
1405
- flex: 1;
981
+ .NwQGiWBWIsc- option {
982
+ background-color: var(--field--background-color);
1406
983
  }
1407
984
 
1408
- .hGr6YW4AeLM-.QBCWi9GBgMs- .b5mv1x1H7YE- {
1409
- margin-right: var(--field--padding-right);
985
+ .QmMiyoAWp-g- .Dgk00tzlODA- {
986
+ padding-top: var(--field--padding-top);
987
+ -webkit-transform: translateY(var(--field--placeholder-transform));
988
+ transform: translateY(var(--field--placeholder-transform));
1410
989
  }
1411
990
 
1412
- /* When there's placeholder text on an EMPTY time input
1413
- - we hide the field value when the input is:
1414
- - not focused or disabled
1415
- */
1416
-
1417
- ._0pmqVa2zSE4- input:disabled,
1418
- ._0pmqVa2zSE4-:not(:focus-within) input {
1419
- color: var(--field--background-color);
1420
- -webkit-text-fill-color: var(--field--background-color);
991
+ .hGr6YW4AeLM- .Dgk00tzlODA- {
992
+ padding-right: var(--field--padding-right);
1421
993
  }
1422
994
 
1423
- ._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-):focus-within,
1424
- .F1t76G6bDKo- {
1425
- --field--placeholder-color: var(--color-text--secondary);
1426
- --field--placeholder-offset: var(--space-smallest);
1427
- --field--placeholder-transform: 0;
1428
- --field--padding-top: calc(var(--space-base) + var(--space-smaller));
1429
- --field--padding-bottom: var(--space-small);
995
+ .F1t76G6bDKo- .Dgk00tzlODA- {
996
+ font-size: 12px;
997
+ font-size: var(--typography--fontSize-small);
1430
998
  }
1431
999
 
1432
- ._0pmqVa2zSE4-:not(.Tz9LK9ABKMk-)._9tjyT9QUtP8-:focus-within,
1433
- .F1t76G6bDKo-._9tjyT9QUtP8- {
1434
- --field--padding-top: calc(var(--space-large) + var(--space-smaller));
1000
+ .Sw5O4I0lMJg-.F1t76G6bDKo- .Dgk00tzlODA- {
1001
+ display: none;
1435
1002
  }
1436
1003
 
1437
- ._8lhbGTQ-hhg-.QmMiyoAWp-g- {
1438
- --field--placeholder-offset: 0;
1439
- --field--placeholder-transform: 0;
1440
- min-height: auto;
1004
+ .QmMiyoAWp-g-.F1t76G6bDKo- .Dgk00tzlODA- {
1005
+ padding-top: 2px;
1006
+ padding-top: var(--space-smallest);
1441
1007
  }
1442
1008
 
1443
- ._8lhbGTQ-hhg-.hGr6YW4AeLM- {
1444
- resize: vertical;
1445
- overflow: auto;
1009
+ .hGr6YW4AeLM-.F1t76G6bDKo- .Dgk00tzlODA- {
1010
+ background-color: var(--field--background-color);
1446
1011
  }
1447
1012
 
1448
- .XWDSfe6weSY-:not(.Tz9LK9ABKMk-),
1449
- .XWDSfe6weSY-:not(.Tz9LK9ABKMk-):focus-within {
1450
- --field--border-color: var(--color-critical);
1451
- position: relative;
1013
+ ._0pmqVa2zSE4-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1014
+ font-size: 12px;
1015
+ font-size: var(--typography--fontSize-small);
1452
1016
  }
1453
1017
 
1454
- .Tz9LK9ABKMk- {
1455
- --field--placeholder-color: var(--color-disabled);
1456
- --field--value-color: var(--color-disabled);
1457
- --field--background-color: var(--color-disabled--secondary);
1458
- --field--border-color: var(--color-border);
1018
+ ._0pmqVa2zSE4-.Sw5O4I0lMJg-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1019
+ display: none;
1459
1020
  }
1460
1021
 
1461
- /* override iOS default styling for disabled input */
1022
+ /**This is valid cascading order **/
1462
1023
 
1463
- .Tz9LK9ABKMk- :disabled {
1464
- -webkit-text-fill-color: hsl(197, 90%, 12%);
1465
- -webkit-text-fill-color: var(--field--value-color);
1466
- opacity: 1;
1467
- }
1024
+ /* stylelint-disable-next-line no-descending-specificity */
1468
1025
 
1469
- .Sw5O4I0lMJg- {
1470
- --field--padding-left: var(--space-slim);
1471
- --field--padding-right: var(--space-slim);
1472
- --field--padding-top: var(--space-small);
1473
- --field--padding-bottom: var(--space-small);
1474
- --field--height: calc(var(--space-larger) + var(--space-smaller));
1475
- --postfix-right: calc(var(--space-small) + var(--space-smaller));
1026
+ ._9tjyT9QUtP8-.F1t76G6bDKo- .Dgk00tzlODA-,
1027
+ ._0pmqVa2zSE4-._9tjyT9QUtP8-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1028
+ padding-top: 8px;
1029
+ padding-top: var(--space-small);
1476
1030
  }
1477
1031
 
1478
- ._9tjyT9QUtP8- {
1479
- --field--padding-left: var(--space-large);
1480
- --field--padding-right: var(--space-large);
1481
- --field--height: calc(var(--space-extravagant));
1482
- --postfix-right: var(--space-large);
1032
+ /**
1033
+ * Postfix
1034
+ **/
1035
+
1036
+ .yTDzs9h1otI- {
1037
+ position: absolute;
1038
+ top: 50%;
1039
+ right: 16px;
1040
+ right: var(--postfix-right);
1041
+ z-index: var(--field--postfix-elevation);
1042
+ -webkit-transform: translateY(-50%);
1043
+ transform: translateY(-50%);
1483
1044
  }
1484
1045
 
1485
- .SaORbL7SYWY- {
1486
- display: inline-block;
1487
- width: auto;
1046
+ /**
1047
+ * Affix
1048
+ **/
1049
+
1050
+ .m0YpdssD2dY- {
1051
+ display: -ms-flexbox;
1052
+ display: flex;
1053
+ -ms-flex-align: center;
1054
+ align-items: center;
1055
+ -ms-flex-pack: center;
1056
+ justify-content: center;
1057
+ margin: 0 calc(var(--field--padding-left) * -1) 0 0;
1058
+ padding: 0 var(--field--padding-right) 0 var(--field--padding-left);
1488
1059
  }
1489
1060
 
1490
- .ozy2UoT2vsg- {
1491
- --field--textAlign: center;
1061
+ .m0YpdssD2dY-._-3mMnjSh6ok- {
1062
+ margin: 0 0 0 calc(var(--field--padding-right) * -1);
1063
+ padding-left: 8px;
1064
+ padding-left: var(--space-small);
1492
1065
  }
1493
1066
 
1494
- ._3TJdT91YD3c- {
1495
- --field--textAlign: right;
1067
+ .-Wzcb0pBh5I- {
1068
+ display: -ms-flexbox;
1069
+ display: flex;
1070
+ margin: 0 calc((var(--field--padding-left) - 2px) * -1) 0 0;
1071
+ margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;
1072
+ padding: 0 0 0 var(--field--padding-left);
1073
+ line-height: var(--field--value-lineHeight);
1074
+ -ms-flex-align: center;
1075
+ align-items: center;
1076
+ -ms-flex: 0 0 auto;
1077
+ flex: 0 0 auto;
1496
1078
  }
1497
1079
 
1498
- /**
1499
- * The custom property --formField-maxLength is getting defined inside the
1500
- * component.
1501
- */
1080
+ .-Wzcb0pBh5I-._-3mMnjSh6ok- {
1081
+ margin: 0 0 0 calc((var(--field--padding-left) - 2px) * -1);
1082
+ margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);
1083
+ padding: 0 var(--field--padding-left) 0 0;
1084
+ }
1502
1085
 
1503
- .W6GrMqLy2qk- {
1504
- width: calc(
1505
- (16px * var(--formField-maxLength)) + var(--field--padding-left) +
1506
- var(--field--padding-right)
1507
- );
1508
- width: calc(
1509
- (var(--base-unit) * var(--formField-maxLength)) + var(--field--padding-left) +
1510
- var(--field--padding-right)
1511
- );
1086
+ .F1t76G6bDKo-:not(.Sw5O4I0lMJg-) .-Wzcb0pBh5I- {
1087
+ padding-top: var(--field--padding-top);
1088
+ padding-bottom: var(--field--padding-bottom);
1512
1089
  }
1513
1090
 
1514
- /**
1515
- * Input Wrapper
1516
- **/
1091
+ .DHX5ijY3xIw- {
1092
+ margin-top: 4px;
1093
+ margin-top: var(--space-smaller);
1094
+ }
1517
1095
 
1518
- .-LmjnYRU0r0- {
1096
+ .AL-2brNI7dk- {
1519
1097
  display: -ms-flexbox;
1520
1098
  display: flex;
1521
- -ms-flex: 1;
1522
- flex: 1;
1523
1099
  position: relative;
1524
- /* Ensure input stays with the rest of the element stack */
1525
- z-index: 0;
1526
- z-index: var(--elevation-default);
1100
+ margin: 8px var(--field--padding-right) 16px
1101
+ var(--field--padding-left);
1102
+ margin: var(--space-small) var(--field--padding-right) var(--space-base)
1103
+ var(--field--padding-left);
1527
1104
  }
1528
1105
 
1529
- .yVXYv6hkuOA- {
1530
- position: relative;
1531
- -ms-flex: 1;
1532
- flex: 1;
1106
+ .AL-2brNI7dk-::before {
1107
+ content: "";
1108
+ display: block;
1109
+ position: absolute;
1110
+ top: calc(-1.25 * 16px);
1111
+ top: calc(-1.25 * var(--space-base));
1112
+ right: 0;
1113
+ left: 0;
1114
+ z-index: 1;
1115
+ z-index: var(--elevation-base);
1116
+ height: 16px;
1117
+ height: var(--space-base);
1118
+ background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 60%);
1119
+ background: linear-gradient(to bottom, transparent, var(--color-surface) 60%);
1533
1120
  }
1534
1121
 
1535
- /**
1536
- * Input
1537
- **/
1122
+ :root {
1123
+ --public--button--color-variation: var(--color-interactive);
1124
+ --public--button--color-variation--hover: var(--color-interactive--hover);
1125
+ }
1538
1126
 
1539
- .vtSDcuzNr9Q- {
1540
- position: relative;
1541
- z-index: var(--field--base-elevation);
1542
- width: 100%;
1543
- padding-top: var(--field--padding-top);
1544
- padding-bottom: var(--field--padding-bottom);
1545
- padding-left: var(--field--padding-left);
1546
- padding-right: var(--field--padding-right);
1547
- border: none;
1127
+ ._7BLGtYNuJOU- {
1128
+ --button--color-surface: var(--color-surface);
1129
+ --button--color-surface--hover: var(--color-surface--hover);
1130
+ --button--color-primaryLabel: var(--color-surface);
1131
+ --button--duration-loading: var(--timing-loading--extended);
1132
+ --button--size: 40px;
1133
+
1134
+ display: -ms-inline-flexbox;
1135
+
1136
+ display: inline-flex;
1137
+ min-height: 40px;
1138
+ min-height: var(--button--size);
1139
+ box-sizing: border-box;
1140
+ margin: 0;
1141
+ border: 1px solid hsl(107, 58%, 33%);
1142
+ border: var(--border-base) solid var(--public--button--color-variation);
1548
1143
  border-radius: 8px;
1549
1144
  border-radius: var(--radius-base);
1550
- color: inherit;
1551
- font-family: inherit;
1552
- font-size: inherit;
1553
- line-height: var(--field--value-lineHeight);
1554
- text-align: var(--field--textAlign);
1555
- background: transparent;
1145
+ color: hsl(107, 58%, 33%);
1146
+ color: var(--public--button--color-variation);
1147
+ -webkit-font-smoothing: antialiased;
1148
+ line-height: 1;
1149
+ text-align: center;
1150
+ -webkit-text-decoration: none;
1151
+ text-decoration: none;
1152
+ vertical-align: middle;
1153
+ background-color: rgba(255, 255, 255, 1);
1154
+ background-color: var(--button--color-surface);
1155
+ cursor: pointer;
1156
+ transition: all 200ms ease-out;
1157
+ transition: all var(--timing-base) ease-out;
1556
1158
  -webkit-appearance: none;
1557
1159
  appearance: none;
1160
+ fill: hsl(107, 58%, 33%);
1161
+ fill: var(--public--button--color-variation);
1162
+ -ms-flex-align: center;
1163
+ align-items: center;
1164
+ -ms-flex-pack: center;
1165
+ justify-content: center;
1166
+ gap: 4px;
1167
+ gap: var(--space-smaller);
1558
1168
  }
1559
1169
 
1560
- .vtSDcuzNr9Q-:focus {
1561
- outline: none;
1170
+ ._7BLGtYNuJOU- * {
1171
+ fill: inherit !important;
1562
1172
  }
1563
1173
 
1564
- .MVhuQuzUBUs- {
1565
- padding-left: calc(var(--field--padding-left) + 4px);
1566
- padding-left: calc(var(--field--padding-left) + var(--space-smaller));
1174
+ ._7BLGtYNuJOU- * {
1175
+ color: inherit;
1176
+ /* required to over-ride very specific fill from <Icon> */
1567
1177
  }
1568
1178
 
1569
- .hGr6YW4AeLM- .yVXYv6hkuOA- {
1570
- display: -ms-flexbox;
1571
- display: flex;
1572
- min-height: var(--field--height);
1573
- -ms-flex-direction: column;
1574
- flex-direction: column;
1179
+ ._7BLGtYNuJOU-:hover,
1180
+ a._7BLGtYNuJOU-:hover,
1181
+ ._7BLGtYNuJOU-:focus-visible,
1182
+ a._7BLGtYNuJOU-:focus-visible,
1183
+ ._7BLGtYNuJOU-:active,
1184
+ a._7BLGtYNuJOU-:active {
1185
+ border-color: hsl(107, 65%, 24%);
1186
+ border-color: var(--public--button--color-variation--hover);
1187
+ color: hsl(107, 65%, 24%);
1188
+ color: var(--public--button--color-variation--hover);
1189
+ fill: hsl(107, 65%, 24%);
1190
+ fill: var(--public--button--color-variation--hover);
1191
+ background-color: var(--button--color-surface--hover);
1575
1192
  }
1576
1193
 
1577
- .hGr6YW4AeLM- .-LmjnYRU0r0-:has(.Dgk00tzlODA-) .yVXYv6hkuOA- {
1578
- padding-top: var(--field--padding-top);
1194
+ ._7BLGtYNuJOU-:focus-visible,
1195
+ a._7BLGtYNuJOU-:focus-visible,
1196
+ ._7BLGtYNuJOU-:active,
1197
+ a._7BLGtYNuJOU-:active {
1198
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
1199
+ box-shadow: var(--shadow-focus);
1200
+ outline: transparent;
1579
1201
  }
1580
1202
 
1581
- .hGr6YW4AeLM- .vtSDcuzNr9Q- {
1582
- -ms-flex: 1;
1583
- flex: 1;
1584
- resize: none;
1585
- scroll-padding-bottom: 16px;
1586
- scroll-padding-bottom: var(--space-base);
1587
- padding-top: 0;
1588
- }
1203
+ /* Variation */
1589
1204
 
1590
- .NwQGiWBWIsc- .vtSDcuzNr9Q- {
1591
- z-index: var(--field--label-elevation);
1205
+ .amVSJ50CiOo- {
1206
+ --public--button--color-variation: var(--color-interactive);
1207
+ --public--button--color-variation--hover: var(--color-interactive--hover);
1592
1208
  }
1593
1209
 
1594
- .vtSDcuzNr9Q-:-webkit-autofill,
1595
- .vtSDcuzNr9Q-:-webkit-autofill:hover,
1596
- .vtSDcuzNr9Q-:-webkit-autofill:focus,
1597
- .vtSDcuzNr9Q-:-webkit-autofill:active {
1598
- -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 1) inset !important;
1599
- -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset !important;
1210
+ .V4GfDDF1ESI-,
1211
+ .MVT-qs-bO9M- {
1212
+ --public--button--color-variation: var(--color-interactive--subtle);
1213
+ --public--button--color-variation--hover: var(
1214
+ --color-interactive--subtle--hover
1215
+ );
1600
1216
  }
1601
1217
 
1602
- .vtSDcuzNr9Q-:-webkit-autofill,
1603
- .vtSDcuzNr9Q-:-webkit-autofill:hover,
1604
- .vtSDcuzNr9Q-:-webkit-autofill:focus,
1605
- .vtSDcuzNr9Q-:-webkit-autofill:active {
1606
- -webkit-text-fill-color: hsl(197, 90%, 12%);
1607
- -webkit-text-fill-color: var(--field--value-color);
1218
+ ._9YS8IK6Inew- {
1219
+ --public--button--color-variation: var(--color-destructive);
1220
+ --public--button--color-variation--hover: var(--color-destructive--hover);
1608
1221
  }
1609
1222
 
1610
- .hGr6YW4AeLM-:not(:has(.Dgk00tzlODA-)) .vtSDcuzNr9Q- {
1611
- padding-top: var(--field--padding-top);
1612
- }
1223
+ /* Type */
1613
1224
 
1614
- .hGr6YW4AeLM-.QBCWi9GBgMs- .vtSDcuzNr9Q- {
1615
- padding-right: 0;
1225
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-),
1226
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
1227
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
1228
+ color: var(--button--color-primaryLabel);
1229
+ background-color: hsl(107, 58%, 33%);
1230
+ background-color: var(--public--button--color-variation);
1231
+ fill: var(--button--color-primaryLabel);
1616
1232
  }
1617
1233
 
1618
- /**
1619
- * Label
1620
- **/
1234
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):hover,
1235
+ .TrzCxs3OEpM-:not(.MVT-qs-bO9M-):not(.zgRx3ehZ2z8-):focus-visible {
1236
+ background-color: hsl(107, 65%, 24%);
1237
+ background-color: var(--public--button--color-variation--hover);
1238
+ }
1621
1239
 
1622
- .Dgk00tzlODA- {
1623
- position: absolute;
1624
- top: var(--field--placeholder-offset);
1625
- z-index: var(--field--label-elevation);
1626
- width: 100%;
1627
- padding-left: var(--field--padding-left);
1628
- padding-right: var(--field--padding-right);
1629
- overflow: hidden;
1630
- color: hsl(197, 15%, 43%);
1631
- color: var(--field--placeholder-color);
1632
- line-height: var(--field--value-lineHeight);
1633
- text-align: var(--field--textAlign);
1634
- text-overflow: ellipsis;
1635
- white-space: nowrap;
1636
- pointer-events: none;
1637
- -webkit-transform: translateY(var(--field--placeholder-transform));
1638
- transform: translateY(var(--field--placeholder-transform));
1639
- transition: all 100ms;
1640
- transition: all var(--timing-quick);
1240
+ .MVT-qs-bO9M-.TrzCxs3OEpM- {
1241
+ color: hsl(107, 58%, 33%);
1242
+ color: var(--public--button--color-variation);
1243
+ fill: hsl(107, 58%, 33%);
1244
+ fill: var(--public--button--color-variation);
1245
+ background-color: var(--button--color-surface);
1641
1246
  }
1642
1247
 
1643
- .Qb8zQ8n-8vc- {
1644
- display: block;
1645
- margin-bottom: 4px;
1646
- margin-bottom: var(--space-smaller);
1647
- color: hsl(197, 15%, 43%);
1648
- color: var(--field--placeholder-color);
1649
- line-height: 1.25;
1650
- line-height: var(--typography--lineHeight-base);
1248
+ .QaWL8FLJ5Aw-,
1249
+ .MVT-qs-bO9M-.TrzCxs3OEpM- {
1250
+ border-color: hsl(200, 13%, 87%);
1251
+ border-color: var(--color-border--interactive);
1651
1252
  }
1652
1253
 
1653
- .NwQGiWBWIsc- select,
1654
- ._3TJdT91YD3c- select,
1655
- .NwQGiWBWIsc- .Dgk00tzlODA- {
1656
- padding-right: calc(var(--field--padding-right) + 16px * 2);
1657
- padding-right: calc(var(--field--padding-right) + var(--base-unit) * 2);
1254
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
1255
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
1256
+ color: hsl(107, 65%, 24%);
1257
+ color: var(--public--button--color-variation--hover);
1258
+ background-color: var(--button--color-surface--hover);
1259
+ fill: hsl(107, 65%, 24%);
1260
+ fill: var(--public--button--color-variation--hover);
1658
1261
  }
1659
1262
 
1660
- .NwQGiWBWIsc- option {
1661
- background-color: var(--field--background-color);
1263
+ .QaWL8FLJ5Aw-:hover,
1264
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:hover,
1265
+ .QaWL8FLJ5Aw-:focus-visible,
1266
+ .MVT-qs-bO9M-.TrzCxs3OEpM-:focus-visible {
1267
+ border-color: hsl(107, 65%, 24%);
1268
+ border-color: var(--public--button--color-variation--hover);
1662
1269
  }
1663
1270
 
1664
- .QmMiyoAWp-g- .Dgk00tzlODA- {
1665
- padding-top: var(--field--padding-top);
1666
- -webkit-transform: translateY(var(--field--placeholder-transform));
1667
- transform: translateY(var(--field--placeholder-transform));
1271
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
1272
+ background-color: var(--button--color-surface);
1668
1273
  }
1669
1274
 
1670
- .hGr6YW4AeLM- .Dgk00tzlODA- {
1671
- padding-right: var(--field--padding-right);
1275
+ .MhDYVRl8PUc-,
1276
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw- {
1277
+ border-color: transparent;
1672
1278
  }
1673
1279
 
1674
- .F1t76G6bDKo- .Dgk00tzlODA- {
1675
- font-size: 12px;
1676
- font-size: var(--typography--fontSize-small);
1280
+ .MhDYVRl8PUc- {
1281
+ border-color: transparent;
1282
+ -webkit-text-decoration: underline;
1283
+ text-decoration: underline;
1284
+ text-decoration-thickness: 2px;
1285
+ text-decoration-thickness: var(--border-thick);
1286
+ text-underline-offset: 2px;
1287
+ text-underline-offset: var(--space-smallest);
1677
1288
  }
1678
1289
 
1679
- .Sw5O4I0lMJg-.F1t76G6bDKo- .Dgk00tzlODA- {
1680
- display: none;
1290
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
1291
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible {
1292
+ background-color: var(--button--color-surface--hover);
1681
1293
  }
1682
1294
 
1683
- .QmMiyoAWp-g-.F1t76G6bDKo- .Dgk00tzlODA- {
1684
- padding-top: 2px;
1685
- padding-top: var(--space-smallest);
1295
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
1296
+ .MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
1297
+ a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:hover,
1298
+ a.MVT-qs-bO9M-.QaWL8FLJ5Aw-:focus-visible,
1299
+ .MhDYVRl8PUc-:hover,
1300
+ .MhDYVRl8PUc-:focus-visible,
1301
+ a.MhDYVRl8PUc-:hover,
1302
+ a.MhDYVRl8PUc-:focus-visible {
1303
+ border-color: transparent;
1686
1304
  }
1687
1305
 
1688
- .hGr6YW4AeLM-.F1t76G6bDKo- .Dgk00tzlODA- {
1689
- background-color: var(--field--background-color);
1306
+ .MVT-qs-bO9M-.MhDYVRl8PUc- {
1307
+ border-color: transparent;
1308
+ background-color: transparent;
1690
1309
  }
1691
1310
 
1692
- ._0pmqVa2zSE4-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1693
- font-size: 12px;
1694
- font-size: var(--typography--fontSize-small);
1311
+ .MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
1312
+ .MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible,
1313
+ a.MVT-qs-bO9M-.MhDYVRl8PUc-:hover,
1314
+ a.MVT-qs-bO9M-.MhDYVRl8PUc-:focus-visible {
1315
+ color: hsl(197, 90%, 12%);
1316
+ color: var(--color-interactive--subtle--hover);
1317
+ background-color: hsl(53, 21%, 93%);
1318
+ background-color: var(--color-surface--hover);
1319
+ fill: hsl(197, 90%, 12%);
1320
+ fill: var(--color-interactive--subtle--hover);
1695
1321
  }
1696
1322
 
1697
- ._0pmqVa2zSE4-.Sw5O4I0lMJg-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1698
- display: none;
1699
- }
1323
+ /* Disabled */
1700
1324
 
1701
- /**This is valid cascading order **/
1325
+ ._7BLGtYNuJOU-.zgRx3ehZ2z8-,
1326
+ a._7BLGtYNuJOU-.zgRx3ehZ2z8-,
1327
+ ._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover,
1328
+ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
1329
+ border-color: hsl(0, 0%, 93%);
1330
+ border-color: var(--color-disabled--secondary);
1331
+ color: hsl(0, 0%, 72%);
1332
+ color: var(--color-disabled);
1333
+ -webkit-user-select: none;
1334
+ -ms-user-select: none;
1335
+ user-select: none;
1336
+ background-color: hsl(0, 0%, 93%);
1337
+ background-color: var(--color-disabled--secondary);
1338
+ fill: hsl(0, 0%, 72%);
1339
+ fill: var(--color-disabled);
1340
+ pointer-events: none;
1341
+ cursor: not-allowed;
1342
+ }
1702
1343
 
1703
- /* stylelint-disable-next-line no-descending-specificity */
1344
+ /* Sizes */
1704
1345
 
1705
- ._9tjyT9QUtP8-.F1t76G6bDKo- .Dgk00tzlODA-,
1706
- ._0pmqVa2zSE4-._9tjyT9QUtP8-.F1t76G6bDKo-:focus-within:not(.Tz9LK9ABKMk-) .Dgk00tzlODA- {
1707
- padding-top: 8px;
1708
- padding-top: var(--space-small);
1346
+ .lPPuBfTJl5k- {
1347
+ --button--size: 32px;
1348
+ padding: 4px 12px;
1349
+ padding: var(--space-smaller) var(--space-slim);
1709
1350
  }
1710
1351
 
1711
- /**
1712
- * Postfix
1713
- **/
1352
+ .VyMJpVxCrxI- {
1353
+ padding: 0 16px;
1354
+ padding: 0 var(--space-base);
1355
+ }
1714
1356
 
1715
- .yTDzs9h1otI- {
1716
- position: absolute;
1717
- top: 50%;
1718
- right: 16px;
1719
- right: var(--postfix-right);
1720
- z-index: var(--field--postfix-elevation);
1721
- -webkit-transform: translateY(-50%);
1722
- transform: translateY(-50%);
1357
+ .Uh29dvNk6I0- {
1358
+ --button--size: 48px;
1359
+ padding: 0 calc(16px + 4px);
1360
+ padding: 0 calc(var(--space-base) + var(--space-smaller));
1723
1361
  }
1724
1362
 
1725
- /**
1726
- * Affix
1727
- **/
1363
+ /* Icon */
1728
1364
 
1729
- .m0YpdssD2dY- {
1730
- display: -ms-flexbox;
1731
- display: flex;
1732
- -ms-flex-align: center;
1733
- align-items: center;
1734
- -ms-flex-pack: center;
1735
- justify-content: center;
1736
- margin: 0 calc(var(--field--padding-left) * -1) 0 0;
1737
- padding: 0 var(--field--padding-right) 0 var(--field--padding-left);
1365
+ ._7BLGtYNuJOU- svg {
1366
+ -ms-flex-negative: 0;
1367
+ flex-shrink: 0;
1738
1368
  }
1739
1369
 
1740
- .m0YpdssD2dY-._-3mMnjSh6ok- {
1741
- margin: 0 0 0 calc(var(--field--padding-right) * -1);
1742
- padding-left: 8px;
1743
- padding-left: var(--space-small);
1370
+ .H8uYM7Udc4o-:has(> svg:only-child) {
1371
+ width: var(--button--size);
1372
+ padding: 0;
1744
1373
  }
1745
1374
 
1746
- .-Wzcb0pBh5I- {
1747
- display: -ms-flexbox;
1748
- display: flex;
1749
- margin: 0 calc((var(--field--padding-left) - 2px) * -1) 0 0;
1750
- margin: 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1) 0 0;
1751
- padding: 0 0 0 var(--field--padding-left);
1752
- line-height: var(--field--value-lineHeight);
1753
- -ms-flex-align: center;
1754
- align-items: center;
1755
- -ms-flex: 0 0 auto;
1756
- flex: 0 0 auto;
1375
+ /** Icon on Right */
1376
+
1377
+ .H8uYM7Udc4o- > span ~ svg {
1378
+ margin-right: calc(4px * -1);
1379
+ margin-right: calc(var(--space-smaller) * -1);
1757
1380
  }
1758
1381
 
1759
- .-Wzcb0pBh5I-._-3mMnjSh6ok- {
1760
- margin: 0 0 0 calc((var(--field--padding-left) - 2px) * -1);
1761
- margin: 0 0 0 calc((var(--field--padding-left) - var(--space-smallest)) * -1);
1762
- padding: 0 var(--field--padding-left) 0 0;
1382
+ /** Icon on Left */
1383
+
1384
+ .H8uYM7Udc4o- > svg:has(+ span:nth-child(2)) {
1385
+ margin-left: calc(4px * -1);
1386
+ margin-left: calc(var(--space-smaller) * -1);
1763
1387
  }
1764
1388
 
1765
- .F1t76G6bDKo-:not(.Sw5O4I0lMJg-) .-Wzcb0pBh5I- {
1766
- padding-top: var(--field--padding-top);
1767
- padding-bottom: var(--field--padding-bottom);
1389
+ .yBId-F-geAA- {
1390
+ width: 100%;
1768
1391
  }
1769
1392
 
1770
- .DHX5ijY3xIw- {
1771
- margin-top: 4px;
1772
- margin-top: var(--space-smaller);
1393
+ .NCs-BISj1XU- {
1394
+ background-image: linear-gradient(
1395
+ 135deg,
1396
+ rgba(0, 0, 0, 0.1) 0%,
1397
+ rgba(0, 0, 0, 0.1) 25%,
1398
+ transparent 25%,
1399
+ transparent 50%,
1400
+ rgba(0, 0, 0, 0.1) 50%,
1401
+ rgba(0, 0, 0, 0.1) 75%,
1402
+ transparent 75%,
1403
+ transparent 100%
1404
+ );
1405
+ background-size: 32px 32px;
1406
+ background-size: var(--space-larger) var(--space-larger);
1407
+ pointer-events: none;
1408
+ cursor: not-allowed;
1409
+ -webkit-animation-duration: var(--button--duration-loading);
1410
+ animation-duration: var(--button--duration-loading);
1411
+ -webkit-animation-iteration-count: infinite;
1412
+ animation-iteration-count: infinite;
1413
+ -webkit-animation-name: M0LU-Rdq-MA-;
1414
+ animation-name: M0LU-Rdq-MA-;
1415
+ -webkit-animation-timing-function: linear;
1416
+ animation-timing-function: linear;
1773
1417
  }
1774
1418
 
1775
- .AL-2brNI7dk- {
1776
- display: -ms-flexbox;
1777
- display: flex;
1778
- position: relative;
1779
- margin: 8px var(--field--padding-right) 16px
1780
- var(--field--padding-left);
1781
- margin: var(--space-small) var(--field--padding-right) var(--space-base)
1782
- var(--field--padding-left);
1419
+ .TrzCxs3OEpM-.NCs-BISj1XU-:not(.MVT-qs-bO9M-) {
1420
+ background-image: linear-gradient(
1421
+ 135deg,
1422
+ rgba(255, 255, 255, 0.25) 0%,
1423
+ rgba(255, 255, 255, 0.25) 25%,
1424
+ transparent 25%,
1425
+ transparent 50%,
1426
+ rgba(255, 255, 255, 0.25) 50%,
1427
+ rgba(255, 255, 255, 0.25) 75%,
1428
+ transparent 75%,
1429
+ transparent 100%
1430
+ );
1431
+ }
1432
+
1433
+ @-webkit-keyframes M0LU-Rdq-MA- {
1434
+ 0% {
1435
+ background-position: 0 0;
1436
+ }
1437
+
1438
+ 100% {
1439
+ background-position: 32px 32px;
1440
+ background-position: var(--space-larger) var(--space-larger);
1441
+ }
1783
1442
  }
1784
1443
 
1785
- .AL-2brNI7dk-::before {
1786
- content: "";
1787
- display: block;
1788
- position: absolute;
1789
- top: calc(-1.25 * 16px);
1790
- top: calc(-1.25 * var(--space-base));
1791
- right: 0;
1792
- left: 0;
1793
- z-index: 1;
1794
- z-index: var(--elevation-base);
1795
- height: 16px;
1796
- height: var(--space-base);
1797
- background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1) 60%);
1798
- background: linear-gradient(to bottom, transparent, var(--color-surface) 60%);
1444
+ @keyframes M0LU-Rdq-MA- {
1445
+ 0% {
1446
+ background-position: 0 0;
1447
+ }
1448
+
1449
+ 100% {
1450
+ background-position: 32px 32px;
1451
+ background-position: var(--space-larger) var(--space-larger);
1452
+ }
1799
1453
  }
1800
1454
 
1801
1455
  .YmRTd-KeXv4- {
@@ -4122,487 +3776,832 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
4122
3776
  .-lyJkOGbceo-::after {
4123
3777
  content: "";
4124
3778
  position: absolute;
4125
- top: 0;
3779
+ top: 0;
3780
+ left: 0;
3781
+ width: 100%;
3782
+ height: 100%;
3783
+ }
3784
+
3785
+ .-lyJkOGbceo-::before {
3786
+ background-color: var(--glimmer-background);
3787
+ opacity: var(--glimmer-background-opacity);
3788
+ }
3789
+
3790
+ .-lyJkOGbceo-::after {
3791
+ background-image: linear-gradient(
3792
+ 90deg,
3793
+ transparent 0px,
3794
+ var(--glimmer-shine) 32px,
3795
+ transparent 64px
3796
+ );
3797
+ background-image: linear-gradient(
3798
+ 90deg,
3799
+ transparent 0px,
3800
+ var(--glimmer-shine) var(--space-larger),
3801
+ transparent var(--space-extravagant)
3802
+ );
3803
+ background-repeat: no-repeat;
3804
+ background-size: 64px 100%;
3805
+ background-size: var(--space-extravagant) 100%;
3806
+ -webkit-animation: -lyJkOGbceo- 2s infinite linear;
3807
+ animation: -lyJkOGbceo- 2s infinite linear;
3808
+ }
3809
+
3810
+ [data-theme="dark"] .-lyJkOGbceo-,
3811
+ .NH-8hViLjFA- {
3812
+ --glimmer-shine-opacity: 20%;
3813
+ }
3814
+
3815
+ .NH-8hViLjFA- {
3816
+ --glimmer-background: var(--color-surface);
3817
+ }
3818
+
3819
+ [data-theme="dark"] .NH-8hViLjFA- {
3820
+ --glimmer-shine-opacity: 75%;
3821
+ --glimmer-background-opacity: 7.5%;
3822
+ }
3823
+
3824
+ @-webkit-keyframes -lyJkOGbceo- {
3825
+ 0%,
3826
+ 20% {
3827
+ background-position-x: calc(64px * -1);
3828
+ background-position-x: calc(var(--space-extravagant) * -1);
3829
+ }
3830
+
3831
+ 100% {
3832
+ background-position-x: calc(100% + 64px);
3833
+ background-position-x: calc(100% + var(--space-extravagant));
3834
+ }
3835
+ }
3836
+
3837
+ @keyframes -lyJkOGbceo- {
3838
+ 0%,
3839
+ 20% {
3840
+ background-position-x: calc(64px * -1);
3841
+ background-position-x: calc(var(--space-extravagant) * -1);
3842
+ }
3843
+
3844
+ 100% {
3845
+ background-position-x: calc(100% + 64px);
3846
+ background-position-x: calc(100% + var(--space-extravagant));
3847
+ }
3848
+ }
3849
+
3850
+ ._6-ozsHDHcVI- {
3851
+ width: 30%;
3852
+ max-width: 180px;
3853
+ min-width: 120px;
3854
+ }
3855
+
3856
+ ._7AvaYGpXkLU- {
3857
+ display: inline-block;
3858
+ width: 100px;
3859
+ height: 36px;
3860
+ }
3861
+
3862
+ .sm9yBV3e4Qg- {
3863
+ display: block;
3864
+ width: 100%;
3865
+ min-width: 100px;
3866
+ }
3867
+
3868
+ .bjemHBSLuQ0- {
3869
+ height: 8px;
3870
+ height: var(--space-small);
3871
+ }
3872
+
3873
+ .MXFqgzJq5jw- {
3874
+ height: 16px;
3875
+ height: var(--space-base);
3876
+ }
3877
+
3878
+ .B2DzIy8pibk- {
3879
+ height: 24px;
3880
+ height: var(--space-large);
3881
+ }
3882
+
3883
+ .-ll1bKXJm9s- {
3884
+ height: 32px;
3885
+ height: var(--space-larger);
3886
+ }
3887
+
3888
+ .jieKjQ6-Scs- {
3889
+ height: 48px;
3890
+ height: var(--space-largest);
3891
+ }
3892
+
3893
+ ._8qp0RoxJfHE- {
3894
+ height: 100%;
3895
+ min-width: 16px;
3896
+ min-width: var(--space-base);
3897
+ min-height: 16px;
3898
+ min-height: var(--space-base);
3899
+ }
3900
+
3901
+ .vAVS-6e-jJo- {
3902
+ width: 100%;
3903
+ }
3904
+
3905
+ .tZgae6SZ8WA- {
3906
+ width: 85%;
3907
+ }
3908
+
3909
+ .ec-sGgENoOw- {
3910
+ width: 70%;
3911
+ }
3912
+
3913
+ .ONvR3LocsA4-,
3914
+ .j-gTsb6UsQs- {
3915
+ width: auto;
3916
+ aspect-ratio: 1;
3917
+ }
3918
+
3919
+ .j-gTsb6UsQs- {
3920
+ border-radius: 100%;
3921
+ border-radius: var(--radius-circle);
3922
+ }
3923
+
3924
+ ._6dlpcG-oxT4- {
3925
+ -webkit-animation-duration: var(--duration-base);
3926
+ animation-duration: var(--duration-base);
3927
+ }
3928
+
3929
+ .NlRB1Xq-sFE- {
3930
+ -webkit-animation-duration: calc(var(--duration-fast));
3931
+ animation-duration: calc(var(--duration-fast));
3932
+ }
3933
+
3934
+ .B1cBkstNQhM- > :not(:last-child) {
3935
+ margin-bottom: 1px;
3936
+ margin-bottom: var(--space-minuscule);
3937
+ }
3938
+
3939
+ .rjAxJwaso0s- > :not(:last-child) {
3940
+ margin-bottom: 2px;
3941
+ margin-bottom: var(--space-smallest);
3942
+ }
3943
+
3944
+ .Chezd5Sqtmk- > :not(:last-child) {
3945
+ margin-bottom: 4px;
3946
+ margin-bottom: var(--space-smaller);
3947
+ }
3948
+
3949
+ .hzVGRy-KUeY- > :not(:last-child) {
3950
+ margin-bottom: 8px;
3951
+ margin-bottom: var(--space-small);
3952
+ }
3953
+
3954
+ .XFi-EWH3Rc0- > :not(:last-child) {
3955
+ margin-bottom: 16px;
3956
+ margin-bottom: var(--space-base);
3957
+ }
3958
+
3959
+ .JTt98vS-CLk- > :not(:last-child) {
3960
+ margin-bottom: 24px;
3961
+ margin-bottom: var(--space-large);
3962
+ }
3963
+
3964
+ .-h5Dm7qvnss- > :not(:last-child) {
3965
+ margin-bottom: 32px;
3966
+ margin-bottom: var(--space-larger);
3967
+ }
3968
+
3969
+ .K7DP0lB9veI- > :not(:last-child) {
3970
+ margin-bottom: 48px;
3971
+ margin-bottom: var(--space-largest);
3972
+ }
3973
+
3974
+ .d8bHHzbOHk4- > :not(:last-child) {
3975
+ margin-bottom: 64px;
3976
+ margin-bottom: var(--space-extravagant);
3977
+ }
3978
+
3979
+ .cftWh-00zXM- {
3980
+ padding: 0;
3981
+ padding: var(--public-content--padding, 0);
3982
+ }
3983
+
3984
+ .wFxd-3vJyKo- {
3985
+ position: relative;
3986
+ padding: 8px 0;
3987
+ padding: var(--space-small) 0;
3988
+ }
3989
+
3990
+ .PzwV5qiIgV4- {
3991
+ display: -ms-flexbox;
3992
+ display: flex;
3993
+
3994
+ max-height: calc(8px * 33.33);
3995
+
3996
+ max-height: calc(var(--space-small) * 33.33);
3997
+ margin: 0;
3998
+ padding: 0;
3999
+ overflow: auto;
4000
+ list-style: none;
4001
+ -ms-flex-direction: column;
4002
+ flex-direction: column;
4003
+ gap: 4px;
4004
+ gap: var(--space-smaller);
4005
+ }
4006
+
4007
+ .c6TosVipkmw-,
4008
+ .ZYrg-J4-v2Y- {
4009
+ padding: 8px 16px;
4010
+ padding: var(--space-small) var(--space-base);
4011
+ }
4012
+
4013
+ .wFxd-3vJyKo-::before,
4014
+ .wFxd-3vJyKo-::after {
4015
+ content: "";
4016
+ display: block;
4017
+ position: absolute;
4018
+ right: 0;
4126
4019
  left: 0;
4127
- width: 100%;
4128
- height: 100%;
4020
+ height: 16px;
4021
+ height: var(--space-base);
4022
+ pointer-events: none;
4023
+ transition: opacity 0.3s ease-in-out;
4129
4024
  }
4130
4025
 
4131
- .-lyJkOGbceo-::before {
4132
- background-color: var(--glimmer-background);
4133
- opacity: var(--glimmer-background-opacity);
4026
+ .wFxd-3vJyKo-::after {
4027
+ bottom: 8px;
4028
+ bottom: var(--space-small);
4029
+ background: linear-gradient(
4030
+ 180deg,
4031
+ transparent 0%,
4032
+ rgba(255, 255, 255, 1) 100%
4033
+ );
4034
+ background: linear-gradient(
4035
+ 180deg,
4036
+ transparent 0%,
4037
+ var(--color-surface) 100%
4038
+ );
4134
4039
  }
4135
4040
 
4136
- .-lyJkOGbceo-::after {
4137
- background-image: linear-gradient(
4138
- 90deg,
4139
- transparent 0px,
4140
- var(--glimmer-shine) 32px,
4141
- transparent 64px
4041
+ .wFxd-3vJyKo-::before {
4042
+ top: 8px;
4043
+ top: var(--space-small);
4044
+ background: linear-gradient(
4045
+ 180deg,
4046
+ rgba(255, 255, 255, 1) 0%,
4047
+ transparent 100%
4142
4048
  );
4143
- background-image: linear-gradient(
4144
- 90deg,
4145
- transparent 0px,
4146
- var(--glimmer-shine) var(--space-larger),
4147
- transparent var(--space-extravagant)
4049
+ background: linear-gradient(
4050
+ 180deg,
4051
+ var(--color-surface) 0%,
4052
+ transparent 100%
4148
4053
  );
4149
- background-repeat: no-repeat;
4150
- background-size: 64px 100%;
4151
- background-size: var(--space-extravagant) 100%;
4152
- -webkit-animation: -lyJkOGbceo- 2s infinite linear;
4153
- animation: -lyJkOGbceo- 2s infinite linear;
4154
4054
  }
4155
4055
 
4156
- [data-theme="dark"] .-lyJkOGbceo-,
4157
- .NH-8hViLjFA- {
4158
- --glimmer-shine-opacity: 20%;
4056
+ .FLu6FtihsLo-::before,
4057
+ .-o-v1zjzb48-::before {
4058
+ opacity: 0;
4159
4059
  }
4160
4060
 
4161
- .NH-8hViLjFA- {
4162
- --glimmer-background: var(--color-surface);
4061
+ ._2iW5DZ16G2U-::after,
4062
+ .-o-v1zjzb48-::after {
4063
+ opacity: 0;
4163
4064
  }
4164
4065
 
4165
- [data-theme="dark"] .NH-8hViLjFA- {
4166
- --glimmer-shine-opacity: 75%;
4167
- --glimmer-background-opacity: 7.5%;
4066
+ .PqwPrWjdB-A- {
4067
+ padding: 16px 16px;
4068
+ padding: var(--space-base) var(--space-base);
4168
4069
  }
4169
4070
 
4170
- @-webkit-keyframes -lyJkOGbceo- {
4171
- 0%,
4172
- 20% {
4173
- background-position-x: calc(64px * -1);
4174
- background-position-x: calc(var(--space-extravagant) * -1);
4175
- }
4071
+ .PqwPrWjdB-A-.v3cabuEY4Xk- {
4072
+ display: -ms-flexbox;
4073
+ display: flex;
4074
+ -ms-flex-pack: center;
4075
+ justify-content: center;
4076
+ position: sticky;
4077
+ bottom: 0;
4078
+ padding: 16px 0;
4079
+ padding: var(--space-base) 0;
4080
+ }
4176
4081
 
4177
- 100% {
4178
- background-position-x: calc(100% + 64px);
4179
- background-position-x: calc(100% + var(--space-extravagant));
4180
- }
4082
+ .PqwPrWjdB-A-.v3cabuEY4Xk-:empty {
4083
+ display: none;
4181
4084
  }
4182
4085
 
4183
- @keyframes -lyJkOGbceo- {
4184
- 0%,
4185
- 20% {
4186
- background-position-x: calc(64px * -1);
4187
- background-position-x: calc(var(--space-extravagant) * -1);
4188
- }
4086
+ .pEdV7Oo29SE- {
4087
+ display: grid;
4088
+ /* If this gets wrapped in a flex container, it should take the remaining space */
4089
+ -ms-flex: 1;
4090
+ flex: 1;
4091
+ }
4189
4092
 
4190
- 100% {
4191
- background-position-x: calc(100% + 64px);
4192
- background-position-x: calc(100% + var(--space-extravagant));
4193
- }
4093
+ .ftl4BEGpmyA- {
4094
+ gap: 2px;
4095
+ gap: var(--space-smallest);
4194
4096
  }
4195
4097
 
4196
- ._6-ozsHDHcVI- {
4197
- width: 30%;
4198
- max-width: 180px;
4199
- min-width: 120px;
4098
+ .ikaEWOhu3ZI- {
4099
+ gap: 4px;
4100
+ gap: var(--space-smaller);
4200
4101
  }
4201
4102
 
4202
- ._7AvaYGpXkLU- {
4203
- display: inline-block;
4204
- width: 100px;
4205
- height: 36px;
4103
+ .V9xi4msiJlM- {
4104
+ gap: 8px;
4105
+ gap: var(--space-small);
4206
4106
  }
4207
4107
 
4208
- .sm9yBV3e4Qg- {
4209
- display: block;
4210
- width: 100%;
4211
- min-width: 100px;
4108
+ .Jzbdj1Ja38E- {
4109
+ gap: 16px;
4110
+ gap: var(--space-base);
4212
4111
  }
4213
4112
 
4214
- .bjemHBSLuQ0- {
4215
- height: 8px;
4216
- height: var(--space-small);
4113
+ .cLrQOLCo-z8- {
4114
+ gap: 24px;
4115
+ gap: var(--space-large);
4217
4116
  }
4218
4117
 
4219
- .MXFqgzJq5jw- {
4220
- height: 16px;
4221
- height: var(--space-base);
4118
+ .VZokN5bjMl0- {
4119
+ gap: 0;
4222
4120
  }
4223
4121
 
4224
- .B2DzIy8pibk- {
4225
- height: 24px;
4226
- height: var(--space-large);
4122
+ ._9CW5WRJdMFo- {
4123
+ -ms-flex-align: start;
4124
+ align-items: start;
4227
4125
  }
4228
4126
 
4229
- .-ll1bKXJm9s- {
4230
- height: 32px;
4231
- height: var(--space-larger);
4127
+ .zVzX2gVWEGw- {
4128
+ -ms-flex-align: center;
4129
+ align-items: center;
4232
4130
  }
4233
4131
 
4234
- .jieKjQ6-Scs- {
4235
- height: 48px;
4236
- height: var(--space-largest);
4132
+ .cnhrFSJxBCo- {
4133
+ -ms-flex-align: end;
4134
+ align-items: end;
4237
4135
  }
4238
4136
 
4239
- ._8qp0RoxJfHE- {
4240
- height: 100%;
4241
- min-width: 16px;
4242
- min-width: var(--space-base);
4243
- min-height: 16px;
4244
- min-height: var(--space-base);
4137
+ .HowvTX8-pw4- {
4138
+ display: -ms-flexbox;
4139
+ display: flex;
4140
+ -ms-flex-negative: 0;
4141
+ flex-shrink: 0;
4142
+ min-height: calc((48px - 4px));
4143
+ min-height: calc((var(--space-largest) - var(--space-smaller)));
4144
+ box-sizing: border-box;
4145
+ margin: 0 8px;
4146
+ margin: 0 var(--space-small);
4147
+ padding: 8px;
4148
+ padding: var(--space-small);
4149
+ border-radius: 8px;
4150
+ border-radius: var(--radius-base);
4151
+ color: hsl(197, 90%, 12%);
4152
+ color: var(--color-heading);
4153
+ font-weight: 500;
4154
+ cursor: pointer;
4155
+ transition: all 200ms;
4156
+ transition: all var(--timing-base);
4157
+ -ms-flex-pack: justify;
4158
+ justify-content: space-between;
4159
+ -ms-flex-align: center;
4160
+ align-items: center;
4245
4161
  }
4246
4162
 
4247
- .vAVS-6e-jJo- {
4248
- width: 100%;
4163
+ .HowvTX8-pw4-:hover,
4164
+ .HowvTX8-pw4-:focus-visible {
4165
+ background-color: hsl(53, 21%, 93%);
4166
+ background-color: var(--color-surface--hover);
4249
4167
  }
4250
4168
 
4251
- .tZgae6SZ8WA- {
4252
- width: 85%;
4169
+ .HowvTX8-pw4-:focus,
4170
+ .HowvTX8-pw4-:focus-visible {
4171
+ outline: none;
4253
4172
  }
4254
4173
 
4255
- .ec-sGgENoOw- {
4256
- width: 70%;
4174
+ .HowvTX8-pw4-:focus-visible {
4175
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4176
+ box-shadow: var(--shadow-focus);
4257
4177
  }
4258
4178
 
4259
- .ONvR3LocsA4-,
4260
- .j-gTsb6UsQs- {
4261
- width: auto;
4262
- aspect-ratio: 1;
4179
+ .jPB--ZCYNNI- {
4180
+ -webkit-transform: translateY(calc(48px * -1));
4181
+ -webkit-transform: translateY(calc(var(--space-largest) * -1));
4182
+ transform: translateY(calc(48px * -1));
4183
+ transform: translateY(calc(var(--space-largest) * -1));
4263
4184
  }
4264
4185
 
4265
- .j-gTsb6UsQs- {
4266
- border-radius: 100%;
4267
- border-radius: var(--radius-circle);
4186
+ .nrNh3feibg8- {
4187
+ display: -ms-flexbox;
4188
+ display: flex;
4189
+ padding: 16px 8px 0 16px;
4190
+ padding: var(--space-base) var(--space-small) 0 var(--space-base);
4191
+ -ms-flex-pack: justify;
4192
+ justify-content: space-between;
4193
+ -ms-flex-align: baseline;
4194
+ align-items: baseline;
4195
+ gap: 4px;
4196
+ gap: var(--space-smaller);
4197
+ }
4198
+
4199
+ .NWf8JR3TBoo- {
4200
+ width: 100%;
4201
+ box-sizing: border-box;
4202
+ padding: 0 8px;
4203
+ padding: 0 var(--space-small);
4204
+ background-color: rgba(255, 255, 255, 1);
4205
+ background-color: var(--color-surface);
4206
+ }
4207
+
4208
+ .PoMXFVYVY5A- {
4209
+ position: relative;
4210
+ width: 100%;
4211
+ min-height: calc((48px - 8px));
4212
+ min-height: calc((var(--space-largest) - var(--space-small)));
4213
+ padding: 8px 0;
4214
+ padding: var(--space-small) 0;
4215
+ border: none;
4216
+ border-radius: 8px;
4217
+ border-radius: var(--radius-base);
4218
+ text-align: left;
4219
+ background-color: rgba(255, 255, 255, 1);
4220
+ background-color: var(--color-surface);
4221
+ cursor: pointer;
4222
+ transition: all 200ms;
4223
+ transition: all var(--timing-base);
4268
4224
  }
4269
4225
 
4270
- ._6dlpcG-oxT4- {
4271
- -webkit-animation-duration: var(--duration-base);
4272
- animation-duration: var(--duration-base);
4226
+ .PoMXFVYVY5A-:focus {
4227
+ outline: none;
4273
4228
  }
4274
4229
 
4275
- .NlRB1Xq-sFE- {
4276
- -webkit-animation-duration: calc(var(--duration-fast));
4277
- animation-duration: calc(var(--duration-fast));
4230
+ .PoMXFVYVY5A-:hover,
4231
+ .PoMXFVYVY5A-:focus-visible {
4232
+ outline: none;
4233
+ background-color: hsl(53, 21%, 93%);
4234
+ background-color: var(--color-surface--hover);
4278
4235
  }
4279
4236
 
4280
- .B1cBkstNQhM- > :not(:last-child) {
4281
- margin-bottom: 1px;
4282
- margin-bottom: var(--space-minuscule);
4237
+ .PoMXFVYVY5A-:focus-visible {
4238
+ box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4239
+ box-shadow: var(--shadow-focus);
4283
4240
  }
4284
4241
 
4285
- .rjAxJwaso0s- > :not(:last-child) {
4286
- margin-bottom: 2px;
4287
- margin-bottom: var(--space-smallest);
4242
+ .PoMXFVYVY5A- span {
4243
+ margin-left: 8px;
4244
+ margin-left: var(--space-small);
4288
4245
  }
4289
4246
 
4290
- .Chezd5Sqtmk- > :not(:last-child) {
4291
- margin-bottom: 4px;
4292
- margin-bottom: var(--space-smaller);
4247
+ .xxU2WqkpXZU- {
4248
+ position: fixed;
4249
+ top: 0;
4250
+ right: 0;
4251
+ bottom: 0;
4252
+ left: 0;
4253
+ z-index: 6;
4254
+ z-index: var(--elevation-menu);
4255
+ background-color: transparent;
4293
4256
  }
4294
4257
 
4295
- .hzVGRy-KUeY- > :not(:last-child) {
4296
- margin-bottom: 8px;
4297
- margin-bottom: var(--space-small);
4258
+ .W-9SMjhEMpI- {
4259
+ display: inline-block;
4298
4260
  }
4299
4261
 
4300
- .XFi-EWH3Rc0- > :not(:last-child) {
4301
- margin-bottom: 16px;
4302
- margin-bottom: var(--space-base);
4262
+ :root {
4263
+ --modal--width: 600px;
4264
+ --modal--padding-horizontal: var(--space-base);
4265
+ --modal--padding-vertical: var(--space-base);
4266
+ --modal--padding: var(--modal--padding-vertical)
4267
+ var(--modal--padding-horizontal);
4268
+
4269
+ --modal--shadow: var(--shadow-base);
4303
4270
  }
4304
4271
 
4305
- .JTt98vS-CLk- > :not(:last-child) {
4306
- margin-bottom: 24px;
4307
- margin-bottom: var(--space-large);
4272
+ @media (min-width: 768px) {
4273
+
4274
+ :root {
4275
+ --modal--padding-horizontal: var(--space-large);
4276
+ --modal--padding-vertical: var(--space-large);
4277
+ --modal--padding: var(--modal--padding-vertical)
4278
+ var(--modal--padding-horizontal);
4308
4279
  }
4280
+ }
4309
4281
 
4310
- .-h5Dm7qvnss- > :not(:last-child) {
4311
- margin-bottom: 32px;
4312
- margin-bottom: var(--space-larger);
4282
+ @media (--medium-screens-and-up) {
4283
+
4284
+ :root {
4285
+ --modal--padding-horizontal: var(--space-large);
4286
+ --modal--padding-vertical: var(--space-large);
4287
+ --modal--padding: var(--modal--padding-vertical)
4288
+ var(--modal--padding-horizontal);
4313
4289
  }
4290
+ }
4314
4291
 
4315
- .K7DP0lB9veI- > :not(:last-child) {
4316
- margin-bottom: 48px;
4317
- margin-bottom: var(--space-largest);
4292
+ .y3M-9xoEnk0- {
4293
+ display: -ms-flexbox;
4294
+ display: flex;
4295
+ -ms-flex-direction: column;
4296
+ flex-direction: column;
4297
+ z-index: 1001;
4298
+ z-index: var(--elevation-modal);
4299
+ padding: 8px;
4300
+ padding: var(--space-small);
4301
+ overflow: auto;
4318
4302
  }
4319
4303
 
4320
- .d8bHHzbOHk4- > :not(:last-child) {
4321
- margin-bottom: 64px;
4322
- margin-bottom: var(--space-extravagant);
4304
+ .y3M-9xoEnk0-,
4305
+ .zkyJp1mib-U- {
4306
+ position: fixed;
4307
+ top: 0;
4308
+ right: 0;
4309
+ bottom: 0;
4310
+ left: 0;
4323
4311
  }
4324
4312
 
4325
- .cftWh-00zXM- {
4326
- padding: 0;
4327
- padding: var(--public-content--padding, 0);
4313
+ .zkyJp1mib-U- {
4314
+ background-color: rgba(0, 0, 0, 0.32);
4315
+ background-color: var(--color-overlay);
4328
4316
  }
4329
4317
 
4330
- .wFxd-3vJyKo- {
4318
+ .gMPgiggaud8- {
4331
4319
  position: relative;
4332
- padding: 8px 0;
4333
- padding: var(--space-small) 0;
4320
+ width: 100%;
4321
+ max-width: 600px;
4322
+ max-width: var(--modal--width);
4323
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
4324
+ box-shadow: var(--modal--shadow);
4325
+ margin: auto;
4326
+ border: 1px solid hsl(200, 13%, 87%);
4327
+ border: var(--border-base) solid var(--color-border);
4328
+ border-radius: 8px;
4329
+ border-radius: var(--radius-base);
4330
+ background-color: rgba(255, 255, 255, 1);
4331
+ background-color: var(--color-surface);
4332
+ -ms-flex: 0 0 auto;
4333
+ flex: 0 0 auto;
4334
+ outline-color: hsl(198, 12%, 57%);
4335
+ outline-color: var(--color-focus);
4334
4336
  }
4335
4337
 
4336
- .PzwV5qiIgV4- {
4337
- display: -ms-flexbox;
4338
- display: flex;
4339
-
4340
- max-height: calc(8px * 33.33);
4338
+ /* Adjust `Content` and `Tab` components public padding to match the modal */
4341
4339
 
4342
- max-height: calc(var(--space-small) * 33.33);
4343
- margin: 0;
4344
- padding: 0;
4345
- overflow: auto;
4346
- list-style: none;
4347
- -ms-flex-direction: column;
4348
- flex-direction: column;
4349
- gap: 4px;
4350
- gap: var(--space-smaller);
4340
+ .gMPgiggaud8- > * {
4341
+ --public-content--padding: var(--modal--padding);
4342
+ --public-tab--inset: var(--modal--padding-horizontal);
4351
4343
  }
4352
4344
 
4353
- .c6TosVipkmw-,
4354
- .ZYrg-J4-v2Y- {
4355
- padding: 8px 16px;
4356
- padding: var(--space-small) var(--space-base);
4357
- }
4345
+ /* Remove the nested `Content` components public padding */
4358
4346
 
4359
- .wFxd-3vJyKo-::before,
4360
- .wFxd-3vJyKo-::after {
4361
- content: "";
4362
- display: block;
4363
- position: absolute;
4364
- right: 0;
4365
- left: 0;
4366
- height: 16px;
4367
- height: var(--space-base);
4368
- pointer-events: none;
4369
- transition: opacity 0.3s ease-in-out;
4347
+ .gMPgiggaud8- > * > * {
4348
+ --public-content--padding: 0;
4370
4349
  }
4371
4350
 
4372
- .wFxd-3vJyKo-::after {
4373
- bottom: 8px;
4374
- bottom: var(--space-small);
4375
- background: linear-gradient(
4376
- 180deg,
4377
- transparent 0%,
4378
- rgba(255, 255, 255, 1) 100%
4379
- );
4380
- background: linear-gradient(
4381
- 180deg,
4382
- transparent 0%,
4383
- var(--color-surface) 100%
4384
- );
4351
+ ._5sBzUnyOqD0- {
4352
+ display: -ms-flexbox;
4353
+ display: flex;
4354
+ -ms-flex-pack: justify;
4355
+ justify-content: space-between;
4356
+ padding: 16px
4357
+ 16px;
4358
+ padding: var(--modal--padding);
4359
+ background-color: transparent;
4385
4360
  }
4386
4361
 
4387
- .wFxd-3vJyKo-::before {
4388
- top: 8px;
4389
- top: var(--space-small);
4390
- background: linear-gradient(
4391
- 180deg,
4392
- rgba(255, 255, 255, 1) 0%,
4393
- transparent 100%
4394
- );
4395
- background: linear-gradient(
4396
- 180deg,
4397
- var(--color-surface) 0%,
4398
- transparent 100%
4399
- );
4362
+ /**
4363
+ * Ensure there's no extra padding top on the next element. This mostly negates
4364
+ * the <Content /> padding
4365
+ */
4366
+
4367
+ ._5sBzUnyOqD0- + * {
4368
+ padding-top: 0 !important;
4400
4369
  }
4401
4370
 
4402
- .FLu6FtihsLo-::before,
4403
- .-o-v1zjzb48-::before {
4404
- opacity: 0;
4371
+ ._4gw63G7IYG0- {
4372
+ margin-top: -6px;
4373
+ margin-right: -6px;
4405
4374
  }
4406
4375
 
4407
- ._2iW5DZ16G2U-::after,
4408
- .-o-v1zjzb48-::after {
4409
- opacity: 0;
4376
+ .cwVJrrJkNDg- {
4377
+ display: -ms-flexbox;
4378
+ display: flex;
4379
+ padding: 16px
4380
+ 16px;
4381
+ padding: var(--modal--padding);
4382
+ padding-top: 0;
4383
+ -ms-flex: 1 1 100%;
4384
+ flex: 1 1 100%;
4385
+ -ms-flex-pack: end;
4386
+ justify-content: flex-end;
4410
4387
  }
4411
4388
 
4412
- .PqwPrWjdB-A- {
4413
- padding: 16px 16px;
4414
- padding: var(--space-base) var(--space-base);
4389
+ /**
4390
+ * 1. Use CSS `order` to adjust the buttons position on the UI
4391
+ */
4392
+
4393
+ .MkD4pNUKeAA- {
4394
+ -ms-flex: 1 1 auto;
4395
+ flex: 1 1 auto;
4396
+ -ms-flex-order: 1;
4397
+ order: 1; /* 1 */
4415
4398
  }
4416
4399
 
4417
- .PqwPrWjdB-A-.v3cabuEY4Xk- {
4400
+ .C-yC8JKpQLg- {
4418
4401
  display: -ms-flexbox;
4419
4402
  display: flex;
4420
- -ms-flex-pack: center;
4421
- justify-content: center;
4422
- position: sticky;
4423
- bottom: 0;
4424
- padding: 16px 0;
4425
- padding: var(--space-base) 0;
4403
+ -ms-flex: 0 0 auto;
4404
+ flex: 0 0 auto;
4405
+ -ms-flex-order: 2;
4406
+ order: 2; /* 1 */
4426
4407
  }
4427
4408
 
4428
- .PqwPrWjdB-A-.v3cabuEY4Xk-:empty {
4429
- display: none;
4409
+ /* This is in a correct position and order */
4410
+
4411
+ /* stylelint-disable-next-line no-descending-specificity */
4412
+
4413
+ .C-yC8JKpQLg- > * {
4414
+ margin-left: 8px !important;
4415
+ margin-left: var(--space-small) !important;
4430
4416
  }
4431
4417
 
4432
- .pEdV7Oo29SE- {
4433
- display: grid;
4434
- /* If this gets wrapped in a flex container, it should take the remaining space */
4435
- -ms-flex: 1;
4436
- flex: 1;
4418
+ .C-yC8JKpQLg- > *:first-child {
4419
+ -ms-flex-order: 2;
4420
+ order: 2; /* 1 */
4437
4421
  }
4438
4422
 
4439
- .ftl4BEGpmyA- {
4440
- gap: 2px;
4441
- gap: var(--space-smallest);
4423
+ .C-yC8JKpQLg- > *:nth-child(2) {
4424
+ -ms-flex-order: 1;
4425
+ order: 1; /* 1 */
4442
4426
  }
4443
4427
 
4444
- .ikaEWOhu3ZI- {
4445
- gap: 4px;
4446
- gap: var(--space-smaller);
4428
+ .BSZvIAUzFEU- {
4429
+ --modal--padding: var(--space-base);
4430
+ --public-tab--inset: var(--space-base);
4431
+ --modal--width: 400px;
4432
+ max-width: 400px;
4447
4433
  }
4448
4434
 
4449
- .V9xi4msiJlM- {
4450
- gap: 8px;
4451
- gap: var(--space-small);
4435
+ .-ydIALYVvGg- {
4436
+ --modal--width: 940px;
4437
+ max-width: 940px;
4452
4438
  }
4453
4439
 
4454
- .Jzbdj1Ja38E- {
4455
- gap: 16px;
4456
- gap: var(--space-base);
4457
- }
4440
+ :root {
4441
+ --modal--width: 600px;
4442
+ --modal--padding-horizontal: var(--space-base);
4443
+ --modal--padding-vertical: var(--space-base);
4444
+ --modal--padding: var(--modal--padding-vertical)
4445
+ var(--modal--padding-horizontal);
4458
4446
 
4459
- .cLrQOLCo-z8- {
4460
- gap: 24px;
4461
- gap: var(--space-large);
4447
+ --modal--shadow: var(--shadow-base);
4462
4448
  }
4463
4449
 
4464
- .VZokN5bjMl0- {
4465
- gap: 0;
4450
+ @media (min-width: 768px) {
4451
+
4452
+ :root {
4453
+ --modal--padding-horizontal: var(--space-large);
4454
+ --modal--padding-vertical: var(--space-large);
4455
+ --modal--padding: var(--modal--padding-vertical)
4456
+ var(--modal--padding-horizontal);
4466
4457
  }
4458
+ }
4467
4459
 
4468
- ._9CW5WRJdMFo- {
4469
- -ms-flex-align: start;
4470
- align-items: start;
4460
+ @media (--medium-screens-and-up) {
4461
+
4462
+ :root {
4463
+ --modal--padding-horizontal: var(--space-large);
4464
+ --modal--padding-vertical: var(--space-large);
4465
+ --modal--padding: var(--modal--padding-vertical)
4466
+ var(--modal--padding-horizontal);
4471
4467
  }
4468
+ }
4472
4469
 
4473
- .zVzX2gVWEGw- {
4470
+ .cRhQeXmZobs- {
4471
+ display: grid;
4472
+ z-index: 1001;
4473
+ z-index: var(--elevation-modal);
4474
4474
  -ms-flex-align: center;
4475
4475
  align-items: center;
4476
+ justify-items: center;
4477
+ place-items: center;
4476
4478
  }
4477
4479
 
4478
- .cnhrFSJxBCo- {
4479
- -ms-flex-align: end;
4480
- align-items: end;
4480
+ .PO6ZUDxQoFE- {
4481
+ position: fixed;
4482
+ top: 0;
4483
+ right: 0;
4484
+ bottom: 0;
4485
+ left: 0;
4486
+ z-index: 1001;
4487
+ z-index: var(--elevation-modal);
4488
+ background-color: rgba(0, 0, 0, 0.32);
4489
+ background-color: var(--color-overlay);
4490
+ opacity: 0.8;
4481
4491
  }
4482
4492
 
4483
- .HowvTX8-pw4- {
4484
- display: -ms-flexbox;
4485
- display: flex;
4486
- -ms-flex-negative: 0;
4487
- flex-shrink: 0;
4488
- min-height: calc((48px - 4px));
4489
- min-height: calc((var(--space-largest) - var(--space-smaller)));
4490
- box-sizing: border-box;
4491
- margin: 0 8px;
4492
- margin: 0 var(--space-small);
4493
+ .OiqCKNmbHZ0- {
4494
+ position: relative;
4495
+ z-index: 1001;
4496
+ z-index: var(--elevation-modal);
4497
+ width: 100%;
4498
+ max-width: 600px;
4499
+ max-width: var(--modal--width);
4500
+ box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
4501
+ box-shadow: var(--modal--shadow);
4502
+ margin: auto;
4493
4503
  padding: 8px;
4494
4504
  padding: var(--space-small);
4505
+ border: 1px solid hsl(200, 13%, 87%);
4506
+ border: var(--border-base) solid var(--color-border);
4495
4507
  border-radius: 8px;
4496
4508
  border-radius: var(--radius-base);
4497
- color: hsl(197, 90%, 12%);
4498
- color: var(--color-heading);
4499
- font-weight: 500;
4500
- cursor: pointer;
4501
- transition: all 200ms;
4502
- transition: all var(--timing-base);
4503
- -ms-flex-pack: justify;
4504
- justify-content: space-between;
4505
- -ms-flex-align: center;
4506
- align-items: center;
4509
+ background-color: rgba(255, 255, 255, 1);
4510
+ background-color: var(--color-surface);
4511
+ -ms-flex: 0 0 auto;
4512
+ flex: 0 0 auto;
4513
+ outline-color: hsl(198, 12%, 57%);
4514
+ outline-color: var(--color-focus);
4507
4515
  }
4508
4516
 
4509
- .HowvTX8-pw4-:hover,
4510
- .HowvTX8-pw4-:focus-visible {
4511
- background-color: hsl(53, 21%, 93%);
4512
- background-color: var(--color-surface--hover);
4513
- }
4517
+ /* Adjust `Content` and `Tab` components public padding to match the modal */
4514
4518
 
4515
- .HowvTX8-pw4-:focus,
4516
- .HowvTX8-pw4-:focus-visible {
4517
- outline: none;
4519
+ .OiqCKNmbHZ0- > * {
4520
+ --public-content--padding: var(--modal--padding);
4521
+ --public-tab--inset: var(--modal--padding-horizontal);
4518
4522
  }
4519
4523
 
4520
- .HowvTX8-pw4-:focus-visible {
4521
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4522
- box-shadow: var(--shadow-focus);
4523
- }
4524
+ /* Remove the nested `Content` components public padding */
4524
4525
 
4525
- .jPB--ZCYNNI- {
4526
- -webkit-transform: translateY(calc(48px * -1));
4527
- -webkit-transform: translateY(calc(var(--space-largest) * -1));
4528
- transform: translateY(calc(48px * -1));
4529
- transform: translateY(calc(var(--space-largest) * -1));
4526
+ .OiqCKNmbHZ0- > * > * {
4527
+ --public-content--padding: 0;
4530
4528
  }
4531
4529
 
4532
- .nrNh3feibg8- {
4530
+ .GDWGHwmjgAc- {
4533
4531
  display: -ms-flexbox;
4534
4532
  display: flex;
4535
- padding: 16px 8px 0 16px;
4536
- padding: var(--space-base) var(--space-small) 0 var(--space-base);
4537
4533
  -ms-flex-pack: justify;
4538
4534
  justify-content: space-between;
4539
- -ms-flex-align: baseline;
4540
- align-items: baseline;
4541
- gap: 4px;
4542
- gap: var(--space-smaller);
4535
+ padding: 16px
4536
+ 16px;
4537
+ padding: var(--modal--padding);
4538
+ background-color: transparent;
4543
4539
  }
4544
4540
 
4545
- .NWf8JR3TBoo- {
4546
- width: 100%;
4547
- box-sizing: border-box;
4548
- padding: 0 8px;
4549
- padding: 0 var(--space-small);
4550
- background-color: rgba(255, 255, 255, 1);
4551
- background-color: var(--color-surface);
4541
+ /**
4542
+ * Ensure there's no extra padding top on the next element. This mostly negates
4543
+ * the <Content /> padding
4544
+ */
4545
+
4546
+ .GDWGHwmjgAc- + * {
4547
+ padding-top: 0 !important;
4552
4548
  }
4553
4549
 
4554
- .PoMXFVYVY5A- {
4555
- position: relative;
4556
- width: 100%;
4557
- min-height: calc((48px - 8px));
4558
- min-height: calc((var(--space-largest) - var(--space-small)));
4559
- padding: 8px 0;
4560
- padding: var(--space-small) 0;
4561
- border: none;
4562
- border-radius: 8px;
4563
- border-radius: var(--radius-base);
4564
- text-align: left;
4565
- background-color: rgba(255, 255, 255, 1);
4566
- background-color: var(--color-surface);
4567
- cursor: pointer;
4568
- transition: all 200ms;
4569
- transition: all var(--timing-base);
4550
+ .KJlGo4z-E6Q- {
4551
+ margin-top: -6px;
4552
+ margin-right: -6px;
4570
4553
  }
4571
4554
 
4572
- .PoMXFVYVY5A-:focus {
4573
- outline: none;
4555
+ .ZGrhWCAymCw- {
4556
+ display: -ms-flexbox;
4557
+ display: flex;
4558
+ padding: 16px
4559
+ 16px;
4560
+ padding: var(--modal--padding);
4561
+ padding-top: 0;
4562
+ -ms-flex: 1 1 100%;
4563
+ flex: 1 1 100%;
4564
+ -ms-flex-pack: end;
4565
+ justify-content: flex-end;
4574
4566
  }
4575
4567
 
4576
- .PoMXFVYVY5A-:hover,
4577
- .PoMXFVYVY5A-:focus-visible {
4578
- outline: none;
4579
- background-color: hsl(53, 21%, 93%);
4580
- background-color: var(--color-surface--hover);
4568
+ /**
4569
+ * 1. Use CSS `order` to adjust the buttons position on the UI
4570
+ */
4571
+
4572
+ .hOiEWds2Vq8- {
4573
+ -ms-flex: 1 1 auto;
4574
+ flex: 1 1 auto;
4575
+ -ms-flex-order: 1;
4576
+ order: 1; /* 1 */
4581
4577
  }
4582
4578
 
4583
- .PoMXFVYVY5A-:focus-visible {
4584
- box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
4585
- box-shadow: var(--shadow-focus);
4579
+ .K31NzxPZP9s- {
4580
+ display: -ms-flexbox;
4581
+ display: flex;
4582
+ -ms-flex: 0 0 auto;
4583
+ flex: 0 0 auto;
4584
+ -ms-flex-order: 2;
4585
+ order: 2; /* 1 */
4586
4586
  }
4587
4587
 
4588
- .PoMXFVYVY5A- span {
4589
- margin-left: 8px;
4590
- margin-left: var(--space-small);
4588
+ /* This is in a correct position and order */
4589
+
4590
+ /* stylelint-disable-next-line no-descending-specificity */
4591
+
4592
+ .K31NzxPZP9s- > * {
4593
+ margin-left: 8px !important;
4594
+ margin-left: var(--space-small) !important;
4591
4595
  }
4592
4596
 
4593
- .xxU2WqkpXZU- {
4594
- position: fixed;
4595
- top: 0;
4596
- right: 0;
4597
- bottom: 0;
4598
- left: 0;
4599
- z-index: 6;
4600
- z-index: var(--elevation-menu);
4601
- background-color: transparent;
4597
+ .K31NzxPZP9s- > *:first-child {
4598
+ -ms-flex-order: 2;
4599
+ order: 2; /* 1 */
4602
4600
  }
4603
4601
 
4604
- .W-9SMjhEMpI- {
4605
- display: inline-block;
4602
+ .K31NzxPZP9s- > *:nth-child(2) {
4603
+ -ms-flex-order: 1;
4604
+ order: 1; /* 1 */
4606
4605
  }
4607
4606
 
4608
4607
  .rJamQZ6fRes- {