@itcase/ui 1.1.1 → 1.1.3

package/dist/css/components/{Fader/Fader.css → Overlay/Overlay.css}

@@ -1,26 +1,26 @@
-.fader {
+.overlay {
   width: 100%;
   height: 100%;
-  background: var(--fader-fill);
+  background: var(--overlay-fill);
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
-  backdrop-filter: blur(var(--fader-blur, 10px));
+  backdrop-filter: blur(var(--overlay-blur, 10px));
 }
-.fader {
+.overlay {
   &&_state {
     &_visible {
       position: fixed;
       visibility: visible !important;
-      animation-name: faderFadeIn;
+      animation-name: overlayFadeIn;
     }
     &_hidden {
-      animation-name: faderFaderOut;
+      animation-name: overlayFaderOut;
     }
   }
 }
-@keyframes faderFadeIn {
+@keyframes overlayFadeIn {
   from {
     opacity: 0%;
   }
@@ -28,7 +28,7 @@
     opacity: 100%;
   }
 }
-@keyframes faderFaderOut {
+@keyframes overlayFaderOut {
   from {
     opacity: 100%;
   }
@@ -36,8 +36,8 @@
     opacity: 0%;
   }
 }
-.fader {
+.overlay {
   &&_type_click {
-    opacity: 0;
+    opacity: 0%;
   }
 }

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

@@ -19,3 +19,11 @@
     gap: 16px;
   }
 }
+.response {
+  &_set {
+    &_message {
+      margin: 200px 0 0 0;
+      align-self: center;
+    }
+  }
+}

package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css

@@ -0,0 +1,6 @@
+.scrolldrag {
+  white-space: nowrap;
+  padding: 0 5px;
+  display: inline-block;
+  overflow: scroll hidden;
+}

package/dist/css/styles/align/align_vertical-reverse.css

@@ -7,12 +7,12 @@
         align-items: flex-start;
       }
       &-center {
-        align-items: center;
         text-align: center;
+        align-items: center;
       }
       &-right {
-        align-items: flex-end;
         text-align: right;
+        align-items: flex-end;
       }
     }
     &^&_left {
@@ -20,14 +20,14 @@
       align-items: flex-start;
     }
     &^&_center {
+      text-align: center;
       justify-content: center;
       align-items: center;
-      text-align: center;
     }
     &^&_right {
+      text-align: right;
       justify-content: center;
       align-items: flex-end;
-      text-align: right;
     }
     &^&_bottom {
       &-left {
@@ -35,14 +35,14 @@
         align-items: flex-start;
       }
       &-center {
+        text-align: center;
         justify-content: flex-end;
         align-items: center;
-        text-align: center;
       }
       &-right {
+        text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
-        text-align: right;
       }
     }
   }

package/dist/css/styles/align/align_vertical.css

@@ -15,8 +15,8 @@
         align-items: flex-end;
       }
       &-auto {
-        justify-content: space-between;
         text-align: center;
+        justify-content: space-between;
         align-items: center;
       }
     }
@@ -25,19 +25,19 @@
       align-items: flex-start;
     }
     &^&_center {
+      text-align: center;
       justify-content: center;
       align-items: center;
-      text-align: center;
       &-auto {
-      align-items: center;
-      text-align: center;
+        text-align: center;
         justify-content: space-between;
+        align-items: center;
       }
     }
     &^&_right {
+      text-align: right;
       justify-content: center;
       align-items: flex-end;
-      text-align: right;
     }
     &^&_bottom {
       &-left {
@@ -45,19 +45,19 @@
         align-items: flex-start;
       }
       &-center {
+        text-align: center;
         justify-content: flex-end;
         align-items: center;
-        text-align: center;
       }
       &-right {
+        text-align: right;
         justify-content: flex-end;
         align-items: flex-end;
-        text-align: right;
       }
       &-auto {
-        align-items: center;
         text-align: center;
         justify-content: space-between;
+        align-items: center;
       }
     }
   }

package/dist/css/styles/border-color/border-color.css

