@itcase/ui 1.3.25 → 1.3.26

package/dist/components/Image.js

@@ -2,13 +2,14 @@ export { I as Image } from '../Image-D-QHhsrC.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Input.js

@@ -1,11 +1,12 @@
-export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input-Ck5IbuH6.js';
+export { I as Input, a as inputAppearance, i as inputConfig, b as inputState } from '../Input-BrV5_NoV.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';

package/dist/components/InputMask.js

@@ -2,12 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 
 var inputMaskConfig = {
     appearance: undefined,
@@ -24,7 +25,7 @@ var Input = React.forwardRef(function Input(props, ref) {
     // state,
     _a = props.type, 
     // state,
-    type = _a === undefined ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
+    type = _a === void 0 ? 'text' : _a, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onKeyDown = props.onKeyDown;
     // @ts-expect-error
     var appearanceConfig = inputMaskConfig.appearance && inputMaskConfig.appearance[appearance];
     // const stateConfig = useMemo(

package/dist/components/InputPassword.js

@@ -2,22 +2,23 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { I as Icon } from '../Icon-DotE-03d.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { I as Icon } from '../Icon-BZa8B7te.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Text-D9sEeRE4.js';
-import '../Title-Cl95USIn.js';
+import '../Link-DN2LhPjD.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Text-JayJa3hj.js';
+import '../Title-CHgrIarR.js';
 
 var InputPasswordAppearance = {
     dev: {

package/dist/components/Label.js

@@ -1,18 +1,19 @@
-export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-9O3dQlUa.js';
+export { L as Label, a as labelAppearance, l as labelConfig } from '../Label-DQyB2ThM.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-D9sEeRE4.js';
-import '../Tooltip-BsbXMzGd.js';
-import '../Title-Cl95USIn.js';
+import '../Text-JayJa3hj.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';

package/dist/components/Link.js

@@ -1,5 +1,5 @@
-export { L as Link, a as LinkWrapper, l as linkConfig } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+export { a as Link, L as LinkWrapper, l as linkConfig } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -9,6 +9,7 @@ import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/List.js

@@ -2,14 +2,15 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { L as Link } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { a as Link } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';

package/dist/components/Loader.js

@@ -1,16 +1,17 @@
-export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-Cm98w6lJ.js';
+export { L as Loader, a as loaderAppearance, l as loaderConfig } from '../Loader-K_DJmah6.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-D9sEeRE4.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Logo.js

@@ -2,14 +2,15 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { a as LinkWrapper } from '../Link-C53o3P6_.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { L as LinkWrapper } from '../Link-DN2LhPjD.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
@@ -28,7 +29,7 @@ function Logo(props) {
     var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, alignItemsClass = classGenerator.alignItemsClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var logo = useStyles(props).styles;
-    return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), (size || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.size)) && "logo_size_".concat(size || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.size)), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) }) })) : (jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.alt) })) }));
+    return (jsx("div", { className: clsx(className, 'logo', alignClass && "align_".concat(alignClass), alignDirectionClass && "align_".concat(alignDirectionClass), alignItemsClass && "logo_align-items_".concat(alignItemsClass), alt, title, mode && "logo_mode_".concat(mode), (size || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size)) && "logo_size_".concat(size || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.size)), widthClass && "width_".concat(widthClass)), style: logo, children: link || href ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) }) })) : (jsx("img", { className: "logo__image", alt: alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) || title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title), src: src || source || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.src) || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.source), title: title || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.title) || alt || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.alt) })) }));
 }
 
 export { Logo, logoConfig };

package/dist/components/Menu.js

