@itcase/ui 1.1.17 → 1.1.18

package/dist/css/components/Pagination/css/__item/pagination__item_state_disabled.css

@@ -18,5 +18,3 @@
     }
   }
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1BhZ2luYXRpb24vY3NzL19faXRlbS9wYWdpbmF0aW9uX19pdGVtX3N0YXRlX2Rpc2FibGVkLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJwYWdpbmF0aW9uX19pdGVtX3N0YXRlX2Rpc2FibGVkLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5wYWdpbmF0aW9uIHtcbiAgJl9faXRlbSB7XG4gICAgJiZfc3RhdGUge1xuICAgICAgJl9kaXNhYmxlZCB7XG4gICAgICAgIGJvcmRlcjogc29saWQgMXB4IHZhcigtLXBhZ2luYXRvci1pdGVtLWRpc2FibGVkLWJvcmRlcik7XG4gICAgICAgIGJhY2tncm91bmQ6IHZhcigtLXBhZ2luYXRvci1pdGVtLWRpc2FibGVkLWZpbGwpO1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoLS1wYWdpbmF0b3ItaXRlbS1kaXNhYmxlZC1maWxsLWhvdmVyKTtcbiAgICAgICAgfVxuICAgICAgICBeXiYtbGluayB7XG4gICAgICAgICAgY29sb3I6IHZhcigtLXBhZ2luYXRvci1pdGVtLWRpc2FibGVkLXRleHQpO1xuICAgICAgICB9XG4gICAgICAgICYgc3ZnIHtcbiAgICAgICAgICBmaWxsOiB2YXIoLS1wYWdpbmF0b3ItaXRlbS1kaXNhYmxlZC1pY29uKTtcbiAgICAgICAgfVxuICAgICAgICBkaXNwbGF5OiB2YXIoLS1wYWdpbmF0aW9uLWl0ZW0tc3RhdGUtZGlzYWJsZWQtZGlzcGxheSwgaW5pdGlhbCk7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iXX0= */

package/dist/css/components/Panel/Panel.css

