@king-design/intact 3.1.1 → 3.1.3

package/es/components/form/styles.js

@@ -3,6 +3,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 = {
   item: {
     gap: "24px",
@@ -48,14 +49,16 @@ setDefault(function () {
   form = deepDefaults(theme, {
     form: defaults
   }).form;
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
+  makeFormStyles == null ? void 0 : makeFormStyles.clearCache();
 });
-export function makeItemStyles(k) {
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
-}
-export function makeFormStyles(k) {
+});
+export var makeFormStyles = cache(function makeFormStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("&.", k, "-inline{.", k, "-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.", k, "-form-label{width:auto;}}&.", k, "-vertical{.", k, "-form-item{flex-direction:column;}.", k, "-form-label{width:auto;text-align:left;padding:0;justify-content:start;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.", k, "-inline{.", k, "-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
-}
+});

package/es/components/grid/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeRowStyles(k: string): string;
-export declare function makeColStyles(k: string): string;
+export declare const makeRowStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeColStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/grid/styles.js

@@ -1,21 +1,20 @@
 import { css } from '@emotion/css';
-import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 import { breakpoints, responsiveMap } from './constants';
-var defaults = {};
-var grid;
-setDefault(function () {
-  grid = deepDefaults(theme, {
-    grid: defaults
-  }).grid;
-});
-export function makeRowStyles(k) {
+import { cache } from '../utils'; // const defaults = {};
+// let grid: typeof defaults;
+// setDefault(() => {
+// grid = deepDefaults(theme, {grid: defaults}).grid;
+// makeRowStyles?.clearCache();
+// makeColStyles?.clearCache();
+// });
+
+export var makeRowStyles = cache(function makeRowStyles(k) {
   return /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;&.", k, "-justify-start{justify-content:flex-start;}&.", k, "-justify-end{justify-content:flex-end;}&.", k, "-justify-center{justify-content:center;}&.", k, "-justify-between{justify-content:space-between;}&.", k, "-justify-around{justify-content:space-around;}&.", k, "-justify-evenly{justify-content:space-evenly;}&.", k, "-align-top{align-items:flex-start;}&.", k, "-align-bottom{align-items:flex-end;}&.", k, "-align-middle{align-items:center;}&.", k, "-align-stretch{align-items:stretch;}&.", k, "-align-baseline{align-items:baseline;}");
-}
-export function makeColStyles(k) {
+});
+export var makeColStyles = cache(function makeColStyles(k) {
   return /*#__PURE__*/css("position:relative;width:100%;.", k, "-col-wrapper{height:100%;}", makeBreakpointsCols(k), ";");
-}
+});
 
 function makeBreakpointsCols(k) {
   var styles = [];

package/es/components/icon/index.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn } from 'intact';
 import { addStyle, getRestProps } from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/es/components/icon/styles.d.ts

@@ -2,4 +2,7 @@ import '../../styles/fonts/ionicons';
 import '../../styles/global';
 export declare const colors: readonly ["primary", "warning", "danger", "success"];
 export declare const sizes: readonly ["large", "small", "mini"];
-export default function makeStyles(k: string, color?: string): string;
+export declare const makeStyles: {
+    (k: string, color?: string | undefined): string;
+    clearCache(): {};
+};

package/es/components/icon/styles.js

@@ -6,6 +6,7 @@ import { rotate } from '../../styles/keyframes';
 import { makeIconStyles } from '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.small;
@@ -31,10 +32,11 @@ setDefault(function () {
   icon = deepDefaults(theme, {
     icon: defaults
   }).icon;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export var colors = ['primary', 'warning', 'danger', 'success'];
 export var sizes = ['large', 'small', 'mini'];
-export default function makeStyles(k, color) {
+export var makeStyles = cache(function makeStyles(k, color) {
   // create the global icon styles
   makeIconStyles(k);
   return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -44,4 +46,4 @@ export default function makeStyles(k, color) {
     var _color = theme.color[color];
     return /*#__PURE__*/css("&.", k, "-", color, "{color:", _color, ";&.", k, "-hoverable:hover{color:", palette(_color, -2), ";}}");
   }), " &.", k, "-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{font-size:inherit;}&.", k, "-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && /*#__PURE__*/css("&:hover{color:", palette(color, -2), "!important;}"), ";&:hover{color:", theme.color.primary, ";}}&.", k, "-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
-}
+});