@@ -2,19 +2,20 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { M as MenuItem } from '../MenuItem-Cu6wlj-X.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { M as MenuItem } from '../MenuItem-CLDNk2l8.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Text-D9sEeRE4.js';
+import '../Link-DN2LhPjD.js';
+import '../Text-JayJa3hj.js';
 
 var menuAppearance = {
     dev: {},
@@ -35,7 +36,7 @@ function Menu(props) {
     // @ts-expect-error
     var menuStyles = useStyles(props).styles;
     return (jsx("div", { className: clsx(className, 'menu', directionClass && "menu_direction_".concat(directionClass), columnsClass && "menu_columns_".concat(columnsClass), type && "menu_type_".concat(type), flexGrowClass && "flex-grow_".concat(flexGrowClass), widthClass && "width_".concat(widthClass)), children: jsxs("div", { className: "menu__wrapper", style: menuStyles, children: [before, children ||
-                    (items === null || items === undefined ? undefined : items.map(function (item, i) { return (jsx(MenuItem, { label: item.label, onClick: onClickItem }, "menuItem_".concat(item.id || i))); })), after] }) }));
+                    (items === null || items === void 0 ? void 0 : items.map(function (item, i) { return (jsx(MenuItem, { label: item.label, onClick: onClickItem }, "menuItem_".concat(item.id || i))); })), after] }) }));
 }
 Menu.defaultProps = {
     direction: 'horizontal',

package/dist/components/MenuItem.js

@@ -1,17 +1,18 @@
-export { M as MenuItem, a as menuItemAppearance, m as menuItemConfig } from '../MenuItem-Cu6wlj-X.js';
+export { M as MenuItem, a as menuItemAppearance, m as menuItemConfig } from '../MenuItem-CLDNk2l8.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Link-C53o3P6_.js';
-import '../Text-D9sEeRE4.js';
+import '../Link-DN2LhPjD.js';
+import '../Text-JayJa3hj.js';

package/dist/components/Modal.js

@@ -5,17 +5,18 @@ import ReactDOM from 'react-dom';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { O as Overlay } from '../Overlay-DcGWchjp.js';
-import { L as Loader } from '../Loader-Cm98w6lJ.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { L as Loader } from '../Loader-K_DJmah6.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-D9sEeRE4.js';
+import '../Text-JayJa3hj.js';
 
 var modalAppearance = {
     dev: {},
@@ -29,7 +30,7 @@ var modalConfig = {
 };
 var getOrCreateModalElement = function (modalQuerySelector, className) {
     var _a;
-    if (className === undefined) { className = ''; }
+    if (className === void 0) { className = ''; }
     // prettier-ignore
     var classList = className && typeof className === 'string'
         ? className.split(' ').filter(Boolean)
@@ -49,7 +50,7 @@ var getOrCreateModalElement = function (modalQuerySelector, className) {
 };
 // 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 === undefined ? true : _a, _b = props.isOpen, initialIsOpen = _b === undefined ? false : _b, _c = props.isOverlay, isOverlay = _c === undefined ? true : _c, _d = props.isScrollOnOpen, isScrollOnOpen = _d === undefined ? true : _d, _e = props.isSetFocusOnOpen, isSetFocusOnOpen = _e === undefined ? true : _e, appearance = props.appearance, className = props.className, closeButton = props.closeButton, contentClassName = props.contentClassName, _f = props.modalQuerySelector, modalQuerySelector = _f === undefined ? '#modal-global' : _f, overlayClassName = props.overlayClassName, overlayFill = props.overlayFill, overlayFillGradient = props.overlayFillGradient, overlayOpacity = props.overlayOpacity, onClickOverlay = props.onClickOverlay, onCloseModal = props.onCloseModal, onOpenModal = props.onOpenModal;
+    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, appearance = props.appearance, 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];
@@ -148,7 +149,7 @@ var Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('modal-content', contentClassName, fillClass && "fill_".concat(fillClass), shapeClass && "modal-shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(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 || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.overlayFill), opacity: overlayOpacity || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.overlayOpacity), fillGradient: overlayFillGradient || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.overlayFillGradient), isOverlay: isOverlay || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.isOverlay), onClick: onClickOverlay })] })) : null, 
+                    fill: overlayFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFill), opacity: overlayOpacity || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayOpacity), fillGradient: overlayFillGradient || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.overlayFillGradient), isOverlay: isOverlay || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.isOverlay), onClick: onClickOverlay })] })) : null, 
         // A DOM element
         modalElement));
 });

package/dist/components/ModalSheetBottom.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
+import { _ as __assign } from '../tslib.es6-Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Sheet } from 'react-modal-sheet';
 import { useStyles } from '../hooks/useStyles.js';
