@itcase/ui 1.1.25 → 1.2.1

package/dist/components/Modal.js

@@ -1,19 +1,171 @@
-export { M as Modal, a as ModalLoader } from '../ModalLoader-4OS81u94.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import 'react-dom';
-import '../hooks/useDeviceTargetClass.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import clsx from 'clsx';
+import ReactDOM from 'react-dom';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { O as Overlay } from '../Overlay-DO5dnSRE.js';
+import { L as Loader } from '../Loader-CJ8ZCdwy.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Overlay-DNPslUfY.js';
-import '../Loader-VCP1ZNcb.js';
-import '../Text-Dz-KPI5I.js';
+import '../Text-CG3xPG27.js';
+
+var getOrCreateModalElement = function (modalQuerySelector, className) {
+    var _a;
+    if (className === void 0) { className = ''; }
+    // prettier-ignore
+    var classList = className && typeof className === 'string'
+        ? className.split(' ').filter(Boolean)
+        : [];
+    var modalElement = document.querySelector(modalQuerySelector);
+    if (!modalElement) {
+        // Add modal element into the DOM on mount.
+        modalElement = document.createElement('div');
+        modalElement.setAttribute('id', 'modal-global');
+        modalElement.classList.add('modal');
+        if (classList.length) {
+            (_a = modalElement.classList).add.apply(_a, classList);
+        }
+        document.body.prepend(modalElement);
+    }
+    return modalElement;
+};
+// Modal component that is an abstraction around the portal API.
+var Modal = React.forwardRef(function Modal(props, ref) {
+    var id = props.id, children = props.children, _a = props.isCloseOnBlur, isCloseOnBlur = _a === void 0 ? true : _a, _b = props.isOpen, initialIsOpen = _b === void 0 ? false : _b, _c = props.isOverlay, isOverlay = _c === void 0 ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === void 0 ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === void 0 ? true : _e, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === void 0 ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
+    // Query DOM element
+    var _g = useState(null), modalElement = _g[0], setModalElement = _g[1];
+    var _h = useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
+    var modalContentRef = useRef(null);
+    // const modalOverlayRef = useRef(null)
+    var addModalProps = useCallback(function (element) {
+        // Change class need in "useEffect"
+        if (isOpen) {
+            // Show modal
+            element.classList.add('modal_state_visible');
+            // Scroll to opened modal
+            if (isScrollOnOpen) {
+                // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
+                element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            }
+            // "setTimeout" in this implementation is needs for set focus on modal
+            // after "onMouseDown" event on button
+            if (isSetFocusOnOpen) {
+                setTimeout(function () {
+                    if (modalContentRef.current) {
+                        modalContentRef.current.focus();
+                    }
+                }, 0);
+            }
+        }
+        else if (!element.children.length) {
+            // Hide modal if has no children
+            element.classList.remove('modal_state_visible');
+        }
+    }, [isOpen, isSetFocusOnOpen]);
+    // Show modal with children content
+    var openModal = useCallback(function () {
+        setIsOpen(true);
+        // Callback
+        if (typeof onOpenModal === 'function') {
+            onOpenModal();
+        }
+        /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
+          // If current modal is already opened
+          // Move content to end of modal root container. For order in DOM.
+          const modalContentElement = modalContentRef.current
+          if (modalContentElement) {
+            modalContentElement.parentNode.appendChild(modalContentElement)
+          }
+          // Also move overlay to end of modal root container after container
+          const modalOverlayElement = modalOverlayRef.current
+          if (modalOverlayElement) {
+            modalOverlayElement.parentNode.appendChild(modalOverlayElement)
+          }
+        */
+    }, [onOpenModal]);
+    // Hide modal and unmount children content
+    var closeModal = useCallback(function (event) {
+        if (event) {
+            // prettier-ignore
+            var hasRelatedTarget = (event.relatedTarget &&
+                modalElement &&
+                modalElement.contains(event.relatedTarget));
+            if (hasRelatedTarget) {
+                return event;
+            }
+        }
+        setIsOpen(false);
+        // Callback
+        onCloseModal && onCloseModal();
+    }, [modalElement, onCloseModal]);
+    useEffect(function () {
+        if (!modalElement) {
+            return;
+        }
+        addModalProps(modalElement);
+    }, [isOpen]); // eslint-disable-line
+    useLayoutEffect(function () {
+        var element = getOrCreateModalElement(modalQuerySelector, className);
+        setModalElement(element);
+        if (element) {
+            addModalProps(element);
+        }
+    }, []);
+    // Save ref things
+    useImperativeHandle(ref, function () { return ({ isOpen: isOpen, closeModal: closeModal, modalElement: modalElement, openModal: openModal }); }, [
+        isOpen,
+        openModal,
+        closeModal,
+        modalElement,
+    ]);
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    // Collect classes and styles
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'modal-shape_',
+        propsKey: 'shape',
+    });
+    var borderColorClass = useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    // @ts-expect-error
+    var modalStyles = useStyles(props).styles;
+    // Use a portal to render the children into the element
+    return (modalElement &&
+        ReactDOM.createPortal(
+        // Any valid React child: JSX, strings, arrays, etc.
+        isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('modal-content', contentClassName, fillClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass), ref: modalContentRef, id: id, style: modalStyles, tabIndex: 0, onBlur: isCloseOnBlur ? closeModal : undefined, children: [closeButton && (jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsx("div", { className: "modal-content__wrapper", children: children })] }), jsx(Overlay, { className: clsx('modal__overlay', 'overlay_type_modal', overlayClassName), 
+                    // ref={modalOverlayRef}
+                    fill: overlayFill, opacity: overlayOpacity, fillGradient: overlayFillGradient, isOverlay: isOverlay, onClick: onClickOverlay })] })) : null, 
+        // A DOM element
+        modalElement));
+});
+
+function ModalLoader(props) {
+    return (jsx("div", { className: "modal-loading", children: jsx("div", { className: "modal-loading__inner", children: jsx(Loader, {}) }) }));
+}
+
+export { Modal, ModalLoader };

