@king-design/intact 3.0.1 → 3.1.0-beta.0

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

@@ -14,4 +14,5 @@ export declare class Col extends Component<ColProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<ColProps>>;
     private breakpoints;
+    private config;
 }

package/es/components/grid/col.js

@@ -5,6 +5,7 @@ import { Component } from 'intact';
 import template from './col.vdt';
 import { PrimitiveValue, Value, breakpoints } from './constants';
 import { useBreakpoints } from './useBreakpoints';
+import { useConfigContext } from '../config';
 export var baseTypeDefs = {
   span: PrimitiveValue,
   offset: PrimitiveValue,
@@ -32,6 +33,7 @@ export var Col = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.breakpoints = useBreakpoints();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/grid/col.vdt.js

@@ -20,22 +20,19 @@ export default function ($props, $blocks, $__proto__) {
       pull = _this$get.pull,
       order = _this$get.order;
 
+  var k = this.config.k;
   return _$cc(GutterContext.Consumer, {
     'children': function children(gutter) {
       var _extends2, _$cn2;
 
-      var classNameObj = _extends((_extends2 = {
-        'k-col': true
-      }, _extends2["k-" + span] = span, _extends2["k-offset-" + offset] = offset, _extends2["k-pull-" + pull] = pull, _extends2["k-push-" + push] = push, _extends2["k-order-" + order] = order, _extends2[className] = className && !gutter, _extends2[makeColStyles()] = true, _extends2), _this.breakpoints.getBreakpointsClassName());
+      var classNameObj = _extends((_extends2 = {}, _extends2[k + "-col"] = true, _extends2[k + "-" + span] = span, _extends2[k + "-offset-" + offset] = offset, _extends2[k + "-pull-" + pull] = pull, _extends2[k + "-push-" + push] = push, _extends2[k + "-order-" + order] = order, _extends2[className] = className && !gutter, _extends2[makeColStyles(k)] = true, _extends2), _this.breakpoints.getBreakpointsClassName(k));
 
       var newStyle = gutter ? gutterStyle(gutter, style, 'padding') : style;
       return _$cv('div', _extends({
         'className': _$cn(classNameObj)
       }, getRestProps(_this), {
         'style': newStyle
-      }), gutter ? _$ce(2, 'div', _children, 0, _$cn((_$cn2 = {
-        'k-col-wrapper': true
-      }, _$cn2[className] = className, _$cn2))) : _children);
+      }), gutter ? _$ce(2, 'div', _children, 0, _$cn((_$cn2 = {}, _$cn2[k + "-col-wrapper"] = true, _$cn2[className] = className, _$cn2))) : _children);
     }
   });
 }

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

@@ -9,4 +9,5 @@ export declare class Row extends Component<RowProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<RowProps>>;
     private gutter;
+    private config;
 }

package/es/components/grid/row.js

@@ -4,6 +4,7 @@ import { Component } from 'intact';
 import template from './row.vdt';
 import { useGutter } from './useGutter';
 import { Value } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   gutter: Value,
   justify: ['start', 'end', 'center', 'between', 'around', 'evenly'],
@@ -23,6 +24,7 @@ export var Row = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.gutter = useGutter();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/grid/row.vdt.js