@@ -9,6 +9,7 @@ import 'lodash/upperFirst';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/styleAttributes.js';
 
 function ModalSheetBottom(props) {

package/dist/components/Notification.js

@@ -2,15 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
+import { T as Text } from '../Text-JayJa3hj.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
@@ -56,13 +57,13 @@ var notificationItemConfig = {
     },
 };
 function NotificationItem(props) {
-    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === undefined ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === undefined ? 'm' : _b, onClickClose = props.onClickClose;
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === void 0 ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === void 0 ? 'm' : _b, onClickClose = props.onClickClose;
     var appearanceConfig = notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var notificationStyles = useStyles(props).styles;
-    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', widthClass && "width_".concat(widthClass), fillClass && "fill_".concat(fillClass)), "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : 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] }));
+    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', widthClass && "width_".concat(widthClass), fillClass && "fill_".concat(fillClass)), "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : 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] }));
 }
 
 function NotificationList(props) {

package/dist/components/Overlay.js

@@ -2,13 +2,14 @@ export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Ove
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDeviceTargetClassGenerator.js';
-import '../tslib.es6-5FtW-kfi.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Pagination.js

@@ -4,24 +4,25 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-CExjlJjQ.js';
-import { I as Icon } from '../Icon-DotE-03d.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-Bq-oPnWX.js';
+import { I as Icon } from '../Icon-BZa8B7te.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Divider-DBvDCUqP.js';
-import '../Link-C53o3P6_.js';
+import '../Link-DN2LhPjD.js';
 import 'react-inlinesvg';
-import '../Tooltip-BsbXMzGd.js';
-import '../Title-Cl95USIn.js';
+import '../Tooltip-1Jbub0K6.js';
+import '../Title-CHgrIarR.js';
 
 var paginationAppearance = {
     default: {
@@ -65,7 +66,7 @@ var paginationConfig = {
     },
 };
 function Pagination(props) {
-    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === undefined ? false : _a, _b = props.allItemsCount, allItemsCount = _b === undefined ? 0 : _b, appearance = props.appearance, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === undefined ? [10, 20, 50, 100] : _c, 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, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === undefined ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputIconSrc = props.pageCountInputIconSrc, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === undefined ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === undefined ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
+    var isPageCount = props.isPageCount, _a = props.isPageCountDropdownReversed, isPageCountDropdownReversed = _a === void 0 ? false : _a, _b = props.allItemsCount, allItemsCount = _b === void 0 ? 0 : _b, appearance = props.appearance, className = props.className, marginPagesDisplayed = props.marginPagesDisplayed, nextLabel = props.nextLabel, _c = props.pageCountArray, pageCountArray = _c === void 0 ? [10, 20, 50, 100] : _c, 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, pageCountDropdownItemLabelAlign = props.pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor = props.pageCountDropdownItemLabelColor, _d = props.pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActive = _d === void 0 ? '' : _d, pageCountDropdownItemLabelSize = props.pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap = props.pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider = props.pageCountDropdownItemShowDivider, pageCountDropdownItemSize = props.pageCountDropdownItemSize, pageCountDropdownItemWidth = props.pageCountDropdownItemWidth, pageCountDropdownSet = props.pageCountDropdownSet, pageCountDropdownShape = props.pageCountDropdownShape, pageCountInputIcon = props.pageCountInputIcon, pageCountInputIconColor = props.pageCountInputIconColor, pageCountInputIconFillSize = props.pageCountInputIconFillSize, pageCountInputIconSrc = props.pageCountInputIconSrc, pageCountInputTextColor = props.pageCountInputTextColor, pageCountInputTextSize = props.pageCountInputTextSize, _e = props.pageNumber, pageNumber = _e === void 0 ? 0 : _e, pageRangeDisplayed = props.pageRangeDisplayed, _f = props.perPageCount, perPageCount = _f === void 0 ? 0 : _f, previousLabel = props.previousLabel, onChangePage = props.onChangePage, onChangePerPageCount = props.onChangePerPageCount, 
     /**
      * @deprecated The method should not be used
      */
@@ -91,7 +92,7 @@ function Pagination(props) {
     var _g = useState(false), isOpenDropdown = _g[0], setIsOpenDropdown = _g[1];
     var _h = useState(perPageCount), activeDropdownItem = _h[0], setActiveDropdownItem = _h[1];
     var pageCountDropdownArray = useMemo(function () {
-        return isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === undefined ? undefined : pageCountArray.reverse() : pageCountArray;
+        return isPageCountDropdownReversed ? pageCountArray === null || pageCountArray === void 0 ? void 0 : pageCountArray.reverse() : pageCountArray;
     }, [isPageCountDropdownReversed, pageCountArray]);
     // Toggle command menu
     var onClickCommandMenuButton = useCallback(function () {
@@ -128,31 +129,31 @@ function Pagination(props) {
                 // break element
                 breakLabel: "...", breakLinkClassName: "pagination__item-link", disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
                 // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.marginPagesDisplayed), nextClassName: "pagination__item pagination__item_next", 
+                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.marginPagesDisplayed), nextClassName: "pagination__item pagination__item_next", 
                 // next button
                 nextLabel: nextLabel, nextLinkClassName: "pagination__item-link", 
                 // page item
-                pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageRangeDisplayed), previousClassName: "pagination__item pagination__item_previous", 
+                pageClassName: "pagination__item", pageCount: paginationPagesCount, pageLinkClassName: "pagination__item-link", pageRangeDisplayed: pageRangeDisplayed || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageRangeDisplayed), previousClassName: "pagination__item pagination__item_previous", 
                 // previous button
-                previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass && "pagination_justify-content_".concat(justifyContentClass)), onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass && "gap_".concat(gapClass)), children: [jsx(Text, { size: pageCountDescTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDescTextSize), textColor: pageCountDescTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDescTextColor), children: pageCountDesc || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDesc) }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputIconColor), imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { fill: pageCountDropdownFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownFill), alignment: pageCountDropdownAlignment || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownAlignment), elevation: pageCountDropdownElevation || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownElevation), shape: pageCountDropdownShape || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownShape), isOpen: isOpenDropdown, set: pageCountDropdownSet || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownSet), setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
-                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemFill), fillHover: pageCountDropdownItemFillHover ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemSize), dividerFill: pageCountDropdownItemDividerFill ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemDividerFill), dividerSize: pageCountDropdownItemDividerSize ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemDividerSize), fillActive: pageCountDropdownItemFillActive ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemFillActive), fillActiveHover: pageCountDropdownItemFillActiveHover ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemFillActiveHover), labelTextAlign: pageCountDropdownItemLabelAlign ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 &&
+                previousLabel: previousLabel, previousLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass && "pagination_justify-content_".concat(justifyContentClass)), onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count', gapClass && "gap_".concat(gapClass)), children: [jsx(Text, { size: pageCountDescTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextSize), textColor: pageCountDescTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDescTextColor), children: pageCountDesc || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDesc) }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountInputIconColor), imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { fill: pageCountDropdownFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownFill), alignment: pageCountDropdownAlignment || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownAlignment), elevation: pageCountDropdownElevation || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownElevation), shape: pageCountDropdownShape || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownShape), isOpen: isOpenDropdown, set: pageCountDropdownSet || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownSet), setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map(function (item, index) {
+                                    return activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFill), fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerFill: pageCountDropdownItemDividerFill ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerFill), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), fillActive: pageCountDropdownItemFillActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActive), fillActiveHover: pageCountDropdownItemFillActiveHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillActiveHover), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 &&
                                             (pageCountDropdownItemShowDivider ||
-                                                (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemShowDivider)), isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemSize), dividerSize: pageCountDropdownItemDividerSize ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemDividerSize), labelTextAlign: pageCountDropdownItemLabelAlign ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
-                                            (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
+                                                (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemShowDivider)), isActive: true, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemWidth), labelTextColor: pageCountDropdownItemLabelColor ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColor), labelTextSize: pageCountDropdownItemLabelSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelSize), fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemFillHover), dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, label: item.toString(), labelTextWrap: pageCountDropdownItemLabelWrap, size: pageCountDropdownItemSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemSize), dividerSize: pageCountDropdownItemDividerSize ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemDividerSize), labelTextAlign: pageCountDropdownItemLabelAlign ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelAlign), labelTextColorActive: pageCountDropdownItemLabelColorActive ||
+                                            (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.pageCountDropdownItemLabelColorActive), showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider, isActive: false, onClick: function (event) { return handleDropdownItemClick(event, item); } }, item));
                                 }) })] })] }))] }));
 }
 

