@itcase/ui 1.0.43 → 1.0.45

package/dist/components/Tab.js

@@ -17,7 +17,7 @@ var textStyle = require('../constants/componentProps/textStyle.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
 var type = require('../constants/componentProps/type.js');
 var underline = require('../constants/componentProps/underline.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var size = require('../constants/componentProps/size.js');
 var direction = require('../constants/componentProps/direction.js');
@@ -40,105 +40,107 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var _Tab$propTypes;
-var tabConfig = {
+const tabConfig = {
   appearance: {},
-  setAppearance: function setAppearance(newComponent) {
+  setAppearance: newComponent => {
     tabConfig.appearance = newComponent;
   }
 };
 function Tab(props) {
-  var isActive = props.isActive,
-    isHover = props.isHover,
-    appearance = props.appearance,
-    after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    href = props.href,
-    link = props.link,
-    set = props.set,
-    rel = props.rel,
-    target = props.target,
-    label = props.label,
-    labelColor = props.labelColor,
-    labelTextColorHover = props.labelTextColorHover,
-    labelColorActive = props.labelColorActive,
-    labelTextGradient = props.labelTextGradient,
-    labelTextSize = props.labelTextSize,
-    labelTextWrap = props.labelTextWrap,
-    labelTextStyle = props.labelTextStyle,
-    labelTextWeight = props.labelTextWeight,
-    dataTour = props.dataTour,
-    dividerFill = props.dividerFill,
-    dividerFillHover = props.dividerFillHover,
-    dividerFillActive = props.dividerFillActive,
-    dividerFillActiveHover = props.dividerFillActiveHover,
-    dividerFillDisabled = props.dividerFillDisabled,
-    dividerSize = props.dividerSize,
-    dividerDirection = props.dividerDirection,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter,
-    badgeSize = props.badgeSize,
-    badgeFill = props.badgeFill,
-    badgeTextColor = props.badgeTextColor,
-    badgeTextSize = props.badgeTextSize,
-    badgeValue = props.badgeValue;
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    isActive,
+    isHover,
+    appearance,
+    after,
+    before,
+    children,
+    className,
+    href,
+    link,
+    set,
+    rel,
+    target,
+    label,
+    labelColor,
+    labelTextColorHover,
+    labelColorActive,
+    labelTextGradient,
+    labelTextSize,
+    labelTextWrap,
+    labelTextStyle,
+    labelTextWeight,
+    dataTour,
+    dividerFill,
+    dividerFillHover,
+    dividerFillActive,
+    dividerFillActiveHover,
+    dividerFillDisabled,
+    dividerSize,
+    dividerDirection,
+    onClick,
+    onMouseEnter,
+    badgeSize,
+    badgeFill,
+    badgeTextColor,
+    badgeTextSize,
+    badgeValue
+  } = 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 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 fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_active_hover_',
     propsKey: 'fillActiveHover'
   });
-  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_disabled_',
     propsKey: 'fillDisabled'
   });
-  var linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'linkFill'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'tab_size_',
     propsKey: 'size'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'tab_shape_',
     propsKey: 'shape'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'tab_justify-content_',
     propsKey: 'justifyContent'
   });
-  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'tab_type_',
     propsKey: 'type'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
-    tab = _useStyles.styles;
+  const {
+    styles: tab
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && ("fill_" + tabConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), appearance && ("fill_hover_" + tabConfig.appearance[appearance].fillHoverClass).replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "tab_set_" + set, justifyContentClass),
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && `fill_${tabConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), appearance && `fill_hover_${tabConfig.appearance[appearance].fillHoverClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && `tab_set_${set}`, justifyContentClass),
     style: tab,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
@@ -178,7 +180,7 @@ function Tab(props) {
     direction: dividerDirection
   })), after)));
 }