package/dist/components/Notification.js

@@ -1,19 +1,52 @@
-export { N as NotificationItem, a as NotificationList, n as notificationItemConfig } from '../NotificationList-CmXca2zs.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { T as Text } from '../Text-CG3xPG27.js';
+import { T as Title } from '../Title-BfSFPJtJ.js';
+import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import 'react';
-import 'clsx';
-import '../context/Notifications.js';
-import 'prop-types';
-import 'uuid';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
+import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-Dz-KPI5I.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Title-zpOK2AxL.js';
+import 'uuid';
+
+var notificationItemConfig = {
+    appearance: {},
+    setAppearance: function (newComponent) {
+        notificationItemConfig.appearance = newComponent;
+    },
+};
+function NotificationItem(props) {
+    var id = props.id, appearance = props.appearance, closeButton = props.closeButton, after = props.after, before = props.before, set = props.set, status = props.status, size = props.size, dataTour = props.dataTour, text = props.text, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, textColor = props.textColor, title = props.title, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'h5' : _b, titleTextColor = props.titleTextColor, onClickClose = props.onClickClose, className = props.className;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var appearanceConfig = appearance &&
+        notificationItemConfig.appearance &&
+        notificationItemConfig.appearance[appearance];
+    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase())), "data-tour": dataTour, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor ||
+                            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor) && appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize, textColor: textColor || ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor) && appearanceConfig.textColor), children: text })), closeButton && (jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+}
+NotificationItem.defaultProps = {
+    titleTextSize: 'h5',
+    textSize: 's',
+};
+
+function NotificationList(props) {
+    var notifications = useNotifications();
+    var hideNotifications = useNotificationsAPI().hideNotifications;
+    var className = props.className, closeButton = props.closeButton, set = props.set, size = props.size, type = props.type;
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(NotificationItem, { closeButton: closeButton, id: notification.id, size: notification.size || size, status: notification.status, text: notification.text, title: notification.title, type: notification.type || type, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
+}
+
+export { NotificationItem, NotificationList, notificationItemConfig };

package/dist/components/Overlay.js

@@ -1,8 +1,8 @@
-export { O as Overlay } from '../Overlay-DNPslUfY.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { O as Overlay } from '../Overlay-DO5dnSRE.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Page.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import alignDirectionProps from '../constants/componentProps/alignDirection.js';
@@ -56,11 +56,11 @@ function Page(props) {
     styles,
     wrapper: wrapperStyles
   } = useStyles(props);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: clsx('page', className, type && `${className}_type_${type}`, fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass),
     style: styles
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'),
     style: wrapperStyles
   }, before, children, after));

package/dist/components/Pagination.js

@@ -1,26 +1,110 @@
-export { P as Pagination } from '../Pagination-BAbFsztK.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
-import 'clsx';
-import 'lodash/ceil';
-import 'react-paginate';
-import '../hooks/useDeviceTargetClass.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+import ceil from 'lodash/ceil';
+import ReactPaginate from 'react-paginate';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-bB-KYqcL.js';
+import { I as Icon } from '../Icon-CsE2-ieX.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../DropdownItem-CkojAA8a.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Divider-Dhj6sMWd.js';
-import '../Link-DtzAAQn8.js';
-import '../_tslib-S-VPg1Cw.js';
-import '../Text-Dz-KPI5I.js';
-import '../Icon-BLqnXYOO.js';
+import '../Divider-U5UdY-ef.js';
+import '../Link-Bqu5amIb.js';
+import '../tslib.es6-S-VPg1Cw.js';
 import 'react-inlinesvg';
