@itcase/ui 1.1.17 → 1.1.18

package/dist/css/components/Image/Image.css

@@ -1,9 +1,132 @@
-@import './css/image.css';
-@import './css/image_horizontal-align.css';
-@import './css/image_mode_skeleton.css';
-@import './css/image_resize-mode.css';
-@import './css/image_shape.css';
-@import './css/image_type_cover.css';
-@import './css/image_vertical-align.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ltYWdlL0ltYWdlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJJbWFnZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9pbWFnZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaW1hZ2VfaG9yaXpvbnRhbC1hbGlnbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaW1hZ2VfbW9kZV9za2VsZXRvbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaW1hZ2VfcmVzaXplLW1vZGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2ltYWdlX3NoYXBlLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pbWFnZV90eXBlX2NvdmVyLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pbWFnZV92ZXJ0aWNhbC1hbGlnbi5jc3MnO1xuIl19 */
+.image {
+  font-size: 0;
+  &__wrapper {
+    width: 100%;
+    font-size: 0;
+    position: relative;
+  }
+}
+.image {
+  &_horizontal-align {
+    &_center {
+      ^^&__wrapper {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
+.image {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: image-skeleton 3s infinite linear;
+      ^^&__item {
+        opacity: 0;
+      }
+    }
+  }
+}
+@keyframes image-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.image {
+  &_resize-mode {
+    &_cover {
+      > ^^&__wrapper {
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+    }
+    &_contain {
+      > ^^&__wrapper {
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+    }
+  }
+}
+.image {
+  &_shape {
+    &_rounded {
+      border-radius: var(--image-shape-rounded, 12px);
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        border-radius: var(--image-shape-rounded, 12px);
+        position: relative;
+        overflow: hidden;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          border-radius: var(--image-shape-rounded, 12px);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+    }
+    &_geometric {
+      > ^^&__wrapper {
+        width: 100%;
+        height: 100%;
+        & > ^^^&__item {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.image {
+  &&_type_cover {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    ^&__wrapper {
+      height: 100%;
+      & img {
+        width: 100%;
+      }
+    }
+  }
+}
+.image {
+  &_vertical-align {
+    &_center {
+      ^^&__wrapper {
+        height: 100%;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/dist/css/components/Input/Input.css

@@ -1,6 +1,85 @@
-@import './css/input.css';
-@import './css/input_shape.css';
-@import './css/input_size.css';
-@import './css/input_type_number.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0L0lucHV0LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJJbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9pbnB1dC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaW5wdXRfc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2lucHV0X3NpemUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2lucHV0X3R5cGVfbnVtYmVyLmNzcyc7XG4iXX0= */
+.input {
+  min-width: unset;
+  padding: 0;
+  margin: 0;
+  border: none;
+  position: relative;
+  box-shadow: none;
+  appearance: none;
+  outline: 0;
+  caret-color: var(--input-caret-color);
+  &:disabled {
+    background: var(--input-state-disabled-background, #ECECEC);
+    border: solid 1px var(--input-state-disabled-border, #747474);
+    &:hover {
+      background: var(--input-state-disabled-background, #ECECEC);
+      border: solid 1px var(--input-state-disabled-border, #747474);
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+  &:hover {
+    background: var(--input-state-hover-background);
+    border: solid 1px var(--input-state-hover-border);
+  }
+  &&_state {
+    &_success {
+      background: var(--input-state-success-background);
+      border: solid 1px var(--input-state-success-border);
+    }
+    &_error {
+      background: var(--input-state-error-background);
+      border: solid 1px var(--input-state-error-border);
+    }
+    &_focus {
+      background: var(--input-state-focus-background);
+      border: solid 1px var(--input-state-focus-border);
+    }
+    &_required {
+      background: var(--input-state-required-background);
+      border: solid 1px var(--input-state-required-border);
+    }
+    &_custom {
+      background: var(--input-state-custom-background);
+      border: solid 1px var(--input-state-custom-border);
+    }
+  }
+}
+.input {
+  &_shape {
+    &_rounded {
+      border-radius: var(--input-shape-rounded, 4px);
+      position: relative;
+    }
+    &_underline {
+      position: relative;
+      border-left: none !important;
+      border-right: none !important;
+      border-top: none !important;
+    }
+  }
+}
+.input {
+  &&_size {
+    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+      &_$(size) {
+        padding: var(--input-size-$(size)-padding);
+      }
+    }
+  }
+}
+.input {
+  &_type {
+    &_number {
+      appearance: none;
+      &[type='number'] {
+        appearance: textfield;
+      }
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+      }
+    }
+  }
+}

package/dist/css/components/InputMask/Input.css

@@ -1,6 +1,77 @@
-@import './css/input.css';
-@import './css/input_shape.css';
-@import './css/input_size.css';
-@import './css/input_type_number.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0TWFzay9JbnB1dC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiSW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiQGltcG9ydCAnLi9jc3MvaW5wdXQuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2lucHV0X3NoYXBlLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pbnB1dF9zaXplLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9pbnB1dF90eXBlX251bWJlci5jc3MnO1xuIl19 */
+.input {
+  min-width: unset;
+  padding: 0;
+  margin: 0;
+  border: none;
+  position: relative;
+  box-shadow: none;
+  appearance: none;
+  outline: 0;
+  caret-color: var(--input-caret-color);
+  &:disabled {
+    background: var(--input-state-disabled-background, #ECECEC);
+    border: solid 1px var(--input-state-disabled-border, #747474);
+    &:hover {
+      background: var(--input-state-disabled-background, #ECECEC);
+      border: solid 1px var(--input-state-disabled-border, #747474);
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+  &:hover {
+    background: var(--input-state-hover-background);
+    border: solid 1px var(--input-state-hover-border);
+  }
+  &&_state {
+    &_success {
+      background: var(--input-state-success-background);
+      border: solid 1px var(--input-state-success-border);
+    }
+    &_error {
+      background: var(--input-state-error-background);
+      border: solid 1px var(--input-state-error-border);
+    }
+    &_focus {
+      background: var(--input-state-focus-background);
+      border: solid 1px var(--input-state-focus-border);
+    }
+  }
+}
+.input {
+  &_shape {
+    &_rounded {
+      border-radius: var(--input-shape-rounded, 4px);
+      position: relative;
+    }
+    &_underline {
+      border-left: none !important;
+      border-top: none !important;
+      border-right: none !important;
+      position: relative;
+    }
+  }
+}
+.input {
+  &&_size {
+    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+      &_$(size) {
+        padding: var(--input-size-$(size)-padding);
+      }
+    }
+  }
+}
+.input {
+  &_type {
+    &_number {
+      appearance: none;
+      &[type='number'] {
+        appearance: textfield;
+      }
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+      }
+    }
+  }
+}

package/dist/css/components/InputPassword/InputPassword.css

@@ -1,5 +1,68 @@
-@import './css/input-password.css';
-@import './css/input-password_shape.css';
-@import './css/input-password_size.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0lucHV0UGFzc3dvcmQvSW5wdXRQYXNzd29yZC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiSW5wdXRQYXNzd29yZC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9pbnB1dC1wYXNzd29yZC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvaW5wdXQtcGFzc3dvcmRfc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2lucHV0LXBhc3N3b3JkX3NpemUuY3NzJztcbiJdfQ== */
+.input-password {
+  position: relative;
+  &__icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  &__input {
+    border: none;
+    appearance: none;
+    padding: 0;
+    margin: 0;
+    min-width: unset;
+    box-shadow: none;
+    outline: 0;
+    position: relative;
+    caret-color: var(--input-password-caret-color);
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      border: solid 1px var(--input-password-state-hover-border);
+      background: var(--input-password-state-hover-background);
+    }
+    &&_state {
+      &_success {
+        border: solid 1px var(--input-password-state-success-border);
+        background: var(--input-password-state-success-background);
+      }
+      &_error {
+        border: solid 1px var(--input-password-state-error-border);
+        background: var(--input-password-state-error-background);
+      }
+      &_focus {
+        border: solid 1px var(--input-password-state-focus-border);
+        background: var(--input-password-state-focus-background);
+      }
+    }
+  }
+}
+.input-password {
+  &__input {
+    &_shape {
+      &_rounded {
+        border-radius: 4px;
+        position: relative;
+      }
+      &_underline {
+        position: relative;
+        border-left: none !important;
+        border-right: none !important;
+        border-top: none !important;
+      }
+    }
+  }
+}
+.input-password {
+  &__input {
+    &&_size {
+      @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
+        &_$(size) {
+          padding: var(--input-password-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}

package/dist/css/components/Label/Label.css

@@ -1,8 +1,83 @@
-@import './css/label.css';
-@import './css/label_mode_skeleton.css';
-@import './css/label_shape.css';
-@import './css/label_size.css';
-@import './css/label__tooltip.css';
-@import './css/label_width.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xhYmVsL0xhYmVsLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJMYWJlbC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9sYWJlbC5jc3MnO1xuQGltcG9ydCAnLi9jc3MvbGFiZWxfbW9kZV9za2VsZXRvbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvbGFiZWxfc2hhcGUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2xhYmVsX3NpemUuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2xhYmVsX190b29sdGlwLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9sYWJlbF93aWR0aC5jc3MnO1xuIl19 */
+.label {
+  position: relative;
+  display: inline-flex;
+  &__inner {
+    width: 100%;
+    font-size: 0;
+    line-height: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+  }
+}
+.label {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: label-skeleton 3s infinite linear;
+      ^^&__label {
+        color: transparent;
+      }
+    }
+  }
+}
+@keyframes label-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.label {
+  &_shape {
+    &_rounded {
+      border-radius: var(--label-shape-rounded-default, 6px);
+      @each $size in xxs, xs, s, m, l, xl, xxl {
+        &.label_size_$(size) {
+          border-radius: var(--label-size-$(size)-shape-rounded);
+        }
+      }
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.label {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        ^^&__inner {
+          padding: var(--label-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}
+div.label {
+  &__tooltip {
+    z-index: 12;
+  }
+}
+.label {
+  &&_width {
+    &_fixed {
+      width: 240px;
+    }
+    &_hug {
+      display: inline-flex;
+    }
+    &_fill {
+      width: 100%;
+      max-width: none !important;
+    }
+  }
+}

package/dist/css/components/Link/Link.css

@@ -1,5 +1,32 @@
-@import './css/link.css';
-@import './css/link_underline.css';
-@import './css/link_direction.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpbmsvTGluay5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiTGluay5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9saW5rLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9saW5rX3VuZGVybGluZS5jc3MnO1xuQGltcG9ydCAnLi9jc3MvbGlua19kaXJlY3Rpb24uY3NzJztcbiJdfQ== */
+.link {
+  color: inherit;
+}
+.link {
+  &_underline {
+    &_none {
+      text-decoration: none;
+    }
+  }
+}
+.link {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/List/List.css

@@ -1,9 +1,112 @@
-@import './css/list.css';
-@import './css/list_bullet_fill.css';
-@import './css/list_bullet_size.css';
-@import './css/list_bullet_text-color.css';
-@import './css/list_direction.css';
-@import './css/list_style_dot.css';
-@import './css/list_style_number.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xpc3QvTGlzdC5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEiLCJmaWxlIjoiTGlzdC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9saXN0LmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9saXN0X2J1bGxldF9maWxsLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9saXN0X2J1bGxldF9zaXplLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9saXN0X2J1bGxldF90ZXh0LWNvbG9yLmNzcyc7XG5AaW1wb3J0ICcuL2Nzcy9saXN0X2RpcmVjdGlvbi5jc3MnO1xuQGltcG9ydCAnLi9jc3MvbGlzdF9zdHlsZV9kb3QuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2xpc3Rfc3R5bGVfbnVtYmVyLmNzcyc7XG4iXX0= */
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  &__item {
+    margin: 0;
+    padding: 0;
+  }
+}
+.list {
+  &_bullet {
+    &-fill {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-item {
+            @each $color in primary, secondary, tertiary, quaternary, accent {
+              &-$(color) {
+                & .list__item {
+                  &::before {
+                    background: var(--color-$(type)-text-$(color));
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.list {
+  &_bullet {
+    @each $size in h1, h2, h3, h4, h5, h6 {
+      &-size_$(size) {
+        @mixin $(size);
+      }
+    }
+  }
+}
+.list {
+  &_bullet {
+    &-text-color {
+      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+        &_$(type) {
+          &-text {
+            @each $color in primary, secondary, tertiary, quaternary, accent {
+              &-$(color) {
+                color: var(--color-$(type)-text-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.list {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+  @each $val in row, row-reverse, column, column-reverse {
+    &_direction_$(val) {
+      display: flex;
+      flex-direction: $(val);
+    }
+  }
+}
+.list {
+  &_style_dot {
+    & li {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 16px;
+      &::before {
+        content: '';
+        display: flex;
+        min-width: 6px;
+        max-width: 6px;
+        min-height: 6px;
+        max-height: 6px;
+        background: inherit;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+.list {
+  &_style_number {
+    badge-reset: number-badge;
+    & li {
+      position: relative;
+      badge-increment: number-badge;
+      padding: 0 0 0 1.5em;
+      &::before {
+        content: badge(number-badge) '. ';
+        position: absolute;
+        left: 0;
+        top: 0;
+        text-color: inherit;
+      }
+    }
+  }
+}

package/dist/css/components/Loader/Loader.css

@@ -1,4 +1,44 @@
-@import './css/loader.css';
-@import './css/loader_set_simple.css';
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0xvYWRlci9Mb2FkZXIuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6IkxvYWRlci5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL2Nzcy9sb2FkZXIuY3NzJztcbkBpbXBvcnQgJy4vY3NzL2xvYWRlcl9zZXRfc2ltcGxlLmNzcyc7XG4iXX0= */
+.loader {
+  position: relative;
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: center;
+  align-items: center;
+  &__inner {
+    position: relative;
+    display: flex;
+  }
+  &__text {
+  }
+}
+.loader {
+  &_set {
+    &_simple {
+      ^^&__inner {
+        width: auto;
+        height: auto;
+      }
+      ^^&__item {
+        width: 12px;
+        height: 12px;
+        border-radius: 100%;
+        display: inline-block;
+        margin: 4px;
+        animation: loaderSimple 1.4s infinite ease-in-out both;
+        &:first-child {
+          animation-delay: -0.32s;
+        }
+        &:nth-child(2) {
+          animation-delay: -0.16s;
+        }
+      }
+    }
+  }
+}
+@keyframes loaderSimple {
+  0%, 80%, 100% {
+    transform: scale(0);
+  } 40% {
+    transform: scale(1.0);
+  }
+}