@king-design/react 3.0.0 → 3.1.0-beta.0

package/components/grid/useGutter.d.ts

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import('intact-react').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/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/components/icon/index.js

@@ -6,6 +6,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact-react';
 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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-react';
+import { createElementVNode as _$ce, className as _$cn, createVNode as _$cv } from 'intact-react';
 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/components/layout/body.d.ts

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

package/components/layout/body.js

@@ -1,9 +1,10 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
-import { Component, inject } from 'intact-react';
+import { Component, inject, provide } from 'intact-react';
 import template from './template.vdt';
-import { LAYOUT, getStyle } from './helpers';
+import { LAYOUT, getStyle, BODY } from './helpers';
 import { addStyle } from '../utils';
+import { useConfigContext } from '../config';
 export var Body = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Body, _Component);
 
@@ -18,20 +19,24 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.layout = inject(LAYOUT);
+    _this.config = useConfigContext();
     return _this;
   }
 
   var _proto = Body.prototype;
 
+  _proto.init = function init() {
+    provide(BODY, this);
+  };
+
   _proto.getClassNames = function getClassNames() {
     var _ref;
 
     var _this$get = this.get(),
         className = _this$get.className;
 
-    return _ref = {
-      'k-layout-body': true
-    }, _ref[className] = className, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-body"] = true, _ref[className] = className, _ref;
   };
 
   _proto.getStyles = function getStyles() {
@@ -45,6 +50,7 @@ export var Body = /*#__PURE__*/function (_Component) {
 
     if (!hasFixedAside && !hasFixedHeader) return style;
     return addStyle(style, {
+      // FIXME: we must use padding instead of margin, otherwise the table's width is wired
       paddingLeft: hasFixedAside ? getStyle(asideWidth) : null,
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null
     });

package/components/layout/footer.d.ts

@@ -1,5 +1,6 @@
 import { Component } from 'intact-react';
 export declare class Footer extends Component {
     static template: string | import("intact").Template<any>;
+    private config;
     private getClassNames;
 }

package/components/layout/footer.js

@@ -1,11 +1,23 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact-react';
 import template from './template.vdt';
+import { useConfigContext } from '../config';
 export var Footer = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Footer, _Component);
 
   function Footer() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   var _proto = Footer.prototype;
@@ -16,9 +28,8 @@ export var Footer = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className;
 
-    return _ref = {
-      'k-layout-footer': true
-    }, _ref[className] = className, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-footer"] = true, _ref[className] = className, _ref;
   };
 
   return Footer;

package/components/layout/header.d.ts

@@ -5,12 +5,15 @@ export interface HeaderProps {
     height?: number | string;
     style?: string | Record<string, string>;
     theme?: MenuProps['theme'];
+    blur?: boolean;
+    boxShadow?: boolean;
 }
 export declare class Header extends Component<HeaderProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<HeaderProps>>;
     static defaults: () => Partial<HeaderProps>;
     private rootLayout;
+    private config;
     private getClassNames;
     private getStyles;
 }

package/components/layout/header.js

@@ -5,11 +5,14 @@ import template from './template.vdt';
 import { addStyle } from '../utils';
 import { makeHeaderStyles, themes } from './styles';
 import { defaultHeight, ROOT_LAYOUT, getStyle } from './helpers';
+import { useConfigContext } from '../config';
 var typeDefs = {
   fixed: Boolean,
   height: [Number, String],
   style: [String, Object],
-  theme: themes
+  theme: themes,
+  blur: Boolean,
+  boxShadow: Boolean
 };
 
 var defaults = function defaults() {
@@ -33,6 +36,7 @@ export var Header = /*#__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;
   }
 
@@ -44,12 +48,12 @@ export var Header = /*#__PURE__*/function (_Component) {
     var _this$get = this.get(),
         className = _this$get.className,
         fixed = _this$get.fixed,
-        theme = _this$get.theme;
+        theme = _this$get.theme,
+        blur = _this$get.blur,
+        boxShadow = _this$get.boxShadow;
 
-    return _ref = {
-      'k-layout-header': true,
-      'k-fixed': fixed
-    }, _ref["k-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles()] = true, _ref;
+    var k = this.config.k;
+    return _ref = {}, _ref[k + "-layout-header"] = true, _ref[k + "-fixed"] = fixed, _ref[k + "-blur"] = blur, _ref[k + "-box-shadow"] = boxShadow, _ref[k + "-" + theme] = true, _ref[className] = className, _ref[makeHeaderStyles(k)] = true, _ref;
   };
 
   _proto.getStyles = function getStyles() {

package/components/layout/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const ROOT_LAYOUT = "RootLayout";
 export declare const LAYOUT = "Layout";
+export declare const BODY = "LayoutBody";
 export declare const defaultHeight = "64px";
 export declare const defaultWidth = "200px";
 export declare function getStyle(height: number | string): string;

package/components/layout/helpers.js

@@ -1,6 +1,7 @@
 import { isNumber } from 'intact-shared';
 export var ROOT_LAYOUT = 'RootLayout';
 export var LAYOUT = 'Layout';
+export var BODY = 'LayoutBody';
 export var defaultHeight = "64px";
 export var defaultWidth = "200px";
 export function getStyle(height) {

package/components/layout/index.spec.d.ts

@@ -0,0 +1 @@
+export {};