@rolster/react-components 18.10.9 → 18.10.10

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 (18) hide show
  1. package/dist/cjs/assets/{index-nrIFu6l7.css → index-_J97liwf.css} +26 -27
  2. package/dist/es/assets/{index-nrIFu6l7.css → index-_J97liwf.css} +26 -27
  3. package/dist/esm/components/atoms/Avatar/Avatar.css +0 -1
  4. package/dist/esm/components/atoms/CheckBox/CheckBox.css +2 -2
  5. package/dist/esm/components/atoms/RadioButton/RadioButton.css +2 -2
  6. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +2 -2
  7. package/dist/esm/components/molecules/DayPicker/DayPicker.css +2 -2
  8. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +2 -2
  9. package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +2 -2
  10. package/dist/esm/components/molecules/Toolbar/Toolbar.css +1 -1
  11. package/dist/esm/components/molecules/YearPicker/YearPicker.css +1 -1
  12. package/dist/esm/components/organisms/Confirmation/Confirmation.css +4 -4
  13. package/dist/esm/components/organisms/DatePicker/DatePicker.css +3 -3
  14. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +2 -2
  15. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +1 -1
  16. package/dist/esm/components/organisms/Modal/Modal.css +1 -1
  17. package/dist/esm/components/organisms/Snackbar/Snackbar.css +1 -1
  18. package/package.json +2 -2
package/dist/cjs/assets/{index-nrIFu6l7.css → index-_J97liwf.css} RENAMED
@@ -25,7 +25,6 @@
25
25
 
26
26
  .rls-avatar {
27
27
  position: relative;
28
- float: left;
29
28
  display: flex;
30
29
  justify-content: center;
31
30
  overflow: hidden;
@@ -391,8 +390,8 @@
391
390
  }
392
391
  .rls-checkbox__component {
393
392
  border-radius: var(--sizing-x1);
394
- width: 0.875rem;
395
- height: 0.875rem;
393
+ width: 7rem;
394
+ height: 7rem;
396
395
  margin: auto;
397
396
  background: var(--gradient-rolster-500);
398
397
  transform: var(--pvt-component-transform);
@@ -647,8 +646,8 @@
647
646
  }
648
647
  .rls-radiobutton__component {
649
648
  border-radius: 50%;
650
- width: 0.875rem;
651
- height: 0.875rem;
649
+ width: 7rem;
650
+ height: 7rem;
652
651
  margin: auto;
653
652
  background: var(--gradient-rolster-500);
654
653
  transform: var(--pvt-component-transform);
@@ -900,7 +899,7 @@
900
899
  --rls-button-toggle-ul-opacity: 0;
901
900
  --rls-button-toggle-ul-transform: none;
902
901
  position: absolute;
903
- top: 2.8125rem;
902
+ top: 22.5rem;
904
903
  left: 0rem;
905
904
  width: 100%;
906
905
  height: 0rem;
@@ -948,7 +947,7 @@
948
947
  line-height: var(--sizing-x20);
949
948
  cursor: default;
950
949
  font-weight: var(--font-weight-bold);
951
- font-size: 0.825rem;
950
+ font-size: 6.6rem;
952
951
  letter-spacing: 0.825px;
953
952
  text-transform: uppercase;
954
953
  color: var(--color-theme-300);
@@ -1002,7 +1001,7 @@
1002
1001
  position: relative;
1003
1002
  float: left;
1004
1003
  width: 100%;
1005
- max-width: 17.5rem;
1004
+ max-width: 140rem;
1006
1005
  box-sizing: border-box;
1007
1006
  user-select: none;
1008
1007
  }
@@ -1036,7 +1035,7 @@
1036
1035
  height: var(--sizing-x18);
1037
1036
  line-height: var(--sizing-x18);
1038
1037
  margin: var(--sizing-x1) 0rem;
1039
- font-size: 0.875rem;
1038
+ font-size: 7rem;
1040
1039
  font-weight: var(--font-weight-semibold);
