@kubit-ui-web/react-components 2.0.0-beta.21 → 2.0.0-beta.23

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 (56) hide show
  1. package/dist/cjs/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +1 -1
  2. package/dist/cjs/components/card/card.js +1 -0
  3. package/dist/cjs/components/card/cardStandAlone.js +1 -0
  4. package/dist/cjs/components/card/index.js +4 -0
  5. package/dist/cjs/components/inputDecoration/inputDecorationStandAlone.js +1 -1
  6. package/dist/cjs/components/modal/fragments/modalHeader.js +1 -1
  7. package/dist/cjs/components/modal/modalUnControlled.js +1 -1
  8. package/dist/cjs/components/option/optionStandAlone.js +1 -1
  9. package/dist/cjs/components/radioButton/radioButtonStandAlone.js +1 -1
  10. package/dist/cjs/components/select/index.js +4 -0
  11. package/dist/cjs/components/select/selectControlled.js +1 -0
  12. package/dist/cjs/components/select/selectStandAlone.js +1 -0
  13. package/dist/cjs/components/select/selectUncontrolled.js +1 -0
  14. package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +1 -1
  15. package/dist/cjs/components/virtualKeyboard/virtualKeyboardStandAlone.js +1 -1
  16. package/dist/cjs/index.js +1 -1
  17. package/dist/cjs/lib/designSystem/kubit/css/kubit.css +1 -1
  18. package/dist/cjs/lib/designSystem/kubit/css/kubit.min.css +1 -1
  19. package/dist/cjs/lib/provider/cssProvider/stats/stats.js +1 -1
  20. package/dist/cjs/react-components.css +1 -1
  21. package/dist/esm/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js +3 -3
  22. package/dist/esm/components/card/card.js +2 -0
  23. package/dist/esm/components/card/cardStandAlone.js +2 -0
  24. package/dist/esm/components/card/index.js +2 -0
  25. package/dist/esm/components/inputDecoration/inputDecorationStandAlone.js +2 -2
  26. package/dist/esm/components/modal/fragments/modalHeader.js +3 -3
  27. package/dist/esm/components/modal/modalUnControlled.js +2 -2
  28. package/dist/esm/components/option/optionStandAlone.js +9 -9
  29. package/dist/esm/components/radioButton/radioButtonStandAlone.js +4 -4
  30. package/dist/esm/components/select/index.js +2 -0
  31. package/dist/esm/components/select/selectControlled.js +1 -0
  32. package/dist/esm/components/select/selectStandAlone.js +5 -0
  33. package/dist/esm/components/select/selectUncontrolled.js +2 -0
  34. package/dist/esm/components/selectorBoxFile/components/selectorBoxFileContainerBox.js +8 -8
  35. package/dist/esm/components/virtualKeyboard/virtualKeyboardStandAlone.js +4 -4
  36. package/dist/esm/index.js +1 -1
  37. package/dist/esm/lib/designSystem/kubit/css/kubit.css +1 -1
  38. package/dist/esm/lib/designSystem/kubit/css/kubit.min.css +1 -1
  39. package/dist/esm/lib/provider/cssProvider/stats/stats.js +1 -1
  40. package/dist/esm/react-components.css +1 -1
  41. package/dist/styles/kubit/css/kubit.css +83 -83
  42. package/dist/styles/kubit/css/kubit.min.css +1 -1
  43. package/dist/types/index.d.ts +297 -269
  44. package/package.json +4 -4
  45. package/dist/cjs/components/cardImage/cardImage.js +0 -1
  46. package/dist/cjs/components/cardImage/cardImageStandAlone.js +0 -1
  47. package/dist/cjs/components/dropdownSelected/dropdownSelectedControlled.js +0 -1
  48. package/dist/cjs/components/dropdownSelected/dropdownSelectedStandAlone.js +0 -1
  49. package/dist/cjs/components/dropdownSelected/dropdownSelectedUncontrolled.js +0 -1
  50. package/dist/cjs/components/dropdownSelected/index.js +0 -4
  51. package/dist/esm/components/cardImage/cardImage.js +0 -2
  52. package/dist/esm/components/cardImage/cardImageStandAlone.js +0 -7
  53. package/dist/esm/components/dropdownSelected/dropdownSelectedControlled.js +0 -1
  54. package/dist/esm/components/dropdownSelected/dropdownSelectedStandAlone.js +0 -5
  55. package/dist/esm/components/dropdownSelected/dropdownSelectedUncontrolled.js +0 -2
  56. package/dist/esm/components/dropdownSelected/index.js +0 -2
