cetec-design-system 2.2.2-next.0 → 2.3.7

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 (36) hide show
  1. package/dist/{cetec-preset-CcvrY8wh.js → cetec-preset-CZJA5UR0.js} +1696 -1331
  2. package/dist/cetec-preset-CZJA5UR0.js.map +1 -0
  3. package/dist/index.js +12655 -9360
  4. package/dist/index.js.map +1 -1
  5. package/dist/panda.buildinfo.json +461 -365
  6. package/dist/playroom-static.css +68887 -180258
  7. package/dist/preset.js +1 -1
  8. package/dist/specs/recipes.json +126 -25
  9. package/dist/styles.css +1315 -642
  10. package/dist/types/index.d.ts +3001 -273
  11. package/dist/types/preset.d.ts +15 -0
  12. package/package.json +6 -1
  13. package/src/recipes/autocomplete.ts +266 -0
  14. package/src/recipes/calendar.ts +92 -0
  15. package/src/recipes/chip.ts +6 -0
  16. package/src/recipes/dateMenus.ts +40 -0
  17. package/src/recipes/dateTimeMenus.ts +43 -0
  18. package/src/recipes/menu.ts +13 -1
  19. package/src/recipes/modal.ts +1 -1
  20. package/src/recipes/recipes-slot.ts +7 -2
  21. package/src/recipes/segmentedFields.ts +192 -0
  22. package/src/recipes/segmentedInputs.ts +106 -0
  23. package/src/recipes/text.ts +32 -28
  24. package/src/recipes/timeMenus.ts +110 -0
  25. package/src/styles/primitives/zIndex.ts +1 -0
  26. package/src/styles/semantics/colors.ts +44 -0
  27. package/src/styles/semantics/zIndex.ts +2 -0
  28. package/src/styles/utilities/conditions.ts +1 -0
  29. package/src/styles/utilities/transitions.ts +2 -1
  30. package/src/utils/dsChain.ts +113 -0
  31. package/src/utils/dsComponent.ts +44 -0
  32. package/src/utils/dsPart.ts +41 -0
  33. package/src/utils/splitProps.ts +15 -0
  34. package/dist/cetec-preset-CcvrY8wh.js.map +0 -1
  35. package/src/recipes/datePicker.ts +0 -230
  36. package/src/recipes/timePicker.ts +0 -206
package/dist/styles.css CHANGED
@@ -4285,6 +4285,221 @@
4285
4285
  fill: var(--cetec-colors-icon-inverse);
4286
4286
  }
4287
4287
 
4288
+ .cetec-autocomplete__root {
4289
+ --control-py: var(--cetec-sizes-3);
4290
+ --control-px: var(--cetec-sizes-10);
4291
+ --control-fs: var(--cetec-sizes-16);
4292
+ --control-min-height: var(--cetec-sizes-32);
4293
+ --value-gap: var(--cetec-sizes-4);
4294
+ --input-min-width: var(--cetec-sizes-80);
4295
+ --loading-size: var(--cetec-sizes-20);
4296
+ margin: var(--cetec-spacing-0);
4297
+ padding: var(--cetec-spacing-0);
4298
+ box-sizing: border-box;
4299
+ font-family: var(--cetec-fonts-body);
4300
+ font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
4301
+ font-weight: var(--cetec-font-weights-normal);
4302
+ line-height: var(--cetec-line-heights-default);
4303
+ color: var(--cetec-colors-text-subtlest);
4304
+ position: relative;
4305
+ display: inline-flex;
4306
+ flex-direction: column;
4307
+ width: var(--cetec-sizes-full);
4308
+ min-width: var(--cetec-sizes-0);
4309
+ max-width: var(--cetec-sizes-full);
4310
+ }
4311
+
4312
+ .cetec-autocomplete__root:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
4313
+ opacity: 0.4;
4314
+ cursor: not-allowed;
4315
+ }
4316
+
4317
+ .group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) .cetec-autocomplete__root {
4318
+ opacity: 1;
4319
+ }
4320
+
4321
+ .cetec-autocomplete__control {
4322
+ background: var(--cetec-colors-surface);
4323
+ padding-block: var(--control-py);
4324
+ border-width: var(--cetec-border-widths-1);
4325
+ border-style: solid;
4326
+ border-color: var(--cetec-colors-border-input);
4327
+ border-radius: var(--cetec-radii-4);
4328
+ position: relative;
4329
+ display: flex;
4330
+ align-items: center;
4331
+ padding-inline-start: var(--control-px);
4332
+ padding-inline-end: var(--control-px);
4333
+ color: var(--cetec-colors-text);
4334
+ outline-width: var(--cetec-border-widths-1);
4335
+ outline-style: solid;
4336
+ outline-color: var(--cetec-colors-transparent);
4337
+ cursor: text;
4338
+ --transition-duration: var(--cetec-durations-fast);
4339
+ transition-duration: var(--cetec-durations-fast);
4340
+ --transition-prop: background, border-color, outline-color;
4341
+ transition-property: background, border-color, outline-color;
4342
+ --transition-easing: var(--cetec-easings-default);
4343
+ transition-timing-function: var(--cetec-easings-default);
4344
+ width: var(--cetec-sizes-full);
4345
+ min-width: var(--cetec-sizes-0);
4346
+ min-height: var(--control-min-height);
4347
+ }
4348
+
4349
+ .cetec-autocomplete__control:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
4350
+ background: var(--cetec-colors-bg-disabled);
4351
+ border-color: var(--cetec-colors-border-disabled);
4352
+ color: var(--cetec-colors-text-disabled);
4353
+ cursor: not-allowed;
4354
+ pointer-events: none;
4355
+ }
4356
+
4357
+ .cetec-autocomplete__control:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]):focus-within {
4358
+ border-color: var(--cetec-colors-border-disabled);
4359
+ outline-color: var(--cetec-colors-transparent);
4360
+ }
4361
+
4362
+ .cetec-autocomplete__control:is([open], [data-open=true], [data-state="open"], :popover-open) {
4363
+ border-color: var(--cetec-colors-border-focused);
4364
+ outline-color: var(--cetec-colors-border-focused);
4365
+ }
4366
+
4367
+ .cetec-autocomplete__control:is([data-error=true]) {
4368
+ border-color: var(--cetec-colors-border-danger);
4369
+ outline-color: var(--cetec-colors-border-danger);
4370
+ }
4371
+
4372
+ .cetec-autocomplete__control:is(:invalid, [data-invalid=true], [aria-invalid=true]) {
4373
+ border-color: var(--cetec-colors-border-danger);
4374
+ outline-color: var(--cetec-colors-border-danger);
4375
+ }
4376
+
4377
+ .cetec-autocomplete__control:is(:valid, [data-valid=true]) {
4378
+ border-color: var(--cetec-colors-border-success);
4379
+ outline-color: var(--cetec-colors-border-success);
4380
+ }
4381
+
4382
+ .cetec-autocomplete__control:focus-within {
4383
+ border-color: var(--cetec-colors-border-focused);
4384
+ outline-color: var(--cetec-colors-border-focused);
4385
+ }
4386
+
4387
+ .cetec-autocomplete__valueContainer {
4388
+ flex: 1 1 0%;
4389
+ gap: var(--value-gap);
4390
+ display: flex;
4391
+ align-items: center;
4392
+ align-content: center;
4393
+ flex-wrap: wrap;
4394
+ min-width: var(--cetec-sizes-0);
4395
+ }
4396
+
4397
+ .cetec-autocomplete__input {
4398
+ padding: var(--cetec-spacing-0);
4399
+ background: var(--cetec-colors-transparent);
4400
+ border: var(--cetec-borders-none);
4401
+ margin-block: calc(var(--cetec-spacing-3) * -1);
4402
+ outline: var(--cetec-borders-none);
4403
+ flex-grow: 1;
4404
+ flex-shrink: 0;
4405
+ flex-basis: var(--input-min-width);
4406
+ color: var(--cetec-colors-text);
4407
+ font-family: var(--cetec-fonts-body);
4408
+ font-size: var(--control-fs);
4409
+ line-height: var(--cetec-line-heights-default);
4410
+ min-width: var(--input-min-width);
4411
+ max-width: var(--cetec-sizes-full);
4412
+ }
4413
+
4414
+ .cetec-autocomplete__input::placeholder,.cetec-autocomplete__input[data-placeholder=true] {
4415
+ color: var(--cetec-colors-text-placeholder);
4416
+ }
4417
+
4418
+ .cetec-autocomplete__input:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
4419
+ color: var(--cetec-colors-text-disabled);
4420
+ cursor: not-allowed;
4421
+ }
4422
+
4423
+ .cetec-autocomplete__token {
4424
+ flex: 0 1 auto;
4425
+ min-width: var(--cetec-sizes-0);
4426
+ max-width: var(--cetec-sizes-full);
4427
+ }
4428
+
4429
+ .cetec-autocomplete__overflowIndicator {
4430
+ background: var(--cetec-colors-bg-neutral);
4431
+ padding-inline: var(--cetec-spacing-6);
4432
+ border-radius: var(--cetec-radii-999);
4433
+ display: inline-flex;
4434
+ align-items: center;
4435
+ flex-shrink: 0;
4436
+ color: var(--cetec-colors-text-subtle);
4437
+ font-size: var(--cetec-font-sizes-14);
4438
+ font-weight: var(--cetec-font-weights-medium);
4439
+ line-height: var(--cetec-line-heights-default);
4440
+ white-space: nowrap;
4441
+ min-height: var(--loading-size);
4442
+ }
4443
+
4444
+ .cetec-autocomplete__loadingIndicator {
4445
+ display: inline-flex;
4446
+ align-items: center;
4447
+ align-self: center;
4448
+ flex-shrink: 0;
4449
+ margin-inline-start: var(--control-py);
4450
+ width: var(--loading-size);
4451
+ height: var(--loading-size);
4452
+ }
4453
+
4454
+ .cetec-autocomplete__loadingIndicator :where(svg) {
4455
+ width: var(--loading-size);
4456
+ height: var(--loading-size);
4457
+ }
4458
+
4459
+ .cetec-autocomplete__listbox {
4460
+ margin: var(--cetec-spacing-0);
4461
+ padding: var(--cetec-spacing-0);
4462
+ background: var(--cetec-colors-surface);
4463
+ border-radius: var(--cetec-radii-4);
4464
+ outline: var(--cetec-borders-none);
4465
+ box-sizing: border-box;
4466
+ font-family: var(--cetec-fonts-body);
4467
+ font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
4468
+ font-weight: var(--cetec-font-weights-normal);
4469
+ color: var(--cetec-colors-text-subtlest);
4470
+ box-shadow: var(--cetec-shadows-overlay);
4471
+ z-index: var(--cetec-z-index-elevated);
4472
+ max-height: var(--cetec-sizes-192);
4473
+ overflow-y: auto;
4474
+ }
4475
+
4476
+ .cetec-autocomplete__listbox,.cetec-autocomplete__status {
4477
+ line-height: var(--cetec-line-heights-default);
4478
+ width: var(--cetec-sizes-full);
4479
+ }
4480
+
4481
+ .cetec-autocomplete__status {
4482
+ padding-inline: var(--cetec-spacing-12);
4483
+ padding-block: var(--cetec-spacing-8);
4484
+ display: flex;
4485
+ align-items: center;
4486
+ color: var(--cetec-colors-text-subtle);
4487
+ font-size: var(--cetec-font-sizes-14);
4488
+ min-height: var(--cetec-sizes-40);
4489
+ }
4490
+
4491
+ .cetec-autocomplete__liveRegion {
4492
+ position: absolute;
4493
+ width: 1px;
4494
+ height: 1px;
4495
+ padding: 0;
4496
+ margin: -1px;
4497
+ overflow: hidden;
4498
+ clip: rect(0, 0, 0, 0);
4499
+ white-space: nowrap;
4500
+ border-width: 0;
4501
+ }
4502
+
4288
4503
  .cetec-avatar__root {
4289
4504
  background: var(--cetec-colors-bg-neutral-solid);
4290
4505
  display: inline-flex;
@@ -4512,6 +4727,86 @@
4512
4727
  transition-timing-function: var(--cetec-easings-default);
4513
4728
  }
4514
4729
 
