@king-design/react 3.1.1-beta.3 → 3.1.2

package/components/message/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.middle;
@@ -50,15 +51,17 @@ setDefault(function () {
   message = deepDefaults(theme, {
     message: defaults
   }).message;
+  makeMessagesStyles == null ? void 0 : makeMessagesStyles.clearCache();
+  makeMessageStyles == null ? void 0 : makeMessageStyles.clearCache();
 });
-export function makeMessagesStyles(k) {
+export var makeMessagesStyles = cache(function makeMessagesStyles(k) {
   return /*#__PURE__*/css("position:fixed;top:", message.top, ";left:", message.left, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
-}
-export function makeMessageStyles(k) {
+});
+export var makeMessageStyles = cache(function makeMessageStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.", k, "-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.", k, "-message-wrapper{position:relative;display:inline-block;&.", k, "-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.", k, "-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.", k, "-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.", k, "-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
     var color = theme.color[type === 'error' ? 'danger' : type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-message-container{background:", palette(color, -4), ";}.", k, "-message-icon{color:", color, ";}}");
   }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
-}
+});

package/components/pagination/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/pagination/styles.js

@@ -4,6 +4,7 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 import { button } from '../button/styles';
+import { cache } from '../utils';
 var btnGapMap = {
   large: '8px',
   small: '4px',
@@ -59,11 +60,12 @@ setDefault(function () {
   pagination = deepDefaults(theme, {
     pagination: defaults
   }).pagination;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.", k, "-pagination-ellipsis{background-color:transparent;border-color:transparent;}.", k, "-btns{.", k, "-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}}.", k, "-icon{font-size:18px;}}.", k, "-pagination-goto{.", k, "-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.", k, "-input-inner{text-align:center;}}.", k, "-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";.", k, "-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.", k, "-icon{font-size:", styles.iconFontSize, ";}}}");
   }), "&.", k, "-flat{.", k, "-select{&,&:hover,&.", k, "-show{border-color:transparent;}}}&.", k, "-simple{.", k, "-btn{margin:0;}.", k, "-input-inner{text-align:center;}.", k, "-pagination-text{vertical-align:middle;}}");
-}
+});

package/components/popover/content.vdt.js