1041
1040
  background: var(--pvt-span-background);
1042
1041
  }
@@ -1069,7 +1068,7 @@
1069
1068
  position: relative;
1070
1069
  float: left;
1071
1070
  width: 100%;
1072
- max-width: 17.5rem;
1071
+ max-width: 140rem;
1073
1072
  box-sizing: border-box;
1074
1073
  user-select: none;
1075
1074
  }
@@ -1103,7 +1102,7 @@
1103
1102
  height: var(--sizing-x18);
1104
1103
  line-height: var(--sizing-x18);
1105
1104
  margin: var(--sizing-x1) 0rem;
1106
- font-size: 0.875rem;
1105
+ font-size: 7rem;
1107
1106
  font-weight: var(--font-weight-semibold);
1108
1107
  }
1109
1108
  .rls-day-range-picker__day__span:not(:hover) {
@@ -1143,7 +1142,7 @@
1143
1142
  position: relative;
1144
1143
  float: left;
1145
1144
  width: 100%;
1146
- max-width: 17.5rem;
1145
+ max-width: 140rem;
1147
1146
  display: grid;
1148
1147
  grid-template-columns: repeat(3, 1fr);
1149
1148
  gap: var(--sizing-x2);
@@ -1173,7 +1172,7 @@
1173
1172
  opacity: 0.5;
1174
1173
  }
1175
1174
  .rls-month-picker__span {
1176
- font-size: 0.725rem;
1175
+ font-size: 5.8rem;
1177
1176
  margin: auto;
1178
1177
  cursor: default;
1179
1178
  pointer-events: none;
@@ -1406,7 +1405,7 @@
1406
1405
  color: var(--color-theme-500);
1407
1406
  height: var(--sizing-x12);
1408
1407
  line-height: var(--sizing-x12);
1409
- font-size: 1.0125rem;
1408
+ font-size: 8.125rem;
1410
1409
  letter-spacing: var(--label-letter-spacing);
1411
1410
  font-weight: var(--font-weight-bold);
1412
1411
  }
@@ -1427,7 +1426,7 @@
1427
1426
  position: relative;
1428
1427
  float: left;
1429
1428
  width: 100%;
1430
- max-width: 17.5rem;
1429
+ max-width: 140rem;
1431
1430
  box-sizing: border-box;
1432
1431
  overflow: hidden;
1433
1432
  user-select: none;
@@ -1604,9 +1603,9 @@
1604
1603
  --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
1605
1604
  --pvt-subtitle-line-height: var(--body-line-height);
1606
1605
  --pvt-subtitle-text-transform: initial;
1607
- --pvt-content-font-size: 0.925rem;
1606
+ --pvt-content-font-size: 7.4rem;
1608
1607
  --pvt-content-letter-spacing: 0.05em;
1609
- --pvt-content-line-height: 1.325rem;
1608
+ --pvt-content-line-height: 10.6rem;
1610
1609
  --pvt-backdrop-opacity: 0;
1611
1610
  --pvt-backdrop-bottom: initial;
1612
1611
  position: fixed;
@@ -1635,7 +1634,7 @@
1635
1634
  flex-direction: column;
1636
1635
  row-gap: var(--sizing-x8);
1637
1636
  width: calc(100% - var(--sizing-x16));
1638
- max-width: 35rem;
1637
+ max-width: 280rem;
1639
1638
  height: var(--pvt-component-height);
1640
1639
  opacity: var(--pvt-component-opacity);
1641
1640
  visibility: var(--pvt-component-visibility);
@@ -1732,7 +1731,7 @@
1732
1731
  --pvt-subtitle-font-size: var(--smalltext-font-size);
1733
1732
  --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
1734
1733
  --pvt-subtitle-line-height: var(--smalltext-line-height);
1735
- --pvt-content-font-size: 0.9125rem;
1734
+ --pvt-content-font-size: 7.325rem;
1736
1735
  }