@@ -17,9 +17,8 @@ export default function ($props, $blocks, $__proto__) {
       justify = _this$get.justify,
       align = _this$get.align;
 
-  var classNameObj = (_classNameObj = {
-    'k-row': true
-  }, _classNameObj["k-justify-" + justify] = justify, _classNameObj["k-align-" + align] = align, _classNameObj[className] = className, _classNameObj[makeRowStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-row"] = true, _classNameObj[k + "-justify-" + justify] = justify, _classNameObj[k + "-align-" + align] = align, _classNameObj[className] = className, _classNameObj[makeRowStyles(k)] = true, _classNameObj);
   var gutter = this.gutter.getGutter();
   var newStyle = gutter ? gutterStyle(gutter, style, 'margin') : style;
   return _$cv('div', _extends({

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

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

package/es/components/grid/styles.js

@@ -1,5 +1,3 @@
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
@@ -12,30 +10,22 @@ setDefault(function () {
     grid: defaults
   }).grid;
 });
-export function makeRowStyles() {
-  return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
-    name: "1d2b9xj",
-    styles: "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;}"
-  } : {
-    name: "1d2b9xj",
-    styles: "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;}",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  });
+export 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;}");
 }
-var colsStyles = makeBreakpointsCols();
-export function makeColStyles() {
-  return /*#__PURE__*/css("position:relative;width:100%;.k-col-wrapper{height:100%;}", colsStyles, ";");
+export function makeColStyles(k) {
+  return /*#__PURE__*/css("position:relative;width:100%;.", k, "-col-wrapper{height:100%;}", makeBreakpointsCols(k), ";");
 }
 
-function makeBreakpointsCols() {
+function makeBreakpointsCols(k) {
   var styles = [];
-  styles.push(makeCols(''));
+  styles.push(makeCols(k));
 
   for (var i = breakpoints.length - 1; i >= 0; i--) {
     var breakpoint = breakpoints[i];
     if (breakpoint === 'xs') continue;
     styles.push("@media " + responsiveMap[breakpoint] + " {");
-    styles.push(makeCols("-" + breakpoint));
+    styles.push(makeCols(k + "-" + breakpoint));
     styles.push('}');
   }
 
@@ -47,7 +37,7 @@ function makeCols(prefix) {
 
   for (var i = 0; i < 24; i++) {
     var percentage = String(i / 24 * 100) + '%';
-    colsStyles.push("\n            &.k" + prefix + "-" + i + " {\n                width: " + percentage + ";\n            }\n            &.k" + prefix + "-offset-" + i + " {\n                margin-left: " + percentage + ";\n            }\n            &.k" + prefix + "-order-" + i + " {\n                order: " + i + ";\n            }\n            &.k" + prefix + "-push-" + i + " {\n                left: " + percentage + ";\n            }\n            &.k" + prefix + "-pull-" + i + " {\n                right: " + percentage + ";\n            }\n        ");
+    colsStyles.push("\n            &." + prefix + "-" + i + " {\n                width: " + percentage + ";\n            }\n            &." + prefix + "-offset-" + i + " {\n                margin-left: " + percentage + ";\n            }\n            &." + prefix + "-order-" + i + " {\n                order: " + i + ";\n            }\n            &." + prefix + "-push-" + i + " {\n                left: " + percentage + ";\n            }\n            &." + prefix + "-pull-" + i + " {\n                right: " + percentage + ";\n            }\n        ");
   }
 
   return colsStyles.join('');

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

@@ -1,3 +1,3 @@
 export declare function useBreakpoints(): {
-    getBreakpointsClassName: () => Record<string, true>;
+    getBreakpointsClassName: (k: string) => Record<string, true>;
 };

package/es/components/grid/useBreakpoints.js

@@ -20,12 +20,12 @@ export function useBreakpoints() {
     });
   });
 
-  function getBreakpointsClassName() {
+  function getBreakpointsClassName(k) {
     var classNameObj = {};
     breakpoints.forEach(function (breakpoint) {
       var value = breakpointsValue[breakpoint];
       if (isNullOrUndefined(value)) return;
-      var prefix = breakpoint === 'xs' ? 'k-' : "k-" + breakpoint + "-";
+      var prefix = breakpoint === 'xs' ? k + "-" : k + "-" + breakpoint + "-";
 
       if (!isNullOrUndefined(value.span)) {
         classNameObj["" + prefix + value.span] = true;

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

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<number>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<number>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<number | undefined>;
 };
 export declare function useGutter(): {
     getGutter: () => import("./constants").PrimitiveValue | null | undefined;

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

@@ -13,4 +13,5 @@ export declare class Icon extends Component<IconProps> {
     static typeDefs: Required<TypeDefs<IconProps>>;
     static defaults: () => Partial<IconProps>;
     private colors;
+    private config;
 }

package/es/components/icon/index.js

@@ -6,6 +6,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact';
 import template from './index.vdt';
 import { colors, sizes } from './styles';
+import { useConfigContext } from '../config';
 var typeDefs = {
   size: _concatInstanceProperty(_context = []).call(_context, sizes, ['default', String, Number]),
   color: String,
@@ -36,6 +37,7 @@ export var Icon = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
     _this.colors = defaultColors;
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -19,28 +19,24 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       disabled = _this$get.disabled;
 
-  var classNameObj = (_classNameObj = {
-    'k-icon': true,
-    'k-rotate': rotate,
-    'k-hoverable': !disabled && hoverable,
-    'k-disabled': disabled
-  }, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-icon"] = true, _classNameObj[k + "-rotate"] = rotate, _classNameObj[k + "-hoverable"] = !disabled && hoverable, _classNameObj[k + "-disabled"] = disabled, _classNameObj[className] = className, _classNameObj);
   var _style = {};
 
   if (/^\d+$/.test(size)) {
     _style.fontSize = size + 'px';
   } else if (size !== 'default') {
-    classNameObj["k-" + size] = true;
+    classNameObj[k + "-" + size] = true;
   }
 
   if (this.colors.indexOf(color) > -1) {
-    classNameObj["k-" + color] = color !== 'default';
-    classNameObj[makeStyles()] = true;
+    classNameObj[k + "-" + color] = color !== 'default';
+    classNameObj[makeStyles(k)] = true;
   } else if (color) {
     _style.color = color;
-    classNameObj[makeStyles(color)] = true;
+    classNameObj[makeStyles(k, color)] = true;
   } else {
-    classNameObj[makeStyles()] = true;
+    classNameObj[makeStyles(k)] = true;
   }
 
   return _$cv('i', _extends({

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

@@ -1,6 +1,5 @@
-import '../../styles/fonts/iconfont';
 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(color?: string): string;
+export default function makeStyles(k: string, color?: string): string;

package/es/components/icon/styles.js

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import { rotate } from '../../styles/keyframes';
-import '../../styles/fonts/iconfont';
+import { makeIconStyles } from '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
 var defaults = {
@@ -34,12 +34,14 @@ setDefault(function () {
 });
 export var colors = ['primary', 'warning', 'danger', 'success'];
 export var sizes = ['large', 'small', 'mini'];
-export default function makeStyles(color) {
+export default 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) {
     var fontSize = icon.fontSize[size];
-    return /*#__PURE__*/css("&.k-", size, "{font-size:", fontSize, ";}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", fontSize, ";}");
   }), " ", _mapInstanceProperty(colors).call(colors, function (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 && "\n                &:hover {\n                    color: " + palette(color, -2) + " !important;\n                }\n            ", ";&:hover{color:", theme.color.primary, ";}}&.k-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
+    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/index.d.ts

@@ -60,6 +60,7 @@ export declare class Input<V extends Value = Value> extends Component<InputProps
     private autoRows;
     private showPassword;
     private focusHook;
+    private config;
     focus(): void;
     blur(): void;
     select(): void;

package/es/components/input/index.js

@@ -10,6 +10,7 @@ import { useFrozen } from './useFrozen';
 import { useAutoRows } from './useAutoRows';
 import { useShowPassword } from './useShowPassword';
 import { useFocus } from './useFocus';
+import { useConfigContext } from '../config';
 export * from './search';
 var typeDefs = {
   type: String,
@@ -68,6 +69,7 @@ export var Input = /*#__PURE__*/function (_Component) {
     _this.autoRows = useAutoRows(_this.inputRef);
     _this.showPassword = useShowPassword();
     _this.focusHook = useFocus();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -11,8 +11,10 @@ import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
+      _$cn2,
       children,
       _this = this,
+      _$cn5,
       _children;
 
   $blocks || ($blocks = {});
@@ -59,9 +61,8 @@ export default function ($props, $blocks, $__proto__) {
       isFocus = _this$focusHook.isFocus,
       focusInputOnClick = _this$focusHook.focusInputOnClick;
   var isNotAutoRows = isStringOrNumber(rows) && rows !== 'auto';
-  var classNameObj = (_classNameObj = {
-    'k-input': true
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-group'] = $blocks.prepend || $blocks.append, _classNameObj['k-disabled'] = disabled, _classNameObj['k-clearable'] = clearable, _classNameObj['k-auto-width'] = autoWidth, _classNameObj['k-fluid'] = fluid, _classNameObj['k-stack-clear'] = stackClearIcon, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj['k-type-textarea'] = type === 'textarea', _classNameObj['k-focus'] = isFocus.value, _classNameObj["k-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj["k-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-input"] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-group"] = $blocks.prepend || $blocks.append, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-clearable"] = clearable, _classNameObj[k + "-auto-width"] = autoWidth, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-stack-clear"] = stackClearIcon, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-type-textarea"] = type === 'textarea', _classNameObj[k + "-focus"] = isFocus.value, _classNameObj[k + "-resize-" + resize] = type === 'textarea' && isNotAutoRows, _classNameObj[k + "-resize-none"] = type === 'textarea' && !isNotAutoRows, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$showPassword = this.showPassword,
       isShowPassword = _this$showPassword.isShow,
       toggleShowPassword = _this$showPassword.toggleShow,
@@ -96,12 +97,11 @@ export default function ($props, $blocks, $__proto__) {
     inputProps.value = inputValue;
   }
 
-  return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn({
-    "k-input-prepend": true,
-    "k-input-padding": isTextBlock(children)
-  }))) : void 0, _$cc(ErrorContext.Consumer, {
+  return _$ce(2, 'div', [$blocks.prepend ? (children = $blocks.prepend(noop), _$ce(2, 'div', children, 0, _$cn((_$cn2 = {}, _$cn2[k + "-input-prepend"] = true, _$cn2[k + "-input-padding"] = isTextBlock(children), _$cn2)))) : void 0, _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
+      var _$cn3, _$cn4;
+
       return _$cc(Wave, {
         'disabled': waveDisabled || disabled || isInvalid,
         'inset': '-2px',
@@ -115,31 +115,24 @@ export default function ($props, $blocks, $__proto__) {
           };
 
           return block ? block.call($this, callBlock, data) : callBlock();
-        }, __$blocks['prefix'](_$no)), 0, 'k-input-prefix') : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
-          'className': 'k-input-inner',
+        }, __$blocks['prefix'](_$no)), 0, _$cn(k + "-input-prefix")) : undefined, type !== 'textarea' ? _$cv('input', _extends({}, inputProps, {
+          'className': _$cn(k + "-input-inner"),
           'type': showPasswordType.value
         })) : _$cv('textarea', _extends({}, inputProps, {
-          'className': 'k-input-inner k-textarea',
+          'className': _$cn(k + "-input-inner " + k + "-textarea"),
           'rows': isNotAutoRows ? rows : 1,
           'style': height.value ? addStyle(inputProps.style, {
             height: height.value + 'px'
           }) : inputProps.style
         })), $blocks.suffix || clearable && !disabled || showPasswordIcon.value || showCount ? _$ce(2, 'div', [showPasswordIcon.value ? [_$cc(Icon, {
           'hoverable': true,
-          'className': _$cn({
-            "k-input-show-password": true,
-            "k-icon-hidden": !isShowPassword.value,
-            "k-icon-visible": isShowPassword.value
-          }),
+          'className': _$cn((_$cn3 = {}, _$cn3[k + "-input-show-password"] = true, _$cn3[k + "-icon-hidden"] = !isShowPassword.value, _$cn3[k + "-icon-visible"] = isShowPassword.value, _$cn3)),
           'ev-click': toggleShowPassword
         }), ' '] : undefined, clearable && !disabled ? _$cc(Icon, {
-          'className': _$cn({
-            "k-input-clear k-icon-error-fill": true,
-            "k-input-show": hasValue
-          }),
+          'className': _$cn((_$cn4 = {}, _$cn4[k + "-input-clear " + k + "-icon-error-fill"] = true, _$cn4[k + "-input-show"] = hasValue, _$cn4)),
           'ev-click': _this.clear,
           'hoverable': true
-        }) : undefined, ' ', showCount ? _$ce(2, 'span', [hasValue ? value.length : 0, maxlength ? _$ce(2, 'span', [_$ct(' / '), maxlength], 0) : undefined], 0, 'k-input-count') : undefined, (_$blocks['suffix'] = function ($super) {
+        }) : undefined, ' ', showCount ? _$ce(2, 'span', [hasValue ? value.length : 0, maxlength ? _$ce(2, 'span', [_$ct(' / '), maxlength], 0) : undefined], 0, _$cn(k + "-input-count")) : undefined, (_$blocks['suffix'] = function ($super) {
           return null;
         }, __$blocks['suffix'] = function ($super, data) {
           var block = $blocks['suffix'];
@@ -149,17 +142,14 @@ export default function ($props, $blocks, $__proto__) {
           };
 
           return block ? block.call($this, callBlock, data) : callBlock();
-        }, __$blocks['suffix'](_$no))], 0, 'k-input-suffix', {
+        }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation
-        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? placeholder : inputValue, 0, null, null, null, fakeRef), 2, 'k-input-fake') : undefined], 0, 'k-input-wrapper', {
+        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? placeholder : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
           'ev-click': focusInputOnClick
         })
       });
     }
-  }), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn({
-    "k-input-append": true,
-    "k-input-padding": isTextBlock(_children)
-  }))) : void 0], 0, _$cn(classNameObj), {
+  }), $blocks.append ? (_children = $blocks.append(noop), _$ce(2, 'div', _children, 0, _$cn((_$cn5 = {}, _$cn5[k + "-input-append"] = true, _$cn5[k + "-input-padding"] = isTextBlock(_children), _$cn5)))) : void 0], 0, _$cn(classNameObj), {
     'style': width != null ? addStyle(style, {
       width: width + "px"
     }) : style,

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

@@ -16,6 +16,7 @@ export declare class Search extends Component<SearchProps, SearchEvents> {
     static defaults: () => Partial<SearchProps>;
     private elementRef;
     private inputRef;
+    private config;
     init(): void;
     open(): void;
     hide(): void;

package/es/components/input/search.js

@@ -8,6 +8,7 @@ import { sizes } from '../../styles/utils';
 import { _$ } from '../../i18n';
 import { bind } from '../utils';
 import { useDocumentClick } from '../../hooks/useDocumentClick';
+import { useConfigContext } from '../config';
 var typeDefs = {
   placeholder: String,
   value: String,
@@ -44,6 +45,7 @@ export var Search = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.inputRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/input/search.vdt.js

@@ -5,9 +5,6 @@ import { Icon } from '../icon';
 import { Button } from '../button';
 import { getRestProps } from '../utils';
 import { makeSearchStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-icon-search k-search-icon'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -23,9 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       size = _this$get.size,
       open = _this$get.open;
 
-  var classNameObj = (_classNameObj = {
-    'k-search': true
-  }, _classNameObj[className] = className, _classNameObj['k-open'] = open, _classNameObj['k-hide'] = !open, _classNameObj["k-" + type] = type, _classNameObj[makeSearchStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-search"] = true, _classNameObj[className] = className, _classNameObj[k + "-open"] = open, _classNameObj[k + "-hide"] = !open, _classNameObj[k + "-" + type] = type, _classNameObj[makeSearchStyles(k)] = true, _classNameObj);
   return _$cv('form', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
     'ev-submit': this.onSubmit,
@@ -44,7 +40,9 @@ export default function ($props, $blocks, $__proto__) {
     'type': 'none',
     'ev-click': this.onClickBtn,
     'size': size,
-    'children': _$cc(Icon, _$tmp0)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-search " + k + "-search-icon")
+    })
   })]);
 }
 ;

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

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

package/es/components/input/styles.js

@@ -129,21 +129,21 @@ setDefault(function () {
     input: defaults
   }).input;
 });
-export function makeStyles() {
+export 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;}.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;border:none;&.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) {
+  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;}.", 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;border:none;&.", 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) {
     var styles = input[size];
-    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.k-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
+    var sizeClassName = /*#__PURE__*/css("font-size:", styles.fontSize, ";.", k, "-input-wrapper{height:", styles.height, ";padding:0 ", styles.paddingGap, ";}");
     if (size === 'default') return sizeClassName;
-    return /*#__PURE__*/css("&.k-", size, "{", sizeClassName, ";}");
-  }), "&.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;right:0;position:absolute;overflow:hidden;width:100%;visibility:hidden;white-space:nowrap;}&.k-auto-width{width:auto;max-width:100%;}.k-input-count{color:", input.count.color, ";}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
+  }), "&.", 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;right:0;position:absolute;overflow:hidden;width:100%;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
 }