@@ -1,6 +1,6 @@
 import { superCall as _$su, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact-react';
 import { Icon } from '../icon';
-import makeStyles from "./styles";
+import { makeStyles } from "./styles";
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/components/popover/styles.d.ts

@@ -1 +1,4 @@
-export default function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/popover/styles.js

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
+import { cache } from '../utils';
 var defaults = {
   width: '320px',
   padding: '8px 16px',
@@ -9,6 +10,9 @@ var defaults = {
     fontSize: '14px',
     lineHeight: '20px',
     fontWeight: 500
+  },
+  small: {
+    width: '240px'
   }
 };
 var popover;
@@ -16,7 +20,8 @@ setDefault(function () {
   popover = deepDefaults(theme, {
     popover: defaults
   }).popover;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
-  return /*#__PURE__*/css("&.", k, "-tooltip-content.", k, "-popover{width:", popover.width, ";padding:", popover.padding, ";.", k, "-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.", k, "-popover-icon{margin-right:", popover.gap, ";}.", k, "-popover-content{margin-top:", popover.gap, ";}.", k, "-tooltip-footer{text-align:right;}}");
-}
+export var makeStyles = cache(function makeStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-tooltip-content.", k, "-popover{width:", popover.width, ";padding:", popover.padding, ";.", k, "-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.", k, "-popover-icon{margin-right:", popover.gap, ";}.", k, "-popover-content{margin-top:", popover.gap, ";}.", k, "-tooltip-footer{text-align:right;}&.", k, "-small{padding:", popover.padding, ";width:", popover.small.width, ";}}");
+});

package/components/progress/styles.d.ts

@@ -1,3 +1,6 @@
 import '../../styles/global';
 export declare const types: readonly ["active", "normal", "error", "success", "warning"];
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/progress/styles.js

@@ -6,6 +6,7 @@ import { css, keyframes } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 export var types = ['active', 'normal', 'error', 'success', 'warning'];
 var sizes = ['small', 'mini'];
 var progressBarAnimation = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
@@ -81,12 +82,13 @@ setDefault(function () {
   progress = deepDefaults(theme, {
     progress: defaults
   }).progress;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;line-height:1;&.", k, "-bar{display:flex;align-items:center;.", k, "-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.", k, "-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.", k, "-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.", k, "-progress-inner-text{display:inline-block;vertical-align:top;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.", k, "-success{.", k, "-progress-bg{background:", progress.stokeColor.success, ";}}&.", k, "-error{.", k, "-progress-bg{background:", progress.stokeColor.error, ";}}&.", k, "-warning{.", k, "-progress-bg{background:", progress.stokeColor.warning, ";}}&.", k, "-active{.", k, "-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", progress.bar[size].fontSize, ";.", k, "-progress-container{height:", progress.bar[size].height, ";}}");
   }), " .", k, "-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";line-height:", progress.bar.outerText.height, ";height:", progress.bar.outerText.height, ";}}&.", k, "-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = progress.circle[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-progress-icon{font-size:", styles.iconFontSize, ";}}");
   }), ";.", k, "-progress-canvas{transform:rotate(-90deg);}.", k, "-progress-meter,.", k, "-progress-value,.", k, "-progress-animate{fill:none;}.", k, "-progress-meter{stroke:", progress.stokeColor.color, ";}.", k, "-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.", k, "-progress-animate{stroke:#fff;stroke-linecap:round;}.", k, "-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}.", k, "-progress-icon{font-size:", progress.circle.iconFontSize, ";}&.", k, "-success{.", k, "-progress-value{stroke:", progress.stokeColor.success, ";}}&.", k, "-error{.", k, "-progress-value{stroke:", progress.stokeColor.error, ";}}&.", k, "-warning{.", k, "-progress-value{stroke:", progress.stokeColor.warning, ";}}}");
-}
+});

package/components/radio/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/radio/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { deepDefaults, palette } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: '16px',
 
@@ -59,7 +60,8 @@ setDefault(function () {
   radio = deepDefaults(theme, {
     radio: defaults
   }).radio;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}&:hover{.", k, "-radio-wrapper{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.", k, "-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.", k, "-checked{.", k, "-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.", k, "-radio-wrapper{border-color:", radio.checkedColor, ";}}&.", k, "-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.", k, "-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.", k, "-checked{.", k, "-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
-}
+});

package/components/rate/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/rate/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   color: '#ccc',
 
@@ -24,7 +25,8 @@ setDefault(function () {
   rate = deepDefaults(theme, {
     rate: defaults
   }).rate;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;.", k, "-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.", k, "-full{color:", rate.activeColor, ";}&.", k, "-half{.", k, "-rate-first{color:", rate.activeColor, ";}}}.", k, "-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.", k, "-icon{font-size:", rate.iconFontSize, ";color:inherit;}&.", k, "-disabled{.", k, "-rate-item{cursor:default;&:hover{transform:none;}}}");
-}
+});

package/components/scrollSelect/styles.d.ts

@@ -14,4 +14,7 @@ declare const defaults: {
 };
 declare let scrollSelect: typeof defaults;
 export { scrollSelect };
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/scrollSelect/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.middle;
@@ -37,8 +38,9 @@ setDefault(function () {
   scrollSelect = deepDefaults(theme, {
     scrollSelect: defaults
   }).scrollSelect;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export { scrollSelect };
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("text-align:center;overflow:hidden;max-height:100%;height:", scrollSelect.height, ";user-select:none;position:relative;.", k, "-scroll-select-wrapper{transition:transform ", scrollSelect.transition, ";}&.", k, "-dragging{.", k, "-scroll-select-wrapper{transition:none;}}&.", k, "-disabled{.", k, "-scroll-select-item{cursor:not-allowed;color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-item{line-height:", scrollSelect.item.height, ";color:", scrollSelect.item.color, ";cursor:pointer;white-space:nowrap;&:hover{background:", scrollSelect.item.hoverBgColor, ";}&.", k, "-active{color:", scrollSelect.item.activeColor, ";font-size:", scrollSelect.item.activeFontSize, ";}&.", k, "-disabled{color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-append{position:absolute;top:50%;right:0;transform:translateY(-50%);}.", k, "-scroll-select-border{position:absolute;width:100%;top:50%;margin-top:calc(-", scrollSelect.item.height, " / 2);height:", scrollSelect.item.height, ";border-top:", scrollSelect.item.border, ";border-bottom:", scrollSelect.item.border, ";pointer-events:none;}");
-}
+});