1737
1736
  .rls-confirmation__footer__actions {
1738
1737
  flex-direction: column-reverse;
@@ -1746,7 +1745,7 @@
1746
1745
  display: flex;
1747
1746
  flex-direction: column;
1748
1747
  overflow: hidden;
1749
- max-width: 18.75rem;
1748
+ max-width: 150rem;
1750
1749
  }
1751
1750
  .rls-date-picker__header {
1752
1751
  background: var(--color-rolster-100);
@@ -1766,7 +1765,7 @@
1766
1765
  .rls-date-picker__title--description {
1767
1766
  height: var(--sizing-x16);
1768
1767
  line-height: var(--sizing-x16);
1769
- font-size: 1.15rem;
1768
+ font-size: 9.25rem;
1770
1769
  }
1771
1770
  .rls-date-picker__title--year {
1772
1771
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
@@ -1777,7 +1776,7 @@
1777
1776
  }
1778
1777
  .rls-date-picker__component {
1779
1778
  display: flex;
1780
- width: 18.75rem;
1779
+ width: 150rem;
1781
1780
  padding: 0rem var(--sizing-x2);
1782
1781
  box-sizing: border-box;
1783
1782
  margin-bottom: var(--sizing-x4);
@@ -1820,7 +1819,7 @@
1820
1819
  }
1821
1820
 
1822
1821
  .rls-modal {
1823
- --pvt-component-transform: translateY(10rem) scale(0.6);
1822
+ --pvt-component-transform: translateY(80rem) scale(0.6);
1824
1823
  --pvt-component-height: 0rem;
1825
1824
  --pvt-component-opacity: 0;
1826
1825
  --pvt-component-visibility: hidden;
@@ -1923,7 +1922,7 @@
1923
1922
  .rls-date-range-picker {
1924
1923
  position: relative;
1925
1924
  float: left;
1926
- max-width: 18.75rem;
1925
+ max-width: 150rem;
1927
1926
  overflow: hidden;
1928
1927
  }
1929
1928
  .rls-date-range-picker__header {
@@ -1944,7 +1943,7 @@
1944
1943
  .rls-date-range-picker__title--description {
1945
1944
  height: var(--sizing-x16);
1946
1945
  line-height: var(--sizing-x16);
1947
- font-size: 1.15rem;
1946
+ font-size: 9.25rem;
1948
1947
  }
1949
1948
  .rls-date-range-picker__title--year {
1950
1949
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
@@ -2045,7 +2044,7 @@
2045
2044
  top: var(--sizing-x8);
2046
2045
  right: var(--sizing-x8);
2047
2046
  width: calc(100% - var(--sizing-x16));
2048
- max-width: 20rem;
2047
+ max-width: 160rem;
2049
2048
  height: auto;
2050
2049
  max-height: calc(100vh - var(--sizing-x16));
2051
2050
  z-index: var(--z-index-12);
@@ -2090,7 +2089,7 @@
2090
2089
  z-index: 32;
2091
2090
  width: auto;
2092
2091
  height: auto;
2093
- max-width: 30rem;
2092
+ max-width: 240rem;
2094
2093
  padding: var(--sizing-x6);
2095
2094
  box-sizing: border-box;
2096
2095
  border-radius: var(--sizing-x4);
package/dist/es/assets/{index-nrIFu6l7.css → index-_J97liwf.css} RENAMED
@@ -25,7 +25,6 @@
25
25
 
26
26
  .rls-avatar {
27
27
  position: relative;
28
- float: left;
29
28
  display: flex;
30
29
  justify-content: center;
31
30
  overflow: hidden;
@@ -391,8 +390,8 @@
391
390
  }
392
391
  .rls-checkbox__component {
393
392
  border-radius: var(--sizing-x1);
394
- width: 0.875rem;
395
- height: 0.875rem;
393
+ width: 7rem;
394
+ height: 7rem;
396
395
  margin: auto;
397
396
  background: var(--gradient-rolster-500);
398
397
  transform: var(--pvt-component-transform);
@@ -647,8 +646,8 @@
647
646
  }
648
647
  .rls-radiobutton__component {
649
648
  border-radius: 50%;
650
- width: 0.875rem;
651
- height: 0.875rem;
649
+ width: 7rem;
650
+ height: 7rem;
652
651
  margin: auto;
653
652
  background: var(--gradient-rolster-500);
654
653
  transform: var(--pvt-component-transform);
@@ -900,7 +899,7 @@
900
899
  --rls-button-toggle-ul-opacity: 0;
901
900
  --rls-button-toggle-ul-transform: none;
902
901
  position: absolute;
903
- top: 2.8125rem;
902
+ top: 22.5rem;
904
903
  left: 0rem;
905
904
  width: 100%;
906
905
  height: 0rem;
@@ -948,7 +947,7 @@
948
947
  line-height: var(--sizing-x20);
949
948
  cursor: default;
950
949
  font-weight: var(--font-weight-bold);
951
- font-size: 0.825rem;
950
+ font-size: 6.6rem;
952
951
  letter-spacing: 0.825px;
953
952
  text-transform: uppercase;
954
953
  color: var(--color-theme-300);
@@ -1002,7 +1001,7 @@
1002
1001
  position: relative;
1003
1002
  float: left;
1004
1003
  width: 100%;
1005
- max-width: 17.5rem;
1004
+ max-width: 140rem;
1006
1005
  box-sizing: border-box;
1007
1006
  user-select: none;
1008
1007
  }
@@ -1036,7 +1035,7 @@
1036
1035
  height: var(--sizing-x18);
1037
1036
  line-height: var(--sizing-x18);
1038
1037
  margin: var(--sizing-x1) 0rem;
1039
- font-size: 0.875rem;
1038
+ font-size: 7rem;
1040
1039
  font-weight: var(--font-weight-semibold);
1041
1040
  background: var(--pvt-span-background);
1042
1041
  }
@@ -1069,7 +1068,7 @@
1069
1068
  position: relative;
1070
1069
  float: left;
1071
1070
  width: 100%;
1072
- max-width: 17.5rem;
1071
+ max-width: 140rem;
1073
1072
  box-sizing: border-box;
1074
1073
  user-select: none;
1075
1074
  }
@@ -1103,7 +1102,7 @@
1103
1102
  height: var(--sizing-x18);
1104
1103
  line-height: var(--sizing-x18);
1105
1104
  margin: var(--sizing-x1) 0rem;
1106
- font-size: 0.875rem;
1105
+ font-size: 7rem;
1107
1106
  font-weight: var(--font-weight-semibold);
1108
1107
  }
1109
1108
  .rls-day-range-picker__day__span:not(:hover) {
@@ -1143,7 +1142,7 @@
1143
1142
  position: relative;
1144
1143
  float: left;
1145
1144
  width: 100%;
1146
- max-width: 17.5rem;
1145
+ max-width: 140rem;
1147
1146
  display: grid;
1148
1147
  grid-template-columns: repeat(3, 1fr);
1149
1148
  gap: var(--sizing-x2);
@@ -1173,7 +1172,7 @@
1173
1172
  opacity: 0.5;
1174
1173
  }
1175
1174
  .rls-month-picker__span {
1176
- font-size: 0.725rem;
1175
+ font-size: 5.8rem;
1177
1176
  margin: auto;
1178
1177
  cursor: default;
1179
1178
  pointer-events: none;
@@ -1406,7 +1405,7 @@
1406
1405
  color: var(--color-theme-500);
1407
1406
  height: var(--sizing-x12);
1408
1407
  line-height: var(--sizing-x12);
1409
- font-size: 1.0125rem;
1408
+ font-size: 8.125rem;
1410
1409
  letter-spacing: var(--label-letter-spacing);
1411
1410
  font-weight: var(--font-weight-bold);
1412
1411
  }
@@ -1427,7 +1426,7 @@
1427
1426
  position: relative;
1428
1427
  float: left;
1429
1428
  width: 100%;
1430
- max-width: 17.5rem;
1429
+ max-width: 140rem;
1431
1430
  box-sizing: border-box;
1432
1431
  overflow: hidden;
1433
1432
  user-select: none;
@@ -1604,9 +1603,9 @@
1604
1603
  --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
1605
1604
  --pvt-subtitle-line-height: var(--body-line-height);
1606
1605
  --pvt-subtitle-text-transform: initial;
1607
- --pvt-content-font-size: 0.925rem;
1606
+ --pvt-content-font-size: 7.4rem;
1608
1607
  --pvt-content-letter-spacing: 0.05em;
1609
- --pvt-content-line-height: 1.325rem;
1608
+ --pvt-content-line-height: 10.6rem;
1610
1609
  --pvt-backdrop-opacity: 0;
1611
1610
  --pvt-backdrop-bottom: initial;
1612
1611
  position: fixed;
@@ -1635,7 +1634,7 @@
1635
1634
  flex-direction: column;
1636
1635
  row-gap: var(--sizing-x8);
1637
1636
  width: calc(100% - var(--sizing-x16));
1638
- max-width: 35rem;
1637
+ max-width: 280rem;
1639
1638
  height: var(--pvt-component-height);
1640
1639
  opacity: var(--pvt-component-opacity);
1641
1640
  visibility: var(--pvt-component-visibility);
@@ -1732,7 +1731,7 @@
1732
1731
  --pvt-subtitle-font-size: var(--smalltext-font-size);
1733
1732
  --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
1734
1733
  --pvt-subtitle-line-height: var(--smalltext-line-height);
1735
- --pvt-content-font-size: 0.9125rem;
1734
+ --pvt-content-font-size: 7.325rem;
1736
1735
  }