package/es/components/input/styles.d.ts

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

package/es/components/input/styles.js

@@ -5,6 +5,7 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 import { Input } from './';
+import { cache } from '../utils';
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
@@ -128,8 +129,10 @@ setDefault(function () {
   input = deepDefaults(theme, {
     input: defaults
   }).input;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeSearchStyles == null ? void 0 : makeSearchStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -140,10 +143,10 @@ export function makeStyles(k) {
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.", k, "-resize-", type, "{.", k, "-textarea{resize:", type, ";}}");
   }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
-}
-export function makeSearchStyles(k) {
+});
+export var makeSearchStyles = cache(function makeSearchStyles(k) {
   return /*#__PURE__*/css("position:relative;display:inline-block;.", k, "-input{transition:width ", input.transition, ";}.", k, "-btn{position:absolute;top:0;right:0;z-index:1;}&.", k, "-default .", k, "-btn:hover{background:transparent;}.", k, "-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.", k, "-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size == 'default') return;
     return /*#__PURE__*/css(".", k, "-input.", k, "-", size, "{width:", input[size].height, ";}");
   }), ";.", k, "-input{width:", input.default.height, ";}.", k, "-input-inner{padding:0!important;}}&.", k, "-line{.", k, "-input-wrapper{border-width:0;}&.", k, "-open{.", k, "-input-wrapper{border-bottom-width:1px;}.", k, "-btn:hover{background:transparent;}}}");
-}
+});

package/es/components/layout/styles.d.ts

@@ -1,7 +1,19 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
 export declare function getCollapseWidth(collapsedWidth?: string | number): string;
-export declare function makeLayoutStyles(k: string): string;
-export declare function makeHeaderStyles(k: string): string;
-export declare function makeAsideStyles(k: string): string;
-export declare function makeBodyStyles(k: string): string;
+export declare const makeLayoutStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeHeaderStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeAsideStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeBodyStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/layout/styles.js

@@ -6,6 +6,7 @@ import '../../styles/global';
 import { menu } from '../menu/styles';
 import { isNullOrUndefined } from 'intact-shared';
 import { getStyle } from './helpers';
+import { cache } from '../utils';
 var sizes = ['small', 'large'];
 export var themes = ['light', 'dark', 'white'];
 var defaults = {
@@ -62,27 +63,31 @@ setDefault(function () {
   layout = deepDefaults(theme, {
     layout: defaults
   }).layout;
+  makeLayoutStyles == null ? void 0 : makeLayoutStyles.clearCache();
+  makeHeaderStyles == null ? void 0 : makeHeaderStyles.clearCache();
+  makeAsideStyles == null ? void 0 : makeAsideStyles.clearCache();
+  makeBodyStyles == null ? void 0 : makeBodyStyles.clearCache();
 });
 export function getCollapseWidth(collapsedWidth) {
   return isNullOrUndefined(collapsedWidth) ? layout.collapsedWidth : getStyle(collapsedWidth);
 }
-export function makeLayoutStyles(k) {
+export var makeLayoutStyles = cache(function makeLayoutStyles(k) {
   return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.", k, "-has-aside{flex-direction:row;}.", k, "-layout-footer{padding:", layout.footerPadding, ";}.", k, "-layout-body{flex:1;}");
-}
-export function makeHeaderStyles(k) {
+});
+export var makeHeaderStyles = cache(function makeHeaderStyles(k) {
   return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.", k, "-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.", k, "-menu{background:transparent!important;}&.", k, "-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.", k, "-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.", k, "-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
   }), ";");
-}
-export function makeAsideStyles(k) {
+});
+export var makeAsideStyles = cache(function makeAsideStyles(k) {
   return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
   }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
-}
-export function makeBodyStyles(k) {
+});
+export var makeBodyStyles = cache(function makeBodyStyles(k) {
   return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");
-}
+});