@@ -643,21 +643,27 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
643
643
  .button__icon--large { height: var(--sizes-size-250); width: var(--sizes-size-250); }
644
644
  .button--small { font-size: var(--font-size-font-body-150); gap: var(--spacings-spacing-100); line-height: var(--line-height-line-height-250); padding-bottom: var(--spacings-spacing-150); padding-left: var(--spacings-spacing-250); padding-right: var(--spacings-spacing-250); padding-top: var(--spacings-spacing-150); }
645
645
  .button__icon--small { height: var(--sizes-size-200); width: var(--sizes-size-200); }
646
- .button--action_primary { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-100); }
647
- .button--action_primary:active { color: var(--colors-accent-color-accent-default-font-100); -webkit-text-decoration: none; text-decoration: none; }
648
- .button--action_primary:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
649
- .button--action_primary:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
650
- .button--action_primary:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-100); color: var(--colors-pressed-color-accent-pressed-font-50); }
651
- .button--action_secondary { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-50); }
652
- .button--action_secondary:active { color: var(--colors-accent-color-accent-default-font-50); -webkit-text-decoration: none; text-decoration: none; }
653
- .button--action_secondary:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
654
- .button--action_secondary:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
655
- .button--action_secondary:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-100); color: var(--colors-pressed-color-accent-pressed-font-150); }
656
- .button--action_secondary_alt { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-150); }
657
- .button--action_secondary_alt:active { color: var(--colors-accent-color-accent-default-font-150); -webkit-text-decoration: none; text-decoration: none; }
658
- .button--action_secondary_alt:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
659
- .button--action_secondary_alt:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
660
- .button--action_secondary_alt:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-200); color: var(--colors-pressed-color-accent-pressed-font-100); }
646
+ .button--alternative { border-radius: var(--borders-border-00); font-family: "Nunito Sans"; background-color: var(--colors-accent-color-accent-default-bg-50); border: var(--borders-border-100); border-color: var(--colors-accent-color-accent-default-border-150); border-style: solid; color: var(--colors-accent-color-accent-default-font-150); }
647
+ .button--alternative:active { background-color: var(--colors-accent-color-accent-pressed-bg-150); color: var(--colors-accent-color-accent-default-font-150); -webkit-text-decoration: none; text-decoration: none; }
648
+ .button--alternative:disabled:hover { background-color: var(--colors-disabled-color-accentdisabled-bg-50); border-color: var(--colors-disabled-color-accentdisabled-border-100); color: var(--colors-disabled-color-accentdisabled-font-100); }
649
+ .button--alternative:disabled { background-color: var(--colors-disabled-color-accentdisabled-bg-50); border-color: var(--colors-disabled-color-accentdisabled-border-100); color: var(--colors-disabled-color-accentdisabled-font-100); }
650
+ .button--alternative:hover { background-color: var(--colors-accent-color-accent-hover-bg-150); color: var(--colors-accent-color-accent-default-font-150); }
651
+ .button--alternative[data-loading="true"] { background-color: var(--colors-accent-color-accent-loading-bg-150); border-color: var(--colors-accent-color-accent-loading-border-100); }
652
+ .button--ghost_alt { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-150); }
653
+ .button--ghost_alt:active { color: var(--colors-accent-color-accent-default-font-150); -webkit-text-decoration: none; text-decoration: none; }
654
+ .button--ghost_alt:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
655
+ .button--ghost_alt:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
656
+ .button--ghost_alt:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-200); color: var(--colors-pressed-color-accent-pressed-font-100); }
657
+ .button--ghost_primary { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-100); }
658
+ .button--ghost_primary:active { color: var(--colors-accent-color-accent-default-font-100); -webkit-text-decoration: none; text-decoration: none; }
659
+ .button--ghost_primary:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
660
+ .button--ghost_primary:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
661
+ .button--ghost_primary:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-100); color: var(--colors-pressed-color-accent-pressed-font-50); }
662
+ .button--ghost_secondary { padding-bottom: var(--spacings-spacing-0); padding-left: var(--spacings-spacing-0); padding-right: var(--spacings-spacing-0); padding-top: var(--spacings-spacing-0); -webkit-text-decoration: underline; text-decoration: underline; color: var(--colors-accent-color-accent-default-font-50); }
663
+ .button--ghost_secondary:active { color: var(--colors-accent-color-accent-default-font-50); -webkit-text-decoration: none; text-decoration: none; }
664
+ .button--ghost_secondary:disabled:hover { color: var(--colors-disabled-color-accentdisabled-font-100); }
665
+ .button--ghost_secondary:disabled { color: var(--colors-disabled-color-accentdisabled-font-100); }
666
+ .button--ghost_secondary:hover { background-color: var(--colors-pressed-color-accent-pressed-bg-100); color: var(--colors-pressed-color-accent-pressed-font-150); }
661
667
  .button--primary { border-radius: var(--borders-border-00); font-family: "Nunito Sans"; background-color: var(--colors-accent-color-accent-default-bg-100); color: var(--colors-accent-color-accent-default-font-50); }