1737
1736
  .rls-confirmation__footer__actions {
1738
1737
  flex-direction: column-reverse;
@@ -1746,7 +1745,7 @@
1746
1745
  display: flex;
1747
1746
  flex-direction: column;
1748
1747
  overflow: hidden;
1749
- max-width: 18.75rem;
1748
+ max-width: 150rem;
1750
1749
  }
1751
1750
  .rls-date-picker__header {
1752
1751
  background: var(--color-rolster-100);
@@ -1766,7 +1765,7 @@
1766
1765
  .rls-date-picker__title--description {
1767
1766
  height: var(--sizing-x16);
1768
1767
  line-height: var(--sizing-x16);
1769
- font-size: 1.15rem;
1768
+ font-size: 9.25rem;
1770
1769
  }
1771
1770
  .rls-date-picker__title--year {
1772
1771
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
@@ -1777,7 +1776,7 @@
1777
1776
  }
1778
1777
  .rls-date-picker__component {
1779
1778
  display: flex;
1780
- width: 18.75rem;
1779
+ width: 150rem;
1781
1780
  padding: 0rem var(--sizing-x2);
1782
1781
  box-sizing: border-box;
1783
1782
  margin-bottom: var(--sizing-x4);
@@ -1820,7 +1819,7 @@
1820
1819
  }
1821
1820
 
1822
1821
  .rls-modal {
1823
- --pvt-component-transform: translateY(10rem) scale(0.6);
1822
+ --pvt-component-transform: translateY(80rem) scale(0.6);
1824
1823
  --pvt-component-height: 0rem;
1825
1824
  --pvt-component-opacity: 0;
1826
1825
  --pvt-component-visibility: hidden;
@@ -1923,7 +1922,7 @@
1923
1922
  .rls-date-range-picker {
1924
1923
  position: relative;
1925
1924
  float: left;
1926
- max-width: 18.75rem;
1925
+ max-width: 150rem;
1927
1926
  overflow: hidden;
1928
1927
  }
1929
1928
  .rls-date-range-picker__header {
@@ -1944,7 +1943,7 @@
1944
1943
  .rls-date-range-picker__title--description {
1945
1944
  height: var(--sizing-x16);
1946
1945
  line-height: var(--sizing-x16);
1947
- font-size: 1.15rem;
1946
+ font-size: 9.25rem;
1948
1947
  }
1949
1948
  .rls-date-range-picker__title--year {
1950
1949
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
@@ -2045,7 +2044,7 @@
2045
2044
  top: var(--sizing-x8);
2046
2045
  right: var(--sizing-x8);
2047
2046
  width: calc(100% - var(--sizing-x16));
2048
- max-width: 20rem;
2047
+ max-width: 160rem;
2049
2048
  height: auto;
2050
2049
  max-height: calc(100vh - var(--sizing-x16));
2051
2050
  z-index: var(--z-index-12);
@@ -2090,7 +2089,7 @@
2090
2089
  z-index: 32;
2091
2090
  width: auto;
2092
2091
  height: auto;
2093
- max-width: 30rem;
2092
+ max-width: 240rem;
2094
2093
  padding: var(--sizing-x6);
2095
2094
  box-sizing: border-box;
2096
2095
  border-radius: var(--sizing-x4);
package/dist/esm/components/atoms/Avatar/Avatar.css CHANGED
@@ -1,6 +1,5 @@
1
1
  .rls-avatar {
2
2
  position: relative;
3
- float: left;
4
3
  display: flex;
5
4
  justify-content: center;
6
5
  overflow: hidden;
package/dist/esm/components/atoms/CheckBox/CheckBox.css CHANGED
@@ -23,8 +23,8 @@
23
23
  }
24
24
  .rls-checkbox__component {
25
25
  border-radius: var(--sizing-x1);
26
- width: 0.875rem;
27
- height: 0.875rem;
26
+ width: 7rem;
27
+ height: 7rem;
28
28
  margin: auto;
29
29
  background: var(--gradient-rolster-500);
30
30
  transform: var(--pvt-component-transform);
package/dist/esm/components/atoms/RadioButton/RadioButton.css CHANGED
@@ -23,8 +23,8 @@
23
23
  }
24
24
  .rls-radiobutton__component {
25
25
  border-radius: 50%;
26
- width: 0.875rem;
27
- height: 0.875rem;
26
+ width: 7rem;
27
+ height: 7rem;
28
28
  margin: auto;
29
29
  background: var(--gradient-rolster-500);
30
30
  transform: var(--pvt-component-transform);
package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css CHANGED
@@ -19,7 +19,7 @@
19
19
  --rls-button-toggle-ul-opacity: 0;
20
20
  --rls-button-toggle-ul-transform: none;
21
21
  position: absolute;
22
- top: 2.8125rem;
22
+ top: 22.5rem;
23
23
  left: 0rem;
24
24
  width: 100%;
25
25
  height: 0rem;
@@ -67,7 +67,7 @@
67
67
  line-height: var(--sizing-x20);
68
68
  cursor: default;
69
69
  font-weight: var(--font-weight-bold);
70
- font-size: 0.825rem;
70
+ font-size: 6.6rem;
71
71
  letter-spacing: 0.825px;
72
72
  text-transform: uppercase;
73
73
  color: var(--color-theme-300);
package/dist/esm/components/molecules/DayPicker/DayPicker.css CHANGED
@@ -5,7 +5,7 @@
5
5
  position: relative;
6
6
  float: left;
7
7
  width: 100%;
8
- max-width: 17.5rem;
8
+ max-width: 140rem;
9
9
  box-sizing: border-box;
10
10
  user-select: none;
11
11
  }
@@ -39,7 +39,7 @@
39
39
  height: var(--sizing-x18);
40
40
  line-height: var(--sizing-x18);
41
41
  margin: var(--sizing-x1) 0rem;
42
- font-size: 0.875rem;
42
+ font-size: 7rem;
43
43
  font-weight: var(--font-weight-semibold);
44
44
  background: var(--pvt-span-background);
45
45
  }
package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css CHANGED
@@ -5,7 +5,7 @@
5
5
  position: relative;
6
6
  float: left;
7
7
  width: 100%;
8
- max-width: 17.5rem;
8
+ max-width: 140rem;
9
9
  box-sizing: border-box;
10
10
  user-select: none;
11
11
  }
@@ -39,7 +39,7 @@
39
39
  height: var(--sizing-x18);
40
40
  line-height: var(--sizing-x18);
41
41
  margin: var(--sizing-x1) 0rem;
42
- font-size: 0.875rem;
42
+ font-size: 7rem;
43
43
  font-weight: var(--font-weight-semibold);
44
44
  }
45
45
  .rls-day-range-picker__day__span:not(:hover) {
package/dist/esm/components/molecules/MonthPicker/MonthPicker.css CHANGED
@@ -2,7 +2,7 @@
2
2
  position: relative;
3
3
  float: left;
4
4
  width: 100%;
5
- max-width: 17.5rem;
5
+ max-width: 140rem;
6
6
  display: grid;
7
7
  grid-template-columns: repeat(3, 1fr);
8
8
  gap: var(--sizing-x2);
@@ -32,7 +32,7 @@
32
32
  opacity: 0.5;
33
33
  }
34
34
  .rls-month-picker__span {
35
- font-size: 0.725rem;
35
+ font-size: 5.8rem;
36
36
  margin: auto;
37
37
  cursor: default;
38
38
  pointer-events: none;
package/dist/esm/components/molecules/Toolbar/Toolbar.css CHANGED
@@ -32,7 +32,7 @@
32
32
  color: var(--color-theme-500);
33
33
  height: var(--sizing-x12);
34
34
  line-height: var(--sizing-x12);
35
- font-size: 1.0125rem;
35
+ font-size: 8.125rem;
36
36
  letter-spacing: var(--label-letter-spacing);
37
37
  font-weight: var(--font-weight-bold);
38
38
  }
package/dist/esm/components/molecules/YearPicker/YearPicker.css CHANGED
@@ -2,7 +2,7 @@
2
2
  position: relative;
3
3
  float: left;
4
4
  width: 100%;
5
- max-width: 17.5rem;
5
+ max-width: 140rem;
6
6
  box-sizing: border-box;
7
7
  overflow: hidden;
8
8
  user-select: none;
package/dist/esm/components/organisms/Confirmation/Confirmation.css CHANGED
@@ -11,9 +11,9 @@
11
11
  --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
12
12
  --pvt-subtitle-line-height: var(--body-line-height);
13
13
  --pvt-subtitle-text-transform: initial;
14
- --pvt-content-font-size: 0.925rem;
14
+ --pvt-content-font-size: 7.4rem;
15
15
  --pvt-content-letter-spacing: 0.05em;
16
- --pvt-content-line-height: 1.325rem;
16
+ --pvt-content-line-height: 10.6rem;
17
17
  --pvt-backdrop-opacity: 0;
18
18
  --pvt-backdrop-bottom: initial;
19
19
  position: fixed;
@@ -42,7 +42,7 @@
42
42
  flex-direction: column;
43
43
  row-gap: var(--sizing-x8);
44
44
  width: calc(100% - var(--sizing-x16));
45
- max-width: 35rem;
45
+ max-width: 280rem;
46
46
  height: var(--pvt-component-height);
47
47
  opacity: var(--pvt-component-opacity);
48
48
  visibility: var(--pvt-component-visibility);
@@ -139,7 +139,7 @@
139
139
  --pvt-subtitle-font-size: var(--smalltext-font-size);
140
140
  --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
141
141
  --pvt-subtitle-line-height: var(--smalltext-line-height);
142
- --pvt-content-font-size: 0.9125rem;
142
+ --pvt-content-font-size: 7.325rem;
143
143
  }