@@ -1,5 +1,5 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-border {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover, invert {

package/dist/css/styles/border-color/border-color_focus.css

@@ -1,9 +1,9 @@
 .border-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_focus {
       &_$(type) {
         &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover {
             &-$(color) {
               &:focus {
                 outline: 0;

package/dist/css/styles/border-color/border-color_hover.css

@@ -1,6 +1,6 @@
 .border-color {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-border {
           @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover {

package/dist/css/styles/caret-color/caret-color.css

@@ -1,5 +1,5 @@
 .caret-color {
-  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {

package/dist/css/styles/fill/fill.css

@@ -1,5 +1,5 @@
 .fill {
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning, gradient {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-item {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled,
@@ -27,7 +27,7 @@
       }
     }
   }
-  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
+  @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
     &_$(type) {
       &-primary {
         background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_active.css

@@ -1,6 +1,6 @@
 .fill {
   &_active {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active  {
           &-$(color) {
@@ -9,7 +9,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &-active {

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,7 +1,7 @@
 .fill {
   &_active {
     &_hover {
-      @each $type in accent, primary, secondary, tertiary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
           @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
             &-$(color) {
@@ -12,7 +12,7 @@
           }
         }
       }
-      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, surface, success, error {
+      @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
         &_$(type) {
           &-primary {
             background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_disabled.css

@@ -1,6 +1,6 @@
 .fill {
   &_disabled {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -11,7 +11,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           background: var(--color-$(type)-primary);

package/dist/css/styles/fill/fill_hover.css

@@ -1,6 +1,6 @@
 .fill {
   &_hover {
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
           &-$(color) {
@@ -16,7 +16,7 @@
         }
       }
     }
-    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, success, error, info, warning  {
+    @each $type in accent, primary, secondary, tertiary, quaternary, quinary, senary, surface, error, success, warning, info, danger, gradient {
       &_$(type) {
         &-primary {
           &:hover {

package/dist/stories/ModalConfirm.stories.js

@@ -15,7 +15,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/dist/stories/ModalDefault.stories.js

@@ -13,7 +13,7 @@ export default {
 export const Default = {
   args: {
     isOpen: true,
-    isFader: true,
+    isOverlay: true,
     isOutsideClose: true,
     shape: 'rounded',
     elevation: 8,

package/dist/stories/NotFound.stories.js

@@ -1,6 +1,5 @@
 import { buttonConfig } from '@itcase/ui/components/Button'
-import { Empty } from '@itcase/ui/components/Empty'
-import { Image } from '@itcase/ui/components/Image'
+import { Response } from '@itcase/ui/components/Response'
 import {
   fillHoverProps,
   fillProps,
@@ -17,7 +16,7 @@ buttonConfig.setAppearance(buttonAppearance)
 
 export default {
   title: 'Components / NotFound',
-  component: Empty,
+  component: Response,
   argTypes: {
     advancedProps: { control: 'boolean' },
     buttonAfter: {
@@ -80,7 +79,7 @@ export default {
 
 export const Default = {
   args: {
-    before: <Image alt="search_sign" src="assets/img/search.svg" />,
+    imageSrc: 'assets/img/search.svg',
     message: 'Nothing found',
     messageTextColor: 'surfaceTextPrimary',
     messageTextSize: 'l',

package/package.json

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

package/dist/components/Empty.js

@@ -1,229 +0,0 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var size = require('../constants/componentProps/size.js');
-var fill = require('../constants/componentProps/fill.js');
-var shape = require('../constants/componentProps/shape.js');
-var width = require('../constants/componentProps/width.js');
-var textColor = require('../constants/componentProps/textColor.js');
-var index$1 = require('./Button.js');
-var index = require('./Text.js');
-require('clsx');
-require('./Icon.js');
-require('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../hooks/useStyles.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
-require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/borderType.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Tooltip.js');
-require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/textSize.js');
-require('./Loader.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-
-function Empty(props) {
-  const {
-    before,
-    message,
-    messageTextColor,
-    messageTextSize,
-    buttonAfter,
-    buttonAppearance,
-    buttonBefore,
-    buttonFill,
-    buttonFillHover,
-    buttonLabel,
-    buttonLabelTextColor,
-    buttonLabelTextSize,
-    buttonShape,
-    buttonSize,
-    buttonWidth
-  } = props;
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "empty"
-  }, before, message && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    className: "empty__message",
-    size: messageTextSize,
-    textColor: messageTextColor
-  }, message), buttonLabel && /*#__PURE__*/React__default.default.createElement(index$1.Button, {
-    after: buttonAfter,
-    appearance: buttonAppearance,
-    before: buttonBefore,
-    className: "empty__button",
-    fill: buttonFill,
-    fillHover: buttonFillHover,
-    label: buttonLabel,
-    labelTextColor: buttonLabelTextColor,
-    labelTextSize: buttonLabelTextSize,
-    shape: buttonShape,
-    size: buttonSize,
-    width: buttonWidth
-  }));
-}
-Empty.propTypes = {
-  before: PropTypes__default.default.any,
-  buttonAfter: PropTypes__default.default.any,
-  buttonBefore: PropTypes__default.default.any,
-  buttonFill: PropTypes__default.default.oneOf(fill.default),
-  buttonFillHover: PropTypes__default.default.oneOf(fill.default),
-  buttonLabel: PropTypes__default.default.string,
-  buttonLabelTextColor: PropTypes__default.default.oneOf(textColor.default),
-  buttonLabelTextSize: PropTypes__default.default.oneOf(size.default),
-  buttonShape: PropTypes__default.default.oneOf(shape.default),
-  buttonSize: PropTypes__default.default.oneOf(size.default),
-  buttonWidth: PropTypes__default.default.oneOf(width.default),
-  message: PropTypes__default.default.string,
-  messageTextColor: PropTypes__default.default.oneOf(textColor.default),
-  messageTextSize: PropTypes__default.default.oneOf(size.default)
-};
-Empty.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Empty",
-  "props": {
-    "before": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonAfter": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonBefore": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "buttonFill": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "buttonFillHover": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "buttonLabel": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "buttonLabelTextColor": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textColorProps"
-      },
-      "required": false
-    },
-    "buttonLabelTextSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "buttonShape": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "buttonSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "buttonWidth": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
-    "message": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "messageTextColor": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "textColorProps"
-      },
-      "required": false
-    },
-    "messageTextSize": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    }
-  }
-};
-
-exports.Empty = Empty;

package/dist/css/components/Empty/Empty.css

@@ -1,21 +0,0 @@
-.empty {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  align-self: center;
-  margin-top: 200px;
-  &__message {
-    text-align: center;
-  }
-  &__button {
-    margin-top: auto;
-  }
-  & .image,
-  .image__wrapper,
-  .image__item {
-    pointer-events: none;
-    user-select: none;
-  }
-}