package/es/components/menu/styles.d.ts

@@ -62,7 +62,19 @@ declare const defaults: {
 };
 declare let menu: typeof defaults;
 export { menu };
-export declare function makeMenuStyles(k: string): string;
-export declare function makeTitleStyles(k: string): string;
-export declare function makeItemStyles(k: string): string;
-export declare function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft?: string): string[];
+export declare const makeMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeTitleStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeNestedMenuStyles: {
+    (k: string, hasIcon: boolean, parentPaddingLeft?: string | undefined): string;
+    clearCache(): {};
+};

package/es/components/menu/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, getLeft, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var sizes = ['large', 'small'];
 var defaults = {
   get transition() {
@@ -115,9 +116,13 @@ setDefault(function () {
   menu = deepDefaults(theme, {
     menu: defaults
   }).menu;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
+  makeTitleStyles == null ? void 0 : makeTitleStyles.clearCache();
+  makeNestedMenuStyles == null ? void 0 : makeNestedMenuStyles.clearCache();
 });
 export { menu };
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   var _context;
 
   // we must increase the priority by adding &.${k}-menu
@@ -129,20 +134,20 @@ export function makeMenuStyles(k) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}}");
   }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-arrow{display:none;}}&.", k, "-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;align-items:center;.", k, "-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
-}
-export function makeTitleStyles(k) {
+});
+export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;
   return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";&:hover{color:", menu.item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
-}
-export function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
+  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", item.height, ";&:hover{color:", item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", item.hoverColor, "!important;background:", item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", item.dotFontSize, ";transform:scale(.4);}");
+});
+export var makeNestedMenuStyles = cache(function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
   if (parentPaddingLeft === void 0) {
     parentPaddingLeft = getLeft(menu.item.padding);
   }
 
   var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width : '') + " + " + menu.icon.gap;
   return [/*#__PURE__*/css("&.", k, "-menu{width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", paddingLeft, ");}}"), paddingLeft];
-}
+});

package/es/components/message/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeMessagesStyles(k: string): string;
-export declare function makeMessageStyles(k: string): string;
+export declare const makeMessagesStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeMessageStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/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/es/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/es/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/es/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';
 import { Icon } from '../icon';
-import makeStyles from "./styles";
+import { makeStyles } from "./styles";
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/es/components/popover/styles.d.ts

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

package/es/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',
@@ -19,7 +20,8 @@ setDefault(function () {
   popover = deepDefaults(theme, {
     popover: defaults
   }).popover;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+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/es/components/portal.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject } from 'intact';
+import { Component, createCommentVNode, createTextVNode, mount, patch, remove, inject, unmount, removeVNodeDom } from 'intact';
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 import { BaseDialog } from './dialog/base';
@@ -51,7 +51,9 @@ export var Portal = /*#__PURE__*/function (_Component) {
     var nextProps = nextVNode.props;
     var fakeContainer = document.createDocumentFragment();
     (mountedQueue.priority || mountedQueue).push(function () {
-      var parentDom = _this2.$lastInput.dom.parentElement;
+      var parentDom = _this2.$lastInput.dom.parentElement; // maybe the <!-- portal --> has been removed by react, #938
+
+      if (!parentDom) return;
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
 
@@ -97,7 +99,14 @@ export var Portal = /*#__PURE__*/function (_Component) {
   };
 
   _proto.$unmount = function $unmount(vNode, nextVNode) {
-    remove(vNode.props.children, this.container, false); // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+    var children = vNode.props.children;
+    unmount(children, null);
+
+    if (this.container) {
+      // maybe the <!-- portal --> has been removed by react, #938
+      // remove(children, this.container, false);
+      removeVNodeDom(children, this.container);
+    }
 
     _Component.prototype.$unmount.call(this, vNode, nextVNode);
   };
@@ -109,6 +118,9 @@ export var Portal = /*#__PURE__*/function (_Component) {
       } else {
         this.container = container(parentDom, anchor);
       }
+    } else {
+      // let below logic to set container to default if container does not exist.
+      this.container = null;
     }
 
     if (!this.container) {

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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(): {};
+};