@vector-business-services/cristal-ds-web 0.13.0 → 0.14.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.
package/dist/index.css CHANGED
@@ -226,95 +226,103 @@
226
226
  color: var(--cr-color-icon-danger-base);
227
227
  }
228
228
 
229
- /* src/components/AutoComplete/AutoComplete.css */
230
- .cr-autocomplete__root {
231
- display: flex;
232
- }
233
- .cr-autocomplete__input {
234
- flex: 1;
229
+ /* src/components/lista.css */
230
+ .cr-lista {
235
231
  box-sizing: border-box;
236
- min-width: 0;
237
- outline: none;
238
- }
239
- .cr-autocomplete__input::placeholder {
240
- color: var(--cr-color-text-neutral-subtlest);
241
- opacity: 1;
242
- }
243
- .cr-field--disabled .cr-autocomplete__input {
244
- cursor: not-allowed;
245
- }
246
- .cr-autocomplete__loader {
247
- display: none;
248
- }
249
- .cr-autocomplete__panel {
250
- box-sizing: border-box;
251
- margin-top: var(--cr-spacing-spacing-3);
252
232
  padding: var(--cr-padding-padding-5);
253
233
  border-radius: var(--cr-radius-medium);
254
234
  background-color: var(--cr-color-fill-neutral-container);
255
- box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-neutral-base), var(--cr-elevation-gray-bottom-3);
235
+ color: var(--cr-color-text-neutral-base);
236
+ font-family: var(--cr-typography-body-small-14-regular-font-family);
237
+ font-size: var(--cr-typography-body-small-14-regular-font-size);
238
+ font-weight: var(--cr-typography-body-small-14-regular-font-weight);
239
+ line-height: var(--cr-typography-body-small-14-regular-line-height);
240
+ letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
256
241
  }
