@canlooks/can-ui 0.0.34 → 0.0.36

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

@@ -35,13 +35,13 @@ exports.ToggleButton = (({ variant = 'filled', size, color = 'primary', disabled
         if (items) {
             return items.map((p, i) => {
                 const itemValue = p[primaryKey];
-                return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, prefix: p.prefix, suffix: p.suffix, loading: p.loading, label: p.label, ...makeProps(p, itemValue, (0, utils_1.isSelected)(itemValue, innerValue.current)), children: p.children }, itemValue ?? i));
+                return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: p.ref, shape: p.shape, prefix: p.prefix, suffix: p.suffix, loading: p.loading, label: p.label, ...makeProps(p, itemValue, (0, utils_1.isSelected)(itemValue, innerValue)), children: p.children }, itemValue ?? i));
             });
         }
         return react_1.Children.map(props.children, c => {
             if ((0, react_1.isValidElement)(c)) {
                 const { props } = c;
-                return (0, react_1.cloneElement)(c, makeProps(props, props.value, (0, utils_1.isSelected)(props.value, innerValue.current)));
+                return (0, react_1.cloneElement)(c, makeProps(props, props.value, (0, utils_1.isSelected)(props.value, innerValue)));
             }
             return c;
         });

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,14 @@ function defineClasses(prefixName, names) {
     });
     return ret;
 }
+function defineInnerClasses(prefixName, names) {
+    const prefix = definePrefix('CanUI-' + (0, utils_1.humpToSegmented)(prefixName));
+    const ret = { root: prefix() };
+    names?.forEach(name => {
+        ret[name] = prefix((0, utils_1.humpToSegmented)(name));
+    });
+    return ret;
+}
 /**
  * 用于定义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.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/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',

package/dist/esm/components/button/button.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('button', [
+export const classes = defineInnerClasses('button', [
     'prefix',
     'suffix',
     'content'

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('card');
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('card');
 export const style = defineCss(({ spacing, mode, background, divider, boxShadow, gray }) => [
     css `
         padding: ${spacing[8]}px;

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as tagClasses } from '../tag/tag.style';
 import { menuListPadding } from '../menuItem/menuItem.style';
 import { popperStyleCallback } from '../popper/popper.style';
-export const classes = defineClasses('cascade', [
+export const classes = defineInnerClasses('cascade', [
     'contentWrap',
     'placeholder',
     'backfill',

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

@@ -1,7 +1,7 @@
 import { css, keyframes } from '@emotion/react';
-import { defineClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils';
 import Color from 'color';
-export const classes = defineClasses('checkbox-base', [
+export const classes = defineInnerClasses('checkbox-base', [
     'checkbox',
     'radio',
     'radioChecked',

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

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

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

@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as inputBaseClasses } from '../inputBase/inputBase.style';
 import { getTranparentBackground } from '../palette/palette.style';
 import { popperStyleCallback } from '../popper/popper.style';
-export const classes = defineClasses('color-picker', [
+export const classes = defineInnerClasses('color-picker', [
     'inputBase',
     'block',
     'blockColor',

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

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { classes as buttonClasses } from '../button/button.style';
 import { classes as inputClasses } from '../input/input.style';
-export const classes = defineClasses('counter', [
+export const classes = defineInnerClasses('counter', [
     'input'
 ]);
 export const style = defineCss(({ divider }) => css `

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineClasses, defineCss } from '../../utils';
-export const classes = defineClasses('curd', [
+import { defineInnerClasses, defineCss } from '../../utils';
+export const classes = defineInnerClasses('curd', [
     'filter',
     'filterGridContainer',
     'filterGrid',