4730
+ .cetec-calendar__root {
4731
+ margin: var(--cetec-spacing-0);
4732
+ padding: var(--cetec-spacing-0);
4733
+ background: var(--cetec-colors-surface);
4734
+ box-sizing: border-box;
4735
+ font-family: var(--cetec-fonts-body);
4736
+ font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
4737
+ font-weight: var(--cetec-font-weights-normal);
4738
+ line-height: var(--cetec-line-heights-default);
4739
+ color: var(--cetec-colors-text-subtlest);
4740
+ display: flex;
4741
+ flex-direction: column;
4742
+ align-items: flex-start;
4743
+ width: 278px;
4744
+ }
4745
+
4746
+ .cetec-calendar__header {
4747
+ border-bottom: var(--cetec-borders-default);
4748
+ display: flex;
4749
+ align-items: center;
4750
+ justify-content: space-between;
4751
+ font-family: var(--cetec-fonts-mono);
4752
+ font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
4753
+ width: var(--cetec-sizes-full);
4754
+ }
4755
+
4756
+ .cetec-calendar__header,.cetec-calendar__grid {
4757
+ padding: var(--cetec-spacing-8);
4758
+ gap: var(--cetec-spacing-4);
4759
+ }
4760
+
4761
+ .cetec-calendar__grid {
4762
+ margin-inline: var(--cetec-spacing-auto);
4763
+ display: grid;
4764
+ grid-template-columns: repeat(7, minmax(0, 1fr));
4765
+ width: var(--cetec-sizes-fit);
4766
+ }
4767
+
4768
+ .cetec-calendar__weekdayLabel {
4769
+ display: flex;
4770
+ -webkit-user-select: none;
4771
+ user-select: none;
4772
+ }
4773
+
4774
+ .cetec-calendar__weekdayLabel,.cetec-calendar__day {
4775
+ align-items: center;
4776
+ justify-content: center;
4777
+ }
4778
+
4779
+ .cetec-calendar__day {
4780
+ position: relative;
4781
+ font-family: var(--cetec-fonts-mono);
4782
+ width: var(--cetec-sizes-32);
4783
+ height: var(--cetec-sizes-32);
4784
+ min-width: var(--cetec-sizes-32);
4785
+ }
4786
+
4787
+ .cetec-calendar__day:is([data-today=true]) {
4788
+ outline: 1px solid var(--cetec-colors-border-focused);
4789
+ outline-offset: var(--cetec-spacing-1);
4790
+ }
4791
+
4792
+ .cetec-calendar__day[data-unavailable=true] {
4793
+ color: var(--cetec-colors-text-disabled);
4794
+ cursor: not-allowed;
4795
+ pointer-events: none;
4796
+ }
4797
+
4798
+ .cetec-calendar__day[data-unavailable=true]:is(:hover, [data-hover=true]) {
4799
+ background: var(--cetec-colors-transparent);
4800
+ }
4801
+
4802
+ .cetec-calendar__monthYearGrid {
4803
+ padding: var(--cetec-spacing-8);
4804
+ gap: var(--cetec-spacing-4);
4805
+ display: grid;
4806
+ grid-template-columns: repeat(3, minmax(0, 1fr));
4807
+ width: var(--cetec-sizes-full);
4808
+ }
4809
+
4515
4810
  .cetec-checkbox__container {
4516
4811
  place-content: center;
4517
4812
  position: relative;
@@ -4815,6 +5110,8 @@
4815
5110
 
4816
5111
  .cetec-chip__dismissButton :where(svg) {
4817
5112
  fill: var(--cetec-colors-icon-decorative);
5113
+ width: var(--slot-size);
5114
+ height: var(--slot-size);
4818
5115
  }
4819
5116
 
4820
5117
  .cetec-chip__dismissButton:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
@@ -4867,190 +5164,51 @@
4867
5164
  align-items: center;
4868
5165
  }
4869
5166
 
4870
- .cetec-datePicker__root {
4871
- display: inline-flex;
4872
- flex-direction: column;
4873
- position: relative;
4874
- }
4875
-
4876
- .cetec-datePicker__input {
4877
- background: var(--cetec-colors-bg-input);
4878
- gap: var(--cetec-spacing-0);
4879
- border-width: var(--cetec-border-widths-1);
4880
- border-style: solid;
4881
- border-color: var(--cetec-colors-border-input);
4882
- border-radius: var(--cetec-radii-4);
4883
- display: inline-flex;
4884
- align-items: center;
4885
- outline-width: var(--cetec-border-widths-2);
4886
- outline-offset: calc(var(--cetec-spacing-1) * -1);
4887
- outline-style: solid;
4888
- outline-color: var(--cetec-colors-transparent);
4889
- color: var(--cetec-colors-text);
4890
- font-family: var(--cetec-fonts-mono);
4891
- line-height: var(--cetec-line-heights-default);
4892
- cursor: text;
4893
- -webkit-user-select: none;
4894
- user-select: none;
4895
- --transition-duration: var(--cetec-durations-fast);
4896
- transition-duration: var(--cetec-durations-fast);
4897
- --transition-prop: background, border-color, outline-color;
4898
- transition-property: background, border-color, outline-color;
4899
- --transition-easing: var(--cetec-easings-default);
4900
- transition-timing-function: var(--cetec-easings-default);
4901
- width: var(--cetec-sizes-full);
5167
+ .cetec-dateMenus__calendars {
5168
+ display: flex;
5169
+ align-items: stretch;
4902
5170
  }
4903
5171
 
4904
- .cetec-datePicker__input:is([open], [data-open=true], [data-state="open"], :popover-open) {
4905
- background: var(--cetec-colors-bg-input-pressed);
4906
- border-color: var(--cetec-colors-border-focused);
4907
- outline-color: var(--cetec-colors-border-focused);
5172
+ .cetec-dateMenus__calendarsDivider {
5173
+ background: var(--cetec-colors-border);
5174
+ align-self: stretch;
5175
+ width: var(--cetec-sizes-1);
4908
5176
  }
4909
5177
 
4910
- .cetec-datePicker__input:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
4911
- background: var(--cetec-colors-bg-disabled);
4912
- border-color: var(--cetec-colors-border-disabled);
4913
- color: var(--cetec-colors-text-disabled);
4914
- cursor: not-allowed;
4915
- pointer-events: none;
4916
- }
4917
-
4918
- .cetec-datePicker__input:is([data-error=true]) {
4919
- border-color: var(--cetec-colors-border-danger);
4920
- }
4921
-
4922
- .cetec-datePicker__input:is([data-error=true]):is(:hover, [data-hover=true]) {
4923
- border-color: var(--cetec-colors-border-danger);
4924
- }
4925
-
4926
- .cetec-datePicker__input:is([data-error=true]):focus-within {
4927
- border-color: var(--cetec-colors-border-danger);
4928
- outline-color: var(--cetec-colors-border-danger);
4929
- }
4930
-
4931
- .cetec-datePicker__input:is([data-error=true]):is([open], [data-open=true], [data-state="open"], :popover-open) {
4932
- border-color: var(--cetec-colors-border-danger);
4933
- outline-color: var(--cetec-colors-border-danger);
4934
- }
4935
-
4936
- .cetec-datePicker__input:focus-within {
4937
- background: var(--cetec-colors-bg-input-pressed);
4938
- border-color: var(--cetec-colors-border-focused);
4939
- outline-color: var(--cetec-colors-border-focused);
4940
- }
4941
-
4942
- .cetec-datePicker__segment {
4943
- outline: var(--cetec-borders-none);
4944
- border-radius: var(--cetec-radii-2);
4945
- display: inline-flex;
4946
- align-items: center;
4947
- justify-content: center;
4948
- cursor: default;
4949
- -webkit-user-select: none;
4950
- user-select: none;
4951
- font-family: var(--cetec-fonts-mono);
4952
- font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
4953
- font-variant-numeric: tabular-nums;
4954
- text-align: center;
4955
- color: var(--cetec-colors-text);
4956
- min-width: 1.5em;
4957
- }
4958
-
4959
- .group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) .cetec-datePicker__segment {
4960
- color: var(--cetec-colors-text-disabled);
4961
- }
4962
-
4963
- .cetec-datePicker__segment:is(:focus-visible, [data-focus-visible=true]) {
4964
- background: var(--cetec-colors-bg-neutral-hovered);
4965
- }
4966
-
4967
- .cetec-datePicker__separator {
4968
- color: var(--cetec-colors-text-placeholder);
4969
- -webkit-user-select: none;
4970
- user-select: none;
4971
- display: inline-flex;
4972
- align-items: center;
4973
- }
4974
-
4975
- .cetec-datePicker__popover {
4976
- background: var(--cetec-colors-surface-overlay);
4977
- border-width: var(--cetec-border-widths-1);
4978
- border-style: solid;
5178
+ .cetec-dateMenus__footer {
5179
+ gap: var(--cetec-spacing-8);
4979
5180
  border-color: var(--cetec-colors-border);
4980
- border-radius: var(--cetec-radii-8);
4981
- overflow: hidden;
4982
- outline: var(--cetec-borders-none);
4983
- display: flex;
4984
- flex-direction: column;
4985
- box-shadow: var(--cetec-shadows-overlay);
4986
- z-index: var(--cetec-z-index-1000);
4987
- width: var(--cetec-sizes-280);
4988
- }
4989
-
4990
- .cetec-datePicker__calendarHeader {
4991
- padding-inline: var(--cetec-spacing-8);
5181
+ padding-inline: var(--cetec-spacing-16);
4992
5182
  padding-block: var(--cetec-spacing-8);
4993
- border-bottom: var(--cetec-borders-default);
4994
- gap: var(--cetec-spacing-4);
4995
- font-family: var(--cetec-fonts-mono);
4996
5183
  display: flex;
5184
+ justify-content: flex-end;
4997
5185
  align-items: center;
4998
- justify-content: space-between;
5186
+ border-top-width: var(--cetec-border-widths-1);
5187
+ border-top-style: solid;
4999
5188
  }
5000
5189
 
5001
- .cetec-datePicker__calendarGrid {
5002
- gap: var(--cetec-spacing-2);
5003
- padding-inline: var(--cetec-spacing-8);
5004
- padding-block: var(--cetec-spacing-4);
5005
- display: grid;
5006
- grid-template-columns: repeat(7, 1fr);
5007
- padding-bottom: var(--cetec-spacing-8);
5008
- }
5009
-
5010
- .cetec-datePicker__weekdayLabel {
5190
+ .cetec-dateTimeMenus__content {
5011
5191
  display: flex;
5012
- align-items: center;
5013
- justify-content: center;
5014
- -webkit-user-select: none;
5015
- user-select: none;
5016
- }
5017
-
5018
- .cetec-datePicker__day {
5019
- align-items: center;
5020
- justify-content: center;
5021
- font-family: var(--cetec-fonts-mono);
5022
- width: var(--cetec-sizes-32);
5023
- height: var(--cetec-sizes-32);
5192
+ align-items: stretch;
5024
5193
  }
5025
5194
 
5026
- .cetec-datePicker__day:is([data-today=true]) {
5027
- background: var(--cetec-colors-bg-selected);
5028
- font-weight: var(--cetec-font-weights-bold);
5029
- color: var(--cetec-colors-text-selected);
5030
- }
5031
-
5032
- .cetec-datePicker__day:is([aria-selected=true], [data-selected=true]) {
5033
- background: var(--cetec-colors-bg-selected-bold);
5034
- color: var(--cetec-colors-text-inverse);
5035
- }
5036
-
5037
- .cetec-datePicker__day:is([aria-selected=true], [data-selected=true]):is(:hover, [data-hover=true]) {
5038
- background: var(--cetec-colors-bg-selected-bold-hovered);
5039
- }
5040
-
5041
- .cetec-datePicker__day:is([aria-selected=true], [data-selected=true]):is([data-today=true]) {
5042
- background: var(--cetec-colors-bg-selected-bold);
5043
- color: var(--cetec-colors-text-inverse);
5044
- }
5045
-
5046
- .cetec-datePicker__day[data-unavailable=true] {
5047
- color: var(--cetec-colors-text-disabled);
5048
- cursor: not-allowed;
5049
- pointer-events: none;
5195
+ .cetec-dateTimeMenus__divider {
5196
+ background: var(--cetec-colors-border);
5197
+ align-self: stretch;
5198
+ width: var(--cetec-sizes-4);
5050
5199
  }
5051
5200
 
5052
- .cetec-datePicker__day[data-unavailable=true]:is(:hover, [data-hover=true]) {
5053
- background: var(--cetec-colors-transparent);
5201
+ .cetec-dateTimeMenus__footer {
5202
+ gap: var(--cetec-spacing-8);
5203
+ border-color: var(--cetec-colors-border);
5204
+ padding-inline: var(--cetec-spacing-16);
5205
+ padding-block: var(--cetec-spacing-8);
5206
+ display: flex;
5207
+ justify-content: flex-end;
5208
+ align-items: center;
5209
+ width: var(--cetec-sizes-full);
5210
+ border-top-width: var(--cetec-border-widths-1);
5211
+ border-top-style: solid;
5054
5212
  }
5055
5213
 
5056
5214
  .cetec-formField__container:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
@@ -5539,35 +5697,217 @@
5539
5697
  display: none;
5540
5698
  }
5541
5699
 
5542
- .cetec-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
5543
- display: inline-grid;
5544
- position: absolute;
5545
- fill: var(--cetec-colors-border-focused);
5546
- z-index: zIndex.2;
5700
+ .cetec-radio__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='radio-focus'] {
5701
+ display: inline-grid;
5702
+ position: absolute;
5703
+ fill: var(--cetec-colors-border-focused);
5704
+ z-index: zIndex.2;
5705
+ }
5706
+
5707
+ .cetec-radio__indicator {
5708
+ inset: var(--cetec-spacing-0);
5709
+ display: none;
5710
+ position: absolute;
5711
+ z-index: zIndex.3;
5712
+ width: var(--cetec-sizes-24);
5713
+ height: var(--cetec-sizes-24);
5714
+ }
5715
+
5716
+ .cetec-radio__indicator:is([name='radio']) {
5717
+ fill: var(--cetec-colors-icon-subtlest);
5718
+ z-index: zIndex.3;
5719
+ }
5720
+
5721
+ .cetec-radio__radioBg {
5722
+ position: absolute;
5723
+ fill: var(--cetec-colors-surface);
5724
+ z-index: var(--cetec-z-index-base);
5725
+ top: var(--cetec-spacing-0);
5726
+ left: var(--cetec-spacing-0);
5727
+ width: var(--cetec-sizes-24);
5728
+ height: var(--cetec-sizes-24);
5729
+ }
5730
+
5731
+ .cetec-segmentedFields__container {
5732
+ --input-py: var(--cetec-sizes-3);
5733
+ --input-px: var(--cetec-sizes-10);
5734
+ --slot-size: var(--cetec-sizes-20);
5735
+ --slot-px: var(--cetec-sizes-6);
5736
+ margin: var(--cetec-spacing-0);
5737
+ padding: var(--cetec-spacing-0);
5738
+ background: var(--cetec-colors-bg-input);
5739
+ padding-block: var(--input-py);
5740
+ padding-inline: var(--input-px);
5741
+ border-width: var(--cetec-border-widths-1);
5742
+ border-style: solid;
5743
+ border-color: var(--cetec-colors-border-input);
5744
+ border-radius: var(--cetec-radii-4);
5745
+ box-sizing: border-box;
5746
+ font-family: var(--cetec-fonts-body);
5747
+ font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
5748
+ font-weight: var(--cetec-font-weights-normal);
5749
+ line-height: var(--cetec-line-heights-default);
5750
+ color: var(--cetec-colors-text-subtlest);
5751
+ position: relative;
5752
+ display: flex;
5753
+ align-items: center;
5754
+ outline-width: var(--cetec-border-widths-2);
5755
+ outline-offset: calc(var(--cetec-spacing-1) * -1);
5756
+ outline-style: solid;
5757
+ outline-color: var(--cetec-colors-transparent);
5758
+ --transition-duration: var(--cetec-durations-fast);
5759
+ transition-duration: var(--cetec-durations-fast);
5760
+ --transition-prop: background, border-color, outline-color;
5761
+ transition-property: background, border-color, outline-color;
5762
+ --transition-easing: var(--cetec-easings-default);
5763
+ transition-timing-function: var(--cetec-easings-default);
5764
+ width: var(--cetec-sizes-full);
5765
+ }
5766
+
5767
+ .cetec-segmentedFields__container:is([open], [data-open=true], [data-state="open"], :popover-open) {
5768
+ background: var(--cetec-colors-bg-input-pressed);
5769
+ border-color: var(--cetec-colors-border-focused);
5770
+ outline-color: var(--cetec-colors-border-focused);
5771
+ }
5772
+
5773
+ .cetec-segmentedFields__container:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
5774
+ background: var(--cetec-colors-bg-disabled);
5775
+ border-color: var(--cetec-colors-border-disabled);
5776
+ cursor: not-allowed;
5777
+ pointer-events: none;
5778
+ }
5779
+
5780
+ .cetec-segmentedFields__container:is([data-error=true]) {
5781
+ border-color: var(--cetec-colors-border-danger);
5782
+ }
5783
+
5784
+ .cetec-segmentedFields__container:is([data-error=true]):focus-within:not(:has(button:focus)) {
5785
+ border-color: var(--cetec-colors-border-danger);
5786
+ outline-color: var(--cetec-colors-border-danger);
5787
+ }
5788
+
5789
+ .cetec-segmentedFields__container:is(:invalid, [data-invalid=true], [aria-invalid=true]) {
5790
+ border-color: var(--cetec-colors-border-danger);
5791
+ }
5792
+
5793
+ .cetec-segmentedFields__container:is(:invalid, [data-invalid=true], [aria-invalid=true]):focus-within:not(:has(button:focus)) {
5794
+ border-color: var(--cetec-colors-border-danger);
5795
+ outline-color: var(--cetec-colors-border-danger);
5796
+ }
5797
+
5798
+ .cetec-segmentedFields__container:focus-within:not(:has(button:focus)) {
5799
+ background: var(--cetec-colors-bg-input-pressed);
5800
+ border-color: var(--cetec-colors-border-focused);
5801
+ outline-color: var(--cetec-colors-border-focused);
5802
+ }
5803
+
5804
+ .cetec-segmentedFields__slot {
5805
+ padding-inline: var(--slot-px);
5806
+ --transition-duration: var(--cetec-durations-fast);
5807
+ transition-duration: var(--cetec-durations-fast);
5808
+ --transition-prop: all;
5809
+ transition-property: all;
5810
+ --transition-easing: var(--cetec-easings-default);
5811
+ transition-timing-function: var(--cetec-easings-default);
5812
+ fill: var(--cetec-colors-icon-decorative);
5813
+ pointer-events: none;
5814
+ }
5815
+
5816
+ .cetec-segmentedFields__slot,.cetec-segmentedFields__buttonSlot {
5817
+ flex: 0 0 var(--slot-size);
5818
+ display: inline-flex;
5819
+ align-items: center;
5820
+ z-index: var(--cetec-z-index-1);
5821
+ }
5822
+
5823
+ .cetec-segmentedFields__buttonSlot {
5824
+ margin: calc(var(--cetec-spacing-1) * -1);
5825
+ padding-inline: var(--cetec-spacing-0);
5826
+ }
5827
+
5828
+ .cetec-segmentedInputs__root {
5829
+ margin: var(--cetec-spacing-0);
5830
+ padding: var(--cetec-spacing-0);
5831
+ gap: var(--cetec-spacing-0);
5832
+ box-sizing: border-box;
5833
+ font-family: var(--cetec-fonts-mono);
5834
+ font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
5835
+ font-weight: var(--cetec-font-weights-normal);
5836
+ line-height: var(--cetec-line-heights-default);
5837
+ color: var(--cetec-colors-text);
5838
+ display: inline-flex;
5839
+ align-items: center;
5840
+ cursor: text;
5841
+ -webkit-user-select: none;
5842
+ user-select: none;
5843
+ flex-grow: 0;
5844
+ flex-shrink: 0;
5845
+ flex-basis: var(--cetec-sizes-fit);
5846
+ width: var(--cetec-sizes-fit);
5847
+ min-width: var(--cetec-sizes-0);
5848
+ }
5849
+
5850
+ .cetec-segmentedInputs__root:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
5851
+ color: var(--cetec-colors-text-disabled);
5852
+ cursor: not-allowed;
5853
+ pointer-events: none;
5854
+ }
5855
+
5856
+ .cetec-segmentedInputs__segment {
5857
+ outline: var(--cetec-borders-none);
5858
+ border-radius: var(--cetec-radii-2);
5859
+ display: inline-flex;
5860
+ align-items: center;
5861
+ justify-content: center;
5862
+ cursor: default;
5863
+ -webkit-user-select: none;
5864
+ user-select: none;
5865
+ font-family: var(--cetec-fonts-mono);
5866
+ font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
5867
+ font-variant-numeric: tabular-nums;
5868
+ text-align: center;
5869
+ color: var(--cetec-colors-text);
5870
+ }
5871
+
5872
+ .group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) .cetec-segmentedInputs__segment {
5873
+ color: var(--cetec-colors-text-disabled);
5874
+ }
5875
+
5876
+ .cetec-segmentedInputs__segment:is(:focus, [data-focus=true]) {
5877
+ --mix-background: color-mix(in srgb, var(--cetec-colors-bg-accent-gold-subtlest) 75%, transparent);
5878
+ background: var(--mix-background, var(--cetec-colors-bg-accent-gold-subtlest));
5879
+ }
5880
+
5881
+ .cetec-segmentedInputs__separator {
5882
+ color: var(--cetec-colors-text-placeholder);
5883
+ text-align: center;
5884
+ -webkit-user-select: none;
5885
+ user-select: none;
5886
+ white-space: pre;
5887
+ display: inline-flex;
5888
+ align-items: center;
5889
+ justify-content: center;
5890
+ min-width: 0.75em;
5891
+ }
5892
+
5893
+ .cetec-segmentedInputs__separator[data-gap=none] {
5894
+ padding-inline: var(--cetec-spacing-0);
5895
+ min-width: var(--cetec-sizes-0);
5547
5896
  }
