@itcase/ui 1.2.14 → 1.2.15

package/dist/{DropdownItem-Dy3DG4XJ.js → DropdownItem-CEPQWGQ5.js}

@@ -54,7 +54,8 @@ function Dropdown(props) {
             // Remove event listener for current dropdown on unmount
             window.removeEventListener('click', onClickWindow);
         };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',

package/dist/{DropdownItem-agqkY0-H.js → DropdownItem-sLbGv_08.js}

@@ -52,7 +52,8 @@ function Dropdown(props) {
             // Remove event listener for current dropdown on unmount
             window.removeEventListener('click', onClickWindow);
         };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     var fillClass = useDeviceTargetClass(props, {
         prefix: 'fill_',
         propsKey: 'fill',

package/dist/{Group-C9TsGwJy.js → Group-12uup5mu.js}

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
 import { useStyles } from './hooks/useStyles.js';
@@ -9,7 +10,7 @@ var groupConfig = {
         groupConfig.appearance = newComponent;
     },
 };
-function Group(props) {
+var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
     var contentAlignClass = useDeviceTargetClass(props, {
         prefix: 'group_content-align_',
@@ -119,10 +120,7 @@ function Group(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-}
-Group.defaultProps = {
-    tag: 'div',
-};
+                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
 
 export { Group as G, groupConfig as g };

package/dist/{Group-9Mpk5tQD.js → Group-BDuYmoBK.js}

@@ -1,6 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('./cjs/hooks/useDeviceTargetClass.js');
 var useStyles = require('./cjs/hooks/useStyles.js');
@@ -11,7 +12,7 @@ var groupConfig = {
         groupConfig.appearance = newComponent;
     },
 };
-function Group(props) {
+var Group = React.forwardRef(function Group(props, ref) {
     var id = props.id, children = props.children, appearance = props.appearance, className = props.className, dataTour = props.dataTour, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, name = props.name, set = props.set, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, onClick = props.onClick;
     var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'group_content-align_',
@@ -121,11 +122,8 @@ function Group(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
-}
-Group.defaultProps = {
-    tag: 'div',
-};
+                    .toLowerCase()), borderTypeClass, elevationClass, justifyContentClass), ref: ref, name: name, "data-tour": dataTour, htmlFor: htmlFor, id: id, style: Object.assign({}, groupStyles, style), onClick: onClick, children: horizontalScroll ? (jsxRuntime.jsx("div", { className: "group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
+});
 
 exports.Group = Group;
 exports.groupConfig = groupConfig;

package/dist/cjs/components/CookiesWarning.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var Cookies = require('js-cookie');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Button = require('../../Button-VFc2pmvE.js');
-var Group = require('../../Group-9Mpk5tQD.js');
+var Group = require('../../Group-BDuYmoBK.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');
 require('lodash/camelCase');

package/dist/cjs/components/Dropdown.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var DropdownItem = require('../../DropdownItem-Dy3DG4XJ.js');
+var DropdownItem = require('../../DropdownItem-CEPQWGQ5.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/FormField.js

@@ -13,7 +13,7 @@ require('react-select');
 var index = require('./Select.js');
 require('react');
 require('../../Badge-2JkquAEb.js');
-require('../../Group-9Mpk5tQD.js');
+require('../../Group-BDuYmoBK.js');
 var Switch = require('../../Switch-B5yVEqxz.js');
 require('react-inlinesvg');
 require('../../Link-BoJdm1hz.js');

package/dist/cjs/components/Group.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var Group = require('../../Group-9Mpk5tQD.js');
+var Group = require('../../Group-BDuYmoBK.js');
 require('react/jsx-runtime');
+require('react');
 require('clsx');
 require('../hooks/useDeviceTargetClass.js');
-require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');

package/dist/cjs/components/Page.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var alignDirection = require('../constants/componentProps/alignDirection.js');
+var align = require('../constants/componentProps/align.js');
+var fill = require('../constants/componentProps/fill.js');
+var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
+var position = require('../constants/componentProps/position.js');
+var verticalResizeMode = require('../constants/componentProps/verticalResizeMode.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+require('react');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function Page(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, id = props.id; props.tag; var type = props.type;
+    var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var resizeHorizontalClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-horizontal_',
+        propsKey: 'horizontalResizing',
+    });
+    var resizeVerticalClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-vertical_',
+        propsKey: 'verticalResizing',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var _a = useStyles.useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsxRuntime.jsx("div", { id: id, className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: styles, children: jsxRuntime.jsxs("div", { className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'), style: wrapperStyles, children: [before, children, after] }) }));
+}
+Page.propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    before: PropTypes.string,
+    after: PropTypes.string,
+    id: PropTypes.string,
+    fill: PropTypes.oneOf(fill.default),
+    fillMobile: PropTypes.oneOf(fill.default),
+    fillTablet: PropTypes.oneOf(fill.default),
+    fillDesktop: PropTypes.oneOf(fill.default),
+    type: PropTypes.string,
+    tag: PropTypes.string,
+    position: PropTypes.oneOf(position.default),
+    positionMobile: PropTypes.oneOf(position.default),
+    positionTablet: PropTypes.oneOf(position.default),
+    positionDesktop: PropTypes.oneOf(position.default),
+    wrapperPosition: PropTypes.oneOf(position.default),
+    wrapperPositionMobile: PropTypes.oneOf(position.default),
+    wrapperPositionTablet: PropTypes.oneOf(position.default),
+    wrapperPositionDesktop: PropTypes.oneOf(position.default),
+    horizontalResizing: PropTypes.oneOf(horizontalResizeMode.default),
+    horizontalResizingMobile: PropTypes.oneOf(horizontalResizeMode.default),
+    horizontalResizingTablet: PropTypes.oneOf(horizontalResizeMode.default),
+    horizontalResizingDesktop: PropTypes.oneOf(horizontalResizeMode.default),
+    verticalResizing: PropTypes.oneOf(verticalResizeMode.default),
+    verticalResizingMobile: PropTypes.oneOf(verticalResizeMode.default),
+    verticalResizingTablet: PropTypes.oneOf(verticalResizeMode.default),
+    verticalResizingDesktop: PropTypes.oneOf(verticalResizeMode.default),
+    align: PropTypes.oneOf(align.default),
+    alignMobile: PropTypes.oneOf(align.default),
+    alignTablet: PropTypes.oneOf(align.default),
+    alignDesktop: PropTypes.oneOf(align.default),
+    alignDirection: PropTypes.oneOf(alignDirection.default),
+    alignDirectionMobile: PropTypes.oneOf(alignDirection.default),
+    alignDirectionTablet: PropTypes.oneOf(alignDirection.default),
+    alignDirectionDesktop: PropTypes.oneOf(alignDirection.default),
+};
+
+exports.Page = Page;

package/dist/cjs/components/Pagination.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../../DropdownItem-Dy3DG4XJ.js');
+var DropdownItem = require('../../DropdownItem-CEPQWGQ5.js');
 var Icon = require('../../Icon-mG_ucnJz.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 require('lodash/castArray');

package/dist/cjs/components/Panel.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
-var Group = require('../../Group-9Mpk5tQD.js');
+var Group = require('../../Group-BDuYmoBK.js');
 var Text = require('../../Text-_YhyTsQ1.js');
-require('react');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -23,7 +23,7 @@ var panelConfig = {
         panelConfig.appearance = newComponent;
     },
 };
-function Panel(props) {
+var Panel = React.forwardRef(function Panel(props, ref) {
     var appearance = props.appearance, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, dataTour = props.dataTour, title = props.title, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextSize = props.descTextSize, descTextColor = props.descTextColor, descTextWeight = props.descTextWeight, verticalScroll = props.verticalScroll;
     var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
         prefix: 'panel_align-content_',
@@ -100,9 +100,8 @@ function Panel(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsx("div", { className: "panel__header", children: jsxRuntime.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsx("div", { className: "panel__footer", children: jsxRuntime.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
-}
-Panel.defaultProps = {};
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), ref: ref, "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsx("div", { className: "panel__header", children: jsxRuntime.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsx("div", { className: "panel__footer", children: jsxRuntime.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+});
 
 exports.Panel = Panel;
 exports.panelConfig = panelConfig;

package/dist/cjs/components/Response.js

@@ -7,7 +7,7 @@ var SVG = require('react-inlinesvg');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../hooks/useStyles.js');
 var Button = require('../../Button-VFc2pmvE.js');
-var Group = require('../../Group-9Mpk5tQD.js');
+var Group = require('../../Group-BDuYmoBK.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Title = require('../../Title-zwP6c2U2.js');
 require('lodash/castArray');

package/dist/cjs/components/Select.js

@@ -10,7 +10,7 @@ var CreatableSelect = require('react-select/creatable');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Text = require('../../Text-_YhyTsQ1.js');
 var Badge = require('../../Badge-2JkquAEb.js');
-var Group = require('../../Group-9Mpk5tQD.js');
+var Group = require('../../Group-BDuYmoBK.js');
 var Divider = require('../../Divider-BjB5MD6u.js');
 require('react-inlinesvg');
 require('../hooks/useStyles.js');

package/dist/components/CookiesWarning.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Cookies from 'js-cookie';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { B as Button } from '../Button-YvFWfIzn.js';
-import { G as Group } from '../Group-C9TsGwJy.js';
+import { G as Group } from '../Group-12uup5mu.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';
 import 'lodash/camelCase';

package/dist/components/Dropdown.js

@@ -1,4 +1,4 @@
-export { D as Dropdown, a as DropdownItem } from '../DropdownItem-agqkY0-H.js';
+export { D as Dropdown, a as DropdownItem } from '../DropdownItem-sLbGv_08.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/FormField.js

@@ -11,7 +11,7 @@ import 'react-select';
 import { SelectInput } from './Select.js';
 import 'react';
 import '../Badge-CrhdvxY6.js';
-import '../Group-C9TsGwJy.js';
+import '../Group-12uup5mu.js';
 import { S as Switch } from '../Switch-DEXsrPCo.js';
 import 'react-inlinesvg';
 import '../Link-BSquFKSX.js';

package/dist/components/Group.js

@@ -1,8 +1,8 @@
-export { G as Group, g as groupConfig } from '../Group-C9TsGwJy.js';
+export { G as Group, g as groupConfig } from '../Group-12uup5mu.js';
 import 'react/jsx-runtime';
+import 'react';
 import 'clsx';
 import '../hooks/useDeviceTargetClass.js';
-import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';

package/dist/components/Page.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import alignDirectionProps from '../constants/componentProps/alignDirection.js';
+import alignProps from '../constants/componentProps/align.js';
+import fillProps from '../constants/componentProps/fill.js';
+import horizontalResizeModeProps from '../constants/componentProps/horizontalResizeMode.js';
+import positionProps from '../constants/componentProps/position.js';
+import verticalResizeModeProps from '../constants/componentProps/verticalResizeMode.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { useStyles } from '../hooks/useStyles.js';
+import 'react';
+import 'lodash/castArray';
+import 'lodash/camelCase';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+
+function Page(props) {
+    var after = props.after, before = props.before, children = props.children, className = props.className, id = props.id; props.tag; var type = props.type;
+    var alignDirectionClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'alignDirection',
+    });
+    var alignClass = useDeviceTargetClass(props, {
+        prefix: 'align_',
+        propsKey: 'align',
+    });
+    var resizeHorizontalClass = useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-horizontal_',
+        propsKey: 'horizontalResizing',
+    });
+    var resizeVerticalClass = useDeviceTargetClass(props, {
+        prefix: 'wrapper_resize-vertical_',
+        propsKey: 'verticalResizing',
+    });
+    var fillClass = useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var positionClass = useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    var _a = useStyles(props), styles = _a.styles, wrapperStyles = _a.wrapper;
+    return (jsx("div", { id: id, className: clsx('page', className, type && "".concat(className, "_type_").concat(type), fillClass, resizeHorizontalClass, resizeVerticalClass, positionClass), style: styles, children: jsxs("div", { className: clsx('page__wrapper', alignDirectionClass, alignClass, 'content'), style: wrapperStyles, children: [before, children, after] }) }));
+}
+Page.propTypes = {
+    children: PropTypes.any,
+    className: PropTypes.string,
+    before: PropTypes.string,
+    after: PropTypes.string,
+    id: PropTypes.string,
+    fill: PropTypes.oneOf(fillProps),
+    fillMobile: PropTypes.oneOf(fillProps),
+    fillTablet: PropTypes.oneOf(fillProps),
+    fillDesktop: PropTypes.oneOf(fillProps),
+    type: PropTypes.string,
+    tag: PropTypes.string,
+    position: PropTypes.oneOf(positionProps),
+    positionMobile: PropTypes.oneOf(positionProps),
+    positionTablet: PropTypes.oneOf(positionProps),
+    positionDesktop: PropTypes.oneOf(positionProps),
+    wrapperPosition: PropTypes.oneOf(positionProps),
+    wrapperPositionMobile: PropTypes.oneOf(positionProps),
+    wrapperPositionTablet: PropTypes.oneOf(positionProps),
+    wrapperPositionDesktop: PropTypes.oneOf(positionProps),
+    horizontalResizing: PropTypes.oneOf(horizontalResizeModeProps),
+    horizontalResizingMobile: PropTypes.oneOf(horizontalResizeModeProps),
+    horizontalResizingTablet: PropTypes.oneOf(horizontalResizeModeProps),
+    horizontalResizingDesktop: PropTypes.oneOf(horizontalResizeModeProps),
+    verticalResizing: PropTypes.oneOf(verticalResizeModeProps),
+    verticalResizingMobile: PropTypes.oneOf(verticalResizeModeProps),
+    verticalResizingTablet: PropTypes.oneOf(verticalResizeModeProps),
+    verticalResizingDesktop: PropTypes.oneOf(verticalResizeModeProps),
+    align: PropTypes.oneOf(alignProps),
+    alignMobile: PropTypes.oneOf(alignProps),
+    alignTablet: PropTypes.oneOf(alignProps),
+    alignDesktop: PropTypes.oneOf(alignProps),
+    alignDirection: PropTypes.oneOf(alignDirectionProps),
+    alignDirectionMobile: PropTypes.oneOf(alignDirectionProps),
+    alignDirectionTablet: PropTypes.oneOf(alignDirectionProps),
+    alignDirectionDesktop: PropTypes.oneOf(alignDirectionProps),
+};
+
+export { Page };

package/dist/components/Pagination.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem-agqkY0-H.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem-sLbGv_08.js';
 import { I as Icon } from '../Icon-BanAVsve.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import 'lodash/castArray';

package/dist/components/Panel.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { G as Group } from '../Group-C9TsGwJy.js';
+import { G as Group } from '../Group-12uup5mu.js';
 import { T as Text } from '../Text-CG3xPG27.js';
-import 'react';
 import 'lodash/castArray';
 import 'lodash/camelCase';
 import '../context/UIContext.js';
@@ -21,7 +21,7 @@ var panelConfig = {
         panelConfig.appearance = newComponent;
     },
 };
-function Panel(props) {
+var Panel = React.forwardRef(function Panel(props, ref) {
     var appearance = props.appearance, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, dataTour = props.dataTour, title = props.title, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextSize = props.descTextSize, descTextColor = props.descTextColor, descTextWeight = props.descTextWeight, verticalScroll = props.verticalScroll;
     var alignContentClass = useDeviceTargetClass(props, {
         prefix: 'panel_align-content_',
@@ -98,8 +98,7 @@ function Panel(props) {
             ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
                 "border-width_".concat(appearanceConfig.borderWidth)
                     .replace(/([A-Z])/g, '-$1')
-                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsx("div", { className: "panel__header", children: jsx(Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsx("div", { className: "panel__footer", children: jsx(Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
-}
-Panel.defaultProps = {};
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), ref: ref, "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsx("div", { className: "panel__header", children: jsx(Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsx("div", { className: clsx('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsx("div", { className: "panel__footer", children: jsx(Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+});
 
 export { Panel, panelConfig };

package/dist/components/Response.js

@@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { B as Button } from '../Button-YvFWfIzn.js';
-import { G as Group } from '../Group-C9TsGwJy.js';
+import { G as Group } from '../Group-12uup5mu.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { T as Title } from '../Title-BfSFPJtJ.js';
 import 'lodash/castArray';

package/dist/components/Select.js

@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { T as Text } from '../Text-CG3xPG27.js';
 import { B as Badge } from '../Badge-CrhdvxY6.js';
-import { G as Group } from '../Group-C9TsGwJy.js';
+import { G as Group } from '../Group-12uup5mu.js';
 import { D as Divider } from '../Divider-U5UdY-ef.js';
 import 'react-inlinesvg';
 import '../hooks/useStyles.js';

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

@@ -1,9 +1,5 @@
+import React from 'react';
 import { IGroupConfig, IGroupProps } from './Group.interface';
 declare const groupConfig: IGroupConfig;
-declare function Group(props: IGroupProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Group {
-    var defaultProps: {
-        tag: string;
-    };
-}
+declare const Group: React.ForwardRefExoticComponent<IGroupProps & React.RefAttributes<unknown>>;
 export { Group, groupConfig };

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

@@ -1,7 +1,5 @@
+import React from 'react';
 import { IPanelConfig, IPanelProps } from './Panel.interface';
 declare const panelConfig: IPanelConfig;
-declare function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Panel {
-    var defaultProps: {};
-}
+declare const Panel: React.ForwardRefExoticComponent<IPanelProps & React.RefAttributes<unknown>>;
 export { Panel, panelConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",