662
668
  .button--primary:active { background-color: var(--colors-accent-color-accent-pressed-bg-50); color: var(--colors-accent-color-accent-pressed-font-200); }
663
669
  .button--primary:disabled:hover { background-color: var(--colors-disabled-color-accentdisabled-bg-150); color: var(--colors-disabled-color-accentdisabled-icon-100); }
@@ -670,12 +676,6 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
670
676
  .button--secondary:disabled { background-color: var(--colors-disabled-color-accentdisabled-bg-150); border-color: var(--colors-disabled-color-accentdisabled-border-100); color: var(--colors-disabled-color-accentdisabled-font-100); }
671
677
  .button--secondary:hover { background-color: var(--colors-accent-color-accent-hover-bg-100); color: var(--colors-accent-color-accent-default-font-50); }
672
678
  .button--secondary[data-loading="true"] { background-color: var(--colors-accent-color-accent-loading-bg-100); border-color: var(--colors-accent-color-accent-loading-border-50); }
673
- .button--secondary_alt { border-radius: var(--borders-border-00); font-family: "Nunito Sans"; background-color: var(--colors-accent-color-accent-default-bg-50); border: var(--borders-border-100); border-color: var(--colors-accent-color-accent-default-border-150); border-style: solid; color: var(--colors-accent-color-accent-default-font-150); }
674
- .button--secondary_alt:active { background-color: var(--colors-accent-color-accent-pressed-bg-150); color: var(--colors-accent-color-accent-default-font-150); -webkit-text-decoration: none; text-decoration: none; }
675
- .button--secondary_alt:disabled:hover { background-color: var(--colors-disabled-color-accentdisabled-bg-50); border-color: var(--colors-disabled-color-accentdisabled-border-100); color: var(--colors-disabled-color-accentdisabled-font-100); }
676
- .button--secondary_alt:disabled { background-color: var(--colors-disabled-color-accentdisabled-bg-50); border-color: var(--colors-disabled-color-accentdisabled-border-100); color: var(--colors-disabled-color-accentdisabled-font-100); }
677
- .button--secondary_alt:hover { background-color: var(--colors-accent-color-accent-hover-bg-150); color: var(--colors-accent-color-accent-default-font-150); }
678
- .button--secondary_alt[data-loading="true"] { background-color: var(--colors-accent-color-accent-loading-bg-150); border-color: var(--colors-accent-color-accent-loading-border-100); }
679
679
  .button:disabled { cursor: not-allowed; }
680
680
  .button::after { content: 'attr(--data-content)'; display: none; visibility: hidden; }
681
681
  .button[data-full-width="true"] { width: 100%; }
@@ -725,17 +725,15 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
725
725
  .calendar__yearelement[data-state="selected"] { background-color: var(--colors-accent-color-accent-default-border-100); border-radius: var(--radius-radius-50); }
726
726
  .calendar__yearlistitem { text-align: center; }
727
727
  .calendar__yearslist { display: grid; grid-gap: var(--spacings-spacing-300); gap: var(--spacings-spacing-300); grid-template-columns: repeat(4, 1fr); height: -moz-fit-content; height: fit-content; justify-content: space-between; left: var(--spacings-spacing-0); max-height: 18rem; overflow: auto; padding: var(--spacings-spacing-150); position: relative; top: var(--spacings-spacing-0); width: var(--spacings-spacing-100-percent); }
