@itcase/ui 1.0.43 → 1.0.45

package/dist/constants/componentProps/type.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var typeProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+const typeProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
 
 exports.default = typeProps;

package/dist/constants/componentProps/underline.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var underlineProps = [null, 'false', 'none', 'underline'];
+const underlineProps = [null, 'false', 'none', 'underline'];
 
 exports.default = underlineProps;

package/dist/constants/componentProps/verticalContentAlign.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var verticalContentAlignProps = [null, 'center'];
+const verticalContentAlignProps = [null, 'center'];
 
 exports.default = verticalContentAlignProps;

package/dist/constants/componentProps/verticalResizeMode.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var verticalResizeModeProps = [null, 'fixed', 'hug', 'fill'];
+const verticalResizeModeProps = [null, 'fixed', 'hug', 'fill'];
 
 exports.default = verticalResizeModeProps;

package/dist/constants/componentProps/width.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var widthProps = [null, 'fixed', 'hug', 'fill'];
+const widthProps = [null, 'fixed', 'hug', 'fill'];
 
 exports.default = widthProps;

package/dist/constants/componentProps/wrap.js

@@ -1,5 +1,5 @@
 'use strict';
 
-var wrapProps = [null, 'wrap', 'no-wrap', 'nowrap', 'wrap-reverse'];
+const wrapProps = [null, 'wrap', 'no-wrap', 'nowrap', 'wrap-reverse'];
 
 exports.default = wrapProps;

package/dist/context/Notifications.js

