@itcase/ui 1.3.25 → 1.3.27

package/dist/cjs/components/Image.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/Input.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Input = require('../../Input-zkYoZhQk.js');
+var Input = require('../../Input-ffioh1sj.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 
 
 

package/dist/cjs/components/InputMask.js

@@ -10,6 +10,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 
 var inputMaskConfig = {
     appearance: undefined,
@@ -26,7 +27,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/cjs/components/InputPassword.js

@@ -4,22 +4,23 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Icon = require('../../Icon-ByLHEhHL.js');
+var Icon = require('../../Icon-B_bS-o4g.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Text-COHpLTYr.js');
-require('../../Title-BduD-TXE.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Text-Beslj4Ns.js');
+require('../../Title-DBaHcpvB.js');
 
 var InputPasswordAppearance = {
     dev: {

package/dist/cjs/components/Label.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Label = require('../../Label-GEBQXoVJ.js');
+var Label = require('../../Label-HKRKV3mn.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -11,13 +11,14 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-COHpLTYr.js');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Title-BduD-TXE.js');
+require('../../Text-Beslj4Ns.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 
 

package/dist/cjs/components/Link.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Link = require('../../Link-CoAhRbFg.js');
+var Link = require('../../Link-CxWmYMyL.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('react');
@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/List.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Link = require('../../Link-CoAhRbFg.js');
+var Link = require('../../Link-CxWmYMyL.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -12,6 +12,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader-D_53c71f.js');
+var Loader = require('../../Loader-Dn036JwE.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDeviceTargetClassGenerator.js');
@@ -11,11 +11,12 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-COHpLTYr.js');
+require('../../Text-Beslj4Ns.js');
 
 
 

package/dist/cjs/components/Logo.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Link = require('../../Link-CoAhRbFg.js');
+var Link = require('../../Link-CxWmYMyL.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -12,6 +12,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -30,7 +31,7 @@ function Logo(props) {
     var alignClass = classGenerator.alignClass, alignDirectionClass = classGenerator.alignDirectionClass, alignItemsClass = classGenerator.alignItemsClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var logo = useStyles.useStyles(props).styles;
-    return (jsxRuntime.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 ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.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) }) })) : (jsxRuntime.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 (jsxRuntime.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 ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.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) }) })) : (jsxRuntime.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) })) }));
 }
 
 exports.Logo = Logo;

package/dist/cjs/components/Menu.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var MenuItem = require('../../MenuItem-Ybh5Mpoi.js');
+var MenuItem = require('../../MenuItem-amqx61Y0.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -12,11 +12,12 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Text-COHpLTYr.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Text-Beslj4Ns.js');
 
 var menuAppearance = {
     dev: {},
@@ -37,7 +38,7 @@ function Menu(props) {
     // @ts-expect-error
     var menuStyles = useStyles.useStyles(props).styles;
     return (jsxRuntime.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: jsxRuntime.jsxs("div", { className: "menu__wrapper", style: menuStyles, children: [before, children ||
-                    (items === null || items === undefined ? undefined : items.map(function (item, i) { return (jsxRuntime.jsx(MenuItem.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 (jsxRuntime.jsx(MenuItem.MenuItem, { label: item.label, onClick: onClickItem }, "menuItem_".concat(item.id || i))); })), after] }) }));
 }
 Menu.defaultProps = {
     direction: 'horizontal',

package/dist/cjs/components/MenuItem.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var MenuItem = require('../../MenuItem-Ybh5Mpoi.js');
+var MenuItem = require('../../MenuItem-amqx61Y0.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -11,12 +11,13 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Link-CoAhRbFg.js');
-require('../../Text-COHpLTYr.js');
+require('../../Link-CxWmYMyL.js');
+require('../../Text-Beslj4Ns.js');
 
 
 

package/dist/cjs/components/Modal.js

@@ -7,17 +7,18 @@ var ReactDOM = require('react-dom');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
 var Overlay = require('../../Overlay-CCx7yAPc.js');
-var Loader = require('../../Loader-D_53c71f.js');
+var Loader = require('../../Loader-Dn036JwE.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../../Text-COHpLTYr.js');
+require('../../Text-Beslj4Ns.js');
 
 var modalAppearance = {
     dev: {},
@@ -31,7 +32,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)
@@ -51,7 +52,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 = React.useState(null), modalElement = _g[0], setModalElement = _g[1];
     var _h = React.useState(initialIsOpen), isOpen = _h[0], setIsOpen = _h[1];
@@ -150,7 +151,7 @@ var Modal = React.forwardRef(function Modal(props, ref) {
         // Any valid React child: JSX, strings, arrays, etc.
         isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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 && (jsxRuntime.jsx("div", { className: "modal-content__close", onClick: closeModal, children: closeButton })), jsxRuntime.jsx("div", { className: "modal-content__wrapper", children: children })] }), jsxRuntime.jsx(Overlay.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/cjs/components/ModalSheetBottom.js

@@ -11,6 +11,7 @@ require('lodash/upperFirst');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/styleAttributes.js');
 
 function ModalSheetBottom(props) {

package/dist/cjs/components/Notification.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Text = require('../../Text-Beslj4Ns.js');
 var Notifications = require('../context/Notifications.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
@@ -13,6 +13,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
@@ -58,13 +59,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.useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
     var notificationStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+    return (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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 && (jsxRuntime.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/cjs/components/Overlay.js

@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/Pagination.js

@@ -6,24 +6,25 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var DropdownItem = require('../../DropdownItem-DFE1HsyX.js');
-var Icon = require('../../Icon-ByLHEhHL.js');
-var Text = require('../../Text-COHpLTYr.js');
+var DropdownItem = require('../../DropdownItem-FNOztnTT.js');
+var Icon = require('../../Icon-B_bS-o4g.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
 require('../../Divider-Goh6mpPK.js');
-require('../../Link-CoAhRbFg.js');
+require('../../Link-CxWmYMyL.js');
 require('react-inlinesvg');
-require('../../Tooltip-CyZCVyba.js');
-require('../../Title-BduD-TXE.js');
+require('../../Tooltip-CNua1g76.js');
+require('../../Title-DBaHcpvB.js');
 
 var paginationAppearance = {
     default: {
@@ -67,7 +68,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
      */
@@ -93,7 +94,7 @@ function Pagination(props) {
     var _g = React.useState(false), isOpenDropdown = _g[0], setIsOpenDropdown = _g[1];
     var _h = React.useState(perPageCount), activeDropdownItem = _h[0], setActiveDropdownItem = _h[1];
     var pageCountDropdownArray = React.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 = React.useCallback(function () {
@@ -130,31 +131,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 && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass && "gap_".concat(gapClass)), children: [jsxRuntime.jsx(Text.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) }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.Text, { size: pageCountInputTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputTextSize), textColor: pageCountInputTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputTextColor), children: activeDropdownItem }), jsxRuntime.jsx(Icon.Icon, { fillSize: pageCountInputIconFillSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputIconFillSize), iconFill: pageCountInputIconColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.pageCountInputIconColor), imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsxRuntime.jsx(DropdownItem.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 ? (jsxRuntime.jsx(DropdownItem.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 && (jsxRuntime.jsxs("div", { className: clsx(className, 'pagination__count', gapClass && "gap_".concat(gapClass)), children: [jsxRuntime.jsx(Text.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) }), jsxRuntime.jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass)), onClick: onClickCommandMenuButton, children: [jsxRuntime.jsx(Text.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 }), jsxRuntime.jsx(Icon.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 }), jsxRuntime.jsx(DropdownItem.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 ? (jsxRuntime.jsx(DropdownItem.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)) : (jsxRuntime.jsx(DropdownItem.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)) : (jsxRuntime.jsx(DropdownItem.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/cjs/components/Panel.js

@@ -5,14 +5,15 @@ var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-pMTTxQH4.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Group = require('../../Group-BQ4Ic0jX.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');

package/dist/cjs/components/Radio.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
-var Text = require('../../Text-COHpLTYr.js');
+var Text = require('../../Text-Beslj4Ns.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
 require('lodash/camelCase');
@@ -11,6 +11,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -47,7 +48,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.useDeviceTargetClassGenerator(props, appearanceConfig);
@@ -62,7 +63,7 @@ function Radio(props) {
                         // @ts-expect-error
                         id: id, type: "radio", onChange: onChange }), jsxRuntime.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" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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',

package/dist/cjs/components/RangeSlider.js

@@ -12,6 +12,7 @@ require('lodash/castArray');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');