@itcase/ui 1.9.51 → 1.9.53

package/dist/types/components/Button/Button.d.ts

@@ -54,7 +54,7 @@ declare const Button: React.ForwardRefExoticComponent<{
     wrap?: import("@itcase/types-ui").WrapProps;
     zeroGap?: boolean;
     zeroPadding?: boolean;
-} & Pick<import("src/hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+} & import("../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
     after?: string;
     appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
     Badge?: React.ReactNode;
@@ -74,7 +74,8 @@ declare const Button: React.ForwardRefExoticComponent<{
     labelTextTruncate?: import("../Text/Text.interface").TextProps["textTruncate"];
     labelTextWidth?: import("../Text/Text.interface").TextProps["width"];
     link?: import("../Link/Link.interface").LinkWrapperProps["href"];
-    onClick?: () => void;
+    onClick?: (event?: MouseEvent) => void;
+    onHoldComplete?: () => void;
     onMouseDown?: () => void;
     rel?: import("../Link/Link.interface").LinkWrapperProps["rel"];
     style?: React.CSSProperties;

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

@@ -1,11 +1,10 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, ElevationProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WrapProps } from '@itcase/types-ui';
-import { UseHoldProgressOptions } from 'src/hooks/useHoldProgress';
-import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { LinkWrapperProps } from 'src/components/Link/Link.interface';
 import { LoaderProps } from 'src/components/Loader/Loader.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 type ButtonAppearanceProps = {
     align?: AlignProps;
     borderColor?: BorderColorProps;
@@ -60,7 +59,7 @@ type ButtonAppearanceProps = {
     zeroGap?: boolean;
     zeroPadding?: boolean;
 };
-type ButtonProps = ButtonAppearanceProps & Pick<UseHoldProgressOptions, 'onHoldComplete'> & StyleAttributes & {
+type ButtonProps = ButtonAppearanceProps & StyleAttributes & {
     after?: string;
     appearance?: CompositeAppearanceKey;
     Badge?: ReactNode;
@@ -80,7 +79,8 @@ type ButtonProps = ButtonAppearanceProps & Pick<UseHoldProgressOptions, 'onHoldC
     labelTextTruncate?: TextProps['textTruncate'];
     labelTextWidth?: TextProps['width'];
     link?: LinkWrapperProps['href'];
-    onClick?: () => void;
+    onClick?: (event?: MouseEvent) => void;
+    onHoldComplete?: () => void;
     onMouseDown?: () => void;
     rel?: LinkWrapperProps['rel'];
     style?: CSSProperties;

package/dist/types/components/Button/stories/ButtonDefault.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonDemo.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonIcon.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonLabel.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonLoading.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonMuted.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonMutedIcon.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonShape.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

package/dist/types/components/Button/stories/ButtonSize.stories.d.ts

@@ -54,7 +54,7 @@ declare const meta: {
         wrap?: import("@itcase/types-ui").WrapProps;
         zeroGap?: boolean;
         zeroPadding?: boolean;
-    } & Pick<import("../../../hooks/useHoldProgress").UseHoldProgressOptions, "onHoldComplete"> & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
+    } & import("../../../hooks/useStyles/styleAttributes.interface").StyleAttributes & {
         after?: string;
         appearance?: import("@itcase/types-ui").CompositeAppearanceKey;
         Badge?: import("react").ReactNode;
@@ -74,7 +74,8 @@ declare const meta: {
         labelTextTruncate?: import("../../Text/Text.interface").TextProps["textTruncate"];
         labelTextWidth?: import("../../Text/Text.interface").TextProps["width"];
         link?: import("../../Link/Link.interface").LinkWrapperProps["href"];
-        onClick?: () => void;
+        onClick?: (event?: MouseEvent) => void;
+        onHoldComplete?: () => void;
         onMouseDown?: () => void;
         rel?: import("../../Link/Link.interface").LinkWrapperProps["rel"];
         style?: import("react").CSSProperties;

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

@@ -1,7 +1,7 @@
 import type { ElementType, ReactNode } from 'react';
-import { AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
-import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+import { AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, CompositeAppearanceDefaultSizeStyleKey, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, WidthProps } from '@itcase/types-ui';
 import { TextProps } from 'src/components/Text/Text.interface';
+import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 type CheckboxAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorCheckbox?: BorderColorProps;
@@ -59,7 +59,7 @@ type CheckboxConfig = {
     appearance: CheckboxAppearance;
     setAppearance: (appearanceConfig: CheckboxAppearance) => void;
 };
-type AppearanceKeys = AppearanceSizeKey | AppearanceStateKeysDefault | AppearanceStyleKey;
+type AppearanceKeys = AppearanceShapeKey | AppearanceSizeKey | AppearanceStateKeysDefault | AppearanceStyleKey;
 type CheckboxAppearance = {
     [key in AppearanceKeys]?: CheckboxAppearanceProps;
 };

package/dist/types/components/Checkbox/appearance/checkboxShape.d.ts

@@ -0,0 +1,3 @@
+import { CheckboxAppearance } from '../Checkbox.interface';
+declare const checkboxAppearanceShape: CheckboxAppearance;
+export { checkboxAppearanceShape };

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

@@ -1,13 +1,19 @@
 import { ElementType } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceKey, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, SizeProps, SvgFillProps } from '@itcase/types-ui';
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorActiveProps, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceKey, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, SizeProps } from '@itcase/types-ui';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+import { IconProps } from '../Icon/Icon.interface';
 type CheckmarkAppearanceProps = {
     borderColor?: BorderColorProps;
     borderColorActive?: BorderColorActiveProps;
     borderColorActiveHover?: BorderColorActiveProps;
     borderColorHover?: BorderColorHoverProps;
     borderWidth?: BorderWidthProps;
-    checkmarkFill?: SvgFillProps;
+    checkmarkFill?: IconProps['fill'];
+    checkmarkIcon?: IconProps['SvgImage'];
+    checkmarkIconFill?: IconProps['iconFill'];
+    checkmarkIconShape?: IconProps['shape'];
+    checkmarkIconSize?: IconProps['iconSize'];
+    checkmarkIconSrc?: IconProps['imageSrc'];
     fill?: FillProps;
     fillActive?: FillActiveProps;
     fillActiveHover?: FillActiveHoverProps;

package/dist/types/components/Checkmark/appearance/checkmarkError.d.ts

@@ -0,0 +1,3 @@
+import { CheckmarkAppearance } from '../Checkmark.interface';
+declare const checkmarkAppearanceError: CheckmarkAppearance;
+export { checkmarkAppearanceError };

package/dist/types/components/Checkmark/stories/CheckmarkError.stories.d.ts

@@ -0,0 +1,23 @@
+import { Checkmark } from '..';
+import { CheckmarkProps } from '../Checkmark.interface';
+declare const meta: {
+    title: string;
+    component: typeof Checkmark;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const Default: {
+    args: {
+        appearance: string;
+    };
+    render: (args: CheckmarkProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Checked: {
+    args: {
+        appearance: string;
+        isChecked: boolean;
+    };
+    render: (args: CheckmarkProps) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -1,9 +1,9 @@
 import { CSSProperties, ReactNode } from 'react';
 import { AlignProps, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps, TextColorProps, WrapProps } from '@itcase/types-ui';
-import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 import { BadgeProps } from 'src/components/Badge/Badge.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 type ChipsAppearanceProps = {
     align?: AlignProps;
     alignDirection?: DirectionProps;
@@ -72,7 +72,6 @@ type ChipsProps = ChipsAppearanceProps & StyleAttributes & {
     type?: string;
 };
 type ChipsGroupListItem = {
-    id?: string;
     iconAfter?: ChipsProps['iconAfter'];
     iconAfterActive?: ChipsProps['iconAfterActive'];
     iconBefore?: ChipsProps['iconBefore'];
@@ -80,6 +79,7 @@ type ChipsGroupListItem = {
     isActive?: ChipsProps['isActive'];
     isDisabled?: ChipsProps['isDisabled'];
     label?: ChipsProps['label'];
+    value?: string;
 };
 type ChipsGroupAppearanceProps = {
     align?: AlignProps;

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

@@ -1,11 +1,11 @@
 import type { DatePeriodItem } from '@itcase/common/types';
-import { Option } from '@itcase/types-core';
+import { Option as SelectOption } from '@itcase/types-core';
 import type { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, CompositeAppearanceDefaultSizeShapeKey, CompositeAppearanceKey, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps, SizeProps } from '@itcase/types-ui';
-import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 import { ChipsProps } from 'src/components/Chips/Chips.interface';
 import { DatePickerInputProps } from 'src/components/DatePicker/DatePicker.interface';
-import { SelectPropsCustom } from 'src/components/Select/Select.interface';
-type DatePeriodAppearanceProps = {
+import { SelectAppearanceProps, SelectProps } from 'src/components/Select/Select.interface';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+type DatePeriodAppearanceProps<Option> = {
     chipsAppearance?: ChipsProps['appearance'];
     chipsAppearanceSize?: AppearanceSizeKey;
     chipsShape?: ChipsProps['shape'];
@@ -13,29 +13,30 @@ type DatePeriodAppearanceProps = {
     datePickerAppearanceSize?: AppearanceSizeKey;
     datePickerInputAppearance?: AppearanceStateKeysDefault;
     datePickerInputAppearanceSize?: AppearanceSizeKey;
-    datePickerInputFillHover?: SelectPropsCustom<Option>['fillHover'];
-    datePickerInputTextSize?: SelectPropsCustom<Option>['inputTextSize'];
+    datePickerInputFillHover?: SelectProps<Option>['fillHover'];
+    datePickerInputTextSize?: SelectProps<Option>['inputTextSize'];
     fill?: FillProps;
     fillHover?: FillHoverProps;
+    selectAppearance?: SelectAppearanceProps<Option>['appearance'];
     selectAppearanceSize?: AppearanceSizeKey;
-    selectShape?: SelectPropsCustom<Option>['shape'];
+    selectShape?: SelectProps<Option>['shape'];
     shape?: ShapeProps;
     shapeStrength?: ShapeStrengthProps;
     size?: SizeProps;
 };
-type DatePeriodProps = DatePeriodAppearanceProps & StyleAttributes & {
+type DatePeriodProps<Option = SelectOption> = DatePeriodAppearanceProps<Option> & StyleAttributes & {
     appearance?: CompositeAppearanceDefaultSizeShapeKey;
     chipsShape?: ChipsProps['shape'];
     className?: string;
     dataTestId?: string;
     dataTour?: string;
     datePeriodIntervalsList?: DatePeriodItem[];
-    datePeriodSelectFirstOptions?: Option[];
-    datePeriodSelectFirstPlaceholder?: SelectPropsCustom<Option>['placeholder'];
-    datePeriodSelectFirstValue?: string;
-    datePeriodSelectSecondOptions?: Option[];
-    datePeriodSelectSecondPlaceholder?: SelectPropsCustom<Option>['placeholder'];
-    datePeriodSelectSecondValue?: string;
+    datePeriodSelectFirstOptions?: SelectProps<Option>['options'];
+    datePeriodSelectFirstPlaceholder?: SelectProps<Option>['placeholder'];
+    datePeriodSelectFirstValue?: SelectProps<Option>['value'];
+    datePeriodSelectSecondOptions?: SelectProps<Option>['options'];
+    datePeriodSelectSecondPlaceholder?: SelectProps<Option>['placeholder'];
+    datePeriodSelectSecondValue?: SelectProps<Option>['value'];
     datePeriodValueEnd?: DatePickerInputProps['endValue'];
     datePeriodValueStart: DatePickerInputProps['value'];
     datePickerAppearance?: CompositeAppearanceKey;
@@ -44,19 +45,19 @@ type DatePeriodProps = DatePeriodAppearanceProps & StyleAttributes & {
     isSkeleton?: boolean;
     monthsShown?: number;
     onChangeDatePeriod?: DatePickerInputProps['onChange'];
-    onChangeDatePeriodFirstSelect?: (targetOption: Option) => void;
-    onChangeDatePeriodSecondSelect?: () => void;
+    onChangeDatePeriodFirstSelect?: SelectProps<Option>['onChange'];
+    onChangeDatePeriodSecondSelect?: SelectProps<Option>['onChange'];
     onKeyDown?: (event?: React.KeyboardEvent<HTMLElement>) => void;
     popperPlacement?: DatePickerInputProps['popperPlacement'];
-    selectAppearance?: SelectPropsCustom<Option>['appearance'];
+    selectAppearance?: SelectProps<Option>['appearance'];
     selectAppearanceSize?: AppearanceSizeKey;
-    selectShape?: SelectPropsCustom<Option>['shape'];
+    selectShape?: SelectProps<Option>['shape'];
     selectsRange?: DatePickerInputProps['selectsRange'];
     showWeekNumbers?: boolean;
 };
 type DatePeriodAppearanceKey = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey;
 type DatePeriodAppearance = {
-    [key in DatePeriodAppearanceKey]?: DatePeriodAppearanceProps;
+    [key in DatePeriodAppearanceKey]?: DatePeriodAppearanceProps<SelectOption>;
 };
 type DatePeriodConfig = {
     appearance: DatePeriodAppearance;

package/dist/types/components/DatePeriod/stories/DatePeriodSize.stories.d.ts

@@ -15,5 +15,8 @@ export declare const Demo: {
     render: (args: DatePeriodProps) => import("react/jsx-runtime").JSX.Element;
 };
 export declare const Skeleton: {
+    args: {
+        isSkeleton: boolean;
+    };
     render: (args: DatePeriodProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -46,16 +46,17 @@ type DatePickerInputAppearanceProps = {
     yearTextSize?: TextProps['size'];
     yearTextWeight?: TextProps['textWeight'];
 };
-type DatePickerInputProps = DatePickerInputAppearanceProps & DatePickerProps & {
+type DatePickerInputProps = DatePickerInputAppearanceProps & Omit<DatePickerProps, 'onChange'> & {
     className?: string;
     dataTestId?: string;
     dataTour?: string;
-    datePickerProps?: DatePickerInputAppearanceProps & DatePickerProps;
+    datePickerProps?: DatePickerInputAppearanceProps & Omit<DatePickerProps, 'selectsRange'> & {
+        selectsRange?: boolean;
+    };
     endValue?: string | Date | DateIso;
     inputProps?: InputProps;
     onChange?: (dateStart: Date | null, dateEnd: Date | null) => void;
     popperPlacement?: ReactNode;
-    selectsRange?: boolean;
     value?: string | Date | DateIso;
 };
 type DatePickerCustomInput = {

package/dist/types/components/Dropzone/Dropzone.appearance.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from './Dropzone.interface';
+declare const dropzoneAppearance: DropzoneAppearance;
+export { dropzoneAppearance };

package/dist/types/components/Dropzone/Dropzone.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropzoneProps } from './Dropzone.interface';
+declare const Dropzone: React.NamedExoticComponent<DropzoneProps>;
+export { Dropzone };

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

@@ -0,0 +1,82 @@
+import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStateKeysDefault, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CompositeAppearanceKey, DirectionProps, FillHoverProps, FillProps, ShapeProps, ShapeStrengthProps } from '@itcase/types-ui';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+import { ButtonProps } from '../Button/Button.interface';
+import { TextProps } from '../Text/Text.interface';
+type DropzoneAppearanceProps = {
+    borderColor?: BorderColorProps;
+    borderColorHover?: BorderColorHoverProps;
+    borderType?: BorderTypeProps;
+    borderWidth?: BorderWidthProps;
+    errorMessageTextColor?: TextProps['textColor'];
+    errorMessageTextSize?: TextProps['size'];
+    errorMessageTextWeight?: TextProps['textWeight'];
+    fill?: FillProps;
+    fillHover?: FillHoverProps;
+    hintDescriptionTextColor?: TextProps['textColor'];
+    hintDescriptionTextSize?: TextProps['size'];
+    hintDescriptionTextWeight?: TextProps['textWeight'];
+    hintDescriptionTextWrap?: TextProps['textWrap'];
+    hintTitle?: string;
+    hintTitleTextColor?: TextProps['textColor'];
+    hintTitleTextSize?: TextProps['size'];
+    hintTitleTextWeight?: TextProps['textWeight'];
+    hintTitleTextWrap?: TextProps['textWrap'];
+    removeThumbAppearance?: ButtonProps['appearance'];
+    removeThumbShape?: ButtonProps['shape'];
+    removeThumbText?: ButtonProps['label'];
+    removeThumbTextColor?: TextProps['textColor'];
+    removeThumbTextHoverColor?: TextProps['textColorHover'];
+    removeThumbTextWeight?: ButtonProps['labelTextWeight'];
+    shape?: ShapeProps;
+    shapeStrength?: ShapeStrengthProps;
+    size?: AppearanceSizeKey;
+    thumbBorderColor?: BorderColorProps;
+    thumbBorderColorHover?: BorderColorHoverProps;
+    thumbBorderType?: BorderTypeProps;
+    thumbBorderWidth?: BorderWidthProps;
+    thumbDirection?: DirectionProps;
+    thumbNameTextColor?: TextProps['textColor'];
+    thumbNameTextSize?: TextProps['size'];
+    thumbNameTextWeight?: TextProps['textWeight'];
+    thumbNameTextWrap?: TextProps['textWrap'];
+};
+type FileItem = {
+    id: string;
+    dataURL: string;
+    error: string;
+    file: null | (File & {
+        error?: string;
+    });
+    image?: string;
+    isNew: boolean;
+    name: string;
+    preview: string;
+};
+type DropzoneProps = DropzoneAppearanceProps & StyleAttributes & {
+    appearance?: CompositeAppearanceKey;
+    dropzoneProps?: Record<string, unknown>;
+    fieldValuesList?: FileItem[] | null;
+    fileErrorText?: React.ReactNode;
+    hintDescription?: React.ReactNode;
+    hintTitle?: React.ReactNode;
+    inputName: string;
+    isPreviews?: boolean;
+    isSkeleton?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    onAddFiles?: (newFiles: FileItem[], inputName: string) => void;
+    onChangeFiles?: (newFiles: FileItem[]) => void;
+    onClickPreview?: (fileItem: FileItem, event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+    onDeleteFile?: (deletedFile: FileItem, inputName: string) => void;
+    showFilename?: boolean;
+    thumbColumn?: number;
+};
+type DropzoneAppearanceKey = AppearanceShapeKey | AppearanceSizeKey | (AppearanceKeysDefault | AppearanceStateKeysDefault);
+type DropzoneAppearance = {
+    [key in DropzoneAppearanceKey]?: DropzoneAppearanceProps;
+};
+type DropzoneConfig = {
+    appearance: DropzoneAppearance;
+    setAppearance: (appearanceConfig: DropzoneAppearance) => void;
+};
+export type { DropzoneAppearance, DropzoneConfig, DropzoneProps, FileItem };

package/dist/types/components/Dropzone/appearance/dropzoneDefault.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceDefault: DropzoneAppearance;
+export { dropzoneAppearanceDefault };

package/dist/types/components/Dropzone/appearance/dropzoneDisabled.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceDisabled: DropzoneAppearance;
+export { dropzoneAppearanceDisabled };

package/dist/types/components/Dropzone/appearance/dropzoneError.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceError: DropzoneAppearance;
+export { dropzoneAppearanceError };

package/dist/types/components/Dropzone/appearance/dropzoneRequire.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceRequire: DropzoneAppearance;
+export { dropzoneAppearanceRequire };

package/dist/types/components/Dropzone/appearance/dropzoneShape.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceShape: DropzoneAppearance;
+export { dropzoneAppearanceShape };

package/dist/types/components/Dropzone/appearance/dropzoneSuccess.d.ts

@@ -0,0 +1,3 @@
+import { DropzoneAppearance } from '../Dropzone.interface';
+declare const dropzoneAppearanceSuccess: DropzoneAppearance;
+export { dropzoneAppearanceSuccess };

package/dist/types/components/Dropzone/index.d.ts

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone';

package/dist/types/components/Dropzone/stories/DropzoneDefault.stories.d.ts

@@ -0,0 +1,42 @@
+import { DropzoneProps } from '../Dropzone.interface';
+declare const meta: {
+    title: string;
+    component: import("react").NamedExoticComponent<DropzoneProps>;
+    args: {
+        inputName: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+export declare const Default: {
+    args: {
+        appearance: string;
+    };
+    render: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Require: {
+    args: {
+        appearance: string;
+    };
+    render: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Error: {
+    args: {
+        appearance: string;
+    };
+    render: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Success: {
+    args: {
+        appearance: string;
+    };
+    render: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Disabled: {
+    args: {
+        appearance: string;
+    };
+    render: (args: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
+};