@itcase/ui 1.1.17 → 1.1.18

package/dist/css/components/Accordion/Accordion.css

@@ -1,15 +1,91 @@
-@import './css/accordion.css';
-@import './css/accordion_direction.css';
-@import './css/accordion_shape.css';
-
-@import './css/accordion-item.css';
-@import './css/accordion-item_shape.css';
-@import './css/accordion-item_size.css';
-@import './css/accordion-item_state_open.css';
-
+.accordion {
+  border-radius: var(--accordion-border-radius, 12px);
+  &__wrapper {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+  }
+}
+.accordion {
+  &_direction {
+    &_horizontal {
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+    &_vertical {
+      ^^&__wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        ^^&__wrapper {
+          display: flex;
+          flex-direction: $(val);
+        }
+      }
+    }
+  }
+}
+.accordion {
+  &_shape {
+    &_rounded {
+      border-radius: var(--accordion-shape-rounded, 6px);
+      ^^&-item {
+        &:first-child {
+          border-radius: var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px) 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 var(--accordion-shape-rounded, 6px) var(--accordion-shape-rounded, 6px);
+        }
+      }
+    }
+  }
+}
+.accordion-item {
+  min-width: 170px;
+  display: flex;
+  flex-flow: row wrap;
+  gap: 14px;
+  &__title {
+    flex: 1;
+  }
+  &__icon {
+    align-self: flex-start;
+    transform-origin: 50% 50%;
+    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+  &__content {
+    width: 100%;
+  }
+}
+.accordion-item {
+  &_shape {
+    &_rounded {
+      border-radius: var(--accordion-item-shape-rounded, 100px);
+    }
+  }
+}
+.accordion-item {
+  &_size {
+    @each $size in xs, s, m, l, xl, xxl {
+      &_$(size) {
+        padding: var(--accordion-item-size-$(size)-padding);
+      }
+    }
+  }
+}
+.accordion-item {
+  &&_state_open {
+    ^&__icon {
+      transform: rotate(180deg);
+    }
+  }
+}
 :root {
   --accordion-item-size-xs-padding: 10px 8px;
   --accordion-item-size-l-padding: 14px 12px;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0FjY29yZGlvbi9BY2NvcmRpb24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IkFjY29yZGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9hY2NvcmRpb24uY3NzJztcbkBpbXBvcnQgJy4vY3NzL2FjY29yZGlvbl9kaXJlY3Rpb24uY3NzJztcbkBpbXBvcnQgJy4vY3NzL2FjY29yZGlvbl9zaGFwZS5jc3MnO1xuXG5AaW1wb3J0ICcuL2Nzcy9hY2NvcmRpb24taXRlbS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYWNjb3JkaW9uLWl0ZW1fc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2FjY29yZGlvbi1pdGVtX3NpemUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2FjY29yZGlvbi1pdGVtX3N0YXRlX29wZW4uY3NzJztcblxuOnJvb3Qge1xuICAtLWFjY29yZGlvbi1pdGVtLXNpemUteHMtcGFkZGluZzogMTBweCA4cHg7XG4gIC0tYWNjb3JkaW9uLWl0ZW0tc2l6ZS1sLXBhZGRpbmc6IDE0cHggMTJweDtcbn1cbiJdfQ== */

package/dist/css/components/Avatar/Avatar.css

@@ -1,7 +1,102 @@
-@import './css/avatar.css';
-@import './css/avatar_mode_skeleton.css';
-@import './css/avatar_shape.css';
-@import './css/avatar_size.css';
-@import './css/avatar_status.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IkF2YXRhci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9hdmF0YXIuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2F2YXRhcl9tb2RlX3NrZWxldG9uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9hdmF0YXJfc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2F2YXRhcl9zaXplLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9hdmF0YXJfc3RhdHVzLmNzcyc7XG4iXX0= */
+.avatar {
+  &__wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ^&__image {
+      position: relative;
+      overflow: hidden;
+    }
+    ^&__icon {
+      position: absolute;
+      right: var(--avatar-icon-right, 0);
+      bottom: var(--avatar-icon-bottom, 0);
+    }
+  }
+  div&__dropdown {
+    margin: 10px 0 0 0;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 100;
+  }
+}
+.avatar {
+  &&_mode {
+    &_skeleton {
+      ^^&__wrapper {
+        background-image: linear-gradient(
+          90deg,
+          var(--color-surface-secondary),
+          var(--color-surface-tertiary),
+          var(--color-surface-secondary)
+        );
+        background-size: 200%;
+        animation: avatar-skeleton 3s infinite linear;
+        ^^^&__name {
+          color: transparent;
+        }
+      }
+    }
+  }
+}
+@keyframes avatar-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.avatar {
+  &_shape {
+    &_circular {
+      ^^&__image,
+      ^^&__wrapper {
+        border-radius: 50%;
+      }
+    }
+    &_geometric {
+      ^^&__image,
+      ^^&__wrapper {
+        border-radius: 0;
+      }
+    }
+    &_rounded {
+      ^^&__image,
+      ^^&__wrapper {
+        border-radius: var(--avatar-shape-rounded, 10px);
+      }
+    }
+  }
+}
+.avatar {
+  &_size {
+    @each $size in 14, 16, 20, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
+      &_$(size) {
+        ^^&__wrapper {
+          width: $(size)px;
+          height: $(size)px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__image {
+            width: $(size)px;
+            height: $(size)px;
+          }
+        }
+      }
+    }
+  }
+}
+.avatar {
+  &_status {
+    position: relative;
+    & .dot {
+      position: absolute;
+      right: var(--avatar-dot-position-right, -4px);
+      bottom: var(--avatar-dot-position-bottom, -2px);
+    }
+  }
+}

