@itcase/ui-web 1.9.77 → 1.9.81

package/dist/types/components/Notification/stories/NotificationSuccess.stories.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification } from '..';
+const meta = {
+    title: 'Molecules / Notification / Success',
+    component: Notification,
+    args: {
+        appearance: 'successPrimary sizeM solid',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SuccessButtonTitleTextLoaderClose = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+        isLoading: true,
+        onClickClose: () => { },
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessButtonTitleTextLoader = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+        isLoading: true,
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessButtonTitleText = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessButtonTitle = {
+    args: {
+        title: 'Title',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessButtonText = {
+    args: {
+        text: 'Text',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessTitleText = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessTitle = {
+    args: {
+        title: 'Title',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const SuccessText = {
+    args: {
+        text: 'Text',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};

package/dist/types/components/Notification/stories/NotificationToast.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Notification } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Notification;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/types/components/Notification/stories/NotificationToast.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification } from '..';
+const meta = {
+    title: 'Molecules / Notification / Toast',
+    component: Notification,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};

package/dist/types/components/Notification/stories/NotificationWarning.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Notification } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Notification;
+    args: {
+        appearance: "warningPrimary sizeM solid";
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WarningButtonTitleTextLoaderClose: Story;
+export declare const WarningButtonTitleTextLoader: Story;
+export declare const WarningButtonTitleText: Story;
+export declare const WarningButtonTitle: Story;
+export declare const WarningButtonText: Story;
+export declare const WarningTitleText: Story;
+export declare const WarningTitle: Story;
+export declare const WarningText: Story;

package/dist/types/components/Notification/stories/NotificationWarning.stories.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Notification } from '..';
+const meta = {
+    title: 'Molecules / Notification / Warning',
+    component: Notification,
+    args: {
+        appearance: 'warningPrimary sizeM solid',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const WarningButtonTitleTextLoaderClose = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+        isLoading: true,
+        onClickClose: () => { },
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningButtonTitleTextLoader = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+        isLoading: true,
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningButtonTitleText = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningButtonTitle = {
+    args: {
+        title: 'Title',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningButtonText = {
+    args: {
+        text: 'Text',
+        buttonLabel: 'Button',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningTitleText = {
+    args: {
+        title: 'Title',
+        text: 'Text',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningTitle = {
+    args: {
+        title: 'Title',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};
+export const WarningText = {
+    args: {
+        text: 'Text',
+    },
+    render: (args) => {
+        return _jsx(Notification, { ...args });
+    },
+};

package/dist/types/components/Notification/stories/__mock__/index.js

@@ -0,0 +1,31 @@
+const notificationsMock = [
+    {
+        id: '1',
+        type: 'float',
+        title: 'Text 123',
+        status: 'error',
+        text: 'Text 123',
+    },
+    {
+        id: '2',
+        type: 'float',
+        title: 'Text 123',
+        status: 'warning',
+        text: 'Text 123',
+    },
+    {
+        id: '3',
+        type: 'float',
+        title: 'Text 123',
+        status: 'info',
+        text: 'Text 123',
+    },
+    {
+        id: '4',
+        type: 'float',
+        title: 'Text 123',
+        status: 'success',
+        text: 'Text 123',
+    },
+];
+export { notificationsMock };

package/dist/types/components/Overlay/Overlay.appearance.js

@@ -0,0 +1,5 @@
+import { overlayAppearanceDefault } from './appearance/overlayDefault';
+const overlayAppearance = {
+    ...overlayAppearanceDefault,
+};
+export { overlayAppearance };

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

@@ -1,5 +1,5 @@
 import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { AppearanceOverlayKey, BlurProps, FillProps, OpacityProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceOverlayKey, BlurProps, FillProps, OpacityProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 type OverlayAppearanceProps = {
     blur?: BlurProps;
@@ -16,12 +16,6 @@ type OverlayProps = OverlayAppearanceProps & StyleAttributes & {
     onClick?: MouseEventHandler<HTMLDivElement>;
     style?: CSSProperties;
 };
-type OverlayAppearanceKey = AppearanceOverlayKey;
-type OverlayAppearance = {
-    [key in OverlayAppearanceKey]?: OverlayAppearanceProps;
-};
-type OverlayConfig = {
-    appearance: OverlayAppearance;
-    setAppearance: (appearanceConfig: OverlayAppearance) => void;
-};
+type OverlayConfig = AppearanceConfig<AppearanceOverlayKey, OverlayAppearanceProps>;
+type OverlayAppearance = OverlayConfig['appearance'];
 export type { OverlayAppearance, OverlayConfig, OverlayProps };

package/dist/types/components/Overlay/Overlay.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Overlay/Overlay.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { overlayAppearance } from './Overlay.appearance';
+const overlayConfig = {
+    appearance: overlayAppearance,
+    setAppearance: (appearanceConfig) => {
+        overlayConfig.appearance = appearanceConfig;
+    },
+};
+function Overlay(props) {
+    const { appearance, className, dataTestId, dataTour, isOverlay, onClick } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, overlayConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, blurClass, opacityClass } = propsGenerator;
+    const { styles: overlayStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'overlay', opacityClass && `opacity_${opacityClass}`, blurClass && `blur_${blurClass}`, isOverlay && 'overlay_state_visible', fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: overlayStyles, onClick: onClick, children: "\u00A0" }));
+}
+export { Overlay, overlayConfig };

package/dist/types/components/Overlay/appearance/overlayDefault.js

@@ -0,0 +1,11 @@
+const overlayAppearanceDefault = {
+    blackout: {
+        fill: 'black',
+        opacity: '50',
+    },
+    blur: {
+        fill: 'surfaceQuaternary',
+        blur: '10',
+    },
+};
+export { overlayAppearanceDefault };

package/dist/types/components/Overlay/index.js

@@ -0,0 +1,2 @@
+export { Overlay, overlayConfig } from './Overlay';
+export { overlayAppearance } from './Overlay.appearance';

package/dist/types/components/Overlay/stories/Overlay.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Overlay } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Overlay;
+    args: {
+        width: "fill";
+        height: "fill";
+        isOverlay: true;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Blur: Story;
+export declare const Blackout: Story;

package/dist/types/components/Overlay/stories/Overlay.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Overlay } from '..';
+const meta = {
+    title: 'Atoms / Overlay',
+    component: Overlay,
+    args: {
+        width: 'fill',
+        height: 'fill',
+        isOverlay: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Blur = {
+    args: {
+        appearance: 'blur',
+    },
+    render: (args) => {
+        return _jsx(Overlay, { ...args });
+    },
+};
+export const Blackout = {
+    args: {
+        appearance: 'blackout',
+    },
+    render: (args) => {
+        return _jsx(Overlay, { ...args });
+    },
+};

package/dist/types/components/Overlay/stories/OverlayDemo.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Overlay } from '..';
+declare const meta: {
+    title: string;
+    component: typeof Overlay;
+    args: {
+        width: "fill";
+        height: "fill";
+        isOverlay: true;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

package/dist/types/components/Overlay/stories/OverlayDemo.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Overlay } from '..';
+const meta = {
+    title: 'Atoms / Overlay',
+    component: Overlay,
+    args: {
+        width: 'fill',
+        height: 'fill',
+        isOverlay: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Demo = {
+    render: (args) => {
+        return _jsx(Overlay, { ...args });
+    },
+};

package/dist/types/components/Pagination/Pagination.appearance.js

@@ -0,0 +1,13 @@
+import { paginationAppearanceAccent } from './appearance/paginationAccent';
+import { paginationAppearanceShape } from './appearance/paginationShape';
+import { paginationAppearanceSize } from './appearance/paginationSize';
+import { paginationAppearanceStyle } from './appearance/paginationStyle';
+import { paginationAppearanceSurface } from './appearance/paginationSurface';
+const paginationAppearance = {
+    ...paginationAppearanceSurface,
+    ...paginationAppearanceAccent,
+    ...paginationAppearanceSize,
+    ...paginationAppearanceShape,
+    ...paginationAppearanceStyle,
+};
+export { paginationAppearance };

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

@@ -1,4 +1,4 @@
 import type { PaginationConfig, PaginationProps } from './Pagination.interface';
 declare const paginationConfig: PaginationConfig;
-declare function Pagination(props: PaginationProps): false | import("react/jsx-runtime").JSX.Element;
+declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
 export { Pagination, paginationConfig };

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorProps, CompositeAppearanceKey, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, SizeProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceKeysDefault, BorderColorProps, CompositeAppearanceKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillHoverProps, FillProps, JustifyContentProps, ShapeProps, ShapeStrengthProps, SizeProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { DropdownItemProps, DropdownProps } from 'src/components/Dropdown/Dropdown.interface';
 import { IconProps } from 'src/components/Icon/Icon.interface';
@@ -78,7 +78,7 @@ type PaginationAppearanceProps = {
 };
 type PaginationProps = PaginationAppearanceProps & StyleAttributes & {
     allItemsCount?: number;
-    appearance?: CompositeAppearanceKey;
+    appearance?: CompositeAppearanceKeys;
     className?: string;
     dataTestId?: string;
     dataTour?: string;
@@ -103,12 +103,6 @@ type PaginationProps = PaginationAppearanceProps & StyleAttributes & {
     pageNumber: number;
     perPageCount?: number;
 };
-type AppearanceKeys = AppearanceKeysDefault | AppearanceShapeKey | AppearanceSizeKey | AppearanceStyleKey;
-type PaginationAppearance = {
-    [key in AppearanceKeys]?: PaginationAppearanceProps;
-};
-type PaginationConfig = {
-    appearance: PaginationAppearance;
-    setAppearance: (appearanceConfig: PaginationAppearance) => void;
-};
+type PaginationConfig = AppearanceConfig<AppearanceKeysDefault, PaginationAppearanceProps>;
+type PaginationAppearance = PaginationConfig['appearance'];
 export type { PaginationAppearance, PaginationConfig, PaginationProps };

package/dist/types/components/Pagination/Pagination.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Pagination/Pagination.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import clsx from 'clsx';
+import ReactPaginate from 'react-paginate';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { Dropdown, DropdownItem } from 'src/components/Dropdown';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { paginationAppearance } from './Pagination.appearance';
+const paginationConfig = {
+    appearance: paginationAppearance,
+    setAppearance: (appearanceConfig) => {
+        paginationConfig.appearance = appearanceConfig;
+    },
+};
+function Pagination(props) {
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, onPageChange, onPerPageCountChange, } = props;
+    const _onChangePage = useMemo(() => {
+        if (onPageChange) {
+            console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
+            return onPageChange;
+        }
+        return onChangePage;
+    }, [onChangePage, onPageChange]);
+    const _onChangePerPageCount = useMemo(() => {
+        return (perPageCount) => {
+            if (onPerPageCountChange) {
+                console.warn('@itcase/ui Pagination warning: "onPerPageCountChange" is deprecated, use "onChangePerPageCount" instead.');
+                return onPerPageCountChange(perPageCount);
+            }
+            return onChangePerPageCount(perPageCount);
+        };
+    }, [onChangePerPageCount, onPerPageCountChange]);
+    const [isOpenDropdown, setIsOpenDropdown] = useState(false);
+    const [activeDropdownItem, setActiveDropdownItem] = useState(perPageCount);
+    const pageCountDropdownArray = useMemo(() => {
+        return isPageCountDropdownReversed
+            ? pageCountList?.reverse()
+            : pageCountList;
+    }, [isPageCountDropdownReversed, pageCountList]);
+    const onClickCommandMenuButton = useCallback(() => {
+        setIsOpenDropdown((state) => !state);
+    }, []);
+    const handleDropdownItemClick = useCallback((event, item) => {
+        event.stopPropagation();
+        _onChangePerPageCount(item);
+        setActiveDropdownItem(item);
+        setIsOpenDropdown(false);
+    }, [_onChangePerPageCount]);
+    const paginationPagesCount = useMemo(() => {
+        if (allItemsCount && allItemsCount > 0) {
+            return Math.ceil(allItemsCount / perPageCount);
+        }
+        return 0;
+    }, [allItemsCount, perPageCount]);
+    const paginationPageIndex = useMemo(() => {
+        const intPageNumber = pageNumber;
+        if (!isNaN(intPageNumber) && intPageNumber > 1) {
+            return intPageNumber - 1;
+        }
+        return 0;
+    }, [pageNumber]);
+    // Keep track of previous perPageCount value
+    const prevPageCountRef = useRef(perPageCount);
+    // When perPageCount changes and current pageNumber is invalid (even if in range).
+    useEffect(() => {
+        // If page number is 5 and perPageCount is 10 and there is 200 items in total,
+        // then user is seeing items from 41 to 50.
+        // Without this effect, when perPageCount changes to 20, pageNumber remains 5,
+        // which mean user will see items from 81 to 100, which is not expected.
+        // So we recalculate pageNumber to make sure user sees items from 41 to 60.
+        // pageNumber 1, perPageCount 10 -> items 1-10
+        // pageNumber 2, perPageCount 10 -> items 11-20
+        // pageNumber 3, perPageCount 10 -> items 21-30
+        // pageNumber 4, perPageCount 10 -> items 31-40
+        // pageNumber 5, perPageCount 10 -> items 41-50
+        // pageNumber 1, perPageCount 20 -> items 1-20
+        // pageNumber 2, perPageCount 20 -> items 21-40
+        // pageNumber 3, perPageCount 20 -> items 41-60
+        // pageNumber 4, perPageCount 20 -> items 61-80
+        // pageNumber 5, perPageCount 20 -> items 81-100
+        const prevPageCount = prevPageCountRef.current;
+        // Update previous perPageCount value
+        prevPageCountRef.current = perPageCount;
+        const firstItemIndex = (pageNumber - 1) * prevPageCount + 1;
+        const newPageNumber = Math.ceil(firstItemIndex / perPageCount);
+        if (newPageNumber !== pageNumber) {
+            _onChangePage({ selected: newPageNumber - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [perPageCount]);
+    // When allItemsCount changes and current pageNumber is out of range
+    useEffect(() => {
+        if (pageNumber > paginationPagesCount && paginationPagesCount > 0) {
+            _onChangePage({ selected: paginationPagesCount - 1 });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allItemsCount]);
+    const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    const { styles: paginationStyles } = useStyles(props);
+    const minPageSize = Math.min(perPageCount, ...pageCountList);
+    const isPaginationDisplayed = allItemsCount > minPageSize;
+    return (isPaginationDisplayed && (_jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [_jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
+                    `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
+                    `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
+                    `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: _jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    (() => (_jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: _jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (_jsxs("div", { className: clsx(className, 'pagination__count'), children: [_jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), _jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
+                            `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [_jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), _jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), _jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (_jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (_jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
+                                        pageCountDropdownItemShowDivider, isActive: false, onClick: (event) => handleDropdownItemClick(event, item) }, item))) })] })] }))] })));
+}
+export { Pagination, paginationConfig };

package/dist/types/components/Pagination/appearance/paginationAccent.js

@@ -0,0 +1,38 @@
+const paginationAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillActive: 'accentActiveQuaternary',
+        fillInput: 'surfacePrimary',
+        borderColor: 'accentBorderPrimary',
+        textColor: 'accentTextPrimary',
+        builderIconFillIcon: 'accentItemPrimary',
+        nextIconFillIcon: 'accentItemPrimary',
+        pageCountDescTextColor: 'surfaceTextPrimary',
+        pageCountDropdownAlignment: 'topCenter',
+        pageCountDropdownElevation: '8',
+        pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownItemDividerFill: 'surfaceSecondary',
+        pageCountDropdownItemFill: 'surfacePrimary',
+        pageCountDropdownItemFillActive: 'accentPrimary',
+        pageCountDropdownItemFillActiveHover: 'accentActiveHoverPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
+        pageCountDropdownItemLabelAlign: 'center',
+        pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
+        pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
+        pageCountInputIconColor: 'surfaceItemPrimary',
+        pageCountInputTextColor: 'surfaceTextPrimary',
+        previousIconFillIcon: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        labelTextColor: 'accentTextSecondary',
+        labelTextColorHover: 'accentTextSecondary',
+        borderColor: 'accentBorderPrimary',
+        loaderFill: 'accentPrimary',
+        loaderItemFill: 'accentItemPrimary',
+    },
+};
+export { paginationAppearanceAccent };