@itcase/ui 1.1.17 → 1.1.18

package/dist/css/components/Grid/Grid.css

@@ -1,26 +1,222 @@
-@import './css/grid.css';
-@import './css/grid_align.css';
-@import './css/grid_columns.css';
-@import './css/grid_gap.css';
-@import './css/grid_justify.css';
-@import './css/grid_rows.css';
-@import './css/grid_scroll_horizontal.css';
-@import './css/grid_shape.css';
-@import './css/grid_state_system.css';
-@import './css/grid_type.css';
-@import './css/grid_vertical-resizing.css';
-
-@import './css/__item/grid__item.css';
-@import './css/__item/grid__item_align-self.css';
-@import './css/__item/grid__item_column.css';
-@import './css/__item/grid__item_justify-self.css';
-@import './css/__item/grid__item_row.css';
-
-@import './css/__row/grid__row.css';
-
+.grid {
+  display: grid;
+  width: 100%;
+  position: relative;
+  &__before {
+    position: relative;
+    overflow: hidden;
+  }
+  &__after {
+    position: relative;
+    overflow: hidden;
+  }
+  &__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  &__wrapper {
+    width: 100%;
+    max-width: var(--max);
+    margin: 0 auto;
+    &-inner {
+      display: grid;
+      position: relative;
+    }
+    ^&__item {
+      position: relative;
+    }
+    &-background {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+}
+.grid {
+  @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly,
+    safe center, unsafe center, self-start, self-end, first, baseline, first, baseline,
+    last baseline {
+    &_align-content_$(val) {
+      align-content: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.grid {
+  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_columns_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat($(val), 1fr);
+        }
+      }
+    }
+  }
+}
+.grid {
+  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_row-gap_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          row-gap: $(val)px;
+        }
+      }
+    }
+    &_column-gap_$(val) {
+      & > ^&__wrapper {
+        & > div {
+          column-gap: $(val)px;
+        }
+      }
+    }
+  }
+}
+.grid {
+  @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around,
+    space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right,
+    baseline, first baseline, last baseline {
+    &_justify-content_$(val) {
+      justify-content: $(val);
+    }
+    &_justify-items_$(val) {
+      justify-items: $(val);
+    }
+  }
+}
+.grid {
+  @each $val in 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+    &_rows_$(val) {
+      grid-template-columns: repeat($(val), 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat($(val), 1fr);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &_scroll_horizontal {
+    min-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent-secondary) var(--color-surface-tertiary);
+  }
+}
+.grid {
+  &_shape {
+    &_rounded {
+      border-radius: var(--grid-shape-rounded, 12px);
+    }
+  }
+}
+.grid {
+  &&_state {
+    &_system {
+      ^^&__wrapper {
+        padding: 0 var(--grid-system-margin);
+        &-inner {
+          grid-template-columns: 1fr repeat(var(--grid-system-columns), var(--grid-system-gutter) 1fr);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &&_type {
+    &_surface {
+      &-secondary {
+        ^^^&__wrapper {
+          background: var(--color-surface-secondary);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &&_vertical-resizing {
+    &_fill {
+      & > ^&__wrapper {
+        height: 100%;
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    transition: var(--grid-item-transition);
+  }
+}
+.grid {
+  &__item {
+    @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly, safe center, unsafe center, self-start, self-end, first, baseline, first, baseline, last baseline {
+      &_align-self_$(val) {
+        align-self: $(val);
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in -1,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200 {
+      &_column {
+        &-start_$(val) {
+          grid-column-start: $(val);
+        }
+        &-end_$(val) {
+          grid-column-end: $(val);
+        }
+        &-span_$(val) {
+          grid-column-end: span $(val);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in auto, legacy, normal, stretch, center, start, end, left, right, space-around, space-between, space-evenly, safe, center, unsafe center, self-start, self-end, left, right, baseline, first baseline, last baseline {
+      &_justify-self_$(val) {
+        justify-self: $(val);
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+      &_row {
+        &-start_$(val) {
+          grid-row-start: $(val);
+        }
+        &-end_$(val) {
+          grid-row-end: $(val);
+        }
+        &-span_$(val) {
+          grid-row-end: span $(val);
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__row {
+    display: grid;
+    transition: var(--grid-row-transition);
+  }
+}
 :root {
   --grid-row-transition: all 0.2s ease 0s;
   --grid-item-transition: all 0.2s ease 0s;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0dyaWQvR3JpZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiR3JpZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9ncmlkLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9ncmlkX2FsaWduLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9ncmlkX2NvbHVtbnMuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2dyaWRfZ2FwLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9ncmlkX2p1c3RpZnkuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2dyaWRfcm93cy5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JpZF9zY3JvbGxfaG9yaXpvbnRhbC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JpZF9zaGFwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JpZF9zdGF0ZV9zeXN0ZW0uY3NzJztcbkBpbXBvcnQgJy4vY3NzL2dyaWRfdHlwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JpZF92ZXJ0aWNhbC1yZXNpemluZy5jc3MnO1xuXG5AaW1wb3J0ICcuL2Nzcy9fX2l0ZW0vZ3JpZF9faXRlbS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvX19pdGVtL2dyaWRfX2l0ZW1fYWxpZ24tc2VsZi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvX19pdGVtL2dyaWRfX2l0ZW1fY29sdW1uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9fX2l0ZW0vZ3JpZF9faXRlbV9qdXN0aWZ5LXNlbGYuY3NzJztcbkBpbXBvcnQgJy4vY3NzL19faXRlbS9ncmlkX19pdGVtX3Jvdy5jc3MnO1xuXG5AaW1wb3J0ICcuL2Nzcy9fX3Jvdy9ncmlkX19yb3cuY3NzJztcblxuOnJvb3Qge1xuICAtLWdyaWQtcm93LXRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UgMHM7XG4gIC0tZ3JpZC1pdGVtLXRyYW5zaXRpb246IGFsbCAwLjJzIGVhc2UgMHM7XG59XG4iXX0= */

package/dist/css/components/Grid/css/__item/grid__item.css

@@ -3,5 +3,3 @@
     transition: var(--grid-item-transition);
   }
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0dyaWQvY3NzL19faXRlbS9ncmlkX19pdGVtLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJncmlkX19pdGVtLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncmlkIHtcbiAgJl9faXRlbSB7XG4gICAgdHJhbnNpdGlvbjogdmFyKC0tZ3JpZC1pdGVtLXRyYW5zaXRpb24pO1xuICB9XG59XG4iXX0= */

package/dist/css/components/Grid/css/__item/grid__item_align-self.css

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

package/dist/css/components/Grid/css/__item/grid__item_column.css

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

package/dist/css/components/Grid/css/__item/grid__item_justify-self.css

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

package/dist/css/components/Grid/css/__item/grid__item_row.css

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

package/dist/css/components/Grid/css/__row/grid__row.css

@@ -4,5 +4,3 @@
     transition: var(--grid-row-transition);
   }
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0dyaWQvY3NzL19fcm93L2dyaWRfX3Jvdy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiZ3JpZF9fcm93LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ncmlkIHtcbiAgJl9fcm93IHtcbiAgICBkaXNwbGF5OiBncmlkO1xuICAgIHRyYW5zaXRpb246IHZhcigtLWdyaWQtcm93LXRyYW5zaXRpb24pO1xuICB9XG59XG4iXX0= */

package/dist/css/components/Group/Group.css

@@ -1,12 +1,97 @@
-@import './css/group.css';
+.group {
+  display: block;
+  transition: var(--group-transition);
+}
 
-@import './css/group_align.css';
-@import './css/group_columns.css';
-@import './css/group_direction.css';
-@import './css/group_shape.css';
-@import './css/group_stacking.css';
-@import './css/group_wrap.css';
+.group {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-self_$(val) {
+      align-self: $(val);
+    }
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
 
-@import './css/group_type_horizontal_scroll';
+.group {
+  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 {
+    &&_columns_$(val) {
+      display: grid;
+      grid-template-columns: repeat($(val), 1fr);
+    }
+  }
+}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0dyb3VwL0dyb3VwLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJHcm91cC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9ncm91cC5jc3MnO1xuXG5AaW1wb3J0ICcuL2Nzcy9ncm91cF9hbGlnbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JvdXBfY29sdW1ucy5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JvdXBfZGlyZWN0aW9uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9ncm91cF9zaGFwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvZ3JvdXBfc3RhY2tpbmcuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2dyb3VwX3dyYXAuY3NzJztcblxuQGltcG9ydCAnLi9jc3MvZ3JvdXBfdHlwZV9ob3Jpem9udGFsX3Njcm9sbCc7XG4iXX0= */
+.group {
+  &_direction {
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+
+.group {
+  &_shape {
+    &_rounded {
+      border-radius: var(--group-shape-rounded, 12px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+
+.group {
+  &_stacking {
+    &_first-on-top {
+      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1) {
+        :nth-child($order) {
+          z-index: $indexValue;
+        }
+      }
+    }
+    &_last-on-top {
+      @each $order, $indexValue in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20), (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20) {
+        :nth-child($order) {
+          z-index: $indexValue;
+        }
+      }
+    }
+  }
+}
+
+.group {
+  &_wrap {
+    @each $val in nowrap, wrap, wrap-reverse {
+      &_$(val) {
+        flex-wrap: $(val);
+      }
+    }
+  }
+}
+
+.group {
+  &_type {
+    &_horizontal_scroll {
+      ^^&__wrapper {
+        display: flex;
+        overflow-x: scroll;
+        overflow-y: hidden;
+      }
+    }
+  }
+}

package/dist/css/components/HTMLContent/HTMLContent.css

@@ -1,7 +1,98 @@
-@import './css/html-content-heading.css';
-@import './css/html-content-list.css';
-@import './css/html-content-table.css';
-@import './css/html-content-text.css';
-@import './css/html-content.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0hUTUxDb250ZW50L0hUTUxDb250ZW50LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJIVE1MQ29udGVudC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9odG1sLWNvbnRlbnQtaGVhZGluZy5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaHRtbC1jb250ZW50LWxpc3QuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2h0bWwtY29udGVudC10YWJsZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaHRtbC1jb250ZW50LXRleHQuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2h0bWwtY29udGVudC5jc3MnO1xuIl19 */
+.html-content {
+  & h1 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h1-padding, 0);
+    margin: var(--html-content-title-h1-margin, 0);
+    @mixin h1;
+  }
+  & h2 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h2-padding, 0);
+    margin: var(--html-content-title-h2-margin, 0);
+    @mixin h2;
+  }
+  & h3 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h3-padding, 0);
+    margin: var(--html-content-title-h3-margin, 0);
+    @mixin h3;
+  }
+  & h4 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h4-padding, 0);
+    margin: var(--html-content-title-h4-margin, 0);
+    @mixin h4;
+  }
+  & h5 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h5-padding, 0);
+    margin: var(--html-content-title-h5-margin, 0);
+    @mixin h5;
+  }
+  & h6 {
+    width: 100%;
+    color: var(--html-content-title-color);
+    padding: var(--html-content-title-h6-padding, 0);
+    margin: var(--html-content-title-h6-margin, 0);
+    @mixin h6;
+  }
+}
+.html-content {
+  & ol {
+    counter-reset: index;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    & ol {
+      counter-reset: index;
+      padding: 0 0 16px 24px;
+    }
+    & > li {
+      gap: 32px;
+      padding: 0 0 16px 0;
+      margin: 0;
+      display: block;
+      @mixin p;
+      &::before {
+        counter-increment: index;
+        content: counters(index, '.') '. ';
+      }
+    }
+  }
+}
+.html-content table {
+  margin: var(--html-content-table-margin, 0);
+  @media (width <= 768px) {
+    margin: var(--html-content-table-margin-mobile, 0);
+  }
+  & tr {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  & td {
+    white-space: nowrap;
+    padding: var(--html-content-table-td-padding, 0);
+    @media (width <= 768px) {
+      padding: var(--html-content-table-td-padding-mobile, 0);
+    }
+  }
+}
+.html-content {
+  & p {
+    color: var(--html-content-text-color);
+    margin: var(--p-margin, auto);
+    @mixin p;
+  }
+  & a {
+    color: var(--html-content-link-color);
+    text-decoration: none;
+    @mixin text-xl 700;
+  }
+}
+.html-content {
+}

package/dist/css/components/Icon/Icon.css

@@ -1,16 +1,127 @@
-@import './css/icon.css';
-@import './css/icon_size.css';
-@import './css/icon_fill.css';
-@import './css/icon_fill_hover.css';
-@import './css/icon_fill_size.css';
-@import './css/icon_shape.css';
-@import './css/icon_type_with-badge.css';
-
-@import './css/icon__tooltip.css';
-
+.icon {
+  &__item {
+    position: relative;
+    display: flex;
+    & svg {
+      transition: var(--icon-transition);
+    }
+  }
+}
+.icon {
+  &_size {
+    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144  {
+      &_$(size) {
+        width: $(size)px;
+        height: $(size)px;
+        min-width: $(size)px;
+        min-height: $(size)px;
+        font-size: $(size)px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+.icon_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, invert  {
+          &-$(color) {
+            & svg {
+              stroke: none;
+              fill: var(--color-$(type)-item-$(color));
+            }
+          }
+        }
+      }
+      @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover, invert  {
+        &-$(color) {
+          & svg {
+            stroke: none;
+            fill: var(--color-$(type)-$(color));
+          }
+        }
+      }
+    }
+  }
+}
+.icon_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 {
+              & svg {
+                stroke: none;
+                fill: var(--color-$(type)-item-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.icon_fill {
+  &_size {
+    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 72 {
+      &_$(size) {
+        width: $(size)px;
+        height: $(size)px;
+        min-width: $(size)px;
+        min-height: $(size)px;
+        font-size: $(size)px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
+.icon_shape {
+  &_rounded {
+    border-radius: var(--icon-shape-rounded, 12px);
+  }
+  &_circular {
+    border-radius: 50%;
+  }
+  &_geometric {
+    border-radius: 0;
+  }
+}
+.icon {
+  &_type {
+    &_with-badge {
+      position: relative;
+      ^^&__link,
+      ^^&__item {
+        text-decoration: none;
+        @each $size in 14, 16, 24, 32, 40, 56, 60, 72 {
+          &^^^&_size_$(size) {
+            & .badge {
+              transform: translate(var(--icon-size-$(size)-badge-position));
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.icon {
+    &__tooltip {
+      &.tooltip {
+      min-width: 200px;
+      padding: 8px;
+      border-radius: 8px;
+      visibility: visible;
+      opacity: 100%;
+    }
+    }
+}
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ljb24vSWNvbi5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiSWNvbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9pY29uLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pY29uX3NpemUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2ljb25fZmlsbC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaWNvbl9maWxsX2hvdmVyLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pY29uX2ZpbGxfc2l6ZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaWNvbl9zaGFwZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaWNvbl90eXBlX3dpdGgtYmFkZ2UuY3NzJztcblxuQGltcG9ydCAnLi9jc3MvaWNvbl9fdG9vbHRpcC5jc3MnO1xuXG46cm9vdCB7XG4gIC0taWNvbi10cmFuc2l0aW9uOiBhbGwgMC4ycyBlYXNlIDBzO1xuICAtLWljb24tc2l6ZS0yNC1iYWRnZS1wb3NpdGlvbjogMTJweCwgMTJweDtcbn1cbiJdfQ== */