@itcase/ui 1.3.12 → 1.3.13

package/dist/types/components/Caption/Caption.interface.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
+import { tCaptionPositionProps, tFillGradientProps, tFillProps } from 'types';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { captionPositionPropsType, tFillGradientProps, tFillProps } from '../../types';
 export interface iCaptionThemeColor {
     fill: tFillProps;
     fillDesktop: tFillProps;
@@ -10,10 +10,10 @@ export interface iCaptionThemeColor {
     fillGradientTablet: tFillGradientProps;
     fillMobile: tFillProps;
     fillTablet: tFillProps;
-    position: captionPositionPropsType;
-    positionDesktop: captionPositionPropsType;
-    positionMobile: captionPositionPropsType;
-    positionTablet: captionPositionPropsType;
+    position: tCaptionPositionProps;
+    positionDesktop: tCaptionPositionProps;
+    positionMobile: tCaptionPositionProps;
+    positionTablet: tCaptionPositionProps;
 }
 export interface iCaptionProps extends iCaptionThemeColor, Omit<iStyleAttributes, 'position'> {
     [key: number | string | symbol]: any;

package/dist/types/components/Card/Card.interface.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
+import { tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from 'types';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from '../../types';
 export interface iCardProps extends iStyleAttributes {
     [key: number | string | symbol]: any;
     children?: ReactNode;

package/dist/types/components/Cell/Cell.interface.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactNode } from 'react';
+import { tDirectionProps, tFillProps, tIconFillSizeProps, tItemColorProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tTextWrapProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { iconFillSizePropsType, tDirectionProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tTextWrapProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 export interface iCellThemeColor {
 }
 type tAppearanceKeys = tAppearanceKeysDefault & {};
@@ -29,7 +29,7 @@ export interface iCellProps extends iCellThemeColor, iStyleAttributes {
     titleIcon?: ElementType;
     titleIconFill?: tFillProps;
     titleIconFillHover?: tItemColorProps;
-    titleIconFillSize?: iconFillSizePropsType;
+    titleIconFillSize?: tIconFillSizeProps;
     titleIconItemFill?: tItemColorProps;
     titleIconShape?: tShapeProps;
     titleIconSrc?: string;
@@ -48,7 +48,7 @@ export interface iCellProps extends iCellThemeColor, iStyleAttributes {
     valueIcon?: ElementType;
     valueIconFill?: tFillProps;
     valueIconFillHover?: tItemColorProps;
-    valueIconFillSize?: iconFillSizePropsType;
+    valueIconFillSize?: tIconFillSizeProps;
     valueIconItemFill?: tItemColorProps;
     valueIconShape?: tShapeProps;
     valueIconSrc?: string;

package/dist/types/components/Checkbox/Checkbox.interface.d.ts

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
+import type { tBorderColorProps, tBorderWidthProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import type { tBorderColorProps, tBorderWidthProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from '../../types';
-import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 type tCheckboxState = {
     [key in tAppearanceKeysDefault]?: iCheckboxThemeColor;
 };

package/dist/types/components/Chips/Chips.interface.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactNode } from 'react';
+import { tAlignDirectionProps, tAlignProps, tBorderColorProps, tBorderTypeProps, tFillHoverProps, tFillProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { borderTypePropsType, tAlignDirectionProps, tAlignProps, tBorderColorProps, tFillHoverProps, tFillProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 interface iChipsThemeColor {
     [key: number | string | symbol]: any;
     align?: tAlignProps;
@@ -10,10 +10,10 @@ interface iChipsThemeColor {
     borderColorDesktop?: tBorderColorProps;
     borderColorMobile?: tBorderColorProps;
     borderColorTablet?: tBorderColorProps;
-    borderType?: borderTypePropsType;
-    borderTypeDesktop?: borderTypePropsType;
-    borderTypeMobile?: borderTypePropsType;
-    borderTypeTablet?: borderTypePropsType;
+    borderType?: tBorderTypeProps;
+    borderTypeDesktop?: tBorderTypeProps;
+    borderTypeMobile?: tBorderTypeProps;
+    borderTypeTablet?: tBorderTypeProps;
     fill?: tFillProps;
     fillActive?: tFillProps;
     fillHover?: tFillHoverProps;

package/dist/types/components/Chips/stories/args.d.ts

@@ -0,0 +1,45 @@
+export declare const argTypes: {
+    advancedProps: {
+        control: string;
+    };
+    border: {
+        control: string;
+        options: readonly [undefined, "accentBorderPrimary", "accentBorderSecondary", "accentBorderTertiary", "accentBorderQuaternary", "accentBorderDisabled", "primaryBorderPrimary", "primaryBorderSecondary", "primaryBorderTertiary", "primaryBorderQuaternary", "primaryBorderDisabled", "secondaryBorderPrimary", "secondaryBorderSecondary", "secondaryBorderTertiary", "secondaryBorderQuaternary", "secondaryBorderDisabled", "tertiaryBorderPrimary", "tertiaryBorderSecondary", "tertiaryBorderTertiary", "tertiaryBorderQuaternary", "tertiaryBorderDisabled", "surfaceBorderPrimary", "surfaceBorderSecondary", "surfaceBorderTertiary", "surfaceBorderQuaternary", "surfaceBorderDisabled", "surfaceBorderInverse", "errorBorderPrimary", "errorBorderSecondary", "errorBorderDisabled", "successBorderPrimary", "successBorderSecondary", "successBorderDisabled"];
+    };
+    borderType: {
+        control: string;
+        options: readonly [undefined, "outline", "solid", "none"];
+    };
+    className: {
+        if: {
+            arg: string;
+        };
+    };
+    fill: {
+        control: string;
+        options: readonly [undefined, "accentPrimary", "accentSecondary", "accentTertiary", "primaryPrimary", "primarySecondary", "primaryTertiary", "secondaryPrimary", "secondarySecondary", "secondaryTertiary", "tertiaryPrimary", "tertiarySecondary", "tertiaryTertiary", "surfaceAccent", "surfaceItemPrimary", "surfacePrimary", "surfaceQuaternary", "surfaceQuinary", "surfaceSecondary", "surfaceTertiary", "errorPrimary", "errorSecondary", "successPrimary", "successSecondary", "gradientPrimary"];
+    };
+    labelTextSize: {
+        control: string;
+        options: readonly [undefined, "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+    };
+    shape: {
+        control: string;
+        options: readonly [undefined, "geometric", "rounded", "circular"];
+    };
+    size: {
+        control: string;
+        options: readonly [undefined, "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+    };
+    type: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    onClick: {
+        if: {
+            arg: string;
+        };
+    };
+};

package/dist/types/components/Choice/Choice.interface.d.ts

@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
+import type { tBorderColorProps, tBorderTypeProps, tBorderWidthProps, tFillHoverProps, tFillProps, tIconSizeProps, tItemColorProps, tShapeProps, tSizeOptionProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWrapProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import type { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import type { borderTypePropsType, iconSizePropsType, sizeOptionPropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, wrapPropsType } from '../../types';
-import type { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 interface iChoiceThemeColor {
     [key: number | string | symbol]: any;
     activeIconItemFill?: tItemColorProps;
     borderColor?: tBorderColorProps;
-    borderType?: borderTypePropsType;
+    borderType?: tBorderTypeProps;
     borderWidth?: tBorderWidthProps;
     fill?: tFillProps;
     fillActive?: tFillProps;
@@ -15,7 +15,7 @@ interface iChoiceThemeColor {
     fillHover?: tFillHoverProps;
     iconFillDisabled?: tItemColorProps;
     iconItemFill?: tItemColorProps;
-    iconSize?: iconSizePropsType;
+    iconSize?: tIconSizeProps;
     labelTextActiveColor?: tTextColorProps;
     labelTextActiveColorDisabled?: tTextColorProps;
     labelTextColor?: tTextColorProps;
@@ -23,7 +23,7 @@ interface iChoiceThemeColor {
     labelTextSize?: tTextSizeProps;
     labelTextWeight?: tTextWeightProps;
     shape?: tShapeProps;
-    wrap?: wrapPropsType;
+    wrap?: tWrapProps;
 }
 type tChoiceAppearance = {
     [key in tAppearanceKeysDefault]?: iChoiceThemeColor;
@@ -52,7 +52,7 @@ interface iChoiceProps extends iChoiceThemeColor, iStyleAttributes {
         label: ReactNode;
         value: string;
     }[];
-    size?: sizeOptionPropsType;
+    size?: tSizeOptionProps;
     type?: string;
     isCheckbox?: boolean;
     isDisabled?: boolean;

package/dist/types/components/Code/Code.interface.d.ts

@@ -1,8 +1,8 @@
 import { FocusEvent, ReactNode } from 'react';
 import { AllowedInputTypes } from 'react-otp-input';
+import { tBorderColorHoverProps, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { borderColorHoverPropsType, tBorderColorProps, tBorderWidthProps, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps, tTextWeightProps, tWidthProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 export interface iCodeThemeColor {
     [key: number | string | symbol]: any;
     borderColor?: tBorderColorProps;
@@ -30,7 +30,7 @@ export interface iCodeProps extends iCodeThemeColor, iStyleAttributes {
     gap?: string;
     inputAutoFocus?: boolean;
     inputBorderColor?: tBorderColorProps;
-    inputBorderColorHover?: borderColorHoverPropsType;
+    inputBorderColorHover?: tBorderColorHoverProps;
     inputBorderFocusColor?: tBorderColorProps;
     inputBorderWidth?: tBorderWidthProps;
     inputCaretColor?: tItemColorProps;

package/dist/types/components/CookiesWarning/CookiesWarning.interface.d.ts

@@ -1,4 +1,4 @@
-import { tFillHoverProps, tFillProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from '../../types';
+import { tFillHoverProps, tFillProps, tShapeProps, tSizeProps, tTextColorProps, tTextSizeProps } from 'types';
 export interface iCookiesWarningProps {
     [key: number | string | symbol]: any;
     buttonFill?: tFillProps;

package/dist/types/components/DadataHintField/DadataHintField.interface.d.ts

@@ -1,6 +1,5 @@
 import { HTMLProps } from 'react';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import '../../types';
 export interface iDadataHintFieldProps extends iStyleAttributes {
     delay?: number;
     input?: any;

package/dist/types/components/DatePicker/DatePicker.interface.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DatePickerProps } from 'react-datepicker';
+import { tFillHoverProps, tFillProps, tIconFillSizeProps, tIconSizeProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from 'types';
 import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
-import { iconFillSizePropsType, iconSizePropsType, tFillHoverProps, tFillProps, tItemColorProps, tShapeProps, tSizeProps, tTextColorHoverProps, tTextColorProps, tTextSizeProps, tTextWeightProps } from '../../types';
 import { iInputProps } from '../Input/Input.interface';
 interface iDatePickerProps extends DatePickerProps {
     customTimeInput?: ReactNode;
@@ -12,19 +12,19 @@ interface iDatePickerProps extends DatePickerProps {
     disablePastDays?: boolean;
     iconFill?: tFillProps;
     iconFillHover?: tFillHoverProps;
-    iconFillSize?: iconFillSizePropsType;
+    iconFillSize?: tIconFillSizeProps;
     iconItemFill?: tItemColorProps;
     iconLeft?: any;
     iconRight?: any;
     iconShape?: tShapeProps;
-    iconSize?: iconSizePropsType;
+    iconSize?: tIconSizeProps;
     inputIcon?: any;
     inputIconFill?: tFillProps;
     inputIconFillHover?: tFillHoverProps;
-    inputIconFillSize?: iconFillSizePropsType;
+    inputIconFillSize?: tIconFillSizeProps;
     inputIconItemFill?: tItemColorProps;
     inputIconShape?: tShapeProps;
-    inputIconSize?: iconSizePropsType;
+    inputIconSize?: tIconSizeProps;
     inputIconSrc?: string;
     monthsShown?: number;
     monthTextColor?: tTextColorProps;
@@ -54,11 +54,11 @@ export interface iDatePickerInputProps extends iDatePickerProps {
     clearIcon?: any;
     clearIconFill?: tFillProps;
     clearIconFillHover?: tFillHoverProps;
-    clearIconFillSize?: iconFillSizePropsType;
+    clearIconFillSize?: tIconFillSizeProps;
     clearIconItemFill?: tItemColorProps;
     clearIconItemFillHover?: tItemColorProps;
     clearIconShape?: tShapeProps;
-    clearIconSize?: iconSizePropsType;
+    clearIconSize?: tIconSizeProps;
     clearIconSrc?: string;
     clearLabel?: string;
     clearLabelTextColor?: tTextColorProps;
@@ -75,11 +75,11 @@ export interface iDatePickerCustomInput {
     clearIcon?: any;
     clearIconFill?: tFillProps;
     clearIconFillHover?: tFillHoverProps;
-    clearIconFillSize?: iconFillSizePropsType;
+    clearIconFillSize?: tIconFillSizeProps;
     clearIconItemFill?: tItemColorProps;
     clearIconItemFillHover?: tItemColorProps;
     clearIconShape?: tShapeProps;
-    clearIconSize?: iconSizePropsType;
+    clearIconSize?: tIconSizeProps;
     clearIconSrc?: string;
     clearLabel?: string;
     clearLabelTextColor?: tTextColorProps;
@@ -89,10 +89,10 @@ export interface iDatePickerCustomInput {
     inputIcon?: any;
     inputIconFill?: tFillProps;
     inputIconFillHover?: tFillHoverProps;
-    inputIconFillSize?: iconFillSizePropsType;
+    inputIconFillSize?: tIconFillSizeProps;
     inputIconItemFill?: tItemColorProps;
     inputIconShape?: tShapeProps;
-    inputIconSize?: iconSizePropsType;
+    inputIconSize?: tIconSizeProps;
     inputIconSrc?: string;
     inputProps?: iInputProps;
     labelTextSize?: tTextSizeProps;
@@ -103,10 +103,10 @@ export interface iDatePickerInputIcon {
     inputIcon?: any;
     inputIconFill?: tFillProps;
     inputIconFillHover?: tFillHoverProps;
-    inputIconFillSize?: iconFillSizePropsType;
+    inputIconFillSize?: tIconFillSizeProps;
     inputIconItemFill?: tItemColorProps;
     inputIconShape?: tShapeProps;
-    inputIconSize?: iconSizePropsType;
+    inputIconSize?: tIconSizeProps;
     inputIconSrc?: string;
     onClick?: () => void;
 }

package/dist/types/components/Divider/Divider.interface.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
+import { tDirectionProps, tFillHoverProps, tFillProps, tSizeProps, tWidthProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { tDirectionProps, tFillHoverProps, tFillProps, tSizeProps, tWidthProps } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 export interface iDividerThemeColor {
     [key: number | string | symbol]: any;
     className?: string;

package/dist/types/components/Dot/Dot.interface.d.ts

@@ -1,15 +1,15 @@
 import { CSSProperties, ReactNode } from 'react';
+import { tBorderColorProps, tBorderTypeProps, tFillProps, tShapeProps, tSizeProps } from 'types';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { borderTypePropsType, tBorderColorProps, tFillProps, tShapeProps, tSizeProps } from '../../types';
 export interface iDotThemeColor {
     borderColor?: tBorderColorProps;
     borderColorDesktop?: tBorderColorProps;
     borderColorMobile?: tBorderColorProps;
     borderColorTablet?: tBorderColorProps;
-    borderType?: borderTypePropsType;
-    borderTypeDesktop?: borderTypePropsType;
-    borderTypeMobile?: borderTypePropsType;
-    borderTypeTablet?: borderTypePropsType;
+    borderType?: tBorderTypeProps;
+    borderTypeDesktop?: tBorderTypeProps;
+    borderTypeMobile?: tBorderTypeProps;
+    borderTypeTablet?: tBorderTypeProps;
     fill?: tFillProps;
     fillDesktop?: tFillProps;
     fillMobile?: tFillProps;

package/dist/types/components/Dropdown/Dropdown.interface.d.ts

@@ -1,17 +1,17 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { tAlignDirectionProps, tAlignmentProps, tAlignProps, tDirectionProps, tElevationProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tTypeProps, tUnderlineProps, tWidthProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { alignmentPropsType, elevationPropsType, tAlignDirectionProps, tAlignProps, tDirectionProps, tFillHoverProps, tFillProps, tJustifyContentProps, tShapeProps, tSizeProps, tTextAlignProps, tTextColorActiveProps, tTextColorHoverProps, tTextColorProps, tTextGradientProps, tTextSizeProps, tTextStyleProps, tTextWeightProps, tTextWrapProps, tUnderlineProps, tWidthProps, typePropsType } from '../../types';
-import { tAppearanceKeysDefault } from '../../types/componentProps/appearanceKeys';
 export interface iDropdownProps extends iStyleAttributes {
     [key: number | string | symbol]: any;
     after?: ReactNode;
-    alignment?: alignmentPropsType;
+    alignment?: tAlignmentProps;
     animationClose?: string;
     animationOpen?: string;
     before?: ReactNode;
     children?: ReactNode;
     className?: string;
-    elevation?: elevationPropsType;
+    elevation?: tElevationProps;
     fill?: tFillProps;
     fillHover?: tFillHoverProps;
     shape?: tShapeProps;
@@ -79,7 +79,7 @@ export interface iDropdownItemProps extends iDropdownItemThemeColor, iStyleAttri
     showDivider?: boolean;
     style?: CSSProperties;
     target?: string;
-    type?: typePropsType;
+    type?: tTypeProps;
     underline?: tUnderlineProps;
     isActive?: boolean;
     isHover?: boolean;

package/dist/types/components/Flex/Flex.interface.d.ts

@@ -1,89 +1,76 @@
 import { CSSProperties, ElementType, ReactNode } from 'react';
+import { tAlignDirectionProps, tBorderColorProps, tBorderTypeProps, tDirectionProps, tFillHoverProps, tFillProps, tFlexAlignProps, tFlexJustifyContentProps, tFlexWrapProps, tHorizontalResizeModeProps, tPositionProps, tShapeProps, tWidthProps } from 'types';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
-import { borderTypePropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, horizontalResizeModePropsType, positionPropsType, tAlignDirectionProps, tBorderColorProps, tDirectionProps, tFillHoverProps, tFillProps, tShapeProps, tWidthProps } from '../../types';
 export interface iFlexProps extends iStyleAttributes {
+    id?: number | string;
     [key: number | string | symbol]: any;
+    alignContent?: tFlexJustifyContentProps;
+    alignContentDesktop?: tFlexJustifyContentProps;
+    alignContentMobile?: tFlexJustifyContentProps;
+    alignContentTablet?: tFlexJustifyContentProps;
+    alignItems?: tFlexAlignProps;
+    alignItemsDesktop?: tFlexAlignProps;
+    alignItemsMobile?: tFlexAlignProps;
+    alignItemsTablet?: tFlexAlignProps;
+    border?: tBorderColorProps;
+    borderType?: tBorderTypeProps;
     children?: ReactNode;
     className?: string;
-    id?: number | string;
-    style?: CSSProperties;
-    tag?: ElementType;
-    type?: string;
-    onClick?: () => void;
-    alignContent?: flexJustifyContentPropsType;
-    alignItems?: flexAlignPropsType;
-    border?: tBorderColorProps;
-    borderType?: borderTypePropsType;
     direction?: tAlignDirectionProps;
-    fill?: tFillProps;
-    flow?: string;
-    justifyContent?: flexJustifyContentPropsType;
-    position?: positionPropsType;
-    shape?: tShapeProps;
-    width?: tWidthProps;
-    wrap?: flexWrapPropsType;
-    gapWrapper?: string;
-    maxWidthWrapper?: string;
-    alignContentDesktop?: flexJustifyContentPropsType;
-    alignContentMobile?: flexJustifyContentPropsType;
-    alignContentTablet?: flexJustifyContentPropsType;
-    alignItemsDesktop?: flexAlignPropsType;
-    alignItemsMobile?: flexAlignPropsType;
-    alignItemsTablet?: flexAlignPropsType;
     directionDesktop?: tAlignDirectionProps;
     directionMobile?: tAlignDirectionProps;
     directionTablet?: tAlignDirectionProps;
+    fill?: tFillProps;
     fillDesktop?: tFillProps;
     fillMobile?: tFillProps;
     fillTablet?: tFillProps;
+    flow?: string;
     flowDesktop?: string;
     flowMobile?: string;
     flowTablet?: string;
-    justifyContentDesktop?: flexJustifyContentPropsType;
-    justifyContentMobile?: flexJustifyContentPropsType;
-    justifyContentTablet?: flexJustifyContentPropsType;
-    justifyItems?: flexAlignPropsType;
-    justifyItemsDesktop?: flexAlignPropsType;
-    justifyItemsMobile?: flexAlignPropsType;
-    justifyItemsTablet?: flexAlignPropsType;
-    positionDesktop?: positionPropsType;
-    positionMobile?: positionPropsType;
-    positionTablet?: positionPropsType;
+    gapWrapper?: string;
+    justifyContent?: tFlexJustifyContentProps;
+    justifyContentDesktop?: tFlexJustifyContentProps;
+    justifyContentMobile?: tFlexJustifyContentProps;
+    justifyContentTablet?: tFlexJustifyContentProps;
+    justifyItems?: tFlexAlignProps;
+    justifyItemsDesktop?: tFlexAlignProps;
+    justifyItemsMobile?: tFlexAlignProps;
+    justifyItemsTablet?: tFlexAlignProps;
+    maxWidthWrapper?: string;
+    position?: tPositionProps;
+    positionDesktop?: tPositionProps;
+    positionMobile?: tPositionProps;
+    positionTablet?: tPositionProps;
+    shape?: tShapeProps;
     shapeDesktop?: tShapeProps;
     shapeMobile?: tShapeProps;
     shapeTablet?: tShapeProps;
+    style?: CSSProperties;
+    tag?: ElementType;
+    type?: string;
+    width?: tWidthProps;
     widthDesktop?: tWidthProps;
     widthMobile?: tWidthProps;
     widthTablet?: tWidthProps;
-    wrapDesktop?: flexWrapPropsType;
-    wrapMobile?: flexWrapPropsType;
-    wrapTablet?: flexWrapPropsType;
-    style?: CSSProperties;
+    wrap?: tFlexWrapProps;
+    wrapDesktop?: tFlexWrapProps;
+    wrapMobile?: tFlexWrapProps;
+    wrapTablet?: tFlexWrapProps;
+    onClick?: () => void;
 }
 export interface iFlexItemProps extends iStyleAttributes {
     [key: number | string | symbol]: any;
+    alignItems?: tFlexAlignProps;
+    alignItemsDesktop?: tFlexAlignProps;
+    alignItemsMobile?: tFlexAlignProps;
+    alignItemsTablet?: tFlexAlignProps;
+    alignSelf?: tFlexAlignProps;
+    alignSelfDesktop?: tFlexAlignProps;
+    alignSelfMobile?: tFlexAlignProps;
+    alignSelfTablet?: tFlexAlignProps;
     children?: ReactNode;
     className?: string;
-    htmlFor?: string;
-    style?: CSSProperties;
-    tag?: ElementType;
-    alignItems?: flexAlignPropsType;
-    alignSelf?: flexAlignPropsType;
-    direction?: tDirectionProps;
-    fill?: tFillProps;
-    fillHover?: tFillHoverProps;
-    grow?: number;
-    justifyContent?: flexJustifyContentPropsType;
-    position?: positionPropsType;
-    shape?: tShapeProps;
-    width?: horizontalResizeModePropsType;
-    wrap?: flexWrapPropsType;
-    alignItemsDesktop?: flexAlignPropsType;
-    alignItemsMobile?: flexAlignPropsType;
-    alignItemsTablet?: flexAlignPropsType;
-    alignSelfDesktop?: flexAlignPropsType;
-    alignSelfMobile?: flexAlignPropsType;
-    alignSelfTablet?: flexAlignPropsType;
     columnEnd?: number;
     columnEndDesktop?: number;
     columnEndMobile?: number;
@@ -96,28 +83,40 @@ export interface iFlexItemProps extends iStyleAttributes {
     columnStartDesktop?: number;
     columnStartMobile?: number;
     columnStartTablet?: number;
+    direction?: tDirectionProps;
     directionDesktop?: tDirectionProps;
     directionMobile?: tDirectionProps;
     directionTablet?: tDirectionProps;
+    fill?: tFillProps;
     fillDesktop?: tFillProps;
+    fillHover?: tFillHoverProps;
     fillMobile?: tFillProps;
     fillTablet?: tFillProps;
+    grow?: number;
     growDesktop?: number;
     growMobile?: number;
     growTablet?: number;
-    justifyContentDesktop?: flexJustifyContentPropsType;
-    justifyContentMobile?: flexJustifyContentPropsType;
-    justifyContentTablet?: flexJustifyContentPropsType;
-    positionDesktop?: positionPropsType;
-    positionMobile?: positionPropsType;
-    positionTablet?: positionPropsType;
+    htmlFor?: string;
+    justifyContent?: tFlexJustifyContentProps;
+    justifyContentDesktop?: tFlexJustifyContentProps;
+    justifyContentMobile?: tFlexJustifyContentProps;
+    justifyContentTablet?: tFlexJustifyContentProps;
+    position?: tPositionProps;
+    positionDesktop?: tPositionProps;
+    positionMobile?: tPositionProps;
+    positionTablet?: tPositionProps;
+    shape?: tShapeProps;
     shapeDesktop?: tShapeProps;
     shapeMobile?: tShapeProps;
     shapeTablet?: tShapeProps;
-    widthDesktop?: horizontalResizeModePropsType;
-    widthMobile?: horizontalResizeModePropsType;
-    widthTablet?: horizontalResizeModePropsType;
-    wrapDesktop?: flexWrapPropsType;
-    wrapMobile?: flexWrapPropsType;
-    wrapTablet?: flexWrapPropsType;
+    style?: CSSProperties;
+    tag?: ElementType;
+    width?: tHorizontalResizeModeProps;
+    widthDesktop?: tHorizontalResizeModeProps;
+    widthMobile?: tHorizontalResizeModeProps;
+    widthTablet?: tHorizontalResizeModeProps;
+    wrap?: tFlexWrapProps;
+    wrapDesktop?: tFlexWrapProps;
+    wrapMobile?: tFlexWrapProps;
+    wrapTablet?: tFlexWrapProps;
 }

package/dist/types/components/Flex/stories/args.d.ts

@@ -0,0 +1,80 @@
+export declare const parameters: {
+    controls: {
+        exclude: string[];
+    };
+};
+export declare const argTypes: {
+    id: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    justifyContent: {
+        control: string;
+        options: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
+    };
+    alignItems: {
+        control: string;
+        options: readonly [undefined, "stretch", "flex-start", "flex-end", "center", "baseline", "auto"];
+    };
+    position: {
+        control: string;
+        options: readonly ["static", "absolute", "relative", "fixed", "inherit"];
+    };
+    direction: {
+        control: string;
+        options: readonly [undefined, "column", "column-reverse", "horizontal", "horizontal-reverse", "row", "row-reverse", "vertical", "vertical-reverse"];
+    };
+    advancedProps: {
+        control: string;
+        value: boolean;
+    };
+    alignContent: {
+        control: string;
+        options: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
+    };
+    className: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    fill: {
+        control: string;
+        options: readonly [undefined, "accentPrimary", "accentSecondary", "accentTertiary", "primaryPrimary", "primarySecondary", "primaryTertiary", "secondaryPrimary", "secondarySecondary", "secondaryTertiary", "tertiaryPrimary", "tertiarySecondary", "tertiaryTertiary", "surfaceAccent", "surfaceItemPrimary", "surfacePrimary", "surfaceQuaternary", "surfaceQuinary", "surfaceSecondary", "surfaceTertiary", "errorPrimary", "errorSecondary", "successPrimary", "successSecondary", "gradientPrimary"];
+    };
+    flow: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    shape: {
+        control: string;
+        options: readonly [undefined, "geometric", "rounded", "circular"];
+    };
+    tag: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    type: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+    wrap: {
+        control: string;
+        description: string;
+        options: readonly [undefined, "wrap", "nowrap", "wrap-reverse"];
+    };
+    onClick: {
+        control: string;
+        if: {
+            arg: string;
+        };
+    };
+};