@itcase/ui 1.0.5 → 1.0.7

package/dist/components/Avatar.js

@@ -5,7 +5,9 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Image.js');
 var index$1 = require('./Text.js');
+var index$2 = require('./Icon.js');
 var size = require('../constants/componentProps/size.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/borderColor.js');
 require('../constants/componentProps/horizontalContentAlign.js');
 require('../constants/componentProps/resizeMode.js');
@@ -20,13 +22,20 @@ require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -35,52 +44,68 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Avatar(props) {
-  var children = props.children,
-    className = props.className,
+  var className = props.className,
     icon = props.icon,
     size = props.size,
     src = props.src,
-    text = props.text,
+    type = props.type,
+    onClick = props.onClick,
     textSize = props.textSize,
     textColor = props.textColor,
-    textTag = props.textTag,
-    title = props.title,
-    titleSize = props.titleSize,
-    titleTag = props.titleTag,
-    titleColor = props.titleColor,
-    type = props.type,
-    onClick = props.onClick;
+    textWeight = props.textWeight,
+    iconItemFill = props.iconItemFill,
+    iconShape = props.iconShape,
+    iconSize = props.iconSize,
+    iconStroke = props.iconStroke,
+    iconFill = props.iconFill,
+    iconFillHover = props.iconFillHover,
+    iconFillSize = props.iconFillSize,
+    firstname = props.firstname,
+    secondname = props.secondname;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'avatar_shape_',
+    propsKey: 'shape'
+  });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    onClick: onClick,
-    className: clsx__default.default(className, 'avatar', size && "avatar_size_" + size, type && "avatar_type_" + type)
+    className: clsx__default.default(className, 'avatar', shapeClass, size && "avatar_size_" + size, type && "avatar_type_" + type),
+    onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "avatar__wrapper"
-  }, /*#__PURE__*/React__default.default.createElement(index.Image, {
+    className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)
+  }, src ? /*#__PURE__*/React__default.default.createElement(index.Image, {
     className: "avatar__image",
     shape: "circular",
     src: src
-  }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "avatar__data"
-  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
-    className: "avatar__data-title",
-    size: titleSize,
-    textColor: titleColor,
-    tag: titleTag
-  }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }) : /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "avatar__name",
     size: textSize,
-    tag: textTag,
     textColor: textColor,
-    className: "avatar__data-desc"
-  }, text), icon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "avatar__icon"
-  }, icon)), children));
+    textWeight: textWeight
+  }, firstname[0].toUpperCase() + secondname[0].toUpperCase()), icon && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+    className: "avatar__icon",
+    fill: iconFill,
+    fillHover: iconFillHover,
+    fillSize: iconFillSize,
+    iconFill: iconItemFill,
+    size: iconSize,
+    shape: iconShape,
+    stroke: iconStroke,
+    SvgImage: icon
+  })));
 }
 Avatar.propTypes = {
-  size: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
-  type: PropTypes__default.default.string,
   icon: PropTypes__default.default.string,
+  size: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  type: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func
 };
 Avatar.defaultProps = {

package/dist/components/{Counter.js → Badge.js}

@@ -30,7 +30,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Counter(props) {
+function Badge(props) {
   var className = props.className,
     children = props.children,
     textColor = props.textColor,
@@ -49,21 +49,21 @@ function Counter(props) {
     propsKey: 'fill'
   });
   var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'counter_size_',
+    prefix: 'badge_size_',
     propsKey: 'size'
   });
   var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'counter_type_',
+    prefix: 'badge_type_',
     propsKey: 'type'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'counter', borderClass, borderTypeClass, fillClass, sizeClass, typeClass)
+    className: clsx__default.default(className, 'badge', borderClass, borderTypeClass, fillClass, sizeClass, typeClass)
   }, children || /*#__PURE__*/React__default.default.createElement(index.Text, {
     textColor: textColor,
     size: textSize
   }, value));
 }
