@itcase/ui 1.0.43 → 1.0.44

package/dist/components/Button.js

@@ -15,7 +15,7 @@ var index$3 = require('./Text.js');
 var index$1 = require('./Loader.js');
 var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
@@ -41,90 +41,93 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var buttonConfig = {
+const buttonConfig = {
   appearance: {},
-  setAppearance: function setAppearance(newComponent) {
+  setAppearance: newComponent => {
     buttonConfig.appearance = newComponent;
   }
 };
-var Button = /*#__PURE__*/React__default.default.forwardRef(function Button(props, ref) {
-  var before = props.before,
-    after = props.after,
-    className = props.className,
-    dataTour = props.dataTour,
-    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,
-    labelTextWrap = props.labelTextWrap,
-    loaderSet = props.loaderSet,
-    loaderFill = props.loaderFill,
-    loaderItemFill = props.loaderItemFill,
-    link = props.link,
-    href = props.href,
-    target = props.target,
-    rel = props.rel,
-    size = props.size,
-    icon = props.icon,
-    iconSize = props.iconSize,
-    iconFill = props.iconFill,
-    iconStroke = props.iconStroke,
-    iconBeforeFill = props.iconBeforeFill,
-    iconBeforeStroke = props.iconBeforeStroke,
-    iconAfterFill = props.iconAfterFill,
-    iconAfterStroke = props.iconAfterStroke,
-    type = props.type,
-    loading = props.loading,
-    htmlType = props.htmlType,
-    isDisabled = props.isDisabled,
-    onClick = props.onClick,
-    onMouseDown = props.onMouseDown;
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(props, ref) {
+  const {
+    before,
+    after,
+    className,
+    dataTour,
+    Badge,
+    children,
+    iconAfter,
+    iconAfterSize,
+    iconBefore,
+    iconBeforeSize,
+    label,
+    labelTextColor,
+    labelTextSize,
+    labelTextWrap,
+    loaderSet,
+    loaderFill,
+    loaderItemFill,
+    link,
+    href,
+    target,
+    rel,
+    size,
+    icon,
+    iconSize,
+    iconFill,
+    iconStroke,
+    iconBeforeFill,
+    iconBeforeStroke,
+    iconAfterFill,
+    iconAfterStroke,
+    type,
+    loading,
+    htmlType,
+    isDisabled,
+    onClick,
+    onMouseDown
+  } = props;
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'button_width_',
     propsKey: 'width'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'button_size_',
     propsKey: 'size'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'button_shape_',
     propsKey: 'shape'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
-  var _useStyles = useStyles.useStyles(props),
-    buttonStyles = _useStyles.styles,
-    labelStyles = _useStyles.label;
+  const {
+    styles: buttonStyles,
+    label: labelStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && "button_type_" + type, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconAfter || icon) && '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}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass, fillHoverClass, shapeClass, sizeClass, widthClass, elevationClass, Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconAfter || icon) && 'button_type_icon', label && (iconBefore || iconAfter || before || after) && `button_type_with-icon button_type_with-icon_${size}`),
     DefaultComponent: "button",
     disabled: isDisabled,
     href: link || href,

package/dist/components/Caption.js

@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
 var fillGradient = require('../constants/componentProps/fillGradient.js');
 var captionPosition = require('../constants/componentProps/captionPosition.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
@@ -24,22 +24,25 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Caption(props) {
-  var children = props.children,
-    className = props.className;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill-gradient_',
     propsKey: 'fillGradient'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'caption_position_',
     propsKey: 'position'
   });
-  var _useStyles = useStyles.useStyles(props),
-    captionStyles = _useStyles.styles;
+  const {
+    styles: captionStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'caption', positionClass, fillClass, fillGradientClass),
     style: captionStyles

package/dist/components/Card.js

@@ -14,7 +14,7 @@ require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -36,33 +36,35 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Card(props) {
-  var children = props.children,
-    className = props.className,
-    size = props.size,
-    src = props.src,
-    text = props.text,
-    textSize = props.textSize,
-    textColor = props.textColor,
-    textTag = props.textTag,
-    title = props.title,
-    titleSize = props.titleSize,
-    titleTag = props.titleTag,
-    titleColor = props.titleColor,
-    image = props.image,
-    imageShape = props.imageShape,
-    type = props.type,
-    onClick = props.onClick;
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className,
+    size,
+    src,
+    text,
+    textSize,
+    textColor,
+    textTag,
+    title,
+    titleSize,
+    titleTag,
+    titleColor,
+    image,
+    imageShape,
+    type,
+    onClick
+  } = props;
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'card_shape_',
     propsKey: 'shape'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'resize-horizontal_',
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
     onClick: onClick,
-    className: clsx__default.default(className, 'card', shapeClass, size && "card_size_" + size, type && "card_type_" + type, widthClass)
+    className: clsx__default.default(className, 'card', shapeClass, size && `card_size_${size}`, type && `card_type_${type}`, widthClass)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "card__wrapper"
   }, image, src && /*#__PURE__*/React__default.default.createElement(index.Image, {

package/dist/components/Cell.js

@@ -13,7 +13,13 @@ require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
-require('../useStyles-e4accb53.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -21,12 +27,6 @@ require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 require('lodash/castArray');
@@ -38,88 +38,90 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Cell(props) {
-  var className = props.className,
-    iconAfter = props.iconAfter,
-    iconAfterSize = props.iconAfterSize,
-    iconBefore = props.iconBefore,
-    iconBeforeSize = props.iconBeforeSize,
-    iconBeforeBgFill = props.iconBeforeBgFill,
-    iconBeforeFill = props.iconBeforeFill,
-    iconBeforeStroke = props.iconBeforeStroke,
-    iconAfterBgFill = props.iconAfterBgFill,
-    iconAfterFill = props.iconAfterFill,
-    iconAfterStroke = props.iconAfterStroke,
-    isActive = props.isActive,
-    isDisabled = props.isDisabled,
-    set = props.set,
-    titleTag = props.titleTag,
-    valueTag = props.valueTag,
-    after = props.after,
-    before = props.before,
-    size = props.size,
-    value = props.value,
-    valueTextSize = props.valueTextSize,
-    valueTextColor = props.valueTextColor,
-    valueTextWeight = props.valueTextWeight,
-    title = props.title,
-    titleTextSize = props.titleTextSize,
-    titleTextColor = props.titleTextColor,
-    titleTextWeight = props.titleTextWeight,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter;
-    props.direction;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    iconAfter,
+    iconAfterSize,
+    iconBefore,
+    iconBeforeSize,
+    iconBeforeBgFill,
+    iconBeforeFill,
+    iconBeforeStroke,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    isActive,
+    isDisabled,
+    set,
+    titleTag,
+    valueTag,
+    after,
+    before,
+    size,
+    value,
+    valueTextSize,
+    valueTextColor,
+    valueTextWeight,
+    title,
+    titleTextSize,
+    titleTextColor,
+    titleTextWeight,
+    onClick,
+    onMouseEnter,
+    direction
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_active_',
     propsKey: 'fillActive'
   });
-  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cell__wrapper_shape_',
     propsKey: 'shape'
   });
-  var bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bgFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'bgFill'
   });
-  var bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bgFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'bgFillHover'
   });
