@norges-domstoler/dds-components 20.1.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 +1323 -1191
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.mts +637 -255
  4. package/dist/index.d.ts +637 -255
  5. package/dist/index.js +2631 -2243
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +2562 -2180
  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
  }
@@ -444,6 +441,22 @@
444
441
  .utilStyles_invisible {
445
442
  visibility: hidden;
446
443
  }
444
+ .utilStyles_center-absolute {
445
+ position: absolute;
446
+ left: 50%;
447
+ top: 50%;
448
+ transform: translate(-50%, -50%);
449
+ }
450
+ .utilStyles_center-absolute-y {
451
+ position: absolute;
452
+ top: 50%;
453
+ transform: translate(0, -50%);
454
+ }
455
+ .utilStyles_center-absolute-x {
456
+ position: absolute;
457
+ left: 50%;
458
+ transform: translate(-50%, 0);
459
+ }
447
460
 
448
461
  /* src/components/helpers/Backdrop/Backdrop.module.css */
449
462
  .Backdrop_backdrop {
@@ -694,334 +707,1070 @@
694
707
  height: 1.25em;
695
708
  }
696
709
 
697
- /* src/components/helpers/Paper/Paper.module.css */
698
- :where(.Paper_container) {
699
- box-sizing: border-box;
700
- background-color: var(--dds-color-surface-default);
701
- border-radius: var(--dds-border-radius-surface);
702
- 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);
703
750
  }
704
- :where(.Paper_shadow--1) {
705
- 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);
706
754
  }
707
- :where(.Paper_shadow--2) {
708
- 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);
709
758
  }
710
- :where(.Paper_shadow--3) {
711
- 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);
712
762
  }
713
- :where(.Paper_shadow--4) {
714
- 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);
715
766
  }
716
- :where(.Paper_border--default) {
717
- 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);
718
770
  }
719
- :where(.Paper_border--subtle) {
720
- 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);
721
774
  }
722
- :where(.Paper_border--on-inverse) {
723
- 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);
724
778
  }
725
-
726
- /* src/components/Accordion/Accordion.module.css */
727
- :where(.Accordion_container) {
728
- 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);
729
782
  }
730
- :where(.Accordion_container:first-child) {
731
- 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);
732
786
  }
733
- :where(.Accordion_header-button) {
734
- @media (prefers-reduced-motion: no-preference) {
735
- transition: background-color 0.2s, var(--dds-focus-transition);
736
- }
737
- &:hover {
738
- background-color: var(--dds-color-surface-hover-default);
739
- color: var(--dds-color-text-action-hover);
740
- }
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);
741
790
  }
742
- .Accordion_header-container {
743
- 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);
744
794
  }
745
- .Accordion_header-container__chevron {
746
- 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);
747
798
  }
748
- .Accordion_body {
749
- 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);
750
802
  }
751
- .Accordion_body__content {
752
- 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);
753
806
  }
754
-
755
- /* src/components/helpers/AccordionBase/AccordionBase.module.css */
756
- :where(.AccordionBase_header-button) {
757
- -webkit-user-select: text;
758
- -moz-user-select: text;
759
- user-select: text;
760
- position: relative;
761
- cursor: pointer;
762
- display: block;
763
- width: 100%;
764
- 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);
765
811
  }
766
- .AccordionBase_header-container {
767
- display: flex;
768
- 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);
769
815
  }
770
- .AccordionBase_header__content {
771
- 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);
772
819
  }
773
- .AccordionBase_header__chevron {
774
- display: flex;
775
- align-items: center;
776
- justify-content: center;
777
- height: var(--dds-icon-size-medium);
778
- 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);
779
823
  }
780
- .AccordionBase_body {
781
- 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);
782
827
  }
783
- .AccordionBase_body--animated {
784
- @media (prefers-reduced-motion: no-preference) {
785
- transition: height 0.2s cubic-bezier(0.4, 0, 0.2, 1);
786
- }
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);
787
831
  }
