@itcase/ui 1.0.11 → 1.0.13

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/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;

package/dist/{defineProperty-72768a50.js → defineProperty-f9e5e1f3.js}

@@ -1,6 +1,14 @@
 'use strict';
 
-var _typeof = require('./typeof-6dd323c6.js');
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
 
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
@@ -69,7 +77,7 @@ function _isNativeReflectConstruct() {
 }
 
 function _possibleConstructorReturn(self, call) {
-  if (call && (_typeof._typeof(call) === "object" || typeof call === "function")) {
+  if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
   } else if (call !== void 0) {
     throw new TypeError("Derived constructors may only return object or undefined");
@@ -99,11 +107,11 @@ function _classCallCheck(instance, Constructor) {
 }
 
 function _toPrimitive(input, hint) {
-  if (_typeof._typeof(input) !== "object" || input === null) return input;
+  if (_typeof(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
   if (prim !== undefined) {
     var res = prim.call(input, hint || "default");
-    if (_typeof._typeof(res) !== "object") return res;
+    if (_typeof(res) !== "object") return res;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return (hint === "string" ? String : Number)(input);
@@ -111,7 +119,7 @@ function _toPrimitive(input, hint) {
 
 function _toPropertyKey(arg) {
   var key = _toPrimitive(arg, "string");
-  return _typeof._typeof(key) === "symbol" ? key : String(key);
+  return _typeof(key) === "symbol" ? key : String(key);
 }
 
 function _defineProperties(target, props) {
@@ -154,4 +162,5 @@ exports._createClass = _createClass;
 exports._createSuper = _createSuper;
 exports._defineProperty = _defineProperty;
 exports._inherits = _inherits;
+exports._typeof = _typeof;
 exports._unsupportedIterableToArray = _unsupportedIterableToArray;

package/dist/hooks/styleAttributes.js

@@ -28,6 +28,10 @@ var styleAttributes = [
 /**
  * Grid
  */
-'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows'];
+'gridTemplateColumns', 'gridArea', 'gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplate', 'gridTemplateAreas', 'gridTemplateRows',
+/**
+* Filter
+*/
+'backdropFilter'];
 
 exports.default = styleAttributes;