package/components/select/base.js

@@ -84,7 +84,9 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     var dropdown = this.dropdownRef.value;
 
     if (dropdown.get('value')) {
-      dropdown.position();
+      do {
+        dropdown.position();
+      } while (dropdown = dropdown.showedDropdown);
     }
   };
 

package/components/select/base.vdt.js

@@ -6,7 +6,7 @@ import { TransitionGroup, Transition } from 'intact-react';
 import { Input } from '../input';
 import { Icon } from '../icon';
 import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 import { Dropdown } from '../dropdown';
 import { getRestProps, addStyle } from '../utils';
 import { Wave } from '../wave';

package/components/select/styles.d.ts

@@ -1,4 +1,13 @@
 import '../../styles/global';
-export default function makeStyles(k: string): string;
-export declare function makeMenuStyles(k: string): string;
-export declare function makeGroupStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeGroupStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/select/styles.js

@@ -4,6 +4,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.large;
@@ -172,19 +173,22 @@ setDefault(function () {
   select = deepDefaults(theme, {
     select: defaults
   }).select;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeGroupStyles == null ? void 0 : makeGroupStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.", k, "-select-main{flex:1;min-width:0;}.", k, "-select-prefix,.", k, "-select-suffix{display:flex;align-items:center;position:relative;}.", k, "-select-suffix{margin-left:", select.suffixGap, ";}.", k, "-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.", k, "-input .", k, "-input-inner{background:transparent;}&.", k, "-fluid{width:100%;}.", k, "-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.", k, "-select-clear.", k, "-show{opacity:1;pointer-events:all;+.", k, "-select-suffix-icon{opacity:0;}}}.", k, "-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.", k, "-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.", k, "-dropdown-open{border:", select.focusBorder, ";.", k, "-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.", k, "-tags{padding:3px 0;}.", k, "-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;
     return /*#__PURE__*/css("&.", k, "-", size, "{", className, ";}");
   }), "&.", k, "-inline{width:auto;border:none;min-height:0;background:transparent;.", k, "-select-placeholder,.", k, "-select-value{line-height:inherit;}}&.", k, "-flat{border:none;background:", theme.color.bg, ";color:", _flatInstanceProperty(defaults).color, ";.", k, "-tag{background:", select.tag.disabledBgColor, ";}}&.", k, "-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.", k, "-tag{background:", select.tag.disabledBgColor, ";}}&.", k, "-nowrap{.", k, "-select-values{display:flex;align-items:center;}.", k, "-tags{flex:1;}.", k, "-select-text{white-space:nowrap;overflow:hidden;text-overlay:ellipsis;}}");
-}
-export function makeMenuStyles(k) {
+});
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   var searchable = select.searchable;
   return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.", k, "-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.", k, "-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.", k, "-active{color:", select.activeColor, ";}}&.", k, "-card{display:flex;height:", select.card.height, ";.", k, "-tabs{border:none;overflow:auto;}.", k, "-select-group{flex:1;overflow:auto;}.", k, "-select-option.", k, "-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.", k, "-searchable{max-height:none;padding:", searchable.padding, ";.", k, "-select-option{padding:", searchable.optionPadding, ";}}.", k, "-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.", k, "-select-op{white-space:nowrap;.", k, "-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.", k, "-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.", k, "-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.", k, "-btn{margin-left:", searchable.footer.btnGap, ";}}.", k, "-select-option{.", k, "-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.", k, "-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
-}
-export function makeGroupStyles(k) {
+});
+export var makeGroupStyles = cache(function makeGroupStyles(k) {
   return /*#__PURE__*/css(".", k, "-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");
-}
+});

