@itcase/ui 1.0.43 → 1.0.45

package/dist/components/LanguageSelector.js

@@ -10,14 +10,6 @@ require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/strokeColor.js');
 require('./Link.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('../constants/componentProps/size.js');
 require('../constants/componentProps/textColor.js');
 require('../constants/componentProps/textGradient.js');
@@ -25,6 +17,14 @@ 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');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
 require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 
@@ -35,11 +35,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function LanguageSelectorItem(props) {
-  var label = props.label,
-    iconSize = props.iconSize,
-    SvgImage = props.SvgImage,
-    isActive = props.isActive,
-    onClick = props.onClick;
+  const {
+    label,
+    iconSize,
+    SvgImage,
+    isActive,
+    onClick
+  } = props;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('lang__item', isActive && 'lang__item_state_current'),
     onClick: onClick
@@ -56,25 +58,22 @@ LanguageSelectorItem.propTypes = {
   onClick: PropTypes__default.default.func
 };
 function LanguageSelector(props) {
-  var currentLanguage = props.currentLanguage,
-    _props$languagesItems = props.languagesItems,
-    languagesItems = _props$languagesItems === void 0 ? [] : _props$languagesItems,
-    className = props.className,
-    setLanguage = props.setLanguage;
+  const {
+    currentLanguage,
+    languagesItems = [],
+    className,
+    setLanguage
+  } = props;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'lang')
-  }, languagesItems.map(function (languageItem) {
-    return /*#__PURE__*/React__default.default.createElement(LanguageSelectorItem, {
-      iconSize: languageItem.iconSize,
-      isActive: currentLanguage === languageItem.value,
-      key: "languageItem_" + languageItem.value,
-      label: languageItem.label,
-      SvgImage: languageItem.SvgImage,
-      onClick: function onClick() {
-        return setLanguage && setLanguage(languageItem.value);
-      }
-    });
-  }));
+  }, languagesItems.map(languageItem => /*#__PURE__*/React__default.default.createElement(LanguageSelectorItem, {
+    iconSize: languageItem.iconSize,
+    isActive: currentLanguage === languageItem.value,
+    key: `languageItem_${languageItem.value}`,
+    label: languageItem.label,
+    SvgImage: languageItem.SvgImage,
+    onClick: () => setLanguage && setLanguage(languageItem.value)
+  })));
 }
 LanguageSelector.propTypes = {
   className: PropTypes__default.default.string,

package/dist/components/Link.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var useStyles = require('../useStyles-e4accb53.js');
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
@@ -12,6 +11,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('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -28,62 +28,64 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var _excluded = ["children", "Component", "DefaultComponent", "href", "target", "rel"];
-var linkConfig = {
+const linkConfig = {
   LinkComponent: 'a',
-  setLinkComponent: function setLinkComponent(newComponent) {
+  setLinkComponent: newComponent => {
     linkConfig.LinkComponent = newComponent;
   }
 };
 function Link(props) {
-  var after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    LinkComponent = props.LinkComponent,
-    href = props.href,
-    link = props.link,
-    target = props.target,
-    rel = props.rel,
-    text = props.text;
-    props.textGradient;
-    props.textStyle;
-    props.title;
-    var underline = props.underline,
-    onClick = props.onClick,
-    onMouseDown = props.onMouseDown;
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    after,
+    before,
+    children,
+    className,
+    LinkComponent,
+    href,
+    link,
+    target,
+    rel,
+    text,
+    textGradient,
+    textStyle,
+    title,
+    underline,
+    onClick,
+    onMouseDown
+  } = props;
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'size'
   });
-  var textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'textColor'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'textWeight'
   });
-  var textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_hover_',
     propsKey: 'textColorHover'
   });
-  var textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-style_',
     propsKey: 'textColorHover'
   });
-  var textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-gradient_',
     propsKey: 'textGradient'
   });