728
- .card_image { cursor: pointer; display: flex; flex-direction: column; }
729
- .card_image__content { display: flex; flex-direction: column; height: var(--spacings-spacing-100-percent); justify-content: space-between; padding: var(--spacings-spacing-150); }
730
- .card_image__description { color: var(--colors-neutral-color-neutral-bg-100); font-weight: var(--font-weight-font-weight-400); text-align: var(--text-align-left); }
731
- .card_image__descriptioncontainer { margin-bottom: var(--spacings-spacing-150); }
732
- .card_image__imagecontainer { background-position: var(--spacings-spacing-50-percent) var(--spacings-spacing-50-percent); background-size: auto; border-top-left-radius: var(--radius-radius-50); border-top-right-radius: var(--radius-radius-50); flex: 1; height: 12rem; max-height: 12rem; min-height: 12rem; }
733
- .card_image__linkcontainer { display: flex; justify-content: var(--text-align-left); }
734
- .card_image__textcontainer { padding: var(--spacings-spacing-0); }
735
- .card_image__title { color: var(--colors-neutral-color-neutral-bg-100); font-weight: var(--font-weight-font-weight-600); }
736
- .card_image__titlecontainer { margin-bottom: var(--spacings-spacing-150); }
737
- .card_image--alternative { background-color: var(--colors-neutral-color-neutral-bg-100); border-radius: var(--radius-radius-50); }
738
- .card_image--default { background-color: var(--colors-neutral-color-neutral-bg-100); border-radius: var(--radius-radius-50); box-shadow: var(--shadow-shadow-10); }
728
+ .card { border-radius: var(--radius-radius-00); border-style: solid; border-width: var(--borders-border-50); cursor: default; display: flex; flex-direction: column; overflow: hidden; transition: all 0.2s ease-in-out; }
729
+ .card__content { padding: var(--spacings-spacing-400); }
730
+ .card__footer { padding: var(--spacings-spacing-400); padding-top: var(--spacings-spacing-0); }
731
+ .card__header { padding: var(--spacings-spacing-400); padding-bottom: var(--spacings-spacing-0); }
732
+ .card--default { background-color: var(--colors-neutral-color-neutral-bg-250); border-color: var(--colors-neutral-color-neutral-border-50); }
733
+ .card__footer--default { color: var(--colors-neutral-color-neutral-icon-50); }
734
+ .card__header--default { font-weight: var(--font-weight-font-weight-600); }
735
+ .card--default:hover { box-shadow: var(--shadow-shadow-10); transform: translateY(-2px); }
736
+ .card--default[data-state="selected"] { border-color: var(--colors-brand-color-brand-border-100); box-shadow: var(--shadow-shadow-10); }
739
737
  .carousel { display: flex; }
740
738
  .carousel__content { align-items: stretch; display: flex; flex-direction: row; gap: var(--spacings-spacing-300); left: 0; position: relative; }
741
739
  .carousel__content[data-center-mode="true"] > * { transform: scale(0.85); transition: transform 0.5s ease-out; }
@@ -832,42 +830,6 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
832
830
  .dot--alternative { align-items: center; display: inline-flex; justify-content: center; background-color: var(--colors-accent-color-accent-default-bg-150); border-color: var(--colors-accent-color-accent-default-border-100); border-style: solid; border-width: var(--borders-border-50); color: var(--colors-accent-color-accent-default-font-100); }
833
831
  .dot--with_border { align-items: center; display: inline-flex; justify-content: center; background-color: var(--colors-accent-color-accent-default-bg-100); border-color: var(--colors-accent-color-accent-default-border-150); border-style: solid; border-width: var(--borders-border-50); color: var(--colors-accent-color-accent-default-font-150); }
834
832
  .dot--without_border { align-items: center; display: inline-flex; justify-content: center; background-color: var(--colors-accent-color-accent-default-bg-100); color: var(--colors-accent-color-accent-default-font-150); }