-Counter.propTypes = {
+Badge.propTypes = {
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   border: PropTypes__default.default.string,
@@ -92,8 +92,8 @@ Counter.propTypes = {
   typeTablet: PropTypes__default.default.oneOf(type.default),
   value: PropTypes__default.default.string.isRequired
 };
-Counter.defaultProps = {
+Badge.defaultProps = {
   size: 'm'
 };
 
-exports.Counter = Counter;
+exports.Badge = Badge;

package/dist/components/Button.js

@@ -40,28 +40,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var buttonConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    buttonConfig.appearance = newComponent;
+  }
+};
 function Button(props) {
   var before = props.before,
     after = props.after,
     className = props.className,
-    Counter = props.Counter,
+    Badge = props.Badge,
     children = props.children,
     iconAfter = props.iconAfter,
     iconAfterSize = props.iconAfterSize,
     iconBefore = props.iconBefore,
     iconBeforeSize = props.iconBeforeSize,
     label = props.label,
+    labelTextColor = props.labelTextColor,
+    labelTextSize = props.labelTextSize,
     link = props.link,
     href = props.href,
     target = props.target,
     rel = props.rel,
     size = props.size,
-    iconBeforeBgFill = props.iconBeforeBgFill,
+    icon = props.icon,
+    iconSize = props.iconSize,
+    iconFill = props.iconFill,
+    iconStroke = props.iconStroke,
     iconBeforeFill = props.iconBeforeFill,
-    iconAfterBgFillSize = props.iconAfterBgFillSize;
-    props.iconBeforeBgFillSize;
-    var iconBeforeStroke = props.iconBeforeStroke,
-    iconAfterBgFill = props.iconAfterBgFill,
+    iconBeforeStroke = props.iconBeforeStroke,
     iconAfterFill = props.iconAfterFill,
     iconAfterStroke = props.iconAfterStroke,
     type = props.type,
@@ -77,12 +85,6 @@ function Button(props) {
     prefix: 'button_size_',
     propsKey: 'size'
   });
-  var labelTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'labelTextColor'
-  });
-  var labelSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    propsKey: 'labelSize'
-  });
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -107,7 +109,7 @@ function Button(props) {
     buttonStyles = _useStyles.styles,
     labelStyles = _useStyles.label;
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, Counter && 'button_type_counter', !label && (iconBefore || iconAfter || before || after) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
+    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, Badge && 'button_type_badge', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && "button_type_with-icon button_type_with-icon_" + size),
     href: link || href,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -120,87 +122,89 @@ function Button(props) {
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "button__wrapper"
   }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    className: "button__icon",
+    className: "button__icon_before",
     SvgImage: iconBefore,
     size: iconBeforeSize,
-    bgFill: iconBeforeBgFill,
-    bgFillSize: iconAfterBgFillSize,
-    fill: iconBeforeFill,
-    stroke: iconBeforeStroke
+    iconFill: iconBeforeFill,
+    iconStroke: iconBeforeStroke
+  }), icon && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
+    className: "button__icon",
+    SvgImage: icon,
+    size: iconSize,
+    iconFill: iconFill,
+    iconStroke: iconStroke
   }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
     className: "button__label",
-    textColor: labelTextColorClass,
-    size: labelSizeClass,
+    textColor: labelTextColor,
+    size: labelTextSize,
     style: labelStyles
   }, children || label), iconAfter && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
-    className: "button__icon",
+    className: "button__icon_after",
     SvgImage: iconAfter,
     size: iconAfterSize,