5548
5897
 
5549
- .cetec-radio__indicator {
5550
- inset: var(--cetec-spacing-0);
5551
- display: none;
5552
- position: absolute;
5553
- z-index: zIndex.3;
5554
- width: var(--cetec-sizes-24);
5555
- height: var(--cetec-sizes-24);
5898
+ .cetec-segmentedInputs__separator[data-gap=tight] {
5899
+ padding-inline: var(--cetec-spacing-1);
5900
+ min-width: 0.5em;
5556
5901
  }
5557
5902
 
5558
- .cetec-radio__indicator:is([name='radio']) {
5559
- fill: var(--cetec-colors-icon-subtlest);
5560
- z-index: zIndex.3;
5903
+ .cetec-segmentedInputs__separator[data-gap=normal] {
5904
+ padding-inline: var(--cetec-spacing-1);
5905
+ min-width: 0.75em;
5561
5906
  }
5562
5907
 
5563
- .cetec-radio__radioBg {
5564
- position: absolute;
5565
- fill: var(--cetec-colors-surface);
5566
- z-index: var(--cetec-z-index-base);
5567
- top: var(--cetec-spacing-0);
5568
- left: var(--cetec-spacing-0);
5569
- width: var(--cetec-sizes-24);
5570
- height: var(--cetec-sizes-24);
5908
+ .cetec-segmentedInputs__separator[data-gap=loose] {
5909
+ padding-inline: var(--cetec-spacing-2);
5910
+ min-width: 1.25em;
5571
5911
  }
5572
5912
 
5573
5913
  .cetec-select__root {
@@ -5848,166 +6188,61 @@
5848
6188
  padding-inline: var(--cetec-spacing-0);
5849
6189
  }
5850
6190
 
5851
- .cetec-timePicker__root {
5852
- display: inline-flex;
5853
- flex-direction: column;
5854
- position: relative;
5855
- }
5856
-
5857
- .cetec-timePicker__input {
5858
- background: var(--cetec-colors-bg-input);
5859
- gap: var(--cetec-spacing-2);
5860
- border-width: var(--cetec-border-widths-1);
5861
- border-style: solid;
5862
- border-color: var(--cetec-colors-border-input);
5863
- border-radius: var(--cetec-radii-4);
5864
- display: inline-flex;
5865
- align-items: center;
5866
- outline-width: var(--cetec-border-widths-2);
5867
- outline-offset: calc(var(--cetec-spacing-1) * -1);
5868
- outline-style: solid;
5869
- outline-color: var(--cetec-colors-transparent);
5870
- color: var(--cetec-colors-text);
5871
- font-family: var(--cetec-fonts-mono);
5872
- line-height: var(--cetec-line-heights-default);
5873
- cursor: text;
5874
- -webkit-user-select: none;
5875
- user-select: none;
5876
- --transition-duration: var(--cetec-durations-fast);
5877
- transition-duration: var(--cetec-durations-fast);
5878
- --transition-prop: background, border-color, outline-color;
5879
- transition-property: background, border-color, outline-color;
5880
- --transition-easing: var(--cetec-easings-default);
5881
- transition-timing-function: var(--cetec-easings-default);
5882
- width: var(--cetec-sizes-full);
5883
- }
5884
-
5885
- .cetec-timePicker__input:is([open], [data-open=true], [data-state="open"], :popover-open) {
5886
- background: var(--cetec-colors-bg-input-pressed);
5887
- border-color: var(--cetec-colors-border-focused);
5888
- outline-color: var(--cetec-colors-border-focused);
5889
- }
5890
-
5891
- .cetec-timePicker__input:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) {
5892
- background: var(--cetec-colors-bg-disabled);
5893
- border-color: var(--cetec-colors-border-disabled);
5894
- color: var(--cetec-colors-text-disabled);
5895
- cursor: not-allowed;
5896
- pointer-events: none;
5897
- }
5898
-
5899
- .cetec-timePicker__input:is([data-error=true]) {
5900
- border-color: var(--cetec-colors-border-danger);
5901
- }
5902
-
5903
- .cetec-timePicker__input:is([data-error=true]):is(:hover, [data-hover=true]) {
5904
- border-color: var(--cetec-colors-border-danger);
5905
- }
5906
-
5907
- .cetec-timePicker__input:is([data-error=true]):focus-within {
5908
- border-color: var(--cetec-colors-border-danger);
5909
- outline-color: var(--cetec-colors-border-danger);
5910
- }
5911
-
5912
- .cetec-timePicker__input:is([data-error=true]):is([open], [data-open=true], [data-state="open"], :popover-open) {
5913
- border-color: var(--cetec-colors-border-danger);
5914
- outline-color: var(--cetec-colors-border-danger);
5915
- }
5916
-
5917
- .cetec-timePicker__input:focus-within {
5918
- background: var(--cetec-colors-bg-input-pressed);
5919
- border-color: var(--cetec-colors-border-focused);
5920
- outline-color: var(--cetec-colors-border-focused);
5921
- }
5922
-
5923
- .cetec-timePicker__segment {
5924
- outline: var(--cetec-borders-none);
5925
- border-radius: var(--cetec-radii-2);
5926
- display: inline-flex;
5927
- align-items: center;
5928
- justify-content: center;
5929
- cursor: default;
5930
- -webkit-user-select: none;
5931
- user-select: none;
5932
- font-family: var(--cetec-fonts-mono);
5933
- font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
5934
- font-variant-numeric: tabular-nums;
5935
- text-align: center;
5936
- color: var(--cetec-colors-text);
5937
- min-width: 1.5em;
5938
- }
5939
-
5940
- .group:is(:disabled, [disabled], [data-disabled=true], [aria-disabled=true]) .cetec-timePicker__segment {
5941
- color: var(--cetec-colors-text-disabled);
5942
- }
5943
-
5944
- .cetec-timePicker__segment:is(:focus-visible, [data-focus-visible=true]) {
5945
- background: var(--cetec-colors-bg-neutral-hovered);
5946
- }
5947
-
5948
- .cetec-timePicker__separator {
5949
- color: var(--cetec-colors-text-placeholder);
5950
- -webkit-user-select: none;
5951
- user-select: none;
5952
- display: inline-flex;
5953
- align-items: center;
6191
+ .cetec-timeMenus__columns {
6192
+ align-items: stretch;
5954
6193
  }
5955
6194
 
5956
- .cetec-timePicker__popover {
5957
- background: var(--cetec-colors-surface-overlay);
5958
- border-width: var(--cetec-border-widths-1);
5959
- border-style: solid;
5960
- border-color: var(--cetec-colors-border);
5961
- border-radius: var(--cetec-radii-8);
5962
- overflow: hidden;
5963
- outline: var(--cetec-borders-none);
6195
+ .cetec-timeMenus__columns,.cetec-timeMenus__column {
5964
6196
  display: flex;
5965
- flex-direction: row;
5966
- box-shadow: var(--cetec-shadows-overlay);
5967
- z-index: var(--cetec-z-index-1000);
5968
- width: var(--cetec-sizes-fit);
6197
+ min-height: var(--cetec-sizes-0);
5969
6198
  }
5970
6199
 
5971
- .cetec-timePicker__column {
6200
+ .cetec-timeMenus__column {
5972
6201
  flex: 1 1 0%;
5973
- scroll-snap-type: y mandatory;
5974
- border-right: var(--cetec-borders-default);
5975
- display: flex;
6202
+ border-color: var(--cetec-colors-border);
5976
6203
  flex-direction: column;
5977
6204
  text-align: center;
5978
6205
  scrollbar-width: none;
5979
- -ms-overflow-style: none;
5980
- overflow-y: auto;
5981
- max-height: var(--cetec-sizes-200);
5982
6206
  min-width: var(--cetec-sizes-56);
6207
+ max-height: var(--cetec-sizes-200);
6208
+ overflow-y: auto;
6209
+ border-right-width: var(--cetec-border-widths-1);
6210
+ border-right-style: solid;
5983
6211
  }
5984
6212
 
5985
- .cetec-timePicker__column:last-child {
6213
+ .cetec-timeMenus__column:last-child {
5986
6214
  border-right: var(--cetec-borders-none);
5987
6215
  }
5988
6216
 
5989
- .cetec-timePicker__column::-webkit-scrollbar {
6217
+ .cetec-timeMenus__column::-webkit-scrollbar {
5990
6218
  display: none;
5991
6219
  }
5992
6220
 
5993
- .cetec-timePicker__columnLabel {
5994
- background: var(--cetec-colors-surface-overlay);
6221
+ .cetec-timeMenus__columnHeader {
6222
+ background: var(--cetec-colors-surface);
5995
6223
  padding-block: var(--cetec-spacing-4);
5996
- padding-inline: var(--cetec-spacing-8);
5997
- border-bottom: var(--cetec-borders-default);
5998
- display: flex;
5999
- align-items: center;
6000
- justify-content: center;
6001
- font-size: 11px;
6002
- font-weight: var(--cetec-font-weights-medium);
6003
- color: var(--cetec-colors-text-subtlest);
6004
- text-transform: uppercase;
6005
- letter-spacing: var(--cetec-letter-spacings-widest);
6224
+ border-color: var(--cetec-colors-border);
6006
6225
  position: sticky;
6226
+ text-align: center;
6227
+ font-size: var(--cetec-font-sizes-12);
6228
+ font-weight: semibold;
6229
+ color: var(--cetec-colors-text-subtlest);
6007
6230
  z-index: var(--cetec-z-index-1);
6008
- -webkit-user-select: none;
6009
- user-select: none;
6010
6231
  top: var(--cetec-spacing-0);
6232
+ border-bottom-width: var(--cetec-border-widths-1);
6233
+ border-bottom-style: solid;
6234
+ }
6235
+
6236
+ .cetec-timeMenus__footer {
6237
+ gap: var(--cetec-spacing-8);
6238
+ border-color: var(--cetec-colors-border);
6239
+ padding-inline: var(--cetec-spacing-16);
6240
+ padding-block: var(--cetec-spacing-8);
6241
+ display: flex;
6242
+ justify-content: flex-end;
6243
+ align-items: center;
6244
+ border-top-width: var(--cetec-border-widths-1);
6245
+ border-top-style: solid;
6011
6246
  }
6012
6247
 
6013
6248
  .cetec-tooltip__tooltipContent {
@@ -6096,6 +6331,46 @@
6096
6331
  fill: var(--cetec-colors-icon-inverse);
6097
6332
  }
6098
6333
 
6334
+ .cetec-autocomplete__root--size_md {
6335
+ --control-py: var(--cetec-sizes-3);
6336
+ --control-px: var(--cetec-sizes-10);
6337
+ --control-fs: var(--cetec-sizes-16);
6338
+ --control-min-height: var(--cetec-sizes-32);
6339
+ --value-gap: var(--cetec-sizes-4);
6340
+ --input-min-width: var(--cetec-sizes-80);
6341
+ --loading-size: var(--cetec-sizes-20);
6342
+ }
6343
+
6344
+ .cetec-autocomplete__root--size_sm {
6345
+ --control-py: var(--cetec-sizes-0);
6346
+ --control-px: var(--cetec-sizes-8);
6347
+ --control-fs: var(--cetec-sizes-14);
6348
+ --control-min-height: var(--cetec-sizes-24);
6349
+ --value-gap: var(--cetec-sizes-3);
6350
+ --input-min-width: var(--cetec-sizes-64);
6351
+ --loading-size: var(--cetec-sizes-16);
6352
+ }
6353
+
6354
+ .cetec-autocomplete__root--size_lg {
6355
+ --control-py: var(--cetec-sizes-7);
6356
+ --control-px: var(--cetec-sizes-12);
6357
+ --control-fs: var(--cetec-sizes-16);
6358
+ --control-min-height: var(--cetec-sizes-40);
6359
+ --value-gap: var(--cetec-sizes-5);
6360
+ --input-min-width: var(--cetec-sizes-96);
6361
+ --loading-size: var(--cetec-sizes-20);
6362
+ }
6363
+
6364
+ .cetec-autocomplete__root--size_xl {
6365
+ --control-py: var(--cetec-sizes-9);
6366
+ --control-px: var(--cetec-sizes-16);
6367
+ --control-fs: var(--cetec-sizes-20);
6368
+ --control-min-height: var(--cetec-sizes-48);
6369
+ --value-gap: var(--cetec-sizes-6);
6370
+ --input-min-width: var(--cetec-sizes-112);
6371
+ --loading-size: var(--cetec-sizes-24);
6372
+ }
6373
+
6099
6374
  .cetec-avatar__root--size_md {
6100
6375
  width: var(--cetec-sizes-20);
6101
6376
  }
@@ -6672,6 +6947,11 @@
6672
6947
  padding-inline-end: var(--cetec-spacing-0);
6673
6948
  }
6674
6949
 
6950
+ .cetec-calendar__day--type_months,.cetec-calendar__day--type_years {
6951
+ padding-inline: var(--cetec-spacing-8);
6952
+ width: var(--cetec-sizes-auto);
6953
+ }
6954
+
6675
6955
  .cetec-chip__container--size_md {
6676
6956
  --chip-h: var(--cetec-sizes-24);
6677
6957
  --main-px: var(--cetec-sizes-8);
@@ -6716,30 +6996,6 @@
6716
6996
  padding-inline-end: var(--main-slot-side-padding);
6717
6997
  }
6718
6998
 
6719
- .cetec-datePicker__input--size_md {
6720
- padding-block: var(--cetec-spacing-3);
6721
- padding-inline: var(--cetec-spacing-10);
6722
- font-size: var(--cetec-font-sizes-16);
6723
- }
6724
-
6725
- .cetec-datePicker__input--size_sm {
6726
- padding-block: var(--cetec-spacing-0);
6727
- padding-inline: var(--cetec-spacing-8);
6728
- font-size: var(--cetec-font-sizes-14);
6729
- }
6730
-
6731
- .cetec-datePicker__input--size_lg {
6732
- padding-block: var(--cetec-spacing-7);
6733
- padding-inline: var(--cetec-spacing-12);
6734
- font-size: var(--cetec-font-sizes-16);
6735
- }
6736
-
6737
- .cetec-datePicker__input--size_xl {
6738
- padding-block: var(--cetec-spacing-9);
6739
- padding-inline: var(--cetec-spacing-16);
6740
- font-size: var(--cetec-font-sizes-20);
6741
- }
6742
-
6743
6999
  .cetec-formField__container--layout_default {
6744
7000
  gap: var(--cetec-spacing-2);
6745
7001
  display: flex;
@@ -7334,6 +7590,88 @@
7334
7590
  animation: modalScaleOutTop 150ms ease-out forwards;
7335
7591
  }
7336
7592
 
7593
+ .cetec-segmentedFields__container--size_md {
7594
+ --input-py: var(--cetec-sizes-3);
7595
+ --input-px: var(--cetec-sizes-10);
7596
+ --slot-size: var(--cetec-sizes-20);
7597
+ --slot-px: var(--cetec-sizes-6);
7598
+ }
7599
+
7600
+ .cetec-segmentedFields__container--size_sm {
7601
+ --input-py: var(--cetec-sizes-0);
7602
+ --input-px: var(--cetec-sizes-8);
7603
+ --slot-size: var(--cetec-sizes-16);
7604
+ --slot-px: var(--cetec-sizes-4);
7605
+ }
7606
+
7607
+ .cetec-segmentedFields__container--size_lg {
7608
+ --input-py: var(--cetec-sizes-7);
7609
+ --input-px: var(--cetec-sizes-12);
7610
+ --slot-size: var(--cetec-sizes-24);
7611
+ --slot-px: var(--cetec-sizes-8);
7612
+ }
7613
+
7614
+ .cetec-segmentedFields__container--size_xl {
7615
+ --input-py: var(--cetec-sizes-9);
7616
+ --input-px: var(--cetec-sizes-16);
7617
+ --slot-size: var(--cetec-sizes-28);
7618
+ --slot-px: var(--cetec-sizes-10);
7619
+ }
7620
+
7621
+ .cetec-segmentedFields__container--field_date {
7622
+ min-width: var(--cetec-sizes-128);
7623
+ }
7624
+
7625
+ .cetec-segmentedFields__container--field_time {
7626
+ min-width: var(--cetec-sizes-104);
7627
+ }
7628
+
7629
+ .cetec-segmentedFields__container--field_dateTime {
7630
+ min-width: var(--cetec-sizes-216);
7631
+ }
7632
+
7633
+ .cetec-segmentedFields__container--range_date {
7634
+ min-width: var(--cetec-sizes-248);
7635
+ }
7636
+
7637
+ .cetec-segmentedFields__container--range_time {
7638
+ min-width: var(--cetec-sizes-200);
7639
+ }
7640
+
7641
+ .cetec-segmentedFields__container--before_true {
7642
+ padding-inline-start: var(--cetec-spacing-0);
7643
+ }
7644
+
7645
+ .cetec-segmentedFields__buttonSlot--before_true button {
7646
+ border-top-right-radius: var(--cetec-radii-0);
7647
+ border-bottom-right-radius: var(--cetec-radii-0);
7648
+ }
7649
+
7650
+ .cetec-segmentedFields__container--after_true {
7651
+ padding-inline-end: var(--cetec-spacing-0);
7652
+ }
7653
+
7654
+ .cetec-segmentedFields__buttonSlot--after_true button {
7655
+ border-top-left-radius: var(--cetec-radii-0);
7656
+ border-bottom-left-radius: var(--cetec-radii-0);
7657
+ }
7658
+
7659
+ .cetec-segmentedInputs__root--size_md {
7660
+ font-size: var(--cetec-font-sizes-16);
7661
+ }
7662
+
7663
+ .cetec-segmentedInputs__root--size_sm {
7664
+ font-size: var(--cetec-font-sizes-14);
7665
+ }
7666
+
7667
+ .cetec-segmentedInputs__root--size_lg {
7668
+ font-size: var(--cetec-font-sizes-16);
7669
+ }
7670
+
7671
+ .cetec-segmentedInputs__root--size_xl {
7672
+ font-size: var(--cetec-font-sizes-20);
7673
+ }
7674
+
7337
7675
  .cetec-select__root--size_md {
7338
7676
  --icon-size: var(--cetec-sizes-24);
7339
7677
  --icon-margin: var(--cetec-sizes-3);
@@ -7486,28 +7824,8 @@
7486
7824
  max-width: var(--cetec-sizes-full);
7487
7825
  }
7488
7826
 
7489
- .cetec-timePicker__input--size_md {
7490
- padding-block: var(--cetec-spacing-3);
7491
- padding-inline: var(--cetec-spacing-10);
7492
- font-size: var(--cetec-font-sizes-16);
7493
- }
7494
-
7495
- .cetec-timePicker__input--size_sm {
7496
- padding-block: var(--cetec-spacing-0);
7497
- padding-inline: var(--cetec-spacing-8);
7498
- font-size: var(--cetec-font-sizes-14);
7499
- }
7500
-
7501
- .cetec-timePicker__input--size_lg {
7502
- padding-block: var(--cetec-spacing-7);
7503
- padding-inline: var(--cetec-spacing-12);
7504
- font-size: var(--cetec-font-sizes-16);
7505
- }
7506
-
7507
- .cetec-timePicker__input--size_xl {
7508
- padding-block: var(--cetec-spacing-9);
7509
- padding-inline: var(--cetec-spacing-16);
7510
- font-size: var(--cetec-font-sizes-20);
7827
+ .cetec-timeMenus__column--stretch_true {
7828
+ max-height: none;
7511
7829
  }
7512
7830
 
7513
7831
  .cetec-tooltip__tooltipContent--size_md {
@@ -7561,6 +7879,42 @@
7561
7879
  height: var(--cetec-sizes-28);
7562
7880
  width: var(--cetec-sizes-28);
7563
7881
  min-height: var(--cetec-sizes-28);
7882
+ }
7883
+ .xs\:cetec-autocomplete__root--size_sm {
7884
+ --control-py: var(--cetec-sizes-0);
7885
+ --control-px: var(--cetec-sizes-8);
7886
+ --control-fs: var(--cetec-sizes-14);
7887
+ --control-min-height: var(--cetec-sizes-24);
7888
+ --value-gap: var(--cetec-sizes-3);
7889
+ --input-min-width: var(--cetec-sizes-64);
7890
+ --loading-size: var(--cetec-sizes-16);
7891
+ }
7892
+ .xs\:cetec-autocomplete__root--size_md {
7893
+ --control-py: var(--cetec-sizes-3);
7894
+ --control-px: var(--cetec-sizes-10);
7895
+ --control-fs: var(--cetec-sizes-16);
7896
+ --control-min-height: var(--cetec-sizes-32);
7897
+ --value-gap: var(--cetec-sizes-4);
7898
+ --input-min-width: var(--cetec-sizes-80);
7899
+ --loading-size: var(--cetec-sizes-20);
7900
+ }
7901
+ .xs\:cetec-autocomplete__root--size_lg {
7902
+ --control-py: var(--cetec-sizes-7);
7903
+ --control-px: var(--cetec-sizes-12);
7904
+ --control-fs: var(--cetec-sizes-16);
7905
+ --control-min-height: var(--cetec-sizes-40);
7906
+ --value-gap: var(--cetec-sizes-5);
7907
+ --input-min-width: var(--cetec-sizes-96);
7908
+ --loading-size: var(--cetec-sizes-20);
7909
+ }
7910
+ .xs\:cetec-autocomplete__root--size_xl {
7911
+ --control-py: var(--cetec-sizes-9);
7912
+ --control-px: var(--cetec-sizes-16);
7913
+ --control-fs: var(--cetec-sizes-20);
7914
+ --control-min-height: var(--cetec-sizes-48);
7915
+ --value-gap: var(--cetec-sizes-6);
7916
+ --input-min-width: var(--cetec-sizes-112);
7917
+ --loading-size: var(--cetec-sizes-24);
7564
7918
  }
7565
7919
  .xs\:cetec-avatar__root--size_sm {
7566
7920
  width: var(--cetec-sizes-16);
@@ -8070,26 +8424,6 @@
8070
8424
  }
8071
8425
  .xs\:cetec-chip__mainContent--after_true {
8072
8426
  padding-inline-end: var(--main-slot-side-padding);
8073
- }
8074
- .xs\:cetec-datePicker__input--size_sm {
8075
- padding-block: var(--cetec-spacing-0);
8076
- padding-inline: var(--cetec-spacing-8);
8077
- font-size: var(--cetec-font-sizes-14);
8078
- }
8079
- .xs\:cetec-datePicker__input--size_md {
8080
- padding-block: var(--cetec-spacing-3);
8081
- padding-inline: var(--cetec-spacing-10);
8082
- font-size: var(--cetec-font-sizes-16);
8083
- }
8084
- .xs\:cetec-datePicker__input--size_lg {
8085
- padding-block: var(--cetec-spacing-7);
8086
- padding-inline: var(--cetec-spacing-12);
8087
- font-size: var(--cetec-font-sizes-16);
8088
- }
8089
- .xs\:cetec-datePicker__input--size_xl {
8090
- padding-block: var(--cetec-spacing-9);
8091
- padding-inline: var(--cetec-spacing-16);
8092
- font-size: var(--cetec-font-sizes-20);
8093
8427
  }
8094
8428
  .xs\:cetec-formField__labelWrapper--size_sm .cetec-label {
8095
8429
  font-size: var(--cetec-font-sizes-14);
@@ -8578,6 +8912,68 @@
8578
8912
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
8579
8913
  color: var(--cetec-colors-text);
8580
8914
  font-size: var(--cetec-font-sizes-20);
8915
+ }
8916
+ .xs\:cetec-segmentedFields__container--size_sm {
8917
+ --input-py: var(--cetec-sizes-0);
8918
+ --input-px: var(--cetec-sizes-8);
8919
+ --slot-size: var(--cetec-sizes-16);
8920
+ --slot-px: var(--cetec-sizes-4);
8921
+ }
8922
+ .xs\:cetec-segmentedFields__container--size_md {
8923
+ --input-py: var(--cetec-sizes-3);
8924
+ --input-px: var(--cetec-sizes-10);
8925
+ --slot-size: var(--cetec-sizes-20);
8926
+ --slot-px: var(--cetec-sizes-6);
8927
+ }
8928
+ .xs\:cetec-segmentedFields__container--size_lg {
8929
+ --input-py: var(--cetec-sizes-7);
8930
+ --input-px: var(--cetec-sizes-12);
8931
+ --slot-size: var(--cetec-sizes-24);
8932
+ --slot-px: var(--cetec-sizes-8);
8933
+ }
8934
+ .xs\:cetec-segmentedFields__container--size_xl {
8935
+ --input-py: var(--cetec-sizes-9);
8936
+ --input-px: var(--cetec-sizes-16);
8937
+ --slot-size: var(--cetec-sizes-28);
8938
+ --slot-px: var(--cetec-sizes-10);
8939
+ }
8940
+ .xs\:cetec-segmentedFields__container--field_date {
8941
+ min-width: var(--cetec-sizes-128);
8942
+ }
8943
+ .xs\:cetec-segmentedFields__container--field_time {
8944
+ min-width: var(--cetec-sizes-104);
8945
+ }
8946
+ .xs\:cetec-segmentedFields__container--field_dateTime {
8947
+ min-width: var(--cetec-sizes-216);
8948
+ }
8949
+ .xs\:cetec-segmentedFields__container--range_date {
8950
+ min-width: var(--cetec-sizes-248);
8951
+ }
8952
+ .xs\:cetec-segmentedFields__container--range_time {
8953
+ min-width: var(--cetec-sizes-200);
8954
+ }
8955
+ .xs\:cetec-segmentedFields__container--before_true {
8956
+ padding-inline-start: var(--cetec-spacing-0);
8957
+ }
8958
+ .xs\:cetec-segmentedFields__buttonSlot--before_true button {
8959
+ border-top-right-radius: var(--cetec-radii-0);
8960
+ border-bottom-right-radius: var(--cetec-radii-0);
8961
+ }
8962
+ .xs\:cetec-segmentedFields__container--after_true {
8963
+ padding-inline-end: var(--cetec-spacing-0);
8964
+ }
8965
+ .xs\:cetec-segmentedFields__buttonSlot--after_true button {
8966
+ border-top-left-radius: var(--cetec-radii-0);
8967
+ border-bottom-left-radius: var(--cetec-radii-0);
8968
+ }
8969
+ .xs\:cetec-segmentedInputs__root--size_sm {
8970
+ font-size: var(--cetec-font-sizes-14);
8971
+ }
8972
+ .xs\:cetec-segmentedInputs__root--size_md,.xs\:cetec-segmentedInputs__root--size_lg {
8973
+ font-size: var(--cetec-font-sizes-16);
8974
+ }
8975
+ .xs\:cetec-segmentedInputs__root--size_xl {
8976
+ font-size: var(--cetec-font-sizes-20);
8581
8977
  }
8582
8978
  .xs\:cetec-textInput__container--size_sm {
8583
8979
  --input-py: var(--cetec-sizes-0);
@@ -8624,26 +9020,6 @@
8624
9020
  .xs\:cetec-textInput__buttonSlot--after_true button {
8625
9021
  border-top-left-radius: var(--cetec-radii-0);
8626
9022
  border-bottom-left-radius: var(--cetec-radii-0);
8627
- }
8628
- .xs\:cetec-timePicker__input--size_sm {
8629
- padding-block: var(--cetec-spacing-0);
8630
- padding-inline: var(--cetec-spacing-8);
8631
- font-size: var(--cetec-font-sizes-14);
8632
- }
8633
- .xs\:cetec-timePicker__input--size_md {
8634
- padding-block: var(--cetec-spacing-3);
8635
- padding-inline: var(--cetec-spacing-10);
8636
- font-size: var(--cetec-font-sizes-16);
8637
- }
8638
- .xs\:cetec-timePicker__input--size_lg {
8639
- padding-block: var(--cetec-spacing-7);
8640
- padding-inline: var(--cetec-spacing-12);
8641
- font-size: var(--cetec-font-sizes-16);
8642
- }
8643
- .xs\:cetec-timePicker__input--size_xl {
8644
- padding-block: var(--cetec-spacing-9);
8645
- padding-inline: var(--cetec-spacing-16);
8646
- font-size: var(--cetec-font-sizes-20);
8647
9023
  }
8648
9024
  .xs\:cetec-tooltip__tooltipContent--size_sm {
8649
9025
  padding-block: var(--cetec-spacing-2);
@@ -8688,6 +9064,42 @@
8688
9064
  height: var(--cetec-sizes-28);
8689
9065
  width: var(--cetec-sizes-28);
8690
9066
  min-height: var(--cetec-sizes-28);
9067
+ }
9068
+ .sm\:cetec-autocomplete__root--size_sm {
9069
+ --control-py: var(--cetec-sizes-0);
9070
+ --control-px: var(--cetec-sizes-8);
9071
+ --control-fs: var(--cetec-sizes-14);
9072
+ --control-min-height: var(--cetec-sizes-24);
9073
+ --value-gap: var(--cetec-sizes-3);
9074
+ --input-min-width: var(--cetec-sizes-64);
9075
+ --loading-size: var(--cetec-sizes-16);
9076
+ }
9077
+ .sm\:cetec-autocomplete__root--size_md {
9078
+ --control-py: var(--cetec-sizes-3);
9079
+ --control-px: var(--cetec-sizes-10);
9080
+ --control-fs: var(--cetec-sizes-16);
9081
+ --control-min-height: var(--cetec-sizes-32);
9082
+ --value-gap: var(--cetec-sizes-4);
9083
+ --input-min-width: var(--cetec-sizes-80);
9084
+ --loading-size: var(--cetec-sizes-20);
9085
+ }
9086
+ .sm\:cetec-autocomplete__root--size_lg {
9087
+ --control-py: var(--cetec-sizes-7);
9088
+ --control-px: var(--cetec-sizes-12);
9089
+ --control-fs: var(--cetec-sizes-16);
9090
+ --control-min-height: var(--cetec-sizes-40);
9091
+ --value-gap: var(--cetec-sizes-5);
9092
+ --input-min-width: var(--cetec-sizes-96);
9093
+ --loading-size: var(--cetec-sizes-20);
9094
+ }
9095
+ .sm\:cetec-autocomplete__root--size_xl {
9096
+ --control-py: var(--cetec-sizes-9);
9097
+ --control-px: var(--cetec-sizes-16);
9098
+ --control-fs: var(--cetec-sizes-20);
9099
+ --control-min-height: var(--cetec-sizes-48);
9100
+ --value-gap: var(--cetec-sizes-6);
9101
+ --input-min-width: var(--cetec-sizes-112);
9102
+ --loading-size: var(--cetec-sizes-24);
8691
9103
  }
8692
9104
  .sm\:cetec-avatar__root--size_sm {
8693
9105
  width: var(--cetec-sizes-16);
@@ -9197,26 +9609,6 @@
9197
9609
  }
9198
9610
  .sm\:cetec-chip__mainContent--after_true {
9199
9611
  padding-inline-end: var(--main-slot-side-padding);
9200
- }
9201
- .sm\:cetec-datePicker__input--size_sm {
9202
- padding-block: var(--cetec-spacing-0);
9203
- padding-inline: var(--cetec-spacing-8);
9204
- font-size: var(--cetec-font-sizes-14);
9205
- }
9206
- .sm\:cetec-datePicker__input--size_md {
9207
- padding-block: var(--cetec-spacing-3);
9208
- padding-inline: var(--cetec-spacing-10);
9209
- font-size: var(--cetec-font-sizes-16);
9210
- }
9211
- .sm\:cetec-datePicker__input--size_lg {
9212
- padding-block: var(--cetec-spacing-7);
9213
- padding-inline: var(--cetec-spacing-12);
9214
- font-size: var(--cetec-font-sizes-16);
9215
- }
9216
- .sm\:cetec-datePicker__input--size_xl {
9217
- padding-block: var(--cetec-spacing-9);
9218
- padding-inline: var(--cetec-spacing-16);
9219
- font-size: var(--cetec-font-sizes-20);
9220
9612
  }
9221
9613
  .sm\:cetec-formField__labelWrapper--size_sm .cetec-label {
9222
9614
  font-size: var(--cetec-font-sizes-14);
@@ -9705,6 +10097,68 @@
9705
10097
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
9706
10098
  color: var(--cetec-colors-text);
9707
10099
  font-size: var(--cetec-font-sizes-20);
10100
+ }
10101
+ .sm\:cetec-segmentedFields__container--size_sm {
10102
+ --input-py: var(--cetec-sizes-0);
10103
+ --input-px: var(--cetec-sizes-8);
10104
+ --slot-size: var(--cetec-sizes-16);
10105
+ --slot-px: var(--cetec-sizes-4);
10106
+ }
10107
+ .sm\:cetec-segmentedFields__container--size_md {
10108
+ --input-py: var(--cetec-sizes-3);
10109
+ --input-px: var(--cetec-sizes-10);
10110
+ --slot-size: var(--cetec-sizes-20);
10111
+ --slot-px: var(--cetec-sizes-6);
10112
+ }
10113
+ .sm\:cetec-segmentedFields__container--size_lg {
10114
+ --input-py: var(--cetec-sizes-7);
10115
+ --input-px: var(--cetec-sizes-12);
10116
+ --slot-size: var(--cetec-sizes-24);
10117
+ --slot-px: var(--cetec-sizes-8);
10118
+ }
10119
+ .sm\:cetec-segmentedFields__container--size_xl {
10120
+ --input-py: var(--cetec-sizes-9);
10121
+ --input-px: var(--cetec-sizes-16);
10122
+ --slot-size: var(--cetec-sizes-28);
10123
+ --slot-px: var(--cetec-sizes-10);
10124
+ }
10125
+ .sm\:cetec-segmentedFields__container--field_date {
10126
+ min-width: var(--cetec-sizes-128);
10127
+ }
10128
+ .sm\:cetec-segmentedFields__container--field_time {
10129
+ min-width: var(--cetec-sizes-104);
10130
+ }
10131
+ .sm\:cetec-segmentedFields__container--field_dateTime {
10132
+ min-width: var(--cetec-sizes-216);
10133
+ }
10134
+ .sm\:cetec-segmentedFields__container--range_date {
10135
+ min-width: var(--cetec-sizes-248);
10136
+ }
10137
+ .sm\:cetec-segmentedFields__container--range_time {
10138
+ min-width: var(--cetec-sizes-200);
10139
+ }
10140
+ .sm\:cetec-segmentedFields__container--before_true {
10141
+ padding-inline-start: var(--cetec-spacing-0);
10142
+ }
10143
+ .sm\:cetec-segmentedFields__buttonSlot--before_true button {
10144
+ border-top-right-radius: var(--cetec-radii-0);
10145
+ border-bottom-right-radius: var(--cetec-radii-0);
10146
+ }
10147
+ .sm\:cetec-segmentedFields__container--after_true {
10148
+ padding-inline-end: var(--cetec-spacing-0);
10149
+ }
10150
+ .sm\:cetec-segmentedFields__buttonSlot--after_true button {
10151
+ border-top-left-radius: var(--cetec-radii-0);
10152
+ border-bottom-left-radius: var(--cetec-radii-0);
10153
+ }
10154
+ .sm\:cetec-segmentedInputs__root--size_sm {
10155
+ font-size: var(--cetec-font-sizes-14);
10156
+ }
10157
+ .sm\:cetec-segmentedInputs__root--size_md,.sm\:cetec-segmentedInputs__root--size_lg {
10158
+ font-size: var(--cetec-font-sizes-16);
10159
+ }
10160
+ .sm\:cetec-segmentedInputs__root--size_xl {
10161
+ font-size: var(--cetec-font-sizes-20);
9708
10162
  }
9709
10163
  .sm\:cetec-textInput__container--size_sm {
9710
10164
  --input-py: var(--cetec-sizes-0);
@@ -9751,26 +10205,6 @@
9751
10205
  .sm\:cetec-textInput__buttonSlot--after_true button {
9752
10206
  border-top-left-radius: var(--cetec-radii-0);
9753
10207
  border-bottom-left-radius: var(--cetec-radii-0);
9754
- }
9755
- .sm\:cetec-timePicker__input--size_sm {
9756
- padding-block: var(--cetec-spacing-0);
9757
- padding-inline: var(--cetec-spacing-8);
9758
- font-size: var(--cetec-font-sizes-14);
9759
- }
9760
- .sm\:cetec-timePicker__input--size_md {
9761
- padding-block: var(--cetec-spacing-3);
9762
- padding-inline: var(--cetec-spacing-10);
9763
- font-size: var(--cetec-font-sizes-16);
9764
- }
9765
- .sm\:cetec-timePicker__input--size_lg {
9766
- padding-block: var(--cetec-spacing-7);
9767
- padding-inline: var(--cetec-spacing-12);
9768
- font-size: var(--cetec-font-sizes-16);
9769
- }
9770
- .sm\:cetec-timePicker__input--size_xl {
9771
- padding-block: var(--cetec-spacing-9);
9772
- padding-inline: var(--cetec-spacing-16);
9773
- font-size: var(--cetec-font-sizes-20);
9774
10208
  }
9775
10209
  .sm\:cetec-tooltip__tooltipContent--size_sm {
9776
10210
  padding-block: var(--cetec-spacing-2);
@@ -9815,6 +10249,42 @@
9815
10249
  height: var(--cetec-sizes-28);
9816
10250
  width: var(--cetec-sizes-28);
9817
10251
  min-height: var(--cetec-sizes-28);
10252
+ }
10253
+ .md\:cetec-autocomplete__root--size_sm {
10254
+ --control-py: var(--cetec-sizes-0);
10255
+ --control-px: var(--cetec-sizes-8);
10256
+ --control-fs: var(--cetec-sizes-14);
10257
+ --control-min-height: var(--cetec-sizes-24);
10258
+ --value-gap: var(--cetec-sizes-3);
10259
+ --input-min-width: var(--cetec-sizes-64);
10260
+ --loading-size: var(--cetec-sizes-16);
10261
+ }
10262
+ .md\:cetec-autocomplete__root--size_md {
10263
+ --control-py: var(--cetec-sizes-3);
10264
+ --control-px: var(--cetec-sizes-10);
10265
+ --control-fs: var(--cetec-sizes-16);
10266
+ --control-min-height: var(--cetec-sizes-32);
10267
+ --value-gap: var(--cetec-sizes-4);
10268
+ --input-min-width: var(--cetec-sizes-80);
10269
+ --loading-size: var(--cetec-sizes-20);
10270
+ }
10271
+ .md\:cetec-autocomplete__root--size_lg {
10272
+ --control-py: var(--cetec-sizes-7);
10273
+ --control-px: var(--cetec-sizes-12);
10274
+ --control-fs: var(--cetec-sizes-16);
10275
+ --control-min-height: var(--cetec-sizes-40);
10276
+ --value-gap: var(--cetec-sizes-5);
10277
+ --input-min-width: var(--cetec-sizes-96);
10278
+ --loading-size: var(--cetec-sizes-20);
10279
+ }
10280
+ .md\:cetec-autocomplete__root--size_xl {
10281
+ --control-py: var(--cetec-sizes-9);
10282
+ --control-px: var(--cetec-sizes-16);
10283
+ --control-fs: var(--cetec-sizes-20);
10284
+ --control-min-height: var(--cetec-sizes-48);
10285
+ --value-gap: var(--cetec-sizes-6);
10286
+ --input-min-width: var(--cetec-sizes-112);
10287
+ --loading-size: var(--cetec-sizes-24);
9818
10288
  }
9819
10289
  .md\:cetec-avatar__root--size_sm {
9820
10290
  width: var(--cetec-sizes-16);
@@ -10324,26 +10794,6 @@
10324
10794
  }
10325
10795
  .md\:cetec-chip__mainContent--after_true {
10326
10796
  padding-inline-end: var(--main-slot-side-padding);
10327
- }
10328
- .md\:cetec-datePicker__input--size_sm {
10329
- padding-block: var(--cetec-spacing-0);
10330
- padding-inline: var(--cetec-spacing-8);
10331
- font-size: var(--cetec-font-sizes-14);
10332
- }
10333
- .md\:cetec-datePicker__input--size_md {
10334
- padding-block: var(--cetec-spacing-3);
10335
- padding-inline: var(--cetec-spacing-10);
10336
- font-size: var(--cetec-font-sizes-16);
10337
- }
10338
- .md\:cetec-datePicker__input--size_lg {
10339
- padding-block: var(--cetec-spacing-7);
10340
- padding-inline: var(--cetec-spacing-12);
10341
- font-size: var(--cetec-font-sizes-16);
10342
- }
10343
- .md\:cetec-datePicker__input--size_xl {
10344
- padding-block: var(--cetec-spacing-9);
10345
- padding-inline: var(--cetec-spacing-16);
10346
- font-size: var(--cetec-font-sizes-20);
10347
10797
  }
10348
10798
  .md\:cetec-formField__labelWrapper--size_sm .cetec-label {
10349
10799
  font-size: var(--cetec-font-sizes-14);
@@ -10832,6 +11282,68 @@
10832
11282
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
10833
11283
  color: var(--cetec-colors-text);
10834
11284
  font-size: var(--cetec-font-sizes-20);
11285
+ }
11286
+ .md\:cetec-segmentedFields__container--size_sm {
11287
+ --input-py: var(--cetec-sizes-0);
11288
+ --input-px: var(--cetec-sizes-8);
11289
+ --slot-size: var(--cetec-sizes-16);
11290
+ --slot-px: var(--cetec-sizes-4);
11291
+ }
11292
+ .md\:cetec-segmentedFields__container--size_md {
11293
+ --input-py: var(--cetec-sizes-3);
11294
+ --input-px: var(--cetec-sizes-10);
11295
+ --slot-size: var(--cetec-sizes-20);
11296
+ --slot-px: var(--cetec-sizes-6);
11297
+ }
11298
+ .md\:cetec-segmentedFields__container--size_lg {
11299
+ --input-py: var(--cetec-sizes-7);
11300
+ --input-px: var(--cetec-sizes-12);
11301
+ --slot-size: var(--cetec-sizes-24);
11302
+ --slot-px: var(--cetec-sizes-8);
11303
+ }
11304
+ .md\:cetec-segmentedFields__container--size_xl {
11305
+ --input-py: var(--cetec-sizes-9);
11306
+ --input-px: var(--cetec-sizes-16);
11307
+ --slot-size: var(--cetec-sizes-28);
11308
+ --slot-px: var(--cetec-sizes-10);
11309
+ }
11310
+ .md\:cetec-segmentedFields__container--field_date {
11311
+ min-width: var(--cetec-sizes-128);
11312
+ }
11313
+ .md\:cetec-segmentedFields__container--field_time {
11314
+ min-width: var(--cetec-sizes-104);
11315
+ }
11316
+ .md\:cetec-segmentedFields__container--field_dateTime {
11317
+ min-width: var(--cetec-sizes-216);
11318
+ }
11319
+ .md\:cetec-segmentedFields__container--range_date {
11320
+ min-width: var(--cetec-sizes-248);
11321
+ }
11322
+ .md\:cetec-segmentedFields__container--range_time {
11323
+ min-width: var(--cetec-sizes-200);
11324
+ }
11325
+ .md\:cetec-segmentedFields__container--before_true {
11326
+ padding-inline-start: var(--cetec-spacing-0);
11327
+ }
11328
+ .md\:cetec-segmentedFields__buttonSlot--before_true button {
11329
+ border-top-right-radius: var(--cetec-radii-0);
11330
+ border-bottom-right-radius: var(--cetec-radii-0);
11331
+ }
11332
+ .md\:cetec-segmentedFields__container--after_true {
11333
+ padding-inline-end: var(--cetec-spacing-0);
11334
+ }
11335
+ .md\:cetec-segmentedFields__buttonSlot--after_true button {
11336
+ border-top-left-radius: var(--cetec-radii-0);
11337
+ border-bottom-left-radius: var(--cetec-radii-0);
11338
+ }
11339
+ .md\:cetec-segmentedInputs__root--size_sm {
11340
+ font-size: var(--cetec-font-sizes-14);
11341
+ }
11342
+ .md\:cetec-segmentedInputs__root--size_md,.md\:cetec-segmentedInputs__root--size_lg {
11343
+ font-size: var(--cetec-font-sizes-16);
11344
+ }
11345
+ .md\:cetec-segmentedInputs__root--size_xl {
11346
+ font-size: var(--cetec-font-sizes-20);
10835
11347
  }
10836
11348
  .md\:cetec-textInput__container--size_sm {
10837
11349
  --input-py: var(--cetec-sizes-0);
@@ -10878,26 +11390,6 @@
10878
11390
  .md\:cetec-textInput__buttonSlot--after_true button {
10879
11391
  border-top-left-radius: var(--cetec-radii-0);
10880
11392
  border-bottom-left-radius: var(--cetec-radii-0);
10881
- }
10882
- .md\:cetec-timePicker__input--size_sm {
10883
- padding-block: var(--cetec-spacing-0);
10884
- padding-inline: var(--cetec-spacing-8);
10885
- font-size: var(--cetec-font-sizes-14);
10886
- }
10887
- .md\:cetec-timePicker__input--size_md {
10888
- padding-block: var(--cetec-spacing-3);
10889
- padding-inline: var(--cetec-spacing-10);
10890
- font-size: var(--cetec-font-sizes-16);
10891
- }
10892
- .md\:cetec-timePicker__input--size_lg {
10893
- padding-block: var(--cetec-spacing-7);
10894
- padding-inline: var(--cetec-spacing-12);
10895
- font-size: var(--cetec-font-sizes-16);
10896
- }
10897
- .md\:cetec-timePicker__input--size_xl {
10898
- padding-block: var(--cetec-spacing-9);
10899
- padding-inline: var(--cetec-spacing-16);
10900
- font-size: var(--cetec-font-sizes-20);
10901
11393
  }
10902
11394
  .md\:cetec-tooltip__tooltipContent--size_sm {
10903
11395
  padding-block: var(--cetec-spacing-2);
@@ -10942,6 +11434,42 @@
10942
11434
  height: var(--cetec-sizes-28);
10943
11435
  width: var(--cetec-sizes-28);
10944
11436
  min-height: var(--cetec-sizes-28);
11437
+ }
11438
+ .lg\:cetec-autocomplete__root--size_sm {
11439
+ --control-py: var(--cetec-sizes-0);
11440
+ --control-px: var(--cetec-sizes-8);
11441
+ --control-fs: var(--cetec-sizes-14);
11442
+ --control-min-height: var(--cetec-sizes-24);
11443
+ --value-gap: var(--cetec-sizes-3);
11444
+ --input-min-width: var(--cetec-sizes-64);
11445
+ --loading-size: var(--cetec-sizes-16);
11446
+ }
11447
+ .lg\:cetec-autocomplete__root--size_md {
11448
+ --control-py: var(--cetec-sizes-3);
11449
+ --control-px: var(--cetec-sizes-10);
11450
+ --control-fs: var(--cetec-sizes-16);
11451
+ --control-min-height: var(--cetec-sizes-32);
11452
+ --value-gap: var(--cetec-sizes-4);
11453
+ --input-min-width: var(--cetec-sizes-80);
11454
+ --loading-size: var(--cetec-sizes-20);
11455
+ }
11456
+ .lg\:cetec-autocomplete__root--size_lg {
11457
+ --control-py: var(--cetec-sizes-7);
11458
+ --control-px: var(--cetec-sizes-12);
11459
+ --control-fs: var(--cetec-sizes-16);
11460
+ --control-min-height: var(--cetec-sizes-40);
11461
+ --value-gap: var(--cetec-sizes-5);
11462
+ --input-min-width: var(--cetec-sizes-96);
11463
+ --loading-size: var(--cetec-sizes-20);
11464
+ }
11465
+ .lg\:cetec-autocomplete__root--size_xl {
11466
+ --control-py: var(--cetec-sizes-9);
11467
+ --control-px: var(--cetec-sizes-16);
11468
+ --control-fs: var(--cetec-sizes-20);
11469
+ --control-min-height: var(--cetec-sizes-48);
11470
+ --value-gap: var(--cetec-sizes-6);
11471
+ --input-min-width: var(--cetec-sizes-112);
11472
+ --loading-size: var(--cetec-sizes-24);
10945
11473
  }
10946
11474
  .lg\:cetec-avatar__root--size_sm {
10947
11475
  width: var(--cetec-sizes-16);
@@ -11444,33 +11972,13 @@
11444
11972
  --main-fs: var(--cetec-sizes-20);
11445
11973
  --main-slot-side-padding: var(--cetec-sizes-4);
11446
11974
  --slot-size: var(--cetec-sizes-28);
11447
- --slot-px: var(--cetec-sizes-2);
11448
- }
11449
- .lg\:cetec-chip__mainContent--before_true {
11450
- padding-inline-start: var(--main-slot-side-padding);
11451
- }
11452
- .lg\:cetec-chip__mainContent--after_true {
11453
- padding-inline-end: var(--main-slot-side-padding);
11454
- }
11455
- .lg\:cetec-datePicker__input--size_sm {
11456
- padding-block: var(--cetec-spacing-0);
11457
- padding-inline: var(--cetec-spacing-8);
11458
- font-size: var(--cetec-font-sizes-14);
11459
- }
11460
- .lg\:cetec-datePicker__input--size_md {
11461
- padding-block: var(--cetec-spacing-3);
11462
- padding-inline: var(--cetec-spacing-10);
11463
- font-size: var(--cetec-font-sizes-16);
11975
+ --slot-px: var(--cetec-sizes-2);
11464
11976
  }
11465
- .lg\:cetec-datePicker__input--size_lg {
11466
- padding-block: var(--cetec-spacing-7);
11467
- padding-inline: var(--cetec-spacing-12);
11468
- font-size: var(--cetec-font-sizes-16);
11977
+ .lg\:cetec-chip__mainContent--before_true {
11978
+ padding-inline-start: var(--main-slot-side-padding);
11469
11979
  }
11470
- .lg\:cetec-datePicker__input--size_xl {
11471
- padding-block: var(--cetec-spacing-9);
11472
- padding-inline: var(--cetec-spacing-16);
11473
- font-size: var(--cetec-font-sizes-20);
11980
+ .lg\:cetec-chip__mainContent--after_true {
11981
+ padding-inline-end: var(--main-slot-side-padding);
11474
11982
  }
11475
11983
  .lg\:cetec-formField__labelWrapper--size_sm .cetec-label {
11476
11984
  font-size: var(--cetec-font-sizes-14);
@@ -11959,6 +12467,68 @@
11959
12467
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
11960
12468
  color: var(--cetec-colors-text);
11961
12469
  font-size: var(--cetec-font-sizes-20);
12470
+ }
12471
+ .lg\:cetec-segmentedFields__container--size_sm {
12472
+ --input-py: var(--cetec-sizes-0);
12473
+ --input-px: var(--cetec-sizes-8);
12474
+ --slot-size: var(--cetec-sizes-16);
12475
+ --slot-px: var(--cetec-sizes-4);
12476
+ }
12477
+ .lg\:cetec-segmentedFields__container--size_md {
12478
+ --input-py: var(--cetec-sizes-3);
12479
+ --input-px: var(--cetec-sizes-10);
12480
+ --slot-size: var(--cetec-sizes-20);
12481
+ --slot-px: var(--cetec-sizes-6);
12482
+ }
12483
+ .lg\:cetec-segmentedFields__container--size_lg {
12484
+ --input-py: var(--cetec-sizes-7);
12485
+ --input-px: var(--cetec-sizes-12);
12486
+ --slot-size: var(--cetec-sizes-24);
12487
+ --slot-px: var(--cetec-sizes-8);
12488
+ }
12489
+ .lg\:cetec-segmentedFields__container--size_xl {
12490
+ --input-py: var(--cetec-sizes-9);
12491
+ --input-px: var(--cetec-sizes-16);
12492
+ --slot-size: var(--cetec-sizes-28);
12493
+ --slot-px: var(--cetec-sizes-10);
12494
+ }
12495
+ .lg\:cetec-segmentedFields__container--field_date {
12496
+ min-width: var(--cetec-sizes-128);
12497
+ }
12498
+ .lg\:cetec-segmentedFields__container--field_time {
12499
+ min-width: var(--cetec-sizes-104);
12500
+ }
12501
+ .lg\:cetec-segmentedFields__container--field_dateTime {
12502
+ min-width: var(--cetec-sizes-216);
12503
+ }
12504
+ .lg\:cetec-segmentedFields__container--range_date {
12505
+ min-width: var(--cetec-sizes-248);
12506
+ }
12507
+ .lg\:cetec-segmentedFields__container--range_time {
12508
+ min-width: var(--cetec-sizes-200);
12509
+ }
12510
+ .lg\:cetec-segmentedFields__container--before_true {
12511
+ padding-inline-start: var(--cetec-spacing-0);
12512
+ }
12513
+ .lg\:cetec-segmentedFields__buttonSlot--before_true button {
12514
+ border-top-right-radius: var(--cetec-radii-0);
12515
+ border-bottom-right-radius: var(--cetec-radii-0);
12516
+ }
12517
+ .lg\:cetec-segmentedFields__container--after_true {
12518
+ padding-inline-end: var(--cetec-spacing-0);
12519
+ }
12520
+ .lg\:cetec-segmentedFields__buttonSlot--after_true button {
12521
+ border-top-left-radius: var(--cetec-radii-0);
12522
+ border-bottom-left-radius: var(--cetec-radii-0);
12523
+ }
12524
+ .lg\:cetec-segmentedInputs__root--size_sm {
12525
+ font-size: var(--cetec-font-sizes-14);
12526
+ }
12527
+ .lg\:cetec-segmentedInputs__root--size_md,.lg\:cetec-segmentedInputs__root--size_lg {
12528
+ font-size: var(--cetec-font-sizes-16);
12529
+ }
12530
+ .lg\:cetec-segmentedInputs__root--size_xl {
12531
+ font-size: var(--cetec-font-sizes-20);
11962
12532
  }
11963
12533
  .lg\:cetec-textInput__container--size_sm {
11964
12534
  --input-py: var(--cetec-sizes-0);
@@ -12005,26 +12575,6 @@
12005
12575
  .lg\:cetec-textInput__buttonSlot--after_true button {
12006
12576
  border-top-left-radius: var(--cetec-radii-0);
12007
12577
  border-bottom-left-radius: var(--cetec-radii-0);
12008
- }
12009
- .lg\:cetec-timePicker__input--size_sm {
12010
- padding-block: var(--cetec-spacing-0);
12011
- padding-inline: var(--cetec-spacing-8);
12012
- font-size: var(--cetec-font-sizes-14);
12013
- }
12014
- .lg\:cetec-timePicker__input--size_md {
12015
- padding-block: var(--cetec-spacing-3);
12016
- padding-inline: var(--cetec-spacing-10);
12017
- font-size: var(--cetec-font-sizes-16);
12018
- }
12019
- .lg\:cetec-timePicker__input--size_lg {
12020
- padding-block: var(--cetec-spacing-7);
12021
- padding-inline: var(--cetec-spacing-12);
12022
- font-size: var(--cetec-font-sizes-16);
12023
- }
12024
- .lg\:cetec-timePicker__input--size_xl {
12025
- padding-block: var(--cetec-spacing-9);
12026
- padding-inline: var(--cetec-spacing-16);
12027
- font-size: var(--cetec-font-sizes-20);
12028
12578
  }
12029
12579
  .lg\:cetec-tooltip__tooltipContent--size_sm {
12030
12580
  padding-block: var(--cetec-spacing-2);
@@ -12069,6 +12619,42 @@
12069
12619
  height: var(--cetec-sizes-28);
12070
12620
  width: var(--cetec-sizes-28);
12071
12621
  min-height: var(--cetec-sizes-28);
12622
+ }
12623
+ .xl\:cetec-autocomplete__root--size_sm {
12624
+ --control-py: var(--cetec-sizes-0);
12625
+ --control-px: var(--cetec-sizes-8);
12626
+ --control-fs: var(--cetec-sizes-14);
12627
+ --control-min-height: var(--cetec-sizes-24);
12628
+ --value-gap: var(--cetec-sizes-3);
12629
+ --input-min-width: var(--cetec-sizes-64);
12630
+ --loading-size: var(--cetec-sizes-16);
12631
+ }
12632
+ .xl\:cetec-autocomplete__root--size_md {
12633
+ --control-py: var(--cetec-sizes-3);
12634
+ --control-px: var(--cetec-sizes-10);
12635
+ --control-fs: var(--cetec-sizes-16);
12636
+ --control-min-height: var(--cetec-sizes-32);
12637
+ --value-gap: var(--cetec-sizes-4);
12638
+ --input-min-width: var(--cetec-sizes-80);
12639
+ --loading-size: var(--cetec-sizes-20);
12640
+ }
12641
+ .xl\:cetec-autocomplete__root--size_lg {
12642
+ --control-py: var(--cetec-sizes-7);
12643
+ --control-px: var(--cetec-sizes-12);
12644
+ --control-fs: var(--cetec-sizes-16);
12645
+ --control-min-height: var(--cetec-sizes-40);
12646
+ --value-gap: var(--cetec-sizes-5);
12647
+ --input-min-width: var(--cetec-sizes-96);
12648
+ --loading-size: var(--cetec-sizes-20);
12649
+ }
12650
+ .xl\:cetec-autocomplete__root--size_xl {
12651
+ --control-py: var(--cetec-sizes-9);
12652
+ --control-px: var(--cetec-sizes-16);
12653
+ --control-fs: var(--cetec-sizes-20);
12654
+ --control-min-height: var(--cetec-sizes-48);
12655
+ --value-gap: var(--cetec-sizes-6);
12656
+ --input-min-width: var(--cetec-sizes-112);
12657
+ --loading-size: var(--cetec-sizes-24);
12072
12658
  }
12073
12659
  .xl\:cetec-avatar__root--size_sm {
12074
12660
  width: var(--cetec-sizes-16);
@@ -12578,26 +13164,6 @@
12578
13164
  }
12579
13165
  .xl\:cetec-chip__mainContent--after_true {
12580
13166
  padding-inline-end: var(--main-slot-side-padding);
12581
- }
12582
- .xl\:cetec-datePicker__input--size_sm {
12583
- padding-block: var(--cetec-spacing-0);
12584
- padding-inline: var(--cetec-spacing-8);
12585
- font-size: var(--cetec-font-sizes-14);
12586
- }
12587
- .xl\:cetec-datePicker__input--size_md {
12588
- padding-block: var(--cetec-spacing-3);
12589
- padding-inline: var(--cetec-spacing-10);
12590
- font-size: var(--cetec-font-sizes-16);
12591
- }
12592
- .xl\:cetec-datePicker__input--size_lg {
12593
- padding-block: var(--cetec-spacing-7);
12594
- padding-inline: var(--cetec-spacing-12);
12595
- font-size: var(--cetec-font-sizes-16);
12596
- }
12597
- .xl\:cetec-datePicker__input--size_xl {
12598
- padding-block: var(--cetec-spacing-9);
12599
- padding-inline: var(--cetec-spacing-16);
12600
- font-size: var(--cetec-font-sizes-20);
12601
13167
  }
12602
13168
  .xl\:cetec-formField__labelWrapper--size_sm .cetec-label {
12603
13169
  font-size: var(--cetec-font-sizes-14);
@@ -13086,6 +13652,68 @@
13086
13652
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
13087
13653
  color: var(--cetec-colors-text);
13088
13654
  font-size: var(--cetec-font-sizes-20);
13655
+ }
13656
+ .xl\:cetec-segmentedFields__container--size_sm {
13657
+ --input-py: var(--cetec-sizes-0);
13658
+ --input-px: var(--cetec-sizes-8);
13659
+ --slot-size: var(--cetec-sizes-16);
13660
+ --slot-px: var(--cetec-sizes-4);
13661
+ }
13662
+ .xl\:cetec-segmentedFields__container--size_md {
13663
+ --input-py: var(--cetec-sizes-3);
13664
+ --input-px: var(--cetec-sizes-10);
13665
+ --slot-size: var(--cetec-sizes-20);
13666
+ --slot-px: var(--cetec-sizes-6);
13667
+ }
13668
+ .xl\:cetec-segmentedFields__container--size_lg {
13669
+ --input-py: var(--cetec-sizes-7);
13670
+ --input-px: var(--cetec-sizes-12);
13671
+ --slot-size: var(--cetec-sizes-24);
13672
+ --slot-px: var(--cetec-sizes-8);
13673
+ }
13674
+ .xl\:cetec-segmentedFields__container--size_xl {
13675
+ --input-py: var(--cetec-sizes-9);
13676
+ --input-px: var(--cetec-sizes-16);
13677
+ --slot-size: var(--cetec-sizes-28);
13678
+ --slot-px: var(--cetec-sizes-10);
13679
+ }
13680
+ .xl\:cetec-segmentedFields__container--field_date {
13681
+ min-width: var(--cetec-sizes-128);
13682
+ }
13683
+ .xl\:cetec-segmentedFields__container--field_time {
13684
+ min-width: var(--cetec-sizes-104);
13685
+ }
13686
+ .xl\:cetec-segmentedFields__container--field_dateTime {
13687
+ min-width: var(--cetec-sizes-216);
13688
+ }
13689
+ .xl\:cetec-segmentedFields__container--range_date {
13690
+ min-width: var(--cetec-sizes-248);
13691
+ }
13692
+ .xl\:cetec-segmentedFields__container--range_time {
13693
+ min-width: var(--cetec-sizes-200);
13694
+ }
13695
+ .xl\:cetec-segmentedFields__container--before_true {
13696
+ padding-inline-start: var(--cetec-spacing-0);
13697
+ }
13698
+ .xl\:cetec-segmentedFields__buttonSlot--before_true button {
13699
+ border-top-right-radius: var(--cetec-radii-0);
13700
+ border-bottom-right-radius: var(--cetec-radii-0);
13701
+ }
13702
+ .xl\:cetec-segmentedFields__container--after_true {
13703
+ padding-inline-end: var(--cetec-spacing-0);
13704
+ }
13705
+ .xl\:cetec-segmentedFields__buttonSlot--after_true button {
13706
+ border-top-left-radius: var(--cetec-radii-0);
13707
+ border-bottom-left-radius: var(--cetec-radii-0);
13708
+ }
13709
+ .xl\:cetec-segmentedInputs__root--size_sm {
13710
+ font-size: var(--cetec-font-sizes-14);
13711
+ }
13712
+ .xl\:cetec-segmentedInputs__root--size_md,.xl\:cetec-segmentedInputs__root--size_lg {
13713
+ font-size: var(--cetec-font-sizes-16);
13714
+ }
13715
+ .xl\:cetec-segmentedInputs__root--size_xl {
13716
+ font-size: var(--cetec-font-sizes-20);
13089
13717
  }
13090
13718
  .xl\:cetec-textInput__container--size_sm {
13091
13719
  --input-py: var(--cetec-sizes-0);
@@ -13132,26 +13760,6 @@
13132
13760
  .xl\:cetec-textInput__buttonSlot--after_true button {
13133
13761
  border-top-left-radius: var(--cetec-radii-0);
13134
13762
  border-bottom-left-radius: var(--cetec-radii-0);
13135
- }
13136
- .xl\:cetec-timePicker__input--size_sm {
13137
- padding-block: var(--cetec-spacing-0);
13138
- padding-inline: var(--cetec-spacing-8);
13139
- font-size: var(--cetec-font-sizes-14);
13140
- }
13141
- .xl\:cetec-timePicker__input--size_md {
13142
- padding-block: var(--cetec-spacing-3);
13143
- padding-inline: var(--cetec-spacing-10);
13144
- font-size: var(--cetec-font-sizes-16);
13145
- }
13146
- .xl\:cetec-timePicker__input--size_lg {
13147
- padding-block: var(--cetec-spacing-7);
13148
- padding-inline: var(--cetec-spacing-12);
13149
- font-size: var(--cetec-font-sizes-16);
13150
- }
13151
- .xl\:cetec-timePicker__input--size_xl {
13152
- padding-block: var(--cetec-spacing-9);
13153
- padding-inline: var(--cetec-spacing-16);
13154
- font-size: var(--cetec-font-sizes-20);
13155
13763
  }
13156
13764
  .xl\:cetec-tooltip__tooltipContent--size_sm {
13157
13765
  padding-block: var(--cetec-spacing-2);
@@ -13196,6 +13804,42 @@
13196
13804
  height: var(--cetec-sizes-28);
13197
13805
  width: var(--cetec-sizes-28);
13198
13806
  min-height: var(--cetec-sizes-28);
13807
+ }
13808
+ .\32xl\:cetec-autocomplete__root--size_sm {
13809
+ --control-py: var(--cetec-sizes-0);
13810
+ --control-px: var(--cetec-sizes-8);
13811
+ --control-fs: var(--cetec-sizes-14);
13812
+ --control-min-height: var(--cetec-sizes-24);
13813
+ --value-gap: var(--cetec-sizes-3);
13814
+ --input-min-width: var(--cetec-sizes-64);
13815
+ --loading-size: var(--cetec-sizes-16);
13816
+ }
13817
+ .\32xl\:cetec-autocomplete__root--size_md {
13818
+ --control-py: var(--cetec-sizes-3);
13819
+ --control-px: var(--cetec-sizes-10);
13820
+ --control-fs: var(--cetec-sizes-16);
13821
+ --control-min-height: var(--cetec-sizes-32);
13822
+ --value-gap: var(--cetec-sizes-4);
13823
+ --input-min-width: var(--cetec-sizes-80);
13824
+ --loading-size: var(--cetec-sizes-20);
13825
+ }
13826
+ .\32xl\:cetec-autocomplete__root--size_lg {
13827
+ --control-py: var(--cetec-sizes-7);
13828
+ --control-px: var(--cetec-sizes-12);
13829
+ --control-fs: var(--cetec-sizes-16);
13830
+ --control-min-height: var(--cetec-sizes-40);
13831
+ --value-gap: var(--cetec-sizes-5);
13832
+ --input-min-width: var(--cetec-sizes-96);
13833
+ --loading-size: var(--cetec-sizes-20);
13834
+ }
13835
+ .\32xl\:cetec-autocomplete__root--size_xl {
13836
+ --control-py: var(--cetec-sizes-9);
13837
+ --control-px: var(--cetec-sizes-16);
13838
+ --control-fs: var(--cetec-sizes-20);
13839
+ --control-min-height: var(--cetec-sizes-48);
13840
+ --value-gap: var(--cetec-sizes-6);
13841
+ --input-min-width: var(--cetec-sizes-112);
13842
+ --loading-size: var(--cetec-sizes-24);
13199
13843
  }
13200
13844
  .\32xl\:cetec-avatar__root--size_sm {
13201
13845
  width: var(--cetec-sizes-16);
@@ -13705,26 +14349,6 @@
13705
14349
  }
13706
14350
  .\32xl\:cetec-chip__mainContent--after_true {
13707
14351
  padding-inline-end: var(--main-slot-side-padding);
13708
- }
13709
- .\32xl\:cetec-datePicker__input--size_sm {
13710
- padding-block: var(--cetec-spacing-0);
13711
- padding-inline: var(--cetec-spacing-8);
13712
- font-size: var(--cetec-font-sizes-14);
13713
- }
13714
- .\32xl\:cetec-datePicker__input--size_md {
13715
- padding-block: var(--cetec-spacing-3);
13716
- padding-inline: var(--cetec-spacing-10);
13717
- font-size: var(--cetec-font-sizes-16);
13718
- }
13719
- .\32xl\:cetec-datePicker__input--size_lg {
13720
- padding-block: var(--cetec-spacing-7);
13721
- padding-inline: var(--cetec-spacing-12);
13722
- font-size: var(--cetec-font-sizes-16);
13723
- }
13724
- .\32xl\:cetec-datePicker__input--size_xl {
13725
- padding-block: var(--cetec-spacing-9);
13726
- padding-inline: var(--cetec-spacing-16);
13727
- font-size: var(--cetec-font-sizes-20);
13728
14352
  }
13729
14353
  .\32xl\:cetec-formField__labelWrapper--size_sm .cetec-label {
13730
14354
  font-size: var(--cetec-font-sizes-14);
@@ -14213,6 +14837,68 @@
14213
14837
  font-variation-settings: "MONO" 0, "CRSV" 0, "CASL" 0, "slnt" 0;
14214
14838
  color: var(--cetec-colors-text);
14215
14839
  font-size: var(--cetec-font-sizes-20);
14840
+ }
14841
+ .\32xl\:cetec-segmentedFields__container--size_sm {
14842
+ --input-py: var(--cetec-sizes-0);
14843
+ --input-px: var(--cetec-sizes-8);
14844
+ --slot-size: var(--cetec-sizes-16);
14845
+ --slot-px: var(--cetec-sizes-4);
14846
+ }
14847
+ .\32xl\:cetec-segmentedFields__container--size_md {
14848
+ --input-py: var(--cetec-sizes-3);
14849
+ --input-px: var(--cetec-sizes-10);
14850
+ --slot-size: var(--cetec-sizes-20);
14851
+ --slot-px: var(--cetec-sizes-6);
14852
+ }
14853
+ .\32xl\:cetec-segmentedFields__container--size_lg {
14854
+ --input-py: var(--cetec-sizes-7);
14855
+ --input-px: var(--cetec-sizes-12);
14856
+ --slot-size: var(--cetec-sizes-24);
14857
+ --slot-px: var(--cetec-sizes-8);
14858
+ }
14859
+ .\32xl\:cetec-segmentedFields__container--size_xl {
14860
+ --input-py: var(--cetec-sizes-9);
14861
+ --input-px: var(--cetec-sizes-16);
14862
+ --slot-size: var(--cetec-sizes-28);
14863
+ --slot-px: var(--cetec-sizes-10);
14864
+ }
14865
+ .\32xl\:cetec-segmentedFields__container--field_date {
14866
+ min-width: var(--cetec-sizes-128);
14867
+ }
14868
+ .\32xl\:cetec-segmentedFields__container--field_time {
14869
+ min-width: var(--cetec-sizes-104);
14870
+ }
14871
+ .\32xl\:cetec-segmentedFields__container--field_dateTime {
14872
+ min-width: var(--cetec-sizes-216);
14873
+ }
14874
+ .\32xl\:cetec-segmentedFields__container--range_date {
14875
+ min-width: var(--cetec-sizes-248);
14876
+ }
14877
+ .\32xl\:cetec-segmentedFields__container--range_time {
14878
+ min-width: var(--cetec-sizes-200);
14879
+ }
14880
+ .\32xl\:cetec-segmentedFields__container--before_true {
14881
+ padding-inline-start: var(--cetec-spacing-0);
14882
+ }
14883
+ .\32xl\:cetec-segmentedFields__buttonSlot--before_true button {
14884
+ border-top-right-radius: var(--cetec-radii-0);
14885
+ border-bottom-right-radius: var(--cetec-radii-0);
14886
+ }
14887
+ .\32xl\:cetec-segmentedFields__container--after_true {
14888
+ padding-inline-end: var(--cetec-spacing-0);
14889
+ }
14890
+ .\32xl\:cetec-segmentedFields__buttonSlot--after_true button {
14891
+ border-top-left-radius: var(--cetec-radii-0);
14892
+ border-bottom-left-radius: var(--cetec-radii-0);
14893
+ }
14894
+ .\32xl\:cetec-segmentedInputs__root--size_sm {
14895
+ font-size: var(--cetec-font-sizes-14);
14896
+ }
14897
+ .\32xl\:cetec-segmentedInputs__root--size_md,.\32xl\:cetec-segmentedInputs__root--size_lg {
14898
+ font-size: var(--cetec-font-sizes-16);
14899
+ }
14900
+ .\32xl\:cetec-segmentedInputs__root--size_xl {
14901
+ font-size: var(--cetec-font-sizes-20);
14216
14902
  }
14217
14903
  .\32xl\:cetec-textInput__container--size_sm {
14218
14904
  --input-py: var(--cetec-sizes-0);
@@ -14259,26 +14945,6 @@
14259
14945
  .\32xl\:cetec-textInput__buttonSlot--after_true button {
14260
14946
  border-top-left-radius: var(--cetec-radii-0);
14261
14947
  border-bottom-left-radius: var(--cetec-radii-0);
14262
- }
14263
- .\32xl\:cetec-timePicker__input--size_sm {
14264
- padding-block: var(--cetec-spacing-0);
14265
- padding-inline: var(--cetec-spacing-8);
14266
- font-size: var(--cetec-font-sizes-14);
14267
- }
14268
- .\32xl\:cetec-timePicker__input--size_md {
14269
- padding-block: var(--cetec-spacing-3);
14270
- padding-inline: var(--cetec-spacing-10);
14271
- font-size: var(--cetec-font-sizes-16);
14272
- }
14273
- .\32xl\:cetec-timePicker__input--size_lg {
14274
- padding-block: var(--cetec-spacing-7);
14275
- padding-inline: var(--cetec-spacing-12);
14276
- font-size: var(--cetec-font-sizes-16);
14277
- }
14278
- .\32xl\:cetec-timePicker__input--size_xl {
14279
- padding-block: var(--cetec-spacing-9);
14280
- padding-inline: var(--cetec-spacing-16);
14281
- font-size: var(--cetec-font-sizes-20);
14282
14948
  }
14283
14949
  .\32xl\:cetec-tooltip__tooltipContent--size_sm {
14284
14950
  padding-block: var(--cetec-spacing-2);
@@ -18663,6 +19329,10 @@
18663
19329
  gap: var(--cetec-spacing-10);
18664
19330
  }
18665
19331
 
19332
+ .cetec-gap_12 {
19333
+ gap: var(--cetec-spacing-12);
19334
+ }
19335
+
18666
19336
  .cetec-gap_4 {
18667
19337
  gap: var(--cetec-spacing-4);
18668
19338
  }
@@ -18687,10 +19357,6 @@
18687
19357
  gap: var(--cetec-spacing-20);
18688
19358
  }
18689
19359
 
18690
- .cetec-gap_12 {
18691
- gap: var(--cetec-spacing-12);
18692
- }
18693
-
18694
19360
  .cetec-mx_16 {
18695
19361
  margin-inline: var(--cetec-spacing-16);
18696
19362
  }
@@ -18723,10 +19389,6 @@
18723
19389
  overflow: hidden;
18724
19390
  }
18725
19391
 
18726
- .cetec-flex_1 {
18727
- flex: 1 1 0%;
18728
- }
18729
-
18730
19392
  .cetec-grid-c_2_\/_3 {
18731
19393
  grid-column: 2 / 3;
18732
19394
  }
@@ -18771,6 +19433,14 @@
18771
19433
  gap: var(--cetec-spacing-3);
18772
19434
  }
18773
19435
 
19436
+ .cetec-flex_1 {
19437
+ flex: 1 1 0%;
19438
+ }
19439
+
19440
+ .cetec-flex_none {
19441
+ flex: none;
19442
+ }
19443
+
18774
19444
  .cetec-bd-c_blue\.60 {
18775
19445
  border-color: var(--cetec-colors-blue-60);
18776
19446
  }
@@ -26291,6 +26961,14 @@
26291
26961
  justify-content: flex-end;
26292
26962
  }
26293
26963
 
26964
+ .cetec-fontVariant_mono {
26965
+ font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
26966
+ }
26967
+
26968
+ .cetec-d_contents {
26969
+ display: contents;
26970
+ }
26971
+
26294
26972
  .cetec-jc_center {
26295
26973
  justify-content: center;
26296
26974
  }
@@ -26319,15 +26997,6 @@
26319
26997
  grid-template-columns: auto auto;
26320
26998
  }
26321
26999
 
26322
- .cetec-us_none {
26323
- -webkit-user-select: none;
26324
- user-select: none;
26325
- }
26326
-
26327
- .cetec-d_contents {
26328
- display: contents;
26329
- }
26330
-
26331
27000
  .cetec-fs_inherit {
26332
27001
  font-size: inherit;
26333
27002
  }
@@ -26600,10 +27269,6 @@
26600
27269
  font-variation-settings: "MONO" 0, "CRSV" 1, "CASL" 1, "slnt" -15;
26601
27270
  }
26602
27271
 
26603
- .cetec-fontVariant_mono {
26604
- font-variation-settings: "MONO" 1, "CRSV" 0, "CASL" 0, "slnt" 0;
26605
- }
26606
-
26607
27272
  .cetec-fontVariant_mono-italic {
26608
27273
  font-variation-settings: "MONO" 1, "CRSV" 1, "CASL" 0, "slnt" -15;
26609
27274
  }
@@ -29112,6 +29777,14 @@
29112
29777
  width: 100px;
29113
29778
  }
29114
29779
 
29780
+ .cetec-pt_16 {
29781
+ padding-top: var(--cetec-spacing-16);
29782
+ }
29783
+
29784
+ .cetec-pb_16 {
29785
+ padding-bottom: var(--cetec-spacing-16);
29786
+ }
29787
+
29115
29788
  .cetec-mb_4 {
29116
29789
  margin-bottom: var(--cetec-spacing-4);
29117
29790
  }