@itcase/ui 1.0.43 → 1.0.45

package/dist/components/Divider.js

@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.js');
 var size = require('../constants/componentProps/size.js');
 var direction = require('../constants/componentProps/direction.js');
 var width = require('../constants/componentProps/width.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');
@@ -25,41 +25,44 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Divider(props) {
-  var className = props.className;
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className
+  } = props;
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'divider_direction_',
     propsKey: 'direction'
   });
-  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 sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'divider_size_',
     propsKey: 'size'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
-    hrStyles = _useStyles.styles;
+  const {
+    styles: hrStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("hr", {
     className: clsx__default.default(className, 'divider', widthClass, directionClass, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass),
     style: hrStyles

package/dist/components/Dot.js

@@ -20,21 +20,23 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Dot(props) {
-  var className = props.className,
-    children = props.children;
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    children
+  } = 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 fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'dot_shape_',
     propsKey: 'shape'
   });

package/dist/components/Dropdown.js

@@ -4,7 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var index$1 = require('./Text.js');
 var index = require('./Link.js');
 var fill = require('../constants/componentProps/fill.js');
@@ -34,50 +34,46 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Dropdown(props) {
-  var animationClose = props.animationClose,
-    animationOpen = props.animationOpen,
-    children = props.children,
-    className = props.className;
-    props.id;
-    var set = props.set,
-    isOpen = props.isOpen,
-    setIsOpen = props.setIsOpen;
-  var dropdownRef = React.useRef(null);
+  const {
+    animationClose,
+    animationOpen,
+    children,
+    className,
+    id,
+    set,
+    isOpen,
+    setIsOpen
+  } = props;
+  const dropdownRef = React.useRef(null);
 
   // const [isOpen, setIsOpen] = useState(false)
-  var _useState = React.useState({
-      className: ''
-    }),
-    animationState = _useState[0],
-    setAnimationState = _useState[1];
-  var onAnimationEnd = React.useCallback(function (event) {
+  const [animationState, setAnimationState] = React.useState({
+    className: ''
+  });
+  const onAnimationEnd = React.useCallback(event => {
     // When component is change his visibility(display) in DOM,
     // animation of close can run unnecessary on showing element.
     // const dropdownElement = dropdownRef.current
-    setAnimationState(function (prevState) {
-      return {
-        className: isOpen ? prevState.className : ''
-      };
-    });
+    setAnimationState(prevState => ({
+      className: isOpen ? prevState.className : ''
+    }));
   }, [isOpen]);
-  React.useEffect(function () {
-    setAnimationState(function (prevState) {
-      return {
-        className: isOpen ? animationOpen : animationClose
-      };
-    });
+  React.useEffect(() => {
+    setAnimationState(prevState => ({
+      className: isOpen ? animationOpen : animationClose
+    }));
   }, [isOpen]);
 
   // Close dropdown by click outside
-  React.useEffect(function () {
+  React.useEffect(() => {
     // Add a handler to keep track of the click target.
     function onClickWindow(event) {
-      var dropdownElement = dropdownRef.current;
+      const dropdownElement = dropdownRef.current;
       if (dropdownElement) {
         // Is event target inside of dropdown element
-        var isContainsTarget = dropdownElement.contains(event.target);
+        const isContainsTarget = dropdownElement.contains(event.target);
         // Is dropdown element has "open" class
-        var hasOpenClass = dropdownElement.classList.contains(animationOpen);
+        const hasOpenClass = dropdownElement.classList.contains(animationOpen);
         if (!isContainsTarget && hasOpenClass) {
           // Trigger close event with animation
           // dropdownElement.click() - trigger "onClickWindow" again
@@ -87,32 +83,33 @@ function Dropdown(props) {
     }
     // Add event listener for current dropdown on first render
     window.addEventListener('click', onClickWindow);
-    return function () {
+    return () => {
       // Remove event listener for current dropdown on unmount
       window.removeEventListener('click', onClickWindow);
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  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 shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'dropdown_shape_',
     propsKey: 'shape'
   });
-  var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'elevation_',
     propsKey: 'elevation'
   });
-  var _useStyles = useStyles.useStyles(props),
-    styles = _useStyles.styles;
+  const {
+    styles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'dropdown', set && "dropdown_set_" + set, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
+    className: clsx__default.default(className, 'dropdown', set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
     ref: dropdownRef,
     style: styles
   }, children &&
@@ -133,97 +130,100 @@ Dropdown.defaultProps = {
 };
 
 function DropdownItem(props) {
-  var isActive = props.isActive,
-    isHover = props.isHover;
-    props.appearance;
-    var after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    href = props.href,
-    link = props.link,
-    set = props.set,
-    rel = props.rel,
-    desc = props.desc,
-    descTextGradient = props.descTextGradient,
-    descTextSize = props.descTextSize,
-    descTextWeight = props.descTextWeight,
-    descTextColor = props.descTextColor,
-    descTextWrap = props.descTextWrap,
-    descTextColorHover = props.descTextColorHover,
-    descTextStyle = props.descTextStyle,
-    label = props.label,
-    target = props.target,
-    labelTextColorActive = props.labelTextColorActive,
-    labelTextGradient = props.labelTextGradient,
-    labelTextSize = props.labelTextSize,
-    labelTextWeight = props.labelTextWeight,
-    labelTextColor = props.labelTextColor,
-    labelTextWrap = props.labelTextWrap,
-    labelTextColorHover = props.labelTextColorHover,
-    labelTextStyle = props.labelTextStyle,
-    underline = props.underline,
-    onClick = props.onClick,
-    onMouseEnter = props.onMouseEnter;
-  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    isActive,
+    isHover,
+    appearance,
+    after,
+    before,
+    children,
+    className,
+    href,
+    link,
+    set,
+    rel,
+    desc,
+    descTextGradient,
+    descTextSize,
+    descTextWeight,
+    descTextColor,
+    descTextWrap,
+    descTextColorHover,
+    descTextStyle,
+    label,
+    target,
+    labelTextColorActive,
+    labelTextGradient,
+    labelTextSize,
+    labelTextWeight,
+    labelTextColor,
+    labelTextWrap,
+    labelTextColorHover,
+    labelTextStyle,
+    underline,
+    onClick,
+    onMouseEnter
+  } = 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: 'dropdown__item_direction_',
     propsKey: 'direction'
   });
-  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: 'dropdown__item_size_',
     propsKey: 'size'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'dropdown__item_shape_',
     propsKey: 'shape'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'dropdown__item_justify-content_',
     propsKey: 'justifyContent'
   });
-  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'dropdown__item_type_',
     propsKey: 'type'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
-    dropdownItem = _useStyles.styles;
+  const {
+    styles: dropdownItem
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, set && "dropdown__item_set_" + set, justifyContentClass),
+    className: clsx__default.default('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, set && `dropdown__item_set_${set}`, justifyContentClass),
     style: dropdownItem,
     onClick: onClick,
     onMouseEnter: onMouseEnter

package/dist/components/Empty.js

@@ -18,7 +18,11 @@ require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.js');
-require('../useStyles-e4accb53.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -26,10 +30,6 @@ require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/underline.js');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('./Loader.js');
@@ -42,20 +42,22 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
 function Empty(props) {
-  var before = props.before,
-    message = props.message,
-    messageTextColor = props.messageTextColor,
-    messageTextSize = props.messageTextSize,
-    buttonAfter = props.buttonAfter,
-    buttonBefore = props.buttonBefore,
-    buttonFill = props.buttonFill,
-    buttonFillHover = props.buttonFillHover,
-    buttonLabel = props.buttonLabel,
-    buttonLabelTextColor = props.buttonLabelTextColor,
-    buttonLabelTextSize = props.buttonLabelTextSize,
-    buttonShape = props.buttonShape,
-    buttonSize = props.buttonSize,
-    buttonWidth = props.buttonWidth;
+  const {
+    before,
+    message,
+    messageTextColor,
+    messageTextSize,
+    buttonAfter,
+    buttonBefore,
+    buttonFill,
+    buttonFillHover,
+    buttonLabel,
+    buttonLabelTextColor,
+    buttonLabelTextSize,
+    buttonShape,
+    buttonSize,
+    buttonWidth
+  } = props;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: "empty"
   }, before, message && /*#__PURE__*/React__default.default.createElement(index.Text, {

package/dist/components/Fader.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var fill = require('../constants/componentProps/fill.js');
 var fillGradient = require('../constants/componentProps/fillGradient.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');
@@ -23,25 +23,28 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Fader(props) {
-  var className = props.className,
-    isFader = props.isFader,
-    type = props.type;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    isFader,
+    type
+  } = 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 opacityClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const opacityClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'opacity_',
     propsKey: 'opacity'
   });
-  var _useStyles = useStyles.useStyles(props),
-    faderStyles = _useStyles.styles;
+  const {
+    styles: faderStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && className + "_type_" + type, fillClass, fillGradientClass),
+    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
     style: faderStyles
   }, "\xA0");
 }

package/dist/components/Flex.js

@@ -11,7 +11,7 @@ var flexWrap = require('../constants/componentProps/flexWrap.js');
 var shape = require('../constants/componentProps/shape.js');
 var width = require('../constants/componentProps/width.js');
 var position = require('../constants/componentProps/position.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var horizontalResizeMode = require('../constants/componentProps/horizontalResizeMode.js');
 require('lodash/camelCase');
@@ -30,65 +30,68 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Flex(props) {
-  var id = props.id,
-    children = props.children,
-    className = props.className,
-    Tag = props.tag,
-    type = props.type,
-    onClick = props.onClick;
-  var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    id,
+    children,
+    className,
+    tag: Tag,
+    type,
+    onClick
+  } = props;
+  const alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_align-content_',
     propsKey: 'alignContent'
   });
-  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_align-items_',
     propsKey: 'alignItems'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_justify-content_',
     propsKey: 'justifyContent'
   });
-  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_wrap_',
     propsKey: 'wrap'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_direction_',
     propsKey: 'direction'
   });
-  var flowClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const flowClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_flow_',
     propsKey: 'flow'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex_shape_',
     propsKey: 'shape'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'position_',
     propsKey: 'position'
   });