-    bgFillSize: iconAfterBgFillSize,
-    bgFill: iconAfterBgFill,
-    fill: iconAfterFill,
-    stroke: iconAfterStroke
-  }), Counter, after));
+    iconFill: iconAfterFill,
+    iconStroke: iconAfterStroke
+  }), Badge, after));
 }
 Button.propTypes = {
-  Counter: PropTypes__default.default.element,
+  Badge: PropTypes__default.default.element,
+  LinkComponent: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  border: PropTypes__default.default.string,
+  borderDesktop: PropTypes__default.default.string,
+  borderMobile: PropTypes__default.default.string,
+  borderTablet: PropTypes__default.default.string,
   borderType: PropTypes__default.default.oneOf(borderType.default),
   borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
   borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
   borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
   children: PropTypes__default.default.any,
-  after: PropTypes__default.default.any,
-  before: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
-  border: PropTypes__default.default.string,
-  borderDesktop: PropTypes__default.default.string,
-  borderMobile: PropTypes__default.default.string,
-  borderTablet: PropTypes__default.default.string,
+  href: PropTypes__default.default.string,
+  htmlType: PropTypes__default.default.string,
   iconAfter: PropTypes__default.default.any,
+  iconAfterBgFill: PropTypes__default.default.string,
+  iconAfterFill: PropTypes__default.default.string,
   iconAfterSize: PropTypes__default.default.string,
+  iconAfterStroke: PropTypes__default.default.string,
   iconBefore: PropTypes__default.default.any,
-  iconBeforeSize: PropTypes__default.default.string,
-  label: PropTypes__default.default.string,
-  LinkComponent: PropTypes__default.default.any,
-  href: PropTypes__default.default.string,
-  link: PropTypes__default.default.string,
-  target: PropTypes__default.default.string,
   iconBeforeBgFill: PropTypes__default.default.string,
   iconBeforeFill: PropTypes__default.default.string,
+  iconBeforeSize: PropTypes__default.default.string,
   iconBeforeStroke: PropTypes__default.default.string,
-  iconAfterBgFill: PropTypes__default.default.string,
-  iconAfterFill: PropTypes__default.default.string,
-  iconAfterStroke: PropTypes__default.default.string,
+  isDisabled: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  labelSize: PropTypes__default.default.oneOf(size.default),
+  labelSizeDesktop: PropTypes__default.default.oneOf(size.default),
+  labelSizeMobile: PropTypes__default.default.oneOf(size.default),
+  labelSizeTablet: PropTypes__default.default.oneOf(size.default),
+  link: PropTypes__default.default.string,
   rel: PropTypes__default.default.string,
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
   size: PropTypes__default.default.oneOf(size.default),
   sizeDesktop: PropTypes__default.default.oneOf(size.default),
   sizeMobile: PropTypes__default.default.oneOf(size.default),
   sizeTablet: PropTypes__default.default.oneOf(size.default),
+  target: PropTypes__default.default.string,
   textColor: PropTypes__default.default.string,
   textColorDesktop: PropTypes__default.default.string,
   textColorMobile: PropTypes__default.default.string,
   textColorTablet: PropTypes__default.default.string,
-  labelSize: PropTypes__default.default.oneOf(size.default),
-  labelSizeDesktop: PropTypes__default.default.oneOf(size.default),
-  labelSizeMobile: PropTypes__default.default.oneOf(size.default),
-  labelSizeTablet: PropTypes__default.default.oneOf(size.default),
-  shape: PropTypes__default.default.oneOf(shape.default),
-  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
-  shapeMobile: PropTypes__default.default.oneOf(shape.default),
-  shapeTablet: PropTypes__default.default.oneOf(shape.default),
   type: PropTypes__default.default.oneOf(type.default),
-  htmlType: PropTypes__default.default.string,
   width: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
   widthMobile: PropTypes__default.default.oneOf(horizontalResizeMode.default),
   widthTablet: PropTypes__default.default.oneOf(horizontalResizeMode.default),
-  widthDesktop: PropTypes__default.default.oneOf(horizontalResizeMode.default),
   onClick: PropTypes__default.default.func,
-  onMouseDown: PropTypes__default.default.func,
-  isDisabled: PropTypes__default.default.bool
+  onMouseDown: PropTypes__default.default.func
 };
 Button.defaultProps = {
   // Button with a `type="submit"` attribute is a form control by default.
@@ -213,3 +217,4 @@ Button.defaultProps = {
 };
 
 exports.Button = Button;
+exports.buttonConfig = buttonConfig;

package/dist/components/Cell.js

@@ -53,15 +53,17 @@ function Cell(props) {
     isDisabled = props.isDisabled,
     set = props.set,
     titleTag = props.titleTag,
-    decsTag = props.decsTag,
+    valueTag = props.valueTag,
     after = props.after,
     before = props.before,
-    desc = props.desc,
-    descSize = props.descSize,
-    descTextColor = props.descTextColor,
+    value = props.value,
+    valueTextSize = props.valueTextSize,
+    valueTextColor = props.valueTextColor,
+    valueTextWeight = props.valueTextWeight,
     title = props.title,
-    titleSize = props.titleSize,
+    titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
+    titleTextWeight = props.titleTextWeight,
     onClick = props.onClick,
     onMouseEnter = props.onMouseEnter;
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -127,15 +129,17 @@ function Cell(props) {
     className: "cell__data"
   }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "cell__title",
+    size: titleTextSize,
     tag: titleTag,
-    size: titleSize,
-    textColor: titleTextColor
-  }, title), desc && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
-    className: "cell__desc",
-    tag: decsTag,
-    size: descSize,
-    textColor: descTextColor
-  }, desc)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    textColor: titleTextColor,
+    textWeight: titleTextWeight
+  }, title), value && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "cell__value",
+    size: valueTextSize,
+    tag: valueTag,
+    textColor: valueTextColor,
+    textWeight: valueTextWeight
+  }, value)), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
     className: "cell__icon-after",
     SvgImage: iconAfter,
     size: iconAfterSize,