835
- .dropdown_selected { display: flex; position: relative; }
836
- .dropdown_selected__buttonorlinkcontainer { align-items: center; cursor: pointer; display: flex; gap: var(--spacings-spacing-150); justify-content: space-between; width: var(--spacings-spacing-100-percent); }
837
- .dropdown_selected__iconclosed { height: var(--spacings-spacing-350); width: var(--spacings-spacing-350); }
838
- .dropdown_selected__iconopened { height: var(--spacings-spacing-350); width: var(--spacings-spacing-350); }
839
- .dropdown_selected__labelclosed { color: var(--colors-accent-color-accent-default-font-150); font-weight: var(--font-weight-font-weight-400); }
840
- .dropdown_selected__labelopened { color: var(--colors-accent-color-accent-default-font-150); font-weight: var(--font-weight-font-weight-400); }
841
- .dropdown_selected__listoptionscontainer { display: block; }
842
- .dropdown_selected--default { border-right: var(--spacings-spacing-25) solid var(--colors-neutral-color-neutral-border-50); }
843
- .dropdown_selected__buttonorlinkcontainer--default { background-color: var(--colors-neutral-color-neutral-bg-50); padding: var(--spacings-spacing-100) var(--spacings-spacing-150); }
844
- .dropdown_selected__iconclosed--default { color: var(--colors-neutral-color-neutral-font-250); }
845
- .dropdown_selected__iconopened--default { color: var(--colors-neutral-color-neutral-font-250); }
846
- .dropdown_selected__labelclosed--default { color: var(--colors-accent-color-accent-default-font-150); }
847
- .dropdown_selected__labelopened--default { color: var(--colors-accent-color-accent-default-font-150); }
848
- .dropdown_selected__listoptionscontainer--default { border: var(--spacings-spacing-50) solid var(--colors-neutral-color-neutral-border-50); box-shadow: var(--shadow-shadow-10); max-width: 15rem; }
849
- .dropdown_selected--side_menu { border-width: var(--borders-border-00); padding: var(--spacings-spacing-100); }
850
- .dropdown_selected__buttonorlinkcontainer--side_menu { background-color: var(--colors-neutral-color-neutral-bg-100); padding: var(--spacings-spacing-150); }
851
- .dropdown_selected__iconclosed--side_menu { color: var(--colors-neutral-color-neutral-font-250); }
852
- .dropdown_selected__iconopened--side_menu { color: var(--colors-neutral-color-neutral-font-250); }
853
- .dropdown_selected__labelclosed--side_menu { color: var(--colors-accent-color-accent-default-font-150); }
854
- .dropdown_selected__labelopened--side_menu { color: var(--colors-accent-color-accent-default-font-150); }
855
- .dropdown_selected__listoptionscontainer--side_menu { background-color: var(--colors-neutral-color-neutral-bg-250); border: 1px solid black; margin-top: var(--spacings-spacing-350); }
856
- .dropdown_selected--topbar { border-width: var(--borders-border-00); padding: var(--spacings-spacing-100); }
857
- .dropdown_selected__buttonorlinkcontainer--topbar { background-color: var(--colors-neutral-color-neutral-bg-100); padding: var(--spacings-spacing-150); }
858
- .dropdown_selected__iconclosed--topbar { color: var(--colors-neutral-color-neutral-font-250); }
859
- .dropdown_selected__iconopened--topbar { color: var(--colors-neutral-color-neutral-font-250); }
860
- .dropdown_selected__labelclosed--topbar { color: var(--colors-accent-color-accent-default-font-150); }
861
- .dropdown_selected__labelopened--topbar { color: var(--colors-accent-color-accent-default-font-150); }
862
- .dropdown_selected__listoptionscontainer--topbar { background-color: var(--colors-neutral-color-neutral-bg-250); border: 1px solid black; margin-top: var(--spacings-spacing-350); }
863
- .dropdown_selected--topbar_tab { display: flex; flex-direction: column; }
864
- .dropdown_selected__buttonorlinkcontainer--topbar_tab { background-color: var(--colors-neutral-color-neutral-bg-50); padding: var(--spacings-spacing-250); -webkit-text-decoration: none; text-decoration: none; }
865
- .dropdown_selected__buttonorlinkcontainer--topbar_tab:hover { background-color: var(--colors-neutral-color-neutral-bg-100); }
866
- .dropdown_selected__iconclosed--topbar_tab { color: var(--colors-neutral-color-neutral-icon-250); }
867
- .dropdown_selected__iconopened--topbar_tab { color: var(--colors-neutral-color-neutral-icon-250); }
868
- .dropdown_selected__labelclosed--topbar_tab { color: var(--colors-accent-color-accent-default-font-150); }
869
- .dropdown_selected__labelopened--topbar_tab { color: var(--colors-accent-color-accent-default-font-150); }
870
- .dropdown_selected__listoptionscontainer--topbar_tab { margin-top: var(--spacings-spacing-200); }
871
833
  .error_message { align-items: center; display: flex; gap: var(--spacings-spacing-100); }
872
834
  .error_message__icon { color: var(--colors-feedback-color-feedbackerror-icon-100); height: var(--sizes-size-150); width: var(--sizes-size-150); }
873
835
  .error_message__typography { color: var(--colors-feedback-color-feedbackerror-font-50); font-feature-settings: ; font-variant: PARAGRAPH_CAPTION_EXTENDED; font-weight: var(--font-weight-font-weight-400); }
@@ -1200,6 +1162,42 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1200
1162
  .radio_button[data-state="disabled_selected"]::before { content: ''; background-color: var(--colors-disabled-color-accentdisabled-bg-50); }