@@ -1,10 +1,107 @@
-@import './css/panel.css';
-@import './css/panel_direction.css';
-@import './css/panel_align-content.css';
-@import './css/panel_align.css';
-@import './css/panel_justify-content.css';
-@import './css/panel_shape.css';
-@import './css/panel_wrap.css';
-@import './css/panel_type_horizontal_scroll.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1BhbmVsL1BhbmVsLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJQYW5lbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9wYW5lbC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcGFuZWxfZGlyZWN0aW9uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9wYW5lbF9hbGlnbi1jb250ZW50LmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9wYW5lbF9hbGlnbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcGFuZWxfanVzdGlmeS1jb250ZW50LmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9wYW5lbF9zaGFwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcGFuZWxfd3JhcC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcGFuZWxfdHlwZV9ob3Jpem9udGFsX3Njcm9sbC5jc3MnO1xuIl19 */
+.panel {
+  display: flex;
+  flex-direction: column;
+  &__wrapper {
+    align-items: stretch;
+  }
+}
+.panel {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+    &_horizontal-reverse {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+    &_vertical-reverse {
+      display: flex;
+      flex-direction: column-reverse;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}
+.panel {
+  @each $val in flex-start, flex-end, center, space-between, space-around, stretch {
+    &_align-content_$(val) {
+      align-content: $(val);
+    }
+  }
+}
+.panel {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      align-self: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.panel {
+  @each $val in flex-start, flex-end, center, space-between, space-around, space-evenly, flexStart,
+    flexEnd, center, spaceBetween, spaceAround, spaceEvenly {
+    &_justify-content_$(val) {
+      justify-content: $(val);
+    }
+  }
+}
+.panel {
+  &_shape {
+    &_rounded {
+      border-radius: var(--panel-shape-rounded, 12px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.panel {
+  &_wrap {
+    &_wrap {
+      flex-wrap: wrap;
+    }
+    &_nowrap {
+      flex-wrap: nowrap;
+    }
+    &_wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+  }
+}
+.panel {
+  &_type {
+    &_scroll {
+      &_vertical {
+        /* ^^^&& {
+          max-height: 80%;
+        } */
+        ^^^&__wrapper {
+          max-height: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+      &_horizontal {
+        /* ^^^&& {
+          max-width: 80%;
+        } */
+        ^^^&__wrapper {
+          max-width: 100%;
+          overflow: auto;
+          scrollbar-width: thin;
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Radio/Radio.css

@@ -1,9 +1,116 @@
-@import './css/radio.css';
-@import './css/radio_shape.css';
-@import './css/radio_checkmark_fill.css';
-
+.radio {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 4px;
+  &:hover {
+    ^&__state {
+      border-color: var(--radio-state-border-hover);
+    }
+  }
+  &__item {
+    min-width: 16px;
+    min-height: 16px;
+    font-size: 0;
+    line-height: 0;
+    margin: 2px 0 0 0;
+    position: relative;
+    display: flex;
+    align-self: start;
+    cursor: pointer;
+    grid-row-start: span 2;
+    ^&__input {
+      width: 100%;
+      height: 100%;
+      font-size: 0;
+      line-height: 0;
+      margin: 0;
+      border: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 3;
+      cursor: pointer;
+      appearance: none;
+      &:disabled + .radio__state {
+        border-color: transparent !important;
+      }
+    }
+    ^&__state {
+      display: flex;
+      flex: 1;
+      z-index: 1;
+      &_shape {
+        &_rounded {
+          border-radius: var(--radio-shape-rounded, 4px);
+          position: relative;
+          overflow: hidden;
+        }
+        &_circular {
+          border-radius: 50%;
+          position: relative;
+          overflow: hidden;
+        }
+      }
+    }
+    ^&__state-checkmark {
+      width: calc(100% - 6px);
+      height: calc(100% - 6px);
+      border-radius: 50%;
+      position: absolute;
+      display: none;
+      left: 50%;
+      top: 50%;
+      z-index: 2;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+.radio {
+  &_shape {
+    &_rounded {
+      ^^&__item {
+        border-radius: var(--radio-item-shape-rounded, 4px);
+        position: relative;
+        overflow: hidden;
+      }
+    }
+    &_circular {
+      ^^&__item {
+        border-radius: 50%;
+        position: relative;
+        overflow: hidden;
+      }
+    }
+  }
+}
+.radio {
+  &_checkmark {
+    &_fill {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent,
+              disabled, hover {
+              &-$(color) {
+                & ^^^^^&__input {
+                  &:checked {
+                    & ~ ^^^^^^^&__state {
+                      &-checkmark {
+                        background: var(--color-$(type)-item-$(color));
+                        display: block;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 :root {
   --radio-state-border-hover: var(--color-surface-border-tertiary);
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1JhZGlvL1JhZGlvLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJSYWRpby5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9yYWRpby5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcmFkaW9fc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL3JhZGlvX2NoZWNrbWFya19maWxsLmNzcyc7XG5cbjpyb290IHtcbiAgLS1yYWRpby1zdGF0ZS1ib3JkZXItaG92ZXI6IHZhcigtLWNvbG9yLXN1cmZhY2UtYm9yZGVyLXRlcnRpYXJ5KTtcbn1cbiJdfQ== */

package/dist/css/components/RangeSlider/RangeSlider.css

@@ -1,15 +1,418 @@
-@import 'rc-slider/assets/index.css';
-
-@import './css/range-slider.css';
-@import './css/range-slider-rail-fill.css';
-@import './css/range-slider-track-fill.css';
-
-@import './css/range-slider-handle-fill.css';
-@import './css/range-slider-handle-fill-hover.css';
-
-@import './css/range-slider-handle-dragging-fill.css';
-@import './css/range-slider-handle-dragging-fill-hover.css';
-
-@import './css/range-slider_set_inputs.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1JhbmdlU2xpZGVyL1JhbmdlU2xpZGVyLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJSYW5nZVNsaWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICdyYy1zbGlkZXIvYXNzZXRzL2luZGV4LmNzcyc7XG5cbkBpbXBvcnQgJy4vY3NzL3JhbmdlLXNsaWRlci5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcmFuZ2Utc2xpZGVyLXJhaWwtZmlsbC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcmFuZ2Utc2xpZGVyLXRyYWNrLWZpbGwuY3NzJztcblxuQGltcG9ydCAnLi9jc3MvcmFuZ2Utc2xpZGVyLWhhbmRsZS1maWxsLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9yYW5nZS1zbGlkZXItaGFuZGxlLWZpbGwtaG92ZXIuY3NzJztcblxuQGltcG9ydCAnLi9jc3MvcmFuZ2Utc2xpZGVyLWhhbmRsZS1kcmFnZ2luZy1maWxsLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9yYW5nZS1zbGlkZXItaGFuZGxlLWRyYWdnaW5nLWZpbGwtaG92ZXIuY3NzJztcblxuQGltcG9ydCAnLi9jc3MvcmFuZ2Utc2xpZGVyX3NldF9pbnB1dHMuY3NzJztcbiJdfQ== */
+.rc-slider {
+  position: relative;
+  width: 100%;
+  height: 14px;
+  padding: 5px 0;
+  border-radius: 6px;
+  touch-action: none;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-rail {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background-color: #e9e9e9;
+  border-radius: 6px;
+}
+.rc-slider-track,
+.rc-slider-tracks {
+  position: absolute;
+  height: 4px;
+  background-color: #abe2fb;
+  border-radius: 6px;
+}
+.rc-slider-track-draggable {
+  z-index: 1;
+  box-sizing: content-box;
+  background-clip: content-box;
+  border-top: 5px solid rgba(0, 0, 0, 0);
+  border-bottom: 5px solid rgba(0, 0, 0, 0);
+  transform: translateY(-5px);
+}
+.rc-slider-handle {
+  position: absolute;
+  z-index: 1;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  background-color: #fff;
+  border: solid 2px #96dbfa;
+  border-radius: 50%;
+  cursor: pointer;
+  cursor: -webkit-grab;
+  cursor: grab;
+  opacity: 0.8;
+  user-select: none;
+  touch-action: pan-x;
+}
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+  border-color: #57c5f7;
+  box-shadow: 0 0 0 5px #96dbfa;
+}
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging-delete {
+  opacity: 0;
+}
+.rc-slider-handle:focus {
+  outline: none;
+  box-shadow: none;
+}
+.rc-slider-handle:focus-visible {
+  border-color: #2db7f5;
+  box-shadow: 0 0 0 3px #96dbfa;
+}
+.rc-slider-handle-click-focused:focus {
+  border-color: #96dbfa;
+  box-shadow: unset;
+}
+.rc-slider-handle:hover {
+  border-color: #57c5f7;
+}
+.rc-slider-handle:active {
+  border-color: #57c5f7;
+  box-shadow: 0 0 5px #57c5f7;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+.rc-slider-mark {
+  position: absolute;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  font-size: 12px;
+}
+.rc-slider-mark-text {
+  position: absolute;
+  display: inline-block;
+  color: #999;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.rc-slider-mark-text-active {
+  color: #666;
+}
+.rc-slider-step {
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
+}
+.rc-slider-dot {
+  position: absolute;
+  bottom: -2px;
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+  background-color: #fff;
+  border: 2px solid #e9e9e9;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.rc-slider-dot-active {
+  border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+  margin-right: -4px;
+}
+.rc-slider-disabled {
+  background-color: #e9e9e9;
+}
+.rc-slider-disabled .rc-slider-track {
+  background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+  background-color: #fff;
+  border-color: #ccc;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+  cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+  width: 14px;
+  height: 100%;
+  padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+  width: 4px;
+  height: 100%;
+}
+.rc-slider-vertical .rc-slider-track {
+  bottom: 0;
+  left: 5px;
+  width: 4px;
+}
+.rc-slider-vertical .rc-slider-track-draggable {
+  border-top: 0;
+  border-right: 5px solid rgba(0, 0, 0, 0);
+  border-bottom: 0;
+  border-left: 5px solid rgba(0, 0, 0, 0);
+  transform: translateX(-5px);
+}
+.rc-slider-vertical .rc-slider-handle {
+  position: absolute;
+  z-index: 1;
+  margin-top: 0;
+  margin-left: -5px;
+  touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+  top: 0;
+  left: 18px;
+  height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+  width: 4px;
+  height: 100%;
+}
+.rc-slider-vertical .rc-slider-dot {
+  margin-left: -2px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+  display: block !important;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+  display: block !important;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+  animation-name: rcSliderTooltipZoomDownIn;
+  animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+  animation-name: rcSliderTooltipZoomDownOut;
+  animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+  transform: scale(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+  0% {
+    transform: scale(0, 0);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1, 1);
+    transform-origin: 50% 100%;
+  }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+  0% {
+    transform: scale(1, 1);
+    transform-origin: 50% 100%;
+  }
+  100% {
+    transform: scale(0, 0);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}
+.rc-slider-tooltip {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  visibility: visible;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+  display: none;
+}
+.rc-slider-tooltip-placement-top {
+  padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+  min-width: 24px;
+  height: 24px;
+  padding: 6px 2px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  background-color: #6c6c6c;
+  border-radius: 6px;
+  box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+  bottom: 4px;
+  left: 50%;
+  margin-left: -4px;
+  border-width: 4px 4px 0;
+  border-top-color: #6c6c6c;
+}
+.range-slider {
+  & .rc-slider {
+    min-width: 200px;
+    padding: 0;
+    height: 24px;
+    border-radius: 0;
+    &-rail {
+      border-radius: 10px;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+    &-track {
+      border-radius: 10px;
+      top: 50%;
+      transform: translate(0, -50%);
+    }
+    &-handle {
+      width: 24px;
+      height: 24px;
+      opacity: 1;
+      border: none;
+      margin: 0;
+      top: 0;
+      border-radius: 50%;
+      &-1 {
+        margin:0 0 0 12px;
+      }
+      &-2 {
+        margin: 0 0 0 -12px;
+      }
+      &-dragging {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+  }
+}
+.range-slider-rail-fill {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+        &-$(color) {
+          & .rc-slider-rail {
+            background: var(--color-$(type)-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider-track-fill {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            & .rc-slider-track {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider-handle-fill {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            & .rc-slider-handle {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider-handle-fill-hover {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &-hover {
+              & .rc-slider-handle {
+                &:hover {
+                  background: var(--color-$(type)-item-$(color)-hover);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider-handle-dragging-fill {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            & .rc-slider-handle-dragging {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider-handle-dragging-fill-hover {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_$(type) {
+      &-item {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &-hover {
+              & .rc-slider-handle-dragging {
+                background: var(--color-$(type)-item-$(color)-hover);
+              }
+            }
+            & .rc-slider-handle-dragging {
+              background: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.range-slider {
+  &_set {
+    &_inputs {
+      ^^&__after {
+        margin:  8px 0 16px 0;
+      }
+    }
+  }
+}

package/dist/css/components/Response/Response.css

@@ -1,4 +1,29 @@
-@import './css/response.css';
-@import './css/response_set_message.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Jlc3BvbnNlL1Jlc3BvbnNlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJSZXNwb25zZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9yZXNwb25zZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvcmVzcG9uc2Vfc2V0X21lc3NhZ2UuY3NzJztcbiJdfQ== */
+.response {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  &__desc {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+  &__button {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+  }
+}
+.response {
+  &_set {
+    &_message {
+      margin: 200px 0 0 0;
+      align-self: center;
+    }
+  }
+}