@itcase/ui 1.0.93 → 1.0.94

package/dist/components/Avatar.js

@@ -57,6 +57,7 @@ function Avatar(props) {
     before,
     src,
     type,
+    mode,
     onClick,
     textSize,
     textColor,
@@ -90,7 +91,7 @@ function Avatar(props) {
     return `${firstChar}${secondChar}`;
   }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'avatar', shapeClass, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'avatar', shapeClass, mode && `avatar_mode_${mode}`, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)

package/dist/components/Badge.js

@@ -40,6 +40,7 @@ function Badge(props) {
     appearance,
     className,
     children,
+    mode,
     textColor,
     textSize,
     value
@@ -80,7 +81,7 @@ function Badge(props) {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
+    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', mode && `badge_mode_${mode}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
     style: badgeStyles
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: textSize,

package/dist/components/Cell.js

@@ -71,6 +71,7 @@ function Cell(props) {
     valueTag,
     after,
     before,
+    mode,
     size,
     value,
     valueTextSize,
@@ -149,7 +150,7 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
+    className: clsx__default.default(className, 'cell', mode && `cell_mode_${mode}`, size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Checkbox.js

@@ -40,6 +40,7 @@ function Checkbox(props) {
     after,
     state,
     id,
+    tag: Tag,
     className,
     checked,
     disabled,
@@ -53,7 +54,8 @@ function Checkbox(props) {
     labelTextColor,
     onBlur,
     onChange,
-    onFocus
+    onFocus,
+    value
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -91,9 +93,13 @@ function Checkbox(props) {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("label", {
-    htmlFor: id,
-    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass)
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass),
+    htmlFor: Tag === 'label' && id
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('checkbox__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -102,6 +108,7 @@ function Checkbox(props) {
     disabled: disabled,
     id: id,
     type: "checkbox",
+    value: value,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus
@@ -117,18 +124,35 @@ function Checkbox(props) {
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "checkbox__desc",
     size: descTextSize,
-    textWeight: descTextWidth,
-    textColor: descTextColor
-  }, desc), after);
+    textColor: descTextColor,
+    textWeight: descTextWidth
+  }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__after"
+  }, after));
 }
 Checkbox.propTypes = {
-  className: PropTypes__default.default.string
+  className: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string
+};
+Checkbox.defaultProps = {
+  tag: 'label'
 };
 Checkbox.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Checkbox",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {

package/dist/components/Flex.js

@@ -600,7 +600,9 @@ Flex.__docgenInfo = {
 function FlexItem(props) {
   const {
     children,
-    className
+    className,
+    tag: Tag,
+    htmlFor
   } = props;
   const alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_align-self_',
@@ -630,6 +632,10 @@ function FlexItem(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'resize-horizontal_',
     propsKey: 'width'
@@ -645,8 +651,9 @@ function FlexItem(props) {
   const {
     styles: flexItemStyles
   } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, fillHoverClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
+    htmlFor: htmlFor,
     style: flexItemStyles
   }, children);
 }
@@ -706,11 +713,21 @@ FlexItem.propTypes = {
   wrapMobile: PropTypes__default.default.oneOf(flexWrap.default),
   wrapTablet: PropTypes__default.default.oneOf(flexWrap.default)
 };
+FlexItem.defaultProps = {
+  tag: 'div'
+};
 FlexItem.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "FlexItem",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "required": false
+    },
     "alignItems": {
       "description": "",
       "type": {

package/dist/components/Grid.js

@@ -808,6 +808,10 @@ function GridItem(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'gap_',
     propsKey: 'gap'
@@ -828,7 +832,7 @@ function GridItem(props) {
     styles: gridItemStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
+    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     "data-tour": dataTour,
     id: id,
     style: gridItemStyles,

package/dist/components/Group.js

@@ -32,6 +32,8 @@ function Group(props) {
     children,
     className,
     horizontalScroll,
+    tag: Tag,
+    htmlFor,
     set,
     style,
     dataTour,
@@ -113,9 +115,10 @@ function Group(props) {
     styles: groupStyles,
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
+    htmlFor: htmlFor,
     id: id,
     style: Object.assign({}, groupStyles, style),
     onClick: onClick
@@ -140,6 +143,7 @@ Group.propTypes = {
   contentAlignDesktop: PropTypes__default.default.oneOf([null, 'center']),
   contentAlignMobile: PropTypes__default.default.oneOf([null, 'center']),
   contentAlignTablet: PropTypes__default.default.oneOf([null, 'center']),
+  tag: PropTypes__default.default.string,
   stacking: PropTypes__default.default.oneOf(stacking.default),
   stackingDesktop: PropTypes__default.default.oneOf(stacking.default),
   stackingMobile: PropTypes__default.default.oneOf(stacking.default),
@@ -166,13 +170,28 @@ Group.propTypes = {
   columnsTablet: PropTypes__default.default.number,
   set: PropTypes__default.default.string,
   horizontalScroll: PropTypes__default.default.bool,
-  onClick: PropTypes__default.default.func
+  onClick: PropTypes__default.default.func,
+  htmlFor: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
+};
+Group.defaultProps = {
+  tag: 'div'
 };
 Group.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Group",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "id": {
       "description": "",
       "type": {
@@ -542,6 +561,18 @@ Group.__docgenInfo = {
         "name": "func"
       },
       "required": false
+    },
+    "htmlFor": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
     }
   }
 };

package/dist/components/Image.js

@@ -34,6 +34,7 @@ function Image(props) {
     className,
     imageWrapperClassName,
     imageClassName,
+    mode,
     overlay,
     src,
     title,
@@ -85,16 +86,21 @@ function Image(props) {
     prefix: 'border-color-image_',
     propsKey: 'borderColorImage'
   });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const {
-    // left
     styles,
-    // leftImageWrapper
     wrapper: wrapperStyles,
-    // leftImage
     image: imageStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'image', type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, resizeModeClass, widthClass, heightClass),
+    className: clsx__default.default(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass),
     onClick: onClick,
     style: styles
   }, before, /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Label.js

@@ -48,6 +48,7 @@ function Label(props) {
     labelTextWrap,
     labelTextColor,
     labelTextColorHover,
+    mode,
     set,
     before,
     after,
@@ -104,7 +105,7 @@ function Label(props) {
     styles: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick

package/dist/components/Logo.js

@@ -35,9 +35,10 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Logo(props) {
   const {
     className,
-    size,
-    link,
     href,
+    link,
+    mode,
+    size,
     source,
     src
   } = props;
@@ -61,7 +62,7 @@ function Logo(props) {
     styles: logo
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`),
+    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`, mode && `logo_mode_${mode}`),
     style: logo
   }, link || href ? /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     href: link || href

package/dist/components/Text.js

@@ -30,13 +30,14 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Text(props) {
   const {
     after,
-    dataTour,
     before,
     children,
     className,
     cursor,
-    tag: Tag,
+    dataTour,
     htmlFor,
+    mode,
+    tag: Tag,
     type,
     onClick
   } = props;
@@ -88,7 +89,7 @@ function Text(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,

package/dist/components/Title.js

@@ -42,6 +42,7 @@ function Title(props) {
     onClick
   } = props;
   const {
+    mode,
     size,
     sizeMobile,
     sizeTablet,
@@ -113,7 +114,7 @@ function Title(props) {
     return size;
   }, [isMobile, isTablet, isDesktop]);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
+    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
     "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles

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

@@ -1,4 +1,5 @@
 .accordion {
+  border-radius: var(--accordion-border-radius, 12px);
   &__wrapper {
     width: 100%;
     max-width: var(--max);
@@ -48,7 +49,7 @@
   min-width: 170px;
   display: flex;
   flex-flow: row wrap;
-  gap: 8px;
+  gap: 14px;
   &__title {
     flex: 1;
   }

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

@@ -16,24 +16,32 @@
   }
 }
 .avatar {
-  &_size {
-    @each $size in 14, 16, 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;
-          }
+  &&_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 {
@@ -56,3 +64,22 @@
     }
   }
 }
+.avatar {
+  &_size {
+    @each $size in 14, 16, 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;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -3,6 +3,41 @@
   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 {
@@ -29,16 +64,6 @@
     }
   }
 }
-.badge {
-  &_shape {
-    &_rounded {
-      border-radius: var(--badge-shape-rounded, 6px);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
 :root {
   --badge-width-size-xxs: 16px;
   --badge-height-size-xxs: 16px;

package/dist/css/components/Cell/Cell.css

@@ -38,6 +38,15 @@
     }
   }
 }
+.cell {
+  &__wrapper {
+    &_shape {
+      &_rounded {
+        border-radius: var(--cell-border-radius, 6px);
+      }
+    }
+  }
+}
 .cell {
   &&_state {
     &_active {
@@ -79,9 +88,41 @@
     }
   }
 }
+.cell {
+  &&_mode {
+    &_skeleton {
+      ^^&__data {
+        ^^^&__title,
+        ^^^&__value {
+          color: transparent;
+          background-image: linear-gradient(
+            90deg,
+            var(--color-surface-secondary),
+            var(--color-surface-tertiary),
+            var(--color-surface-secondary)
+          );
+          background-size: 200%;
+          border-radius: 6px;
+          animation: cell-skeleton 3s infinite linear;
+        }
+      }
+    }
+  }
+}
+@keyframes cell-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --cell-size-s-padding: 6px;
+
   --cell-size-m-padding: 6px;
+
   --cell-size-l-padding: 6px;
+
   --cell-size-xl-padding: 12px;
 }

package/dist/css/components/Checkbox/Checkbox.css

@@ -4,32 +4,32 @@
   grid-template-rows: auto auto;
   column-gap: 4px;
   &__item {
-    position: relative;
-    cursor: pointer;
+    min-width: 16px;
+    min-height: 16px;
     font-size: 0;
     line-height: 0;
+    position: relative;
     display: flex;
-    min-height: 16px;
-    min-width: 16px;
-    grid-row-start: span 2;
     align-self: start;
+    cursor: pointer;
+    grid-row-start: span 3;
     ^&__input {
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      margin: 0;
+      width: 100%;
+      height: 100%;
       font-size: 0;
       line-height: 0;
+      margin: 0;
+      border: 0;
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
-      height: 100%;
       z-index: 3;
+      cursor: pointer;
+      appearance: none;
     }
     ^&__state {
-      flex: 1;
       display: flex;
+      flex: 1;
       z-index: 1;
       &_shape {
         &_rounded {
@@ -41,19 +41,19 @@
       }
     }
     ^&__state-checkmark {
-      height: 8px;
       width: 5px;
-      border-bottom-style: solid;
-      border-bottom-width: 2px;
-      border-right-style: solid;
-      border-right-width: 2px;
+      height: 8px;
+      margin: -1px 0 0 0;
       position: absolute;
-      z-index: 2;
+      display: none;
       left: 50%;
       top: 50%;
-      margin: -1px 0 0 0;
+      z-index: 2;
       transform: translate(-50%, -50%) rotate(45deg);
-      display: none;
+      border-bottom-style: solid;
+      border-bottom-width: 2px;
+      border-right-style: solid;
+      border-right-width: 2px;
     }
   }
 }

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

@@ -1,4 +1,5 @@
 .group {
+  display: block;
   transition: var(--group-transition);
 }
 

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

@@ -17,6 +17,31 @@
     }
   }
 }
+.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 {
@@ -42,12 +67,13 @@
 .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;
-        border-radius: var(--image-shape-rounded, 12px);
         & > ^^^&__item {
           width: 100%;
           height: 100%;
@@ -56,6 +82,7 @@
       }
     }
     &_circular {
+      border-radius: 50%;
       > ^^&__wrapper {
         width: 100%;
         height: 100%;

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

@@ -8,19 +8,32 @@
     line-height: 0;
   }
 }
-
 .label {
-  &_size {
-    @each $size in xxs, xs, s, m, l, xl, xxl {
-      &_$(size) {
-        ^^&__inner {
-          padding: var(--label-size-$(size)-padding);
-        }
+  &&_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%;
+  }
+}
+/* mode && `avatar_mode_${mode}`, */
 .label {
   &_shape {
     &_rounded {
@@ -36,7 +49,17 @@
     }
   }
 }
-
+.label {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        ^^&__inner {
+          padding: var(--label-size-$(size)-padding);
+        }
+      }
+    }
+  }
+}
 .label {
   &&_text-align {
     &_left {
@@ -56,7 +79,6 @@
     }
   }
 }
-
 .label {
   &&_width {
     &_fixed {

package/dist/css/components/Logo/Logo.css

@@ -8,6 +8,39 @@
     }
   }
 }
+.logo {
+  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
+    &_align-items_$(val) {
+      align-items: $(val);
+    }
+  }
+}
+.logo {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: logo-skeleton 3s infinite linear;
+      ^^&__image {
+        opacity: 0;
+      }
+    }
+  }
+}
+@keyframes logo-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .logo {
   &_size {
     @each $size in s, m, l {
@@ -20,13 +53,6 @@
     }
   }
 }
-.logo {
-  @each $val in stretch, flex-start, flex-end, center, baseline, auto {
-    &_align-items_$(val) {
-      align-items: $(val);
-    }
-  }
-}
 :root {
   --logo-size-l-width: 240px;
   --logo-size-l-height: 90px;
@@ -37,4 +63,3 @@
   --logo-size-s-width: 140px;
   --logo-size-s-height: 52px;
 }
-

package/dist/css/components/Text/Text.css

@@ -1,4 +1,28 @@
 .text {}
+.text {
+  &&&&_mode {
+    &_skeleton {
+      color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: text-skeleton 3s infinite linear;
+    }
+  }
+}
+@keyframes text-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .text_size {
   @each $sizeText in xxs, xs, s, m, l, xl, xxl {
     &_$(sizeText) {

package/dist/css/components/Title/Title.css

@@ -41,6 +41,30 @@
     margin: 0;
   }
 }
+.title.title {
+  &_mode {
+    &_skeleton {
+      color: transparent;
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      border-radius: 6px;
+      animation: title-skeleton 3s infinite linear;
+    }
+  }
+}
+@keyframes title-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .title {
   &&_type {
     &_accent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.93",
+  "version": "1.0.94",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",