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

package/es/components/colorpicker/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 = {
   get height() {
     return theme.default.height;
@@ -114,17 +115,19 @@ setDefault(function () {
   colorpicker = deepDefaults(theme, {
     colorpicker: defaults
   }).colorpicker;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
 });
 var _sizes = ['large', 'small', 'mini'];
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.", k, "-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.", k, "-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
     var styles = colorpicker[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
   }), "&.", k, "-disabled{.", k, "-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
-}
-export function makePanelStyles(k) {
+});
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-track-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
-}
+});
 export function makeAlphaBgColor(_ref, k) {
   var r = _ref.r,
       g = _ref.g,

package/es/components/copy/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/copy/styles.js

@@ -2,7 +2,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles(k) {
+import { cache } from '../utils';
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "t3aops",
     styles: "cursor:pointer;vertical-align:middle"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "cursor:pointer;vertical-align:middle",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

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

@@ -46,6 +46,15 @@ declare const defaults: {
 };
 declare let datepicker: typeof defaults;
 export { datepicker };
-export declare function makePanelStyles(k: string): string;
-export declare function makeCalendarStyles(k: string): string;
-export declare function makeTimeStyles(k: string): string;
+export declare const makePanelStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeCalendarStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeTimeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/datepicker/styles.js

@@ -2,6 +2,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 = {
   width: "300px",
   padding: "16px 16px 4px",
@@ -77,14 +78,17 @@ setDefault(function () {
   datepicker = deepDefaults(theme, {
     datepicker: defaults
   }).datepicker;
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
+  makeCalendarStyles == null ? void 0 : makeCalendarStyles.clearCache();
+  makeTimeStyles == null ? void 0 : makeTimeStyles.clearCache();
 });
 export { datepicker };
-export function makePanelStyles(k) {
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
-}
-export function makeCalendarStyles(k) {
+});
+export var makeCalendarStyles = cache(function makeCalendarStyles(k) {
   return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
-}
-export function makeTimeStyles(k) {
+});
+export var makeTimeStyles = cache(function makeTimeStyles(k) {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
-}
+});

package/es/components/diagram/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/diagram/styles.js

@@ -2,7 +2,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles(k) {
+import { cache } from '../utils';
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "ohhwil",
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

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

@@ -1,4 +1,13 @@
 import '../../styles/global';
-export declare function makeDialogStyles(k: string): string;
-export declare function makeWrapperStyles(k: string): string;
-export declare function makeAlertStyles(k: string): string;
+export declare const makeDialogStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeWrapperStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeAlertStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/es/components/dialog/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 = {
   width: '800px',
   bgColor: '#fff',
@@ -81,24 +82,27 @@ setDefault(function () {
   dialog = deepDefaults(theme, {
     dialog: defaults
   }).dialog;
+  makeDialogStyles == null ? void 0 : makeDialogStyles.clearCache();
+  makeWrapperStyles == null ? void 0 : makeWrapperStyles.clearCache();
+  makeAlertStyles == null ? void 0 : makeAlertStyles.clearCache();
 });
-export function makeDialogStyles(k) {
+export var makeDialogStyles = cache(function makeDialogStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.", k, "-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", dialog[size + "Width"], ";}");
   }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";position:relative;}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
-}
-export function makeWrapperStyles(k) {
+});
+export var makeWrapperStyles = cache(function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
   // so we must set fixed with important to .${k}-dialog-overlay
   return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);overflow:auto;}");
-}
-export function makeAlertStyles(k) {
+});
+export var makeAlertStyles = cache(function makeAlertStyles(k) {
   var _context2;
 
   return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-dialog-tip-icon{color:", color, ";}}");
   }), " &:not(.", k, "-confirm){.", k, "-dialog-cancel{display:none;}}&.", k, "-with-title{.", k, "-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.", k, "-dialog-tip-icon{float:left;.", k, "-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.", k, "-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.", k, "-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
-}
+});

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

@@ -2,5 +2,8 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Placement = ValueOf<typeof placements>;
 export declare const placements: readonly ["top", "right", "bottom", "left"];
-export declare function makeStyles(overlay: boolean, k: string): string;
+export declare const makeStyles: {
+    (overlay: boolean, k: string): string;
+    clearCache(): {};
+};
 export {};

package/es/components/drawer/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';
 export var placements = ['top', 'right', 'bottom', 'left'];
 var defaults = {
   get transition() {
@@ -18,11 +19,12 @@ setDefault(function () {
   drawer = deepDefaults(theme, {
     drawer: defaults
   }).drawer;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(overlay, k) {
+export var makeStyles = cache(function makeStyles(overlay, k) {
   var borderRadius = theme.largeBorderRadius;
   return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
-}
+});
 
 function makePlacementStyles(k, placement, styles, transform, borderRadius) {
   return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");

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

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

package/es/components/dropdown/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, getLeft, getRight } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   item: {
     get height() {
@@ -47,10 +48,12 @@ setDefault(function () {
   dropdown = deepDefaults(theme, {
     dropdown: defaults
   }).dropdown;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.", k, "-dropdown{display:block;}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.", k, "-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.", k, "-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.", k, "-checkbox,.", k, "-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{vertical-align:text-bottom;}.", k, "-checkbox-text,.", k, "-radio-text{vertical-align:baseline;}");
-}
+});

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

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

package/es/components/editable/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 = {
   iconGap: '0 0 0 8px',
   // invalid
@@ -17,8 +18,9 @@ setDefault(function () {
   editable = deepDefaults(theme, {
     editable: defaults
   }).editable;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export { editable };
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
-}
+});

package/es/components/form/index.spec.js

@@ -1362,4 +1362,47 @@ describe('Form', function () {
       }
     }, _callee8);
   })));
+  it('should validate on init when setting validateOnStart prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context12;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this4.Form = Form;
+                _this4.FormItem = FormItem;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}} validateOnStart />\n                </Form>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+            _context13.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.exist;
+
+          case 6:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee9);
+  })));
 });

package/es/components/form/item.d.ts

@@ -10,6 +10,7 @@ export interface FormItemProps {
     htmlFor?: string;
     hideLabel?: boolean;
     fluid?: boolean;
+    validateOnStart?: boolean;
 }
 export interface FormItemEvents {
     change: [Event];

package/es/components/form/item.js

@@ -24,7 +24,8 @@ var typeDefs = {
   label: String,
   htmlFor: String,
   hideLabel: Boolean,
-  fluid: Boolean
+  fluid: Boolean,
+  validateOnStart: Boolean
 };
 export var FormItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(FormItem, _Component);

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

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

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

@@ -4,6 +4,10 @@ export function useDirty(getValidate) {
   var instance = useInstance();
   var isDirty = useState(false);
 
+  if (instance.get('validateOnStart')) {
+    dirty();
+  }
+
   function onChange(e) {
     dirty();
     instance.trigger('change', e);

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