-export function makeSearchStyles() {
-  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) {
+export 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;}}}");
+    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/aside.d.ts

@@ -11,5 +11,6 @@ export declare class Aside extends Component<AsideProps> {
     static typeDefs: Required<TypeDefs<AsideProps>>;
     static defaults: () => Partial<AsideProps>;
     private rootLayout;
+    private config;
     private getStyles;
 }

package/es/components/layout/aside.js

@@ -5,6 +5,7 @@ import { themes, getCollapseWidth } from './styles';
 import template from './aside.vdt';
 import { ROOT_LAYOUT, getStyle, defaultWidth } from './helpers';
 import { addStyle } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   collapse: Boolean,
   fixed: Boolean,
@@ -33,6 +34,7 @@ export var Aside = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.rootLayout = inject(ROOT_LAYOUT);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/layout/aside.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createElementVNode as _$ce, createVNode as _$cv, className as _$cn } from 'intact';
+import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv } from 'intact';
 import { directClone } from 'intact';
 import { mapChildren, getRestProps } from '../utils';
 import { Menu } from '../menu';
@@ -18,25 +18,22 @@ export default function ($props, $blocks, $__proto__) {
       fixed = _this$get.fixed,
       theme = _this$get.theme;
 
+  var k = this.config.k;
   var vNodes = mapChildren(children, function (vNode) {
     if (vNode.tag === Menu) {
       var vNodeClone = directClone(vNode);
       vNodeClone.props = _extends({}, vNode.props, {
         collapse: collapse
       });
-      return _$ce(2, 'div', vNodeClone, 0, 'k-layout-wrapper');
+      return _$ce(2, 'div', vNodeClone, 0, _$cn(k + "-layout-wrapper"));
     }
 
     return vNode;
   });
-  var classNameObj = (_classNameObj = {
-    'k-layout-aside': true,
-    'k-collapsed': collapse,
-    'k-fixed': fixed
-  }, _classNameObj["k-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles()] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-layout-aside"] = true, _classNameObj[k + "-collapsed"] = collapse, _classNameObj[k + "-fixed"] = fixed, _classNameObj[k + "-" + theme] = true, _classNameObj[className] = className, _classNameObj[makeAsideStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj),
-    'style': this.getStyles()
+    'style': this.getStyles(k)
   }), vNodes);
 }
 ;

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

@@ -2,6 +2,7 @@ import { Component } from 'intact';
 export declare class Body extends Component {
     static template: string | import("intact").Template<any>;
     private layout;
+    private config;
     init(): void;
     private getClassNames;
     private getStyles;