-import '../Tooltip-IVq3_vb4.js';
-import '../Title-zpOK2AxL.js';
+import '../Tooltip-DJufHBiQ.js';
+import '../Title-BfSFPJtJ.js';
+
+function Pagination(props) {
+    var allItemsCount = props.allItemsCount, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _a = props.pageCountArray, pageCountArray = _a === void 0 ? [10, 20, 50, 100] : _a, pageCountDesc = props.pageCountDesc, pageCountDescTextColor = props.pageCountDescTextColor, pageCountDescTextSize = props.pageCountDescTextSize, pageCountDropdownAlignment = props.pageCountDropdownAlignment, pageCountDropdownElevation = props.pageCountDropdownElevation, pageCountDropdownFill = props.pageCountDropdownFill, pageCountDropdownItemDividerDirection = props.pageCountDropdownItemDividerDirection, pageCountDropdownItemDividerFill = props.pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize = props.pageCountDropdownItemDividerSize, pageCountDropdownItemFill = props.pageCountDropdownItemFill, pageCountDropdownItemFillActive = props.pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover = props.pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover = props.pageCountDropdownItemFillHover, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, pageNumber = props.pageNumber, pageRangeDisplayed = props.pageRangeDisplayed, _b = props.perPageCount, perPageCount = _b === void 0 ? 0 : _b, previousLabel = props.previousLabel, isPageCount = props.isPageCount, isPageCountDropdownReversed = props.isPageCountDropdownReversed; props.onChangePage; props.onChangePerPageCount; 
+    var /**
+     * @deprecated The method should not be used
+     */
+    onPageChange = props.onPageChange, 
+    /**
+     * @deprecated The method should not be used
+     */
+    onPerPageCountChange = props.onPerPageCountChange;
+    var _c = useState(false), isOpenDropdown = _c[0], setIsOpenDropdown = _c[1];
+    var _d = useState(true), showPagination = _d[0]; _d[1];
+    var _e = useState([]), pageCountDropdownArray = _e[0], setPageCountDropdownArray = _e[1];
+    var _f = useState(10), activeDropdownItem = _f[0], setActiveDropdownItem = _f[1];
+    // Toggle command menu
+    var onClickCommandMenuButton = useCallback(function () {
+        setIsOpenDropdown(function (state) { return !state; });
+    }, []);
+    var handleDropdownItemClick = useCallback(function (event, item) {
+        event.stopPropagation();
+        onPerPageCountChange && onPerPageCountChange(item);
+        setActiveDropdownItem(item);
+        setIsOpenDropdown(false);
+    }, [onPerPageCountChange]);
+    var justifyContentClass = useDeviceTargetClass(props, {
+        prefix: 'pagination_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var gapClass = useDeviceTargetClass(props, {
+        prefix: 'gap_',
+        propsKey: 'gap',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    // Calculate count of pages for all items
+    var paginationPagesCount = useMemo(function () {
+        if (allItemsCount && allItemsCount > 0) {
+            // Round up. "perPageCount" may be is a query params "limit"
+            return ceil(allItemsCount / perPageCount);
+        }
+        return 0;
+    }, [allItemsCount, perPageCount]);
+    // Index for pagination state
+    var paginationPageIndex = useMemo(function () {
+        var intPageNumber = parseInt(pageNumber);
+        // For pagination need index of page, not number
+        if (!isNaN(intPageNumber) && intPageNumber > 1) {
+            return intPageNumber - 1;
+        }
+        return 0;
+    }, [pageNumber]);
+    useEffect(function () {
+        setPageCountDropdownArray(isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray);
+    }, [pageCountArray, isPageCountDropdownReversed]);
+    return (jsxs("div", { className: "pagination", children: [showPagination && (jsx(ReactPaginate, { activeClassName: "pagination__item_state_active cursor_type_default", breakClassName: "pagination__item pagination__item_break", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", marginPagesDisplayed: marginPagesDisplayed, nextClassName: "pagination__item pagination__item_next", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed, previousClassName: "pagination__item pagination__item_previous", onPageChange: onPageChange, activeLinkClassName: "pagination__item-link_state_active", 
+                // previous button
+                previousLabel: previousLabel, breakLinkClassName: "pagination__item-link", 
+                // pages settings
+                forcePage: paginationPageIndex, containerClassName: clsx(className, 'pagination__container', justifyContentClass), 
+                // page item
+                pageClassName: "pagination__item", nextLinkClassName: "pagination__item-link", 
+                // break element
+                breakLabel: "...", previousLinkClassName: "pagination__item-link", 
+                // next button
+                nextLabel: nextLabel })), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass), children: [jsx(Text, { size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass, fillHoverClass), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, SvgImage: pageCountInputIcon }), jsx(Dropdown, { alignment: pageCountDropdownAlignment, elevation: pageCountDropdownElevation, fill: pageCountDropdownFill, isOpen: isOpenDropdown, set: pageCountDropdownSet, shape: pageCountDropdownShape, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsx(DropdownItem, { dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, isActive: true, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, width: pageCountDropdownItemWidth, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, isActive: false, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize, width: pageCountDropdownItemWidth, showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
+                                }) })] })] }))] }));
+}
+Pagination.defaultProps = {
+    pageNumber: 0,
+    perPageCount: 0,
+    allItemsCount: 0,
+    pageCountArray: [10, 20, 50, 100],
+    isPageCountDropdownReversed: false,
+    pageCountDropdownItemLabelColorActive: '',
+};
+
+export { Pagination };