-  var bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bgFillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'bgFillActive'
   });
-  var bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bgFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'bgFillDisabled'
   });
-  var bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bgShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cell_shape_',
     propsKey: 'bgShape'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'cell_direction_',
     propsKey: 'direction'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, size && "cell_size_" + size, set && "cell_set_" + set, directionClass, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
+    className: clsx__default.default(className, 'cell', isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, size && `cell_size_${size}`, set && `cell_set_${set}`, directionClass, bgFillClass, bgFillHoverClass, bgShapeClass, widthClass)
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "cell__before"
   }, before), /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Checkbox.js

@@ -11,7 +11,7 @@ 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('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,68 +27,70 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var checkboxConfig = {
+const checkboxConfig = {
   state: {},
-  setState: function setState(newComponent) {
+  setState: newComponent => {
     checkboxConfig.state = newComponent;
   }
 };
 function Checkbox(props) {
-  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,
-    onBlur = props.onBlur,
-    onChange = props.onChange,
-    onFocus = props.onFocus;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    state,
+    id,
+    className,
+    checked,
+    disabled,
+    descTextSize,
+    descTextWidth,
+    descTextColor,
+    desc,
+    label,
+    labelTextSize,
+    labelTextWidth,
+    labelTextColor,
+    onBlur,
+    onChange,
+    onFocus
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'checkbox_shape_',
     propsKey: 'shape'
   });
-  var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'checkbox__state_shape_',
     propsKey: 'stateShape'
   });
-  var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
-  var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'checkbox_checkmark_fill_',
     propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
-  var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'stateBorderWidth'
   });
-  var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
   });
-  var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
   return /*#__PURE__*/React__default.default.createElement("label", {
     htmlFor: id,
-    "class": clsx__default.default(className, 'checkbox', fillClass, shapeClass)
+    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", {

package/dist/components/Chips.js

@@ -9,7 +9,7 @@ var size = require('../constants/componentProps/size.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
@@ -31,45 +31,48 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Chips(props) {
-  var children = props.children,
-    className = props.className,
-    label = props.label,
-    labelSize = props.labelSize,
-    labelTextColor = props.labelTextColor,
-    labelTextWeight = props.labelTextWeight,
-    type = props.type;
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className,
+    label,
+    labelSize,
+    labelTextColor,
+    labelTextWeight,
+    type
+  } = props;
+  const alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'alignDirection'
   });
-  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'align_',
     propsKey: 'align'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'chips_size_',
     propsKey: 'size'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'chips_shape_',
     propsKey: 'shape'
   });
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'border'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_',
     propsKey: 'borderType'
   });
-  var _useStyles = useStyles.useStyles(props),
-    chipsStyles = _useStyles.styles;
+  const {
+    styles: chipsStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && "chips_type_" + type),
+    className: clsx__default.default(className, 'chips', fillClass, shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
     style: chipsStyles
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__inner"