@rolster/react-components 18.21.29 → 18.21.30

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 (17) hide show
  1. package/dist/cjs/assets/{index-iBIATb-B.css → index-DQbtHgNQ.css} +38 -47
  2. package/dist/es/assets/{index-iBIATb-B.css → index-DQbtHgNQ.css} +38 -47
  3. package/dist/esm/components/atoms/CheckBox/CheckBox.css +6 -9
  4. package/dist/esm/components/atoms/CheckBox/CheckBox.css.map +1 -1
  5. package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -9
  6. package/dist/esm/components/atoms/RadioButton/RadioButton.css.map +1 -1
  7. package/dist/esm/components/atoms/Switch/Switch.css +17 -27
  8. package/dist/esm/components/atoms/Switch/Switch.css.map +1 -1
  9. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css +1 -0
  10. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css.map +1 -1
  11. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css +2 -2
  12. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css.map +1 -1
  13. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css +1 -0
  14. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css.map +1 -1
  15. package/dist/esm/components/organisms/Confirmation/Confirmation.css +5 -0
  16. package/dist/esm/components/organisms/Confirmation/Confirmation.css.map +1 -1
  17. package/package.json +2 -2
package/dist/cjs/assets/{index-iBIATb-B.css → index-DQbtHgNQ.css} RENAMED
@@ -451,8 +451,7 @@
451
451
  --rlc-checkbox-children-dimension,
452
452
  var(--rls-sizing-x6)
453
453
  );
454
- --pvt-component-border-color: var(--rls-app-color-500);
455
- --pvt-component-transform: scale(0);
454
+ --pvt-component-background: var(--rls-app-color-050);
456
455
  position: relative;
457
456
  display: flex;
458
457
  width: var(--pvt-dimension);
@@ -462,15 +461,15 @@
462
461
  box-sizing: border-box;
463
462
  outline: none;
464
463
  border-radius: var(--rls-sizing-x3);
465
- background: var(--rls-theme-color-050);
466
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
464
+ background: var(--rls-app-color-300);
465
+ transition: all 160ms 0ms var(--rls-standard-curve);
467
466
  }
468
467
  .rls-checkbox:hover {
469
468
  cursor: pointer;
470
469
  }
471
470
  .rls-checkbox--checked {
472
- --pvt-component-border-color: var(--rls-theme-color-500);
473
- --pvt-component-transform: scale(1);
471
+ --pvt-component-background: var(--rls-theme-color-200);
472
+ background: var(--rls-theme-color-400);
474
473
  }
475
474
  .rls-checkbox--disabled {
476
475
  opacity: 0.5;
@@ -480,9 +479,7 @@
480
479
  width: var(--pvt-component-dimension);
481
480
  height: var(--pvt-component-dimension);
482
481
  border-radius: var(--rls-sizing-x1);
483
- background: var(--rls-theme-color-500);
484
- transform: var(--pvt-component-transform);
485
- transform-origin: 50% 50%;
482
+ background: var(--pvt-component-background);
486
483
  transition: all 160ms 0ms var(--rls-standard-curve);
487
484
  } /*# sourceMappingURL=CheckBox.css.map */
488
485
 
@@ -807,8 +804,7 @@
807
804
  --rlc-radiobutton-children-dimension,
808
805
  var(--rls-sizing-x6)
809
806
  );
810
- --pvt-component-border-color: var(--rls-app-color-500);
811
- --pvt-component-transform: scale(0);
807
+ --pvt-component-background: var(--rls-app-color-050);
812
808
  position: relative;
813
809
  display: flex;
814
810
  width: var(--pvt-dimension);
@@ -818,15 +814,15 @@
818
814
  outline: none;
819
815
  border-radius: 50%;
820
816
  box-sizing: border-box;
821
- background: var(--rls-theme-color-050);
822
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
817
+ background: var(--rls-app-color-300);
818
+ transition: all 160ms 0ms var(--rls-standard-curve);
823
819
  }
824
820
  .rls-radiobutton:hover {
825
821
  cursor: pointer;
826
822
  }
827
823
  .rls-radiobutton--checked {
828
- --pvt-component-border-color: var(--rls-theme-color-500);
829
- --pvt-component-transform: scale(1);
824
+ --pvt-component-background: var(--rls-theme-color-200);
825
+ background: var(--rls-theme-color-400);
830
826
  }
831
827
  .rls-radiobutton--disabled {
832
828
  opacity: 0.5;
@@ -836,9 +832,7 @@
836
832
  width: var(--pvt-component-dimension);
837
833
  height: var(--pvt-component-dimension);
838
834
  border-radius: 50%;
839
- background: var(--rls-theme-color-500);
840
- transform: var(--pvt-component-transform);
841
- transform-origin: 50% 50%;
835
+ background: var(--pvt-component-background);
842
836
  transition: all 160ms 0ms var(--rls-standard-curve);
843
837
  } /*# sourceMappingURL=RadioButton.css.map */