@@ -151,11 +155,11 @@ Cell.propTypes = {
   className: PropTypes__default.default.string,
   after: PropTypes__default.default.any,
   before: PropTypes__default.default.any,
-  desc: PropTypes__default.default.string,
-  descSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
-  descTextColor: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  valueTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  valueTextColor: PropTypes__default.default.string,
   title: PropTypes__default.default.string,
-  titleSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  titleTextSize: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
   titleTextColor: PropTypes__default.default.string,
   onClick: PropTypes__default.default.func,
   onMouseEnter: PropTypes__default.default.func,

package/dist/components/Checkbox.js

@@ -3,12 +3,23 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
+var index = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-e4accb53.js');
 require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,53 +27,94 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var checkboxConfig = {
+  state: {},
+  setState: function setState(newComponent) {
+    checkboxConfig.state = newComponent;
+  }
+};
 function Checkbox(props) {
-  var id = props.id,
+  props.state;
+    var id = props.id,
     className = props.className,
     checked = props.checked,
     disabled = props.disabled,
+    descTextSize = props.descTextSize,
+    descTextWidth = props.descTextWidth,
+    descTextColor = props.descTextColor,
+    desc = props.desc,
+    label = props.label,
+    labelTextSize = props.labelTextSize,
+    labelTextWidth = props.labelTextWidth,
+    labelTextColor = props.labelTextColor,
     onChange = props.onChange;
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'border'
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'checkbox_shape_',
     propsKey: 'shape'
   });
-  var fillCheckedClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'checkbox_fill_checked_',
-    propsKey: 'fillChecked'
+  var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox__state_shape_',
+    propsKey: 'stateShape'
   });
-  var fillCheckmarkClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'checkbox_fill_checkmark_',
-    propsKey: 'fillCheckmark'
+  var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
-    propsKey: 'fill'
+    propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
+  });
+  var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'checkbox_checkmark_fill_',
+    propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
+  });
+  var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'stateBorderWidth'
   });
-  var fillDisableClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'checkbox_fill_disable_',
-    propsKey: 'fillDisable'
+  var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
+  });
+  var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'checkbox', fillCheckmarkClass, fillCheckedClass, fillClass, fillDisableClass, shapeClass, borderColorClass)
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    htmlFor: id,
+    "class": clsx__default.default(className, 'checkbox', fillClass, shapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('checkbox__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
-    className: "checkbox__checkbox",
+    className: "checkbox__input",
     disabled: disabled,
     id: id,
     type: "checkbox",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "checkbox__bg"
+    className: clsx__default.default('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass, stateBorderWidthClass)
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "checkbox__mark"
-  }, "\xA0"));
+    className: "checkbox__state-checkmark"
+  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "checkbox__label",
+    size: labelTextSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "checkbox__desc",
+    size: descTextSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc));
 }
 Checkbox.propTypes = {
   className: PropTypes__default.default.string
 };
 
 exports.Checkbox = Checkbox;
+exports.checkboxConfig = checkboxConfig;

package/dist/components/Chips.js

@@ -3,17 +3,13 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var index = require('./Emoji.js');
-var index$1 = require('./Text.js');
+var index = require('./Text.js');
 var borderType = require('../constants/componentProps/borderType.js');
 var size = require('../constants/componentProps/size.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
-var emojiSize = require('../constants/componentProps/emojiSize.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var useStyles = require('../useStyles-e4accb53.js');
-require('../constants/componentProps/direction.js');
-require('../constants/componentProps/horizontalResizeMode.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
@@ -37,10 +33,6 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Chips(props) {
   var children = props.children,
     className = props.className,
-    emoji = props.emoji,
-    emojiFill = props.emojiFill,
-    emojiSize = props.emojiSize,
-    emojiType = props.emojiType,
     label = props.label,
     labelSize = props.labelSize,
     labelTextColor = props.labelTextColor,
@@ -80,13 +72,7 @@ function Chips(props) {
     style: chipsStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__inner"
-  }, emoji && /*#__PURE__*/React__default.default.createElement(index.Emoji, {
-    className: "chips__emoji",
-    emoji: emoji,
-    fill: emojiFill,
-    size: emojiSize,
-    type: emojiType
-  }), typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+  }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
     textColor: labelTextColor,
     size: labelSize
@@ -105,10 +91,6 @@ Chips.propTypes = {
   borderTypeDesktop: PropTypes__default.default.oneOf(borderType.default),
   borderTypeMobile: PropTypes__default.default.oneOf(borderType.default),
   borderTypeTablet: PropTypes__default.default.oneOf(borderType.default),
-  emoji: PropTypes__default.default.string,
-  emojiFill: PropTypes__default.default.oneOf(fill.default),
-  emojiSize: PropTypes__default.default.oneOf(emojiSize.default),
-  emojiType: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillDesktop: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),