@norges-domstoler/dds-components 20.2.0 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.css +1314 -1202
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +626 -252
  4. package/dist/index.d.ts +626 -252
  5. package/dist/index.js +2513 -2154
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +2542 -2193
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +26 -26
package/dist/index.css CHANGED
@@ -338,9 +338,6 @@
338
338
  :where(.typographyStyles_legend) {
339
339
  padding-inline: 0;
340
340
  }
341
- :where(.typographyStyles_legend--margins) {
342
- margin-bottom: var(--dds-spacing-x1-5);
343
- }
344
341
  :where(.typographyStyles_caption--withMargins) {
345
342
  display: table-caption;
346
343
  }
@@ -710,345 +707,1081 @@
710
707
  height: 1.25em;
711
708
  }
712
709
 
713
- /* src/components/helpers/Paper/Paper.module.css */
714
- :where(.Paper_container) {
715
- box-sizing: border-box;
716
- background-color: var(--dds-color-surface-default);
717
- border-radius: var(--dds-border-radius-surface);
718
- margin: 0;
710
+ /* src/components/layout/common/layout.module.css */
711
+ .layout_dds-p {
712
+ --dds-r-p: var(--dds-r-xs-p);
713
+ padding: var(--dds-r-p, initial);
714
+ }
715
+ .layout_dds-p-i {
716
+ --dds-r-p-i: var(--dds-r-xs-p-i);
717
+ padding-inline: var(--dds-r-p-i, initial);
718
+ }
719
+ .layout_dds-p-b {
720
+ --dds-r-p-b: var(--dds-r-xs-p-b);
721
+ padding-block: var(--dds-r-p-b, initial);
722
+ }
723
+ .layout_dds-m {
724
+ --dds-r-m: var(--dds-r-xs-m);
725
+ margin: var(--dds-r-m, initial);
726
+ }
727
+ .layout_dds-m-i {
728
+ --dds-r-m-i: var(--dds-r-xs-m-i);
729
+ margin-inline: var(--dds-r-m-i, initial);
730
+ }
731
+ .layout_dds-m-b {
732
+ --dds-r-m-b: var(--dds-r-xs-m-b);
733
+ margin-block: var(--dds-r-m-b, initial);
734
+ }
735
+ .layout_dds-h {
736
+ --dds-r-h: var(--dds-r-xs-h);
737
+ height: var(--dds-r-h, initial);
738
+ }
739
+ .layout_dds-max-h {
740
+ --dds-r-max-h: var(--dds-r-xs-max-h);
741
+ max-height: var(--dds-r-max-h, initial);
742
+ }
743
+ .layout_dds-min-h {
744
+ --dds-r-min-h: var(--dds-r-xs-min-h);
745
+ min-height: var(--dds-r-min-h, initial);
746
+ }
747
+ .layout_dds-w {
748
+ --dds-r-w: var(--dds-r-xs-w);
749
+ width: var(--dds-r-w, initial);
719
750
  }
720
- :where(.Paper_shadow--1) {
721
- box-shadow: var(--dds-shadow-1);
751
+ .layout_dds-max-w {
752
+ --dds-r-max-w: var(--dds-r-xs-max-w);
753
+ max-width: var(--dds-r-max-w, initial);
722
754
  }
723
- :where(.Paper_shadow--2) {
724
- box-shadow: var(--dds-shadow-2);
755
+ .layout_dds-min-w {
756
+ --dds-r-min-w: var(--dds-r-xs-min-w);
757
+ min-width: var(--dds-r-min-w, initial);
725
758
  }
726
- :where(.Paper_shadow--3) {
727
- box-shadow: var(--dds-shadow-3);
759
+ .layout_dds-pos {
760
+ --dds-r-pos: var(--dds-r-xs-pos);
761
+ position: var(--dds-r-pos, initial);
728
762
  }
729
- :where(.Paper_shadow--4) {
730
- box-shadow: var(--dds-shadow-4);
763
+ .layout_dds-l {
764
+ --dds-r-l: var(--dds-r-xs-l);
765
+ left: var(--dds-r-l, initial);
731
766
  }
732
- :where(.Paper_border--default) {
733
- border: 1px solid var(--dds-color-border-default);
767
+ .layout_dds-r {
768
+ --dds-r-r: var(--dds-r-xs-r);
769
+ right: var(--dds-r-r, initial);
734
770
  }
735
- :where(.Paper_border--subtle) {
736
- border: 1px solid var(--dds-color-border-subtle);
771
+ .layout_dds-t {
772
+ --dds-r-t: var(--dds-r-xs-t);
773
+ top: var(--dds-r-t, initial);
737
774
  }
738
- :where(.Paper_border--on-inverse) {
739
- border: 1px solid var(--dds-color-border-inverse);
775
+ .layout_dds-b {
776
+ --dds-r-b: var(--dds-r-xs-b);
777
+ bottom: var(--dds-r-b, initial);
740
778
  }
741
-
742
- /* src/components/Accordion/Accordion.module.css */
743
- :where(.Accordion_container) {
744
- border-bottom: 1px solid var(--dds-color-border-default);
779
+ .layout_dds-o {
780
+ --dds-r-o: var(--dds-r-xs-o);
781
+ overflow: var(--dds-r-o, initial);
745
782
  }
746
- :where(.Accordion_container:first-child) {
747
- border-top: 1px solid var(--dds-color-border-default);
783
+ .layout_dds-o-x {
784
+ --dds-r-o-x: var(--dds-r-xs-o-x);
785
+ overflow-x: var(--dds-r-o-x, initial);
748
786
  }
749
- :where(.Accordion_header-button) {
750
- @media (prefers-reduced-motion: no-preference) {
751
- transition: background-color 0.2s, var(--dds-focus-transition);
752
- }
753
- &:hover {
754
- background-color: var(--dds-color-surface-hover-default);
755
- color: var(--dds-color-text-action-hover);
756
- }
787
+ .layout_dds-o-y {
788
+ --dds-r-o-y: var(--dds-r-xs-o-y);
789
+ overflow-y: var(--dds-r-o-y, initial);
757
790
  }
758
- .Accordion_header-container {
759
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
791
+ .layout_dds-display {
792
+ --dds-r-display: var(--dds-r-xs-display);
793
+ display: var(--dds-r-display, initial);
760
794
  }
761
- .Accordion_header-container__chevron {
762
- margin-right: var(--dds-spacing-x0-5);
795
+ .layout_dds-text-align {
796
+ --dds-r-text-align: var(--dds-r-xs-text-align);
797
+ text-align: var(--dds-r-text-align, initial);
763
798
  }
764
- .Accordion_body {
765
- height: var(--dds-card-accordion-body-height);
799
+ .layout_dds-flex-dir {
800
+ --dds-r-flex-dir: var(--dds-r-xs-flex-dir);
801
+ flex-direction: var(--dds-r-flex-dir, initial);
766
802
  }
767
- .Accordion_body__content {
768
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1);
803
+ .layout_dds-gap {
804
+ --dds-r-gap: var(--dds-r-xs-gap);
805
+ gap: var(--dds-r-gap, initial);
769
806
  }
770
-
771
- /* src/components/helpers/AccordionBase/AccordionBase.module.css */
772
- :where(.AccordionBase_header-button) {
773
- -webkit-user-select: text;
774
- -moz-user-select: text;
775
- user-select: text;
776
- position: relative;
777
- cursor: pointer;
778
- display: block;
779
- width: 100%;
780
- border-radius: inherit;
807
+ .layout_dds-c-gap {
808
+ --dds-r-c-gap: var(--dds-r-xs-c-gap);
809
+ -moz-column-gap: var(--dds-r-c-gap, initial);
810
+ column-gap: var(--dds-r-c-gap, initial);
781
811
  }
782
- .AccordionBase_header-container {
783
- display: flex;
784
- align-items: center;
812
+ .layout_dds-r-gap {
813
+ --dds-r-r-gap: var(--dds-r-xs-r-gap);
814
+ row-gap: var(--dds-r-r-gap, initial);
785
815
  }
786
- .AccordionBase_header__content {
787
- text-align: left;
816
+ .layout_dds-a-i {
817
+ --dds-r-a-i: var(--dds-r-xs-a-i);
818
+ align-items: var(--dds-r-a-i, initial);
788
819
  }
789
- .AccordionBase_header__chevron {
790
- display: flex;
791
- align-items: center;
792
- justify-content: center;
793
- height: var(--dds-icon-size-medium);
794
- width: var(--dds-icon-size-medium);
820
+ .layout_dds-a-c {
821
+ --dds-r-a-c: var(--dds-r-xs-a-c);
822
+ align-content: var(--dds-r-a-c, initial);
795
823
  }
796
- .AccordionBase_body {
797
- overflow: hidden;
824
+ .layout_dds-j-i {
825
+ --dds-r-j-i: var(--dds-r-xs-j-i);
826
+ justify-items: var(--dds-r-j-i, initial);
798
827
  }
799
- .AccordionBase_body--animated {
800
- @media (prefers-reduced-motion: no-preference) {
801
- transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
802
- }
828
+ .layout_dds-j-c {
829
+ --dds-r-j-c: var(--dds-r-xs-j-c);
830
+ justify-content: var(--dds-r-j-c, initial);
803
831
  }
804
- .AccordionBase_body--hidden {
805
- display: none;
832
+ .layout_dds-wrap {
833
+ --dds-r-wrap: var(--dds-r-xs-wrap);
834
+ flex-wrap: var(--dds-r-wrap, initial);
806
835
  }
807
-
808
- /* src/components/BackLink/BackLink.module.css */
809
- .BackLink_icon {
810
- display: inline;
811
- margin: 0.1em 0.25em -0.1em 0.1em;
812
- transform: translateY(0.05em);
813
- vertical-align: baseline;
836
+ .layout_dds-basis {
837
+ --dds-r-basis: var(--dds-r-xs-basis);
838
+ flex-basis: var(--dds-r-basis, initial);
814
839
  }
815
-
816
- /* src/components/Breadcrumbs/Breadcrumbs.module.css */
817
- .Breadcrumbs_list {
818
- display: flex;
819
- flex-wrap: wrap;
820
- align-items: center;
821
- gap: var(--dds-spacing-x0-5);
840
+ .layout_dds-flow {
841
+ --dds-r-flow: var(--dds-r-xs-flow);
842
+ flex-flow: var(--dds-r-flow, initial);
822
843
  }
823
- .Breadcrumbs_list--large-screen-hide-xs {
824
- @media only screen and (max-width: 600px) {
825
- display: none;
844
+ @media (max-width: 599px) {
845
+ .layout_dds-p {
846
+ --dds-r-p: var(--dds-r-xs-p);
826
847
  }
827
- }
828
- .Breadcrumbs_list--large-screen-hide-sm {
829
- @media only screen and (max-width: 960px) {
830
- display: none;
848
+ .layout_dds-p-i {
849
+ --dds-r-p-i: var(--dds-r-xs-p-i);
831
850
  }
832
- }
833
- .Breadcrumbs_list--large-screen-hide-md {
834
- @media only screen and (max-width: 1280px) {
835
- display: none;
851
+ .layout_dds-p-b {
852
+ --dds-r-p-b: var(--dds-r-xs-p-b);
836
853
  }
837
- }
838
- .Breadcrumbs_list--large-screen-hide-lg {
839
- @media only screen and (max-width: 1920px) {
840
- display: none;
854
+ .layout_dds-m {
855
+ --dds-r-m: var(--dds-r-xs-m);
841
856
  }
842
- }
843
- .Breadcrumbs_list--large-screen-hide-xl {
844
- display: none;
845
- }
846
- .Breadcrumbs_list--small-screen {
847
- display: none;
848
- }
849
- .Breadcrumbs_list--small-screen-show-xs {
850
- @media only screen and (max-width: 600px) {
851
- display: flex;
857
+ .layout_dds-m-i {
858
+ --dds-r-m-i: var(--dds-r-xs-m-i);
852
859
  }
853
- }
854
- .Breadcrumbs_list--small-screen-show-sm {
855
- @media only screen and (max-width: 960px) {
856
- display: flex;
860
+ .layout_dds-m-b {
861
+ --dds-r-m-b: var(--dds-r-xs-m-b);
857
862
  }
858
- }
859
- .Breadcrumbs_list--small-screen-show-md {
860
- @media only screen and (max-width: 1280px) {
861
- display: flex;
863
+ .layout_dds-h {
864
+ --dds-r-h: var(--dds-r-xs-h);
862
865
  }
863
- }
864
- .Breadcrumbs_list--small-screen-show-lg {
865
- @media only screen and (max-width: 1920px) {
866
- display: flex;
866
+ .layout_dds-max-h {
867
+ --dds-r-max-h: var(--dds-r-xs-max-h);
867
868
  }
868
- }
869
- .Breadcrumbs_list--small-screen-show-xl {
870
- display: flex;
871
- }
872
- .Breadcrumbs_list-item {
873
- align-items: center;
874
- display: flex;
875
- gap: var(--dds-spacing-x0-5);
876
- padding: 0;
877
- }
878
- .Breadcrumbs_list-item--large-screen {
879
- padding: var(--dds-spacing-x0-125) 0;
880
- }
881
- .Breadcrumbs_icon {
882
- color: var(--dds-color-icon-link);
883
- }
884
-
885
- /* src/components/Button/Button.module.css */
886
- :where(.Button_button) {
887
- -webkit-user-select: text;
888
- -moz-user-select: text;
889
- user-select: text;
890
- display: inline-flex;
891
- align-items: center;
892
- justify-content: center;
893
- height: -moz-fit-content;
894
- height: fit-content;
895
- width: -moz-fit-content;
896
- width: fit-content;
897
- cursor: pointer;
898
- box-shadow: none;
899
- text-decoration: none;
900
- border-radius: var(--dds-border-radius-button);
901
- border: 1px solid;
902
- @media (prefers-reduced-motion: no-preference) {
903
- transition: all 0.2s;
869
+ .layout_dds-min-h {
870
+ --dds-r-max-h: var(--dds-r-xs-max-h);
904
871
  }
905
- &:active:not([aria-disabled=true]) {
906
- scale: 0.95;
872
+ .layout_dds-w {
873
+ --dds-r-w: var(--dds-r-xs-w);
907
874
  }
908
- }
909
- .Button_button--is-loading {
910
- cursor: not-allowed;
911
- }
912
- .Button_button--full-width {
913
- width: 100%;
914
- justify-content: space-between;
915
- &.Button_button--is-loading,
916
- &.Button_just-icon,
917
- &.Button_just-text {
918
- justify-content: center;
875
+ .layout_dds-max-w {
876
+ --dds-r-max-w: var(--dds-r-xs-max-w);
919
877
  }
920
- &.Button_with-text-and-icon.Button_with-icon-left {
921
- justify-content: left;
878
+ .layout_dds-min-w {
879
+ --dds-r-min-w: var(--dds-r-xs-min-w);
922
880
  }
923
- }
924
- .Button_button--xsmall {
925
- &.Button_just-text {
926
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
881
+ .layout_dds-pos {
882
+ --dds-r-pos: var(--dds-r-xs-pos);
927
883
  }
928
- &.Button_with-text-and-icon {
929
- gap: var(--dds-spacing-x0-125);
930
- &.Button_with-icon-left {
931
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
932
- }
933
- &.Button_with-icon-right {
934
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
935
- }
884
+ .layout_dds-l {
885
+ --dds-r-l: var(--dds-r-xs-l);
936
886
  }
937
- &.Button_just-icon,
938
- &.Button_button--is-loading.Button_no-content {
939
- padding: var(--dds-spacing-x0-25);
887
+ .layout_dds-r {
888
+ --dds-r-r: var(--dds-r-xs-r);
940
889
  }
941
- .Button_icon {
942
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
890
+ .layout_dds-t {
891
+ --dds-r-t: var(--dds-r-xs-t);
943
892
  }
944
- }
945
- .Button_button--small {
946
- &.Button_just-text {
947
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
893
+ .layout_dds-b {
894
+ --dds-r-b: var(--dds-r-xs-b);
948
895
  }
949
- &.Button_with-text-and-icon {
950
- gap: var(--dds-spacing-x0-25);
951
- &.Button_with-icon-left {
952
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
953
- }
954
- &.Button_with-icon-right {
955
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
956
- }
896
+ .layout_dds-o {
897
+ --dds-r-o: var(--dds-r-xs-o);
957
898
  }
958
- &.Button_just-icon,
959
- &.Button_button--is-loading.Button_no-content {
960
- padding: var(--dds-spacing-x0-5);
899
+ .layout_dds-o-x {
900
+ --dds-r-o-x: var(--dds-r-xs-o-x);
961
901
  }
962
- .Button_icon {
963
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
902
+ .layout_dds-o-y {
903
+ --dds-r-o-y: var(--dds-r-xs-o-y);
964
904
  }
965
- }
966
- .Button_button--medium {
967
- &.Button_just-text {
968
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
905
+ .layout_dds-display {
906
+ --dds-r-display: var(--dds-r-xs-display);
969
907
  }
970
- &.Button_with-text-and-icon {
971
- gap: var(--dds-spacing-x0-5);
972
- &.Button_with-icon-left {
973
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
974
- }
975
- &.Button_with-icon-right {
976
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
977
- }
908
+ .layout_dds-text-align {
909
+ --dds-r-text-align: var(--dds-r-xs-text-align);
978
910
  }
979
- &.Button_just-icon,
980
- &.Button_button--is-loading.Button_no-content {
981
- padding: var(--dds-spacing-x0-75);
911
+ .layout_dds-flex-dir {
912
+ --dds-r-flex-dir: var(--dds-r-xs-flex-dir);
982
913
  }
983
- .Button_icon {
984
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
914
+ .layout_dds-gap {
915
+ --dds-r-gap: var(--dds-r-xs-gap);
985
916
  }
986
- }
987
- .Button_button--large {
988
- &.Button_just-text {
989
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
917
+ .layout_dds-c-gap {
918
+ --dds-r-c-gap: var(--dds-r-xs-c-gap);
990
919
  }
991
- &.Button_with-text-and-icon {
992
- gap: var(--dds-spacing-x0-75);
993
- &.Button_with-icon-left {
994
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
995
- }
996
- &.Button_with-icon-right {
997
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
998
- }
920
+ .layout_dds-r-gap {
921
+ --dds-r-r-gap: var(--dds-r-xs-r-gap);
999
922
  }
1000
- &.Button_just-icon,
1001
- &.Button_button--is-loading.Button_no-content {
1002
- padding: var(--dds-spacing-x1);
923
+ .layout_dds-a-i {
924
+ --dds-r-a-i: var(--dds-r-xs-a-i);
1003
925
  }
1004
- .Button_icon {
1005
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
926
+ .layout_dds-a-c {
927
+ --dds-r-a-c: var(--dds-r-xs-a-c);
1006
928
  }
1007
- }
1008
- .Button_spinner-wrapper--absolute {
1009
- position: absolute;
1010
- }
1011
- .Button_icon-wrapper {
1012
- display: flex;
1013
- align-items: center;
1014
- justify-content: center;
1015
- }
1016
- .Button_button--primary {
1017
- background-color: var(--dds-color-surface-action-resting);
1018
- border-color: var(--dds-color-surface-action-resting);
1019
- color: var(--dds-color-text-on-action);
1020
- &:hover:not(.Button_button--is-loading) {
1021
- background-color: var(--dds-color-surface-action-hover);
1022
- border-color: var(--dds-color-surface-action-hover);
1023
- color: var(--dds-color-text-on-action);
929
+ .layout_dds-j-i {
930
+ --dds-r-j-i: var(--dds-r-xs-j-i);
1024
931
  }
1025
- }
1026
- .Button_button--secondary {
1027
- background-color: var(--dds-color-surface-default);
1028
- border-color: var(--dds-color-border-default);
1029
- color: var(--dds-color-text-default);
1030
- &:hover:not(.Button_button--is-loading) {
1031
- background-color: var(--dds-color-surface-hover-default);
1032
- border-color: var(--dds-color-border-action-hover);
1033
- color: var(--dds-color-text-default);
932
+ .layout_dds-j-c {
933
+ --dds-r-j-c: var(--dds-r-xs-j-c);
1034
934
  }
1035
- }
1036
- .Button_button--tertiary {
1037
- background-color: transparent;
1038
- border-color: transparent;
1039
- color: var(--dds-color-text-default);
1040
- &:hover:not(.Button_button--is-loading) {
1041
- background-color: var(--dds-color-surface-hover-default);
1042
- border-color: transparent;
1043
- color: var(--dds-color-text-default);
935
+ .layout_dds-wrap {
936
+ --dds-r-wrap: var(--dds-r-xs-wrap);
937
+ }
938
+ .layout_dds-basis {
939
+ --dds-r-basis: var(--dds-r-xs-basis);
940
+ }
941
+ .layout_dds-flow {
942
+ --dds-r-flow: var(--dds-r-xs-flow);
1044
943
  }
1045
944
  }
1046
- .Button_button--danger {
1047
- background-color: var(--dds-color-surface-action-danger-resting);
1048
- border-color: var(--dds-color-surface-action-danger-resting);
1049
- color: var(--dds-color-text-on-action);
1050
- &:hover:not(.Button_button--is-loading) {
1051
- background-color: var(--dds-color-surface-action-danger-hover);
945
+ @media (min-width: 600px) {
946
+ .layout_dds-p {
947
+ --dds-r-p: var(--dds-r-sm-p);
948
+ }
949
+ .layout_dds-p-i {
950
+ --dds-r-p-i: var(--dds-r-sm-p-i);
951
+ }
952
+ .layout_dds-p-b {
953
+ --dds-r-p-b: var(--dds-r-sm-p-b);
954
+ }
955
+ .layout_dds-m {
956
+ --dds-r-m: var(--dds-r-sm-m);
957
+ }
958
+ .layout_dds-m-i {
959
+ --dds-r-m-i: var(--dds-r-sm-m-i);
960
+ }
961
+ .layout_dds-m-b {
962
+ --dds-r-m-b: var(--dds-r-sm-m-b);
963
+ }
964
+ .layout_dds-h {
965
+ --dds-r-h: var(--dds-r-sm-h);
966
+ }
967
+ .layout_dds-max-h {
968
+ --dds-r-max-h: var(--dds-r-sm-max-h);
969
+ }
970
+ .layout_dds-min-h {
971
+ --dds-r-max-h: var(--dds-r-sm-max-h);
972
+ }
973
+ .layout_dds-w {
974
+ --dds-r-w: var(--dds-r-sm-w);
975
+ }
976
+ .layout_dds-max-w {
977
+ --dds-r-max-w: var(--dds-r-sm-max-w);
978
+ }
979
+ .layout_dds-min-w {
980
+ --dds-r-min-w: var(--dds-r-sm-min-w);
981
+ }
982
+ .layout_dds-pos {
983
+ --dds-r-pos: var(--dds-r-sm-pos);
984
+ }
985
+ .layout_dds-l {
986
+ --dds-r-l: var(--dds-r-sm-l);
987
+ }
988
+ .layout_dds-r {
989
+ --dds-r-r: var(--dds-r-sm-r);
990
+ }
991
+ .layout_dds-t {
992
+ --dds-r-t: var(--dds-r-sm-t);
993
+ }
994
+ .layout_dds-b {
995
+ --dds-r-b: var(--dds-r-sm-b);
996
+ }
997
+ .layout_dds-o {
998
+ --dds-r-o: var(--dds-r-sm-o);
999
+ }
1000
+ .layout_dds-o-x {
1001
+ --dds-r-o-x: var(--dds-r-sm-o-x);
1002
+ }
1003
+ .layout_dds-o-y {
1004
+ --dds-r-o-y: var(--dds-r-sm-o-y);
1005
+ }
1006
+ .layout_dds-display {
1007
+ --dds-r-display: var(--dds-r-sm-display);
1008
+ }
1009
+ .layout_dds-text-align {
1010
+ --dds-r-text-align: var(--dds-r-sm-text-align);
1011
+ }
1012
+ .layout_dds-flex-dir {
1013
+ --dds-r-flex-dir: var(--dds-r-sm-flex-dir);
1014
+ }
1015
+ .layout_dds-gap {
1016
+ --dds-r-gap: var(--dds-r-sm-gap);
1017
+ }
1018
+ .layout_dds-c-gap {
1019
+ --dds-r-c-gap: var(--dds-r-sm-c-gap);
1020
+ }
1021
+ .layout_dds-r-gap {
1022
+ --dds-r-r-gap: var(--dds-r-sm-r-gap);
1023
+ }
1024
+ .layout_dds-a-i {
1025
+ --dds-r-a-i: var(--dds-r-sm-a-i);
1026
+ }
1027
+ .layout_dds-a-c {
1028
+ --dds-r-a-c: var(--dds-r-sm-a-c);
1029
+ }
1030
+ .layout_dds-j-i {
1031
+ --dds-r-j-i: var(--dds-r-sm-j-i);
1032
+ }
1033
+ .layout_dds-j-c {
1034
+ --dds-r-j-c: var(--dds-r-sm-j-c);
1035
+ }
1036
+ .layout_dds-wrap {
1037
+ --dds-r-wrap: var(--dds-r-sm-wrap);
1038
+ }
1039
+ .layout_dds-basis {
1040
+ --dds-r-basis: var(--dds-r-sm-basis);
1041
+ }
1042
+ .layout_dds-flow {
1043
+ --dds-r-flow: var(--dds-r-sm-flow);
1044
+ }
1045
+ }
1046
+ @media (min-width: 960px) {
1047
+ .layout_dds-p {
1048
+ --dds-r-p: var(--dds-r-md-p);
1049
+ }
1050
+ .layout_dds-p-i {
1051
+ --dds-r-p-i: var(--dds-r-md-p-i);
1052
+ }
1053
+ .layout_dds-p-b {
1054
+ --dds-r-p-b: var(--dds-r-md-p-b);
1055
+ }
1056
+ .layout_dds-m {
1057
+ --dds-r-m: var(--dds-r-md-m);
1058
+ }
1059
+ .layout_dds-m-i {
1060
+ --dds-r-m-i: var(--dds-r-md-m-i);
1061
+ }
1062
+ .layout_dds-m-b {
1063
+ --dds-r-m-b: var(--dds-r-md-m-b);
1064
+ }
1065
+ .layout_dds-h {
1066
+ --dds-r-h: var(--dds-r-md-h);
1067
+ }
1068
+ .layout_dds-max-h {
1069
+ --dds-r-max-h: var(--dds-r-md-max-h);
1070
+ }
1071
+ .layout_dds-min-h {
1072
+ --dds-r-max-h: var(--dds-r-md-max-h);
1073
+ }
1074
+ .layout_dds-w {
1075
+ --dds-r-w: var(--dds-r-md-w);
1076
+ }
1077
+ .layout_dds-max-w {
1078
+ --dds-r-max-w: var(--dds-r-md-max-w);
1079
+ }
1080
+ .layout_dds-min-w {
1081
+ --dds-r-min-w: var(--dds-r-md-min-w);
1082
+ }
1083
+ .layout_dds-pos {
1084
+ --dds-r-pos: var(--dds-r-md-pos);
1085
+ }
1086
+ .layout_dds-l {
1087
+ --dds-r-l: var(--dds-r-md-l);
1088
+ }
1089
+ .layout_dds-r {
1090
+ --dds-r-r: var(--dds-r-md-r);
1091
+ }
1092
+ .layout_dds-t {
1093
+ --dds-r-t: var(--dds-r-md-t);
1094
+ }
1095
+ .layout_dds-b {
1096
+ --dds-r-b: var(--dds-r-md-b);
1097
+ }
1098
+ .layout_dds-o {
1099
+ --dds-r-o: var(--dds-r-md-o);
1100
+ }
1101
+ .layout_dds-o-x {
1102
+ --dds-r-o-x: var(--dds-r-md-o-x);
1103
+ }
1104
+ .layout_dds-o-y {
1105
+ --dds-r-o-y: var(--dds-r-md-o-y);
1106
+ }
1107
+ .layout_dds-display {
1108
+ --dds-r-display: var(--dds-r-md-display);
1109
+ }
1110
+ .layout_dds-text-align {
1111
+ --dds-r-text-align: var(--dds-r-md-text-align);
1112
+ }
1113
+ .layout_dds-flex-dir {
1114
+ --dds-r-flex-dir: var(--dds-r-md-flex-dir);
1115
+ }
1116
+ .layout_dds-gap {
1117
+ --dds-r-gap: var(--dds-r-md-gap);
1118
+ }
1119
+ .layout_dds-c-gap {
1120
+ --dds-r-c-gap: var(--dds-r-md-c-gap);
1121
+ }
1122
+ .layout_dds-r-gap {
1123
+ --dds-r-r-gap: var(--dds-r-md-r-gap);
1124
+ }
1125
+ .layout_dds-a-i {
1126
+ --dds-r-a-i: var(--dds-r-md-a-i);
1127
+ }
1128
+ .layout_dds-a-c {
1129
+ --dds-r-a-c: var(--dds-r-md-a-c);
1130
+ }
1131
+ .layout_dds-j-i {
1132
+ --dds-r-j-i: var(--dds-r-md-j-i);
1133
+ }
1134
+ .layout_dds-j-c {
1135
+ --dds-r-j-c: var(--dds-r-md-j-c);
1136
+ }
1137
+ .layout_dds-wrap {
1138
+ --dds-r-wrap: var(--dds-r-md-wrap);
1139
+ }
1140
+ .layout_dds-basis {
1141
+ --dds-r-basis: var(--dds-r-md-basis);
1142
+ }
1143
+ .layout_dds-flow {
1144
+ --dds-r-flow: var(--dds-r-md-flow);
1145
+ }
1146
+ }
1147
+ @media (min-width: 1280px) {
1148
+ .layout_dds-p {
1149
+ --dds-r-p: var(--dds-r-lg-p);
1150
+ }
1151
+ .layout_dds-p-i {
1152
+ --dds-r-p-i: var(--dds-r-lg-p-i);
1153
+ }
1154
+ .layout_dds-p-b {
1155
+ --dds-r-p-b: var(--dds-r-lg-p-b);
1156
+ }
1157
+ .layout_dds-m {
1158
+ --dds-r-m: var(--dds-r-lg-m);
1159
+ }
1160
+ .layout_dds-m-i {
1161
+ --dds-r-m-i: var(--dds-r-lg-m-i);
1162
+ }
1163
+ .layout_dds-m-b {
1164
+ --dds-r-m-b: var(--dds-r-lg-m-b);
1165
+ }
1166
+ .layout_dds-h {
1167
+ --dds-r-h: var(--dds-r-lg-h);
1168
+ }
1169
+ .layout_dds-max-h {
1170
+ --dds-r-max-h: var(--dds-r-lg-max-h);
1171
+ }
1172
+ .layout_dds-min-h {
1173
+ --dds-r-max-h: var(--dds-r-lg-max-h);
1174
+ }
1175
+ .layout_dds-w {
1176
+ --dds-r-w: var(--dds-r-lg-w);
1177
+ }
1178
+ .layout_dds-max-w {
1179
+ --dds-r-max-w: var(--dds-r-lg-max-w);
1180
+ }
1181
+ .layout_dds-min-w {
1182
+ --dds-r-min-w: var(--dds-r-lg-min-w);
1183
+ }
1184
+ .layout_dds-pos {
1185
+ --dds-r-pos: var(--dds-r-lg-pos);
1186
+ }
1187
+ .layout_dds-l {
1188
+ --dds-r-l: var(--dds-r-lg-l);
1189
+ }
1190
+ .layout_dds-r {
1191
+ --dds-r-r: var(--dds-r-lg-r);
1192
+ }
1193
+ .layout_dds-t {
1194
+ --dds-r-t: var(--dds-r-lg-t);
1195
+ }
1196
+ .layout_dds-b {
1197
+ --dds-r-b: var(--dds-r-lg-b);
1198
+ }
1199
+ .layout_dds-o {
1200
+ --dds-r-o: var(--dds-r-lg-o);
1201
+ }
1202
+ .layout_dds-o-x {
1203
+ --dds-r-o-x: var(--dds-r-lg-o-x);
1204
+ }
1205
+ .layout_dds-o-y {
1206
+ --dds-r-o-y: var(--dds-r-lg-o-y);
1207
+ }
1208
+ .layout_dds-display {
1209
+ --dds-r-display: var(--dds-r-lg-display);
1210
+ }
1211
+ .layout_dds-text-align {
1212
+ --dds-r-text-align: var(--dds-r-lg-text-align);
1213
+ }
1214
+ .layout_dds-flex-dir {
1215
+ --dds-r-flex-dir: var(--dds-r-lg-flex-dir);
1216
+ }
1217
+ .layout_dds-gap {
1218
+ --dds-r-gap: var(--dds-r-lg-gap);
1219
+ }
1220
+ .layout_dds-c-gap {
1221
+ --dds-r-c-gap: var(--dds-r-lg-c-gap);
1222
+ }
1223
+ .layout_dds-r-gap {
1224
+ --dds-r-r-gap: var(--dds-r-lg-r-gap);
1225
+ }
1226
+ .layout_dds-a-i {
1227
+ --dds-r-a-i: var(--dds-r-lg-a-i);
1228
+ }
1229
+ .layout_dds-a-c {
1230
+ --dds-r-a-c: var(--dds-r-lg-a-c);
1231
+ }
1232
+ .layout_dds-j-i {
1233
+ --dds-r-j-i: var(--dds-r-lg-j-i);
1234
+ }
1235
+ .layout_dds-j-c {
1236
+ --dds-r-j-c: var(--dds-r-lg-j-c);
1237
+ }
1238
+ .layout_dds-wrap {
1239
+ --dds-r-wrap: var(--dds-r-lg-wrap);
1240
+ }
1241
+ .layout_dds-basis {
1242
+ --dds-r-basis: var(--dds-r-lg-basis);
1243
+ }
1244
+ .layout_dds-flow {
1245
+ --dds-r-flow: var(--dds-r-lg-flow);
1246
+ }
1247
+ }
1248
+ @media (min-width: 1920px) {
1249
+ .layout_dds-p {
1250
+ --dds-r-p: var(--dds-r-xl-p);
1251
+ }
1252
+ .layout_dds-p-i {
1253
+ --dds-r-p-i: var(--dds-r-xl-p-i);
1254
+ }
1255
+ .layout_dds-p-b {
1256
+ --dds-r-p-b: var(--dds-r-xl-p-b);
1257
+ }
1258
+ .layout_dds-m {
1259
+ --dds-r-m: var(--dds-r-xl-m);
1260
+ }
1261
+ .layout_dds-m-i {
1262
+ --dds-r-m-i: var(--dds-r-xl-m-i);
1263
+ }
1264
+ .layout_dds-m-b {
1265
+ --dds-r-m-b: var(--dds-r-xl-m-b);
1266
+ }
1267
+ .layout_dds-h {
1268
+ --dds-r-h: var(--dds-r-xl-h);
1269
+ }
1270
+ .layout_dds-max-h {
1271
+ --dds-r-max-h: var(--dds-r-xl-max-h);
1272
+ }
1273
+ .layout_dds-min-h {
1274
+ --dds-r-min-h: var(--dds-r-xl-min-h);
1275
+ }
1276
+ .layout_dds-w {
1277
+ --dds-r-w: var(--dds-r-xl-w);
1278
+ }
1279
+ .layout_dds-max-w {
1280
+ --dds-r-max-w: var(--dds-r-xl-max-w);
1281
+ }
1282
+ .layout_dds-min-w {
1283
+ --dds-r-min-w: var(--dds-r-xl-min-w);
1284
+ }
1285
+ .layout_dds-pos {
1286
+ --dds-r-pos: var(--dds-r-xl-pos);
1287
+ }
1288
+ .layout_dds-l {
1289
+ --dds-r-l: var(--dds-r-xl-l);
1290
+ }
1291
+ .layout_dds-r {
1292
+ --dds-r-r: var(--dds-r-xl-r);
1293
+ }
1294
+ .layout_dds-t {
1295
+ --dds-r-t: var(--dds-r-xl-t);
1296
+ }
1297
+ .layout_dds-b {
1298
+ --dds-r-b: var(--dds-r-xl-b);
1299
+ }
1300
+ .layout_dds-o {
1301
+ --dds-r-o: var(--dds-r-xl-o);
1302
+ }
1303
+ .layout_dds-o-x {
1304
+ --dds-r-o-x: var(--dds-r-xl-o-x);
1305
+ }
1306
+ .layout_dds-o-y {
1307
+ --dds-r-o-y: var(--dds-r-xl-o-y);
1308
+ }
1309
+ .layout_dds-display {
1310
+ --dds-r-display: var(--dds-r-xl-display);
1311
+ }
1312
+ .layout_dds-text-align {
1313
+ --dds-r-text-align: var(--dds-r-xl-text-align);
1314
+ }
1315
+ .layout_dds-flex-dir {
1316
+ --dds-r-flex-dir: var(--dds-r-xl-flex-dir);
1317
+ }
1318
+ .layout_dds-gap {
1319
+ --dds-r-gap: var(--dds-r-xl-gap);
1320
+ }
1321
+ .layout_dds-c-gap {
1322
+ --dds-r-c-gap: var(--dds-r-xl-c-gap);
1323
+ }
1324
+ .layout_dds-r-gap {
1325
+ --dds-r-r-gap: var(--dds-r-xl-r-gap);
1326
+ }
1327
+ .layout_dds-a-i {
1328
+ --dds-r-a-i: var(--dds-r-xl-a-i);
1329
+ }
1330
+ .layout_dds-a-c {
1331
+ --dds-r-a-c: var(--dds-r-xl-a-c);
1332
+ }
1333
+ .layout_dds-j-i {
1334
+ --dds-r-j-i: var(--dds-r-xl-j-i);
1335
+ }
1336
+ .layout_dds-j-c {
1337
+ --dds-r-j-c: var(--dds-r-xl-j-c);
1338
+ }
1339
+ .layout_dds-wrap {
1340
+ --dds-r-wrap: var(--dds-r-xl-wrap);
1341
+ }
1342
+ .layout_dds-basis {
1343
+ --dds-r-basis: var(--dds-r-xl-basis);
1344
+ }
1345
+ .layout_dds-flow {
1346
+ --dds-r-flow: var(--dds-r-xl-flow);
1347
+ }
1348
+ }
1349
+
1350
+ /* src/components/layout/common/display.module.css */
1351
+ .display_xs-hide-below {
1352
+ @media only screen and (max-width: 599px) {
1353
+ display: none !important;
1354
+ }
1355
+ }
1356
+ .display_sm-hide-below {
1357
+ @media only screen and (max-width: 959px) {
1358
+ display: none !important;
1359
+ }
1360
+ }
1361
+ .display_md-hide-below {
1362
+ @media only screen and (max-width: 1279px) {
1363
+ display: none !important;
1364
+ }
1365
+ }
1366
+ .display_lg-hide-below {
1367
+ @media only screen and (max-width: 1919px) {
1368
+ display: none !important;
1369
+ }
1370
+ }
1371
+ .display_xl-hide-below {
1372
+ display: none !important;
1373
+ }
1374
+ .display_xs-hide-above {
1375
+ @media only screen and (min-width: 600px) {
1376
+ display: none !important;
1377
+ }
1378
+ }
1379
+ .display_sm-hide-above {
1380
+ @media only screen and (min-width: 960px) {
1381
+ display: none !important;
1382
+ }
1383
+ }
1384
+ .display_md-hide-above {
1385
+ @media only screen and (min-width: 1280px) {
1386
+ display: none !important;
1387
+ }
1388
+ }
1389
+ .display_lg-hide-above {
1390
+ @media only screen and (min-width: 1920px) {
1391
+ display: none !important;
1392
+ }
1393
+ }
1394
+
1395
+ /* src/components/layout/Grid/Grid.module.css */
1396
+ .Grid_dds-grid-template-columns {
1397
+ --dds-r-grid-template-columns: var(--dds-r-xs-grid-template-columns);
1398
+ grid-template-columns: var(--dds-r-grid-template-columns);
1399
+ }
1400
+ .Grid_dds-grid-column {
1401
+ --dds-r-grid-column: var(--dds-r-xs-grid-column);
1402
+ grid-column: var(--dds-r-grid-column);
1403
+ }
1404
+ .Grid_dds-grid-row {
1405
+ --dds-r-grid-row: var(--dds-r-xs-grid-row);
1406
+ grid-row: var(--dds-r-grid-row);
1407
+ }
1408
+ .Grid_dds-j-self {
1409
+ --dds-r-j-self: var(--dds-r-xs-j-self);
1410
+ grid-row: var(--dds-r-j-self);
1411
+ }
1412
+ .Grid_child--first-half {
1413
+ grid-column: 1 / calc(var(--dds-grid-col-count) / 2 + 1);
1414
+ }
1415
+ .Grid_child--second-half {
1416
+ grid-column: calc(var(--dds-grid-col-count) / 2 + 1) / -1;
1417
+ }
1418
+ @media (max-width: 599px) {
1419
+ .Grid_dds-grid-template-columns {
1420
+ --dds-r-grid-template-columns: var(--dds-r-xs-grid-template-columns);
1421
+ }
1422
+ .Grid_dds-grid-column {
1423
+ --dds-r-grid-column: var(--dds-r-xs-grid-column);
1424
+ }
1425
+ .Grid_child-col-count {
1426
+ --dds-grid-col-count: var(--dds-grid-xs-count);
1427
+ }
1428
+ .Grid_dds-grid-row {
1429
+ --dds-r-grid-row: var(--dds-r-xs-grid-row);
1430
+ }
1431
+ .Grid_dds-j-self {
1432
+ --dds-r-j-self: var(--dds-r-xs-j-self);
1433
+ }
1434
+ }
1435
+ @media (min-width: 600px) {
1436
+ .Grid_dds-grid-template-columns {
1437
+ --dds-r-grid-template-columns: var(--dds-r-sm-grid-template-columns);
1438
+ }
1439
+ .Grid_dds-grid-column {
1440
+ --dds-r-grid-column: var(--dds-r-sm-grid-column);
1441
+ }
1442
+ .Grid_child-col-count {
1443
+ --dds-grid-col-count: var(--dds-grid-sm-count);
1444
+ }
1445
+ .Grid_dds-grid-row {
1446
+ --dds-r-grid-row: var(--dds-r-sm-grid-row);
1447
+ }
1448
+ .Grid_dds-j-self {
1449
+ --dds-r-j-self: var(--dds-r-sm-j-self);
1450
+ }
1451
+ }
1452
+ @media (min-width: 960px) {
1453
+ .Grid_dds-grid-template-columns {
1454
+ --dds-r-grid-template-columns: var(--dds-r-md-grid-template-columns);
1455
+ }
1456
+ .Grid_dds-grid-column {
1457
+ --dds-r-grid-column: var(--dds-r-md-grid-column);
1458
+ }
1459
+ .Grid_child-col-count {
1460
+ --dds-grid-col-count: var(--dds-grid-md-count);
1461
+ }
1462
+ .Grid_dds-grid-row {
1463
+ --dds-r-grid-row: var(--dds-r-md-grid-row);
1464
+ }
1465
+ .Grid_dds-j-self {
1466
+ --dds-r-j-self: var(--dds-r-md-j-self);
1467
+ }
1468
+ }
1469
+ @media (min-width: 1280px) {
1470
+ .Grid_dds-grid-template-columns {
1471
+ --dds-r-grid-template-columns: var(--dds-r-lg-grid-template-columns);
1472
+ }
1473
+ .Grid_dds-grid-column {
1474
+ --dds-r-grid-column: var(--dds-r-lg-grid-column);
1475
+ }
1476
+ .Grid_child-col-count {
1477
+ --dds-grid-col-count: var(--dds-grid-lg-count);
1478
+ }
1479
+ .Grid_dds-grid-row {
1480
+ --dds-r-grid-row: var(--dds-r-lg-grid-row);
1481
+ }
1482
+ .Grid_dds-j-self {
1483
+ --dds-r-j-self: var(--dds-r-lg-j-self);
1484
+ }
1485
+ }
1486
+ @media (min-width: 1920px) {
1487
+ .Grid_dds-grid-template-columns {
1488
+ --dds-r-grid-template-columns: var(--dds-r-xl-grid-template-columns);
1489
+ }
1490
+ .Grid_dds-grid-column {
1491
+ --dds-r-grid-column: var(--dds-r-xl-grid-column);
1492
+ }
1493
+ .Grid_child-col-count {
1494
+ --dds-grid-col-count: var(--dds-grid-xl-count);
1495
+ }
1496
+ .Grid_dds-grid-row {
1497
+ --dds-r-grid-row: var(--dds-r-xl-grid-row);
1498
+ }
1499
+ .Grid_dds-j-self {
1500
+ --dds-r-j-self: var(--dds-r-xl-j-self);
1501
+ }
1502
+ }
1503
+
1504
+ /* src/components/layout/Paper/Paper.module.css */
1505
+ .Paper_background {
1506
+ background: var(--dds-paper-background);
1507
+ }
1508
+ .Paper_border {
1509
+ border: 1px solid var(--dds-paper-border);
1510
+ }
1511
+ :where(.Paper_container) {
1512
+ box-sizing: border-box;
1513
+ background-color: var(--dds-color-surface-default);
1514
+ border-radius: var(--dds-border-radius-surface);
1515
+ margin: 0;
1516
+ }
1517
+ :where(.Paper_shadow--1) {
1518
+ box-shadow: var(--dds-shadow-1);
1519
+ }
1520
+ :where(.Paper_shadow--2) {
1521
+ box-shadow: var(--dds-shadow-2);
1522
+ }
1523
+ :where(.Paper_shadow--3) {
1524
+ box-shadow: var(--dds-shadow-3);
1525
+ }
1526
+ :where(.Paper_shadow--4) {
1527
+ box-shadow: var(--dds-shadow-4);
1528
+ }
1529
+ :where(.Paper_border-radius--button) {
1530
+ border-radius: var(--dds-border-radius-button);
1531
+ }
1532
+ :where(.Paper_border-radius--surface) {
1533
+ border-radius: var(--dds-border-radius-surface);
1534
+ }
1535
+ :where(.Paper_border-radius--chip) {
1536
+ border-radius: var(--dds-border-radius-chip);
1537
+ }
1538
+ :where(.Paper_border-radius--input) {
1539
+ border-radius: var(--dds-border-radius-input);
1540
+ }
1541
+ :where(.Paper_border-radius--rounded) {
1542
+ border-radius: var(--dds-border-radius-rounded);
1543
+ }
1544
+ :where(.Paper_border-radius--0) {
1545
+ border-radius: 0;
1546
+ }
1547
+
1548
+ /* src/components/Accordion/Accordion.module.css */
1549
+ :where(.Accordion_container) {
1550
+ border-bottom: 1px solid var(--dds-color-border-default);
1551
+ }
1552
+ :where(.Accordion_container:first-child) {
1553
+ border-top: 1px solid var(--dds-color-border-default);
1554
+ }
1555
+ :where(.Accordion_header-button) {
1556
+ @media (prefers-reduced-motion: no-preference) {
1557
+ transition: background-color 0.2s, var(--dds-focus-transition);
1558
+ }
1559
+ &:hover {
1560
+ background-color: var(--dds-color-surface-hover-default);
1561
+ color: var(--dds-color-text-action-hover);
1562
+ }
1563
+ }
1564
+ .Accordion_body {
1565
+ height: var(--dds-card-accordion-body-height);
1566
+ }
1567
+
1568
+ /* src/components/helpers/AccordionBase/AccordionBase.module.css */
1569
+ :where(.AccordionBase_header-button) {
1570
+ -webkit-user-select: text;
1571
+ -moz-user-select: text;
1572
+ user-select: text;
1573
+ position: relative;
1574
+ cursor: pointer;
1575
+ display: block;
1576
+ width: 100%;
1577
+ border-radius: inherit;
1578
+ }
1579
+ .AccordionBase_header-container {
1580
+ display: flex;
1581
+ align-items: center;
1582
+ }
1583
+ .AccordionBase_header__content {
1584
+ text-align: left;
1585
+ }
1586
+ .AccordionBase_header__chevron {
1587
+ display: flex;
1588
+ align-items: center;
1589
+ justify-content: center;
1590
+ height: var(--dds-icon-size-medium);
1591
+ width: var(--dds-icon-size-medium);
1592
+ }
1593
+ .AccordionBase_body {
1594
+ overflow: hidden;
1595
+ }
1596
+ .AccordionBase_body--animated {
1597
+ @media (prefers-reduced-motion: no-preference) {
1598
+ transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1599
+ }
1600
+ }
1601
+ .AccordionBase_body--hidden {
1602
+ display: none;
1603
+ }
1604
+
1605
+ /* src/components/BackLink/BackLink.module.css */
1606
+ .BackLink_icon {
1607
+ display: inline;
1608
+ margin: 0.1em 0.25em -0.1em 0.1em;
1609
+ transform: translateY(0.05em);
1610
+ vertical-align: baseline;
1611
+ }
1612
+
1613
+ /* src/components/Breadcrumbs/Breadcrumbs.module.css */
1614
+ .Breadcrumbs_icon {
1615
+ color: var(--dds-color-icon-link);
1616
+ }
1617
+
1618
+ /* src/components/Button/Button.module.css */
1619
+ :where(.Button_button) {
1620
+ -webkit-user-select: text;
1621
+ -moz-user-select: text;
1622
+ user-select: text;
1623
+ display: inline-flex;
1624
+ align-items: center;
1625
+ justify-content: center;
1626
+ height: -moz-fit-content;
1627
+ height: fit-content;
1628
+ width: -moz-fit-content;
1629
+ width: fit-content;
1630
+ cursor: pointer;
1631
+ box-shadow: none;
1632
+ text-decoration: none;
1633
+ border-radius: var(--dds-border-radius-button);
1634
+ border: 1px solid;
1635
+ @media (prefers-reduced-motion: no-preference) {
1636
+ transition: all 0.2s;
1637
+ }
1638
+ &:active:not([aria-disabled=true]) {
1639
+ scale: 0.95;
1640
+ }
1641
+ }
1642
+ .Button_button--is-loading {
1643
+ cursor: not-allowed;
1644
+ }
1645
+ .Button_button--full-width {
1646
+ width: 100%;
1647
+ justify-content: space-between;
1648
+ &.Button_button--is-loading,
1649
+ &.Button_just-icon,
1650
+ &.Button_just-text {
1651
+ justify-content: center;
1652
+ }
1653
+ &.Button_with-text-and-icon.Button_with-icon-left {
1654
+ justify-content: left;
1655
+ }
1656
+ }
1657
+ .Button_button--xsmall {
1658
+ &.Button_just-text {
1659
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1660
+ }
1661
+ &.Button_with-text-and-icon {
1662
+ gap: var(--dds-spacing-x0-125);
1663
+ &.Button_with-icon-left {
1664
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
1665
+ }
1666
+ &.Button_with-icon-right {
1667
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1668
+ }
1669
+ }
1670
+ &.Button_just-icon,
1671
+ &.Button_button--is-loading.Button_no-content {
1672
+ padding: var(--dds-spacing-x0-25);
1673
+ }
1674
+ .Button_icon {
1675
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1676
+ }
1677
+ }
1678
+ .Button_button--small {
1679
+ &.Button_just-text {
1680
+ padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1681
+ }
1682
+ &.Button_with-text-and-icon {
1683
+ gap: var(--dds-spacing-x0-25);
1684
+ &.Button_with-icon-left {
1685
+ padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
1686
+ }
1687
+ &.Button_with-icon-right {
1688
+ padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
1689
+ }
1690
+ }
1691
+ &.Button_just-icon,
1692
+ &.Button_button--is-loading.Button_no-content {
1693
+ padding: var(--dds-spacing-x0-5);
1694
+ }
1695
+ .Button_icon {
1696
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1697
+ }
1698
+ }
1699
+ .Button_button--medium {
1700
+ &.Button_just-text {
1701
+ padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1702
+ }
1703
+ &.Button_with-text-and-icon {
1704
+ gap: var(--dds-spacing-x0-5);
1705
+ &.Button_with-icon-left {
1706
+ padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
1707
+ }
1708
+ &.Button_with-icon-right {
1709
+ padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
1710
+ }
1711
+ }
1712
+ &.Button_just-icon,
1713
+ &.Button_button--is-loading.Button_no-content {
1714
+ padding: var(--dds-spacing-x0-75);
1715
+ }
1716
+ .Button_icon {
1717
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1718
+ }
1719
+ }
1720
+ .Button_button--large {
1721
+ &.Button_just-text {
1722
+ padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1723
+ }
1724
+ &.Button_with-text-and-icon {
1725
+ gap: var(--dds-spacing-x0-75);
1726
+ &.Button_with-icon-left {
1727
+ padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
1728
+ }
1729
+ &.Button_with-icon-right {
1730
+ padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
1731
+ }
1732
+ }
1733
+ &.Button_just-icon,
1734
+ &.Button_button--is-loading.Button_no-content {
1735
+ padding: var(--dds-spacing-x1);
1736
+ }
1737
+ .Button_icon {
1738
+ font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1739
+ }
1740
+ }
1741
+ .Button_spinner-wrapper--absolute {
1742
+ position: absolute;
1743
+ }
1744
+ .Button_icon-wrapper {
1745
+ display: flex;
1746
+ align-items: center;
1747
+ justify-content: center;
1748
+ }
1749
+ .Button_button--primary {
1750
+ background-color: var(--dds-color-surface-action-resting);
1751
+ border-color: var(--dds-color-surface-action-resting);
1752
+ color: var(--dds-color-text-on-action);
1753
+ &:hover:not(.Button_button--is-loading) {
1754
+ background-color: var(--dds-color-surface-action-hover);
1755
+ border-color: var(--dds-color-surface-action-hover);
1756
+ color: var(--dds-color-text-on-action);
1757
+ }
1758
+ }
1759
+ .Button_button--secondary {
1760
+ background-color: var(--dds-color-surface-default);
1761
+ border-color: var(--dds-color-border-default);
1762
+ color: var(--dds-color-text-default);
1763
+ &:hover:not(.Button_button--is-loading) {
1764
+ background-color: var(--dds-color-surface-hover-default);
1765
+ border-color: var(--dds-color-border-action-hover);
1766
+ color: var(--dds-color-text-default);
1767
+ }
1768
+ }
1769
+ .Button_button--tertiary {
1770
+ background-color: transparent;
1771
+ border-color: transparent;
1772
+ color: var(--dds-color-text-default);
1773
+ &:hover:not(.Button_button--is-loading) {
1774
+ background-color: var(--dds-color-surface-hover-default);
1775
+ border-color: transparent;
1776
+ color: var(--dds-color-text-default);
1777
+ }
1778
+ }
1779
+ .Button_button--danger {
1780
+ background-color: var(--dds-color-surface-action-danger-resting);
1781
+ border-color: var(--dds-color-surface-action-danger-resting);
1782
+ color: var(--dds-color-text-on-action);
1783
+ &:hover:not(.Button_button--is-loading) {
1784
+ background-color: var(--dds-color-surface-action-danger-hover);
1052
1785
  border-color: var(--dds-color-surface-action-danger-hover);
1053
1786
  color: var(--dds-color-text-on-action);
1054
1787
  }
@@ -1093,9 +1826,6 @@
1093
1826
  .OverflowMenu_container {
1094
1827
  box-sizing: border-box;
1095
1828
  z-index: var(--dds-zindex-overflowmenu);
1096
- overflow-y: auto;
1097
- min-width: 180px;
1098
- max-width: 300px;
1099
1829
  }
1100
1830
  .OverflowMenu_list {
1101
1831
  display: flex;
@@ -1142,14 +1872,6 @@
1142
1872
  cursor: not-allowed;
1143
1873
  position: relative;
1144
1874
  }
1145
- .OverflowMenu_divider {
1146
- margin-inline: var(--dds-spacing-x0-5);
1147
- margin-block: var(--dds-spacing-x0);
1148
- }
1149
- .OverflowMenu_group-header {
1150
- padding-inline: var(--dds-spacing-x0-75);
1151
- padding-block-start: var(--dds-spacing-x0-75);
1152
- }
1153
1875
 
1154
1876
  /* src/components/Divider/Divider.module.css */
1155
1877
  :where(.Divider_divider) {
@@ -1216,78 +1938,251 @@
1216
1938
  transition: box-shadow 0.2s, border-color 0.2s;
1217
1939
  }
1218
1940
  }
1219
- .Card_container--filled {
1220
- background-color: var(--dds-color-brand-primary-subtle);
1221
- border-color: var(--dds-color-brand-primary-subtle);
1222
- }
1223
- .Card_container--border {
1224
- background-color: var(--dds-color-surface-default);
1225
- border-color: var(--dds-color-border-subtle);
1226
- }
1227
- .Card_container--navigation {
1228
- text-decoration: none;
1229
- display: block;
1230
- &:hover {
1231
- border-color: var(--dds-color-border-action-hover);
1232
- box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
1941
+ .Card_container--filled {
1942
+ background-color: var(--dds-color-brand-primary-subtle);
1943
+ border-color: var(--dds-color-brand-primary-subtle);
1944
+ }
1945
+ .Card_container--border {
1946
+ background-color: var(--dds-color-surface-default);
1947
+ border-color: var(--dds-color-border-subtle);
1948
+ }
1949
+ .Card_container--navigation {
1950
+ text-decoration: none;
1951
+ display: block;
1952
+ &:hover {
1953
+ border-color: var(--dds-color-border-action-hover);
1954
+ box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
1955
+ }
1956
+ }
1957
+ .Card_container--expandable {
1958
+ width: 100%;
1959
+ box-sizing: border-box;
1960
+ & + .Card_container--expandable {
1961
+ border-top: none;
1962
+ }
1963
+ }
1964
+
1965
+ /* src/components/Card/CardExpandable/CardExpandable.module.css */
1966
+ .CardExpandable_container {
1967
+ border-radius: inherit;
1968
+ }
1969
+ .CardExpandable_header-button {
1970
+ @media (prefers-reduced-motion: no-preference) {
1971
+ transition: box-shadow 0.2s, var(--dds-focus-transition);
1972
+ }
1973
+ &:hover {
1974
+ box-shadow: 0 0 0 2px var(--dds-color-border-action-hover);
1975
+ }
1976
+ }
1977
+ .CardExpandable_header-container {
1978
+ padding: var(--dds-card-accordion-header-container-padding);
1979
+ justify-content: space-between;
1980
+ @media (prefers-reduced-motion: no-preference) {
1981
+ transition: box-shadow 0.2s;
1982
+ }
1983
+ }
1984
+ .CardExpandable_header-container__chevron {
1985
+ margin-left: var(--dds-spacing-x0-5);
1986
+ }
1987
+ .CardExpandable_body {
1988
+ height: var(--dds-card-accordion-body-height);
1989
+ }
1990
+ .CardExpandable_body__content {
1991
+ padding: var(--dds-card-accordion-body-content-padding);
1992
+ }
1993
+
1994
+ /* src/components/Chip/Chip.module.css */
1995
+ .Chip_container {
1996
+ display: inline-flex;
1997
+ align-items: center;
1998
+ max-width: 100%;
1999
+ gap: var(--dds-spacing-x0-25);
2000
+ padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
2001
+ border: 1px solid var(--dds-color-border-subtle);
2002
+ border-radius: var(--dds-border-radius-chip);
2003
+ background-color: var(--dds-color-surface-subtle);
2004
+ }
2005
+
2006
+ /* src/components/Contrast/Contrast.module.css */
2007
+ :where(.Contrast_container) {
2008
+ background-color: var(--dds-color-surface-inverse-default);
2009
+ }
2010
+
2011
+ /* src/components/SelectionControl/SelectionControl.module.css */
2012
+ .SelectionControl_container {
2013
+ display: flex;
2014
+ flex-direction: column;
2015
+ gap: var(--dds-spacing-x0-125);
2016
+ }
2017
+ .SelectionControl_group {
2018
+ display: flex;
2019
+ }
2020
+ .SelectionControl_group--row {
2021
+ flex-direction: row;
2022
+ gap: var(--dds-spacing-x0-75);
2023
+ }
2024
+ .SelectionControl_group--column {
2025
+ flex-direction: column;
2026
+ gap: var(--dds-spacing-x0-5);
2027
+ }
2028
+ .SelectionControl_label {
2029
+ cursor: pointer;
2030
+ -webkit-user-select: none;
2031
+ -moz-user-select: none;
2032
+ user-select: none;
2033
+ input ~ .SelectionControl_selection-control {
2034
+ @media (prefers-reduced-motion: no-preference) {
2035
+ transition:
2036
+ box-shadow 0.2s,
2037
+ background-color 0.2s,
2038
+ border 0.2s,
2039
+ var(--dds-focus-transition);
2040
+ }
2041
+ }
2042
+ &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
2043
+ background-color: var(--dds-color-surface-hover-default);
2044
+ box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
2045
+ border-color: var(--dds-color-border-action-hover);
2046
+ }
2047
+ input:checked:enabled ~ .SelectionControl_selection-control,
2048
+ input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
2049
+ border-color: var(--dds-color-surface-action-selected);
2050
+ background-color: var(--dds-color-surface-action-selected);
2051
+ }
2052
+ &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
2053
+ &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
2054
+ border-color: var(--dds-color-surface-action-selected-disabled);
2055
+ background-color: var(--dds-color-surface-action-selected-disabled);
2056
+ }
2057
+ &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
2058
+ &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
2059
+ background-color: var(--dds-color-surface-action-hover);
2060
+ border-color: var(--dds-color-surface-action-hover);
2061
+ }
2062
+ input:checked ~ .SelectionControl_selection-control:after,
2063
+ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2064
+ display: block;
2065
+ }
2066
+ }
2067
+ .SelectionControl_label--checkbox {
2068
+ .SelectionControl_selection-control:after {
2069
+ border: solid var(--dds-color-icon-on-action);
2070
+ border-width: 0 1px 1px 0;
2071
+ left: 6px;
2072
+ top: 1px;
2073
+ width: 5px;
2074
+ height: 10px;
2075
+ transform: rotate(45deg);
2076
+ }
2077
+ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2078
+ border-width: 1px 0 0 0;
2079
+ left: 25%;
2080
+ top: 50%;
2081
+ width: 50%;
2082
+ height: 1px;
2083
+ transform: none;
1233
2084
  }
1234
2085
  }
1235
- .Card_container--expandable {
1236
- width: 100%;
1237
- box-sizing: border-box;
1238
- & + .Card_container--expandable {
1239
- border-top: none;
2086
+ .SelectionControl_label--radio {
2087
+ .SelectionControl_selection-control:after {
2088
+ border-radius: var(--dds-border-radius-rounded);
2089
+ background-color: var(--dds-color-icon-on-action);
2090
+ height: 8px;
2091
+ width: 8px;
2092
+ left: 50%;
2093
+ top: 50%;
2094
+ transform: translate(-50%, -50%);
1240
2095
  }
1241
2096
  }
1242
-
1243
- /* src/components/Card/CardExpandable/CardExpandable.module.css */
1244
- .CardExpandable_container {
1245
- border-radius: inherit;
2097
+ .SelectionControl_label--disabled {
2098
+ cursor: not-allowed;
2099
+ input:disabled ~ .SelectionControl_selection-control {
2100
+ border-color: var(--dds-color-border-default);
2101
+ }
2102
+ input:checked:disabled ~ .SelectionControl_selection-control,
2103
+ input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
2104
+ border-color: var(--dds-color-surface-action-selected-disabled);
2105
+ background-color: var(--dds-color-surface-action-selected-disabled);
2106
+ }
1246
2107
  }
1247
- .CardExpandable_header-button {
1248
- @media (prefers-reduced-motion: no-preference) {
1249
- transition: box-shadow 0.2s, var(--dds-focus-transition);
2108
+ .SelectionControl_label--readonly {
2109
+ cursor: default;
2110
+ color: var(--dds-color-text-medium);
2111
+ input ~ .SelectionControl_selection-control {
2112
+ border-color: var(--dds-color-border-default);
2113
+ background-color: var(--dds-color-surface-field-disabled);
1250
2114
  }
1251
- &:hover {
1252
- box-shadow: 0 0 0 2px var(--dds-color-border-action-hover);
2115
+ input:checked ~ .SelectionControl_selection-control,
2116
+ input[data-indeterminate=true] ~ .SelectionControl_selection-control {
2117
+ border-color: var(--dds-color-surface-action-selected-disabled);
2118
+ background-color: var(--dds-color-surface-action-selected-disabled);
1253
2119
  }
1254
2120
  }
1255
- .CardExpandable_header-container {
1256
- padding: var(--dds-card-accordion-header-container-padding);
1257
- justify-content: space-between;
1258
- @media (prefers-reduced-motion: no-preference) {
1259
- transition: box-shadow 0.2s;
2121
+ .SelectionControl_label--error {
2122
+ &:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
2123
+ background-color: var(--dds-color-surface-danger-default);
2124
+ border-color: var(--dds-color-border-danger);
2125
+ box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
2126
+ }
2127
+ input:not(:focus-visible) ~ .SelectionControl_selection-control,
2128
+ input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
2129
+ border-color: var(--dds-color-border-danger);
2130
+ box-shadow: 0 0 0 1px var(--dds-color-border-danger);
1260
2131
  }
1261
2132
  }
1262
- .CardExpandable_header-container__chevron {
1263
- margin-left: var(--dds-spacing-x0-5);
2133
+ .SelectionControl_label--no-text {
2134
+ padding: 9px;
1264
2135
  }
1265
- .CardExpandable_body {
1266
- height: var(--dds-card-accordion-body-height);
2136
+ .SelectionControl_selection-control {
2137
+ position: absolute;
2138
+ left: 0;
2139
+ box-sizing: border-box;
2140
+ border: 1px solid;
2141
+ border-color: var(--dds-color-border-default);
2142
+ background-color: var(--dds-color-surface-field-default);
2143
+ border-radius: var(--dds-border-radius-input);
2144
+ height: 18px;
2145
+ width: 18px;
2146
+ &:after {
2147
+ content: "";
2148
+ position: absolute;
2149
+ display: none;
2150
+ box-sizing: border-box;
2151
+ }
1267
2152
  }
1268
- .CardExpandable_body__content {
1269
- padding: var(--dds-card-accordion-body-content-padding);
2153
+ .SelectionControl_selection-control--radio {
2154
+ border-radius: var(--dds-border-radius-rounded);
1270
2155
  }
1271
2156
 
1272
- /* src/components/Chip/Chip.module.css */
1273
- .Chip_container {
1274
- display: inline-flex;
1275
- align-items: center;
2157
+ /* src/components/InputMessage/InputMessage.module.css */
2158
+ .InputMessage_container {
2159
+ display: flex;
2160
+ width: -moz-fit-content;
2161
+ width: fit-content;
2162
+ word-break: break-word;
1276
2163
  max-width: 100%;
2164
+ }
2165
+ .InputMessage_container--error {
2166
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
2167
+ background-color: var(--dds-color-surface-danger-default);
2168
+ border-bottom-left-radius: var(--dds-border-radius-surface);
2169
+ border-bottom-right-radius: var(--dds-border-radius-surface);
1277
2170
  gap: var(--dds-spacing-x0-25);
1278
- padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
1279
- border: 1px solid var(--dds-color-border-subtle);
1280
- border-radius: var(--dds-border-radius-chip);
1281
- background-color: var(--dds-color-surface-subtle);
2171
+ .InputMessage_icon {
2172
+ color: var(--dds-color-icon-on-danger-default);
2173
+ }
1282
2174
  }
1283
- .Chip_group {
1284
- display: flex;
1285
- gap: var(--dds-spacing-x0-75);
2175
+ .InputMessage_icon {
2176
+ margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
1286
2177
  }
1287
2178
 
1288
- /* src/components/Contrast/Contrast.module.css */
1289
- :where(.Contrast_container) {
1290
- background-color: var(--dds-color-surface-inverse-default);
2179
+ /* src/components/CookieBanner/CookieBanner.module.css */
2180
+ .CookieBanner_checkbox-label {
2181
+ padding: 0 0 0 calc(18px + var(--dds-spacing-x0-5));
2182
+ align-items: flex-start;
2183
+ & > span {
2184
+ top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
2185
+ }
1291
2186
  }
1292
2187
 
1293
2188
  /* src/components/date-inputs/common/DateInput.module.css */
@@ -1383,56 +2278,6 @@
1383
2278
  }
1384
2279
  .DateInput_popover {
1385
2280
  z-index: var(--dds-zindex-popover);
1386
- padding: var(--dds-spacing-x0-5);
1387
- }
1388
- .DateInput_popover--large-screen-hide-xs {
1389
- @media only screen and (max-width: 600px) {
1390
- display: none;
1391
- }
1392
- }
1393
- .DateInput_popover--large-screen-hide-sm {
1394
- @media only screen and (max-width: 960px) {
1395
- display: none;
1396
- }
1397
- }
1398
- .DateInput_popover--large-screen-hide-md {
1399
- @media only screen and (max-width: 1280px) {
1400
- display: none;
1401
- }
1402
- }
1403
- .DateInput_popover--large-screen-hide-lg {
1404
- @media only screen and (max-width: 1920px) {
1405
- display: none;
1406
- }
1407
- }
1408
- .DateInput_popover--large-screen-hide-xl {
1409
- display: none;
1410
- }
1411
- .DateInput_modal {
1412
- display: none;
1413
- }
1414
- .DateInput_modal--small-screen-show-xs {
1415
- @media only screen and (max-width: 600px) {
1416
- display: block;
1417
- }
1418
- }
1419
- .DateInput_modal--small-screen-show-sm {
1420
- @media only screen and (max-width: 960px) {
1421
- display: block;
1422
- }
1423
- }
1424
- .DateInput_modal--small-screen-show-md {
1425
- @media only screen and (max-width: 1280px) {
1426
- display: block;
1427
- }
1428
- }
1429
- .DateInput_modal--small-screen-show-lg {
1430
- @media only screen and (max-width: 1920px) {
1431
- display: block;
1432
- }
1433
- }
1434
- .DateInput_modal--small-screen-show-xl {
1435
- display: block;
1436
2281
  }
1437
2282
  .DateInput_modal-close-button-wrapper {
1438
2283
  display: flex;
@@ -1522,6 +2367,7 @@
1522
2367
  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
1523
2368
  --dds-focus-transition: outline-offset 0.2s;
1524
2369
  --dds-input-default-width: 320px;
2370
+ --dds-input-default-width-xsmall: 210px;
1525
2371
  --dds-transition-duration-surface-move: 0.5s;
1526
2372
  }
1527
2373
  .ThemeProvider_global-styles {
@@ -1530,37 +2376,8 @@
1530
2376
  color: var(--dds-color-text-default);
1531
2377
  }
1532
2378
 
1533
- /* src/components/InputMessage/InputMessage.module.css */
1534
- .InputMessage_container {
1535
- display: flex;
1536
- width: -moz-fit-content;
1537
- width: fit-content;
1538
- word-break: break-word;
1539
- max-width: 100%;
1540
- }
1541
- .InputMessage_container--error {
1542
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1543
- background-color: var(--dds-color-surface-danger-default);
1544
- border-bottom-left-radius: var(--dds-border-radius-surface);
1545
- border-bottom-right-radius: var(--dds-border-radius-surface);
1546
- gap: var(--dds-spacing-x0-25);
1547
- .InputMessage_icon {
1548
- color: var(--dds-color-icon-on-danger-default);
1549
- }
1550
- }
1551
- .InputMessage_icon {
1552
- margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
1553
- }
1554
-
1555
2379
  /* src/components/DescriptionList/DescriptionList.module.css */
1556
2380
  .DescriptionList_list {
1557
- margin: 0;
1558
- display: flex;
1559
- flex-direction: column;
1560
- flex-wrap: wrap;
1561
- row-gap: 0;
1562
- -moz-column-gap: var(--dds-spacing-x2);
1563
- column-gap: var(--dds-spacing-x2);
1564
2381
  & > dt:first-of-type {
1565
2382
  margin-top: var(--dds-spacing-x1);
1566
2383
  }
@@ -1617,10 +2434,12 @@
1617
2434
  }
1618
2435
  .DetailList_list--striped {
1619
2436
  .DetailList_row {
1620
- &:nth-of-type(even) {
2437
+ &:nth-of-type(4n-1),
2438
+ &:nth-of-type(4n) {
1621
2439
  background-color: var(--dds-color-surface-default);
1622
2440
  }
1623
- &:nth-of-type(odd) {
2441
+ &:nth-of-type(4n-3),
2442
+ &:nth-of-type(4n-2) {
1624
2443
  background-color: var(--dds-color-surface-subtle);
1625
2444
  }
1626
2445
  }
@@ -1647,8 +2466,12 @@
1647
2466
  padding-inline: var(--dds-spacing-x0-75);
1648
2467
  }
1649
2468
  }
1650
- .DetailList_row {
1651
- display: table-row;
2469
+ .DetailList_column {
2470
+ dt,
2471
+ dd {
2472
+ margin-inline-start: 0;
2473
+ text-align: left;
2474
+ }
1652
2475
  }
1653
2476
  .DetailList_cell {
1654
2477
  display: table-cell;
@@ -1661,30 +2484,12 @@
1661
2484
  .Drawer_container {
1662
2485
  --dds-transition-duration-drawer-move: 0.2s;
1663
2486
  --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
1664
- --dds-drawer-container-padding: calc( var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding) ) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-drawer-content-container-padding));
1665
- position: fixed;
1666
- top: 0;
1667
- height: 100%;
1668
- display: flex;
1669
- flex-direction: column-reverse;
1670
- justify-content: flex-end;
1671
- min-width: 300px;
2487
+ --dds-drawer-container-padding: var(--dds-spacing-x1) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1) - var(--dds-drawer-content-container-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-drawer-content-container-padding));
1672
2488
  z-index: var(--dds-zindex-drawer);
1673
- border-radius: 0;
1674
- padding: var(--dds-drawer-container-padding);
1675
2489
  @media (prefers-reduced-motion: no-preference) {
1676
2490
  transition: transform var(--dds-transition-duration-drawer-move);
1677
2491
  }
1678
2492
  }
1679
- .Drawer_container--small {
1680
- max-width: 400px;
1681
- }
1682
- .Drawer_container--medium {
1683
- max-width: 600px;
1684
- }
1685
- .Drawer_container--large {
1686
- max-width: 800px;
1687
- }
1688
2493
  .Drawer_container--left {
1689
2494
  left: 0;
1690
2495
  }
@@ -1704,33 +2509,19 @@
1704
2509
  transform: translate(100%);
1705
2510
  }
1706
2511
  .Drawer_content-container {
1707
- display: flex;
1708
- flex-direction: column;
1709
- gap: var(--dds-spacing-x1);
1710
2512
  padding: var(--dds-drawer-content-container-padding);
1711
2513
  }
1712
- .Drawer_button--close {
1713
- align-self: flex-end;
1714
- }
1715
-
1716
- /* src/components/EmptyContent/EmptyContent.module.css */
1717
- .EmptyContent_containter {
1718
- display: flex;
1719
- justify-content: center;
1720
- align-items: center;
1721
- min-height: var(--dds-spacing-x10);
1722
- height: 100%;
1723
- width: 100%;
1724
- background-color: var(--dds-color-surface-subtle);
1725
- padding: var(--dds-spacing-x1-5);
1726
- }
1727
- .EmptyContent_text {
1728
- max-width: 70ch;
1729
- text-align: center;
1730
- display: flex;
1731
- flex-direction: column;
1732
- gap: var(--dds-spacing-x1);
1733
- }
2514
+ .Drawer_drawer-header {
2515
+ padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-drawer-content-container-padding));
2516
+ background-color: var(--dds-color-surface-default);
2517
+ z-index: 1;
2518
+ }
2519
+ .Drawer_button--close {
2520
+ margin-left: auto;
2521
+ margin-top: calc(-1 * var(--dds-spacing-x0-125));
2522
+ }
2523
+
2524
+ /* src/components/EmptyContent/EmptyContent.module.css */
1734
2525
  .EmptyContent_message {
1735
2526
  color: var(--dds-text-color--subtle);
1736
2527
  }
@@ -1831,109 +2622,13 @@
1831
2622
  height: var(--dds-icon-size-large);
1832
2623
  }
1833
2624
 
1834
- /* src/components/Stack/Stack.module.css */
1835
- .Stack_stack {
1836
- display: flex;
1837
- align-items: var(--dds-stack-align-items);
1838
- justify-content: var(--dds-stack-justify-content);
1839
- }
1840
- .Stack_horizontal {
1841
- flex-direction: row;
1842
- }
1843
- .Stack_vertical {
1844
- flex-direction: column;
1845
- }
1846
- .Stack_gap-0 {
1847
- gap: 0;
1848
- }
1849
- .Stack_gap-x-0-125 {
1850
- gap: var(--dds-spacing-x0-125);
1851
- }
1852
- .Stack_gap-x-0-25 {
1853
- gap: var(--dds-spacing-x0-25);
1854
- }
1855
- .Stack_gap-x-0-5 {
1856
- gap: var(--dds-spacing-x0-5);
1857
- }
1858
- .Stack_gap-x-0-75 {
1859
- gap: var(--dds-spacing-x0-75);
1860
- }
1861
- .Stack_gap-x-1 {
1862
- gap: var(--dds-spacing-x1);
1863
- }
1864
- .Stack_gap-x-1-5 {
1865
- gap: var(--dds-spacing-x1-5);
1866
- }
1867
- .Stack_gap-x-2 {
1868
- gap: var(--dds-spacing-x2);
1869
- }
1870
- .Stack_gap-x-2-5 {
1871
- gap: var(--dds-spacing-x2-5);
1872
- }
1873
- .Stack_gap-x-3 {
1874
- gap: var(--dds-spacing-x3);
1875
- }
1876
- .Stack_gap-x-4 {
1877
- gap: var(--dds-spacing-x4);
1878
- }
1879
- .Stack_gap-x-6 {
1880
- gap: var(--dds-spacing-x6);
1881
- }
1882
- .Stack_gap-x-10 {
1883
- gap: var(--dds-spacing-x10);
1884
- }
1885
- .Stack_padding-0 {
1886
- padding: 0;
1887
- }
1888
- .Stack_padding-x-0-125 {
1889
- padding: var(--dds-spacing-x0-125);
1890
- }
1891
- .Stack_padding-x-0-25 {
1892
- padding: var(--dds-spacing-x0-25);
1893
- }
1894
- .Stack_padding-x-0-5 {
1895
- padding: var(--dds-spacing-x0-5);
1896
- }
1897
- .Stack_padding-x-0-75 {
1898
- padding: var(--dds-spacing-x0-75);
1899
- }
1900
- .Stack_padding-x-1 {
1901
- padding: var(--dds-spacing-x1);
1902
- }
1903
- .Stack_padding-x-1-5 {
1904
- padding: var(--dds-spacing-x1-5);
1905
- }
1906
- .Stack_padding-x-2 {
1907
- padding: var(--dds-spacing-x2);
1908
- }
1909
- .Stack_padding-x-2-5 {
1910
- padding: var(--dds-spacing-x2-5);
1911
- }
1912
- .Stack_padding-x-3 {
1913
- padding: var(--dds-spacing-x3);
1914
- }
1915
- .Stack_padding-x-4 {
1916
- padding: var(--dds-spacing-x4);
1917
- }
1918
- .Stack_padding-x-6 {
1919
- padding: var(--dds-spacing-x6);
1920
- }
1921
- .Stack_padding-x-10 {
1922
- padding: var(--dds-spacing-x10);
1923
- }
1924
-
1925
2625
  /* src/components/TextArea/TextArea.module.css */
1926
2626
  .TextArea_textarea {
1927
- width: var(--dds-text-area-width);
1928
2627
  height: auto;
1929
2628
  resize: vertical;
1930
2629
  vertical-align: bottom;
1931
2630
  padding-bottom: var(--dds-spacing-x0-5);
1932
2631
  }
1933
- .TextArea_message-container {
1934
- display: flex;
1935
- justify-content: space-between;
1936
- }
1937
2632
 
1938
2633
  /* src/components/Tooltip/Tooltip.module.css */
1939
2634
  .Tooltip_container {
@@ -1964,20 +2659,12 @@
1964
2659
  }
1965
2660
 
1966
2661
  /* src/components/FileUploader/FileUploader.module.css */
1967
- .FileUploader_container {
1968
- width: var(--dds-input-default-width);
1969
- }
1970
2662
  .FileUploader_input-container {
1971
2663
  box-sizing: border-box;
1972
- border: 2px solid;
1973
- border-style: dashed;
1974
- display: flex;
1975
- flex-direction: column;
1976
- gap: var(--dds-spacing-x1);
2664
+ border: 2px dashed;
1977
2665
  border-color: var(--dds-color-border-default);
1978
2666
  background-color: var(--dds-color-surface-default);
1979
2667
  border-radius: var(--dds-border-radius-surface);
1980
- padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
1981
2668
  @media (prefers-reduced-motion: no-preference) {
1982
2669
  transition: background-color 0.2s, border-color 0.2s;
1983
2670
  }
@@ -1992,19 +2679,7 @@
1992
2679
  .FileUploader_input-container--no-drag-zone {
1993
2680
  padding: var(--dds-spacing-x0-5) 0;
1994
2681
  }
1995
- .FileUploader_file {
1996
- display: flex;
1997
- justify-content: space-between;
1998
- align-items: center;
1999
- gap: var(--dds-spacing-x0-75);
2000
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
2001
- margin-top: var(--dds-spacing-x0-5);
2002
- background-color: var(--dds-color-surface-subtle);
2003
- border-radius: var(--dds-border-radius-surface);
2004
- border: 1px solid var(--dds-color-border-default);
2005
- }
2006
2682
  .FileUploader_file--invalid {
2007
- border: 1px solid var(--dds-color-border-danger);
2008
2683
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
2009
2684
  }
2010
2685
  .FileUploader_file__icon--invalid {
@@ -2026,21 +2701,6 @@
2026
2701
  padding-block: var(--dds-spacing-x4);
2027
2702
  }
2028
2703
  }
2029
- .Footer_logo--xs-hide {
2030
- @media only screen and (max-width: 600px) {
2031
- display: none;
2032
- }
2033
- }
2034
- .Footer_logo--sm-hide {
2035
- @media only screen and (max-width: 960px) {
2036
- display: none;
2037
- }
2038
- }
2039
- .Footer_logo--md-hide {
2040
- @media only screen and (max-width: 1280px) {
2041
- display: none;
2042
- }
2043
- }
2044
2704
  .Footer_left {
2045
2705
  display: flex;
2046
2706
  flex-direction: column;
@@ -2109,99 +2769,12 @@
2109
2769
  margin-right: var(--dds-spacing-x0-75);
2110
2770
  }
2111
2771
 
2112
- /* src/components/Grid/Grid.module.css */
2113
- .Grid_grid {
2114
- display: grid;
2115
- grid-template-columns: repeat(var(--dds-grid-xs-count), minmax(0, 1fr));
2116
- -moz-column-gap: var(--dds-grid-xs-gutter-size);
2117
- column-gap: var(--dds-grid-xs-gutter-size);
2118
- margin-inline: var(--dds-spacing-x1);
2119
- max-width: var(--dds-grid-xs-max-width);
2120
- row-gap: var(--dds-grid-xs-row-gap);
2121
- @media only screen and (min-width: 600px) {
2122
- grid-template-columns: repeat(var(--dds-grid-sm-count), minmax(0, 1fr));
2123
- -moz-column-gap: var(--dds-grid-sm-gutter-size);
2124
- column-gap: var(--dds-grid-sm-gutter-size);
2125
- margin-inline: var(--dds-spacing-x2);
2126
- max-width: var(--dds-grid-sm-max-width);
2127
- row-gap: var(--dds-grid-sm-row-gap);
2128
- }
2129
- @media only screen and (min-width: 960px) {
2130
- grid-template-columns: repeat(var(--dds-grid-md-count), minmax(0, 1fr));
2131
- -moz-column-gap: var(--dds-grid-md-gutter-size);
2132
- column-gap: var(--dds-grid-md-gutter-size);
2133
- margin-inline: var(--dds-spacing-x4);
2134
- max-width: var(--dds-grid-md-max-width);
2135
- row-gap: var(--dds-grid-md-row-gap);
2136
- }
2137
- @media only screen and (min-width: 1280px) {
2138
- grid-template-columns: repeat(var(--dds-grid-lg-count), minmax(0, 1fr));
2139
- -moz-column-gap: var(--dds-grid-lg-gutter-size);
2140
- column-gap: var(--dds-grid-lg-gutter-size);
2141
- margin-inline: var(--dds-spacing-x6);
2142
- max-width: var(--dds-grid-lg-max-width);
2143
- row-gap: var(--dds-grid-lg-row-gap);
2144
- }
2145
- @media only screen and (min-width: 1920px) {
2146
- grid-template-columns: repeat(var(--dds-grid-xl-count), minmax(0, 1fr));
2147
- -moz-column-gap: var(--dds-grid-xl-gutter-size);
2148
- column-gap: var(--dds-grid-xl-gutter-size);
2149
- margin-inline: var(--dds-spacing-x10);
2150
- max-width: var(--dds-grid-xl-max-width);
2151
- row-gap: var(--dds-grid-xl-row-gap);
2152
- }
2153
- }
2154
- .Grid_grid-child {
2155
- --dds-grid-half-col-count: var(--dds-grid-xs-count);
2156
- @media only screen and (min-width: 600px) {
2157
- --dds-grid-half-col-count: var(--dds-grid-sm-count);
2158
- }
2159
- @media only screen and (min-width: 960px) {
2160
- --dds-grid-half-col-count: var(--dds-grid-md-count);
2161
- }
2162
- @media only screen and (min-width: 1280px) {
2163
- --dds-grid-half-col-count: var(--dds-grid-lg-count);
2164
- }
2165
- @media only screen and (min-width: 1920px) {
2166
- --dds-grid-half-col-count: var(--dds-grid-xl-count);
2167
- }
2168
- grid-row: var(--dds-grid-child-grid-row);
2169
- justify-self: var(--dds-grid-child-justify-self);
2170
- }
2171
- .Grid_grid-child--all {
2172
- grid-column: 1 / -1;
2173
- }
2174
- .Grid_grid-child--first-half {
2175
- grid-column: 1 / calc(var(--dds-grid-half-col-count) / 2 + 1);
2176
- }
2177
- .Grid_grid-child--second-half {
2178
- grid-column: calc(var(--dds-grid-half-col-count) / 2 + 1) / -1;
2179
- }
2180
- .Grid_grid-child--custom {
2181
- grid-column: var(--dds-grid-child-xs-grid-column-custom);
2182
- @media only screen and (min-width: 600px) {
2183
- grid-column: var(--dds-grid-child-sm-grid-column-custom);
2184
- }
2185
- @media only screen and (min-width: 960px) {
2186
- grid-column: var(--dds-grid-child-md-grid-column-custom);
2187
- }
2188
- @media only screen and (min-width: 1280px) {
2189
- grid-column: var(--dds-grid-child-lg-grid-column-custom);
2190
- }
2191
- @media only screen and (min-width: 1920px) {
2192
- grid-column: var(--dds-grid-child-xl-grid-column-custom);
2193
- }
2194
- }
2195
-
2196
2772
  /* src/components/InlineButton/InlineButton.module.css */
2197
2773
  .InlineButton_button {
2198
2774
  display: inline;
2199
2775
  }
2200
2776
 
2201
2777
  /* src/components/InlineEdit/InlineEdit.module.css */
2202
- .InlineEdit_container {
2203
- position: relative;
2204
- }
2205
2778
  .InlineEdit_inline-input {
2206
2779
  width: 100%;
2207
2780
  padding: var(--dds-spacing-x0-25);
@@ -2231,9 +2804,6 @@
2231
2804
  .InlineEdit_inline-input--with-icon {
2232
2805
  padding-left: var(--dds-spacing-x2);
2233
2806
  }
2234
- .InlineEdit_inline-input--with-icon--is-editing {
2235
- padding-left: var(--dds-spacing-x0-25);
2236
- }
2237
2807
  .InlineEdit_inline-textarea {
2238
2808
  resize: vertical;
2239
2809
  }
@@ -2249,50 +2819,13 @@
2249
2819
 
2250
2820
  /* src/components/InternalHeader/InternalHeader.module.css */
2251
2821
  .InternalHeader_bar {
2252
- display: flex;
2253
- align-items: center;
2254
2822
  background-color: var(--dds-color-surface-default);
2255
2823
  border-bottom: 1px solid var(--dds-color-border-default);
2256
2824
  min-height: 58px;
2257
- gap: var(--dds-spacing-x1-5);
2258
- padding-inline: var(--dds-spacing-x1-5);
2259
2825
  .InternalHeader_bar-separator {
2260
2826
  margin-left: auto;
2261
2827
  }
2262
2828
  }
2263
- .InternalHeader_bar--small-screen-xs {
2264
- @media only screen and (max-width: 600px) {
2265
- gap: var(--dds-spacing-x1);
2266
- padding-inline-start: var(--dds-spacing-x1);
2267
- padding-inline-end: var(--dds-spacing-x0-5);
2268
- }
2269
- }
2270
- .InternalHeader_bar--small-screen-sm {
2271
- @media only screen and (max-width: 960px) {
2272
- gap: var(--dds-spacing-x1);
2273
- padding-inline-start: var(--dds-spacing-x1);
2274
- padding-inline-end: var(--dds-spacing-x0-5);
2275
- }
2276
- }
2277
- .InternalHeader_bar--small-screen-md {
2278
- @media only screen and (max-width: 1280px) {
2279
- gap: var(--dds-spacing-x1);
2280
- padding-inline-start: var(--dds-spacing-x1);
2281
- padding-inline-end: var(--dds-spacing-x0-5);
2282
- }
2283
- }
2284
- .InternalHeader_bar--small-screen-lg {
2285
- @media only screen and (max-width: 1920px) {
2286
- gap: var(--dds-spacing-x1);
2287
- padding-inline-start: var(--dds-spacing-x1);
2288
- padding-inline-end: var(--dds-spacing-x0-5);
2289
- }
2290
- }
2291
- .InternalHeader_bar--small-screen-xl {
2292
- gap: var(--dds-spacing-x1);
2293
- padding-inline-start: var(--dds-spacing-x1);
2294
- padding-inline-end: var(--dds-spacing-x0-5);
2295
- }
2296
2829
  .InternalHeader_bar--with-nav {
2297
2830
  .InternalHeader_bar-separator {
2298
2831
  margin-left: 0;
@@ -2312,82 +2845,6 @@
2312
2845
  width: 100%;
2313
2846
  gap: var(--dds-spacing-x1-5);
2314
2847
  }
2315
- .InternalHeader_nav-list--small-screen {
2316
- align-items: initial;
2317
- flex-direction: column;
2318
- }
2319
- .InternalHeader_nav-list--small-screen-xs,
2320
- .InternalHeader_context-menu-button-without-nav-xs {
2321
- @media only screen and (max-width: 600px) {
2322
- display: none;
2323
- }
2324
- }
2325
- .InternalHeader_nav-list--small-screen-sm,
2326
- .InternalHeader_context-menu-button-without-nav-sm {
2327
- @media only screen and (max-width: 960px) {
2328
- display: none;
2329
- }
2330
- }
2331
- .InternalHeader_nav-list--small-screen-md,
2332
- .InternalHeader_context-menu-button-without-nav-md {
2333
- @media only screen and (max-width: 1280px) {
2334
- display: none;
2335
- }
2336
- }
2337
- .InternalHeader_nav-list--small-screen-lg,
2338
- .InternalHeader_context-menu-button-without-nav-lg {
2339
- @media only screen and (max-width: 1920px) {
2340
- display: none;
2341
- }
2342
- }
2343
- .InternalHeader_nav-list--small-screen-xl,
2344
- .InternalHeader_context-menu-button-without-nav-xl {
2345
- display: none;
2346
- }
2347
- .InternalHeader_nav--in-menu--small-screen,
2348
- .InternalHeader_context-menu-group--small-screen-only,
2349
- .InternalHeader_context-menu-button-with-nav,
2350
- .InternalHeader_menu-divider {
2351
- display: none;
2352
- }
2353
- .InternalHeader_nav--in-menu--small-screen-xs,
2354
- .InternalHeader_context-menu-group--small-screen-only-xs,
2355
- .InternalHeader_context-menu-button-with-nav-xs,
2356
- .InternalHeader_menu-divider--small-screen-xs {
2357
- @media only screen and (max-width: 600px) {
2358
- display: block;
2359
- }
2360
- }
2361
- .InternalHeader_nav--in-menu--small-screen-sm,
2362
- .InternalHeader_context-menu-group--small-screen-only-sm,
2363
- .InternalHeader_context-menu-button-with-nav-sm,
2364
- .InternalHeader_menu-divider--small-screen-sm {
2365
- @media only screen and (max-width: 960px) {
2366
- display: block;
2367
- }
2368
- }
2369
- .InternalHeader_nav--in-menu--small-screen-md,
2370
- .InternalHeader_context-menu-group--small-screen-only-md,
2371
- .InternalHeader_context-menu-button-with-nav-md,
2372
- .InternalHeader_menu-divider--small-screen-md {
2373
- @media only screen and (max-width: 1280px) {
2374
- display: block;
2375
- }
2376
- }
2377
- .InternalHeader_nav--in-menu--small-screen-lg,
2378
- .InternalHeader_context-menu-group--small-screen-only-lg,
2379
- .InternalHeader_context-menu-button-with-nav-lg,
2380
- .InternalHeader_menu-divider--small-screen-lg {
2381
- @media only screen and (max-width: 1920px) {
2382
- display: block;
2383
- }
2384
- }
2385
- .InternalHeader_nav--in-menu--small-screen-xl,
2386
- .InternalHeader_context-menu-group--small-screen-only-xl,
2387
- .InternalHeader_context-menu-button-with-nav-xl,
2388
- .InternalHeader_menu-divider--small-screen-xl {
2389
- display: block;
2390
- }
2391
2848
  .InternalHeader_nav-list__item {
2392
2849
  display: flex;
2393
2850
  }
@@ -2482,11 +2939,7 @@
2482
2939
  .LocalMessage_container {
2483
2940
  border: 1px solid;
2484
2941
  box-sizing: border-box;
2485
- display: grid;
2486
- align-items: center;
2487
2942
  border-radius: var(--dds-border-radius-surface);
2488
- padding: var(--dds-spacing-x0-75);
2489
- gap: var(--dds-spacing-x0-5);
2490
2943
  }
2491
2944
  .LocalMessage_container--info {
2492
2945
  border-color: var(--dds-color-border-info);
@@ -2535,143 +2988,49 @@
2535
2988
  grid-template-areas: "icon icon" "text text";
2536
2989
  grid-template-columns: 1fr min-content;
2537
2990
  }
2538
- .LocalMessage_container--vertical--closable {
2539
- grid-template-areas: "icon closeButton" "text text";
2540
- grid-template-columns: 1fr;
2541
- }
2542
- .LocalMessage_container__text {
2543
- grid-area: text;
2544
- padding-right: var(--dds-spacing-x0-75);
2545
- }
2546
- .LocalMessage_container__icon {
2547
- grid-area: icon;
2548
- }
2549
- .LocalMessage_container__button {
2550
- grid-area: closeButton;
2551
- margin: calc(0px - var(--dds-spacing-x0-75)) 0;
2552
- }
2553
-
2554
- /* src/components/Modal/Modal.module.css */
2555
- .Modal_container {
2556
- --dds-modal-content-padding: var(--dds-spacing-x0-25);
2557
- --dds-modal-container-padding: calc( var(--dds-spacing-x1) - var(--dds-modal-content-padding) ) calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding));
2558
- display: flex;
2559
- flex-direction: column;
2560
- min-width: 200px;
2561
- padding: var(--dds-modal-container-padding);
2562
- }
2563
- .Modal_container-scrollable {
2564
- max-height: calc(100vh - var(--dds-spacing-x1));
2565
- overflow: auto;
2566
- }
2567
- .Modal_content {
2568
- display: grid;
2569
- padding-right: calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding));
2570
- gap: var(--dds-spacing-x1);
2571
- }
2572
- .Modal_body {
2573
- padding: var(--dds-modal-content-padding);
2574
- }
2575
- .Modal_header {
2576
- padding: var(--dds-modal-content-padding);
2577
- }
2578
- .Modal_actions {
2579
- display: flex;
2580
- flex-wrap: wrap;
2581
- gap: var(--dds-spacing-x1);
2582
- }
2583
- .Modal_close-button {
2584
- align-self: flex-end;
2585
- }
2586
-
2587
- /* src/components/Pagination/Pagination.module.css */
2588
- .Pagination_container {
2589
- display: flex;
2590
- gap: var(--dds-spacing-x0-75);
2591
- justify-content: space-between;
2592
- flex-wrap: wrap;
2593
- }
2594
- .Pagination_container--small-screen-xs {
2595
- @media only screen and (max-width: 600px) {
2596
- flex-direction: column;
2597
- align-items: center;
2598
- }
2599
- }
2600
- .Pagination_container--small-screen-sm {
2601
- @media only screen and (max-width: 960px) {
2602
- flex-direction: column;
2603
- align-items: center;
2604
- }
2605
- }
2606
- .Pagination_container--small-screen-md {
2607
- @media only screen and (max-width: 1280px) {
2608
- flex-direction: column;
2609
- align-items: center;
2610
- }
2611
- }
2612
- .Pagination_container--small-screen-lg {
2613
- @media only screen and (max-width: 1920px) {
2614
- flex-direction: column;
2615
- align-items: center;
2616
- }
2617
- }
2618
- .Pagination_container--small-screen-xl {
2619
- flex-direction: column;
2620
- align-items: center;
2621
- }
2622
- .Pagination_nav {
2623
- display: flex;
2624
- align-items: center;
2625
- }
2626
- .Pagination_nav--large-screen-hide-xs {
2627
- @media only screen and (max-width: 600px) {
2628
- display: none;
2629
- }
2630
- }
2631
- .Pagination_nav--large-screen-hide-sm {
2632
- @media only screen and (max-width: 960px) {
2633
- display: none;
2634
- }
2635
- }
2636
- .Pagination_nav--large-screen-hide-md {
2637
- @media only screen and (max-width: 1280px) {
2638
- display: none;
2639
- }
2991
+ .LocalMessage_container--vertical--closable {
2992
+ grid-template-areas: "icon closeButton" "text text";
2993
+ grid-template-columns: 1fr;
2640
2994
  }
2641
- .Pagination_nav--large-screen-hide-lg {
2642
- @media only screen and (max-width: 1920px) {
2643
- display: none;
2644
- }
2995
+ .LocalMessage_container__text {
2996
+ grid-area: text;
2997
+ padding-right: var(--dds-spacing-x0-75);
2645
2998
  }
2646
- .Pagination_nav--large-screen-hide-xl {
2647
- display: none;
2999
+ .LocalMessage_container__icon {
3000
+ grid-area: icon;
2648
3001
  }
2649
- .Pagination_nav--small-screen {
2650
- display: none;
3002
+ .LocalMessage_container__button {
3003
+ grid-area: closeButton;
3004
+ margin: calc(0px - var(--dds-spacing-x0-75)) 0;
2651
3005
  }
2652
- .Pagination_nav--small-screen-show-xs {
2653
- @media only screen and (max-width: 600px) {
2654
- display: block;
2655
- }
3006
+
3007
+ /* src/components/Modal/Modal.module.css */
3008
+ .Modal_container {
3009
+ --dds-modal-content-padding: var(--dds-spacing-x0-25);
3010
+ --dds-modal-container-padding: var(--dds-spacing-x1) calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding)) calc(var(--dds-spacing-x1-5) - var(--dds-modal-content-padding));
3011
+ padding: var(--dds-modal-container-padding);
2656
3012
  }
2657
- .Pagination_nav--small-screen-show-sm {
2658
- @media only screen and (max-width: 960px) {
2659
- display: block;
2660
- }
3013
+ .Modal_container-scrollable {
3014
+ max-height: calc(100vh - var(--dds-spacing-x1));
3015
+ overflow: auto;
2661
3016
  }
2662
- .Pagination_nav--small-screen-show-md {
2663
- @media only screen and (max-width: 1280px) {
2664
- display: block;
2665
- }
3017
+ .Modal_header-container {
3018
+ background-color: var(--dds-color-surface-default);
3019
+ padding-bottom: calc(var(--dds-spacing-x0-75) - var(--dds-modal-content-padding));
3020
+ z-index: 1;
2666
3021
  }
2667
- .Pagination_nav--small-screen-show-lg {
2668
- @media only screen and (max-width: 1920px) {
2669
- display: block;
2670
- }
3022
+ .Modal_close-button {
3023
+ margin-left: auto;
3024
+ margin-top: calc(-1 * var(--dds-spacing-x0-125));
2671
3025
  }
2672
- .Pagination_nav--small-screen-show-xl {
2673
- display: block;
3026
+ .Modal_content {
3027
+ padding-right: calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding));
3028
+ }
3029
+ .Modal_body {
3030
+ padding: var(--dds-modal-content-padding);
2674
3031
  }
3032
+
3033
+ /* src/components/Pagination/Pagination.module.css */
2675
3034
  .Pagination_list {
2676
3035
  display: grid;
2677
3036
  grid-auto-flow: column;
@@ -2698,11 +3057,6 @@
2698
3057
  }
2699
3058
 
2700
3059
  /* src/components/Select/Select.module.css */
2701
- .Select_container {
2702
- margin: 0;
2703
- position: relative;
2704
- width: var(--dds-select-width);
2705
- }
2706
3060
  .Select_container--disabled {
2707
3061
  cursor: not-allowed;
2708
3062
  }
@@ -2739,17 +3093,12 @@
2739
3093
  }
2740
3094
 
2741
3095
  /* src/components/Select/NativeSelect/NativeSelect.module.css */
2742
- .NativeSelect_container {
2743
- position: relative;
2744
- width: -moz-fit-content;
2745
- width: fit-content;
2746
- }
2747
3096
  .NativeSelect_select {
2748
3097
  -webkit-appearance: none;
2749
3098
  -moz-appearance: none;
2750
3099
  appearance: none;
2751
- width: var(--dds-native-select-width);
2752
3100
  text-overflow: ellipsis;
3101
+ width: 100%;
2753
3102
  &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
2754
3103
  border-color: var(--dds-color-border-action-hover);
2755
3104
  box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
@@ -2815,108 +3164,78 @@
2815
3164
 
2816
3165
  /* src/components/PhoneInput/PhoneInput.module.css */
2817
3166
  .PhoneInput_inputs-container {
2818
- display: flex;
2819
- flex-direction: row;
2820
3167
  .PhoneInput_input {
2821
3168
  border-top-left-radius: 0;
2822
3169
  border-bottom-left-radius: 0;
2823
- width: var(--dds-phone-input-width);
2824
3170
  }
2825
- .PhoneInput_select {
2826
- width: 8rem;
3171
+ select {
2827
3172
  border-top-right-radius: 0;
2828
3173
  border-bottom-right-radius: 0;
2829
- margin-right: -1px;
2830
3174
  }
2831
- .PhoneInput_select--xsmall {
2832
- width: 5rem;
3175
+ .PhoneInput_select > div {
3176
+ margin-right: -1px;
2833
3177
  }
2834
3178
  }
2835
3179
  .PhoneInput_inputs-container--small-screen-xs {
2836
3180
  @media only screen and (max-width: 600px) {
2837
- flex-direction: column;
2838
- width: var(--dds-phone-input-width);
2839
3181
  .PhoneInput_input {
2840
- border-top-left-radius: 0;
2841
3182
  border-top-right-radius: 0;
2842
- width: 100%;
2843
3183
  }
2844
- .PhoneInput_select {
3184
+ select {
2845
3185
  border-bottom-left-radius: 0;
2846
3186
  border-bottom-right-radius: 0;
2847
- width: 100%;
2848
3187
  margin-bottom: -1px;
2849
3188
  }
2850
3189
  }
2851
3190
  }
2852
3191
  .PhoneInput_inputs-container--small-screen-sm {
2853
3192
  @media only screen and (max-width: 960px) {
2854
- flex-direction: column;
2855
- width: var(--dds-phone-input-width);
2856
3193
  .PhoneInput_input {
2857
- border-top-left-radius: 0;
2858
3194
  border-top-right-radius: 0;
2859
- width: 100%;
2860
3195
  }
2861
- .PhoneInput_select {
3196
+ select {
2862
3197
  border-bottom-left-radius: 0;
2863
3198
  border-bottom-right-radius: 0;
2864
- width: 100%;
2865
3199
  margin-bottom: -1px;
2866
3200
  }
2867
3201
  }
2868
3202
  }
2869
3203
  .PhoneInput_inputs-container--small-screen-md {
2870
3204
  @media only screen and (max-width: 1280px) {
2871
- flex-direction: column;
2872
- width: var(--dds-phone-input-width);
2873
3205
  .PhoneInput_input {
2874
- border-top-left-radius: 0;
2875
3206
  border-top-right-radius: 0;
2876
- width: 100%;
2877
3207
  }
2878
- .PhoneInput_select {
3208
+ select {
2879
3209
  border-bottom-left-radius: 0;
2880
3210
  border-bottom-right-radius: 0;
2881
- width: 100%;
2882
3211
  margin-bottom: -1px;
2883
3212
  }
2884
3213
  }
2885
3214
  }
2886
3215
  .PhoneInput_inputs-container--small-screen-lg {
2887
3216
  @media only screen and (max-width: 1920px) {
2888
- flex-direction: column;
2889
- width: var(--dds-phone-input-width);
2890
3217
  .PhoneInput_input {
2891
- border-top-left-radius: 0;
2892
3218
  border-top-right-radius: 0;
2893
- width: 100%;
2894
3219
  }
2895
- .PhoneInput_select {
3220
+ select {
2896
3221
  border-bottom-left-radius: 0;
2897
3222
  border-bottom-right-radius: 0;
2898
- width: 100%;
2899
3223
  margin-bottom: -1px;
2900
3224
  }
2901
3225
  }
2902
3226
  }
2903
3227
  .PhoneInput_inputs-container--small-screen-xl {
2904
- flex-direction: column;
2905
- width: var(--dds-phone-input-width);
2906
3228
  .PhoneInput_input {
2907
- border-top-left-radius: 0;
2908
3229
  border-top-right-radius: 0;
2909
- width: 100%;
2910
3230
  }
2911
- .PhoneInput_select {
3231
+ select {
2912
3232
  border-bottom-left-radius: 0;
2913
3233
  border-bottom-right-radius: 0;
2914
- width: 100%;
2915
3234
  margin-bottom: -1px;
2916
3235
  }
2917
3236
  }
2918
- .PhoneInput_select:focus-visible,
2919
- .PhoneInput_select:hover {
3237
+ select:focus-visible,
3238
+ select:hover {
2920
3239
  z-index: var(--dds-zindex-absolute-element);
2921
3240
  & ~ svg {
2922
3241
  z-index: var(--dds-zindex-absolute-element);
@@ -3072,25 +3391,12 @@
3072
3391
  }
3073
3392
 
3074
3393
  /* src/components/ProgressBar/ProgressBar.module.css */
3075
- .ProgressBar_container {
3076
- width: 100%;
3077
- }
3078
3394
  .ProgressBar_progress {
3079
- width: var(--dds-progressbar-width);
3080
- height: 48px;
3081
3395
  background-color: var(--dds-color-surface-medium);
3082
3396
  border: 1px solid var(--dds-color-border-default);
3083
3397
  border-radius: var(--dds-border-radius-surface);
3084
3398
  }
3085
- .ProgressBar_progress--small {
3086
- height: var(--dds-spacing-x0-75);
3087
- }
3088
- .ProgressBar_progress--medium {
3089
- height: var(--dds-spacing-x1-5);
3090
- }
3091
3399
  .ProgressBar_fill {
3092
- height: 100%;
3093
- width: var(--dds-progressbar-fill-width);
3094
3400
  background-color: var(--dds-color-surface-action-resting);
3095
3401
  @media (prefers-reduced-motion: no-preference) {
3096
3402
  transition: width 0.2s, background-color 0.2s;
@@ -3103,7 +3409,6 @@
3103
3409
  background-color: var(--dds-color-surface-action-danger-resting);
3104
3410
  }
3105
3411
  .ProgressBar_fill--indeterminate {
3106
- width: 25%;
3107
3412
  animation: ProgressBar_indeterminate 2s infinite linear;
3108
3413
  }
3109
3414
  @keyframes ProgressBar_indeterminate {
@@ -3179,158 +3484,6 @@
3179
3484
  padding-left: var(--dds-spacing-x1);
3180
3485
  }
3181
3486
 
3182
- /* src/components/SelectionControl/SelectionControl.module.css */
3183
- .SelectionControl_container {
3184
- display: flex;
3185
- flex-direction: column;
3186
- gap: var(--dds-spacing-x0-125);
3187
- }
3188
- .SelectionControl_group {
3189
- display: flex;
3190
- }
3191
- .SelectionControl_group--row {
3192
- flex-direction: row;
3193
- gap: var(--dds-spacing-x0-75);
3194
- }
3195
- .SelectionControl_group--column {
3196
- flex-direction: column;
3197
- gap: var(--dds-spacing-x0-5);
3198
- }
3199
- .SelectionControl_label {
3200
- position: relative;
3201
- display: flex;
3202
- align-items: center;
3203
- cursor: pointer;
3204
- -webkit-user-select: none;
3205
- -moz-user-select: none;
3206
- user-select: none;
3207
- width: -moz-fit-content;
3208
- width: fit-content;
3209
- padding-left: calc(18px + var(--dds-spacing-x0-5));
3210
- input ~ .SelectionControl_selection-control {
3211
- @media (prefers-reduced-motion: no-preference) {
3212
- transition:
3213
- box-shadow 0.2s,
3214
- background-color 0.2s,
3215
- border 0.2s,
3216
- var(--dds-focus-transition);
3217
- }
3218
- }
3219
- &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
3220
- background-color: var(--dds-color-surface-hover-default);
3221
- box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
3222
- border-color: var(--dds-color-border-action-hover);
3223
- }
3224
- input:checked:enabled ~ .SelectionControl_selection-control,
3225
- input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3226
- border-color: var(--dds-color-surface-action-selected);
3227
- background-color: var(--dds-color-surface-action-selected);
3228
- }
3229
- &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
3230
- &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3231
- border-color: var(--dds-color-surface-action-selected-disabled);
3232
- background-color: var(--dds-color-surface-action-selected-disabled);
3233
- }
3234
- &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
3235
- &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3236
- background-color: var(--dds-color-surface-action-hover);
3237
- border-color: var(--dds-color-surface-action-hover);
3238
- }
3239
- input:checked ~ .SelectionControl_selection-control:after,
3240
- input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3241
- display: block;
3242
- }
3243
- }
3244
- .SelectionControl_label--checkbox {
3245
- .SelectionControl_selection-control:after {
3246
- border: solid var(--dds-color-icon-on-action);
3247
- border-width: 0 1px 1px 0;
3248
- left: 6px;
3249
- top: 1px;
3250
- width: 5px;
3251
- height: 10px;
3252
- transform: rotate(45deg);
3253
- }
3254
- input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3255
- border-width: 1px 0 0 0;
3256
- left: 25%;
3257
- top: 50%;
3258
- width: 50%;
3259
- height: 1px;
3260
- transform: none;
3261
- }
3262
- }
3263
- .SelectionControl_label--radio {
3264
- .SelectionControl_selection-control:after {
3265
- border-radius: var(--dds-border-radius-rounded);
3266
- background-color: var(--dds-color-icon-on-action);
3267
- height: 8px;
3268
- width: 8px;
3269
- left: 50%;
3270
- top: 50%;
3271
- transform: translate(-50%, -50%);
3272
- }
3273
- }
3274
- .SelectionControl_label--disabled {
3275
- cursor: not-allowed;
3276
- input:disabled ~ .SelectionControl_selection-control {
3277
- border-color: var(--dds-color-border-default);
3278
- }
3279
- input:checked:disabled ~ .SelectionControl_selection-control,
3280
- input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3281
- border-color: var(--dds-color-surface-action-selected-disabled);
3282
- background-color: var(--dds-color-surface-action-selected-disabled);
3283
- }
3284
- }
3285
- .SelectionControl_label--readonly {
3286
- cursor: default;
3287
- color: var(--dds-color-text-medium);
3288
- input ~ .SelectionControl_selection-control {
3289
- border-color: var(--dds-color-border-default);
3290
- background-color: var(--dds-color-surface-field-disabled);
3291
- }
3292
- input:checked ~ .SelectionControl_selection-control,
3293
- input[data-indeterminate=true] ~ .SelectionControl_selection-control {
3294
- border-color: var(--dds-color-surface-action-selected-disabled);
3295
- background-color: var(--dds-color-surface-action-selected-disabled);
3296
- }
3297
- }
3298
- .SelectionControl_label--error {
3299
- &:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
3300
- background-color: var(--dds-color-surface-danger-default);
3301
- border-color: var(--dds-color-border-danger);
3302
- box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
3303
- }
3304
- input:not(:focus-visible) ~ .SelectionControl_selection-control,
3305
- input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
3306
- border-color: var(--dds-color-border-danger);
3307
- box-shadow: 0 0 0 1px var(--dds-color-border-danger);
3308
- }
3309
- }
3310
- .SelectionControl_label--no-text {
3311
- padding: 9px;
3312
- }
3313
- .SelectionControl_selection-control {
3314
- position: absolute;
3315
- left: 0;
3316
- box-sizing: border-box;
3317
- border: 1px solid;
3318
- border-color: var(--dds-color-border-default);
3319
- background-color: var(--dds-color-surface-field-default);
3320
- border-radius: var(--dds-border-radius-input);
3321
- height: 18px;
3322
- width: 18px;
3323
- &:after {
3324
- content: "";
3325
- position: absolute;
3326
- display: none;
3327
- box-sizing: border-box;
3328
- }
3329
- }
3330
- .SelectionControl_selection-control--radio {
3331
- border-radius: var(--dds-border-radius-rounded);
3332
- }
3333
-
3334
3487
  /* src/components/Skeleton/Skeleton.module.css */
3335
3488
  @keyframes Skeleton_ddsSkeletonAnimation {
3336
3489
  0% {
@@ -3619,9 +3772,6 @@
3619
3772
  border-color: var(--dds-color-surface-action-selected);
3620
3773
  box-shadow: inset 0px -2px 0px 0px var(--dds-color-surface-action-selected);
3621
3774
  }
3622
- .Tabs_tab-panel {
3623
- padding: var(--dds-spacing-x0-25);
3624
- }
3625
3775
 
3626
3776
  /* src/components/Tag/Tag.module.css */
3627
3777
  .Tag_container {
@@ -3711,11 +3861,6 @@
3711
3861
  .TextInput_container--disabled {
3712
3862
  color: var(--dds-color-text-subtle);
3713
3863
  }
3714
- .TextInput_affix-container {
3715
- position: relative;
3716
- display: flex;
3717
- align-items: center;
3718
- }
3719
3864
  .TextInput_input-width {
3720
3865
  width: var(--dds-textinput-width);
3721
3866
  }
@@ -3742,9 +3887,6 @@
3742
3887
  .TextInput_icon--xsmall {
3743
3888
  left: var(--dds-spacing-x0-5);
3744
3889
  }
3745
- .TextInput_label {
3746
- display: block;
3747
- }
3748
3890
  .TextInput_affix {
3749
3891
  position: absolute;
3750
3892
  height: 100%;
@@ -3770,11 +3912,6 @@
3770
3912
  .TextInput_affix--disabled {
3771
3913
  border-color: var(--dds-color-border-subtle);
3772
3914
  }
3773
- .TextInput_message-container {
3774
- display: flex;
3775
- justify-content: space-between;
3776
- gap: var(--dds-spacing-x0-5);
3777
- }
3778
3915
 
3779
3916
  /* src/components/Toggle/Toggle.module.css */
3780
3917
  .Toggle_label {
@@ -3940,11 +4077,6 @@
3940
4077
  }
3941
4078
 
3942
4079
  /* src/components/ToggleBar/ToggleBar.module.css */
3943
- .ToggleBar_container {
3944
- display: flex;
3945
- flex-direction: column;
3946
- gap: var(--dds-spacing-x0-125);
3947
- }
3948
4080
  .ToggleBar_bar {
3949
4081
  display: grid;
3950
4082
  grid-auto-flow: column;
@@ -4039,26 +4171,6 @@
4039
4171
  }
4040
4172
 
4041
4173
  /* src/components/ToggleButton/ToggleButton.module.css */
4042
- .ToggleButton_group-container {
4043
- display: flex;
4044
- flex-direction: column;
4045
- gap: var(--dds-spacing-x0-5);
4046
- }
4047
- .ToggleButton_group {
4048
- display: flex;
4049
- flex-wrap: wrap;
4050
- gap: var(--dds-spacing-x0-75);
4051
- }
4052
- .ToggleButton_group--row {
4053
- flex-direction: row;
4054
- }
4055
- .ToggleButton_group--column {
4056
- flex-direction: column;
4057
- }
4058
- .ToggleButton_container {
4059
- width: -moz-fit-content;
4060
- width: fit-content;
4061
- }
4062
4174
  .ToggleButton_content {
4063
4175
  display: flex;
4064
4176
  align-items: center;