package/components/skeleton/styles.d.ts

@@ -1,6 +1,12 @@
 import '../../styles/global';
 export declare const kls: (className: string, k: string) => string;
 declare type ItemSize = 'default' | 'large' | 'small' | 'mini';
-export declare function makeStyles(k: string, size: ItemSize): string;
-export declare function makeItemStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string, size: ItemSize): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
 export {};

package/components/skeleton/styles.js

@@ -4,6 +4,7 @@ import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import { css, keyframes } from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 export var kls = function kls(className, k) {
   return k + "-skeleton-" + className;
 };
@@ -17,10 +18,12 @@ setDefault(function () {
   skeleton = deepDefaults(theme, {
     skeleton: defaults
   }).skeleton;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeStyles(k, size) {
+export var makeStyles = cache(function makeStyles(k, size) {
   return /*#__PURE__*/css("&.", k, "-animated{.", kls('item', k), "{&>.", k, "-skeleton-item-box{background:linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);background-size:400% 100%;animation:", skeletonLoading, " 1.4s ease infinite;}}}.", k, "-skeleton-items{.", kls('item', k), ":first-child{.", k, "-skeleton-item-text{width:33%;}}.", kls('item', k), ":last-child{.", k, "-skeleton-item-text{width:61%;}}}.", kls('avator-box', k), "{display:flex;&>div:last-child{flex-grow:1;padding-left:20px;}}.", k, "-skeleton-item-button,.", k, "-skeleton-item-input{height:", theme[size].height, ";}");
-}
+});
 var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "production" ? {
   name: "1jmexzm",
   styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}"
@@ -29,7 +32,7 @@ var skeletonLoading = /*#__PURE__*/keyframes(process.env.NODE_ENV === "productio
   styles: "0%{background-position:100% 50%;}to{background-position:0 50%;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export function makeItemStyles(k) {
+export var makeItemStyles = cache(function makeItemStyles(k) {
   var skeletonItem = skeleton.item;
   return /*#__PURE__*/css("&>div{background:", skeletonItem.bgColor, ";}.", k, "-skeleton-item-text{width:100%;height:16px;border-radius:4px;margin-top:16px;}.", k, "-skeleton-item-avator{width:40px;height:40px;border-radius:50%;}.", k, "-skeleton-item-image{display:flex;justify-content:center;align-items:center;width:200px;height:200px;&>svg{width:48px;height:48px;fill:", skeletonItem.bgColor, ";}}.", k, "-skeleton-item-button{width:64px;background:", skeletonItem.bgColor, ";}.", k, "-skeleton-item-input{width:160px;background:", skeletonItem.bgColor, ";}");
-}
+});

package/components/slider/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/slider/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.middle;
@@ -84,7 +85,8 @@ setDefault(function () {
   slider = deepDefaults(theme, {
     slider: defaults
   }).slider;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;outline:none;display:flex;.", k, "-slider-main{flex:1;}.", k, "-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.", k, "-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.", k, "-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.", k, "-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.", k, "-slider-thumb{box-sizing:content-box;height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";box-shadow:", slider.thumb.boxShadow, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.", k, "-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.", k, "-slider-spinner{margin-left:", slider.spinnerGap, ";}.", k, "-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.", k, "-dragging{.", k, "-slider-bar{transition:none;}.", k, "-slider-thumb-wrapper{transition:none;}}&.", k, "-disabled{color:", slider.disabled.color, ";.", k, "-slider-track-wrapper{cursor:not-allowed;}.", k, "-slider-bar{background-color:", slider.disabled.bgColor, ";}.", k, "-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.", k, "-slider-ends{span{cursor:not-allowed;}}}.", k, "-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.", k, "-active{border-color:", slider.point.activeBorderColor, ";}}.", k, "-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.", k, "-active{color:", slider.marks.activeColor, ";}}}.", k, "-slider-tooltip{white-space:nowrap;}");
-}
+});