844
838
 
@@ -911,25 +905,23 @@
911
905
  } /*# sourceMappingURL=SkeletonText.css.map */
912
906
 
913
907
  .rls-switch {
914
- --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
915
- --pvt-element-left: var(--rls-sizing-x1);
916
- --pvt-element-border-color: var(--rls-app-color-400);
917
- --pvt-element-background: var(--rls-app-color-050);
918
- --pvt-element-item-background: transparent;
919
- --pvt-bar-background: var(--rls-app-color-300);
920
- max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
908
+ --pvt-component-padding: var(
909
+ --rlc-switch-component-padding,
910
+ var(--rls-sizing-x4) var(--rls-sizing-x1)
911
+ );
912
+ --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x12));
913
+ --pvt-element-left: 0rem;
914
+ --pvt-element-background: var(--rls-app-color-300);
915
+ --pvt-bar-background: var(--rls-app-color-500);
916
+ max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
921
917
  }
922
918
  .rls-switch:hover {
923
919
  cursor: pointer;
924
920
  }
925
921
  .rls-switch--checked {
926
- --pvt-element-left: calc(
927
- 100% - var(--pvt-element-size) - var(--rls-sizing-x1)
928
- );
929
- --pvt-element-border-color: var(--rls-theme-color-500);
930
- --pvt-element-background: var(--rls-theme-color-050);
931
- --pvt-element-item-background: var(--rls-theme-color-500);
932
- --pvt-bar-background: var(--rls-theme-color-300);
922
+ --pvt-element-left: calc(100% - var(--pvt-element-size));
923
+ --pvt-element-background: var(--rls-theme-color-200);
924
+ --pvt-bar-background: var(--rls-theme-color-400);
933
925
  }