257
- .cr-autocomplete__panel[style*="transform-origin: bottom"] {
258
- margin-top: calc(-1 * var(--cr-spacing-spacing-3));
242
+ .cr-lista__itens {
243
+ margin: 0;
244
+ padding: 0;
245
+ list-style: none;
259
246
  }
260
- .cr-autocomplete__panel > :first-child {
261
- overflow: auto;
247
+ .cr-lista__rolagem {
248
+ overflow-y: auto;
262
249
  }
263
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar {
250
+ .cr-lista__rolagem::-webkit-scrollbar {
264
251
  width: 12px;
265
252
  }
266
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar-track,
267
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb {
253
+ .cr-lista__rolagem::-webkit-scrollbar-track,
254
+ .cr-lista__rolagem::-webkit-scrollbar-thumb {
268
255
  border-left: var(--cr-spacing-spacing-3) solid transparent;
269
256
  border-radius: 8px 4px 4px 8px / 4px;
270
257
  background-clip: padding-box;
271
258
  }
272
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar-track {
259
+ .cr-lista__rolagem::-webkit-scrollbar-track {
273
260
  background-color: var(--cr-color-fill-neutral-subtlest);
274
261
  }
275
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb {
262
+ .cr-lista__rolagem::-webkit-scrollbar-thumb {
276
263
  background-color: var(--cr-color-fill-neutral-subtle);
277
264
  }
278
- .cr-autocomplete__panel > :first-child::-webkit-scrollbar-thumb:hover {
265
+ .cr-lista__rolagem::-webkit-scrollbar-thumb:hover {
279
266
  background-color: var(--cr-color-fill-neutral-subtle-hover);
280
267
  }
281
268
  @supports not selector(::-webkit-scrollbar) {
282
- .cr-autocomplete__panel > :first-child {
269
+ .cr-lista__rolagem {
283
270
  scrollbar-width: thin;
284
271
  scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
285
272
  }
286
273
  }
287
- .cr-autocomplete__list {
288
- margin: 0;
289
- padding: 0;
290
- list-style: none;
291
- }
292
- .cr-autocomplete__item {
274
+ .cr-lista__item {
293
275
  display: flex;
294
276
  align-items: center;
295
- gap: var(--cr-spacing-spacing-4);
277
+ box-sizing: border-box;
296
278
  padding: var(--cr-padding-padding-4) var(--cr-padding-padding-5);
297
279
  border-radius: var(--cr-radius-x-small);
298
280
  background-color: var(--cr-color-fill-neutral-container);
299
- color: var(--cr-color-text-neutral-base);
300
- font-family: var(--cr-typography-body-small-14-regular-font-family);
301
- font-size: var(--cr-typography-body-small-14-regular-font-size);
302
- font-weight: var(--cr-typography-body-small-14-regular-font-weight);
303
- line-height: var(--cr-typography-body-small-14-regular-line-height);
304
- letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
305
281
  cursor: pointer;
306
282
  }
307
- .cr-autocomplete__item:hover {
283
+ .cr-lista__item:hover,
284
+ .cr-lista__item--focado {
308
285
  background-color: var(--cr-color-fill-neutral-container-hover);
309
286
  }
310
- .cr-autocomplete__item[data-p-highlight=true] {
311
- box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-brand-base);
312
- }
313
- .cr-autocomplete__item[aria-selected=true] {
287
+ .cr-lista__item--selecionado {
314
288
  background-color: var(--cr-color-fill-selected-subtlest);
315
289
  color: var(--cr-color-text-brand-base);
316
290
  }
317
291
 
292
+ /* src/components/AutoComplete/AutoComplete.css */
293
+ .cr-autocomplete__root {
294
+ display: flex;
295
+ }
296
+ .cr-autocomplete__input {
297
+ flex: 1;
298
+ box-sizing: border-box;
299
+ min-width: 0;
300
+ outline: none;
301
+ }
302
+ .cr-autocomplete__input::placeholder {
303
+ color: var(--cr-color-text-neutral-subtlest);
304
+ opacity: 1;
305
+ }
306
+ .cr-field--disabled .cr-autocomplete__input {
307
+ cursor: not-allowed;
308
+ }
309
+ .cr-autocomplete__loader {
310
+ display: none;
311
+ }
312
+ .cr-autocomplete__panel {
313
+ margin-top: var(--cr-spacing-spacing-3);
314
+ box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-neutral-base), var(--cr-elevation-gray-bottom-3);
315
+ }
316
+ .cr-autocomplete__panel[data-cr-lado=acima] {
317
+ margin-top: calc(-1 * var(--cr-spacing-spacing-3));
318
+ }
319
+ .cr-autocomplete__item {
320
+ gap: var(--cr-spacing-spacing-4);
321
+ }
322
+ .cr-autocomplete__item[data-p-highlight=true] {
323
+ box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-brand-base);
324
+ }
325
+
318
326
  /* src/components/Badge/Badge.css */
319
327
  .cr-badge {
320
328
  display: inline-flex;
@@ -521,6 +529,33 @@
521
529
  overflow-wrap: break-word;
522
530
  }
523
531
 
532
+ /* src/components/comum.css */
533
+ .cr-so-leitor {
534
+ position: absolute;
535
+ width: 1px;
536
+ height: 1px;
537
+ overflow: hidden;
538
+ clip-path: inset(50%);
539
+ white-space: nowrap;
540
+ }
541
+ .cr-rolagem-fina::-webkit-scrollbar {
542
+ width: 8px;
543
+ height: 8px;
544
+ }
545
+ .cr-rolagem-fina::-webkit-scrollbar-thumb {
546
+ border-radius: var(--cr-radius-full);
547
+ background-color: var(--cr-color-fill-neutral-subtle);
548
+ }
549
+ .cr-rolagem-fina::-webkit-scrollbar-thumb:hover {
550
+ background-color: var(--cr-color-fill-neutral-subtle-hover);
551
+ }
552
+ @supports not selector(::-webkit-scrollbar) {
553
+ .cr-rolagem-fina {
554
+ scrollbar-width: thin;
555
+ scrollbar-color: var(--cr-color-fill-neutral-subtle) transparent;
556
+ }
557
+ }
558
+
524
559
  /* src/components/Chart/Chart.css */
525
560
  .cr-chart {
526
561
  display: flex;
@@ -612,14 +647,6 @@
612
647
  height: 10px;
613
648
  border-radius: 2px;
614
649
  }
615
- .cr-chart__table {
616
- position: absolute;
617
- width: 1px;
618
- height: 1px;
619
- overflow: hidden;
620
- clip-path: inset(50%);
621
- white-space: nowrap;
622
- }
623
650
 
624
651
  /* src/components/Checkbox/Checkbox.css */
625
652
  .cr-checkbox {
@@ -665,7 +692,7 @@
665
692
  .cr-checkbox__icon {
666
693
  flex-shrink: 0;
667
694
  }
668
- .cr-checkbox__box[data-p-highlight=true],
695
+ .cr-checkbox__control--checked .cr-checkbox__box,
669
696
  .cr-checkbox--indeterminate .cr-checkbox__box {
670
697
  border-color: var(--cr-color-fill-brand-base);
671
698
  background-color: var(--cr-color-fill-brand-base);
@@ -680,7 +707,7 @@
680
707
  .cr-checkbox:not(.cr-checkbox--disabled):hover .cr-checkbox__box {
681
708
  border-color: var(--cr-color-stroke-neutral-bold-hover);
682
709
  }
683
- .cr-checkbox:not(.cr-checkbox--disabled):hover .cr-checkbox__box[data-p-highlight=true],
710
+ .cr-checkbox:not(.cr-checkbox--disabled):hover .cr-checkbox__control--checked .cr-checkbox__box,
684
711
  .cr-checkbox--indeterminate:not(.cr-checkbox--disabled):hover .cr-checkbox__box {
685
712
  border-color: var(--cr-color-fill-brand-base-hover);
686
713
  background-color: var(--cr-color-fill-brand-base-hover);
@@ -695,7 +722,7 @@
695
722
  .cr-checkbox--disabled .cr-checkbox__box {
696
723
  border-color: var(--cr-color-stroke-disabled-base);
697
724
  }
698
- .cr-checkbox--disabled .cr-checkbox__box[data-p-highlight=true],
725
+ .cr-checkbox--disabled .cr-checkbox__control--checked .cr-checkbox__box,
699
726
  .cr-checkbox--disabled.cr-checkbox--indeterminate .cr-checkbox__box {
700
727
  border-color: var(--cr-color-fill-disabled-base);
701
728
  background-color: var(--cr-color-fill-disabled-base);
@@ -720,14 +747,6 @@
720
747
  color: var(--cr-color-text-disabled-base);
721
748
  cursor: not-allowed;
722
749
  }
723
- .cr-checkbox__label--hidden {
724
- position: absolute;
725
- width: 1px;
726
- height: 1px;
727
- overflow: hidden;
728
- clip-path: inset(50%);
729
- white-space: nowrap;
730
- }
731
750
 
732
751
  /* src/components/Chip/Chip.css */
733
752
  .cr-chip {
@@ -1203,51 +1222,18 @@
1203
1222
  top: var(--cr-spacing-spacing-4);
1204
1223
  right: var(--cr-spacing-spacing-4);
1205
1224
  }
1206
- .cr-drawer__panel::-webkit-scrollbar,
1207
- .cr-drawer__body::-webkit-scrollbar {
1208
- width: 8px;
1209
- height: 8px;
1210
- }
1211
- .cr-drawer__panel::-webkit-scrollbar-thumb,
1212
- .cr-drawer__body::-webkit-scrollbar-thumb {
1213
- border-radius: var(--cr-radius-full);
1214
- background-color: var(--cr-color-fill-neutral-subtle);
1215
- }
1216
- .cr-drawer__panel::-webkit-scrollbar-thumb:hover,
1217
- .cr-drawer__body::-webkit-scrollbar-thumb:hover {
1218
- background-color: var(--cr-color-fill-neutral-subtle-hover);
1219
- }
1220
- @supports not selector(::-webkit-scrollbar) {
1221
- .cr-drawer__panel,
1222
- .cr-drawer__body {
1223
- scrollbar-width: thin;
1224
- scrollbar-color: var(--cr-color-fill-neutral-subtle) transparent;
1225
- }
1226
- }
1227
1225
 
1228
1226
  /* src/components/Menu/Menu.css */
1229
1227
  .cr-menu {
1230
- box-sizing: border-box;
1231
1228
  width: 320px;
1232
- padding: var(--cr-padding-padding-5);
1233
1229
  border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
1234
- border-radius: var(--cr-radius-medium);
1235
- background-color: var(--cr-color-fill-neutral-container);
1236
1230
  box-shadow: var(--cr-elevation-gray-bottom-3);
1237
- color: var(--cr-color-text-neutral-base);
1238
- font-family: var(--cr-typography-body-small-14-regular-font-family);
1239
- font-size: var(--cr-typography-body-small-14-regular-font-size);
1240
- font-weight: var(--cr-typography-body-small-14-regular-font-weight);
1241
- line-height: var(--cr-typography-body-small-14-regular-line-height);
1242
- letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
1243
1231
  }
1244
1232
  .cr-menu--popup {
1245
1233
  position: absolute;
1246
- }
1247
- .cr-menu--popup[style*="transform-origin: center top"] {
1248
1234
  margin-top: var(--cr-spacing-spacing-3);
1249
1235
  }
1250
- .cr-menu--popup[style*="transform-origin: center bottom"] {
1236
+ .cr-menu--popup[data-cr-lado=acima] {
1251
1237
  margin-top: calc(var(--cr-spacing-spacing-3) * -1);
1252
1238
  }
1253
1239
  .cr-menu__list {
@@ -1289,17 +1275,10 @@
1289
1275
  }
1290
1276
  }
1291
1277
  .cr-menu__action {
1292
- display: flex;
1293
- align-items: center;
1294
1278
  gap: var(--cr-spacing-spacing-4);
1295
- box-sizing: border-box;
1296
1279
  height: var(--cr-menu-item-height);
1297
- padding: var(--cr-padding-padding-4) var(--cr-padding-padding-5);
1298
- border-radius: var(--cr-radius-x-small);
1299
- background-color: var(--cr-color-fill-neutral-container);
1300
1280
  color: inherit;
1301
1281
  text-decoration: none;
1302
- cursor: pointer;
1303
1282
  }
1304
1283
  .cr-menu--compact .cr-menu__action {
1305
1284
  padding: var(--cr-padding-padding-3) var(--cr-padding-padding-5);
@@ -1332,11 +1311,11 @@
1332
1311
  .cr-menu__item--selected .cr-menu__icon {
1333
1312
  color: var(--cr-color-icon-brand-base);
1334
1313
  }
1335
- .cr-menu__item[data-p-disabled=true] .cr-menu__action {
1314
+ .cr-menu__item[aria-disabled=true] .cr-menu__action {
1336
1315
  color: var(--cr-color-text-disabled-base);
1337
1316
  cursor: not-allowed;
1338
1317
  }
1339
- .cr-menu__item[data-p-disabled=true]:hover .cr-menu__action {
1318
+ .cr-menu__item[aria-disabled=true]:hover .cr-menu__action {
1340
1319
  background-color: var(--cr-color-fill-neutral-container);
1341
1320
  }
1342
1321
  .cr-menu__loading {
@@ -1721,11 +1700,9 @@
1721
1700
  .cr-menu-principal--popup {
1722
1701
  position: absolute;
1723
1702
  max-height: min(672px, calc(100dvh - var(--cr-menu-principal-topo, 0px) - var(--cr-spacing-spacing-3) - var(--cr-padding-padding-8)));
1724
- }
1725
- .cr-menu-principal--popup[style*="transform-origin: center top"] {
1726
1703
  margin-top: var(--cr-spacing-spacing-3);
1727
1704
  }
1728
- .cr-menu-principal--popup[style*="transform-origin: center bottom"] {
1705
+ .cr-menu-principal--popup[data-cr-lado=acima] {
1729
1706
  margin-top: calc(var(--cr-spacing-spacing-3) * -1);
1730
1707
  }
1731
1708
  .cr-menu-principal__list {
@@ -1771,13 +1748,8 @@
1771
1748
  letter-spacing: var(--cr-typography-label-medium-12-medium-letter-spacing);
1772
1749
  }
1773
1750
  .cr-menu-principal__separator {
1774
- height: var(--cr-stroke-x-small);
1751
+ width: auto;
1775
1752
  margin: var(--cr-padding-padding-5) var(--cr-padding-padding-6);
1776
- background-image:
1777
- repeating-linear-gradient(
1778
- to right,
1779
- var(--cr-color-stroke-neutral-base) 0 2px,
1780
- transparent 2px 4px);
1781
1753
  }
1782
1754
  .cr-menu-principal__item {
1783
1755
  position: relative;
@@ -2070,23 +2042,6 @@
2070
2042
  padding: var(--cr-padding-padding-6);
2071
2043
  }
2072
2044
  }
2073
- .cr-modal__body::-webkit-scrollbar {
2074
- width: 8px;
2075
- height: 8px;
2076
- }
2077
- .cr-modal__body::-webkit-scrollbar-thumb {
2078
- border-radius: var(--cr-radius-full);
2079
- background-color: var(--cr-color-fill-neutral-subtle);
2080
- }
2081
- .cr-modal__body::-webkit-scrollbar-thumb:hover {
2082
- background-color: var(--cr-color-fill-neutral-subtle-hover);
2083
- }
2084
- @supports not selector(::-webkit-scrollbar) {
2085
- .cr-modal__body {
2086
- scrollbar-width: thin;
2087
- scrollbar-color: var(--cr-color-fill-neutral-subtle) transparent;
2088
- }
2089
- }
2090
2045
 
2091
2046
  /* src/components/MultiSelect/MultiSelect.css */
2092
2047
  .cr-multiselect .cr-multiselect__control {
@@ -2124,14 +2079,6 @@
2124
2079
  .cr-multiselect.cr-field--disabled .cr-field__control {
2125
2080
  border-color: var(--cr-color-stroke-disabled-base);
2126
2081
  }
2127
- .cr-multiselect__hidden {
2128
- position: absolute;
2129
- width: 1px;
2130
- height: 1px;
2131
- overflow: hidden;
2132
- clip-path: inset(50%);
2133
- white-space: nowrap;
2134
- }
2135
2082
  .cr-multiselect__hidden input {
2136
2083
  margin: 0;
2137
2084
  padding: 0;
@@ -2166,17 +2113,7 @@
2166
2113
  }
2167
2114
  .cr-multiselect__panel {
2168
2115
  position: absolute;
2169
- box-sizing: border-box;
2170
- padding: var(--cr-padding-padding-5);
2171
2116
  border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
2172
- border-radius: var(--cr-radius-medium);
2173
- background-color: var(--cr-color-fill-neutral-container);
2174
- color: var(--cr-color-text-neutral-base);
2175
- font-family: var(--cr-typography-body-small-14-regular-font-family);
2176
- font-size: var(--cr-typography-body-small-14-regular-font-size);
2177
- font-weight: var(--cr-typography-body-small-14-regular-font-weight);
2178
- line-height: var(--cr-typography-body-small-14-regular-line-height);
2179
- letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
2180
2117
  }
2181
2118
  .cr-multiselect__panel--normal {
2182
2119
  box-shadow: var(--cr-elevation-gray-bottom-4);
@@ -2238,50 +2175,17 @@
2238
2175
  flex-shrink: 0;
2239
2176
  font-size: 16px;
2240
2177
  }
2241
- .cr-multiselect__wrapper {
2242
- overflow: auto;
2243
- }
2244
- .cr-multiselect__wrapper::-webkit-scrollbar {
2245
- width: 12px;
2246
- }
2247
- .cr-multiselect__wrapper::-webkit-scrollbar-track,
2248
- .cr-multiselect__wrapper::-webkit-scrollbar-thumb {
2249
- border-left: var(--cr-spacing-spacing-3) solid transparent;
2250
- border-radius: 8px 4px 4px 8px / 4px;
2251
- background-clip: padding-box;
2252
- }
2253
- .cr-multiselect__wrapper::-webkit-scrollbar-track {
2254
- background-color: var(--cr-color-fill-neutral-subtlest);
2255
- }
2256
- .cr-multiselect__wrapper::-webkit-scrollbar-thumb {
2257
- background-color: var(--cr-color-fill-neutral-subtle);
2258
- }
2259
- .cr-multiselect__wrapper::-webkit-scrollbar-thumb:hover {
2260
- background-color: var(--cr-color-fill-neutral-subtle-hover);
2261
- }
2262
- @supports not selector(::-webkit-scrollbar) {
2263
- .cr-multiselect__wrapper {
2264
- scrollbar-width: thin;
2265
- scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
2266
- }
2267
- }
2268
- .cr-multiselect__list {
2269
- margin: 0;
2270
- padding: 0;
2271
- list-style: none;
2272
- }
2273
2178
  .cr-multiselect__item,
2179
+ .cr-multiselect__empty {
2180
+ gap: var(--cr-spacing-spacing-4);
2181
+ }
2274
2182
  .cr-multiselect__empty {
2275
2183
  display: flex;
2276
2184
  align-items: center;
2277
- gap: var(--cr-spacing-spacing-4);
2278
2185
  box-sizing: border-box;
2279
2186
  border-radius: var(--cr-radius-x-small);
2280
2187
  background-color: var(--cr-color-fill-neutral-container);
2281
2188
  }
2282
- .cr-multiselect__item {
2283
- cursor: pointer;
2284
- }
2285
2189
  .cr-multiselect__panel--normal .cr-multiselect__item,
2286
2190
  .cr-multiselect__panel--normal .cr-multiselect__empty {
2287
2191
  height: 40px;
@@ -2298,38 +2202,16 @@
2298
2202
  background-color: var(--cr-color-fill-neutral-subtlest);
2299
2203
  }
2300
2204
  .cr-multiselect__checkbox {
2301
- position: relative;
2302
2205
  display: inline-flex;
2303
- flex-shrink: 0;
2304
- width: 24px;
2305
- height: 24px;
2306
- }
2307
- .cr-multiselect__checkbox-input {
2308
- position: absolute;
2309
- inset: 0;
2310
- z-index: 1;
2311
- margin: 0;
2312
- opacity: 0;
2313
- cursor: pointer;
2314
2206
  }
2315
2207
  .cr-multiselect__checkbox-box {
2316
- display: inline-flex;
2317
- align-items: center;
2318
- justify-content: center;
2319
- box-sizing: border-box;
2320
- width: 100%;
2321
- height: 100%;
2322
- border: var(--cr-stroke-small) solid var(--cr-color-stroke-neutral-bold);
2323
- border-radius: var(--cr-radius-x-small);
2324
- background-color: var(--cr-color-fill-neutral-container);
2325
- color: var(--cr-color-icon-inverse-base);
2326
2208
  font-size: 16px;
2327
2209
  }
2328
- .cr-multiselect__item:hover .cr-multiselect__checkbox-box:not([data-p-highlight=true]),
2329
- .cr-multiselect__select-all:hover .cr-multiselect__checkbox-box:not([data-p-highlight=true]) {
2210
+ .cr-multiselect__item:hover .cr-multiselect__checkbox:not(:has(.cr-multiselect__checkbox-input:checked)) .cr-multiselect__checkbox-box,
2211
+ .cr-multiselect__select-all:hover .cr-multiselect__checkbox:not(:has(.cr-multiselect__checkbox-input:checked)) .cr-multiselect__checkbox-box {
2330
2212
  border-color: var(--cr-color-stroke-neutral-bolder);
2331
2213
  }
2332
- .cr-multiselect__checkbox-box[data-p-highlight=true] {
2214
+ .cr-multiselect__checkbox:has(.cr-multiselect__checkbox-input:checked) .cr-multiselect__checkbox-box {
2333
2215
  border-color: var(--cr-color-fill-brand-base);
2334
2216
  background-color: var(--cr-color-fill-brand-base);
2335
2217
  }
@@ -2530,14 +2412,6 @@
2530
2412
  .cr-select.cr-field--filled .cr-select__control--open {
2531
2413
  background-color: var(--cr-color-fill-neutral-container);
2532
2414
  }
2533
- .cr-select__hidden {
2534
- position: absolute;
2535
- width: 1px;
2536
- height: 1px;
2537
- overflow: hidden;
2538
- clip-path: inset(50%);
2539
- white-space: nowrap;
2540
- }
2541
2415
  .cr-select__value {
2542
2416
  flex: 1;
2543
2417
  min-width: 0;
@@ -2563,82 +2437,23 @@
2563
2437
  }
2564
2438
  .cr-select__panel {
2565
2439
  position: absolute;
2566
- box-sizing: border-box;
2567
- padding: var(--cr-padding-padding-5);
2440
+ margin-top: var(--cr-spacing-spacing-3);
2568
2441
  border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
2569
- border-radius: var(--cr-radius-medium);
2570
- background-color: var(--cr-color-fill-neutral-container);
2571
2442
  box-shadow: var(--cr-elevation-gray-bottom-3);
2572
- color: var(--cr-color-text-neutral-base);
2573
- font-family: var(--cr-typography-body-small-14-regular-font-family);
2574
- font-size: var(--cr-typography-body-small-14-regular-font-size);
2575
- font-weight: var(--cr-typography-body-small-14-regular-font-weight);
2576
- line-height: var(--cr-typography-body-small-14-regular-line-height);
2577
- letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
2578
- }
2579
- .cr-select__panel[style*="transform-origin: center top"] {
2580
- margin-top: var(--cr-spacing-spacing-3);
2581
2443
  }
2582
- .cr-select__panel[style*="transform-origin: center bottom"] {
2444
+ .cr-select__panel[data-cr-lado=acima] {
2583
2445
  margin-top: calc(var(--cr-spacing-spacing-3) * -1);
2584
2446
  }
2585
- .cr-select__wrapper {
2586
- overflow-y: auto;
2587
- }
2588
- .cr-select__wrapper::-webkit-scrollbar {
2589
- width: 12px;
2590
- }
2591
- .cr-select__wrapper::-webkit-scrollbar-track,
2592
- .cr-select__wrapper::-webkit-scrollbar-thumb {
2593
- border-left: var(--cr-spacing-spacing-3) solid transparent;
2594
- border-radius: 8px 4px 4px 8px / 4px;
2595
- background-clip: padding-box;
2596
- }
2597
- .cr-select__wrapper::-webkit-scrollbar-track {
2598
- background-color: var(--cr-color-fill-neutral-subtlest);
2599
- }
2600
- .cr-select__wrapper::-webkit-scrollbar-thumb {
2601
- background-color: var(--cr-color-fill-neutral-subtle);
2602
- }
2603
- .cr-select__wrapper::-webkit-scrollbar-thumb:hover {
2604
- background-color: var(--cr-color-fill-neutral-subtle-hover);
2605
- }
2606
- @supports not selector(::-webkit-scrollbar) {
2607
- .cr-select__wrapper {
2608
- scrollbar-width: thin;
2609
- scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
2610
- }
2611
- }
2612
- .cr-select__list {
2613
- margin: 0;
2614
- padding: 0;
2615
- list-style: none;
2616
- }
2617
2447
  .cr-select__item {
2618
- display: flex;
2619
- align-items: center;
2620
- box-sizing: border-box;
2621
2448
  height: 37px;
2622
- padding: var(--cr-padding-padding-4) var(--cr-padding-padding-5);
2623
2449
  overflow: hidden;
2624
- border-radius: var(--cr-radius-x-small);
2625
- background-color: var(--cr-color-fill-neutral-container);
2626
2450
  text-overflow: ellipsis;
2627
2451
  white-space: nowrap;
2628
- cursor: pointer;
2629
2452
  outline: none;
2630
2453
  }
2631
2454
  .cr-select__empty {
2632
2455
  cursor: default;
2633
2456
  }
2634
- .cr-select__item:hover,
2635
- .cr-select__item[data-p-focused=true] {
2636
- background-color: var(--cr-color-fill-neutral-container-hover);
2637
- }
2638
- .cr-select__item[data-p-highlight=true] {
2639
- background-color: var(--cr-color-fill-selected-subtlest);
2640
- color: var(--cr-color-text-brand-base);
2641
- }
2642
2457
 
2643
2458
  /* src/components/Paginator/Paginator.css */
2644
2459
  .cr-paginator {
@@ -2767,14 +2582,14 @@
2767
2582
  .cr-radio__icon {
2768
2583
  display: none;
2769
2584
  }
2770
- .cr-radio__control[data-p-checked=true] .cr-radio__box {
2585
+ .cr-radio__control--checked .cr-radio__box {
2771
2586
  border-width: 8px;
2772
2587
  border-color: var(--cr-color-stroke-brand-base);
2773
2588
  }
2774
2589
  .cr-radio:not(.cr-radio--disabled):hover .cr-radio__box {
2775
2590
  border-color: var(--cr-color-stroke-neutral-bold-hover);
2776
2591
  }
2777
- .cr-radio:not(.cr-radio--disabled):hover .cr-radio__control[data-p-checked=true] .cr-radio__box {
2592
+ .cr-radio:not(.cr-radio--disabled):hover .cr-radio__control--checked .cr-radio__box {
2778
2593
  border-color: var(--cr-color-stroke-brand-base-hover);
2779
2594
  }
2780
2595
  .cr-radio__input:focus-visible + .cr-radio__box {
@@ -2785,7 +2600,7 @@
2785
2600
  cursor: not-allowed;
2786
2601
  }
2787
2602
  .cr-radio--disabled .cr-radio__box,
2788
- .cr-radio--disabled .cr-radio__control[data-p-checked=true] .cr-radio__box {
2603
+ .cr-radio--disabled .cr-radio__control--checked .cr-radio__box {
2789
2604
  border-color: var(--cr-color-stroke-disabled-base);
2790
2605
  }
2791
2606
  .cr-radio__label {
@@ -2807,14 +2622,6 @@
2807
2622
  color: var(--cr-color-text-disabled-base);
2808
2623
  cursor: not-allowed;
2809
2624
  }
2810
- .cr-radio__label--hidden {
2811
- position: absolute;
2812
- width: 1px;
2813
- height: 1px;
2814
- overflow: hidden;
2815
- clip-path: inset(50%);
2816
- white-space: nowrap;
2817
- }
2818
2625
 
2819
2626
  /* src/components/ScrollPanel/ScrollPanel.css */
2820
2627
  .cr-scrollpanel {
@@ -2997,16 +2804,16 @@ body.p-scrollpanel-grabbed {
2997
2804
  transition: transform 150ms ease;
2998
2805
  content: "";
2999
2806
  }
3000
- .cr-switch__control[data-p-highlight=true] .cr-switch__track {
2807
+ .cr-switch__control--checked .cr-switch__track {
3001
2808
  background-color: var(--cr-color-fill-brand-base);
3002
2809
  }
3003
- .cr-switch__control[data-p-highlight=true] .cr-switch__track::before {
2810
+ .cr-switch__control--checked .cr-switch__track::before {
3004
2811
  transform: translateX(calc(var(--cr-switch-width) - var(--cr-switch-thumb) - var(--cr-switch-inset) * 2));
3005
2812
  }
3006
2813
  .cr-switch:not(.cr-switch--disabled):hover .cr-switch__track {
3007
2814
  background-color: var(--cr-color-fill-neutral-subtle-hover);
3008
2815
  }
3009
- .cr-switch:not(.cr-switch--disabled):hover .cr-switch__control[data-p-highlight=true] .cr-switch__track {
2816
+ .cr-switch:not(.cr-switch--disabled):hover .cr-switch__control--checked .cr-switch__track {
3010
2817
  background-color: var(--cr-color-fill-brand-base-hover);
3011
2818
  }
3012
2819
  .cr-switch__input:focus-visible + .cr-switch__track {
@@ -3016,7 +2823,7 @@ body.p-scrollpanel-grabbed {
3016
2823
  cursor: not-allowed;
3017
2824
  }
3018
2825
  .cr-switch--disabled .cr-switch__track,
3019
- .cr-switch--disabled .cr-switch__control[data-p-highlight=true] .cr-switch__track {
2826
+ .cr-switch--disabled .cr-switch__control--checked .cr-switch__track {
3020
2827
  background-color: var(--cr-color-fill-disabled-base);
3021
2828
  }
3022
2829
  .cr-switch--disabled .cr-switch__track::before {
@@ -3042,14 +2849,6 @@ body.p-scrollpanel-grabbed {
3042
2849
  color: var(--cr-color-text-disabled-base);
3043
2850
  cursor: not-allowed;
3044
2851
  }
3045
- .cr-switch__label--hidden {
3046
- position: absolute;
3047
- width: 1px;
3048
- height: 1px;
3049
- overflow: hidden;
3050
- clip-path: inset(50%);
3051
- white-space: nowrap;
3052
- }
3053
2852
 
3054
2853
  /* src/components/Tabs/Tabs.css */
3055
2854
  .cr-tabs__nav {