-Tab.propTypes = (_Tab$propTypes = {
+Tab.propTypes = {
   before: PropTypes__default.default.any,
   after: PropTypes__default.default.any,
   children: PropTypes__default.default.any,
@@ -212,8 +214,18 @@ Tab.propTypes = (_Tab$propTypes = {
   labelColor: PropTypes__default.default.oneOf(textColor.default),
   labelTextColorHover: PropTypes__default.default.oneOf(textColorHover.default),
   labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
-  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default)
-}, _Tab$propTypes["labelTextSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelTextWrap = PropTypes__default.default.string, _Tab$propTypes.labelTextStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labelTextWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
+  labelTextGradient: PropTypes__default.default.oneOf(textGradient.default),
+  labelTextSize: PropTypes__default.default.oneOf(size.default),
+  labelTextWrap: PropTypes__default.default.string,
+  labelTextStyle: PropTypes__default.default.oneOf(textStyle.default),
+  labelTextWeight: PropTypes__default.default.oneOf(textWeight.default),
+  type: PropTypes__default.default.oneOf(type.default),
+  typeDesktop: PropTypes__default.default.oneOf(type.default),
+  typeMobile: PropTypes__default.default.oneOf(type.default),
+  typeTablet: PropTypes__default.default.oneOf(type.default),
+  title: PropTypes__default.default.string,
+  underline: PropTypes__default.default.oneOf(underline.default)
+};
 Tab.defaultProps = {
   size: 'normal',
   LinkComponent: 'a',
@@ -221,58 +233,61 @@ Tab.defaultProps = {
 };
 
 function TabGroup(props) {
-  var id = props.id,
-    dataTour = props.dataTour,
-    children = props.children,
-    className = props.className,
-    horizontalScroll = props.horizontalScroll,
-    set = props.set,
-    style = props.style;
-  var contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    dataTour,
+    children,
+    className,
+    horizontalScroll,
+    set,
+    style
+  } = props;
+  const contentAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_content-align_',
     propsKey: 'contentAlign'
   });
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(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 directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_direction_',
     propsKey: 'direction'
   });
-  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'group_wrap_',
     propsKey: 'wrap'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var _useStyles = useStyles.useStyles(props),
-    groupStyles = _useStyles.styles,
-    groupWrapperStyles = _useStyles.wrapper;
+  const {
+    styles: groupStyles,
+    wrapper: groupWrapperStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_" + set, horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
+    className: clsx__default.default(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass),
     id: id,
     "data-tour": dataTour,
     style: Object.assign({}, groupStyles, style)

package/dist/components/Text.js

@@ -9,7 +9,7 @@ var textColorHover = require('../constants/componentProps/textColorHover.js');
 var size = require('../constants/componentProps/size.js');
 var textStyle = require('../constants/componentProps/textStyle.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -27,60 +27,63 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Text(props) {
-  var after = props.after,
-    dataTour = props.dataTour,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    cursor = props.cursor,
-    Tag = props.tag,
-    htmlFor = props.htmlFor,
-    type = props.type,
-    onClick = props.onClick;
-  var _useStyles = useStyles.useStyles(props),
-    textStyles = _useStyles.styles;
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    after,
+    dataTour,
+    before,
+    children,
+    className,
+    cursor,
+    tag: Tag,
+    htmlFor,
+    type,
+    onClick
+  } = props;
+  const {
+    styles: textStyles
+  } = useStyles.useStyles(props);
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'size'
   });
-  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  var textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color-active_',
     propsKey: 'textColorActive'
   });
-  var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_hover_',
     propsKey: 'textColorHover'
   });
-  var textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-gradient_',
     propsKey: 'textColorGradient'
   });
-  var textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textTruncateClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-truncate_',
     propsKey: 'textTruncate'
   });
-  var textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-style_',
     propsKey: 'textStyle'
   });
-  var textWrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textWrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'word-wrap_',
     propsKey: 'textWrap'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && "text_type_" + type, widthClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, widthClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,

package/dist/components/Textarea.js

@@ -16,23 +16,25 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var textareaConfig = {
+const textareaConfig = {
   state: {},
-  setState: function setState(newComponent) {
+  setState: newComponent => {
     textareaConfig.state = newComponent;
   }
 };
 function Textarea(props) {
-  props.state;
-    var id = props.id,
-    className = props.className,
-    placeholder = props.placeholder,
-    disabled = props.disabled,
-    value = props.value,
-    onBlur = props.onBlur,
-    onChange = props.onChange,
-    onKeyDown = props.onKeyDown;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    state,
+    id,
+    className,
+    placeholder,
+    disabled,
+    value,
+    onBlur,
+    onChange,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
@@ -40,39 +42,39 @@ function Textarea(props) {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderHover'
   });
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'textarea_size_',
     propsKey: 'size'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'textarea_shape_',
     propsKey: 'shape'
   });
-  var textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'size'
   });
-  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  var caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'caret-color_',
     propsKey: 'caret'
   });
-  var placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'placeholder-text-color_',
     propsKey: 'placeholderTextColor'
   });
-  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });

package/dist/components/Tile.js

@@ -14,7 +14,7 @@ var size = require('../constants/componentProps/size.js');
 var textAlign = require('../constants/componentProps/textAlign.js');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('../constants/componentProps/borderType.js');
 require('../constants/componentProps/textColor.js');
@@ -47,64 +47,67 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Tile(props) {
-  var children = props.children,
-    className = props.className,
-    badge = props.badge,
-    badgeSize = props.badgeSize,
-    badgeType = props.badgeType,
-    direction = props.direction,
-    before = props.before,
-    after = props.after,
-    reverse = props.reverse,
-    size = props.size,
-    text = props.text,
-    textSize = props.textSize,
-    textWrap = props.textWrap,
-    textColor = props.textColor,
-    title = props.title,
-    titleTextSize = props.titleTextSize,
-    titleTextWrap = props.titleTextWrap,
-    titleTextColor = props.titleTextColor,
-    titleTextWeight = props.titleTextWeight,
-    titleTextAlign = props.titleTextAlign,
-    type = props.type,
-    onClick = props.onClick;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className,
+    badge,
+    badgeSize,
+    badgeType,
+    direction,
+    before,
+    after,
+    reverse,
+    size,
+    text,
+    textSize,
+    textWrap,
+    textColor,
+    title,
+    titleTextSize,
+    titleTextWrap,
+    titleTextColor,
+    titleTextWeight,
+    titleTextAlign,
+    type,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(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 shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'tile_shape_',
     propsKey: 'shape'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderHover'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var _useStyles = useStyles.useStyles(props),
-    tileStyles = _useStyles.styles;
+  const {
+    styles: tileStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && "direction_" + direction, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && "tile_size_" + size, type && "tile_type_" + type, badge && "tile_state_badge"),
+    className: clsx__default.default('tile', className, fillClass, shapeClass, alignClass, alignDirectionClass, direction && `direction_${direction}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, reverse && 'tile_reverse', size && `tile_size_${size}`, type && `tile_type_${type}`, badge && `tile_state_badge`),
     style: tileStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {