@king-design/react 3.0.1 → 3.1.0-beta.1

package/components/card/styles.js

@@ -24,6 +24,6 @@ setDefault(function () {
     card: defaults
   }).card;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.k-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.k-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.k-card-extra{float:right;height:100%;display:flex;align-items:center;}.k-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.k-shadow{box-shadow:", card.boxShadow, ";}&.k-none{box-shadow:none;}&.k-border{border:", card.border, ";.k-card-header{border-bottom:", card.border, ";}.k-card-body{padding-top:", card.padding, ";}}&.k-no-header{.k-card-body{padding-top:", card.padding, ";}}&.k-card-grid{.k-card-body{display:flex;padding:0;}&.k-border{.k-card-column:not(:last-of-type){border-right:", card.border, ";}}}.k-card-column{display:flex;align-items:center;padding:", card.padding, ";&.k-fluid{flex:1;}&.k-center{justify-content:center;}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}");
 }

package/components/carousel/index.d.ts

@@ -14,6 +14,7 @@ export declare class Carousel extends Component<CarouselProps> {
     private items;
     private slide;
     private autoplay;
+    private config;
     isActive(value: string): boolean;
     getIndex(): number;
     setIndex(index: number): void;

package/components/carousel/index.js

@@ -8,6 +8,7 @@ import { useItems } from './useItems';
 import { useSlide } from './useSlide';
 import { bind } from '../utils';
 import { useAutoplay } from './useAutoplay';
+import { useConfigContext } from '../config';
 export * from './item';
 var typeDefs = {
   value: String,
@@ -41,6 +42,7 @@ export var Carousel = /*#__PURE__*/function (_Component) {
     _this.items = useItems();
     _this.slide = useSlide(_this.items.getItems, _this.items.getItemsWithCloned);
     _this.autoplay = useAutoplay(_this.next);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/carousel/index.vdt.js

@@ -6,12 +6,6 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { linkEvent } from 'intact';
-var _$tmp0 = {
-  'className': 'k-icon-left'
-};
-var _$tmp1 = {
-  'className': 'k-icon-right'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -30,9 +24,8 @@ export default function ($props, $blocks, $__proto__) {
       shouldTransition = _this$slide.shouldTransition,
       elementRef = _this$slide.elementRef,
       isSlide = _this$slide.isSlide;
-  var classNameObj = (_classNameObj = {
-    'k-carousel': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + arrow] = true, _classNameObj['k-stop'] = !shouldTransition.value, _classNameObj["k-" + effect] = true, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-carousel"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + arrow] = true, _classNameObj[k + "-stop"] = !shouldTransition.value, _classNameObj[k + "-" + effect] = true, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$items = this.items,
       getItems = _this$items.getItems,
       getItemsWithCloned = _this$items.getItemsWithCloned;
@@ -45,7 +38,7 @@ export default function ($props, $blocks, $__proto__) {
     'ref': elementRef,
     'ev-mouseenter': stop,
     'ev-mouseleave': play
-  }), [_$ce(2, 'div', getItemsWithCloned(), 0, 'k-carousel-wrapper', {
+  }), [_$ce(2, 'div', getItemsWithCloned(), 0, _$cn(k + "-carousel-wrapper"), {
     'style': {
       transform: isSlide() ? "translate3d(" + translate.value + "px, 0, 0)" : undefined
     }
@@ -54,24 +47,27 @@ export default function ($props, $blocks, $__proto__) {
     'circle': true,
     'type': 'none',
     'size': 'large',
-    'className': 'k-carousel-btn k-prev',
+    'className': _$cn(k + "-carousel-btn " + k + "-prev"),
     'ev-click': this.prev,
-    'children': _$cc(Icon, _$tmp0)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-left")
+    })
   }), _$cc(Button, {
     'icon': true,
     'circle': true,
     'type': 'none',
     'size': 'large',
-    'className': 'k-carousel-btn k-next',
+    'className': _$cn(k + "-carousel-btn " + k + "-next"),
     'ev-click': this.next,
-    'children': _$cc(Icon, _$tmp1)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-right")
+    })
   }), _$ce(2, 'div', _$ma(getItems(), function ($value, $key) {
-    return _$ce(2, 'div', null, 1, _$cn({
-      'k-carousel-dot': true,
-      'k-active': this.isActive($value.props.value)
-    }), {
+    var _$cn2;
+
+    return _$ce(2, 'div', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-carousel-dot"] = true, _$cn2[k + "-active"] = this.isActive($value.props.value), _$cn2)), {
       'ev-click': linkEvent($key, this.setIndex)
     });
-  }, $this), 4, 'k-carousel-indicator c-clearfix')]);
+  }, $this), 4, _$cn(k + "-carousel-indicator c-clearfix"))]);
 }
 ;