934
926
  .rls-switch--disabled {
935
927
  opacity: 0.5;
@@ -938,7 +930,7 @@
938
930
  .rls-switch__component {
939
931
  position: relative;
940
932
  width: 100%;
941
- padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
933
+ padding: var(--pvt-component-padding);
942
934
  box-sizing: border-box;
943
935
  }
944
936
  .rls-switch__component__element {
@@ -947,27 +939,19 @@
947
939
  left: var(--pvt-element-left);
948
940
  width: var(--pvt-element-size);
949
941
  height: var(--pvt-element-size);
950
- z-index: var(--rls-z-index-2);
942
+ border-radius: 50%;
951
943
  padding: var(--rls-sizing-x2);
952
944
  box-sizing: border-box;
953
- border-radius: 50%;
945
+ z-index: var(--rls-z-index-2);
954
946
  background: var(--pvt-element-background);
955
- border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
956
- transition: left 240ms var(--rls-standard-curve);
957
- }
958
- .rls-switch__component__element::before {
959
- display: block;
960
- content: '';
961
- width: 100%;
962
- height: 100%;
963
- border-radius: 50%;
964
- background: var(--pvt-element-item-background);
947
+ transition: all 160ms var(--rls-standard-curve);
965
948
  }
966
949
  .rls-switch__component__bar {
967
950
  background: var(--pvt-bar-background);
968
951
  width: 100%;
969
952
  height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
970
953
  border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
954
+ transition: all 160ms 0ms var(--rls-standard-curve);
971
955
  } /*# sourceMappingURL=Switch.css.map */
972
956
 
973
957
  .rls-alert {
@@ -1237,6 +1221,7 @@
1237
1221
  --pvt-text-text-overflow: ellipsis;
1238
1222
  display: flex;
1239
1223
  column-gap: var(--rls-sizing-x4);
1224
+ align-items: center;
1240
1225
  }
1241
1226
  .rls-label-checkbox--disabled {
1242
1227
  --pvt-text-opacity: 0.5;
@@ -1272,9 +1257,9 @@
1272
1257
  --pvt-text-overflow: hidden;
1273
1258
  --pvt-text-white-space: nowrap;
1274
1259
  --pvt-text-text-overflow: ellipsis;
1275
- position: relative;
1276
- width: 100%;
1277
1260
  display: flex;
1261
+ column-gap: var(--rls-sizing-x4);
1262
+ align-items: center;
1278
1263
  }
1279
1264
  .rls-label-radiobutton--disabled {
1280
1265
  --pvt-text-opacity: 0.5;
@@ -1313,6 +1298,7 @@
1313
1298
  --pvt-text-text-overflow: ellipsis;
1314
1299
  display: flex;
1315
1300
  column-gap: var(--rls-sizing-x4);
1301
+ align-items: center;
1316
1302
  }
1317
1303
  .rls-label-switch--disabled {
1318
1304
  --pvt-text-opacity: 0.5;
@@ -1855,6 +1841,9 @@
1855
1841
  background: var(--rls-app-color-050);
1856
1842
  box-shadow: var(--rls-app-shadow-4);
1857
1843
  transform: var(--pvt-component-transform);
1844
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
1845
+ transform 125ms 0ms var(--rls-deceleration-curve),
1846
+ visibility 125ms 0ms var(--rls-deceleration-curve);
1858
1847
  }
1859
1848
  .rls-confirmation__header {
1860
1849
  position: relative;
@@ -1924,6 +1913,8 @@
1924
1913
  z-index: var(--rls-z-index-2);
1925
1914
  background: var(--rls-theme-backdrop-900);
1926
1915
  backdrop-filter: blur(2px);
1916
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
1917
+ bottom 120ms 0ms var(--rls-deceleration-curve);
1927
1918
  }
1928
1919
  @media screen and (max-width: 480px) {
1929
1920
  .rls-confirmation {
package/dist/es/assets/{index-iBIATb-B.css → index-DQbtHgNQ.css} RENAMED
@@ -451,8 +451,7 @@
451
451
  --rlc-checkbox-children-dimension,
452
452
  var(--rls-sizing-x6)
453
453
  );
454
- --pvt-component-border-color: var(--rls-app-color-500);
455
- --pvt-component-transform: scale(0);
454
+ --pvt-component-background: var(--rls-app-color-050);
456
455
  position: relative;
457
456
  display: flex;
458
457
  width: var(--pvt-dimension);
@@ -462,15 +461,15 @@
462
461
  box-sizing: border-box;
463
462
  outline: none;
464
463
  border-radius: var(--rls-sizing-x3);
465
- background: var(--rls-theme-color-050);
466
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
464
+ background: var(--rls-app-color-300);
465
+ transition: all 160ms 0ms var(--rls-standard-curve);
467
466
  }
468
467
  .rls-checkbox:hover {
469
468
  cursor: pointer;
470
469
  }
471
470
  .rls-checkbox--checked {
472
- --pvt-component-border-color: var(--rls-theme-color-500);
473
- --pvt-component-transform: scale(1);
471
+ --pvt-component-background: var(--rls-theme-color-200);
472
+ background: var(--rls-theme-color-400);
474
473
  }
475
474
  .rls-checkbox--disabled {
476
475
  opacity: 0.5;
@@ -480,9 +479,7 @@
480
479
  width: var(--pvt-component-dimension);
481
480
  height: var(--pvt-component-dimension);
482
481
  border-radius: var(--rls-sizing-x1);
483
- background: var(--rls-theme-color-500);
484
- transform: var(--pvt-component-transform);
485
- transform-origin: 50% 50%;
482
+ background: var(--pvt-component-background);
486
483
  transition: all 160ms 0ms var(--rls-standard-curve);
487
484
  } /*# sourceMappingURL=CheckBox.css.map */
488
485
 
@@ -807,8 +804,7 @@
807
804
  --rlc-radiobutton-children-dimension,
808
805
  var(--rls-sizing-x6)
809
806
  );
810
- --pvt-component-border-color: var(--rls-app-color-500);
811
- --pvt-component-transform: scale(0);
807
+ --pvt-component-background: var(--rls-app-color-050);
812
808
  position: relative;
813
809
  display: flex;
814
810
  width: var(--pvt-dimension);
@@ -818,15 +814,15 @@
818
814
  outline: none;
819
815
  border-radius: 50%;
820
816
  box-sizing: border-box;
821
- background: var(--rls-theme-color-050);
822
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
817
+ background: var(--rls-app-color-300);
818
+ transition: all 160ms 0ms var(--rls-standard-curve);
823
819
  }
824
820
  .rls-radiobutton:hover {
825
821
  cursor: pointer;
826
822
  }
827
823
  .rls-radiobutton--checked {
828
- --pvt-component-border-color: var(--rls-theme-color-500);
829
- --pvt-component-transform: scale(1);
824
+ --pvt-component-background: var(--rls-theme-color-200);
825
+ background: var(--rls-theme-color-400);
830
826
  }
831
827
  .rls-radiobutton--disabled {
832
828
  opacity: 0.5;
@@ -836,9 +832,7 @@
836
832
  width: var(--pvt-component-dimension);
837
833
  height: var(--pvt-component-dimension);
838
834
  border-radius: 50%;
839
- background: var(--rls-theme-color-500);
840
- transform: var(--pvt-component-transform);
841
- transform-origin: 50% 50%;
835
+ background: var(--pvt-component-background);
842
836
  transition: all 160ms 0ms var(--rls-standard-curve);
843
837
  } /*# sourceMappingURL=RadioButton.css.map */
844
838
 
@@ -911,25 +905,23 @@
911
905
  } /*# sourceMappingURL=SkeletonText.css.map */