package/dist/css/components/Badge/Badge.css

@@ -1,9 +1,69 @@
-@import './css/badge.css';
-@import './css/badge_mode_skeleton.css';
-@import './css/badge_shape.css';
-@import './css/badge_size.css';
-@import './css/badge_type_status.css';
-
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.badge {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: badge-skeleton 3s infinite linear;
+      & .text {
+        color: transparent;
+      }
+    }
+  }
+}
+@keyframes badge-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.badge {
+  &_shape {
+    &_rounded {
+      border-radius: var(--badge-shape-rounded, 6px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.badge {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        min-width: var(--badge-width-size-$(size));
+        min-height: var(--badge-height-size-$(size));
+        max-width: var(--badge-width-size-$(size));
+        max-height: var(--badge-height-size-$(size));
+      }
+    }
+  }
+}
+.badge {
+  &_type_status {
+    &.badge_size {
+      @each $size in xxs, xs, s, m, l, xl, xxl {
+        &_$(size) {
+          min-width: var(--badge-status-width-size-$(size));
+          min-height: var(--badge-status-height-size-$(size));
+          max-width: var(--badge-status-width-size-$(size));
+          max-height: var(--badge-status-height-size-$(size));
+        }
+      }
+    }
+  }
+}
 :root {
   --badge-width-size-xxs: 16px;
   --badge-height-size-xxs: 16px;
@@ -20,5 +80,3 @@
   --badge-width-size-xxl: 48px;
   --badge-height-size-xxl: 48px;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JhZGdlL0JhZGdlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJCYWRnZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9iYWRnZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYmFkZ2VfbW9kZV9za2VsZXRvbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYmFkZ2Vfc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2JhZGdlX3NpemUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2JhZGdlX3R5cGVfc3RhdHVzLmNzcyc7XG5cbjpyb290IHtcbiAgLS1iYWRnZS13aWR0aC1zaXplLXh4czogMTZweDtcbiAgLS1iYWRnZS1oZWlnaHQtc2l6ZS14eHM6IDE2cHg7XG4gIC0tYmFkZ2Utd2lkdGgtc2l6ZS14czogMThweDtcbiAgLS1iYWRnZS1oZWlnaHQtc2l6ZS14czogMThweDtcbiAgLS1iYWRnZS13aWR0aC1zaXplLXM6IDIwcHg7XG4gIC0tYmFkZ2UtaGVpZ2h0LXNpemUtczogMjBweDtcbiAgLS1iYWRnZS13aWR0aC1zaXplLW06IDI0cHg7XG4gIC0tYmFkZ2UtaGVpZ2h0LXNpemUtbTogMjRweDtcbiAgLS1iYWRnZS13aWR0aC1zaXplLWw6IDMycHg7XG4gIC0tYmFkZ2UtaGVpZ2h0LXNpemUtbDogMzJweDtcbiAgLS1iYWRnZS13aWR0aC1zaXplLXhsOiA0MHB4O1xuICAtLWJhZGdlLWhlaWdodC1zaXplLXhsOiA0MHB4O1xuICAtLWJhZGdlLXdpZHRoLXNpemUteHhsOiA0OHB4O1xuICAtLWJhZGdlLWhlaWdodC1zaXplLXh4bDogNDhweDtcbn1cbiJdfQ== */

package/dist/css/components/Button/Button.css

@@ -1,17 +1,338 @@
-@import './css/button.css';
-@import './css/button_shape.css';
-@import './css/button_state_loading.css';
-@import './css/button_type.css';
-@import './css/button_type_accent.css';
-@import './css/button_type_couter.css';
-@import './css/button_type_icon.css';
-@import './css/button_type_primary.css';
-@import './css/button_type_secondary.css';
-@import './css/button_type_surface.css';
-@import './css/button_type_tertiary.css';
-@import './css/button_type_with-icon.css';
-@import './css/button_width.css';
-
+.button {
+  text-decoration: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  border: solid 0 #fff;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: var(--button-transition);
+  &__loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    display: none;
+    left: 0;
+    top: 0;
+    z-index: 1;
+  }
+  &__wrapper {
+    display: flex;
+    align-items: center;
+  }
+  &__label {
+    text-decoration: none;
+    text-align: center;
+  }
+  &__count {
+    position: relative;
+  }
+}
+.button {
+  &_shape {
+    &_rounded {
+      border-radius: var(--button-shape-rounded-default, 6px);
+      @each $size in xxs, xs, s, m, l, xl, xxl {
+        &.button_size_$(size) {
+          border-radius: var(--button-$(size)-shape-rounded);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.button {
+  &&_state {
+    &_loading {
+      ^^&__loader {
+        display: flex;
+        position: absolute;
+      }
+    }
+  }
+}
+.button {
+  &_type {
+    @each $type in label, with-icon, icon, loader {
+      &_$(type) {
+        @each $set in filled, outlined, ghost {
+          &.button_set_$(set) {
+            @each $size in xxs, xs, s, m, l, xl, xxl {
+              &.button_size_$(size) {
+                ^^^^&__wrapper {
+                  padding: var(--button-$(type)-$(set)-$(size)-padding);
+                }
+                &.button_type_with-icon {
+                  ^^^^^&__wrapper {
+                    gap: var(--button-with-icon-$(size)-gap);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_accent {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-accent-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-accent-border-primary);
+          &:hover {
+            background: var(--color-accent-hover-secondary);
+            border: solid 1px var(--color-accent-border-primary-hover);
+            & > ^^^^^&__label {
+              color: var(--color-accent-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__label {
+            color: var(--color-accent-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-accent-primary);
+          border: solid 1px var(--color-accent-border-primary);
+          &:hover {
+            background: var(--color-accent-primary-hover);
+            border: solid 1px var(--color-accent-border-primary-hover);
+            & > ^^^^^&__label {
+              color: var(--color-accent-text-primary-hover);
+            }
+          }
+          & > ^^^^&__label {
+            color: var(--color-accent-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_badge {
+      position: relative;
+      & .badge {
+        position: absolute;
+        right: -4px;
+        top: -4px;
+      }
+    }
+  }
+}
+.button {
+  &_type {
+    &_icon {
+      align-self: flex-start;
+      &.button_size {
+        @each $size in xxs, xs, s, m, l, xl, xxl {
+          &_$(size) {
+            & ^^^^&__wrapper {
+              padding: var(--button-size-$(size)-icon-padding);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_primary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-primary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-primary-border-primary);
+          &:hover {
+            background: var(--color-primary-primary-hover);
+            border: solid 1px var(--color-primary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-primary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-primary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-primary-primary);
+          border: solid 1px var(--color-primary-border-primary);
+          &:hover {
+            background: var(--color-primary-primary-hover);
+            border: solid 1px var(--color-primary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-primary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-primary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_secondary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-secondary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-secondary-border-primary);
+          &:hover {
+            background: var(--color-secondary-primary-hover);
+            border: solid 1px var(--color-secondary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-secondary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-secondary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-secondary-primary);
+          border: solid 1px var(--color-secondary-border-primary);
+          &:hover {
+            background: var(--color-secondary-primary-hover);
+            border: solid 1px var(--color-secondary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-secondary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-secondary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_surface {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-surface-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-surface-border-primary);
+          &:hover {
+            background: var(--color-surface-primary-hover);
+            border: solid 1px var(--color-surface-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-surface-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-surface-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-surface-primary);
+          border: solid 1px var(--color-surface-border-primary);
+          &:hover {
+            background: var(--color-surface-primary-hover);
+            border: solid 1px var(--color-surface-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-surface-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-surface-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_tertiary {
+      & > ^^&__icon {
+        svg {
+          fill: var(--color-tertiary-item-secondary);
+        }
+      }
+      &^^&_fill {
+        &_outline {
+          border: solid 1px var(--color-tertiary-border-primary);
+          &:hover {
+            background: var(--color-tertiary-primary-hover);
+            border: solid 1px var(--color-tertiary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-tertiary-text-secondary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-tertiary-text-secondary);
+          }
+        }
+        &_solid {
+          background: var(--color-tertiary-primary);
+          border: solid 1px var(--color-tertiary-border-primary);
+          &:hover {
+            background: var(--color-tertiary-primary-hover);
+            border: solid 1px var(--color-tertiary-border-primary-hover);
+            & > ^^^^^&__text {
+              color: var(--color-tertiary-text-primary-hover);
+            }
+          }
+          & > ^^^^&__text {
+            color: var(--color-tertiary-text-primary);
+          }
+        }
+      }
+    }
+  }
+}
+.button {
+  &&_type {
+    &_with-icon {
+      position: relative;
+      ^^&__icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+.button {
+  &&_width {
+    &_fixed {
+      width: 240px;
+    }
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}
 :root {
   --button-transition: all 0.2s ease 0s;
   --button-size-xxs-padding: 4px 12px;
@@ -43,5 +364,3 @@
   --button-size-xxl-gap: 6px;
   --button-size-xxl-shape-rounded: 6px;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IkJ1dHRvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9idXR0b24uY3NzJztcbkBpbXBvcnQgJy4vY3NzL2J1dHRvbl9zaGFwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYnV0dG9uX3N0YXRlX2xvYWRpbmcuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2J1dHRvbl90eXBlLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9idXR0b25fdHlwZV9hY2NlbnQuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2J1dHRvbl90eXBlX2NvdXRlci5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYnV0dG9uX3R5cGVfaWNvbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYnV0dG9uX3R5cGVfcHJpbWFyeS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYnV0dG9uX3R5cGVfc2Vjb25kYXJ5LmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9idXR0b25fdHlwZV9zdXJmYWNlLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9idXR0b25fdHlwZV90ZXJ0aWFyeS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvYnV0dG9uX3R5cGVfd2l0aC1pY29uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9idXR0b25fd2lkdGguY3NzJztcblxuOnJvb3Qge1xuICAtLWJ1dHRvbi10cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlIDBzO1xuICAtLWJ1dHRvbi1zaXplLXh4cy1wYWRkaW5nOiA0cHggMTJweDtcbiAgLS1idXR0b24tc2l6ZS14eHMtaWNvbi1wYWRkaW5nOiAwcHg7XG4gIC0tYnV0dG9uLXNpemUteHhzLWdhcDogNnB4O1xuICAtLWJ1dHRvbi1zaXplLXh4cy1zaGFwZS1yb3VuZGVkOiA2cHg7XG4gIC0tYnV0dG9uLXNpemUteHMtcGFkZGluZzogMnB4IDhweDtcbiAgLS1idXR0b24tc2l6ZS14cy1pY29uLXBhZGRpbmc6IDBweDtcbiAgLS1idXR0b24tc2l6ZS14cy1nYXA6IDZweDtcbiAgLS1idXR0b24tc2l6ZS14cy1zaGFwZS1yb3VuZGVkOiA2cHg7XG4gIC0tYnV0dG9uLXNpemUtcy1wYWRkaW5nOiA0cHggMTZweDtcbiAgLS1idXR0b24tc2l6ZS1zLWljb24tcGFkZGluZzogMHB4O1xuICAtLWJ1dHRvbi1zaXplLXMtZ2FwOiA2cHg7XG4gIC0tYnV0dG9uLXNpemUtcy1zaGFwZS1yb3VuZGVkOiA2cHg7XG4gIC0tYnV0dG9uLXNpemUtbS1wYWRkaW5nOiA4cHggMjRweDtcbiAgLS1idXR0b24tc2l6ZS1tLWljb24tcGFkZGluZzogMTBweDtcbiAgLS1idXR0b24tc2l6ZS1tLWdhcDogNnB4O1xuICAtLWJ1dHRvbi1zaXplLW0tc2hhcGUtcm91bmRlZDogNnB4O1xuICAtLWJ1dHRvbi1zaXplLWwtcGFkZGluZzogMTJweCAzMnB4O1xuICAtLWJ1dHRvbi1zaXplLWwtaWNvbi1wYWRkaW5nOiAwcHg7XG4gIC0tYnV0dG9uLXNpemUtbC1nYXA6IDZweDtcbiAgLS1idXR0b24tc2l6ZS1sLXNoYXBlLXJvdW5kZWQ6IDZweDtcbiAgLS1idXR0b24tc2l6ZS14bC1wYWRkaW5nOiAxNnB4IDMycHg7XG4gIC0tYnV0dG9uLXNpemUteGwtaWNvbi1wYWRkaW5nOiAwcHg7XG4gIC0tYnV0dG9uLXNpemUteGwtZ2FwOiA2cHg7XG4gIC0tYnV0dG9uLXNpemUteGwtc2hhcGUtcm91bmRlZDogNnB4O1xuICAtLWJ1dHRvbi1zaXplLXh4bC1wYWRkaW5nOiAyNHB4IDQwcHg7XG4gIC0tYnV0dG9uLXNpemUteHhsLWljb24tcGFkZGluZzogMHB4O1xuICAtLWJ1dHRvbi1zaXplLXh4bC1nYXA6IDZweDtcbiAgLS1idXR0b24tc2l6ZS14eGwtc2hhcGUtcm91bmRlZDogNnB4O1xufVxuIl19 */

package/dist/css/components/Caption/Caption.css

@@ -1,4 +1,22 @@
-@import './css/caption.css';
-@import './css/caption_position.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NhcHRpb24vQ2FwdGlvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiQ2FwdGlvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9jYXB0aW9uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9jYXB0aW9uX3Bvc2l0aW9uLmNzcyc7XG4iXX0= */
+.caption {
+  display: flex;
+  flex-flow: column nowrap;
+}
+.caption {
+  &_position {
+    &_on-image {
+      &-top {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+      &-bottom {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+    }
+  }
+}

package/dist/css/components/Card/Card.css

@@ -1,3 +1,18 @@
-@import './css/card.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NhcmQvQ2FyZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiQ2FyZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9jYXJkLmNzcyc7XG4iXX0= */
+.card {
+  &__wrapper {
+    display: flex;
+    flex-flow: column nowrap;
+    ^&__image {
+      width: 100%;
+    }
+    ^&__data {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+    ^&__icon {
+      padding: 8px 0 0 0;
+      display: flex;
+      gap: 16px;
+    }
+  }
+}