@itcase/ui 1.0.11 → 1.0.14

package/dist/components/Switch.js

@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Switch(props) {
+var Switch = /*#__PURE__*/React__default.default.forwardRef(function Switch(props, ref) {
   var className = props.className,
     set = props.set,
     size = props.size,
@@ -25,6 +25,7 @@ function Switch(props) {
     className: "switch__checkbox",
     disabled: disabled,
     id: id,
+    ref: ref,
     type: "checkbox",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
@@ -32,7 +33,7 @@ function Switch(props) {
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "switch__toggle"
   }, "\xA0"));
-}
+});
 Switch.propTypes = {
   checked: PropTypes__default.default.bool,
   className: PropTypes__default.default.string,

package/dist/components/Textarea.js

@@ -36,6 +36,10 @@ function Textarea(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
   var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'textarea_size_',
     propsKey: 'size'
@@ -69,7 +73,7 @@ function Textarea(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("textarea", {
-    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
     id: id,
     disabled: disabled,
     placeholder: placeholder,

package/dist/components/Tile.js

@@ -4,7 +4,6 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index$2 = require('./Badge.js');
-require('./Emoji.js');
 require('./Icon.js');
 var index = require('./Title.js');
 var index$1 = require('./Text.js');
@@ -32,8 +31,6 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
-require('../constants/componentProps/direction.js');
-require('../constants/componentProps/emojiSize.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');

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

@@ -11,6 +11,9 @@
       border-top: 0;
       border-left: 0;
       border-bottom: 0;
+      &:hover {
+        background: var(--choice-item-background-hover);
+      }
       &last-child {
         border-right: 0;
       }
@@ -65,3 +68,6 @@
     }
   }
 }
+:root {
+  --choice-item-background-hover: var(--color-surface-secondary);
+}

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

@@ -719,9 +719,6 @@
   width: 1em;
   height: 1em;
   vertical-align: -0.125em;
-}
-.datepicker {
-
 }
 .react-datepicker {
   background: var(--date-picker-container-background);
@@ -868,9 +865,37 @@
   &__input {
     &-time-container {
       margin: 0;
+      padding: 4px;
+      float: none;
       border-top: 1px solid var(--date-picker-container-border-color);
       text-align: center;
-      padding: 12px;
+      ^^&-time {
+        &__caption {
+          display: none;
+        }
+        &__input-container {
+          display: block;
+          ^^^^&-time__input {
+            margin: 0;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+.datepicker {
+  border-radius: var(--date-picker-day-border-radius);
+  ^^^^^& .input {
+    border-radius: var(--date-picker-day-border-radius);
+  }
+}
+.datepicker {
+  &&_type_multiple-months {
+    & .react-datepicker {
+      &__month-container {
+        border: solid 2px red;
+      }
     }
   }
 }
@@ -879,6 +904,7 @@
   --date-picker-day-height: 40px;
   --date-picker-day-padding: 8px 0;
   --date-picker-day-border-radius: 6px;
+  --date-picker-input-border-radius: 6px;
   --date-picker-day-color-hover: var(--color-surface-text-secondary);
   --date-picker-day-background-hover: var(--color-accent-tertiary);
   --date-picker-month-border-radius: 12px;

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

@@ -0,0 +1,13 @@
+.empty {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 32px;
+  &__message {
+    text-align: center;
+  }
+  &__button {
+    margin-top: auto;
+  }
+}

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

@@ -7,18 +7,26 @@
   box-shadow: none;
   outline: 0;
   position: relative;
+  caret-color: var(--input-caret-color);
   &:focus {
     outline: none;
   }
+  &:hover {
+    border: solid 1px var(--input-state-hover-border);
+    background: var(--input-state-hover-background);
+  }
   &&_state {
     &_success {
-      border: solid 1px var(--color-success-border-primary);
+      border: solid 1px var(--input-state-success-border);
+      background: var(--input-state-success-background);
     }
     &_error {
-      border: solid 1px var(--color-error-border-primary);
+      border: solid 1px var(--input-state-error-border);
+      background: var(--input-state-error-background);
     }
     &_focus {
-      background: var(--color-surface-primary);
+      border: solid 1px var(--input-state-focus-border);
+      background: var(--input-state-focus-background);
     }
   }
 }
@@ -38,7 +46,7 @@
 }
 .input {
   &&_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xs, s, m, l, xl, xxl, normal, tiny, compact, large {
       &_$(size) {
         padding: var(--input-size-$(size)-padding);
       }

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

@@ -0,0 +1,68 @@
+.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/Segmented/Segmented.css

@@ -93,3 +93,19 @@
     }
   }
 }
+.segmented {
+  &_width {
+    &_fill {
+      width: 100%;
+      ^^&__wrapper {
+        flex: 1;
+        &-inner {
+          flex: 1;
+          ^^^^&__item {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 9.4.1
+ * Swiper 10.0.4
  * 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: June 13, 2023
+ * Released on: July 8, 2023
  */
 
 /* FONT_START */
@@ -29,12 +29,20 @@
   */
 }
 
-.swiper,
-swiper-container {
+:host {
+  position: relative;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 1;
+}
+
+.swiper {
   margin-left: auto;
   margin-right: auto;
   position: relative;
   overflow: hidden;
+  overflow: clip;
   list-style: none;
   padding: 0;
   /* Fix of Webkit flickering */
@@ -58,6 +66,7 @@ swiper-container {
 }
 
 .swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
 .swiper-wrapper {
   transform: translate3d(0px, 0, 0);
 }
@@ -70,8 +79,7 @@ swiper-container {
   touch-action: pan-x;
 }
 
-.swiper-slide,
-swiper-slide {
+.swiper-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
@@ -117,49 +125,10 @@ swiper-slide {
 }
 
 .swiper-3d .swiper-slide,
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom,
 .swiper-3d .swiper-cube-shadow {
   transform-style: preserve-3d;
 }
 
-.swiper-3d .swiper-slide-shadow,
-.swiper-3d .swiper-slide-shadow-left,
-.swiper-3d .swiper-slide-shadow-right,
-.swiper-3d .swiper-slide-shadow-top,
-.swiper-3d .swiper-slide-shadow-bottom {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.swiper-3d .swiper-slide-shadow {
-  background: rgba(0, 0, 0, 0.15);
-}
-
-.swiper-3d .swiper-slide-shadow-left {
-  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-right {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-top {
-  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
-.swiper-3d .swiper-slide-shadow-bottom {
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
-}
-
 /* CSS Mode */
 
 .swiper-css-mode > .swiper-wrapper {
@@ -178,11 +147,11 @@ swiper-slide {
   scroll-snap-align: start start;
 }
 
-.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
   scroll-snap-type: x mandatory;
 }
 
-.swiper-vertical.swiper-css-mode > .swiper-wrapper {
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
   scroll-snap-type: y mandatory;
 }
 
@@ -194,37 +163,80 @@ swiper-slide {
   scroll-snap-align: none;
 }
 
-.swiper-centered > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
   content: '';
   flex-shrink: 0;
   order: 9999;
 }
 
-.swiper-centered > .swiper-wrapper > .swiper-slide {
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
   scroll-snap-stop: always;
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
   height: 100%;
   min-height: 1px;
   width: var(--swiper-centered-offset-after);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
   margin-block-start: var(--swiper-centered-offset-before);
 }
 
-.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
   width: 100%;
   min-width: 1px;
   height: var(--swiper-centered-offset-after);
 }
 
+/* Slide styles start */
+
+/* 3D Shadows */
+
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top,
+.swiper-3d .swiper-slide-shadow-bottom {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.swiper-3d .swiper-slide-shadow {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-right {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-top {
+  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+.swiper-3d .swiper-slide-shadow-bottom {
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
 .swiper-lazy-preloader {
   width: 42px;
   height: 42px;
@@ -242,7 +254,6 @@ swiper-slide {
 }
 
 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
-swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
   animation: swiper-preloader-spin 1s infinite linear;
 }
@@ -264,6 +275,8 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   }
 }
 
+/* Slide styles end */
+
 .swiper-virtual .swiper-slide {
   -webkit-backface-visibility: hidden;
   transform: translateZ(0);
@@ -330,6 +343,37 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   display: none !important;
 }
 
+.swiper-button-prev svg,
+.swiper-button-next svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+}
+
+.swiper-rtl .swiper-button-prev svg,
+.swiper-rtl .swiper-button-next svg {
+  transform: rotate(180deg);
+}
+
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+  left: var(--swiper-navigation-sides-offset, 10px);
+  right: auto;
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+  right: var(--swiper-navigation-sides-offset, 10px);
+  left: auto;
+}
+
+.swiper-button-lock {
+  display: none;
+}
+
+/* Navigation font start */
+
 .swiper-button-prev:after,
 .swiper-button-next:after {
   font-family: swiper-icons;
@@ -340,12 +384,6 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   line-height: 1;
 }
 
-.swiper-button-prev,
-.swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-sides-offset, 10px);
-  right: auto;
-}
-
 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   content: 'prev';
@@ -362,9 +400,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
   content: 'next';
 }
 
-.swiper-button-lock {
-  display: none;
-}
+/* Navigation font end */
 
 :root {
   /*
@@ -528,8 +564,7 @@ button.swiper-pagination-bullet {
   transition: 200ms transform, 200ms left;
 }
 
-.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
-:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right;
 }
 
@@ -544,7 +579,6 @@ button.swiper-pagination-bullet {
 .swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
   position: absolute;
-  /*ADD_HOST*/
 }
 
 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
@@ -676,8 +710,7 @@ button.swiper-pagination-bullet {
 
 /* a11y */
 
-.swiper .swiper-notification,
-swiper-container .swiper-notification {
+.swiper .swiper-notification {
   position: absolute;
   left: 0;
   top: 0;
@@ -748,21 +781,11 @@ swiper-container .swiper-notification {
 
 .swiper-cube .swiper-slide-active,
 .swiper-cube .swiper-slide-next,
-.swiper-cube .swiper-slide-prev,
-.swiper-cube .swiper-slide-next + .swiper-slide {
+.swiper-cube .swiper-slide-prev {
   pointer-events: auto;
   visibility: visible;
 }
 
-.swiper-cube .swiper-slide-shadow-top,
-.swiper-cube .swiper-slide-shadow-bottom,
-.swiper-cube .swiper-slide-shadow-left,
-.swiper-cube .swiper-slide-shadow-right {
-  z-index: 0;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
-}
-
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
   left: 0;
@@ -784,6 +807,24 @@ swiper-container .swiper-notification {
   filter: blur(50px);
 }
 
+.swiper-cube .swiper-slide-next + .swiper-slide {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* Cube slide shadows start */
+
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+  z-index: 0;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+}
+
+/* Cube slide shadows end */
+
 .swiper-flip {
   overflow: visible;
 }
@@ -804,15 +845,19 @@ swiper-container .swiper-notification {
   pointer-events: auto;
 }
 
-.swiper-flip .swiper-slide-shadow-top,
-.swiper-flip .swiper-slide-shadow-bottom,
-.swiper-flip .swiper-slide-shadow-left,
-.swiper-flip .swiper-slide-shadow-right {
+/* Flip slide shadows start */
+
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
   z-index: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
 }
 
+/* Flip slide shadows end */
+
 .swiper-creative .swiper-slide {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;