@itcase/ui 1.1.9 → 1.1.11

package/dist/css/components/Link/Link.css

@@ -1,9 +1,5 @@
 .link {
   color: inherit;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
 }
 .link {
   &_underline {
@@ -12,3 +8,25 @@
     }
   }
 }
+.link {
+  &_direction {
+    &_horizontal {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+    &_vertical {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    @each $val in row, row-reverse, column, column-reverse {
+      &_$(val) {
+        display: flex;
+        flex-direction: $(val);
+      }
+    }
+  }
+}

package/dist/css/components/Search/Search.css

@@ -91,7 +91,7 @@
 }
 .search-input {
   &_size {
-    @each $size in compact, normal {
+    @each $size in compact, normal, s, l {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);

package/dist/css/components/Search/css/search-input/search-input_size.css

@@ -1,6 +1,6 @@
 .search-input {
   &_size {
-    @each $size in compact, normal {
+    @each $size in compact, normal, s, l {
       &_$(size) {
         padding: var(--search-input-$(size)-padding);
         gap: var(--search-input-$(size)-gap);

package/dist/css/components/Select/Select.css

@@ -1,32 +1,32 @@
 .select {
   width: 100%;
-  position: relative;
   min-width: 240px;
+  position: relative;
 }
 
 @keyframes selectMenuAnimationOpen {
   0% {
-    opacity: 0%;
     visibility: hidden;
     transform: translate3d(0, 8px, 0);
+    opacity: 0%;
   }
   100% {
-    opacity: 100%;
     visibility: visible;
     transform: translate3d(0, 0, 0);
+    opacity: 100%;
   }
 }
 
 @keyframes selectMenuAnimationClose {
   0% {
-    opacity: 100%;
     visibility: visible;
     transform: translate3d(0, 0, 0);
+    opacity: 100%;
   }
   100% {
-    opacity: 0%;
     visibility: hidden;
     transform: translate3d(0, 8px, 0);
+    opacity: 0%;
   }
 }
 
@@ -251,6 +251,7 @@
           right: 8px;
         }
         & .divider {
+          height: 1px;
           position: absolute;
           left: 0;
           bottom: 0;

package/dist/css/components/Select/css/__menu/select__menu.css

@@ -34,6 +34,7 @@
           right: 8px;
         }
         & .divider {
+          height: 1px;
           position: absolute;
           left: 0;
           bottom: 0;

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

@@ -1,5 +1,5 @@
 /**
- * Swiper 11.1.1
+ * Swiper 11.1.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: April 9, 2024
+ * Released on: May 30, 2024
  */
 
 /* FONT_START */

package/dist/{floating-ui.dom-BQ7wiYTi.js → floating-ui.dom-B080ZrCv.js}

@@ -55,9 +55,8 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -241,12 +240,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -435,9 +443,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -674,6 +683,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -707,7 +718,7 @@ async function convertValueToCoords(state, options) {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = function (options) {
+const offset$1 = function (options) {
   if (options === void 0) {
     options = 0;
   }
@@ -869,10 +880,10 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
 }
 
 const topLayerSelectors = [':popover-open', ':modal'];
-function isTopLayer(floating) {
+function isTopLayer(element) {
   return topLayerSelectors.some(selector => {
     try {
-      return floating.matches(selector);
+      return element.matches(selector);
     } catch (e) {
       return false;
     }
@@ -1060,7 +1071,7 @@ function getClippingRect(_ref) {
     rootBoundary,
     strategy
   } = _ref;
-  const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
   const firstClippingAncestor = clippingAncestors[0];
   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -1122,6 +1133,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 
+function isStaticPositioned(element) {
+  return getComputedStyle(element).position === 'static';
+}
+
 function getTrueOffsetParent(element, polyfill) {
   if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
     return null;
@@ -1135,29 +1150,41 @@ function getTrueOffsetParent(element, polyfill) {
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
 function getOffsetParent(element, polyfill) {
-  const window = getWindow(element);
-  if (!isHTMLElement(element) || isTopLayer(element)) {
-    return window;
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
   }
   let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
   }
-  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
-    return window;
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
   }
-  return offsetParent || getContainingBlock(element) || window;
+  return offsetParent || getContainingBlock(element) || win;
 }
 
 const getElementRects = async function (data) {
   const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
   const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
   return {
     reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
     floating: {
       x: 0,
       y: 0,
-      ...(await getDimensionsFn(data.floating))
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
     }
   };
 };
@@ -1227,9 +1254,11 @@ function observeMove(element, onMove) {
           return refresh();
         }
         if (!ratio) {
+          // If the reference is clipped, the ratio is 0. Throttle the refresh
+          // to prevent an infinite loop of updates.
           timeoutId = setTimeout(() => {
             refresh(false, 1e-7);
-          }, 100);
+          }, 1000);
         } else {
           refresh(false, ratio);
         }
@@ -1333,6 +1362,15 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
+ * @see https://floating-ui.com/docs/offset
+ */
+const offset = offset$1;
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the

package/dist/hooks/styleAttributes.interface.d.ts

@@ -1,4 +1,5 @@
-import { overflowPropsType } from '../types';
+import type * as CSS from 'csstype';
+import { overflowPropsType, textAlignPropsType } from '../types';
 export interface TypeStyleAttributes {
     /**
      * Layout
@@ -6,7 +7,7 @@ export interface TypeStyleAttributes {
     alignContent?: string;
     alignItems?: string;
     alignSelf?: string;
-    aspectRatio?: string;
+    aspectRatio?: CSS.Property.AspectRatio;
     border?: string;
     borderBottomWidth?: string;
     borderEndWidth?: string;
@@ -17,13 +18,13 @@ export interface TypeStyleAttributes {
     bottom?: string;
     columnGap?: string;
     columnWidth?: string;
-    display?: string;
+    display?: CSS.Property.Display;
     end?: string;
-    flex?: string;
-    flexBasis?: string;
-    flexDirection?: string;
-    flexShrink?: string;
-    flexWrap?: string;
+    flex?: CSS.Property.Flex;
+    flexBasis?: CSS.Property.FlexBasis;
+    flexDirection?: CSS.Property.FlexDirection;
+    flexShrink?: CSS.Property.FlexShrink;
+    flexWrap?: CSS.Property.FlexWrap;
     gap?: string;
     height?: string;
     left?: string;
@@ -40,7 +41,7 @@ export interface TypeStyleAttributes {
     maxWidth?: string;
     minHeight?: string;
     minWidth?: string;
-    order?: string;
+    order?: CSS.Property.Order;
     overflow?: overflowPropsType;
     padding?: string;
     paddingBottom?: string;
@@ -68,7 +69,7 @@ export interface TypeStyleAttributes {
     /**
      * Transform
      */
-    transform?: string;
+    transform?: CSS.Property.Transform;
     /**
      * View
      */
@@ -99,26 +100,26 @@ export interface TypeStyleAttributes {
     color?: string;
     fontFamily?: string;
     fontSize?: string;
-    fontStyle?: string;
+    fontStyle?: CSS.Property.FontStyle;
     fontVariant?: string;
-    fontWeight?: string;
+    fontWeight?: CSS.Property.FontWeight;
     letterSpacing?: string;
     lineHeight?: string;
-    textAlign?: string;
+    textAlign?: textAlignPropsType;
     textDecorationColor?: string;
     textDecorationLine?: string;
     textDecorationStyle?: string;
     textShadowColor?: string;
     textShadowOffset?: string;
     textShadowRadius?: string;
-    textTransform?: string;
-    verticalAlign?: string;
-    writingMode?: string;
-    whiteSpace?: string;
+    textTransform?: CSS.Property.TextTransform;
+    verticalAlign?: CSS.Property.VerticalAlign;
+    writingMode?: CSS.Property.WritingMode;
+    whiteSpace?: CSS.Property.WhiteSpace;
     /**
      * Image
      */
-    objectFit?: string;
+    objectFit?: CSS.Property.ObjectFit;
     overlayColor?: string;
     resizeMode?: string;
     tintColor?: string;
@@ -142,3 +143,19 @@ export interface TypeStyleAttributes {
      */
     backdropFilter?: string;
 }
+type WrappedInterface<T> = {
+    [P in keyof T as `${string & P}Wrapper`]: T[P];
+};
+type LabelInterface<T> = {
+    [P in keyof T as `${string & P}Label`]: T[P];
+};
+type ImageInterface<T> = {
+    [P in keyof T as `${string & P}Image`]: T[P];
+};
+export interface TypeStyleWrapperAttributes extends WrappedInterface<TypeStyleAttributes> {
+}
+export interface TypeStyleLabelAttributes extends LabelInterface<TypeStyleAttributes> {
+}
+export interface TypeStyleImageAttributes extends ImageInterface<TypeStyleAttributes> {
+}
+export {};

package/dist/{jsx-runtime-ClDdVO4Q.js → jsx-runtime-C2uP7l8s.js}

@@ -1034,11 +1034,6 @@ function requireReactJsxRuntime_development () {
 
 	function getSourceInfoErrorAddendum(source) {
 	  {
-	    if (source !== undefined) {
-	      var fileName = source.fileName.replace(/^.*[\\\/]/, '');
-	      var lineNumber = source.lineNumber;
-	      return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
-	    }
 
 	    return '';
 	  }
@@ -1239,6 +1234,7 @@ function requireReactJsxRuntime_development () {
 	  }
 	}
 
+	var didWarnAboutKeySpread = {};
 	function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
 	  {
 	    var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
@@ -1251,7 +1247,7 @@ function requireReactJsxRuntime_development () {
 	        info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
 	      }
 
-	      var sourceInfo = getSourceInfoErrorAddendum(source);
+	      var sourceInfo = getSourceInfoErrorAddendum();
 
 	      if (sourceInfo) {
 	        info += sourceInfo;
@@ -1309,6 +1305,24 @@ function requireReactJsxRuntime_development () {
 	      }
 	    }
 
+	    {
+	      if (hasOwnProperty.call(props, 'key')) {
+	        var componentName = getComponentNameFromType(type);
+	        var keys = Object.keys(props).filter(function (k) {
+	          return k !== 'key';
+	        });
+	        var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
+
+	        if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+	          var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+
+	          error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
+
+	          didWarnAboutKeySpread[componentName + beforeExample] = true;
+	        }
+	      }
+	    }
+
 	    if (type === REACT_FRAGMENT_TYPE) {
 	      validateFragmentProps(element);
 	    } else {

package/dist/stories/Button.stories.js

@@ -8,7 +8,6 @@ import {
   shapeProps,
   sizeProps,
   sizePXProps,
-  strokeColorProps,
   textColorHoverProps,
   textColorProps,
   textSizeProps,
@@ -160,11 +159,6 @@ export default {
       control: 'select',
       if: { arg: 'iconSrc', neq: null },
     },
-    iconStroke: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'iconSrc', neq: null },
-    },
 
     iconAfterSrc: {
       control: 'radio',
@@ -175,11 +169,6 @@ export default {
       control: 'select',
       if: { arg: 'iconAfterSrc', neq: null },
     },
-    iconAfterStroke: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-    },
 
     iconBeforeSrc: {
       control: 'radio',
@@ -190,11 +179,6 @@ export default {
       control: 'select',
       if: { arg: 'iconBeforeSrc', neq: null },
     },
-    iconBeforeStroke: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-    },
     Badge: {
       control: 'select',
       options: [null, <Badge appearance="secondary" size="xs" textSize="xxs" value={3} />],

package/dist/stories/Cell.stories.js

@@ -5,7 +5,6 @@ import {
   iconFillSizeProps,
   shapeProps,
   sizeProps,
-  strokeColorProps,
   textColorProps,
   textSizeProps,
   textWeightProps,
@@ -141,11 +140,6 @@ export default {
       control: 'select',
       if: { arg: 'titleIconSrc' },
     },
-    titleIconStroke: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'titleIconSrc' },
-    },
     titleIconShape: {
       options: shapeProps,
       control: 'inline-radio',
@@ -226,11 +220,6 @@ export default {
       control: 'select',
       if: { arg: 'valueIconSrc' },
     },
-    valueIconStroke: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'valueIconSrc' },
-    },
     valueIconShape: {
       options: shapeProps,
       control: 'inline-radio',

package/dist/stories/DatePicker.stories.js

@@ -5,7 +5,6 @@ import { DatePickerInput } from '@itcase/ui/components/DatePicker'
 import {
   fillProps,
   iconSizeProps,
-  strokeColorProps,
   textColorHoverProps,
   textColorProps,
   textSizeProps,
@@ -43,11 +42,6 @@ export default {
       control: 'select',
       if: { arg: 'clearIconSrc', neq: null },
     },
-    clearIconItemFillHover: {
-      options: strokeColorProps,
-      control: 'select',
-      if: { arg: 'clearIconSrc', neq: null },
-    },
     clearLabelTextSize: {
       options: textSizeProps,
       control: 'select',

package/dist/stories/Icon.stories.js

@@ -9,7 +9,6 @@ import {
   fillProps,
   shapeProps,
   sizePXProps,
-  strokeColorProps,
 } from '@itcase/ui/constants'
 
 import iconAppearance from 'src/components/Icon/appearance.json'
@@ -37,17 +36,11 @@ export default {
         'sizeDesktop',
         'sizeMobile',
         'sizeTablet',
-        'iconStrokeDesktop',
-        'iconStrokeMobile',
-        'iconStrokeTablet',
         'height',
         'href',
         'link',
         'linkRel',
         'linkTarget',
-        'strokeDesktop',
-        'strokeMobile',
-        'strokeTablet',
         'width',
       ],
     },
@@ -78,14 +71,6 @@ export default {
       options: sizePXProps,
       control: 'select',
     },
-    iconStroke: {
-      options: strokeColorProps,
-      control: 'select',
-    },
-    iconStrokeHover: {
-      options: strokeColorProps,
-      control: 'select',
-    },
     borderType: {
       options: borderTypeProps,
       control: 'inline-radio',
@@ -126,7 +111,7 @@ export default {
 
 export const Default = {
   args: {
-    iconStroke: 'surfaceItemPrimary',
+    iconFill: 'surfaceItemPrimary',
     imageSrc: 'assets/24/Bell.svg',
     fill: 'surfaceSecondary',
     fillHover: 'surfaceSecondaryHover',
@@ -143,7 +128,7 @@ export const WithBadge = {
     fillHover: 'surfaceSecondaryHover',
     fillSize: '40',
     iconSize: '24',
-    iconStroke: 'surfaceItemPrimary',
+    iconFill: 'surfaceItemPrimary',
     shape: 'circular',
     Badge: <Badge appearance="accent" position="absolute" size="xs" textSize="xxs" value={3} />,
   },

package/dist/stories/Search-input.stories.js

@@ -70,11 +70,6 @@ export default {
       control: 'select',
       if: { arg: 'iconAfterSrc', neq: null },
     },
-    iconAfterStroke: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'iconAfterSrc', neq: null },
-    },
     iconBefore: {
       if: { arg: 'advancedProps' },
     },
@@ -92,11 +87,6 @@ export default {
       control: 'select',
       if: { arg: 'iconBeforeSrc', neq: null },
     },
-    iconBeforeStroke: {
-      options: fillProps,
-      control: 'select',
-      if: { arg: 'iconBeforeSrc', neq: null },
-    },
     iconClear: {
       if: { arg: 'advancedProps' },
     },

package/dist/stories/Select.stories.js

@@ -10,7 +10,6 @@ import {
   textColorProps,
   textSizeProps,
   sizeProps,
-  strokeColorProps,
 } from '@itcase/ui/constants'
 
 import { defaultSelectProps } from 'src/config/forms'
@@ -85,11 +84,6 @@ export default {
       options: fillProps,
       control: 'select',
     },
-    clearIconStroke: {
-      if: { arg: 'isClearable', eq: true },
-      options: strokeColorProps,
-      control: 'select',
-    },
     isClearable: {
       control: 'boolean',
     },
@@ -122,10 +116,6 @@ export default {
       options: fillProps,
       control: 'select',
     },
-    dropdownIconStroke: {
-      options: strokeColorProps,
-      control: 'select',
-    },
     placeholder: {
       if: { arg: 'hideValueContainer', neq: true },
     },

package/dist/types/componentProps/alignment.d.ts

@@ -1 +1 @@
-export type alignmentProps = 'topLeft' | 'topCenter' | 'topRight' | 'leftCenter' | 'rightCenter' | 'bottomRight' | 'bottomCenter' | 'bottomLeft';
+export type alignmentPropsType = 'topLeft' | 'topCenter' | 'topRight' | 'leftCenter' | 'rightCenter' | 'bottomRight' | 'bottomCenter' | 'bottomLeft';

package/dist/types/componentProps/appearanceKeys.d.ts

@@ -1 +1 @@
-export type appearanceKeysDefaultType = 'dev' | 'accent' | 'primary' | 'secondary' | 'surfacePrimary' | 'surfaceSecondary' | 'surfaceTertiary' | 'surfaceQuaternary';
+export type appearanceKeysDefaultType = 'any' | 'dev' | 'surfacePrimary' | 'surfaceSecondary' | 'surfaceTertiary' | 'surfaceQuaternary' | 'surfaceDisabled' | 'gradientPrimary' | 'accent' | 'primary' | 'secondary' | 'disabled' | 'success' | 'warning' | 'error' | 'fail';