912
906
 
913
907
  .rls-switch {
914
- --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
915
- --pvt-element-left: var(--rls-sizing-x1);
916
- --pvt-element-border-color: var(--rls-app-color-400);
917
- --pvt-element-background: var(--rls-app-color-050);
918
- --pvt-element-item-background: transparent;
919
- --pvt-bar-background: var(--rls-app-color-300);
920
- max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
908
+ --pvt-component-padding: var(
909
+ --rlc-switch-component-padding,
910
+ var(--rls-sizing-x4) var(--rls-sizing-x1)
911
+ );
912
+ --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x12));
913
+ --pvt-element-left: 0rem;
914
+ --pvt-element-background: var(--rls-app-color-300);
915
+ --pvt-bar-background: var(--rls-app-color-500);
916
+ max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
921
917
  }
922
918
  .rls-switch:hover {
923
919
  cursor: pointer;
924
920
  }
925
921
  .rls-switch--checked {
926
- --pvt-element-left: calc(
927
- 100% - var(--pvt-element-size) - var(--rls-sizing-x1)
928
- );
929
- --pvt-element-border-color: var(--rls-theme-color-500);
930
- --pvt-element-background: var(--rls-theme-color-050);
931
- --pvt-element-item-background: var(--rls-theme-color-500);
932
- --pvt-bar-background: var(--rls-theme-color-300);
922
+ --pvt-element-left: calc(100% - var(--pvt-element-size));
923
+ --pvt-element-background: var(--rls-theme-color-200);
924
+ --pvt-bar-background: var(--rls-theme-color-400);
933
925
  }