788
- .AccordionBase_body--hidden {
789
- display: none;
832
+ .layout_dds-wrap {
833
+ --dds-r-wrap: var(--dds-r-xs-wrap);
834
+ flex-wrap: var(--dds-r-wrap, initial);
790
835
  }
791
-
792
- /* src/components/BackLink/BackLink.module.css */
793
- .BackLink_icon {
794
- display: inline;
795
- margin: 0.1em 0.25em -0.1em 0.1em;
796
- transform: translateY(0.05em);
797
- vertical-align: baseline;
836
+ .layout_dds-basis {
837
+ --dds-r-basis: var(--dds-r-xs-basis);
838
+ flex-basis: var(--dds-r-basis, initial);
798
839
  }
799
-
800
- /* src/components/Breadcrumbs/Breadcrumbs.module.css */
801
- .Breadcrumbs_list {
802
- display: flex;
803
- flex-wrap: wrap;
804
- align-items: center;
805
- 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);
806
843
  }
807
- .Breadcrumbs_list--large-screen-hide-xs {
808
- @media only screen and (max-width: 600px) {
809
- display: none;
844
+ @media (max-width: 599px) {
845
+ .layout_dds-p {
846
+ --dds-r-p: var(--dds-r-xs-p);
810
847
  }
811
- }
812
- .Breadcrumbs_list--large-screen-hide-sm {
813
- @media only screen and (max-width: 960px) {
814
- display: none;
848
+ .layout_dds-p-i {
849
+ --dds-r-p-i: var(--dds-r-xs-p-i);
815
850
  }
816
- }
817
- .Breadcrumbs_list--large-screen-hide-md {
818
- @media only screen and (max-width: 1280px) {
819
- display: none;
851
+ .layout_dds-p-b {
852
+ --dds-r-p-b: var(--dds-r-xs-p-b);
820
853
  }
821
- }
822
- .Breadcrumbs_list--large-screen-hide-lg {
823
- @media only screen and (max-width: 1920px) {
824
- display: none;
854
+ .layout_dds-m {
855
+ --dds-r-m: var(--dds-r-xs-m);
825
856
  }
826
- }
827
- .Breadcrumbs_list--large-screen-hide-xl {
828
- display: none;
829
- }
830
- .Breadcrumbs_list--small-screen {
831
- display: none;
832
- }
833
- .Breadcrumbs_list--small-screen-show-xs {
834
- @media only screen and (max-width: 600px) {
835
- display: flex;
857
+ .layout_dds-m-i {
858
+ --dds-r-m-i: var(--dds-r-xs-m-i);
836
859
  }
837
- }
838
- .Breadcrumbs_list--small-screen-show-sm {
839
- @media only screen and (max-width: 960px) {
840
- display: flex;
860
+ .layout_dds-m-b {
861
+ --dds-r-m-b: var(--dds-r-xs-m-b);
841
862
  }
842
- }
843
- .Breadcrumbs_list--small-screen-show-md {
844
- @media only screen and (max-width: 1280px) {
845
- display: flex;
863
+ .layout_dds-h {
864
+ --dds-r-h: var(--dds-r-xs-h);
846
865
  }
847
- }
848
- .Breadcrumbs_list--small-screen-show-lg {
849
- @media only screen and (max-width: 1920px) {
850
- display: flex;
866
+ .layout_dds-max-h {
867
+ --dds-r-max-h: var(--dds-r-xs-max-h);
851
868
  }
852
- }
853
- .Breadcrumbs_list--small-screen-show-xl {
854
- display: flex;
855
- }
856
- .Breadcrumbs_list-item {
857
- align-items: center;
858
- display: flex;
859
- gap: var(--dds-spacing-x0-5);
860
- padding: 0;
861
- }
862
- .Breadcrumbs_list-item--large-screen {
863
- padding: var(--dds-spacing-x0-125) 0;
864
- }
865
- .Breadcrumbs_icon {
866
- color: var(--dds-color-icon-link);
867
- }
868
-
869
- /* src/components/Button/Button.module.css */
870
- :where(.Button_button) {
871
- -webkit-user-select: text;
872
- -moz-user-select: text;
873
- user-select: text;
874
- display: inline-flex;
875
- align-items: center;
876
- justify-content: center;
877
- height: -moz-fit-content;
878
- height: fit-content;
879
- width: -moz-fit-content;
880
- width: fit-content;
881
- cursor: pointer;
882
- box-shadow: none;
883
- text-decoration: none;
884
- border-radius: var(--dds-border-radius-button);
885
- border: 1px solid;
886
- @media (prefers-reduced-motion: no-preference) {
887
- transition: all 0.2s;
869
+ .layout_dds-min-h {
870
+ --dds-r-max-h: var(--dds-r-xs-max-h);
888
871
  }
889
- &:active:not([aria-disabled=true]) {
890
- scale: 0.95;
872
+ .layout_dds-w {
873
+ --dds-r-w: var(--dds-r-xs-w);
891
874
  }
892
- }
893
- .Button_button--is-loading {
894
- cursor: not-allowed;
895
- }
896
- .Button_button--full-width {
897
- width: 100%;
898
- justify-content: space-between;
899
- &.Button_button--is-loading,
900
- &.Button_just-icon,
901
- &.Button_just-text {
902
- justify-content: center;
875
+ .layout_dds-max-w {
876
+ --dds-r-max-w: var(--dds-r-xs-max-w);
903
877
  }
904
- &.Button_with-text-and-icon.Button_with-icon-left {
905
- justify-content: left;
878
+ .layout_dds-min-w {
879
+ --dds-r-min-w: var(--dds-r-xs-min-w);
906
880
  }
907
- }
908
- .Button_button--xsmall {
909
- &.Button_just-text {
910
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
881
+ .layout_dds-pos {
882
+ --dds-r-pos: var(--dds-r-xs-pos);
911
883
  }
912
- &.Button_with-text-and-icon {
913
- gap: var(--dds-spacing-x0-125);
914
- &.Button_with-icon-left {
915
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25);
916
- }
917
- &.Button_with-icon-right {
918
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
919
- }
884
+ .layout_dds-l {
885
+ --dds-r-l: var(--dds-r-xs-l);
920
886
  }
921
- &.Button_just-icon,
922
- &.Button_button--is-loading.Button_no-content {
923
- padding: var(--dds-spacing-x0-25);
887
+ .layout_dds-r {
888
+ --dds-r-r: var(--dds-r-xs-r);
924
889
  }
925
- .Button_icon {
926
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
890
+ .layout_dds-t {
891
+ --dds-r-t: var(--dds-r-xs-t);
927
892
  }
928
- }
929
- .Button_button--small {
930
- &.Button_just-text {
931
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
893
+ .layout_dds-b {
894
+ --dds-r-b: var(--dds-r-xs-b);
932
895
  }
933
- &.Button_with-text-and-icon {
934
- gap: var(--dds-spacing-x0-25);
935
- &.Button_with-icon-left {
936
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-75) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5);
937
- }
938
- &.Button_with-icon-right {
939
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-5) var(--dds-spacing-x0-75);
940
- }
896
+ .layout_dds-o {
897
+ --dds-r-o: var(--dds-r-xs-o);
941
898
  }
942
- &.Button_just-icon,
943
- &.Button_button--is-loading.Button_no-content {
944
- padding: var(--dds-spacing-x0-5);
899
+ .layout_dds-o-x {
900
+ --dds-r-o-x: var(--dds-r-xs-o-x);
945
901
  }
946
- .Button_icon {
947
- 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);
948
904
  }
949
- }
950
- .Button_button--medium {
951
- &.Button_just-text {
952
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1);
905
+ .layout_dds-display {
906
+ --dds-r-display: var(--dds-r-xs-display);
953
907
  }
954
- &.Button_with-text-and-icon {
955
- gap: var(--dds-spacing-x0-5);
956
- &.Button_with-icon-left {
957
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x1) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75);
958
- }
959
- &.Button_with-icon-right {
960
- padding: var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x0-75) var(--dds-spacing-x1);
961
- }
908
+ .layout_dds-text-align {
909
+ --dds-r-text-align: var(--dds-r-xs-text-align);
962
910
  }
963
- &.Button_just-icon,
964
- &.Button_button--is-loading.Button_no-content {
965
- padding: var(--dds-spacing-x0-75);
911
+ .layout_dds-flex-dir {
912
+ --dds-r-flex-dir: var(--dds-r-xs-flex-dir);
966
913
  }
967
- .Button_icon {
968
- font-size: calc(var(--dds-font-lineheight-x1) * 1em);
914
+ .layout_dds-gap {
915
+ --dds-r-gap: var(--dds-r-xs-gap);
969
916
  }
970
- }
971
- .Button_button--large {
972
- &.Button_just-text {
973
- 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);
974
919
  }
975
- &.Button_with-text-and-icon {
976
- gap: var(--dds-spacing-x0-75);
977
- &.Button_with-icon-left {
978
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1-5) var(--dds-spacing-x1) var(--dds-spacing-x1);
979
- }
980
- &.Button_with-icon-right {
981
- padding: var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1) var(--dds-spacing-x1-5);
982
- }
920
+ .layout_dds-r-gap {
921
+ --dds-r-r-gap: var(--dds-r-xs-r-gap);
983
922
  }
984
- &.Button_just-icon,
985
- &.Button_button--is-loading.Button_no-content {
986
- padding: var(--dds-spacing-x1);
923
+ .layout_dds-a-i {
924
+ --dds-r-a-i: var(--dds-r-xs-a-i);
987
925
  }
988
- .Button_icon {
989
- 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);
990
928
  }
991
- }
992
- .Button_spinner-wrapper--absolute {
993
- position: absolute;
994
- }
995
- .Button_icon-wrapper {
996
- display: flex;
997
- align-items: center;
998
- justify-content: center;
999
- }
1000
- .Button_button--primary {
1001
- background-color: var(--dds-color-surface-action-resting);
1002
- border-color: var(--dds-color-surface-action-resting);
1003
- color: var(--dds-color-text-on-action);
1004
- &:hover:not(.Button_button--is-loading) {
1005
- background-color: var(--dds-color-surface-action-hover);
1006
- border-color: var(--dds-color-surface-action-hover);
1007
- color: var(--dds-color-text-on-action);
929
+ .layout_dds-j-i {
930
+ --dds-r-j-i: var(--dds-r-xs-j-i);
1008
931
  }
1009
- }
1010
- .Button_button--secondary {
1011
- background-color: var(--dds-color-surface-default);
1012
- border-color: var(--dds-color-border-default);
1013
- color: var(--dds-color-text-default);
1014
- &:hover:not(.Button_button--is-loading) {
1015
- background-color: var(--dds-color-surface-hover-default);
1016
- border-color: var(--dds-color-border-action-hover);
1017
- color: var(--dds-color-text-default);
932
+ .layout_dds-j-c {
933
+ --dds-r-j-c: var(--dds-r-xs-j-c);
934
+ }
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);
1018
943
  }
1019
944
  }
1020
- .Button_button--tertiary {
1021
- background-color: transparent;
1022
- border-color: transparent;
1023
- color: var(--dds-color-text-default);
1024
- &:hover:not(.Button_button--is-loading) {
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) {
1025
1774
  background-color: var(--dds-color-surface-hover-default);
1026
1775
  border-color: transparent;
1027
1776
  color: var(--dds-color-text-default);
@@ -1077,9 +1826,6 @@
1077
1826
  .OverflowMenu_container {
1078
1827
  box-sizing: border-box;
1079
1828
  z-index: var(--dds-zindex-overflowmenu);
1080
- overflow-y: auto;
1081
- min-width: 180px;
1082
- max-width: 300px;
1083
1829
  }
1084
1830
  .OverflowMenu_list {
1085
1831
  display: flex;
@@ -1122,13 +1868,9 @@
1122
1868
  align-items: center;
1123
1869
  font-size: calc(var(--dds-font-lineheight-x1) * 1em);
1124
1870
  }
1125
- .OverflowMenu_divider {
1126
- margin-inline: var(--dds-spacing-x0-5);
1127
- margin-block: var(--dds-spacing-x0);
1128
- }
1129
- .OverflowMenu_group-header {
1130
- padding-inline: var(--dds-spacing-x0-75);
1131
- padding-block-start: var(--dds-spacing-x0-75);
1871
+ .OverflowMenu_button-loading {
1872
+ cursor: not-allowed;
1873
+ position: relative;
1132
1874
  }
1133
1875
 
1134
1876
  /* src/components/Divider/Divider.module.css */
@@ -1196,78 +1938,251 @@
1196
1938
  transition: box-shadow 0.2s, border-color 0.2s;
1197
1939
  }
1198
1940
  }
1199
- .Card_container--filled {
1200
- background-color: var(--dds-color-brand-primary-subtle);
1201
- border-color: var(--dds-color-brand-primary-subtle);
1202
- }
1203
- .Card_container--border {
1204
- background-color: var(--dds-color-surface-default);
1205
- border-color: var(--dds-color-border-subtle);
1206
- }
1207
- .Card_container--navigation {
1208
- text-decoration: none;
1209
- display: block;
1210
- &:hover {
1211
- border-color: var(--dds-color-border-action-hover);
1212
- 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;
1213
2084
  }
1214
2085
  }
1215
- .Card_container--expandable {
1216
- width: 100%;
1217
- box-sizing: border-box;
1218
- & + .Card_container--expandable {
1219
- 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%);
1220
2095
  }
1221
2096
  }
1222
-
1223
- /* src/components/Card/CardExpandable/CardExpandable.module.css */
1224
- .CardExpandable_container {
1225
- 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
+ }
1226
2107
  }
1227
- .CardExpandable_header-button {
1228
- @media (prefers-reduced-motion: no-preference) {
1229
- 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);
1230
2114
  }
1231
- &:hover {
1232
- 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);
1233
2119
  }
1234
2120
  }
1235
- .CardExpandable_header-container {
1236
- padding: var(--dds-card-accordion-header-container-padding);
1237
- justify-content: space-between;
1238
- @media (prefers-reduced-motion: no-preference) {
1239
- 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);
1240
2131
  }
1241
2132
  }
1242
- .CardExpandable_header-container__chevron {
1243
- margin-left: var(--dds-spacing-x0-5);
2133
+ .SelectionControl_label--no-text {
2134
+ padding: 9px;
1244
2135
  }
1245
- .CardExpandable_body {
1246
- 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
+ }
1247
2152
  }
1248
- .CardExpandable_body__content {
1249
- padding: var(--dds-card-accordion-body-content-padding);
2153
+ .SelectionControl_selection-control--radio {
2154
+ border-radius: var(--dds-border-radius-rounded);
1250
2155
  }
1251
2156
 
1252
- /* src/components/Chip/Chip.module.css */
1253
- .Chip_container {
1254
- display: inline-flex;
1255
- 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;
1256
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);
1257
2170
  gap: var(--dds-spacing-x0-25);
1258
- padding: var(--dds-spacing-x0-125) var(--dds-spacing-x0-25) var(--dds-spacing-x0-125) var(--dds-spacing-x0-5);
1259
- border: 1px solid var(--dds-color-border-subtle);
1260
- border-radius: var(--dds-border-radius-chip);
1261
- background-color: var(--dds-color-surface-subtle);
2171
+ .InputMessage_icon {
2172
+ color: var(--dds-color-icon-on-danger-default);
2173
+ }
1262
2174
  }
1263
- .Chip_group {
1264
- display: flex;
1265
- 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);
1266
2177
  }
1267
2178
 
1268
- /* src/components/Contrast/Contrast.module.css */
1269
- :where(.Contrast_container) {
1270
- 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
+ }
1271
2186
  }
1272
2187
 
1273
2188
  /* src/components/date-inputs/common/DateInput.module.css */
@@ -1363,56 +2278,6 @@
1363
2278
  }
1364
2279
  .DateInput_popover {
1365
2280
  z-index: var(--dds-zindex-popover);
1366
- padding: var(--dds-spacing-x0-5);
1367
- }
1368
- .DateInput_popover--large-screen-hide-xs {
1369
- @media only screen and (max-width: 600px) {
1370
- display: none;
1371
- }
1372
- }
1373
- .DateInput_popover--large-screen-hide-sm {
1374
- @media only screen and (max-width: 960px) {
1375
- display: none;
1376
- }
1377
- }
1378
- .DateInput_popover--large-screen-hide-md {
1379
- @media only screen and (max-width: 1280px) {
1380
- display: none;
1381
- }
1382
- }
1383
- .DateInput_popover--large-screen-hide-lg {
1384
- @media only screen and (max-width: 1920px) {
1385
- display: none;
1386
- }
1387
- }
1388
- .DateInput_popover--large-screen-hide-xl {
1389
- display: none;
1390
- }
1391
- .DateInput_modal {
1392
- display: none;
1393
- }
1394
- .DateInput_modal--small-screen-show-xs {
1395
- @media only screen and (max-width: 600px) {
1396
- display: block;
1397
- }
1398
- }
1399
- .DateInput_modal--small-screen-show-sm {
1400
- @media only screen and (max-width: 960px) {
1401
- display: block;
1402
- }
1403
- }
1404
- .DateInput_modal--small-screen-show-md {
1405
- @media only screen and (max-width: 1280px) {
1406
- display: block;
1407
- }
1408
- }
1409
- .DateInput_modal--small-screen-show-lg {
1410
- @media only screen and (max-width: 1920px) {
1411
- display: block;
1412
- }
1413
- }
1414
- .DateInput_modal--small-screen-show-xl {
1415
- display: block;
1416
2281
  }
1417
2282
  .DateInput_modal-close-button-wrapper {
1418
2283
  display: flex;
@@ -1502,6 +2367,7 @@
1502
2367
  --dds-focus-box-shadow: 0 0 0 2px var(--dds-color-focus-inside);
1503
2368
  --dds-focus-transition: outline-offset 0.2s;
1504
2369
  --dds-input-default-width: 320px;
2370
+ --dds-input-default-width-xsmall: 210px;
1505
2371
  --dds-transition-duration-surface-move: 0.5s;
1506
2372
  }
1507
2373
  .ThemeProvider_global-styles {
@@ -1510,37 +2376,8 @@
1510
2376
  color: var(--dds-color-text-default);
1511
2377
  }
1512
2378
 
1513
- /* src/components/InputMessage/InputMessage.module.css */
1514
- .InputMessage_container {
1515
- display: flex;
1516
- width: -moz-fit-content;
1517
- width: fit-content;
1518
- word-break: break-word;
1519
- max-width: 100%;
1520
- }
1521
- .InputMessage_container--error {
1522
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
1523
- background-color: var(--dds-color-surface-danger-default);
1524
- border-bottom-left-radius: var(--dds-border-radius-surface);
1525
- border-bottom-right-radius: var(--dds-border-radius-surface);
1526
- gap: var(--dds-spacing-x0-25);
1527
- .InputMessage_icon {
1528
- color: var(--dds-color-icon-on-danger-default);
1529
- }
1530
- }
1531
- .InputMessage_icon {
1532
- margin-top: calc((var(--dds-font-lineheight-x1) * 1em - var(--dds-icon-size-small)) / 2 - 1px);
1533
- }
1534
-
1535
2379
  /* src/components/DescriptionList/DescriptionList.module.css */
1536
2380
  .DescriptionList_list {
1537
- margin: 0;
1538
- display: flex;
1539
- flex-direction: column;
1540
- flex-wrap: wrap;
1541
- row-gap: 0;
1542
- -moz-column-gap: var(--dds-spacing-x2);
1543
- column-gap: var(--dds-spacing-x2);
1544
2381
  & > dt:first-of-type {
1545
2382
  margin-top: var(--dds-spacing-x1);
1546
2383
  }
@@ -1597,10 +2434,12 @@
1597
2434
  }
1598
2435
  .DetailList_list--striped {
1599
2436
  .DetailList_row {
1600
- &:nth-of-type(even) {
2437
+ &:nth-of-type(4n-1),
2438
+ &:nth-of-type(4n) {
1601
2439
  background-color: var(--dds-color-surface-default);
1602
2440
  }
1603
- &:nth-of-type(odd) {
2441
+ &:nth-of-type(4n-3),
2442
+ &:nth-of-type(4n-2) {
1604
2443
  background-color: var(--dds-color-surface-subtle);
1605
2444
  }
1606
2445
  }
@@ -1627,8 +2466,12 @@
1627
2466
  padding-inline: var(--dds-spacing-x0-75);
1628
2467
  }
1629
2468
  }
1630
- .DetailList_row {
1631
- display: table-row;
2469
+ .DetailList_column {
2470
+ dt,
2471
+ dd {
2472
+ margin-inline-start: 0;
2473
+ text-align: left;
2474
+ }
1632
2475
  }
1633
2476
  .DetailList_cell {
1634
2477
  display: table-cell;
@@ -1641,30 +2484,12 @@
1641
2484
  .Drawer_container {
1642
2485
  --dds-transition-duration-drawer-move: 0.2s;
1643
2486
  --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
1644
- --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));
1645
- position: fixed;
1646
- top: 0;
1647
- height: 100%;
1648
- display: flex;
1649
- flex-direction: column-reverse;
1650
- justify-content: flex-end;
1651
- 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));
1652
2488
  z-index: var(--dds-zindex-drawer);
1653
- border-radius: 0;
1654
- padding: var(--dds-drawer-container-padding);
1655
2489
  @media (prefers-reduced-motion: no-preference) {
1656
2490
  transition: transform var(--dds-transition-duration-drawer-move);
1657
2491
  }
1658
2492
  }
1659
- .Drawer_container--small {
1660
- max-width: 400px;
1661
- }
1662
- .Drawer_container--medium {
1663
- max-width: 600px;
1664
- }
1665
- .Drawer_container--large {
1666
- max-width: 800px;
1667
- }
1668
2493
  .Drawer_container--left {
1669
2494
  left: 0;
1670
2495
  }
@@ -1684,33 +2509,19 @@
1684
2509
  transform: translate(100%);
1685
2510
  }
1686
2511
  .Drawer_content-container {
1687
- display: flex;
1688
- flex-direction: column;
1689
- gap: var(--dds-spacing-x1);
1690
2512
  padding: var(--dds-drawer-content-container-padding);
1691
2513
  }
1692
- .Drawer_button--close {
1693
- align-self: flex-end;
1694
- }
1695
-
1696
- /* src/components/EmptyContent/EmptyContent.module.css */
1697
- .EmptyContent_containter {
1698
- display: flex;
1699
- justify-content: center;
1700
- align-items: center;
1701
- min-height: var(--dds-spacing-x10);
1702
- height: 100%;
1703
- width: 100%;
1704
- background-color: var(--dds-color-surface-subtle);
1705
- padding: var(--dds-spacing-x1-5);
1706
- }
1707
- .EmptyContent_text {
1708
- max-width: 70ch;
1709
- text-align: center;
1710
- display: flex;
1711
- flex-direction: column;
1712
- gap: var(--dds-spacing-x1);
1713
- }
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 */
1714
2525
  .EmptyContent_message {
1715
2526
  color: var(--dds-text-color--subtle);
1716
2527
  }
@@ -1811,109 +2622,13 @@
1811
2622
  height: var(--dds-icon-size-large);
1812
2623
  }
1813
2624
 
1814
- /* src/components/Stack/Stack.module.css */
1815
- .Stack_stack {
1816
- display: flex;
1817
- align-items: var(--dds-stack-align-items);
1818
- justify-content: var(--dds-stack-justify-content);
1819
- }
1820
- .Stack_horizontal {
1821
- flex-direction: row;
1822
- }
1823
- .Stack_vertical {
1824
- flex-direction: column;
1825
- }
1826
- .Stack_gap-0 {
1827
- gap: 0;
1828
- }
1829
- .Stack_gap-x-0-125 {
1830
- gap: var(--dds-spacing-x0-125);
1831
- }
1832
- .Stack_gap-x-0-25 {
1833
- gap: var(--dds-spacing-x0-25);
1834
- }
1835
- .Stack_gap-x-0-5 {
1836
- gap: var(--dds-spacing-x0-5);
1837
- }
1838
- .Stack_gap-x-0-75 {
1839
- gap: var(--dds-spacing-x0-75);
1840
- }
1841
- .Stack_gap-x-1 {
1842
- gap: var(--dds-spacing-x1);
1843
- }
1844
- .Stack_gap-x-1-5 {
1845
- gap: var(--dds-spacing-x1-5);
1846
- }
1847
- .Stack_gap-x-2 {
1848
- gap: var(--dds-spacing-x2);
1849
- }
1850
- .Stack_gap-x-2-5 {
1851
- gap: var(--dds-spacing-x2-5);
1852
- }
1853
- .Stack_gap-x-3 {
1854
- gap: var(--dds-spacing-x3);
1855
- }
1856
- .Stack_gap-x-4 {
1857
- gap: var(--dds-spacing-x4);
1858
- }
1859
- .Stack_gap-x-6 {
1860
- gap: var(--dds-spacing-x6);
1861
- }
1862
- .Stack_gap-x-10 {
1863
- gap: var(--dds-spacing-x10);
1864
- }
1865
- .Stack_padding-0 {
1866
- padding: 0;
1867
- }
1868
- .Stack_padding-x-0-125 {
1869
- padding: var(--dds-spacing-x0-125);
1870
- }
1871
- .Stack_padding-x-0-25 {
1872
- padding: var(--dds-spacing-x0-25);
1873
- }
1874
- .Stack_padding-x-0-5 {
1875
- padding: var(--dds-spacing-x0-5);
1876
- }
1877
- .Stack_padding-x-0-75 {
1878
- padding: var(--dds-spacing-x0-75);
1879
- }
1880
- .Stack_padding-x-1 {
1881
- padding: var(--dds-spacing-x1);
1882
- }
1883
- .Stack_padding-x-1-5 {
1884
- padding: var(--dds-spacing-x1-5);
1885
- }
1886
- .Stack_padding-x-2 {
1887
- padding: var(--dds-spacing-x2);
1888
- }
1889
- .Stack_padding-x-2-5 {
1890
- padding: var(--dds-spacing-x2-5);
1891
- }
1892
- .Stack_padding-x-3 {
1893
- padding: var(--dds-spacing-x3);
1894
- }
1895
- .Stack_padding-x-4 {
1896
- padding: var(--dds-spacing-x4);
1897
- }
1898
- .Stack_padding-x-6 {
1899
- padding: var(--dds-spacing-x6);
1900
- }
1901
- .Stack_padding-x-10 {
1902
- padding: var(--dds-spacing-x10);
1903
- }
1904
-
1905
2625
  /* src/components/TextArea/TextArea.module.css */
1906
2626
  .TextArea_textarea {
1907
- width: var(--dds-text-area-width);
1908
2627
  height: auto;
1909
2628
  resize: vertical;
1910
2629
  vertical-align: bottom;
1911
2630
  padding-bottom: var(--dds-spacing-x0-5);
1912
2631
  }
1913
- .TextArea_message-container {
1914
- display: flex;
1915
- justify-content: space-between;
1916
- }
1917
2632
 
1918
2633
  /* src/components/Tooltip/Tooltip.module.css */
1919
2634
  .Tooltip_container {
@@ -1944,20 +2659,12 @@
1944
2659
  }
1945
2660
 
1946
2661
  /* src/components/FileUploader/FileUploader.module.css */
1947
- .FileUploader_container {
1948
- width: var(--dds-input-default-width);
1949
- }
1950
2662
  .FileUploader_input-container {
1951
2663
  box-sizing: border-box;
1952
- border: 2px solid;
1953
- border-style: dashed;
1954
- display: flex;
1955
- flex-direction: column;
1956
- gap: var(--dds-spacing-x1);
2664
+ border: 2px dashed;
1957
2665
  border-color: var(--dds-color-border-default);
1958
2666
  background-color: var(--dds-color-surface-default);
1959
2667
  border-radius: var(--dds-border-radius-surface);
1960
- padding: var(--dds-spacing-x1-5) var(--dds-spacing-x1-5) var(--dds-spacing-x2) var(--dds-spacing-x1-5);
1961
2668
  @media (prefers-reduced-motion: no-preference) {
1962
2669
  transition: background-color 0.2s, border-color 0.2s;
1963
2670
  }
@@ -1972,19 +2679,7 @@
1972
2679
  .FileUploader_input-container--no-drag-zone {
1973
2680
  padding: var(--dds-spacing-x0-5) 0;
1974
2681
  }
1975
- .FileUploader_file {
1976
- display: flex;
1977
- justify-content: space-between;
1978
- align-items: center;
1979
- gap: var(--dds-spacing-x0-75);
1980
- padding: var(--dds-spacing-x0-5) var(--dds-spacing-x1);
1981
- margin-top: var(--dds-spacing-x0-5);
1982
- background-color: var(--dds-color-surface-subtle);
1983
- border-radius: var(--dds-border-radius-surface);
1984
- border: 1px solid var(--dds-color-border-default);
1985
- }
1986
2682
  .FileUploader_file--invalid {
1987
- border: 1px solid var(--dds-color-border-danger);
1988
2683
  box-shadow: inset 0 0 0 1px var(--dds-color-border-danger);
1989
2684
  }
1990
2685
  .FileUploader_file__icon--invalid {
@@ -2006,21 +2701,6 @@
2006
2701
  padding-block: var(--dds-spacing-x4);
2007
2702
  }
2008
2703
  }
2009
- .Footer_logo--xs-hide {
2010
- @media only screen and (max-width: 600px) {
2011
- display: none;
2012
- }
2013
- }
2014
- .Footer_logo--sm-hide {
2015
- @media only screen and (max-width: 960px) {
2016
- display: none;
2017
- }
2018
- }
2019
- .Footer_logo--md-hide {
2020
- @media only screen and (max-width: 1280px) {
2021
- display: none;
2022
- }
2023
- }
2024
2704
  .Footer_left {
2025
2705
  display: flex;
2026
2706
  flex-direction: column;
@@ -2089,99 +2769,12 @@
2089
2769
  margin-right: var(--dds-spacing-x0-75);
2090
2770
  }
2091
2771
 
2092
- /* src/components/Grid/Grid.module.css */
2093
- .Grid_grid {
2094
- display: grid;
2095
- grid-template-columns: repeat(var(--dds-grid-xs-count), minmax(0, 1fr));
2096
- -moz-column-gap: var(--dds-grid-xs-gutter-size);
2097
- column-gap: var(--dds-grid-xs-gutter-size);
2098
- margin-inline: var(--dds-spacing-x1);
2099
- max-width: var(--dds-grid-xs-max-width);
2100
- row-gap: var(--dds-grid-xs-row-gap);
2101
- @media only screen and (min-width: 600px) {
2102
- grid-template-columns: repeat(var(--dds-grid-sm-count), minmax(0, 1fr));
2103
- -moz-column-gap: var(--dds-grid-sm-gutter-size);
2104
- column-gap: var(--dds-grid-sm-gutter-size);
2105
- margin-inline: var(--dds-spacing-x2);
2106
- max-width: var(--dds-grid-sm-max-width);
2107
- row-gap: var(--dds-grid-sm-row-gap);
2108
- }
2109
- @media only screen and (min-width: 960px) {
2110
- grid-template-columns: repeat(var(--dds-grid-md-count), minmax(0, 1fr));
2111
- -moz-column-gap: var(--dds-grid-md-gutter-size);
2112
- column-gap: var(--dds-grid-md-gutter-size);
2113
- margin-inline: var(--dds-spacing-x4);
2114
- max-width: var(--dds-grid-md-max-width);
2115
- row-gap: var(--dds-grid-md-row-gap);
2116
- }
2117
- @media only screen and (min-width: 1280px) {
2118
- grid-template-columns: repeat(var(--dds-grid-lg-count), minmax(0, 1fr));
2119
- -moz-column-gap: var(--dds-grid-lg-gutter-size);
2120
- column-gap: var(--dds-grid-lg-gutter-size);
2121
- margin-inline: var(--dds-spacing-x6);
2122
- max-width: var(--dds-grid-lg-max-width);
2123
- row-gap: var(--dds-grid-lg-row-gap);
2124
- }
2125
- @media only screen and (min-width: 1920px) {
2126
- grid-template-columns: repeat(var(--dds-grid-xl-count), minmax(0, 1fr));
2127
- -moz-column-gap: var(--dds-grid-xl-gutter-size);
2128
- column-gap: var(--dds-grid-xl-gutter-size);
2129
- margin-inline: var(--dds-spacing-x10);
2130
- max-width: var(--dds-grid-xl-max-width);
2131
- row-gap: var(--dds-grid-xl-row-gap);
2132
- }
2133
- }
2134
- .Grid_grid-child {
2135
- --dds-grid-half-col-count: var(--dds-grid-xs-count);
2136
- @media only screen and (min-width: 600px) {
2137
- --dds-grid-half-col-count: var(--dds-grid-sm-count);
2138
- }
2139
- @media only screen and (min-width: 960px) {
2140
- --dds-grid-half-col-count: var(--dds-grid-md-count);
2141
- }
2142
- @media only screen and (min-width: 1280px) {
2143
- --dds-grid-half-col-count: var(--dds-grid-lg-count);
2144
- }
2145
- @media only screen and (min-width: 1920px) {
2146
- --dds-grid-half-col-count: var(--dds-grid-xl-count);
2147
- }
2148
- grid-row: var(--dds-grid-child-grid-row);
2149
- justify-self: var(--dds-grid-child-justify-self);
2150
- }
2151
- .Grid_grid-child--all {
2152
- grid-column: 1 / -1;
2153
- }
2154
- .Grid_grid-child--first-half {
2155
- grid-column: 1 / calc(var(--dds-grid-half-col-count) / 2 + 1);
2156
- }
2157
- .Grid_grid-child--second-half {
2158
- grid-column: calc(var(--dds-grid-half-col-count) / 2 + 1) / -1;
2159
- }
2160
- .Grid_grid-child--custom {
2161
- grid-column: var(--dds-grid-child-xs-grid-column-custom);
2162
- @media only screen and (min-width: 600px) {
2163
- grid-column: var(--dds-grid-child-sm-grid-column-custom);
2164
- }
2165
- @media only screen and (min-width: 960px) {
2166
- grid-column: var(--dds-grid-child-md-grid-column-custom);
2167
- }
2168
- @media only screen and (min-width: 1280px) {
2169
- grid-column: var(--dds-grid-child-lg-grid-column-custom);
2170
- }
2171
- @media only screen and (min-width: 1920px) {
2172
- grid-column: var(--dds-grid-child-xl-grid-column-custom);
2173
- }
2174
- }
2175
-
2176
2772
  /* src/components/InlineButton/InlineButton.module.css */
2177
2773
  .InlineButton_button {
2178
2774
  display: inline;
2179
2775
  }
2180
2776
 
2181
2777
  /* src/components/InlineEdit/InlineEdit.module.css */
2182
- .InlineEdit_container {
2183
- position: relative;
2184
- }
2185
2778
  .InlineEdit_inline-input {
2186
2779
  width: 100%;
2187
2780
  padding: var(--dds-spacing-x0-25);
@@ -2211,9 +2804,6 @@
2211
2804
  .InlineEdit_inline-input--with-icon {
2212
2805
  padding-left: var(--dds-spacing-x2);
2213
2806
  }
2214
- .InlineEdit_inline-input--with-icon--is-editing {
2215
- padding-left: var(--dds-spacing-x0-25);
2216
- }
2217
2807
  .InlineEdit_inline-textarea {
2218
2808
  resize: vertical;
2219
2809
  }
@@ -2229,50 +2819,13 @@
2229
2819
 
2230
2820
  /* src/components/InternalHeader/InternalHeader.module.css */
2231
2821
  .InternalHeader_bar {
2232
- display: flex;
2233
- align-items: center;
2234
2822
  background-color: var(--dds-color-surface-default);
2235
2823
  border-bottom: 1px solid var(--dds-color-border-default);
2236
2824
  min-height: 58px;
2237
- gap: var(--dds-spacing-x1-5);
2238
- padding-inline: var(--dds-spacing-x1-5);
2239
2825
  .InternalHeader_bar-separator {
2240
2826
  margin-left: auto;
2241
2827
  }
2242
2828
  }
2243
- .InternalHeader_bar--small-screen-xs {
2244
- @media only screen and (max-width: 600px) {
2245
- gap: var(--dds-spacing-x1);
2246
- padding-inline-start: var(--dds-spacing-x1);
2247
- padding-inline-end: var(--dds-spacing-x0-5);
2248
- }
2249
- }
2250
- .InternalHeader_bar--small-screen-sm {
2251
- @media only screen and (max-width: 960px) {
2252
- gap: var(--dds-spacing-x1);
2253
- padding-inline-start: var(--dds-spacing-x1);
2254
- padding-inline-end: var(--dds-spacing-x0-5);
2255
- }
2256
- }
2257
- .InternalHeader_bar--small-screen-md {
2258
- @media only screen and (max-width: 1280px) {
2259
- gap: var(--dds-spacing-x1);
2260
- padding-inline-start: var(--dds-spacing-x1);
2261
- padding-inline-end: var(--dds-spacing-x0-5);
2262
- }
2263
- }
2264
- .InternalHeader_bar--small-screen-lg {
2265
- @media only screen and (max-width: 1920px) {
2266
- gap: var(--dds-spacing-x1);
2267
- padding-inline-start: var(--dds-spacing-x1);
2268
- padding-inline-end: var(--dds-spacing-x0-5);
2269
- }
2270
- }
2271
- .InternalHeader_bar--small-screen-xl {
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
2829
  .InternalHeader_bar--with-nav {
2277
2830
  .InternalHeader_bar-separator {
2278
2831
  margin-left: 0;
@@ -2292,82 +2845,6 @@
2292
2845
  width: 100%;
2293
2846
  gap: var(--dds-spacing-x1-5);
2294
2847
  }
2295
- .InternalHeader_nav-list--small-screen {
2296
- align-items: initial;
2297
- flex-direction: column;
2298
- }
2299
- .InternalHeader_nav-list--small-screen-xs,
2300
- .InternalHeader_context-menu-button-without-nav-xs {
2301
- @media only screen and (max-width: 600px) {
2302
- display: none;
2303
- }
2304
- }
2305
- .InternalHeader_nav-list--small-screen-sm,
2306
- .InternalHeader_context-menu-button-without-nav-sm {
2307
- @media only screen and (max-width: 960px) {
2308
- display: none;
2309
- }
2310
- }
2311
- .InternalHeader_nav-list--small-screen-md,
2312
- .InternalHeader_context-menu-button-without-nav-md {
2313
- @media only screen and (max-width: 1280px) {
2314
- display: none;
2315
- }
2316
- }
2317
- .InternalHeader_nav-list--small-screen-lg,
2318
- .InternalHeader_context-menu-button-without-nav-lg {
2319
- @media only screen and (max-width: 1920px) {
2320
- display: none;
2321
- }
2322
- }
2323
- .InternalHeader_nav-list--small-screen-xl,
2324
- .InternalHeader_context-menu-button-without-nav-xl {
2325
- display: none;
2326
- }
2327
- .InternalHeader_nav--in-menu--small-screen,
2328
- .InternalHeader_context-menu-group--small-screen-only,
2329
- .InternalHeader_context-menu-button-with-nav,
2330
- .InternalHeader_menu-divider {
2331
- display: none;
2332
- }
2333
- .InternalHeader_nav--in-menu--small-screen-xs,
2334
- .InternalHeader_context-menu-group--small-screen-only-xs,
2335
- .InternalHeader_context-menu-button-with-nav-xs,
2336
- .InternalHeader_menu-divider--small-screen-xs {
2337
- @media only screen and (max-width: 600px) {
2338
- display: block;
2339
- }
2340
- }
2341
- .InternalHeader_nav--in-menu--small-screen-sm,
2342
- .InternalHeader_context-menu-group--small-screen-only-sm,
2343
- .InternalHeader_context-menu-button-with-nav-sm,
2344
- .InternalHeader_menu-divider--small-screen-sm {
2345
- @media only screen and (max-width: 960px) {
2346
- display: block;
2347
- }
2348
- }
2349
- .InternalHeader_nav--in-menu--small-screen-md,
2350
- .InternalHeader_context-menu-group--small-screen-only-md,
2351
- .InternalHeader_context-menu-button-with-nav-md,
2352
- .InternalHeader_menu-divider--small-screen-md {
2353
- @media only screen and (max-width: 1280px) {
2354
- display: block;
2355
- }
2356
- }
2357
- .InternalHeader_nav--in-menu--small-screen-lg,
2358
- .InternalHeader_context-menu-group--small-screen-only-lg,
2359
- .InternalHeader_context-menu-button-with-nav-lg,
2360
- .InternalHeader_menu-divider--small-screen-lg {
2361
- @media only screen and (max-width: 1920px) {
2362
- display: block;
2363
- }
2364
- }
2365
- .InternalHeader_nav--in-menu--small-screen-xl,
2366
- .InternalHeader_context-menu-group--small-screen-only-xl,
2367
- .InternalHeader_context-menu-button-with-nav-xl,
2368
- .InternalHeader_menu-divider--small-screen-xl {
2369
- display: block;
2370
- }
2371
2848
  .InternalHeader_nav-list__item {
2372
2849
  display: flex;
2373
2850
  }
@@ -2462,11 +2939,7 @@
2462
2939
  .LocalMessage_container {
2463
2940
  border: 1px solid;
2464
2941
  box-sizing: border-box;
2465
- display: grid;
2466
- align-items: center;
2467
2942
  border-radius: var(--dds-border-radius-surface);
2468
- padding: var(--dds-spacing-x0-75);
2469
- gap: var(--dds-spacing-x0-5);
2470
2943
  }
2471
2944
  .LocalMessage_container--info {
2472
2945
  border-color: var(--dds-color-border-info);
@@ -2515,143 +2988,49 @@
2515
2988
  grid-template-areas: "icon icon" "text text";
2516
2989
  grid-template-columns: 1fr min-content;
2517
2990
  }
2518
- .LocalMessage_container--vertical--closable {
2519
- grid-template-areas: "icon closeButton" "text text";
2520
- grid-template-columns: 1fr;
2521
- }
2522
- .LocalMessage_container__text {
2523
- grid-area: text;
2524
- padding-right: var(--dds-spacing-x0-75);
2525
- }
2526
- .LocalMessage_container__icon {
2527
- grid-area: icon;
2528
- }
2529
- .LocalMessage_container__button {
2530
- grid-area: closeButton;
2531
- margin: calc(0px - var(--dds-spacing-x0-75)) 0;
2532
- }
2533
-
2534
- /* src/components/Modal/Modal.module.css */
2535
- .Modal_container {
2536
- --dds-modal-content-padding: var(--dds-spacing-x0-25);
2537
- --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));
2538
- display: flex;
2539
- flex-direction: column;
2540
- min-width: 200px;
2541
- padding: var(--dds-modal-container-padding);
2542
- }
2543
- .Modal_container-scrollable {
2544
- max-height: calc(100vh - var(--dds-spacing-x1));
2545
- overflow: auto;
2546
- }
2547
- .Modal_content {
2548
- display: grid;
2549
- padding-right: calc(var(--dds-spacing-x1) - var(--dds-modal-content-padding));
2550
- gap: var(--dds-spacing-x1);
2551
- }
2552
- .Modal_body {
2553
- padding: var(--dds-modal-content-padding);
2554
- }
2555
- .Modal_header {
2556
- padding: var(--dds-modal-content-padding);
2557
- }
2558
- .Modal_actions {
2559
- display: flex;
2560
- flex-wrap: wrap;
2561
- gap: var(--dds-spacing-x1);
2562
- }
2563
- .Modal_close-button {
2564
- align-self: flex-end;
2565
- }
2566
-
2567
- /* src/components/Pagination/Pagination.module.css */
2568
- .Pagination_container {
2569
- display: flex;
2570
- gap: var(--dds-spacing-x0-75);
2571
- justify-content: space-between;
2572
- flex-wrap: wrap;
2573
- }
2574
- .Pagination_container--small-screen-xs {
2575
- @media only screen and (max-width: 600px) {
2576
- flex-direction: column;
2577
- align-items: center;
2578
- }
2579
- }
2580
- .Pagination_container--small-screen-sm {
2581
- @media only screen and (max-width: 960px) {
2582
- flex-direction: column;
2583
- align-items: center;
2584
- }
2585
- }
2586
- .Pagination_container--small-screen-md {
2587
- @media only screen and (max-width: 1280px) {
2588
- flex-direction: column;
2589
- align-items: center;
2590
- }
2591
- }
2592
- .Pagination_container--small-screen-lg {
2593
- @media only screen and (max-width: 1920px) {
2594
- flex-direction: column;
2595
- align-items: center;
2596
- }
2597
- }
2598
- .Pagination_container--small-screen-xl {
2599
- flex-direction: column;
2600
- align-items: center;
2601
- }
2602
- .Pagination_nav {
2603
- display: flex;
2604
- align-items: center;
2605
- }
2606
- .Pagination_nav--large-screen-hide-xs {
2607
- @media only screen and (max-width: 600px) {
2608
- display: none;
2609
- }
2610
- }
2611
- .Pagination_nav--large-screen-hide-sm {
2612
- @media only screen and (max-width: 960px) {
2613
- display: none;
2614
- }
2615
- }
2616
- .Pagination_nav--large-screen-hide-md {
2617
- @media only screen and (max-width: 1280px) {
2618
- display: none;
2619
- }
2991
+ .LocalMessage_container--vertical--closable {
2992
+ grid-template-areas: "icon closeButton" "text text";
2993
+ grid-template-columns: 1fr;
2620
2994
  }
2621
- .Pagination_nav--large-screen-hide-lg {
2622
- @media only screen and (max-width: 1920px) {
2623
- display: none;
2624
- }
2995
+ .LocalMessage_container__text {
2996
+ grid-area: text;
2997
+ padding-right: var(--dds-spacing-x0-75);
2625
2998
  }
2626
- .Pagination_nav--large-screen-hide-xl {
2627
- display: none;
2999
+ .LocalMessage_container__icon {
3000
+ grid-area: icon;
2628
3001
  }
2629
- .Pagination_nav--small-screen {
2630
- display: none;
3002
+ .LocalMessage_container__button {
3003
+ grid-area: closeButton;
3004
+ margin: calc(0px - var(--dds-spacing-x0-75)) 0;
2631
3005
  }
2632
- .Pagination_nav--small-screen-show-xs {
2633
- @media only screen and (max-width: 600px) {
2634
- display: block;
2635
- }
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);
2636
3012
  }
2637
- .Pagination_nav--small-screen-show-sm {
2638
- @media only screen and (max-width: 960px) {
2639
- display: block;
2640
- }
3013
+ .Modal_container-scrollable {
3014
+ max-height: calc(100vh - var(--dds-spacing-x1));
3015
+ overflow: auto;
2641
3016
  }
2642
- .Pagination_nav--small-screen-show-md {
2643
- @media only screen and (max-width: 1280px) {
2644
- display: block;
2645
- }
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;
2646
3021
  }
2647
- .Pagination_nav--small-screen-show-lg {
2648
- @media only screen and (max-width: 1920px) {
2649
- display: block;
2650
- }
3022
+ .Modal_close-button {
3023
+ margin-left: auto;
3024
+ margin-top: calc(-1 * var(--dds-spacing-x0-125));
2651
3025
  }
2652
- .Pagination_nav--small-screen-show-xl {
2653
- 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);
2654
3031
  }
3032
+
3033
+ /* src/components/Pagination/Pagination.module.css */
2655
3034
  .Pagination_list {
2656
3035
  display: grid;
2657
3036
  grid-auto-flow: column;
@@ -2678,11 +3057,6 @@
2678
3057
  }
2679
3058
 
2680
3059
  /* src/components/Select/Select.module.css */
2681
- .Select_container {
2682
- margin: 0;
2683
- position: relative;
2684
- width: var(--dds-select-width);
2685
- }
2686
3060
  .Select_container--disabled {
2687
3061
  cursor: not-allowed;
2688
3062
  }
@@ -2719,17 +3093,12 @@
2719
3093
  }
2720
3094
 
2721
3095
  /* src/components/Select/NativeSelect/NativeSelect.module.css */
2722
- .NativeSelect_container {
2723
- position: relative;
2724
- width: -moz-fit-content;
2725
- width: fit-content;
2726
- }
2727
3096
  .NativeSelect_select {
2728
3097
  -webkit-appearance: none;
2729
3098
  -moz-appearance: none;
2730
3099
  appearance: none;
2731
- width: var(--dds-native-select-width);
2732
3100
  text-overflow: ellipsis;
3101
+ width: 100%;
2733
3102
  &:hover:not(:disabled):not(.NativeSelect_select--readonly) {
2734
3103
  border-color: var(--dds-color-border-action-hover);
2735
3104
  box-shadow: 0 0 0 1px var(--dds-color-border-action-hover);
@@ -2795,108 +3164,78 @@
2795
3164
 
2796
3165
  /* src/components/PhoneInput/PhoneInput.module.css */
2797
3166
  .PhoneInput_inputs-container {
2798
- display: flex;
2799
- flex-direction: row;
2800
3167
  .PhoneInput_input {
2801
3168
  border-top-left-radius: 0;
2802
3169
  border-bottom-left-radius: 0;
2803
- width: var(--dds-phone-input-width);
2804
3170
  }
2805
- .PhoneInput_select {
2806
- width: 8rem;
3171
+ select {
2807
3172
  border-top-right-radius: 0;
2808
3173
  border-bottom-right-radius: 0;
2809
- margin-right: -1px;
2810
3174
  }
2811
- .PhoneInput_select--xsmall {
2812
- width: 5rem;
3175
+ .PhoneInput_select > div {
3176
+ margin-right: -1px;
2813
3177
  }
2814
3178
  }
2815
3179
  .PhoneInput_inputs-container--small-screen-xs {
2816
3180
  @media only screen and (max-width: 600px) {
2817
- flex-direction: column;
2818
- width: var(--dds-phone-input-width);
2819
3181
  .PhoneInput_input {
2820
- border-top-left-radius: 0;
2821
3182
  border-top-right-radius: 0;
2822
- width: 100%;
2823
3183
  }
2824
- .PhoneInput_select {
3184
+ select {
2825
3185
  border-bottom-left-radius: 0;
2826
3186
  border-bottom-right-radius: 0;
2827
- width: 100%;
2828
3187
  margin-bottom: -1px;
2829
3188
  }
2830
3189
  }
2831
3190
  }
2832
3191
  .PhoneInput_inputs-container--small-screen-sm {
2833
3192
  @media only screen and (max-width: 960px) {
2834
- flex-direction: column;
2835
- width: var(--dds-phone-input-width);
2836
3193
  .PhoneInput_input {
2837
- border-top-left-radius: 0;
2838
3194
  border-top-right-radius: 0;
2839
- width: 100%;
2840
3195
  }
2841
- .PhoneInput_select {
3196
+ select {
2842
3197
  border-bottom-left-radius: 0;
2843
3198
  border-bottom-right-radius: 0;
2844
- width: 100%;
2845
3199
  margin-bottom: -1px;
2846
3200
  }
2847
3201
  }
2848
3202
  }
2849
3203
  .PhoneInput_inputs-container--small-screen-md {
2850
3204
  @media only screen and (max-width: 1280px) {
2851
- flex-direction: column;
2852
- width: var(--dds-phone-input-width);
2853
3205
  .PhoneInput_input {
2854
- border-top-left-radius: 0;
2855
3206
  border-top-right-radius: 0;
2856
- width: 100%;
2857
3207
  }
2858
- .PhoneInput_select {
3208
+ select {
2859
3209
  border-bottom-left-radius: 0;
2860
3210
  border-bottom-right-radius: 0;
2861
- width: 100%;
2862
3211
  margin-bottom: -1px;
2863
3212
  }
2864
3213
  }
2865
3214
  }
2866
3215
  .PhoneInput_inputs-container--small-screen-lg {
2867
3216
  @media only screen and (max-width: 1920px) {
2868
- flex-direction: column;
2869
- width: var(--dds-phone-input-width);
2870
3217
  .PhoneInput_input {
2871
- border-top-left-radius: 0;
2872
3218
  border-top-right-radius: 0;
2873
- width: 100%;
2874
3219
  }
2875
- .PhoneInput_select {
3220
+ select {
2876
3221
  border-bottom-left-radius: 0;
2877
3222
  border-bottom-right-radius: 0;
2878
- width: 100%;
2879
3223
  margin-bottom: -1px;
2880
3224
  }
2881
3225
  }
2882
3226
  }
2883
3227
  .PhoneInput_inputs-container--small-screen-xl {
2884
- flex-direction: column;
2885
- width: var(--dds-phone-input-width);
2886
3228
  .PhoneInput_input {
2887
- border-top-left-radius: 0;
2888
3229
  border-top-right-radius: 0;
2889
- width: 100%;
2890
3230
  }
2891
- .PhoneInput_select {
3231
+ select {
2892
3232
  border-bottom-left-radius: 0;
2893
3233
  border-bottom-right-radius: 0;
2894
- width: 100%;
2895
3234
  margin-bottom: -1px;
2896
3235
  }
2897
3236
  }
2898
- .PhoneInput_select:focus-visible,
2899
- .PhoneInput_select:hover {
3237
+ select:focus-visible,
3238
+ select:hover {
2900
3239
  z-index: var(--dds-zindex-absolute-element);
2901
3240
  & ~ svg {
2902
3241
  z-index: var(--dds-zindex-absolute-element);
@@ -3052,25 +3391,12 @@
3052
3391
  }
3053
3392
 
3054
3393
  /* src/components/ProgressBar/ProgressBar.module.css */
3055
- .ProgressBar_container {
3056
- width: 100%;
3057
- }
3058
3394
  .ProgressBar_progress {
3059
- width: var(--dds-progressbar-width);
3060
- height: 48px;
3061
3395
  background-color: var(--dds-color-surface-medium);
3062
3396
  border: 1px solid var(--dds-color-border-default);
3063
3397
  border-radius: var(--dds-border-radius-surface);
3064
3398
  }
3065
- .ProgressBar_progress--small {
3066
- height: var(--dds-spacing-x0-75);
3067
- }
3068
- .ProgressBar_progress--medium {
3069
- height: var(--dds-spacing-x1-5);
3070
- }
3071
3399
  .ProgressBar_fill {
3072
- height: 100%;
3073
- width: var(--dds-progressbar-fill-width);
3074
3400
  background-color: var(--dds-color-surface-action-resting);
3075
3401
  @media (prefers-reduced-motion: no-preference) {
3076
3402
  transition: width 0.2s, background-color 0.2s;
@@ -3083,7 +3409,6 @@
3083
3409
  background-color: var(--dds-color-surface-action-danger-resting);
3084
3410
  }
3085
3411
  .ProgressBar_fill--indeterminate {
3086
- width: 25%;
3087
3412
  animation: ProgressBar_indeterminate 2s infinite linear;
3088
3413
  }
3089
3414
  @keyframes ProgressBar_indeterminate {
@@ -3159,158 +3484,6 @@
3159
3484
  padding-left: var(--dds-spacing-x1);
3160
3485
  }
3161
3486
 
3162
- /* src/components/SelectionControl/SelectionControl.module.css */
3163
- .SelectionControl_container {
3164
- display: flex;
3165
- flex-direction: column;
3166
- gap: var(--dds-spacing-x0-125);
3167
- }
3168
- .SelectionControl_group {
3169
- display: flex;
3170
- }
3171
- .SelectionControl_group--row {
3172
- flex-direction: row;
3173
- gap: var(--dds-spacing-x0-75);
3174
- }
3175
- .SelectionControl_group--column {
3176
- flex-direction: column;
3177
- gap: var(--dds-spacing-x0-5);
3178
- }
3179
- .SelectionControl_label {
3180
- position: relative;
3181
- display: flex;
3182
- align-items: center;
3183
- cursor: pointer;
3184
- -webkit-user-select: none;
3185
- -moz-user-select: none;
3186
- user-select: none;
3187
- width: -moz-fit-content;
3188
- width: fit-content;
3189
- padding-left: calc(18px + var(--dds-spacing-x0-5));
3190
- input ~ .SelectionControl_selection-control {
3191
- @media (prefers-reduced-motion: no-preference) {
3192
- transition:
3193
- box-shadow 0.2s,
3194
- background-color 0.2s,
3195
- border 0.2s,
3196
- var(--dds-focus-transition);
3197
- }
3198
- }
3199
- &:hover:not(.SelectionControl_label--readonly) input:enabled:not(:checked) ~ .SelectionControl_selection-control {
3200
- background-color: var(--dds-color-surface-hover-default);
3201
- box-shadow: inset 0 0 0 1px var(--dds-color-border-action-hover);
3202
- border-color: var(--dds-color-border-action-hover);
3203
- }
3204
- input:checked:enabled ~ .SelectionControl_selection-control,
3205
- input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3206
- border-color: var(--dds-color-surface-action-selected);
3207
- background-color: var(--dds-color-surface-action-selected);
3208
- }
3209
- &.SelectionControl_label--readonly input:checked:enabled ~ .SelectionControl_selection-control,
3210
- &.SelectionControl_label--readonly input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3211
- border-color: var(--dds-color-surface-action-selected-disabled);
3212
- background-color: var(--dds-color-surface-action-selected-disabled);
3213
- }
3214
- &:hover:not(.SelectionControl_label--readonly) input:checked:enabled[type=checkbox] ~ .SelectionControl_selection-control,
3215
- &:hover:not(.SelectionControl_label--readonly) input:enabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3216
- background-color: var(--dds-color-surface-action-hover);
3217
- border-color: var(--dds-color-surface-action-hover);
3218
- }
3219
- input:checked ~ .SelectionControl_selection-control:after,
3220
- input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3221
- display: block;
3222
- }
3223
- }
3224
- .SelectionControl_label--checkbox {
3225
- .SelectionControl_selection-control:after {
3226
- border: solid var(--dds-color-icon-on-action);
3227
- border-width: 0 1px 1px 0;
3228
- left: 6px;
3229
- top: 1px;
3230
- width: 5px;
3231
- height: 10px;
3232
- transform: rotate(45deg);
3233
- }
3234
- input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
3235
- border-width: 1px 0 0 0;
3236
- left: 25%;
3237
- top: 50%;
3238
- width: 50%;
3239
- height: 1px;
3240
- transform: none;
3241
- }
3242
- }
3243
- .SelectionControl_label--radio {
3244
- .SelectionControl_selection-control:after {
3245
- border-radius: var(--dds-border-radius-rounded);
3246
- background-color: var(--dds-color-icon-on-action);
3247
- height: 8px;
3248
- width: 8px;
3249
- left: 50%;
3250
- top: 50%;
3251
- transform: translate(-50%, -50%);
3252
- }
3253
- }
3254
- .SelectionControl_label--disabled {
3255
- cursor: not-allowed;
3256
- input:disabled ~ .SelectionControl_selection-control {
3257
- border-color: var(--dds-color-border-default);
3258
- }
3259
- input:checked:disabled ~ .SelectionControl_selection-control,
3260
- input:disabled[data-indeterminate=true] ~ .SelectionControl_selection-control {
3261
- border-color: var(--dds-color-surface-action-selected-disabled);
3262
- background-color: var(--dds-color-surface-action-selected-disabled);
3263
- }
3264
- }
3265
- .SelectionControl_label--readonly {
3266
- cursor: default;
3267
- color: var(--dds-color-text-medium);
3268
- input ~ .SelectionControl_selection-control {
3269
- border-color: var(--dds-color-border-default);
3270
- background-color: var(--dds-color-surface-field-disabled);
3271
- }
3272
- input:checked ~ .SelectionControl_selection-control,
3273
- input[data-indeterminate=true] ~ .SelectionControl_selection-control {
3274
- border-color: var(--dds-color-surface-action-selected-disabled);
3275
- background-color: var(--dds-color-surface-action-selected-disabled);
3276
- }
3277
- }
3278
- .SelectionControl_label--error {
3279
- &:hover input:enabled:not(:focus-visible):not(:checked) ~ .SelectionControl_selection-control {
3280
- background-color: var(--dds-color-surface-danger-default);
3281
- border-color: var(--dds-color-border-danger);
3282
- box-shadow: 0 0 0 1px var(--dds-c-tic-border-danger);
3283
- }
3284
- input:not(:focus-visible) ~ .SelectionControl_selection-control,
3285
- input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control &:hover input:checked:enabled:not(:focus-visible) .SelectionControl_selection-control {
3286
- border-color: var(--dds-color-border-danger);
3287
- box-shadow: 0 0 0 1px var(--dds-color-border-danger);
3288
- }
3289
- }
3290
- .SelectionControl_label--no-text {
3291
- padding: 9px;
3292
- }
3293
- .SelectionControl_selection-control {
3294
- position: absolute;
3295
- left: 0;
3296
- box-sizing: border-box;
3297
- border: 1px solid;
3298
- border-color: var(--dds-color-border-default);
3299
- background-color: var(--dds-color-surface-field-default);
3300
- border-radius: var(--dds-border-radius-input);
3301
- height: 18px;
3302
- width: 18px;
3303
- &:after {
3304
- content: "";
3305
- position: absolute;
3306
- display: none;
3307
- box-sizing: border-box;
3308
- }
3309
- }
3310
- .SelectionControl_selection-control--radio {
3311
- border-radius: var(--dds-border-radius-rounded);
3312
- }
3313
-
3314
3487
  /* src/components/Skeleton/Skeleton.module.css */
3315
3488
  @keyframes Skeleton_ddsSkeletonAnimation {
3316
3489
  0% {
@@ -3599,9 +3772,6 @@
3599
3772
  border-color: var(--dds-color-surface-action-selected);
3600
3773
  box-shadow: inset 0px -2px 0px 0px var(--dds-color-surface-action-selected);
3601
3774
  }
3602
- .Tabs_tab-panel {
3603
- padding: var(--dds-spacing-x0-25);
3604
- }
3605
3775
 
3606
3776
  /* src/components/Tag/Tag.module.css */
3607
3777
  .Tag_container {
@@ -3691,11 +3861,6 @@
3691
3861
  .TextInput_container--disabled {
3692
3862
  color: var(--dds-color-text-subtle);
3693
3863
  }
3694
- .TextInput_affix-container {
3695
- position: relative;
3696
- display: flex;
3697
- align-items: center;
3698
- }
3699
3864
  .TextInput_input-width {
3700
3865
  width: var(--dds-textinput-width);
3701
3866
  }
@@ -3722,9 +3887,6 @@
3722
3887
  .TextInput_icon--xsmall {
3723
3888
  left: var(--dds-spacing-x0-5);
3724
3889
  }
3725
- .TextInput_label {
3726
- display: block;
3727
- }
3728
3890
  .TextInput_affix {
3729
3891
  position: absolute;
3730
3892
  height: 100%;
@@ -3750,11 +3912,6 @@
3750
3912
  .TextInput_affix--disabled {
3751
3913
  border-color: var(--dds-color-border-subtle);
3752
3914
  }
3753
- .TextInput_message-container {
3754
- display: flex;
3755
- justify-content: space-between;
3756
- gap: var(--dds-spacing-x0-5);
3757
- }
3758
3915
 
3759
3916
  /* src/components/Toggle/Toggle.module.css */
3760
3917
  .Toggle_label {
@@ -3920,11 +4077,6 @@
3920
4077
  }
3921
4078
 
3922
4079
  /* src/components/ToggleBar/ToggleBar.module.css */
3923
- .ToggleBar_container {
3924
- display: flex;
3925
- flex-direction: column;
3926
- gap: var(--dds-spacing-x0-125);
3927
- }
3928
4080
  .ToggleBar_bar {
3929
4081
  display: grid;
3930
4082
  grid-auto-flow: column;
@@ -4019,26 +4171,6 @@
4019
4171
  }
4020
4172
 
4021
4173
  /* src/components/ToggleButton/ToggleButton.module.css */
4022
- .ToggleButton_group-container {
4023
- display: flex;
4024
- flex-direction: column;
4025
- gap: var(--dds-spacing-x0-5);
4026
- }
4027
- .ToggleButton_group {
4028
- display: flex;
4029
- flex-wrap: wrap;
4030
- gap: var(--dds-spacing-x0-75);
4031
- }
4032
- .ToggleButton_group--row {
4033
- flex-direction: row;
4034
- }
4035
- .ToggleButton_group--column {
4036
- flex-direction: column;
4037
- }
4038
- .ToggleButton_container {
4039
- width: -moz-fit-content;
4040
- width: fit-content;
4041
- }
4042
4174
  .ToggleButton_content {
4043
4175
  display: flex;
4044
4176
  align-items: center;