-  var _useStyles = useStyles.useStyles(props),
-    styles = _useStyles.styles;
+  const {
+    styles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(LinkWrapper, {
-    className: clsx__default.default(className, 'link', sizeClass, underline && "link_underline_" + underline, (textColorClass || textColorHoverClass || textGradientClass || textStyleClass || weightClass) && 'text', textColorClass, textColorHoverClass, textGradientClass, textStyleClass, weightClass, fillClass),
+    className: clsx__default.default(className, 'link', sizeClass, underline && `link_underline_${underline}`, (textColorClass || textColorHoverClass || textGradientClass || textStyleClass || weightClass) && 'text', textColorClass, textColorHoverClass, textGradientClass, textStyleClass, weightClass, fillClass),
     href: href || link,
     Component: LinkComponent,
     rel: rel,
@@ -133,16 +135,18 @@ Link.defaultProps = {
 
 // Wrapper with "Link" by condition
 function LinkWrapper(props) {
-  var children = props.children,
-    Component = props.Component,
-    DefaultComponent = props.DefaultComponent,
-    href = props.href,
-    target = props.target,
-    rel = props.rel,
-    otherProps = useStyles._objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    children,
+    Component,
+    DefaultComponent,
+    href,
+    target,
+    rel,
+    ...otherProps
+  } = props;
   if (href) {
     // If href passed, make link-wrapper
-    var LinkComponent = Component || linkConfig.LinkComponent;
+    const LinkComponent = Component || linkConfig.LinkComponent;
     return /*#__PURE__*/React__default.default.createElement(LinkComponent, Object.assign({
       href: href,
       target: target,
@@ -154,7 +158,7 @@ function LinkWrapper(props) {
   }
 
   // Return children and pass current props to
-  return React__default.default.Children.toArray(children).filter(Boolean).map(function (child) {
+  return React__default.default.Children.toArray(children).filter(Boolean).map(child => {
     return /*#__PURE__*/React__default.default.isValidElement(child) ? /*#__PURE__*/React__default.default.cloneElement(child, otherProps) : child;
   });
 }

package/dist/components/List.js

@@ -7,7 +7,7 @@ var direction = require('../constants/componentProps/direction.js');
 var fill = require('../constants/componentProps/fill.js');
 var textColor = require('../constants/componentProps/textColor.js');
 var size = require('../constants/componentProps/size.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var textStyle = require('../constants/componentProps/textStyle.js');
 var textWeight = require('../constants/componentProps/textWeight.js');
@@ -31,34 +31,37 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function List(props) {
-  var children = props.children,
-    className = props.className,
-    style = props.style,
-    type = props.type;
-  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className,
+    style,
+    type
+  } = props;
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'list_size_',
     propsKey: 'size'
   });
-  var bulletSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bulletSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'list_bullet-size_',
     propsKey: 'bulletSize'
   });
-  var bulletFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bulletFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'list_bullet-fill_',
     propsKey: 'bulletFill'
   });
-  var bulletTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const bulletTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'list_bullet-text-color_',
     propsKey: 'bulletTextColor'
   });
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'list_direction_',
     propsKey: 'direction'
   });
-  var _useStyles = useStyles.useStyles(props),
-    ulStyles = _useStyles.styles;
+  const {
+    styles: ulStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("ul", {
-    className: clsx__default.default(className, 'list', bulletSizeClass, bulletFillClass, bulletTextColorClass, directionClass, sizeClass, style && "list_style_" + style, type && "list_type_" + type),
+    className: clsx__default.default(className, 'list', bulletSizeClass, bulletFillClass, bulletTextColorClass, directionClass, sizeClass, style && `list_style_${style}`, type && `list_type_${type}`),
     style: ulStyles
   }, children);
 }
@@ -91,23 +94,26 @@ List.propTypes = {
 };
 
 function ListItem(props) {
-  var after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    fill = props.fill,
-    href = props.href,
-    link = props.link,
-    text = props.text,
-    textColor = props.textColor,
-    textStyle = props.textStyle,
-    textWeight = props.textWeight;
-  var _useStyles = useStyles.useStyles(props),
-    liStyles = _useStyles.styles,
-    linkStyles = _useStyles.link;
+  const {
+    after,
+    before,
+    children,
+    className,
+    fill,
+    href,
+    link,
+    text,
+    textColor,
+    textStyle,
+    textWeight
+  } = props;
+  const {
+    styles: liStyles,
+    link: linkStyles
+  } = useStyles.useStyles(props);
   if (link) {
     return /*#__PURE__*/React__default.default.createElement("li", {
-      className: clsx__default.default(className, 'list__item', 'list__item_type_link', textStyle && "text text-style_" + textStyle, textWeight && "text text-weight_" + textWeight, textColor && "text-color_" + textColor.replace(/([A-Z])/g, '-$1').toLowerCase(), fill && "fill_" + fill.replace(/([A-Z])/g, '-$1').toLowerCase()),
+      className: clsx__default.default(className, 'list__item', 'list__item_type_link', textStyle && `text text-style_${textStyle}`, textWeight && `text text-weight_${textWeight}`, textColor && `text-color_${textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`, fill && `fill_${fill.replace(/([A-Z])/g, '-$1').toLowerCase()}`),
       style: liStyles
     }, /*#__PURE__*/React__default.default.createElement(index.Link, {
       href: link || href,
@@ -116,7 +122,7 @@ function ListItem(props) {
     }, children || text));
   }
   return /*#__PURE__*/React__default.default.createElement("li", {
-    className: clsx__default.default(className, 'list__item', textStyle && "text text-style_" + textStyle, textWeight && "text text-weight_" + textWeight, textColor && "text-color_" + textColor.replace(/([A-Z])/g, '-$1').toLowerCase(), fill && "fill_" + fill.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    className: clsx__default.default(className, 'list__item', textStyle && `text text-style_${textStyle}`, textWeight && `text text-weight_${textWeight}`, textColor && `text-color_${textColor.replace(/([A-Z])/g, '-$1').toLowerCase()}`, fill && `fill_${fill.replace(/([A-Z])/g, '-$1').toLowerCase()}`),
     style: liStyles
   }, before, children || text, after);
 }

package/dist/components/Loader.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Text.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');
@@ -27,45 +27,48 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-var loaderConfig = {
+const loaderConfig = {
   appearance: {},
-  setAppearance: function setAppearance(newComponent) {
+  setAppearance: newComponent => {
     loaderConfig.appearance = newComponent;
   }
 };
 function Loader(props) {
-  var appearance = props.appearance,
-    className = props.className,
-    children = props.children,
-    set = props.set,
-    text = props.text,
-    textSize = props.textSize,
-    textColor = props.textColor;
-  var itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    appearance,
+    className,
+    children,
+    set,
+    text,
+    textSize,
+    textColor
+  } = props;
+  const itemFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'itemFill'
   });
-  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 heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'height'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'position_',
     propsKey: 'position'
   });