934
926
  .rls-switch--disabled {
935
927
  opacity: 0.5;
@@ -938,7 +930,7 @@
938
930
  .rls-switch__component {
939
931
  position: relative;
940
932
  width: 100%;
941
- padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
933
+ padding: var(--pvt-component-padding);
942
934
  box-sizing: border-box;
943
935
  }
944
936
  .rls-switch__component__element {
@@ -947,27 +939,19 @@
947
939
  left: var(--pvt-element-left);
948
940
  width: var(--pvt-element-size);
949
941
  height: var(--pvt-element-size);
950
- z-index: var(--rls-z-index-2);
942
+ border-radius: 50%;
951
943
  padding: var(--rls-sizing-x2);
952
944
  box-sizing: border-box;
953
- border-radius: 50%;
945
+ z-index: var(--rls-z-index-2);
954
946
  background: var(--pvt-element-background);
955
- border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
956
- transition: left 240ms var(--rls-standard-curve);
957
- }
958
- .rls-switch__component__element::before {
959
- display: block;
960
- content: '';
961
- width: 100%;
962
- height: 100%;
963
- border-radius: 50%;
964
- background: var(--pvt-element-item-background);
947
+ transition: all 160ms var(--rls-standard-curve);
965
948
  }
966
949
  .rls-switch__component__bar {
967
950
  background: var(--pvt-bar-background);
968
951
  width: 100%;
969
952
  height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
970
953
  border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
954
+ transition: all 160ms 0ms var(--rls-standard-curve);
971
955
  } /*# sourceMappingURL=Switch.css.map */
972
956
 
973
957
  .rls-alert {
@@ -1237,6 +1221,7 @@
1237
1221
  --pvt-text-text-overflow: ellipsis;
1238
1222
  display: flex;
1239
1223
  column-gap: var(--rls-sizing-x4);
1224
+ align-items: center;
1240
1225
  }
1241
1226
  .rls-label-checkbox--disabled {
1242
1227
  --pvt-text-opacity: 0.5;
@@ -1272,9 +1257,9 @@
1272
1257
  --pvt-text-overflow: hidden;
1273
1258
  --pvt-text-white-space: nowrap;
1274
1259
  --pvt-text-text-overflow: ellipsis;
1275
- position: relative;
1276
- width: 100%;
1277
1260
  display: flex;
1261
+ column-gap: var(--rls-sizing-x4);
1262
+ align-items: center;
1278
1263
  }
1279
1264
  .rls-label-radiobutton--disabled {
1280
1265
  --pvt-text-opacity: 0.5;
@@ -1313,6 +1298,7 @@
1313
1298
  --pvt-text-text-overflow: ellipsis;
1314
1299
  display: flex;
1315
1300
  column-gap: var(--rls-sizing-x4);
1301
+ align-items: center;
1316
1302
  }
1317
1303
  .rls-label-switch--disabled {
1318
1304
  --pvt-text-opacity: 0.5;
@@ -1855,6 +1841,9 @@
1855
1841
  background: var(--rls-app-color-050);
1856
1842
  box-shadow: var(--rls-app-shadow-4);
1857
1843
  transform: var(--pvt-component-transform);
1844
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
1845
+ transform 125ms 0ms var(--rls-deceleration-curve),
1846
+ visibility 125ms 0ms var(--rls-deceleration-curve);
1858
1847
  }
1859
1848
  .rls-confirmation__header {
1860
1849
  position: relative;
@@ -1924,6 +1913,8 @@
1924
1913
  z-index: var(--rls-z-index-2);
1925
1914
  background: var(--rls-theme-backdrop-900);
1926
1915
  backdrop-filter: blur(2px);
1916
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
1917
+ bottom 120ms 0ms var(--rls-deceleration-curve);
1927
1918
  }
1928
1919
  @media screen and (max-width: 480px) {
1929
1920
  .rls-confirmation {
package/dist/esm/components/atoms/CheckBox/CheckBox.css CHANGED
@@ -4,8 +4,7 @@
4
4
  --rlc-checkbox-children-dimension,
5
5
  var(--rls-sizing-x6)
6
6
  );
7
- --pvt-component-border-color: var(--rls-app-color-500);
8
- --pvt-component-transform: scale(0);
7
+ --pvt-component-background: var(--rls-app-color-050);
9
8
  position: relative;
10
9
  display: flex;
11
10
  width: var(--pvt-dimension);
@@ -15,15 +14,15 @@
15
14
  box-sizing: border-box;
16
15
  outline: none;
17
16
  border-radius: var(--rls-sizing-x3);
18
- background: var(--rls-theme-color-050);
19
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
17
+ background: var(--rls-app-color-300);
18
+ transition: all 160ms 0ms var(--rls-standard-curve);
20
19
  }
21
20
  .rls-checkbox:hover {
22
21
  cursor: pointer;
23
22
  }
24
23
  .rls-checkbox--checked {
25
- --pvt-component-border-color: var(--rls-theme-color-500);
26
- --pvt-component-transform: scale(1);
24
+ --pvt-component-background: var(--rls-theme-color-200);
25
+ background: var(--rls-theme-color-400);
27
26
  }
28
27
  .rls-checkbox--disabled {
29
28
  opacity: 0.5;
@@ -33,8 +32,6 @@
33
32
  width: var(--pvt-component-dimension);
34
33
  height: var(--pvt-component-dimension);
35
34
  border-radius: var(--rls-sizing-x1);
36
- background: var(--rls-theme-color-500);
37
- transform: var(--pvt-component-transform);
38
- transform-origin: 50% 50%;
35
+ background: var(--pvt-component-background);
39
36
  transition: all 160ms 0ms var(--rls-standard-curve);
40
37
  } /*# sourceMappingURL=CheckBox.css.map */
package/dist/esm/components/atoms/CheckBox/CheckBox.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/CheckBox/CheckBox.scss"],"names":[],"mappings":"AAOA,cACE,sEAEA,0FAKA,uDACA,oCAEA,kBACA,aACA,2BACA,4BACA,uBACA,mBACA,sBACA,aACA,mCACA,sCACA,oEAEA,oBACE,eAGF,uBACE,yDACA,oCAGF,wBACE,WACA,oBAGF,yBACE,qCACA,sCACA,mCACA,sCACA,yCACA,yBACA","file":"CheckBox.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/CheckBox/CheckBox.scss"],"names":[],"mappings":"AAOA,cACE,sEAEA,0FAKA,qDAEA,kBACA,aACA,2BACA,4BACA,uBACA,mBACA,sBACA,aACA,mCACA,oCACA,mDAEA,oBACE,eAGF,uBACE,uDAEA,sCAGF,wBACE,WACA,oBAGF,yBACE,qCACA,sCACA,mCACA,2CACA","file":"CheckBox.css"}
package/dist/esm/components/atoms/RadioButton/RadioButton.css CHANGED
@@ -4,8 +4,7 @@
4
4
  --rlc-radiobutton-children-dimension,
5
5
  var(--rls-sizing-x6)
6
6
  );
7
- --pvt-component-border-color: var(--rls-app-color-500);
8
- --pvt-component-transform: scale(0);
7
+ --pvt-component-background: var(--rls-app-color-050);
9
8
  position: relative;
10
9
  display: flex;
11
10
  width: var(--pvt-dimension);
@@ -15,15 +14,15 @@
15
14
  outline: none;
16
15
  border-radius: 50%;
17
16
  box-sizing: border-box;
18
- background: var(--rls-theme-color-050);
19
- border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
17
+ background: var(--rls-app-color-300);
18
+ transition: all 160ms 0ms var(--rls-standard-curve);
20
19
  }
21
20
  .rls-radiobutton:hover {
22
21
  cursor: pointer;
23
22
  }
24
23
  .rls-radiobutton--checked {
25
- --pvt-component-border-color: var(--rls-theme-color-500);
26
- --pvt-component-transform: scale(1);
24
+ --pvt-component-background: var(--rls-theme-color-200);
25
+ background: var(--rls-theme-color-400);
27
26
  }