1201
1163
  .radio_button[data-state="selected"] { background-color: var(--colors-neutral-color-neutral-bg-250); border-color: var(--colors-accent-color-accent-default-border-100); }
1202
1164
  .radio_button[data-state="selected"]::before { content: ''; background-color: var(--colors-accent-color-accent-default-icon-100); }
1165
+ .select { display: flex; position: relative; }
1166
+ .select__buttonorlinkcontainer { align-items: center; cursor: pointer; display: flex; gap: var(--spacings-spacing-150); justify-content: space-between; width: var(--spacings-spacing-100-percent); }
1167
+ .select__iconclosed { height: var(--spacings-spacing-350); width: var(--spacings-spacing-350); }
1168
+ .select__iconopened { height: var(--spacings-spacing-350); width: var(--spacings-spacing-350); }
1169
+ .select__labelclosed { color: var(--colors-accent-color-accent-default-font-150); font-weight: var(--font-weight-font-weight-400); }
1170
+ .select__labelopened { color: var(--colors-accent-color-accent-default-font-150); font-weight: var(--font-weight-font-weight-400); }
1171
+ .select__listoptionscontainer { display: block; }
1172
+ .select--default { border-right: var(--spacings-spacing-25) solid var(--colors-neutral-color-neutral-border-50); }
1173
+ .select__buttonorlinkcontainer--default { background-color: var(--colors-neutral-color-neutral-bg-50); padding: var(--spacings-spacing-100) var(--spacings-spacing-150); }
1174
+ .select__iconclosed--default { color: var(--colors-neutral-color-neutral-font-250); }
1175
+ .select__iconopened--default { color: var(--colors-neutral-color-neutral-font-250); }
1176
+ .select__labelclosed--default { color: var(--colors-accent-color-accent-default-font-150); }
1177
+ .select__labelopened--default { color: var(--colors-accent-color-accent-default-font-150); }
1178
+ .select__listoptionscontainer--default { border: var(--spacings-spacing-50) solid var(--colors-neutral-color-neutral-border-50); box-shadow: var(--shadow-shadow-10); max-width: 15rem; }
1179
+ .select--side_menu { border-width: var(--borders-border-00); padding: var(--spacings-spacing-100); }
1180
+ .select__buttonorlinkcontainer--side_menu { background-color: var(--colors-neutral-color-neutral-bg-100); padding: var(--spacings-spacing-150); }
1181
+ .select__iconclosed--side_menu { color: var(--colors-neutral-color-neutral-font-250); }
1182
+ .select__iconopened--side_menu { color: var(--colors-neutral-color-neutral-font-250); }
1183
+ .select__labelclosed--side_menu { color: var(--colors-accent-color-accent-default-font-150); }
1184
+ .select__labelopened--side_menu { color: var(--colors-accent-color-accent-default-font-150); }
1185
+ .select__listoptionscontainer--side_menu { background-color: var(--colors-neutral-color-neutral-bg-250); border: 1px solid black; margin-top: var(--spacings-spacing-350); }
1186
+ .select--topbar { border-width: var(--borders-border-00); padding: var(--spacings-spacing-100); }
1187
+ .select__buttonorlinkcontainer--topbar { background-color: var(--colors-neutral-color-neutral-bg-100); padding: var(--spacings-spacing-150); }
1188
+ .select__iconclosed--topbar { color: var(--colors-neutral-color-neutral-font-250); }
1189
+ .select__iconopened--topbar { color: var(--colors-neutral-color-neutral-font-250); }
1190
+ .select__labelclosed--topbar { color: var(--colors-accent-color-accent-default-font-150); }
1191
+ .select__labelopened--topbar { color: var(--colors-accent-color-accent-default-font-150); }
1192
+ .select__listoptionscontainer--topbar { background-color: var(--colors-neutral-color-neutral-bg-250); border: 1px solid black; margin-top: var(--spacings-spacing-350); }
1193
+ .select--topbar_tab { display: flex; flex-direction: column; }
1194
+ .select__buttonorlinkcontainer--topbar_tab { background-color: var(--colors-neutral-color-neutral-bg-50); padding: var(--spacings-spacing-250); -webkit-text-decoration: none; text-decoration: none; }
1195
+ .select__buttonorlinkcontainer--topbar_tab:hover { background-color: var(--colors-neutral-color-neutral-bg-100); }
1196
+ .select__iconclosed--topbar_tab { color: var(--colors-neutral-color-neutral-icon-250); }
1197
+ .select__iconopened--topbar_tab { color: var(--colors-neutral-color-neutral-icon-250); }
1198
+ .select__labelclosed--topbar_tab { color: var(--colors-accent-color-accent-default-font-150); }
1199
+ .select__labelopened--topbar_tab { color: var(--colors-accent-color-accent-default-font-150); }
1200
+ .select__listoptionscontainer--topbar_tab { margin-top: var(--spacings-spacing-200); }
1203
1201
  .selector_box_file { display: flex; flex-direction: column; width: var(--spacings-spacing-100-percent); }