package/components/carousel/item.d.ts

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

package/components/carousel/item.js

@@ -1,6 +1,8 @@
 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 './item.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   cloned: null
@@ -9,7 +11,17 @@ export var CarouselItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(CarouselItem, _Component);
 
   function CarouselItem() {
-    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;
   }
 
   return CarouselItem;

package/components/carousel/item.vdt.js

@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
 
   var parent = this.$senior;
   var active = parent.isActive(value);
-  var classNameObj = (_classNameObj = {
-    'k-carousel-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-active'] = active, _classNameObj['k-cloned'] = cloned, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-carousel-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = active, _classNameObj[k + "-cloned"] = cloned, _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   var isSlide = parent.get('effect') === 'slide';
   return _$cc(Transition, {
     'show': active || isSlide,

package/components/carousel/styles.d.ts

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

package/components/carousel/styles.js

@@ -39,9 +39,9 @@ setDefault(function () {
     carousel: defaults
   }).carousel;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.k-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.k-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.k-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.k-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.k-prev{left:", carousel.arrow.left, ";}&.k-next{right:", carousel.arrow.right, ";}}&.k-hover{.k-carousel-btn{opacity:0;}&:hover{.k-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.k-never{.k-carousel-btn{display:none;}}&.k-slide{.k-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.k-stop{.k-carousel-wrapper{transition:none;}}&.k-fade{.k-carousel-item{position:absolute;}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.", k, "-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.", k, "-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.", k, "-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.", k, "-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.", k, "-prev{left:", carousel.arrow.left, ";}&.", k, "-next{right:", carousel.arrow.right, ";}}&.", k, "-hover{.", k, "-carousel-btn{opacity:0;}&:hover{.", k, "-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.", k, "-never{.", k, "-carousel-btn{display:none;}}&.", k, "-slide{.", k, "-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.", k, "-stop{.", k, "-carousel-wrapper{transition:none;}}&.", k, "-fade{.", k, "-carousel-item{position:absolute;}}");
 }
-export function makeItemStyles() {
-  return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.k-carousel-fade-enter-active,&.k-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.k-carousel-fade-enter-from,&.k-carousel-fade-leave-to{opacity:0;}");
+export function makeItemStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.", k, "-carousel-fade-enter-active,&.", k, "-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.", k, "-carousel-fade-enter-from,&.", k, "-carousel-fade-leave-to{opacity:0;}");
 }

package/components/cascader/index.vdt.js

@@ -1,21 +1,11 @@
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact-react';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeMenuStyles, makeFilterMenuStyles } from './styles';
-var _$tmp0 = {
-  'className': 'ion-load-c k-cascader-loading',
-  'rotate': true
-};
-var _$tmp1 = {
-  'className': 'k-cascader-arrow k-icon-right'
-};
-var _$tmp2 = {
-  'className': 'k-cascader'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -30,10 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       filterable = _this$get.filterable,
       fields = _this$get.fields;
 
-  var baseMenuStyles = makeMenuStyles();
-  var classNameObj = (_classNameObj = {
-    'k-cascader-menu': true
-  }, _classNameObj[baseMenuStyles] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-cascader-menu"] = true, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   var getField = this.fields;
 
   var _this$value = this.value,
@@ -46,9 +34,12 @@ export default function ($props, $blocks, $__proto__) {
   var Options = function Options(data, level, loaded, parentSelected) {
     if (!data.length) {
       if (!loaded) {
-        return _$cc(Icon, _$tmp0);
+        return _$cc(Icon, {
+          'className': _$cn("ion-load-c " + k + "-cascader-loading"),
+          'rotate': true
+        });
       } else {
-        return _$ce(2, 'div', _$('无数据'), 0, 'k-cascader-empty');
+        return _$ce(2, 'div', _$('无数据'), 0, _$cn(k + "-cascader-empty"));
       }
     }
 
@@ -59,15 +50,15 @@ export default function ($props, $blocks, $__proto__) {
       var children = getField(item, 'children');
 
       var Item = function Item() {
+        var _$cn2;
+
         return _$cc(DropdownItem, {
           'disabled': getField(item, 'disabled'),
-          'className': _$cn({
-            'k-cascader-option': true,
-            'k-active': showed,
-            'k-selected': selected
-          }),
+          'className': _$cn((_$cn2 = {}, _$cn2[k + "-cascader-option"] = true, _$cn2[k + "-active"] = showed, _$cn2[k + "-selected"] = selected, _$cn2)),
           'ev-select': onSelect.bind(null, value, level),
-          'children': [getField(item, 'label'), children ? _$cc(Icon, _$tmp1) : undefined]
+          'children': [getField(item, 'label'), children ? _$cc(Icon, {
+            'className': _$cn(k + "-cascader-arrow " + k + "-icon-right")
+          }) : undefined]
         });
       };
 
@@ -92,12 +83,14 @@ export default function ($props, $blocks, $__proto__) {
       keywords = _this$filterable.keywords.value,
       selectByFilter = _this$filterable.selectByFilter;
 
-  return _$su.call($this, _$tmp2, function ($blocks) {
+  return _$su.call($this, {
+    'className': _$cn(k + "-cascader")
+  }, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['base-menu'] = function ($super) {
-      var _$cn2;
+      var _$cn3;
 
       return !filterable || !keywords ? _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
@@ -105,12 +98,10 @@ export default function ($props, $blocks, $__proto__) {
         'children': Options(data, 0, true, true)
       }, 'common') : _$cc(DropdownMenu, {
         'key': 'filter',
-        'className': _$cn((_$cn2 = {
-          'k-cascader-filter': true
-        }, _$cn2[baseMenuStyles] = true, _$cn2[makeFilterMenuStyles()] = true, _$cn2)),
+        'className': _$cn((_$cn3 = {}, _$cn3[k + "-cascader-filter"] = true, _$cn3[baseMenuStyles] = true, _$cn3[makeFilterMenuStyles(k)] = true, _$cn3)),
         'children': function () {
           var items = filter();
-          if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, 'k-cascader-empty');
+          if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, _$cn(k + "-cascader-empty"));
           return _$ma(items, function ($value, $key) {
             return _$cc(DropdownItem, {
               'ev-select': selectByFilter.bind(null, $value),

package/components/cascader/styles.d.ts

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

package/components/cascader/styles.js

@@ -42,9 +42,9 @@ setDefault(function () {
     cascader: defaults
   }).cascader;
 });
-export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+export function makeMenuStyles(k) {
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.", k, "-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.", k, "-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.", k, "-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.", k, "-cascader-option{&.", k, "-selected{color:", cascader.selectedColor, ";}&.", k, "-active{background:", cascader.activeBgColor, ";}}");
 }
-export function makeFilterMenuStyles() {
+export function makeFilterMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");
 }

package/components/checkbox/index.d.ts

@@ -17,6 +17,7 @@ export declare class Checkbox<V = boolean> extends Component<CheckboxProps<V>, C
     static defaults: () => Partial<CheckboxProps<boolean>>;
     static events: Events<CheckboxEvents<boolean>>;
     private inputRef;
+    private config;
     private isChecked;
     private setCheckboxModel;
     private onClick;

package/components/checkbox/index.js

@@ -7,6 +7,7 @@ import { Component, createRef } from 'intact-react';
 import template from './index.vdt';
 import { bind } from '../utils';
 import { isArray } from 'intact-shared';
+import { useConfigContext } from '../config';
 var typeDefs = {
   disabled: Boolean,
   value: null,
@@ -40,6 +41,7 @@ export var Checkbox = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.inputRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/checkbox/index.vdt.js

@@ -25,12 +25,8 @@ export default function ($props, $blocks, $__proto__) {
       rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
 
   var isChecked = this.isChecked();
-  var classNameObj = (_classNameObj = {
-    'k-checkbox': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked,
-    'k-indeterminate': indeterminate
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-checkbox"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = isChecked, _classNameObj[k + "-indeterminate"] = indeterminate, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
     if (rest[name]) {
       if (name === 'ev-click' || name === 'ev-change') {// do not bind click to label, otherwise it will trigger click event twice
@@ -64,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
       'disabled': disabled,
       'tabindex': '-1',
       'ref': this.inputRef
-    }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper')
-  }), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
+    }, getRestProps(this, rest))), 2, _$cn(k + "-checkbox-wrapper"))
+  }), children ? _$ce(2, 'span', children, 0, _$cn(k + "-checkbox-text")) : undefined]);
 }
 ;

package/components/checkbox/styles.d.ts

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

package/components/checkbox/styles.js

@@ -77,6 +77,6 @@ setDefault(function () {
     checkbox: defaults
   }).checkbox;
 });
-export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.k-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
+export default function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.", k, "-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.", k, "-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.", k, "-indeterminate{.", k, "-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.", k, "-checked{.", k, "-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.", k, "-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/components/code/index.d.ts

@@ -19,5 +19,6 @@ export declare class Code extends Component<CodeProps, CodeEvents> {
     static defaults: () => Partial<CodeProps>;
     static events: Events<CodeEvents>;
     private editor;
+    private config;
     getEditor(): editor.IStandaloneCodeEditor | null;
 }

package/components/code/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact-react';
 import template from './index.vdt';
 import { useEditor } from './useEditor';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   language: String,
@@ -39,6 +40,7 @@ export var Code = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.editor = useEditor();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/code/index.vdt.js

@@ -21,9 +21,8 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       style = _this$get.style;
 
-  var classNameObj = (_classNameObj = {
-    'k-code': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-code"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   if (width || height) {
     var _style = {};

package/components/code/styles.d.ts

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

package/components/code/styles.js

@@ -2,7 +2,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "1wv4onu",
     styles: "position:relative;height:100%"

package/components/collapse/index.d.ts

@@ -14,6 +14,7 @@ export declare class Collapse extends Component<CollapseProps, CollapseEvents> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CollapseProps>>;
     static defaults: () => Partial<CollapseProps>;
+    private config;
     init(): void;
     changeValue(v: string): void;
     private isActive;

package/components/collapse/index.js

@@ -1,8 +1,10 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component, provide } from 'intact-react';
 import template from './index.vdt';
 import { toggleArray } from '../utils';
 export * from './item';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: Array,
   accordion: Boolean,
@@ -21,7 +23,17 @@ export var Collapse = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Collapse, _Component);
 
   function Collapse() {
-    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 = Collapse.prototype;

package/components/collapse/index.vdt.js

@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       arrow = _this$get.arrow,
       noBorder = _this$get.noBorder;
 
-  var classNameObj = (_classNameObj = {
-    'k-collapse': true
-  }, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj['k-left'] = arrow === 'left', _classNameObj['k-border'] = !noBorder, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse"] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-left"] = arrow === 'left', _classNameObj[k + "-border"] = !noBorder, _classNameObj);
 
   var _children = mapChildren(children, function (vNode, index) {
     if (vNode.tag === CollapseItem) {

package/components/collapse/item.d.ts

@@ -15,6 +15,7 @@ export declare class CollapseItem extends Component<CollapseItemProps, CollapseI
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CollapseItemProps>>;
     private collapse;
+    private config;
     toggle(): void;
     private onEnter;
     private onAfterLeave;

package/components/collapse/item.js

@@ -5,6 +5,7 @@ import { Component, inject } from 'intact-react';
 import { COLLAPSE } from './index';
 import template from './item.vdt';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   title: [String, Object],
@@ -24,6 +25,7 @@ export var CollapseItem = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.collapse = inject(COLLAPSE);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/collapse/item.vdt.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact-react';
 import { Transition } from 'intact';
 import { expandAnimationCallbacks, getRestProps } from '../utils';
-import { kls, makeItemStyles } from './styles';
+import { makeItemStyles } from './styles';
 import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
@@ -23,9 +23,8 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled;
 
   var isActive = this.collapse.isActive(value);
-  var classNameObj = (_classNameObj = {
-    'k-collapse-item': true
-  }, _classNameObj[makeItemStyles()] = true, _classNameObj[className] = className, _classNameObj['k-active'] = isActive, _classNameObj['k-disabled'] = disabled, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
@@ -39,14 +38,13 @@ export default function ($props, $blocks, $__proto__) {
 
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['k-icon-right'] = true, _$cn2)),
+    'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': !disabled
-  })], 0, _$cn(kls('title')), {
+  })], 0, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive
   }, expandAnimationCallbacks, {
-    'className': _$cn(kls('content')),
     'onEnter': function onEnter(el) {
       expandAnimationCallbacks.onEnter(el);
 
@@ -57,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
 
       _this.onAfterLeave();
     },
-    'children': _$ce(2, 'div', children, 0, _$cn(kls('wrapper')))
+    'children': _$ce(2, 'div', children, 0, _$cn(k + "-collapse-wrapper"))
   }))]);
 }
 ;

package/components/collapse/styles.d.ts

@@ -1,4 +1,3 @@
 import '../../styles/global';
-export declare const kls: (className: string) => string;
-export declare function makeStyles(): string;
-export declare function makeItemStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeItemStyles(k: string): string;

package/components/collapse/styles.js

@@ -2,9 +2,6 @@ import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import { css } from '@emotion/css';
 import '../../styles/global';
-export var kls = function kls(className) {
-  return "k-collapse-" + className;
-};
 var defaults = {
   get transition() {
     return theme.transition.large;
@@ -21,8 +18,7 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px',
-    contentPadding: '0 16px 16px'
+    titleHeight: '40px'
   }
 };
 var collapse;
@@ -31,10 +27,10 @@ setDefault(function () {
     collapse: defaults
   }).collapse;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
-export function makeItemStyles() {
+export function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.", k, "-disabled){.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{.", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";.", k, "-collapse-title{cursor:not-allowed;}}");
 }

package/components/colorpicker/drag.d.ts

@@ -11,5 +11,6 @@ interface ColorpickerDragEvents {
 export declare class ColorpickerDrag extends Component<ColorpickerDragProps, ColorpickerDragEvents> {
     static template: string | import("intact").Template<any>;
     private drag;
+    private config;
 }
 export {};