144
144
  .rls-confirmation__footer__actions {
145
145
  flex-direction: column-reverse;
package/dist/esm/components/organisms/DatePicker/DatePicker.css CHANGED
@@ -3,7 +3,7 @@
3
3
  display: flex;
4
4
  flex-direction: column;
5
5
  overflow: hidden;
6
- max-width: 18.75rem;
6
+ max-width: 150rem;
7
7
  }
8
8
  .rls-date-picker__header {
9
9
  background: var(--color-rolster-100);
@@ -23,7 +23,7 @@
23
23
  .rls-date-picker__title--description {
24
24
  height: var(--sizing-x16);
25
25
  line-height: var(--sizing-x16);
26
- font-size: 1.15rem;
26
+ font-size: 9.25rem;
27
27
  }
28
28
  .rls-date-picker__title--year {
29
29
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
@@ -34,7 +34,7 @@
34
34
  }
35
35
  .rls-date-picker__component {
36
36
  display: flex;
37
- width: 18.75rem;
37
+ width: 150rem;
38
38
  padding: 0rem var(--sizing-x2);
39
39
  box-sizing: border-box;
40
40
  margin-bottom: var(--sizing-x4);
package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .rls-date-range-picker {
2
2
  position: relative;
3
3
  float: left;
4
- max-width: 18.75rem;
4
+ max-width: 150rem;
5
5
  overflow: hidden;
6
6
  }
7
7
  .rls-date-range-picker__header {
@@ -22,7 +22,7 @@
22
22
  .rls-date-range-picker__title--description {
23
23
  height: var(--sizing-x16);
24
24
  line-height: var(--sizing-x16);
25
- font-size: 1.15rem;
25
+ font-size: 9.25rem;
26
26
  }
27
27
  .rls-date-range-picker__title--year {
28
28
  margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
package/dist/esm/components/organisms/FormNavigation/FormNavigation.css CHANGED
@@ -3,7 +3,7 @@
3
3
  top: var(--sizing-x8);
4
4
  right: var(--sizing-x8);
5
5
  width: calc(100% - var(--sizing-x16));
6
- max-width: 20rem;
6
+ max-width: 160rem;
7
7
  height: auto;
8
8
  max-height: calc(100vh - var(--sizing-x16));
9
9
  z-index: var(--z-index-12);
package/dist/esm/components/organisms/Modal/Modal.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .rls-modal {
2
- --pvt-component-transform: translateY(10rem) scale(0.6);
2
+ --pvt-component-transform: translateY(80rem) scale(0.6);
3
3
  --pvt-component-height: 0rem;
4
4
  --pvt-component-opacity: 0;
5
5
  --pvt-component-visibility: hidden;
package/dist/esm/components/organisms/Snackbar/Snackbar.css CHANGED
@@ -7,7 +7,7 @@
7
7
  z-index: 32;
8
8
  width: auto;
9
9
  height: auto;
10
- max-width: 30rem;
10
+ max-width: 240rem;
11
11
  padding: var(--sizing-x6);
12
12
  box-sizing: border-box;
13
13
  border-radius: var(--sizing-x4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.10.9",
3
+ "version": "18.10.10",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -58,7 +58,7 @@
58
58
  "@rollup/plugin-commonjs": "^25.0.4",
59
59
  "@rollup/plugin-node-resolve": "^15.2.1",
60
60
  "@rollup/plugin-typescript": "^11.1.3",
61
- "@rolster/styles-foundations": "^1.1.0",
61
+ "@rolster/styles-foundations": "^1.1.1",
62
62
  "@rolster/types": "^1.0.4",
63
63
  "@types/node-sass": "^4.11.4",
64
64
  "@types/react": "^18.0.28",