28
27
  .rls-radiobutton--disabled {
29
28
  opacity: 0.5;
@@ -33,8 +32,6 @@
33
32
  width: var(--pvt-component-dimension);
34
33
  height: var(--pvt-component-dimension);
35
34
  border-radius: 50%;
36
- background: var(--rls-theme-color-500);
37
- transform: var(--pvt-component-transform);
38
- transform-origin: 50% 50%;
35
+ background: var(--pvt-component-background);
39
36
  transition: all 160ms 0ms var(--rls-standard-curve);
40
37
  } /*# sourceMappingURL=RadioButton.css.map */
package/dist/esm/components/atoms/RadioButton/RadioButton.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/RadioButton/RadioButton.scss"],"names":[],"mappings":"AAOA,iBACE,yEAEA,6FAKA,uDACA,oCAEA,kBACA,aACA,2BACA,4BACA,uBACA,mBACA,aACA,kBACA,sBACA,sCACA,oEAEA,uBACE,eAGF,0BACE,yDACA,oCAGF,2BACE,WACA,oBAGF,4BACE,qCACA,sCACA,kBACA,sCACA,yCACA,yBACA","file":"RadioButton.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/RadioButton/RadioButton.scss"],"names":[],"mappings":"AAOA,iBACE,yEAEA,6FAKA,qDAEA,kBACA,aACA,2BACA,4BACA,uBACA,mBACA,aACA,kBACA,sBACA,oCACA,mDAEA,uBACE,eAGF,0BACE,uDAEA,sCAGF,2BACE,WACA,oBAGF,4BACE,qCACA,sCACA,kBACA,2CACA","file":"RadioButton.css"}
package/dist/esm/components/atoms/Switch/Switch.css CHANGED
@@ -1,23 +1,21 @@
1
1
  .rls-switch {
2
- --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
3
- --pvt-element-left: var(--rls-sizing-x1);
4
- --pvt-element-border-color: var(--rls-app-color-400);
5
- --pvt-element-background: var(--rls-app-color-050);
6
- --pvt-element-item-background: transparent;
7
- --pvt-bar-background: var(--rls-app-color-300);
8
- max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
2
+ --pvt-component-padding: var(
3
+ --rlc-switch-component-padding,
4
+ var(--rls-sizing-x4) var(--rls-sizing-x1)
5
+ );
6
+ --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x12));
7
+ --pvt-element-left: 0rem;
8
+ --pvt-element-background: var(--rls-app-color-300);
9
+ --pvt-bar-background: var(--rls-app-color-500);
10
+ max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
9
11
  }
10
12
  .rls-switch:hover {
11
13
  cursor: pointer;
12
14
  }
13
15
  .rls-switch--checked {
14
- --pvt-element-left: calc(
15
- 100% - var(--pvt-element-size) - var(--rls-sizing-x1)
16
- );
17
- --pvt-element-border-color: var(--rls-theme-color-500);
18
- --pvt-element-background: var(--rls-theme-color-050);
19
- --pvt-element-item-background: var(--rls-theme-color-500);
20
- --pvt-bar-background: var(--rls-theme-color-300);
16
+ --pvt-element-left: calc(100% - var(--pvt-element-size));
17
+ --pvt-element-background: var(--rls-theme-color-200);
18
+ --pvt-bar-background: var(--rls-theme-color-400);
21
19
  }