package/dist/components/Panel.js

@@ -3,14 +3,15 @@ import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-CIIZoSm5.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { G as Group } from '../Group-B9L2NTgM.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';

package/dist/components/Radio.js

@@ -1,14 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
-import { T as Text } from '../Text-D9sEeRE4.js';
-import '../tslib.es6-5FtW-kfi.js';
+import { T as Text } from '../Text-JayJa3hj.js';
+import '../tslib.es6-Bwu1Cn-t.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../utils/setViewportProperty.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
@@ -45,7 +46,7 @@ var radioConfig = {
     },
 };
 function Radio(props) {
-    var id = props.id, appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === undefined ? 'label' : _a, onChange = props.onChange;
+    var id = props.id, appearance = props.appearance, checked = props.checked, className = props.className, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
     // @ts-expect-error
     var appearanceConfig = radioConfig.appearance && radioConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
@@ -60,7 +61,7 @@ function Radio(props) {
                         // @ts-expect-error
                         id: id, type: "radio", onChange: onChange }), jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
                             ? stateBorderColorDisabledClass
-                            : stateBorderColorClass && "border-color_".concat(stateBorderColorClass), stateBorderColorHoverClass, stateShapeClass && "radio__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc }))] }));
+                            : stateBorderColorClass && "border-color_".concat(stateBorderColorClass), stateBorderColorHoverClass, stateShapeClass && "radio__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextSize), textColor: labelTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.labelTextColor), textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextSize), textColor: descTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.descTextColor), textWeight: descTextWeight, children: desc }))] }));
 }
 Radio.defaultProps = {
     shape: 'circular',