@rolster/react-components 19.0.0 → 19.0.3

package/dist/cjs/assets/{index-QCv-Uo8R.css → index--qtFLq_w.css}

@@ -98,6 +98,8 @@
 
 .rls-badge {
   --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
+  --pvt-font-color: var(--rls-app-color-050);
+  --pvt-background: var(--rls-app-color-700);
   --pvt-contrast-font-color: var(--rls-app-color-600);
   --pvt-contrast-background: var(--rls-app-color-200);
   position: relative;
@@ -124,10 +126,10 @@
   background: var(--pvt-contrast-background);
 }
 .rls-badge[rls-theme] {
+  --pvt-font-color: var(--rls-theme-color-050);
+  --pvt-background: var(--rls-theme-color-500);
   --pvt-contrast-font-color: var(--rls-theme-color-700);
   --pvt-contrast-background: var(--rls-theme-color-100);
-  color: var(--rls-theme-color-050);
-  background: var(--rls-theme-color-500);
 }
 .rls-badge > span {
   font-size: inherit;
@@ -2619,13 +2621,204 @@
     bottom 120ms 0ms var(--rls-deceleration-curve);
 } /*# sourceMappingURL=Modal.css.map */
 
-.rls-picker-date {
+.rls-picker-clock {
   position: relative;
   display: flex;
-  flex-direction: column;
   width: 150rem;
+  flex-direction: column;
+  row-gap: var(--rls-sizing-x8);
+  overflow: hidden;
+  user-select: none;
+  padding: var(--rlc-picker-clock-padding, 0rem);
+  box-sizing: border-box;
+  border-radius: var(--rlc-picker-clock-radius, 0rem);
+  background: var(--rlc-picker-clock-background, transparent);
+}
+.rls-picker-clock__header {
+  display: flex;
+  column-gap: var(--rls-sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.rls-picker-clock__title {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x2);
+  align-items: center;
+}
+.rls-picker-clock__title__value {
+  width: 16rem;
+  text-align: center;
+  font-size: var(--rls-heading4-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  color: var(--rls-app-color-600);
+}
+.rls-picker-clock__title__value--active {
+  color: var(--rls-theme-color-500);
+}
+.rls-picker-clock__title__value:hover {
+  color: var(--rls-app-color-900);
+}
+.rls-picker-clock__title__separator {
+  font-size: var(--rls-title-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__zone {
+  display: flex;
+  width: auto;
+  column-gap: var(--rls-sizing-x4);
+  align-items: center;
+}
+.rls-picker-clock__zone__value {
+  width: 18rem;
+  text-align: center;
+  padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+  background: var(--rls-app-color-200);
+}
+.rls-picker-clock__zone__value--active {
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-theme-color-050);
+}
+.rls-picker-clock__body {
+  display: flex;
+  justify-content: center;
+}
+.rls-picker-clock__plate {
+  width: 120rem;
+  height: 120rem;
+  border-radius: 50%;
+  border: var(--rls-app-border-2-200);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-picker-clock__canvas {
+  position: absolute;
+}
+.rls-picker-clock__canvas__line {
+  stroke: var(--rls-theme-color-500);
+  stroke-width: var(--rls-sizing-x1);
+}
+.rls-picker-clock__canvas__center {
+  fill: var(--rls-theme-color-500);
+}
+.rls-picker-clock__canvas__indicator {
+  fill: var(--rls-theme-color-300);
+}
+.rls-picker-clock__canvas__point {
+  fill: var(--rls-theme-color-050);
+}
+.rls-picker-clock__tick {
+  position: absolute;
+  width: var(--rls-sizing-x14);
+  height: var(--rls-sizing-x14);
+  line-height: var(--rls-sizing-x14);
+  text-align: center;
+  cursor: pointer;
+  font-size: var(--rls-paragraph-font-size);
+  font-weight: var(--rls-font-weight-semibold);
+}
+.rls-picker-clock__footer {
+  --rlc-button-width: 100%;
+  display: flex;
+  column-gap: var(--rls-sizing-x6);
+  align-items: center;
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
+    var(--rls-sizing-x8);
   overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-picker-clock__footer--today {
+  display: flex;
+  width: var(--rls-sizing-x16);
+  align-items: center;
+  justify-content: center;
+} /*# sourceMappingURL=PickerClock.css.map */
+
+.rls-field-clock {
+  --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
+  --pvt-letter-spacing: var(
+    --rlc-field-clock-letter-spacing,
+    var(--rls-input-letter-spacing)
+  );
+  --pvt-action-dimension: var(
+    --rlc-field-box-action-dimension,
+    var(--rls-sizing-x12)
+  );
+  --pvt-action-background: var(
+    --rlc-field-box-action-background,
+    var(--rls-app-color-200)
+  );
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-field-clock .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
+.rls-field-clock .rls-field-box__body {
+  column-gap: var(--rls-sizing-x2);
+}
+.rls-field-clock__control {
+  position: relative;
+  width: var(--pvt-control-width);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  background: rgba(0, 0, 0, 0);
+  color: var(--rls-app-color-900);
+  font-weight: var(--rls-font-weight-medium);
+  font-size: var(--pvt-font-size);
+  letter-spacing: var(--pvt-letter-spacing);
+}
+.rls-field-clock__control::placeholder {
+  color: var(--rls-app-color-400);
+}
+.rls-field-clock__control:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rls-field-clock__action {
+  --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
+  width: var(--pvt-action-dimension);
+  height: var(--pvt-action-dimension);
+  color: var(--rls-app-color-600);
+  padding: 0rem;
+  outline: none;
+  border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
+  background: var(--pvt-action-background);
+}
+.rls-field-clock__action:disabled {
+  opacity: 0.5;
+  background: rgba(0, 0, 0, 0);
+}
+.rls-field-clock__action .rls-icon {
+  margin: 1rem;
+}
+.rls-field-clock-modal {
+  --rlc-modal-background: transparent;
+  --rlc-modal-max-width: 150rem;
+  --rlc-picker-clock-radius: var(--rls-sizing-x4);
+  --rlc-picker-clock-background: var(--rls-app-color-050);
+  --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
+} /*# sourceMappingURL=FieldClock.css.map */
+
+.rls-picker-date {
+  position: relative;
+  display: flex;
+  width: 150rem;
+  flex-direction: column;
   row-gap: var(--rls-sizing-x4);
+  overflow: hidden;
+  user-select: none;
   border-radius: var(--rlc-picker-date-radius, 0rem);
   background: var(--rlc-picker-date-background, transparent);
 }
@@ -2686,9 +2879,9 @@
 
 .rls-field-date {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(
@@ -2821,9 +3014,12 @@
 
 .rls-field-date-range {
   --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
-  --pvt-font-size: var(--rlc-datefield-font-size, var(--rls-input-font-size));
+  --pvt-font-size: var(
+    --rlc-field-date-range-font-size,
+    var(--rls-input-font-size)
+  );
   --pvt-letter-spacing: var(
-    --rlc-datefield-letter-spacing,
+    --rlc-field-date-range-letter-spacing,
     var(--rls-input-letter-spacing)
   );
   --pvt-action-dimension: var(