package/dist/components/Panel.js

@@ -1,9 +1,9 @@
-import { j as jsxRuntimeExports } from '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-DLmtajo8.js';
-import { T as Text } from '../Text-Dz-KPI5I.js';
+import { G as Group } from '../Group-BXfLh7AZ.js';
+import { T as Text } from '../Text-CG3xPG27.js';
 import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
@@ -86,7 +86,7 @@ function Panel(props) {
     // @ts-expect-error
     var _a = useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
     var appearanceConfig = appearance && panelConfig.appearance && panelConfig.appearance[appearance];
-    return (jsxRuntimeExports.jsxs(Group, { className: clsx(className, 'panel', widthClass, heightClass, fillClass ||
+    return (jsxs(Group, { className: clsx(className, 'panel', widthClass, heightClass, fillClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
                 "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
@@ -98,7 +98,7 @@ function Panel(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntimeExports.jsx("div", { className: "panel__header", children: jsxRuntimeExports.jsx(Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntimeExports.jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntimeExports.jsx("div", { className: "panel__footer", children: jsxRuntimeExports.jsx(Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsx("div", { className: "panel__header", children: jsx(Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsx("div", { className: "panel__footer", children: jsx(Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
 }
 Panel.defaultProps = {};
 

package/dist/components/Radio.js

@@ -1,15 +1,15 @@
-export { R as Radio, r as radioConfig } from '../Radio-BHqgR8WO.js';
-import '../jsx-runtime-C2uP7l8s.js';
-import 'react';
+export { R as Radio, r as radioConfig } from '../Radio-oMf0vN7T.js';
+import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
+import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../Text-Dz-KPI5I.js';
+import '../Text-CG3xPG27.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/RangeSlider.js

@@ -1,16 +1,60 @@
-export { R as RangeSlider } from '../RangeSlider-BPFVikab.js';
-import '../jsx-runtime-C2uP7l8s.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import Slider from 'rc-slider';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'clsx';
-import 'rc-slider';
-import '../hooks/useDeviceTargetClass.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
+
+function RangeSlider(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, set = props.set, disabled = props.disabled, min = props.min, max = props.max, pushable = props.pushable, range = props.range, vertical = props.vertical, value = props.value, onChangeSlider = props.onChangeSlider;
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var trackFillClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-track-fill_',
+        propsKey: 'fillTrack',
+    });
+    var railFillClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-rail-fill_',
+        propsKey: 'fillRail',
+    });
+    var handleFillClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-handle-fill_',
+        propsKey: 'fillHandle',
+    });
+    var handleFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-handle-fill-hover_',
+        propsKey: 'fillHandleHover',
+    });
+    var handleDraggingFillClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-handle-dragging-fill_',
+        propsKey: 'fillHandleDragging',
+    });
+    var handleDraggingFillHoverClass = useDeviceTargetClass(props, {
+        prefix: 'range-slider-handle-dragging-fill-hover_',
+        propsKey: 'fillHandleDraggingHover',
+    });
+    var shapeClass = useDeviceTargetClass(props, {
+        prefix: 'filter_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    // @ts-expect-error
+    var rangeSliderStyles = useStyles(props).styles;
+    return (jsxs("div", { className: clsx(className, 'range-slider', set && "range-slider_set_".concat(set), fillClass, trackFillClass, railFillClass, handleFillClass, handleFillHoverClass, handleDraggingFillClass, handleDraggingFillHoverClass, shapeClass, widthClass), style: rangeSliderStyles, children: [before && jsx("div", { className: "range-slider__before", children: before }), jsx(Slider, { className: "range-slider__wrapper", disabled: disabled, min: min, max: max, pushable: pushable, range: range, vertical: vertical, value: value, onChange: onChangeSlider }), children, after && jsx("div", { className: "range-slider__after", children: after })] }));
+}
+
+export { RangeSlider };