package/components/spin/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/spin/styles.js

@@ -3,6 +3,7 @@ import { css, keyframes } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: "40px",
 
@@ -20,8 +21,9 @@ setDefault(function () {
   spin = deepDefaults(theme, {
     spin: defaults
   }).spin;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   var width = spin.strokeWidth;
   var r = 120 - 60 - width / 2;
   var c = Math.round(2 * 3.14 * r);
@@ -31,4 +33,4 @@ export function makeStyles(k) {
     var width = spin[size + "Width"];
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-spin-canvas{width:", width, ";height:", width, ";}}");
   }), " &.", k, "-center,&.", k, "-overlay .", k, "-spin-wrapper{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&.", k, "-overlay{position:absolute;z-index:", theme.midZIndex, ";top:0;bottom:0;left:0;right:0;background:rgba(255, 255, 255, .5);}");
-}
+});

package/components/spinner/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/spinner/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { deepDefaults, sizes } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get borderRadius() {
     return theme.borderRadius;
@@ -68,8 +69,9 @@ setDefault(function () {
   spinner = deepDefaults(theme, {
     spinner: defaults
   }).spinner;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;vertical-align:middle;border:", spinner.border, ";border-radius:", spinner.borderRadius, ";&:hover{border-color:", spinner.hoverBorderColor, ";.", k, "-spinner-btn{background:", spinner.hoverBtnBg, ";}.", k, "-left{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}.", k, "-right{border-radius:0 ", spinner.borderRadius, " ", spinner.borderRadius, " 0;}}.", k, "-spinner-input{width:", spinner.default.inputWidth, ";.", k, "-input-wrapper{border:none;border-radius:0;&:hover{border:none;}}&.", k, "-focus .", k, "-input-wrapper{border:none;}.", k, "-input-inner{text-align:center;}}.", k, "-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.", k, "-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var generate = function generate() {
       return /*#__PURE__*/css(".", k, "-spinner-input{padding-right:", theme[size].height, ";width:", spinner.vertical[size].width, ";}");
@@ -93,4 +95,4 @@ export function makeStyles(k) {
       return /*#__PURE__*/css("&.", k, "-", size, "{", generate(), ";}");
     }
   }), ";");
-}
+});

package/components/split/styles.d.ts

@@ -1,4 +1,7 @@
 import '../../styles/global';
 export declare type Mode = 'horizontal' | 'vertical';
 export declare const kls: (className: string, k: string) => string;
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/split/styles.js

@@ -2,6 +2,7 @@ import { theme, setDefault } from '../../styles/theme';
 import { css } from '@emotion/css';
 import '../../styles/global';
 import { deepDefaults } from '../../styles/utils';
+import { cache } from '../utils';
 export var kls = function kls(className, k) {
   return k + "-split-" + className;
 };
@@ -49,7 +50,8 @@ setDefault(function () {
   split = deepDefaults(theme, {
     split: defaults
   }).split;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:flex;height:100%;&>.", kls('first', k), ",&>.", kls('last', k), "{overflow:auto;position:relative;}&>.", kls('first', k), "{flex:0 0 auto;}&>.", kls('last', k), "{flex:auto;}&.", k, "-first-auto{&>.", kls('first', k), "{flex:auto;}&>.", kls('last', k), "{flex:0 0 auto;}}&:not(.", k, "-resizing){&>.", kls('first', k), ",&>.", kls('last', k), "{transition:all ", split.transition, ";}}&>.", kls('line-wrapper', k), "{flex:0 0 auto;text-align:center;overflow:hidden;.", kls('line', k), "{height:100%;background:", split.bgColor, ";position:relative;}.", kls('drag-lines', k), "{background:", split.boderColor, ";position:absolute;}}&.", k, "-horizontal{&>.", kls('line-wrapper', k), "{cursor:col-resize;width:", split.splitLineSize, ";.", kls('line', k), "{border-left:", split.baseBorder, ";border-right:", split.baseBorder, ";}.", kls('drag-lines', k), "{height:", split.dragLinesSize, ";width:100%;top:50%;margin-top:", split.dragLineMargin, ";box-shadow:", split.boxShadow('horizontal'), ";}}}&.", k, "-vertical{flex-direction:column;&>.", kls('line-wrapper', k), "{cursor:row-resize;height:", split.splitLineSize, ";.", kls('line', k), "{border-top:", split.baseBorder, ";border-bottom:", split.baseBorder, ";}.", kls('drag-lines', k), "{width:", split.dragLinesSize, ";height:100%;left:50%;margin-left:", split.dragLineMargin, ";box-shadow:", split.boxShadow('vertical'), ";}}}");
-}
+});

