@canlooks/can-ui 0.0.34 → 0.0.36

package/dist/cjs/components/accordion/accordion.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('accordion', [
+exports.classes = (0, utils_1.defineInnerClasses)('accordion', [
     'titleRow',
     'expandIcon',
     'title',

package/dist/cjs/components/actionSheet/actionSheet.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('action-sheet', [
+exports.classes = (0, utils_1.defineInnerClasses)('action-sheet', [
     'sheet',
     'card',
     'title',

package/dist/cjs/components/alert/alert.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('alert', [
+exports.classes = (0, utils_1.defineInnerClasses)('alert', [
     'icon',
     'content',
     'title',

package/dist/cjs/components/anchorList/anchorList.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
-exports.classes = (0, utils_1.defineClasses)('anchor-list', [
+exports.classes = (0, utils_1.defineInnerClasses)('anchor-list', [
     'item',
     'indicator'
 ]);

package/dist/cjs/components/app/app.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.appStyleCallback = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('app');
+exports.classes = (0, utils_1.defineInnerClasses)('app');
 const appStyleCallback = (theme) => (0, react_1.css) `
     line-height: ${20 / 14};
     box-sizing: border-box;

package/dist/cjs/components/autocomplete/autocomplete.style.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('autocomplete');
+exports.classes = (0, utils_1.defineInnerClasses)('autocomplete');

package/dist/cjs/components/avatar/avatar.style.js

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('avatar', [
+exports.classes = (0, utils_1.defineInnerClasses)('avatar', [
     'img'
 ]);
 function useStyle({ color }) {

package/dist/cjs/components/avatar/avatarGroup.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const avatar_style_1 = require("./avatar.style");
-exports.classes = (0, utils_1.defineClasses)('avatar-group', [
+exports.classes = (0, utils_1.defineInnerClasses)('avatar-group', [
     'wrap'
 ]);
 exports.style = (0, utils_1.defineCss)(({ mode, easing }) => (0, react_1.css) `

package/dist/cjs/components/backdrop/backdrop.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('backdrop');
+exports.classes = (0, utils_1.defineInnerClasses)('backdrop');
 function useStyle({ variant }) {
     return (0, utils_1.useCss)(({ background, text, spacing }) => {
         const bgColor = variant === 'dark'

package/dist/cjs/components/badge/badge.style.js

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('badge', [
+exports.classes = (0, utils_1.defineInnerClasses)('badge', [
     'children',
     'badge',
     'badgeWrap'

package/dist/cjs/components/bottomNavigation/bottomNavigation.style.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('bottom-navigation', [
+exports.classes = (0, utils_1.defineInnerClasses)('bottom-navigation', [
     'item',
     'icon',
     'label'

package/dist/cjs/components/boundary/errorBoundary.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const placeholder_style_1 = require("../placeholder/placeholder.style");
-exports.classes = (0, utils_1.defineClasses)('error-boundary');
+exports.classes = (0, utils_1.defineInnerClasses)('error-boundary');
 exports.style = (0, utils_1.defineCss)(({ spacing, background, borderRadius }) => (0, react_1.css) `
     justify-content: flex-start;
     padding: ${spacing[8]}px;

package/dist/cjs/components/breadcrumb/breadcrumb.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('breadcrumb', [
+exports.classes = (0, utils_1.defineInnerClasses)('breadcrumb', [
     'separator'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `

package/dist/cjs/components/bubble/bubble.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const popper_style_1 = require("../popper/popper.style");
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('bubble', [
+exports.classes = (0, utils_1.defineInnerClasses)('bubble', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `

package/dist/cjs/components/bubbleConfirm/bubbleConfirm.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const popper_style_1 = require("../popper/popper.style");
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('bubble-confirm', [
+exports.classes = (0, utils_1.defineInnerClasses)('bubble-confirm', [
     'bubble',
     'icon',
     'info',

package/dist/cjs/components/button/button.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('button', [
+exports.classes = (0, utils_1.defineInnerClasses)('button', [
     'prefix',
     'suffix',
     'content'

package/dist/cjs/components/card/card.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('card');
+exports.classes = (0, utils_1.defineInnerClasses)('card');
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, boxShadow, gray }) => [
     (0, react_1.css) `
         padding: ${spacing[8]}px;

package/dist/cjs/components/cascade/cascade.style.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const tag_style_1 = require("../tag/tag.style");
 const menuItem_style_1 = require("../menuItem/menuItem.style");
 const popper_style_1 = require("../popper/popper.style");
-exports.classes = (0, utils_1.defineClasses)('cascade', [
+exports.classes = (0, utils_1.defineInnerClasses)('cascade', [
     'contentWrap',
     'placeholder',
     'backfill',

package/dist/cjs/components/checkboxBase/checkboxBase.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('checkbox-base', [
+exports.classes = (0, utils_1.defineInnerClasses)('checkbox-base', [
     'checkbox',
     'radio',
     'radioChecked',

package/dist/cjs/components/checkboxBaseGroup/checkboxBaseGroup.style.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('checkbox-base-group');
+exports.classes = (0, utils_1.defineInnerClasses)('checkbox-base-group');

package/dist/cjs/components/colorPicker/colorPicker.style.js

@@ -6,7 +6,7 @@ const utils_1 = require("../../utils");
 const inputBase_style_1 = require("../inputBase/inputBase.style");
 const palette_style_1 = require("../palette/palette.style");
 const popper_style_1 = require("../popper/popper.style");
-exports.classes = (0, utils_1.defineClasses)('color-picker', [
+exports.classes = (0, utils_1.defineInnerClasses)('color-picker', [
     'inputBase',
     'block',
     'blockColor',

package/dist/cjs/components/counter/counter.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const button_style_1 = require("../button/button.style");
 const input_style_1 = require("../input/input.style");
-exports.classes = (0, utils_1.defineClasses)('counter', [
+exports.classes = (0, utils_1.defineInnerClasses)('counter', [
     'input'
 ]);
 exports.style = (0, utils_1.defineCss)(({ divider }) => (0, react_1.css) `

package/dist/cjs/components/curd/curd.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogStyle = exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('curd', [
+exports.classes = (0, utils_1.defineInnerClasses)('curd', [
     'filter',
     'filterGridContainer',
     'filterGrid',

package/dist/cjs/components/curd/curdColumnConfig.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('curd-column-config', [
+exports.classes = (0, utils_1.defineInnerClasses)('curd-column-config', [
     'content',
     'title',
     'item',

package/dist/cjs/components/dataGrid/dataGrid.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('data-grid', [
+exports.classes = (0, utils_1.defineInnerClasses)('data-grid', [
     'container',
     'title',
     'sorter',

package/dist/cjs/components/dateTimePicker/calendar.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const menuItem_style_1 = require("../menuItem/menuItem.style");
-exports.classes = (0, utils_1.defineClasses)('calendar', [
+exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'calendarHead',
     'calendarHeadSide',
     'calendarHeadControl',

package/dist/cjs/components/dateTimePicker/dateTimePicker.style.js

@@ -7,7 +7,7 @@ const input_style_1 = require("../input/input.style");
 const calendar_style_1 = require("./calendar.style");
 const timer_style_1 = require("./timer.style");
 const popper_style_1 = require("../popper/popper.style");
-exports.classes = (0, utils_1.defineClasses)('date-time-picker', [
+exports.classes = (0, utils_1.defineInnerClasses)('date-time-picker', [
     'input',
     'container',
     'inputGroup',

package/dist/cjs/components/dateTimePicker/timer.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const menuItem_style_1 = require("../menuItem/menuItem.style");
-exports.classes = (0, utils_1.defineClasses)('timer', [
+exports.classes = (0, utils_1.defineInnerClasses)('timer', [
     'selectItem',
     'selectItemTitle',
     'selectItemBody',

package/dist/cjs/components/dateTimeRangePicker/dateTimeRangePicker.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const dateTimePicker_style_1 = require("../dateTimePicker/dateTimePicker.style");
-exports.classes = (0, utils_1.defineClasses)('date-time-rage-picker');
+exports.classes = (0, utils_1.defineInnerClasses)('date-time-rage-picker');
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
     display: flex;
     align-items: center;

package/dist/cjs/components/descriptions/descriptions.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.gridItemStyle = exports.tableStyle = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('descriptions', [
+exports.classes = (0, utils_1.defineInnerClasses)('descriptions', [
     'item',
     'label',
     'colon',

package/dist/cjs/components/dialog/dialog.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('dialog', [
+exports.classes = (0, utils_1.defineInnerClasses)('dialog', [
     'card',
     'icon',
     'content',

package/dist/cjs/components/divider/divider.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('divider', [
+exports.classes = (0, utils_1.defineInnerClasses)('divider', [
     'line',
     'beforeLine',
     'afterLine',

package/dist/cjs/components/drawer/drawer.style.js

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('drawer', [
+exports.classes = (0, utils_1.defineInnerClasses)('drawer', [
     'drawer',
     'drawerWrap',
     'titleRow',

package/dist/cjs/components/dropdown/dropdown.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const popper_style_1 = require("../popper/popper.style");
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('dropdown', [
+exports.classes = (0, utils_1.defineInnerClasses)('dropdown', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `

package/dist/cjs/components/flex/flex.style.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classes = void 0;
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('flex');
+exports.classes = (0, utils_1.defineInnerClasses)('flex');

package/dist/cjs/components/form/form.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('form', [
+exports.classes = (0, utils_1.defineInnerClasses)('form', [
     'item',
     'requiredMark',
     'helperText'

package/dist/cjs/components/grid/grid.style.js

@@ -5,7 +5,7 @@ exports.useContainerStyle = useContainerStyle;
 exports.useItemStyle = useItemStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('grid', [
+exports.classes = (0, utils_1.defineInnerClasses)('grid', [
     'item'
 ]);
 function useContainerStyle({ columnCount, columnGap, rowGap }) {

package/dist/cjs/components/image/image.style.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('image', [
+exports.classes = (0, utils_1.defineInnerClasses)('image', [
     'img',
     'skeleton',
     'mask',

package/dist/cjs/components/image/imagePreview.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const modal_style_1 = require("../modal/modal.style");
-exports.classes = (0, utils_1.defineClasses)('image-preview', [
+exports.classes = (0, utils_1.defineInnerClasses)('image-preview', [
     'button',
     'control',
     'swap',

package/dist/cjs/components/input/input.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.commonNativeInputStyle = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('input', [
+exports.classes = (0, utils_1.defineInnerClasses)('input', [
     'input',
     'adaptable'
 ]);

package/dist/cjs/components/inputBase/inputBase.style.js

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('input-base', [
+exports.classes = (0, utils_1.defineInnerClasses)('input-base', [
     'prefix',
     'content',
     'suffix',
@@ -220,12 +220,12 @@ const borderAnim = (0, react_1.keyframes) `
     }
 
     50% {
-        width: calc(100% - 2px);
+        width: calc(100% + 2px);
         height: 0;
     }
 
     100% {
-        width: calc(100% - 2px);
-        height: calc(100% - 2px);
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
     }
 `;

package/dist/cjs/components/loading/loading.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('loading', [
+exports.classes = (0, utils_1.defineInnerClasses)('loading', [
     'container',
     'mask'
 ]);

package/dist/cjs/components/loadingIndicator/loadingIndicator.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('loading-indicator', [
+exports.classes = (0, utils_1.defineInnerClasses)('loading-indicator', [
     'indicator'
 ]);
 function useStyle({ color, width }) {

package/dist/cjs/components/loadingMask/loadingMask.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
 const progress_style_1 = require("../progress/progress.style");
-exports.classes = (0, utils_1.defineClasses)('loading-mask', [
+exports.classes = (0, utils_1.defineInnerClasses)('loading-mask', [
     'indicator',
     'text',
     'progress'

package/dist/cjs/components/menu/menu.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const menuItem_style_1 = require("../menuItem/menuItem.style");
-exports.classes = (0, utils_1.defineClasses)('menu');
+exports.classes = (0, utils_1.defineInnerClasses)('menu');
 exports.style = (0, react_1.css) `
     padding: ${menuItem_style_1.menuListPadding}px;
 `;

package/dist/cjs/components/menuItem/menuItem.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('menu-item', [
+exports.classes = (0, utils_1.defineInnerClasses)('menu-item', [
     'content',
     'checkbox',
     'prefix',

package/dist/cjs/components/modal/modal.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('modal', [
+exports.classes = (0, utils_1.defineInnerClasses)('modal', [
     'modal'
 ]);
 exports.style = (0, react_1.css) `

package/dist/cjs/components/optionsBase/optionsBase.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('options-base', [
+exports.classes = (0, utils_1.defineInnerClasses)('options-base', [
     'optionsList'
 ]);
 exports.style = (0, react_1.css) `

package/dist/cjs/components/overlayBase/overlayBase.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const app_style_1 = require("../app/app.style");
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('overlay-base', [
+exports.classes = (0, utils_1.defineInnerClasses)('overlay-base', [
     'mask'
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {

package/dist/cjs/components/pagination/pagination.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const input_style_1 = require("../input/input.style");
-exports.classes = (0, utils_1.defineClasses)('pagination', [
+exports.classes = (0, utils_1.defineInnerClasses)('pagination', [
     'button',
     'pager',
     'sizer',

package/dist/cjs/components/palette/palette.style.js

@@ -4,7 +4,7 @@ exports.style = exports.getTranparentBackground = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const slider_style_1 = require("../slider/slider.style");
-exports.classes = (0, utils_1.defineClasses)('palette', [
+exports.classes = (0, utils_1.defineInnerClasses)('palette', [
     'main',
     'mask',
     'handle',

package/dist/cjs/components/pickerDialog/pickerDialog.style.js

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const divider_style_1 = require("../divider/divider.style");
-exports.classes = (0, utils_1.defineClasses)('picker-dialog', [
+exports.classes = (0, utils_1.defineInnerClasses)('picker-dialog', [
     'content',
     'selectedArea',
     'count',

package/dist/cjs/components/placeholder/placeholder.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('placeholder', [
+exports.classes = (0, utils_1.defineInnerClasses)('placeholder', [
     'image',
     'title',
     'description',

package/dist/cjs/components/popper/popper.style.js

@@ -5,7 +5,7 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const app_style_1 = require("../app/app.style");
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('popper', [
+exports.classes = (0, utils_1.defineInnerClasses)('popper', [
     'popper',
 ]);
 exports.style = (0, utils_1.defineCss)(theme => {

package/dist/cjs/components/progress/progress.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('progress', [
+exports.classes = (0, utils_1.defineInnerClasses)('progress', [
     'info',
     'icon',
     'bar',

package/dist/cjs/components/rating/rating.style.js

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('rate', [
+exports.classes = (0, utils_1.defineInnerClasses)('rate', [
     'star',
     'starBefore',
     'starAfter'

package/dist/cjs/components/resizable/resizable.js

@@ -85,7 +85,9 @@ exports.Resizable = (({ component: Component = 'div', slots = {}, slotProps = {}
     return ((0, jsx_runtime_1.jsxs)(Component, { ...props, ref: (0, utils_1.cloneRef)(innerRef, props.ref), css: (0, resizable_style_1.useStyle)({ variant, handleSize, handleColor: handleColor || 'secondary' }), className: (0, utils_1.clsx)(resizable_style_1.classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
             ...props.style,
             minWidth,
+            maxWidth,
             minHeight,
+            maxHeight,
             ...typeof innerWidth.current === 'number' && { width: innerWidth.current },
             ...typeof innerHeight.current === 'number' && { height: innerHeight.current }
         }, children: [(0, jsx_runtime_1.jsx)(Container, { ...containerProps, className: (0, utils_1.clsx)(resizable_style_1.classes.container, containerProps?.className), children: props.children }), abbrHandles.map(h => (0, jsx_runtime_1.jsx)("div", { className: h.length === 1 ? resizable_style_1.classes.edge : resizable_style_1.classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));

package/dist/cjs/components/resizable/resizable.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('resizable', [
+exports.classes = (0, utils_1.defineInnerClasses)('resizable', [
     'container',
     'edge',
     'corner'

package/dist/cjs/components/scrollbar/scrollbar.style.js

@@ -6,7 +6,7 @@ const tslib_1 = require("tslib");
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
 const color_1 = tslib_1.__importDefault(require("color"));
-exports.classes = (0, utils_1.defineClasses)('scrollbar', [
+exports.classes = (0, utils_1.defineInnerClasses)('scrollbar', [
     'scroller',
     'scrollerWrapper',
     'track',