1204
1202
  .selector_box_file__actionicon { display: inline; height: var(--spacings-spacing-350); margin-right: var(--spacings-spacing-350); width: var(--spacings-spacing-350); }
1205
1203
  .selector_box_file__actionicon[data-state="disabled"] { display: none; }
@@ -1438,15 +1436,13 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1438
1436
  .calendar__backtext { font-size: 0.875rem; line-height: 1.25rem; }
1439
1437
  .calendar__dayslist { font-size: 0.875rem; line-height: 1.25rem; }
1440
1438
  .calendar { border-color: var(--colors-neutral-color-neutral-border-50); border-style: solid; border-width: var(--borders-border-100); margin-top: var(--spacings-spacing-150); padding: var(--spacings-spacing-300) var(--spacings-spacing-0); }
1441
- .card_image__title { font-size: 1rem; line-height: 1.5rem; }
1442
- .card_image__description--default { font-size: 1rem; line-height: 1.5rem; }
1439
+ .card__content--default { font-size: 1rem; line-height: 1.5rem; }
1440
+ .card__footer--default { font-size: 0.875rem; line-height: 1.25rem; }
1441
+ .card__header--default { font-size: 1.25rem; line-height: 1.5rem; }
1443
1442
  .chip__errormessage { font-size: 0.75rem; line-height: 1rem; }
1444
1443
  .chip__label { font-size: 0.875rem; line-height: 1.25rem; }
1445
1444
  .chip__rangeitemseparator { font-size: 0.875rem; line-height: 1.25rem; }
1446
1445
  .chip__rangeitemtext { font-size: 0.875rem; line-height: 1.25rem; }
1447
- .dropdown_selected__labelclosed { font-size: 0.75rem; line-height: 1rem; }
1448
- .dropdown_selected__labelopened { font-size: 0.75rem; line-height: 1rem; }
1449
- .dropdown_selected__listoptionscontainer--default { max-width: 20rem; }
1450
1446
  .input_signature__placeholdertext { font-size: 0.875rem; line-height: 1.25rem; }
1451
1447
  .list_options__title--default { font-size: 1.25rem; line-height: 1.5rem; }
1452
1448
  .list_options__title--side_menu_section { font-size: 0.875rem; line-height: 1.25rem; }
@@ -1463,6 +1459,9 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1463
1459
  .option__labelhighlighted--topbar { font-size: 0.75rem; line-height: 1rem; }
1464
1460
  .radio_button__label { font-size: 0.875rem; line-height: 1.25rem; }
1465
1461
  .radio_button__sublabel { font-size: 0.875rem; line-height: 1.25rem; }
1462
+ .select__labelclosed { font-size: 0.75rem; line-height: 1rem; }
1463
+ .select__labelopened { font-size: 0.75rem; line-height: 1rem; }
1464
+ .select__listoptionscontainer--default { max-width: 20rem; }
1466
1465
  .selector_box_file__containerboxactiontext[data-state="error"] { font-size: 0.875rem; line-height: 1.25rem; }
1467
1466
  .selector_box_file__containerboxactiontext[data-state="loading"] { font-size: 0.875rem; line-height: 1.25rem; }
1468
1467
  .selector_box_file__containerboxactiontext[data-state="success"] { font-size: 0.875rem; line-height: 1.25rem; }
@@ -1519,19 +1518,13 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1519
1518
  .calendar__backtext { font-size: 0.75rem; line-height: 1rem; }
1520
1519
  .calendar__dayslist { font-size: 0.75rem; line-height: 1rem; }
1521
1520
  .calendar { box-shadow: none; padding: var(--spacings-spacing-0); }
1522
- .card_image__title { font-size: 0.875rem; line-height: 1.25rem; }
1523
- .card_image__description--default { font-size: 0.875rem; line-height: 1.25rem; }
1521
+ .card__content--default { font-size: 0.875rem; line-height: 1.25rem; }
1522
+ .card__footer--default { font-size: 0.75rem; line-height: 1rem; }
1523
+ .card__header--default { font-size: 1.125rem; line-height: 1.5rem; }
1524
1524
  .chip__errormessage { font-size: 0.75rem; line-height: 1rem; }
