@canlooks/can-ui 0.0.33 → 0.0.35

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.js

@@ -31,7 +31,7 @@ function InnerApp({ component: Component = 'div', theme, children, fill = true,
         dialog: exports.App.dialog = new appDialog_1.AppDialogMethods(),
         message: exports.App.message = new appMessage_1.AppMessageMethods(),
         notification: exports.App.notification = new appNotification_1.AppNotificationMethods(),
-        actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods(),
+        actionSheet: exports.App.actionSheet = new appActionSheet_1.AppActionSheetMethods()
     }), []);
     return ((0, jsx_runtime_1.jsxs)(AppContext, { value: appValue, children: [Component
                 ? (0, jsx_runtime_1.jsx)(Component, { ...props, css: [

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/app/appDialog.js

@@ -6,11 +6,16 @@ const react_1 = require("react");
 const dialog_1 = require("../dialog");
 const status_1 = require("../status");
 class AppDialogMethods {
-    async info(props, ...args) { }
-    async success(props, ...args) { }
-    async warning(props, ...args) { }
-    async error(props, ...args) { }
-    async confirm(props, ...args) { }
+    async info(props, ...args) {
+    }
+    async success(props, ...args) {
+    }
+    async warning(props, ...args) {
+    }
+    async error(props, ...args) {
+    }
+    async confirm(props, ...args) {
+    }
 }
 exports.AppDialogMethods = AppDialogMethods;
 exports.AppDialog = (0, react_1.memo)(({ methods }) => {

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/form/formItem.js

@@ -12,21 +12,6 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
     const { formValue, setFieldValue, itemsContainer, formRef, ...context } = (0, form_1.useFormContext)();
     requiredMark ??= context.requiredMark ?? '*';
     variant ??= context.variant ?? 'grid';
-    /**
-     * --------------------------------------------------------------------
-     * 重置与初始化
-     */
-    const shouldValidate = (0, react_1.useRef)(false);
-    const isTouched = (0, react_1.useRef)(false);
-    // formRef的resetForm()方法会传入新的initialValue
-    const reset = (value = formValue) => {
-        shouldValidate.current = isTouched.current = false;
-        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
-            (0, utils_1.queryDeep)(value, field, () => initialValue);
-        }
-        innerError.current && setInnerError(false);
-    };
-    (0, react_1.useMemo)(reset, []);
     /**
      * --------------------------------------------------------------------
      * 字段值
@@ -83,13 +68,29 @@ const FormItem = ({ ref, wrapperRef, field, initialValue, label = '', rules, req
      * --------------------------------------------------------------------
      * 依赖更新自动校验
      */
+    const shouldValidate = (0, react_1.useRef)(false);
     const dependencyValues = (0, react_1.useMemo)(() => {
         return formValue && dependencies?.map(d => (0, utils_1.queryDeep)(formValue, d));
     }, [formValue, ...dependencies || []]);
     (0, react_1.useMemo)(() => {
+        // 跳过首次渲染
         shouldValidate.current && validate().then();
         shouldValidate.current = true;
     }, [fieldValue, ...dependencyValues || []]);
+    /**
+     * --------------------------------------------------------------------
+     * 重置与初始化
+     */
+    const isTouched = (0, react_1.useRef)(false);
+    // formRef的resetForm()方法会传入新的initialValue，否则使用`formValue`
+    const reset = (value = formValue) => {
+        shouldValidate.current = isTouched.current = false;
+        if (typeof field !== 'undefined' && value && typeof initialValue !== 'undefined') {
+            (0, utils_1.queryDeep)(value, field, () => initialValue);
+        }
+        innerError.current && setInnerError(false);
+    };
+    (0, react_1.useMemo)(reset, []);
     /**
      * --------------------------------------------------------------------
      * 挂载formItemRef

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',