@canlooks/can-ui 0.0.33 → 0.0.35

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

package/dist/cjs/components/segmented/segmented.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)('segmented', [
+exports.classes = (0, utils_1.defineInnerClasses)('segmented', [
     'option',
     'label',
     'prefix',

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

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const tag_style_1 = require("../tag/tag.style");
-exports.classes = (0, utils_1.defineClasses)('select', [
+exports.classes = (0, utils_1.defineInnerClasses)('select', [
     'contentWrap',
     'placeholder',
     'arrow',

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

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const alert_style_1 = require("../alert/alert.style");
-exports.classes = (0, utils_1.defineClasses)('selected-list', [
+exports.classes = (0, utils_1.defineInnerClasses)('selected-list', [
     'option',
     'optionWrap'
 ]);

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableStyle = exports.articalStyle = exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('skeleton', [
+exports.classes = (0, utils_1.defineInnerClasses)('skeleton', [
     'children',
     'artical',
     'avatar',

package/dist/cjs/components/slidableActions/slidableActions.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)('slidable-actions', [
+exports.classes = (0, utils_1.defineInnerClasses)('slidable-actions', [
     'content',
     'actions',
     'actionsLeft',

package/dist/cjs/components/slider/slider.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)('slider', [
+exports.classes = (0, utils_1.defineInnerClasses)('slider', [
     'rail',
     'railWrap',
     'track',

package/dist/cjs/components/snackbarBase/snackbarBase.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)('snackbar-base', [
+exports.classes = (0, utils_1.defineInnerClasses)('snackbar-base', [
     'itemWrap',
     'item',
     'icon',

package/dist/cjs/components/status/status.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)('status', [
+exports.classes = (0, utils_1.defineInnerClasses)('status', [
     'icon',
     'label',
     'dot'

package/dist/cjs/components/stepper/step.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)('step', [
+exports.classes = (0, utils_1.defineInnerClasses)('step', [
     'indicatorWrap',
     'indicator',
     'label',

package/dist/cjs/components/stepper/stepper.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)('stepper');
+exports.classes = (0, utils_1.defineInnerClasses)('stepper');
 exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
     display: flex;
 

package/dist/cjs/components/switch/switch.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)('switch', [
+exports.classes = (0, utils_1.defineInnerClasses)('switch', [
     'input',
     'track',
     'label',

package/dist/cjs/components/table/table.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)('table', [
+exports.classes = (0, utils_1.defineInnerClasses)('table', [
     'container',
     'cell'
 ]);

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

@@ -4,7 +4,7 @@ exports.indicatorWidth = exports.classes = void 0;
 exports.useStyle = useStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('tabs', [
+exports.classes = (0, utils_1.defineInnerClasses)('tabs', [
     'scroll',
     'scrollWrap',
     'start',

package/dist/cjs/components/tag/tag.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)('tag', [
+exports.classes = (0, utils_1.defineInnerClasses)('tag', [
     'content',
     'prefix',
     'suffix',

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

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const inputBase_style_1 = require("../inputBase/inputBase.style");
-exports.classes = (0, utils_1.defineClasses)('textarea', [
+exports.classes = (0, utils_1.defineInnerClasses)('textarea', [
     'textarea'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `

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

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 exports.useTimelineItemStyle = useTimelineItemStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
+exports.classes = (0, utils_1.defineInnerClasses)('timeline', ['item', 'opposite', 'dotArea', 'dot', 'content']);
 exports.style = (0, utils_1.defineCss)(() => (0, react_1.css) `
     display: flex;
     flex-direction: column;

package/dist/cjs/components/toggleButton/toggleButton.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)('buttonGroup');
+exports.classes = (0, utils_1.defineInnerClasses)('buttonGroup');

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

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 const popper_style_1 = require("../popper/popper.style");
 const color_1 = tslib_1.__importDefault(require("color"));
 const theme_1 = require("../theme");
-exports.classes = (0, utils_1.defineClasses)('tooltip', [
+exports.classes = (0, utils_1.defineInnerClasses)('tooltip', [
     'title'
 ]);
 function useStyle({ color }) {

package/dist/cjs/components/touchRipple/touchRipple.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)('touch-ripple', [
+exports.classes = (0, utils_1.defineInnerClasses)('touch-ripple', [
     'ripple'
 ]);
 function useStyle({ color }) {

package/dist/cjs/components/transfer/transfer.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)('transfer', [
+exports.classes = (0, utils_1.defineInnerClasses)('transfer', [
     'panel',
     'header',
     'checkbox',

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

@@ -6,7 +6,7 @@ exports.useGrowAndCollapseStyle = useGrowAndCollapseStyle;
 exports.useSlideStyle = useSlideStyle;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
-exports.classes = (0, utils_1.defineClasses)('transition-base');
+exports.classes = (0, utils_1.defineInnerClasses)('transition-base');
 function useTransitionBaseStyle({ timeout }) {
     const timeoutIsNumber = typeof timeout === 'number';
     return (0, utils_1.useCss)(() => (0, react_1.css) `

package/dist/cjs/components/tree/tree.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)('tree', [
+exports.classes = (0, utils_1.defineInnerClasses)('tree', [
     'search',
     'node',
     'indent',

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

@@ -4,7 +4,7 @@ exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const tag_style_1 = require("../tag/tag.style");
-exports.classes = (0, utils_1.defineClasses)('tree-select', [
+exports.classes = (0, utils_1.defineInnerClasses)('tree-select', [
     'contentWrap',
     'placeholder',
     'backfill',

package/dist/cjs/components/typography/typography.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)('typography', [
+exports.classes = (0, utils_1.defineInnerClasses)('typography', [
     'text',
     'ellipsis',
     'expand',

package/dist/cjs/components/upload/dropArea.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)('upload-drop-area', [
+exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
     'icon',
     'description'
 ]);

package/dist/cjs/components/upload/upload.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)('upload', [
+exports.classes = (0, utils_1.defineInnerClasses)('upload', [
     'input',
     'files',
     'file',

package/dist/cjs/components/waterfall/waterfall.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)('waterfall', [
+exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
     'item'
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {

package/dist/cjs/extensions/documentViewer/documentViewer.style.js

@@ -4,7 +4,7 @@ exports.svgStyle = exports.iframeStyle = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const loading_style_1 = require("../../components/loading/loading.style");
-exports.classes = (0, utils_1.defineClasses)('document-viewer', [
+exports.classes = (0, utils_1.defineInnerClasses)('document-viewer', [
     'svgViewer',
     'svgToolbar',
     'svgTitle',

package/dist/cjs/extensions/textFormatter/textFormatter.style.js

@@ -3,6 +3,6 @@ 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)('text-formatter');
+exports.classes = (0, utils_1.defineInnerClasses)('text-formatter');
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
 `);

package/dist/cjs/utils/style.d.ts

@@ -19,6 +19,17 @@ export declare function defineClasses<T extends string>(prefixName: string, name
 } & {
     root: string;
 };
+/**
+ * @private 携带`CanUI`前缀，内部使用
+ */
+export declare function defineInnerClasses<T extends string>(prefixName: string): {
+    root: string;
+};
+export declare function defineInnerClasses<T extends string>(prefixName: string, names: T[]): {
+    [P in T]: string;
+} & {
+    root: string;
+};
 /**
  * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
  * @param callback

package/dist/cjs/utils/style.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.definePrefix = definePrefix;
 exports.defineClasses = defineClasses;
+exports.defineInnerClasses = defineInnerClasses;
 exports.defineCss = defineCss;
 exports.useCss = useCss;
 exports.colorTransfer = colorTransfer;
@@ -22,11 +23,10 @@ const color_1 = tslib_1.__importDefault(require("color"));
  * @param prefixName
  */
 function definePrefix(prefixName) {
-    const _prefix = `CanUI-${prefixName}`;
     return (...names) => {
         return names.length
-            ? names.map(name => `${_prefix}-${name}`).join(' ')
-            : _prefix;
+            ? names.map(name => `${prefixName}-${name}`).join(' ')
+            : prefixName;
     };
 }
 function defineClasses(prefixName, names) {
@@ -37,6 +37,9 @@ function defineClasses(prefixName, names) {
     });
     return ret;
 }
+function defineInnerClasses(prefixName, names) {
+    return defineClasses(`CanUI-${prefixName}`, names);
+}
 /**
  * 用于定义css，返回一个可调用的函数，可直接传入emotion的css属性
  * @param callback

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('accordion', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('accordion', [
     'titleRow',
     'expandIcon',
     'title',

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('action-sheet', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('action-sheet', [
     'sheet',
     'card',
     'title',

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('alert', [
+export const classes = defineInnerClasses('alert', [
     'icon',
     'content',
     'title',

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

@@ -1,6 +1,6 @@
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { css } from '@emotion/react';
-export const classes = defineClasses('anchor-list', [
+export const classes = defineInnerClasses('anchor-list', [
     'item',
     'indicator'
 ]);

package/dist/esm/components/app/app.js

@@ -26,7 +26,7 @@ export function InnerApp({ component: Component = 'div', theme, children, fill =
         dialog: App.dialog = new AppDialogMethods(),
         message: App.message = new AppMessageMethods(),
         notification: App.notification = new AppNotificationMethods(),
-        actionSheet: App.actionSheet = new AppActionSheetMethods(),
+        actionSheet: App.actionSheet = new AppActionSheetMethods()
     }), []);
     return (_jsxs(AppContext, { value: appValue, children: [Component
                 ? _jsx(Component, { ...props, css: [

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('app');
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('app');
 export const appStyleCallback = (theme) => css `
     line-height: ${20 / 14};
     box-sizing: border-box;

package/dist/esm/components/app/appDialog.js

@@ -3,11 +3,16 @@ import { memo, useState } from 'react';
 import { Dialog } from '../dialog';
 import { StatusIcon } from '../status';
 export 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) {
+    }
 }
 export const AppDialog = memo(({ methods }) => {
     const [stacks, setStacks] = useState([]);

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

@@ -1,2 +1,2 @@
-import { defineClasses } from '../../utils';
-export const classes = defineClasses('autocomplete');
+import { defineInnerClasses } from '../../utils';
+export const classes = defineInnerClasses('autocomplete');

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('avatar', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('avatar', [
     'img'
 ]);
 export function useStyle({ color }) {

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as avatarClasses } from './avatar.style';
-export const classes = defineClasses('avatar-group', [
+export const classes = defineInnerClasses('avatar-group', [
     'wrap'
 ]);
 export const style = defineCss(({ mode, easing }) => css `

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, useCss } from '../../utils';
+import { defineInnerClasses, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('backdrop');
+export const classes = defineInnerClasses('backdrop');
 export function useStyle({ variant }) {
     return useCss(({ background, text, spacing }) => {
         const bgColor = variant === 'dark'

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
-export const classes = defineClasses('badge', [
+import { defineInnerClasses, useColor, useCss } from '../../utils';
+export const classes = defineInnerClasses('badge', [
     'children',
     'badge',
     'badgeWrap'

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('bottom-navigation', [
+export const classes = defineInnerClasses('bottom-navigation', [
     'item',
     'icon',
     'label'

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

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as placeholderClasses } from '../placeholder/placeholder.style';
-export const classes = defineClasses('error-boundary');
+export const classes = defineInnerClasses('error-boundary');
 export const style = defineCss(({ spacing, background, borderRadius }) => css `
     justify-content: flex-start;
     padding: ${spacing[8]}px;

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('breadcrumb', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('breadcrumb', [
     'separator'
 ]);
 export const style = defineCss(({ spacing, text }) => css `

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { popperArrowStyle } from '../popper/popper.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('bubble', [
+export const classes = defineInnerClasses('bubble', [
     'content'
 ]);
 export const style = defineCss(({ background, boxShadow, borderRadius }) => css `

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { popperArrowStyle } from '../popper/popper.style';
 import { zIndex } from '../theme';
-export const classes = defineClasses('bubble-confirm', [
+export const classes = defineInnerClasses('bubble-confirm', [
     'bubble',
     'icon',
     'info',