-  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),
-    flexStyles = _useStyles.styles,
-    flexWrapperStyles = _useStyles.wrapper;
+  const {
+    styles: flexStyles,
+    wrapper: flexWrapperStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && "flex_type_" + type, wrapClass),
+    className: clsx__default.default(className, 'flex', widthClass, alignContentClass, alignItemsClass, directionClass, fillClass, flowClass, borderClass, borderTypeClass, positionClass, justifyContentClass, shapeClass, type && `flex_type_${type}`, wrapClass),
     id: id,
     style: flexStyles,
     onClick: onClick
@@ -154,50 +157,53 @@ Flex.defaultProps = {
 };
 
 function FlexItem(props) {
-  var children = props.children,
-    className = props.className;
-  var alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className
+  } = props;
+  const alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_align-self_',
     propsKey: 'alignSelf'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_direction_',
     propsKey: 'direction'
   });
-  var growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const growClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_grow_',
     propsKey: 'grow'
   });
-  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_align-items_',
     propsKey: 'alignItems'
   });
-  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_justify-content_',
     propsKey: 'justifyContent'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_shape_',
     propsKey: 'shape'
   });
-  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: 'resize-horizontal_',
     propsKey: 'width'
   });
-  var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_wrap_',
     propsKey: 'wrap'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'position_',
     propsKey: 'position'
   });
-  var _useStyles = useStyles.useStyles(props),
-    flexItemStyles = _useStyles.styles;
+  const {
+    styles: flexItemStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
     style: flexItemStyles