@@ -9,37 +9,34 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-var STATUSES = {
+const STATUSES = {
   success: 'success',
   info: 'info',
   error: 'error',
   warning: 'warning'
 };
-var NotificationsContext = /*#__PURE__*/React.createContext([]);
-var NotificationsAPIContext = /*#__PURE__*/React.createContext({
-  showNotification: function showNotification() {},
-  hideNotifications: function hideNotifications() {},
+const NotificationsContext = /*#__PURE__*/React.createContext([]);
+const NotificationsAPIContext = /*#__PURE__*/React.createContext({
+  showNotification: () => {},
+  hideNotifications: () => {},
   notificationStatuses: STATUSES
 });
 function NotificationsProvider(props) {
-  var _useState = React.useState([]),
-    notifications = _useState[0],
-    setNotifications = _useState[1];
-  var showNotification = React.useCallback(function (notification, onClose) {
-    var id = uuid.v4().split('-')[0];
-    var title = '';
-    var text = '';
-    var status = STATUSES.warning;
-    var closeByTime = 4500;
-    var textColor = '';
+  const [notifications, setNotifications] = React.useState([]);
+  const showNotification = React.useCallback((notification, onClose) => {
+    let id = uuid.v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let textColor = '';
     if (typeof notification === 'string') {
       text = notification;
     } else if (typeof notification === 'object') {
-      var _notification$id, _notification$title, _notification$text, _notification$status, _notification$closeBy;
-      id = (_notification$id = notification.id) != null ? _notification$id : id;
-      title = (_notification$title = notification.title) != null ? _notification$title : title;
-      text = (_notification$text = notification.text) != null ? _notification$text : text;
-      status = (_notification$status = notification.status) != null ? _notification$status : status;
+      id = notification.id ?? id;
+      title = notification.title ?? title;
+      text = notification.text ?? text;
+      status = notification.status ?? status;
       switch (status) {
         case 'success':
           textColor = 'successTextPrimary';
@@ -54,52 +51,40 @@ function NotificationsProvider(props) {
           textColor = 'warningTextPrimary';
           break;
       }
-      closeByTime = (_notification$closeBy = notification.closeByTime) != null ? _notification$closeBy : closeByTime;
+      closeByTime = notification.closeByTime ?? closeByTime;
     }
-    setNotifications(function (prevState) {
-      return [].concat(prevState, [{
-        id: id,
-        title: title,
-        text: text,
-        status: status,
-        textColor: textColor,
-        // closeByTime: closeByTime,
-        onClose: onClose
-      }]);
-    });
+    setNotifications(prevState => [...prevState, {
+      id: id,
+      title: title,
+      text: text,
+      status: status,
+      textColor: textColor,
+      // closeByTime: closeByTime,
+      onClose: onClose
+    }]);
     if (closeByTime) {
-      setTimeout(function () {
-        setNotifications(function (prevState) {
-          var currentNotification = prevState.find(function (notification) {
-            return notification.id === id;
-          });
+      setTimeout(() => {
+        setNotifications(prevState => {
+          const currentNotification = prevState.find(notification => notification.id === id);
           if (currentNotification) {
             if (typeof currentNotification.onClose === 'function') {
               currentNotification.onClose();
             }
-            return prevState.filter(function (notification) {
-              return notification.id !== id;
-            });
+            return prevState.filter(notification => notification.id !== id);
           }
           return prevState;
         });
       }, closeByTime);
     }
   }, []);
-  var hideNotifications = React.useCallback(function (id) {
-    setNotifications(function (prevState) {
-      return prevState.filter(function (notification) {
-        return notification.id !== id;
-      });
-    });
-  }, []);
-  var notificationsAPI = React.useMemo(function () {
-    return {
-      showNotification: showNotification,
-      hideNotifications: hideNotifications,
-      notificationStatuses: STATUSES
-    };
+  const hideNotifications = React.useCallback(id => {
+    setNotifications(prevState => prevState.filter(notification => notification.id !== id));
   }, []);
+  const notificationsAPI = React.useMemo(() => ({
+    showNotification: showNotification,
+    hideNotifications: hideNotifications,
+    notificationStatuses: STATUSES
+  }), []);
   return /*#__PURE__*/React__default.default.createElement(NotificationsAPIContext.Provider, {
     value: notificationsAPI
   }, /*#__PURE__*/React__default.default.createElement(NotificationsContext.Provider, {

package/dist/context/UIContext.js

@@ -10,14 +10,14 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-var UserDeviceContext = /*#__PURE__*/React.createContext({
+const UserDeviceContext = /*#__PURE__*/React.createContext({
   isMobile: false,
   isTablet: false,
   isDesktop: false
 });
-var SiteMenuContext = /*#__PURE__*/React.createContext({
+const SiteMenuContext = /*#__PURE__*/React.createContext({
   isSiteMenuOpen: false,
-  setIsSiteMenuOpen: function setIsSiteMenuOpen() {}
+  setIsSiteMenuOpen: () => {}
 });
 function useUserDeviceContext() {
   return React.useContext(UserDeviceContext);
@@ -25,20 +25,17 @@ function useUserDeviceContext() {
 function useSiteMenuContext() {
   return React.useContext(SiteMenuContext);
 }
-var UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
-  var children = props.children,
-    _props$userDeviceStat = props.userDeviceState,
-    userDeviceState = _props$userDeviceStat === void 0 ? {} : _props$userDeviceStat;
-  var _useState = React.useState(false),
-    isSiteMenuOpen = _useState[0],
-    setIsSiteMenuOpen = _useState[1];
-  var siteMenuContextState = React.useMemo(function () {
-    return {
-      isSiteMenuOpen: isSiteMenuOpen,
-      setIsSiteMenuOpen: setIsSiteMenuOpen
-    };
-  }, [isSiteMenuOpen]);
-  var mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
+const UIProvider = /*#__PURE__*/React.memo(function UIProvider(props) {
+  const {
+    children,
+    userDeviceState = {}
+  } = props;
+  const [isSiteMenuOpen, setIsSiteMenuOpen] = React.useState(false);
+  const siteMenuContextState = React.useMemo(() => ({
+    isSiteMenuOpen,
+    setIsSiteMenuOpen
+  }), [isSiteMenuOpen]);
+  const mediaQueriesDevices = useMediaQueries.useMediaQueries(userDeviceState);
   return /*#__PURE__*/React__default.default.createElement(UserDeviceContext.Provider, {
     value: mediaQueriesDevices
   }, /*#__PURE__*/React__default.default.createElement(SiteMenuContext.Provider, {

package/dist/css/components/Choice/Choice.css

@@ -49,6 +49,14 @@
   &_shape {
     &_rounded {
       border-radius: 8px;
+      ^^&__item:first-child {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+      ^^&__item:last-child {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
     }
     &_circular {
       border-radius: 50%;

package/dist/css/components/Code/Code.css

@@ -1,55 +1,42 @@
 .code {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  &__group {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    ^&__input {
-      text-align: center;
-    }
-  }
 }
-.code {
-  &__group {
-    ^&__input {
-      @each $size in tiny, middle, large {
-        &.input_size_$(size) {
-          max-width: var(--code-input-size-$(size)-width);
-          max-height: var(--code-input-size-$(size)-height);
-          min-width: var(--code-input-size-$(size)-width);
-          min-height: var(--code-input-size-$(size)-height);
-          padding: var(--code-input-size-$(size)-padding);
-        }
+.code__input {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        min-width: var(--code-input-size-$(size)-width);
+        min-height: var(--code-input-size-$(size)-height);
+        max-width: var(--code-input-size-$(size)-width);
+        max-height: var(--code-input-size-$(size)-height);
+        padding: var(--code-input-size-$(size)-padding);
       }
     }
   }
+  &[type='number']::-webkit-outer-spin-button,
+  &[type='number']::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+  }
+  &[type='number'] {
+    appearance: textfield;
+  }
 }
-.code {
-  &__group {
-    ^&__input {
-      &.input_shape {
-        &_rounded {
-          border-radius: 8px;
-        }
-        &_circular {
-          border-radius: 50%;
-        }
-      }
+.code__input {
+  &_shape {
+    &_rounded {
+      border-radius: 8px;
+    }
+    &_circular {
+      border-radius: 50%;
     }
   }
 }
 :root {
-  --code-input-size-tiny-width: 24px;
-  --code-input-size-tiny-height: 24px;
-  --code-input-size-tiny-padding: 5px;
-
-  --code-input-size-middle-width: 48px;
-  --code-input-size-middle-height: 48px;
-  --code-input-size-middle-padding: 10px 12px;
+  --code-input-size-compact-width: 36px;
+  --code-input-size-compact-height: 36px;
+  --code-input-size-compact-padding: 5px;
+  --code-input-size-normal-width: 48px;
+  --code-input-size-normal-height: 48px;
+  --code-input-size-normal-padding: 10px 12px;
 }

package/dist/css/components/DatePicker/DatePicker.css

@@ -416,6 +416,45 @@
 .react-datepicker__year-text--highlighted-custom-2 {
   color: green;
 }
+.react-datepicker__day--holidays,
+.react-datepicker__month-text--holidays,
+.react-datepicker__quarter-text--holidays,
+.react-datepicker__year-text--holidays {
+  position: relative;
+  border-radius: 0.3rem;
+  background-color: #ff6803;
+  color: #fff;
+}
+.react-datepicker__day--holidays .holiday-overlay,
+.react-datepicker__month-text--holidays .holiday-overlay,
+.react-datepicker__quarter-text--holidays .holiday-overlay,
+.react-datepicker__year-text--holidays .holiday-overlay {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.3s ease-in-out;
+}
+.react-datepicker__day--holidays:hover,
+.react-datepicker__month-text--holidays:hover,
+.react-datepicker__quarter-text--holidays:hover,
+.react-datepicker__year-text--holidays:hover {
+  background-color: #cf5300;
+}
+.react-datepicker__day--holidays:hover .holiday-overlay,
+.react-datepicker__month-text--holidays:hover .holiday-overlay,
+.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
+.react-datepicker__year-text--holidays:hover .holiday-overlay {
+  visibility: visible;
+  opacity: 1;
+}
 .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
 .react-datepicker__month-text--selected,
 .react-datepicker__month-text--in-selecting-range,

package/dist/css/components/Notification/Notification.css

@@ -2,29 +2,26 @@
 }
 .notification {
   &&_type_global {
+    background: none;
+    padding: 0;
     position: fixed;
-    right: 0;
     top: 0;
-    padding: 0;
-    background: none;
+    right: 0;
     z-index: 1000;
     ^&__wrapper {
       width: 100%;
-      align-items: flex-end;
-      display: flex;
-      gap: 20px;
       position: relative;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: flex-end;
       top: 20px;
       right: 40px;
-      flex-flow: column nowrap;
+      gap: 20px;
       ^^&__item {
         width: 320px;
       }
     }
   }
-}
-:root {
-
 }
 .notification__item {
   &_set {
@@ -56,6 +53,21 @@
     }
   }
 }
+.notification__item {
+  &_set {
+    &_form {
+      width: 100%;
+      ^^&-wrapper {
+        text-align: left;
+        padding: 12px 16px;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}
 .notification__item {
   &_status {
     &_success {

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -0,0 +1,15 @@
+.notification__item {
+  &_set {
+    &_form {
+      width: 100%;
+      ^^&-wrapper {
+        text-align: left;
+        padding: 12px 16px;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  }
+}

package/dist/css/components/Swiper/Swiper.css

@@ -1,5 +1,5 @@
 /**
- * Swiper 10.1.0
+ * Swiper 10.2.0
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: August 1, 2023
+ * Released on: August 17, 2023
  */
 
 /* FONT_START */
@@ -750,7 +750,10 @@ button.swiper-pagination-bullet {
   pointer-events: none;
 }
 
-.swiper-fade .swiper-slide-active,
+.swiper-fade .swiper-slide-active {
+  pointer-events: auto;
+}
+
 .swiper-fade .swiper-slide-active .swiper-slide-active {
   pointer-events: auto;
 }

package/dist/css/components/Tab/Tab.css

@@ -40,6 +40,7 @@
   position: relative;
   display: flex;
   align-items: stretch;
+  flex-flow: row wrap;
   & .tab {
     display: flex;
     flex-flow: column nowrap;
@@ -58,6 +59,15 @@
     }
   }
 }
+.tab {
+  &_state {
+    &_active {
+      ^^&__label {
+        color: var(--color-surface-text-accent);
+      }
+    }
+  }
+}
 :root {
   --tab-size-normal-padding: 10px;
   --tab-size-normal-gap: 10px;
@@ -65,4 +75,3 @@
   --tab-size-compact-padding: 10px;
   --tab-size-compact-gap: 10px;
 }
-

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

@@ -1,5 +1,4 @@
 .align {
-  border: solid 2px red;
   &_center {
     margin: 0 auto;
   }

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

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

package/dist/css/styles/align/align_horizontal.css

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

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

@@ -5,8 +5,8 @@
         @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
           &-$(color) {
             border-width: 1px;
-            border-style: solid;
             border-color: var(--color-$(type)-border-$(color));
+            border-style: solid;
           }
         }
       }
@@ -24,5 +24,19 @@
         }
       }
     }
+    &_focus {
+      &_$(type) {
+        &-border {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+            &-$(color) {
+              &:focus {
+                outline: 0;
+                border-color: var(--color-$(type)-border-$(color)) !important;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }

package/dist/css/styles/column-gap/column-gap.css

@@ -1,5 +1,7 @@
 .column-gap {
   @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 {
-    column-gap: $(val)px;
+    &_$(val) {
+      column-gap: $(val)px;
+    }
   }
 }