@itcase/ui 1.9.56 → 1.9.58

package/dist/components/Notification/appearance/notificationError.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimary',
+        titleTextColor: 'errorTextPrimary',
+        descTextColor: 'errorTextPrimary',
+        borderColor: 'errorBorderPrimary',
+        textColor: 'errorTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'errorPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceError };

package/dist/components/Notification/appearance/notificationInfo.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceInfo = {
+    infoPrimary: {
+        fill: 'infoPrimary',
+        fillHover: 'infoPrimary',
+        titleTextColor: 'infoTextPrimary',
+        descTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderPrimary',
+        textColor: 'infoTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'infoPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceInfo };

package/dist/components/Notification/appearance/notificationShape.js

@@ -0,0 +1,25 @@
+const notificationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { notificationAppearanceShape };

package/dist/components/Notification/appearance/notificationSize.js

@@ -0,0 +1,17 @@
+const notificationAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        titleTextSize: 'xxl',
+        descTextSize: 'm',
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size24_24',
+    },
+    sizeS: {
+        size: 'm',
+        titleTextSize: 'xl',
+        descTextSize: 'm',
+        loaderAppearanceSize: 'sizeS',
+        closeIconAppearanceSize: 'size24_24',
+    },
+};
+export { notificationAppearanceSize };

package/dist/components/Notification/appearance/notificationStyle.js

@@ -0,0 +1,14 @@
+const notificationAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { notificationAppearanceStyle };

package/dist/components/Notification/appearance/notificationSuccess.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimary',
+        titleTextColor: 'successTextPrimary',
+        descTextColor: 'successTextPrimary',
+        borderColor: 'successBorderPrimary',
+        textColor: 'successTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'successPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'successPrimary ghost circular',
+    },
+};
+export { notificationAppearanceSuccess };

package/dist/components/Notification/appearance/notificationWarning.js

@@ -0,0 +1,16 @@
+import { icons24 } from '@itcase/icons/default';
+const notificationAppearanceWarning = {
+    warningPrimary: {
+        fill: 'warningPrimary',
+        fillHover: 'warningPrimary',
+        titleTextColor: 'warningTextPrimary',
+        descTextColor: 'warningTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        textColor: 'warningTextPrimary',
+        buttonAppearance: 'surfacePrimary sizeXXL solid rounded',
+        loaderAppearance: 'warningPrimary sizeS solid rounded',
+        closeIcon: icons24.Action.Close,
+        closeIconAppearance: 'surfacePrimary solid circular',
+    },
+};
+export { notificationAppearanceWarning };

package/dist/components/Notification/index.js

@@ -0,0 +1,4 @@
+import { Notification, notificationConfig } from './Notification';
+import { notificationAppearance } from './Notification.appearance';
+import { NotificationWrapper } from './NotificationWrapper';
+export { NotificationWrapper, Notification, notificationConfig, notificationAppearance, };

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

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

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

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

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+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/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/components/Overlay/index.js

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