-  var _useStyles = useStyles.useStyles(props),
-    loader = _useStyles.styles;
-  var itemFill = itemFillClass || loaderConfig.appearance[appearance] && ("fill_" + loaderConfig.appearance[appearance].itemFillClass.replace(/([A-Z])/g, '-$1')).toLowerCase();
+  const {
+    styles: loader
+  } = useStyles.useStyles(props);
+  const itemFill = itemFillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].itemFillClass.replace(/([A-Z])/g, '-$1')}`.toLowerCase();
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('loader', positionClass, widthClass, heightClass, fillClass || loaderConfig.appearance[appearance] && ("fill_" + loaderConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), className, set && "loader_set_" + set),
+    className: clsx__default.default('loader', positionClass, widthClass, heightClass, fillClass || loaderConfig.appearance[appearance] && `fill_${loaderConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), className, set && `loader_set_${set}`),
     style: loader
   }, children || /*#__PURE__*/React__default.default.createElement("div", {
     className: "loader__inner"

package/dist/components/Logo.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 require('../constants/componentProps/fill.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textColor.js');
@@ -30,32 +30,35 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Logo(props) {
-  var className = props.className,
-    size = props.size,
-    link = props.link,
-    href = props.href,
-    source = props.source,
-    src = props.src;
-  var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    size,
+    link,
+    href,
+    source,
+    src
+  } = props;
+  const alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'logo_align-items_',
     propsKey: 'alignItems'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  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 _useStyles = useStyles.useStyles(props),
-    logo = _useStyles.styles;
+  const {
+    styles: logo
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && "logo_size_" + size),
+    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`),
     style: logo
   }, link || href ? /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     href: link || href

package/dist/components/Menu.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var direction = require('../constants/componentProps/direction.js');
 var type = require('../constants/componentProps/type.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index = require('./MenuItem.js');
 require('lodash/camelCase');
@@ -36,34 +36,35 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Menu(props) {
-  var after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    items = props.items,
-    type = props.type,
-    onClickItem = props.onClickItem;
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    after,
+    before,
+    children,
+    className,
+    items,
+    type,
+    onClickItem
+  } = props;
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu_direction_',
     propsKey: 'direction'
   });
-  var columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const columnsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'menu_columns_',
     propsKey: 'columns'
   });
-  var _useStyles = useStyles.useStyles(props),
-    menuStyles = _useStyles.styles;
+  const {
+    styles: menuStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'menu', directionClass, columnsClass, type && "menu_type_" + type)
+    className: clsx__default.default(className, 'menu', directionClass, columnsClass, type && `menu_type_${type}`)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "menu__wrapper",
     style: menuStyles
-  }, before, children || (items == null ? void 0 : items.map(function (item, i) {
-    return /*#__PURE__*/React__default.default.createElement(index.MenuItem, {
-      key: "menuItem_" + (item.id || i),
-      label: item.label,
-      onClick: onClickItem
-    });
+  }, before, children || items?.map((item, i) => /*#__PURE__*/React__default.default.createElement(index.MenuItem, {
+    key: `menuItem_${item.id || i}`,
+    label: item.label,
+    onClick: onClickItem
   })), after));
 }
 Menu.propTypes = {