1525
1525
  .chip__label { font-size: 0.75rem; line-height: 1rem; }
1526
1526
  .chip__rangeitemseparator { font-size: 0.75rem; line-height: 1rem; }
1527
1527
  .chip__rangeitemtext { font-size: 0.75rem; line-height: 1rem; }
1528
- .dropdown_selected__labelclosed { font-size: 0.75rem; line-height: 1rem; }
1529
- .dropdown_selected__labelopened { font-size: 0.75rem; line-height: 1rem; }
1530
- .dropdown_selected__buttonorlinkcontainer--default { padding: var(--spacings-spacing-50) var(--spacings-spacing-100); }
1531
- .dropdown_selected__listoptionscontainer--default { box-shadow: none; max-width: var(--spacings-spacing-100-percent); }
1532
- .dropdown_selected__buttonorlinkcontainer--side_menu { padding: var(--spacings-spacing-100); }
1533
- .dropdown_selected__buttonorlinkcontainer--topbar { padding: var(--spacings-spacing-100); }
1534
- .dropdown_selected__buttonorlinkcontainer--topbar_tab { padding: var(--spacings-spacing-150); }
1535
1528
  .input_signature__placeholdertext { font-size: 0.75rem; line-height: 1rem; }
1536
1529
  .list_options__title--default { font-size: 1.125rem; line-height: 1.5rem; }
1537
1530
  .list_options--dropdown_selected_section { gap: var(--spacings-spacing-150); }
@@ -1550,6 +1543,13 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1550
1543
  .option--topbar_tab { padding: var(--spacings-spacing-300); padding-left: var(--spacings-spacing-400); }
1551
1544
  .radio_button__label { font-size: 0.75rem; line-height: 1rem; }
1552
1545
  .radio_button__sublabel { font-size: 0.75rem; line-height: 1rem; }
1546
+ .select__labelclosed { font-size: 0.75rem; line-height: 1rem; }
1547
+ .select__labelopened { font-size: 0.75rem; line-height: 1rem; }
1548
+ .select__buttonorlinkcontainer--default { padding: var(--spacings-spacing-50) var(--spacings-spacing-100); }
1549
+ .select__listoptionscontainer--default { box-shadow: none; max-width: var(--spacings-spacing-100-percent); }
1550
+ .select__buttonorlinkcontainer--side_menu { padding: var(--spacings-spacing-100); }
1551
+ .select__buttonorlinkcontainer--topbar { padding: var(--spacings-spacing-100); }
1552
+ .select__buttonorlinkcontainer--topbar_tab { padding: var(--spacings-spacing-150); }
1553
1553
  .selector_box_file__containerboxactiontext[data-state="error"] { font-size: 0.75rem; line-height: 1rem; }
1554
1554
  .selector_box_file__containerboxactiontext[data-state="loading"] { font-size: 0.75rem; line-height: 1rem; }
1555
1555
  .selector_box_file__containerboxactiontext[data-state="success"] { font-size: 0.75rem; line-height: 1rem; }
@@ -1606,12 +1606,12 @@ body *:focus-visible { box-shadow: 0 0 0 0.25rem #fff; outline-color: #2C71DB; o
1606
1606
  }
1607
1607
  @media screen and (max-width: 1024px) and (min-width: 768px) {
1608
1608
  .calendar { box-shadow: none; padding: var(--spacings-spacing-0); }
1609
- .dropdown_selected__listoptionscontainer--default { max-width: 16rem; }
1610
1609
  .list_options--dropdown_selected_section { gap: var(--spacings-spacing-150); }
1611
1610
  .modal__content { padding-left: var(--spacings-spacing-400); padding-right: var(--spacings-spacing-400); }
1612
1611
  .modal__footer { width: calc(var(--spacings-spacing-100-percent) - (var(--spacings-spacing-400) + var(--spacings-spacing-400))); }
1613
1612
  .modal__headercontainer { padding: var(--spacings-spacing-300) var(--spacings-spacing-400) var(--spacings-spacing-400); }
1614
1613
  .modal { max-height: 100vh; max-width: 100vw; min-height: 16rem; min-width: 48rem; }
1614
+ .select__listoptionscontainer--default { max-width: 16rem; }
1615
1615
  .tooltip__paragraph--default { color: #1A1A1A; }
1616
1616
  }
1617
1617
  /* === END COMPONENTS === */