22
20
  .rls-switch--disabled {
23
21
  opacity: 0.5;
@@ -26,7 +24,7 @@
26
24
  .rls-switch__component {
27
25
  position: relative;
28
26
  width: 100%;
29
- padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
27
+ padding: var(--pvt-component-padding);
30
28
  box-sizing: border-box;
31
29
  }
32
30
  .rls-switch__component__element {
@@ -35,25 +33,17 @@
35
33
  left: var(--pvt-element-left);
36
34
  width: var(--pvt-element-size);
37
35
  height: var(--pvt-element-size);
38
- z-index: var(--rls-z-index-2);
36
+ border-radius: 50%;
39
37
  padding: var(--rls-sizing-x2);
40
38
  box-sizing: border-box;
41
- border-radius: 50%;
39
+ z-index: var(--rls-z-index-2);
42
40
  background: var(--pvt-element-background);
43
- border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
44
- transition: left 240ms var(--rls-standard-curve);
45
- }
46
- .rls-switch__component__element::before {
47
- display: block;
48
- content: '';
49
- width: 100%;
50
- height: 100%;
51
- border-radius: 50%;
52
- background: var(--pvt-element-item-background);
41
+ transition: all 160ms var(--rls-standard-curve);
53
42
  }
54
43
  .rls-switch__component__bar {
55
44
  background: var(--pvt-bar-background);
56
45
  width: 100%;
57
46
  height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
58
47
  border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
48
+ transition: all 160ms 0ms var(--rls-standard-curve);
59
49
  } /*# sourceMappingURL=Switch.css.map */
package/dist/esm/components/atoms/Switch/Switch.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Switch/Switch.scss"],"names":[],"mappings":"AAOA,YACE,0EACA,yCACA,qDACA,mDACA,2CACA,+CAEA,6DAEA,kBACE,eAGF,qBACE,kFAGA,uDACA,qDACA,0DACA,iDAGF,sBACE,WACA,oBAGF,uBACE,kBACA,WACA,kDACA,sBAEA,gCACE,kBACA,SACA,6BACA,8BACA,+BACA,6BACA,6BACA,sBACA,kBACA,yCACA,kEACA,gDAEA,wCACE,cACA,WACA,WACA,YACA,kBACA,8CAIJ,4BACE,qCACA,WACA,0DACA","file":"Switch.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/atoms/Switch/Switch.scss"],"names":[],"mappings":"AAOA,YACE,0GAKA,0EACA,yBACA,mDACA,+CAEA,6DAEA,kBACE,eAGF,qBACE,yDACA,qDACA,iDAGF,sBACE,WACA,oBAGF,uBACE,kBACA,WACA,qCACA,sBAEA,gCACE,kBACA,SACA,6BACA,8BACA,+BACA,kBACA,6BACA,sBACA,6BACA,yCACA,+CAGF,4BACE,qCACA,WACA,0DACA,iEACA","file":"Switch.css"}
package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  display: flex;
8
8
  column-gap: var(--rls-sizing-x4);
9
+ align-items: center;
9
10
  }
10
11
  .rls-label-checkbox--disabled {
11
12
  --pvt-text-opacity: 0.5;
package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelCheckBox/LabelCheckBox.scss"],"names":[],"mappings":"AAOA,oBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,aACA,gCAEA,8BACE,wBAEA,oBAGF,8BACE,kCACA,6BACA,gCACA,wBAGF,+BACE,WAGF,0BACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelCheckBox.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelCheckBox/LabelCheckBox.scss"],"names":[],"mappings":"AAOA,oBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,aACA,gCACA,mBAEA,8BACE,wBAEA,oBAGF,8BACE,kCACA,6BACA,gCACA,wBAGF,+BACE,WAGF,0BACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelCheckBox.css"}
package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css CHANGED
@@ -4,9 +4,9 @@
4
4
  --pvt-text-overflow: hidden;
5
5
  --pvt-text-white-space: nowrap;
6
6
  --pvt-text-text-overflow: ellipsis;
7
- position: relative;
8
- width: 100%;
9
7
  display: flex;
8
+ column-gap: var(--rls-sizing-x4);
9
+ align-items: center;
10
10
  }
11
11
  .rls-label-radiobutton--disabled {
12
12
  --pvt-text-opacity: 0.5;
package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelRadioButton/LabelRadioButton.scss"],"names":[],"mappings":"AAOA,uBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,kBACA,WACA,aAEA,iCACE,wBAEA,oBAGF,iCACE,kCACA,6BACA,gCACA,wBAGF,kCACE,kCACA,WAGF,6BACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelRadioButton.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelRadioButton/LabelRadioButton.scss"],"names":[],"mappings":"AAOA,uBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,aACA,gCACA,mBAEA,iCACE,wBAEA,oBAGF,iCACE,kCACA,6BACA,gCACA,wBAGF,kCACE,kCACA,WAGF,6BACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelRadioButton.css"}
package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css CHANGED
@@ -6,6 +6,7 @@
6
6
  --pvt-text-text-overflow: ellipsis;
7
7
  display: flex;
8
8
  column-gap: var(--rls-sizing-x4);
9
+ align-items: center;
9
10
  }
10
11
  .rls-label-switch--disabled {
11
12
  --pvt-text-opacity: 0.5;
package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelSwitch/LabelSwitch.scss"],"names":[],"mappings":"AAOA,kBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,aACA,gCAEA,4BACE,wBAEA,oBAGF,4BACE,kCACA,6BACA,gCACA,wBAGF,6BACE,gBAGF,wBACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelSwitch.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/molecules/LabelSwitch/LabelSwitch.scss"],"names":[],"mappings":"AAOA,kBACE,sBACA,yCACA,4BACA,+BACA,mCAEA,aACA,gCACA,mBAEA,4BACE,wBAEA,oBAGF,4BACE,kCACA,6BACA,gCACA,wBAGF,6BACE,gBAGF,wBACE,6CACA,8BACA,kCACA,+BACA,qCACA,0CACA,+CACA,iBACA,gCACA,kCACA,wCACA","file":"LabelSwitch.css"}
package/dist/esm/components/organisms/Confirmation/Confirmation.css CHANGED
@@ -53,6 +53,9 @@
53
53
  background: var(--rls-app-color-050);
54
54
  box-shadow: var(--rls-app-shadow-4);
55
55
  transform: var(--pvt-component-transform);
56
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
57
+ transform 125ms 0ms var(--rls-deceleration-curve),
58
+ visibility 125ms 0ms var(--rls-deceleration-curve);
56
59
  }