package/dist/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/components/Pagination/Pagination.interface.js

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

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,117 @@
+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 } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+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 && `pagination_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/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 };

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

@@ -0,0 +1,34 @@
+const paginationAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        fillInputShape: 'rounded',
+        pageCountDropdownShape: 'rounded',
+    },
+    roundedXL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '2m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '2m',
+    },
+    roundedL: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1_5m',
+    },
+    roundedM: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '1m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '1m',
+    },
+    roundedS: {
+        fillInputShape: 'rounded',
+        fillInputShapeStrength: '0_5m',
+        pageCountDropdownShape: 'rounded',
+        pageCountDropdownShapeStrength: '0_5m',
+    },
+};
+export { paginationAppearanceShape };

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

@@ -0,0 +1,63 @@
+import { icons14, icons16, icons24 } from '@itcase/icons/default';
+const paginationAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 'l',
+        textSize: 'l',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons24.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'l',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemSize: 'l',
+        pageCountDropdownItemWidth: '64px',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputIconFillSize: '24',
+        pageCountInputTextSize: 'l',
+        previousIcon: icons24.Arrow.ChevronLeftSmall,
+    },
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        textSize: 'm',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons24.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'm',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'm',
+        pageCountDropdownItemSize: 'l',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputIconFillSize: '14',
+        pageCountInputTextSize: 'm',
+        previousIcon: icons24.Arrow.ChevronLeftSmall,
+    },
+    sizeS: {
+        size: 's',
+        labelTextSize: 's',
+        textSize: 's',
+        builderIcon: icons24.General.DotMedium,
+        nextIcon: icons16.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 's',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 's',
+        pageCountDropdownItemSize: 's',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputTextSize: 's',
+        previousIcon: icons16.Arrow.ChevronLeftSmall,
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'xs',
+        textSize: 'xs',
+        builderIcon: icons14.General.DotMedium,
+        nextIcon: icons14.Arrow.ChevronRightSmall,
+        pageCountDescTextSize: 'xs',
+        pageCountDropdownItemDividerSize: 'xxs',
+        pageCountDropdownItemLabelSize: 'xs',
+        pageCountDropdownItemSize: 'xs',
+        pageCountInputIcon: icons14.Arrow.ChevronDownSmall,
+        pageCountInputTextSize: 'xs',
+        previousIcon: icons14.Arrow.ChevronLeftSmall,
+    },
+};
+export { paginationAppearanceSize };

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

@@ -0,0 +1,14 @@
+const paginationAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { paginationAppearanceStyle };

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

@@ -0,0 +1,35 @@
+const paginationAppearanceSurface = {
+    surfacePrimary: {
+        fill: 'surfacePrimary',
+        fillActive: 'accentPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceHoverTertiary',
+        fillInput: 'surfacePrimary',
+        fillInputHover: 'surfaceHoverTertiary',
+        textColor: 'surfaceTextPrimary',
+        textColorActive: 'accentTextPrimary',
+        textColorActiveHover: 'accentTextPrimary',
+        textColorHover: 'surfaceTextPrimary',
+        builderIconFillIcon: 'surfaceItemPrimary',
+        nextIconFillIcon: 'surfaceItemPrimary',
+        pageCountDescTextColor: 'surfaceTextPrimary',
+        pageCountDropdownAlignment: 'topCenter',
+        pageCountDropdownElevation: '8',
+        pageCountDropdownFill: 'surfacePrimary',
+        pageCountDropdownFillHover: 'surfaceHoverTertiary',
+        pageCountDropdownItemDividerFill: 'surfaceSecondary',
+        pageCountDropdownItemFill: 'surfacePrimary',
+        pageCountDropdownItemFillActive: 'accentPrimary',
+        pageCountDropdownItemFillActiveHover: 'accentPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
+        pageCountDropdownItemLabelAlign: 'center',
+        pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
+        pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorActiveHover: 'accentTextPrimary',
+        pageCountDropdownItemLabelColorHover: 'surfaceTextPrimary',
+        pageCountInputIconColor: 'surfaceItemPrimary',
+        pageCountInputTextColor: 'surfaceTextPrimary',
+        previousIconFillIcon: 'surfaceItemPrimary',
+    },
+};
+export { paginationAppearanceSurface };

package/dist/components/Pagination/index.js

@@ -0,0 +1,2 @@
+export { Pagination, paginationConfig } from './Pagination';
+export { paginationAppearance } from './Pagination.appearance';

package/dist/components/Radio/Radio.appearance.js

@@ -0,0 +1,19 @@
+import { radioAppearanceDefault } from './appearance/radioDefault';
+import { radioAppearanceDisabled } from './appearance/radioDisabled';
+import { radioAppearanceError } from './appearance/radioError';
+import { radioAppearanceRequire } from './appearance/radioRequire';
+import { radioAppearanceShape } from './appearance/radioShape';
+import { radioAppearanceSize } from './appearance/radioSize';
+import { radioAppearanceStyle } from './appearance/radioStyle';
+import { radioAppearanceSuccess } from './appearance/radioSuccess';
+const radioAppearance = {
+    ...radioAppearanceDefault,
+    ...radioAppearanceError,
+    ...radioAppearanceSuccess,
+    ...radioAppearanceRequire,
+    ...radioAppearanceDisabled,
+    ...radioAppearanceSize,
+    ...radioAppearanceShape,
+    ...radioAppearanceStyle,
+};
+export { radioAppearance };

package/dist/components/Radio/Radio.interface.js

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

package/dist/components/Radio/Radio.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { Text } from 'src/components/Text';
+import { radioAppearance } from './Radio.appearance';
+const radioConfig = {
+    appearance: radioAppearance,
+    setAppearance: (appearanceConfig) => {
+        radioConfig.appearance = appearanceConfig;
+    },
+};
+function Radio(props) {
+    const { id, appearance, className, dataTestId, dataTour, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, radioConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    return (_jsxs(Tag, { className: clsx(className, 'radio', fillClass && `fill_${fillClass}`, fillHoverClass && `fill_${fillHoverClass}`, isSkeleton && 'radio_skeleton', sizeClass && `radio_size_${sizeClass}`, !checked || !isActive
+            ? fillRadioClass && `radio_fill_${fillRadioClass}`
+            : fillRadioActiveClass && `radio_fill_active_${fillRadioActiveClass}`, !checked || !isActive
+            ? fillRadioHoverClass && `radio_fill_hover_${fillRadioHoverClass}`
+            : fillRadioActiveHoverClass &&
+                `radio_fill_active_hover_${fillRadioActiveHoverClass}`, !checked || !isActive
+            ? borderRadioColorClass &&
+                `radio_border-color_${borderRadioColorClass}`
+            : borderRadioColorActiveClass &&
+                `radio_border-color_active_${borderRadioColorActiveClass}`, !checked || !isActive
+            ? borderRadioColorHoverClass &&
+                `radio_border-color_hover_${borderRadioColorHoverClass}`
+            : borderRadioColorActiveHoverClass &&
+                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: id, children: [_jsxs("div", { className: clsx('radio__item'), children: [_jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled, value: value, onChange: onChange }), _jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), _jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (_jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (_jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+}
+export { Radio, radioConfig };

package/dist/components/Radio/appearance/radioDefault.js

@@ -0,0 +1,17 @@
+const radioAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfaceSecondary',
+        fillCheckmark: 'surfaceQuaternary',
+        fillRadio: 'surfaceSecondary',
+        fillRadioHover: 'surfaceTertiary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderQuaternary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
+        shape: 'circular',
+    },
+};
+export { radioAppearanceDefault };

package/dist/components/Radio/appearance/radioDisabled.js

@@ -0,0 +1,14 @@
+const radioAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfaceDisabled',
+        fillCheckmark: 'surfaceQuaternary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
+    },
+};
+export { radioAppearanceDisabled };

package/dist/components/Radio/appearance/radioError.js

@@ -0,0 +1,14 @@
+const radioAppearanceError = {
+    errorPrimary: {
+        fill: 'errorTertiary',
+        fillCheckmark: 'errorPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'errorBorderQuaternary',
+        borderRadioColor: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
+    },
+};
+export { radioAppearanceError };