package/components/steps/index.vdt.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn } from 'intact-react';
 import { getRestProps, eachChildren } from '../utils';
 import { Step } from './step';
-import { makeStepsStyles } from './styles';
+import { makeStyles } from './styles';
 import { context as StepsContext } from './context';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -21,7 +21,7 @@ export default function ($props, $blocks, $__proto__) {
       vertical = _this$get.vertical;
 
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-steps"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-clickable"] = clickable, _classNameObj[k + "-vertical"] = vertical, _classNameObj[makeStepsStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-steps"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-clickable"] = clickable, _classNameObj[k + "-vertical"] = vertical, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var stepIndex = 0;
   var steps = [];
   eachChildren(children, function (vNode) {

package/components/steps/styles.d.ts

@@ -1,4 +1,5 @@
 import '../../styles/global';
-export declare function makeStepsStyles(k: string): string;
-export declare function makeCommonStyles(k: string): string;
-export declare function makeVerticalStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/steps/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   gap: '10px',
 
@@ -141,11 +142,12 @@ setDefault(function () {
   steps = deepDefaults(theme, {
     steps: defaults
   }).steps;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 var stepStatus = ['done', 'active', 'error'];
-export function makeStepsStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:flex;", makeCommonStyles(k), ";&.", k, "-default{", makeDefaultStyles(k), ";}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{", makeLineStyles(k), ";}&.", k, "-line-compact{", makeLineCompactStyles(k), ";}&.", k, "-simple{", makeSimpleStyles(k), ";}&.", k, "-clickable{.", k, "-done{cursor:pointer;.", k, "-step-wrapper:hover .", k, "-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(k), ";");
-}
+});
 
 function makeDefaultStyles(k) {
   var defaults = steps.default;
@@ -176,6 +178,8 @@ function makeSimpleStyles(k) {
   return /*#__PURE__*/css(".", k, "-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.", k, "-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.", k, "-step-main{font-size:", theme.default.fontSize, ";}.", k, "-step-tail{margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-mark{background:", simple.doneMarkBgColor, ";}}&.", k, "-error{.", k, "-step-mark{background:", simple.errorMarkBgColor, ";}}}");
 }
 
+;
+
 function center(flex) {
   if (flex === void 0) {
     flex = 'flex';
@@ -184,13 +188,14 @@ function center(flex) {
   return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
 }
 
-export function makeCommonStyles(k) {
+function makeCommonStyles(k) {
   return /*#__PURE__*/css(".", k, "-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
     return /*#__PURE__*/css("&.", k, "-", status, "{.", k, "-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.", k, "-step-main{color:", styles.mainColor, ";}}");
   }), ";}.", k, "-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }
-export function makeVerticalStyles(k) {
+
+function makeVerticalStyles(k) {
   var verticalLine = steps.vertical.line;
   return /*#__PURE__*/css("&.", k, "-vertical{&.", k, "-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true, k), ";.", k, "-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.", k, "-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.", k, "-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{flex-direction:column;.", k, "-step{flex:none;min-height:", verticalLine.minHeight, ";}.", k, "-step-wrapper{display:flex;width:auto;text-align:left;}.", k, "-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.", k, "-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.", k, "-step-wrapper{&:before,&:after{display:none;}}.", k, "-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}}&.", k, "-simple{.", k, "-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.", k, "-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
 }

package/components/switch/styles.d.ts

@@ -1,2 +1,5 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};