57
60
  .rls-confirmation__header {
58
61
  position: relative;
@@ -122,6 +125,8 @@
122
125
  z-index: var(--rls-z-index-2);
123
126
  background: var(--rls-theme-backdrop-900);
124
127
  backdrop-filter: blur(2px);
128
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
129
+ bottom 120ms 0ms var(--rls-deceleration-curve);
125
130
  }
126
131
  @media screen and (max-width: 480px) {
127
132
  .rls-confirmation {
package/dist/esm/components/organisms/Confirmation/Confirmation.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/Confirmation/Confirmation.scss"],"names":[],"mappings":"AAOA,kBACE,wDACA,6BACA,2BACA,mCAEA,qDACA,+DACA,yDACA,oCAEA,oDACA,8DACA,wDACA,uCAEA,gCACA,qCACA,mCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,YACA,aACA,uBACA,mBACA,8BACA,kBAEA,2BACE,oCACA,6BACA,2BACA,kDACA,4BACA,0BAEA,mBAGF,6BACE,kBACA,aACA,yCACA,iBACA,mCACA,sBACA,6BACA,qCACA,2CACA,kCACA,sBACA,6BACA,mCACA,oCACA,mCACA,yCAMF,0BACE,kBACA,aACA,WACA,sBACA,6BACA,kCACA,sBAGF,yBACE,kBACA,+BACA,wCACA,qCACA,yCACA,+CACA,+CAGF,4BACE,kBACA,iCACA,wCACA,wCACA,4CACA,kDACA,kDAGF,wBACE,kBACA,WACA,kCACA,sBAGF,2BACE,+BACA,kBAEA,6BACE,0CACA,uCACA,2CACA,iDAIJ,0BACE,kBACA,WACA,4EACA,sBAGF,2BACE,kBACA,WACA,aACA,2BACA,uBACA,gCAGF,4BACE,kBACA,cACA,QACA,SACA,UACA,kCACA,oCACA,6BACA,yCACA,0BAMJ,qCACE,kBACE,kDACA,4DACA,sDAEA,yDACA,mEACA,6DAEA,kCAEA,0BACE,6BAGF,2BACE,8BACA,gBACA","file":"Confirmation.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../../src/components/organisms/Confirmation/Confirmation.scss"],"names":[],"mappings":"AAOA,kBACE,wDACA,6BACA,2BACA,mCAEA,qDACA,+DACA,yDACA,oCAEA,oDACA,8DACA,wDACA,uCAEA,gCACA,qCACA,mCAEA,0BACA,+BAEA,eACA,aACA,SACA,UACA,YACA,aACA,uBACA,mBACA,8BACA,kBAEA,2BACE,oCACA,6BACA,2BACA,kDACA,4BACA,0BAEA,mBAGF,6BACE,kBACA,aACA,yCACA,iBACA,mCACA,sBACA,6BACA,qCACA,2CACA,kCACA,sBACA,6BACA,mCACA,oCACA,mCACA,yCACA,gKAKF,0BACE,kBACA,aACA,WACA,sBACA,6BACA,kCACA,sBAGF,yBACE,kBACA,+BACA,wCACA,qCACA,yCACA,+CACA,+CAGF,4BACE,kBACA,iCACA,wCACA,wCACA,4CACA,kDACA,kDAGF,wBACE,kBACA,WACA,kCACA,sBAGF,2BACE,+BACA,kBAEA,6BACE,0CACA,uCACA,2CACA,iDAIJ,0BACE,kBACA,WACA,4EACA,sBAGF,2BACE,kBACA,WACA,aACA,2BACA,uBACA,gCAGF,4BACE,kBACA,cACA,QACA,SACA,UACA,kCACA,oCACA,6BACA,yCACA,0BACA,0GAKJ,qCACE,kBACE,kDACA,4DACA,sDAEA,yDACA,mEACA,6DAEA,kCAEA,0BACE,6BAGF,2BACE,8BACA,gBACA","file":"Confirmation.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.29",
3
+ "version": "18.21.30",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -49,7 +49,7 @@
49
49
  "@rollup/plugin-node-resolve": "^15.2.1",
50
50
  "@rollup/plugin-typescript": "^11.1.3",
51
51
  "@rolster/rollup": "^1.0.6",
52
- "@rolster/styles-foundations": "^2.5.23",
52
+ "@rolster/styles-foundations": "^2.5.24",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",