@itcase/ui 1.0.42 → 1.0.44

package/dist/components/Accordion.js

@@ -9,7 +9,7 @@ var direction = require('../constants/componentProps/direction.js');
 var shape = require('../constants/componentProps/shape.js');
 var index = require('./Icon.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');
@@ -50,7 +50,7 @@ ChevronDown16.defaultProps = {
   fill: "none",
   stroke: "none"
 };
-var icon16 = {
+const icon16 = {
   chevron_down: ChevronDown16
 };
 
@@ -58,39 +58,42 @@ var icon16 = {
 
 /* Component */
 function AccordionItem(props) {
-  var children = props.children,
-    id = props.id,
-    title = props.title,
-    icon = props.icon,
-    content = props.content,
-    beforeContent = props.beforeContent,
-    afterContent = props.afterContent,
-    className = props.className,
-    isExpanded = props.isExpanded,
-    onClick = props.onClick;
-  var onClickTitle = React.useCallback(function () {
+  const {
+    children,
+    id,
+    title,
+    icon,
+    content,
+    beforeContent,
+    afterContent,
+    className,
+    isExpanded,
+    onClick
+  } = props;
+  const onClickTitle = React.useCallback(() => {
     // !isExpanded - is next state of expanded
-    var thisItemData = {
-      id: id,
-      title: title,
-      content: content,
+    const thisItemData = {
+      id,
+      title,
+      content,
       isExpanded: !isExpanded
     };
     onClick && onClick(thisItemData);
   }, [onClick, id, title, content, isExpanded]);
-  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: 'accordion-item_shape_',
     propsKey: 'shape'
   });
-  var iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'iconFill'
   });
-  var _useStyles = useStyles.useStyles(props),
-    styles = _useStyles.styles;
+  const {
+    styles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('accordion-item', className, fillClass, shapeClass, isExpanded && 'accordion-item_state_open'),
     style: styles
@@ -149,29 +152,25 @@ AccordionItem.propTypes = {
 
 /* Component */
 function Accordion(props) {
-  var children = props.children,
-    items = props.items,
-    className = props.className,
-    initial = props.initial,
-    isMultiple = props.isMultiple,
-    onClickItem = props.onClickItem;
-  var _useState = React.useState(castArray__default.default(initial)),
-    expandedItems = _useState[0],
-    setExpandedItems = _useState[1];
-  var onClickAccordionItem = React.useCallback(function (targetItem) {
-    setExpandedItems(function (prevState) {
-      var isExpanded = prevState.find(function (id) {
-        return id === targetItem.id;
-      });
+  const {
+    children,
+    items,
+    className,
+    initial,
+    isMultiple,
+    onClickItem
+  } = props;
+  const [expandedItems, setExpandedItems] = React.useState(castArray__default.default(initial));
+  const onClickAccordionItem = React.useCallback(targetItem => {
+    setExpandedItems(prevState => {
+      const isExpanded = prevState.find(id => id === targetItem.id);
       if (isMultiple) {
         if (isExpanded) {
           // ... without target id
-          return prevState.filter(function (id) {
-            return id !== targetItem.id;
-          });
+          return prevState.filter(id => id !== targetItem.id);
         } else {
           // ... with target id
-          return [].concat(prevState, [targetItem.id]);
+          return [...prevState, targetItem.id];
         }
       } else {
         if (isExpanded) {
@@ -183,22 +182,20 @@ function Accordion(props) {
     });
     onClickItem && onClickItem(targetItem);
   }, [onClickItem]);
-  var accordionItemsList = React.useMemo(function () {
+  const accordionItemsList = React.useMemo(() => {
     if (items) {
-      return items.map(function (item, i) {
-        return /*#__PURE__*/React__default.default.createElement(AccordionItem, {
-          content: item.content,
-          id: item.id,
-          isExpanded: expandedItems.includes(item.id),
-          key: "accordionItem_" + (item.id || i + 1),
-          title: item.title,
-          onClick: onClickAccordionItem
-        });
-      });
+      return items.map((item, i) => /*#__PURE__*/React__default.default.createElement(AccordionItem, {
+        content: item.content,
+        id: item.id,
+        isExpanded: expandedItems.includes(item.id),
+        key: `accordionItem_${item.id || i + 1}`,
+        title: item.title,
+        onClick: onClickAccordionItem
+      }));
     }
     if (children) {
-      return React__default.default.Children.toArray(children).map(function (child) {
-        var childID = child.props.id || child.key;
+      return React__default.default.Children.toArray(children).map(child => {
+        const childID = child.props.id || child.key;
         return /*#__PURE__*/React__default.default.cloneElement(child, {
           // this properties are available as a props in child components
           id: childID,
@@ -209,11 +206,11 @@ function Accordion(props) {
     }
     return [];
   }, [children, items, expandedItems, onClickAccordionItem]);
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'accordion_direction_',
     propsKey: 'direction'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
@@ -223,9 +220,10 @@ function Accordion(props) {
    * paddingHorizontal - styles  (horizontal will be parsed to left/right)
    * wrapper - target
    */
-  var _useStyles = useStyles.useStyles(props),
-    accordionStyles = _useStyles.styles,
-    accordionWrapperStyles = _useStyles.wrapper;
+  const {
+    styles: accordionStyles,
+    wrapper: accordionWrapperStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'accordion', directionClass, fillClass),
     style: accordionStyles

package/dist/components/Avatar.js

@@ -14,7 +14,7 @@ require('../constants/componentProps/resizeMode.js');
 require('../constants/componentProps/shape.js');
 require('../constants/componentProps/verticalContentAlign.js');
 require('../constants/componentProps/width.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -44,45 +44,47 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Avatar(props) {
-  var className = props.className,
-    icon = props.icon,
-    size = props.size,
-    after = props.after,
-    before = props.before,
-    src = props.src,
-    type = props.type,
-    onClick = props.onClick,
-    textSize = props.textSize,
-    textColor = props.textColor,
-    textWeight = props.textWeight,
-    iconItemFill = props.iconItemFill,
-    iconShape = props.iconShape,
-    iconSize = props.iconSize,
-    iconStroke = props.iconStroke,
-    iconFill = props.iconFill,
-    iconFillHover = props.iconFillHover,
-    iconFillSize = props.iconFillSize,
-    firstName = props.firstName,
-    secondName = props.secondName;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    icon,
+    size,
+    after,
+    before,
+    src,
+    type,
+    onClick,
+    textSize,
+    textColor,
+    textWeight,
+    iconItemFill,
+    iconShape,
+    iconSize,
+    iconStroke,
+    iconFill,
+    iconFillHover,
+    iconFillSize,
+    firstName,
+    secondName
+  } = 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: 'avatar_shape_',
     propsKey: 'shape'
   });
-  var avatarChars = React.useMemo(function () {
-    var firstChar = ((firstName == null ? void 0 : firstName[0]) || '').toUpperCase();
-    var secondChar = ((secondName == null ? void 0 : secondName[0]) || '').toUpperCase();
-    return "" + firstChar + secondChar;
+  const avatarChars = React.useMemo(() => {
+    const firstChar = (firstName?.[0] || '').toUpperCase();
+    const secondChar = (secondName?.[0] || '').toUpperCase();
+    return `${firstChar}${secondChar}`;
   }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'avatar', shapeClass, size && "avatar_size_" + size, type && "avatar_type_" + type, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'avatar', shapeClass, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)

package/dist/components/Background.js

@@ -7,7 +7,7 @@ var fill = require('../constants/componentProps/fill.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');
 require('lodash/camelCase');
 require('lodash/maxBy');
@@ -25,38 +25,41 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Background(props) {
-  var src = props.src,
-    className = props.className;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    src,
+    className
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'position_',
     propsKey: 'position'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'backdround_shape_',
     propsKey: 'shape'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var constraintsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const constraintsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'constraints_',
     propsKey: 'constraints'
   });
-  var imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'imageWidth'
   });
-  var imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
-  var _useStyles = useStyles.useStyles(props),
-    backgroundStyles = _useStyles.styles;
+  const {
+    styles: backgroundStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default(className, 'background', positionClass, widthClass, fillClass, shapeClass),
     style: backgroundStyles

package/dist/components/Badge.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');
@@ -31,28 +31,30 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Badge(props) {
-  var className = props.className,
-    children = props.children,
-    textColor = props.textColor,
-    textSize = props.textSize,
-    value = props.value;
-  var borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    className,
+    children,
+    textColor,
+    textSize,
+    value
+  } = 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 sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'badge_size_',
     propsKey: 'size'
   });
-  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'badge_type_',
     propsKey: 'type'
   });

package/dist/components/Breadcrumbs.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');
@@ -14,12 +13,7 @@ var index$2 = require('./Icon.js');
 var index$1 = require('./Text.js');
 var index = require('./Link.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
+var useStyles = require('../hooks/useStyles.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
@@ -31,6 +25,12 @@ require('../constants/componentProps/textWeight.js');
 require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
 require('lodash/castArray');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 require('../constants/componentProps/textColorActive.js');
 require('../constants/componentProps/textColorHover.js');
 
@@ -42,49 +42,52 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
 
 function BreadcrumbsItem(props) {
-  var children = props.children,
-    className = props.className,
-    set = props.set,
-    text = props.text,
-    href = props.href,
-    iconAfter = props.iconAfter,
-    iconAfterSize = props.iconAfterSize,
-    iconAfterBgFill = props.iconAfterBgFill,
-    iconAfterFill = props.iconAfterFill,
-    iconAfterStroke = props.iconAfterStroke;
-    props.underline;
-    var onClick = props.onClick;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    children,
+    className,
+    set,
+    text,
+    href,
+    iconAfter,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    underline,
+    onClick
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'breadcrumbs__item_shape_',
     propsKey: 'shape'
   });
-  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'position_',
     propsKey: 'position'
   });
-  var textSize = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textSize = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'textSize'
   });
-  var textColor = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColor = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'textColor'
   });
-  var textColorHover = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const textColorHover = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'textColorHover'
   });
-  var underlineClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const underlineClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-decoration_',
     propsKey: 'underline'
   });
-  var _useStyles = useStyles.useStyles(props),
-    itemStyles = _useStyles.styles;
+  const {
+    styles: itemStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     href: href,
     DefaultComponent: "div",
-    className: clsx__default.default(className, 'breadcrumbs__item', set && "breadcrumbs__item_set_" + set, fillClass, positionClass, shapeClass, underlineClass),
+    className: clsx__default.default(className, 'breadcrumbs__item', set && `breadcrumbs__item_set_${set}`, fillClass, positionClass, shapeClass, underlineClass),
     style: itemStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement(index$1.Text, {
@@ -128,77 +131,75 @@ BreadcrumbsItem.defaultProps = {
   set: 'default'
 };
 
-var _excluded = ["breadcrumbsList", "children", "className", "iconAfterSize", "iconAfterBgFill", "iconAfterFill", "iconAfterStroke", "itemUnderline", "itemTextColor", "itemTextColorHover", "set"];
 function Breadcrumbs(props) {
-  var breadcrumbsList = props.breadcrumbsList,
-    children = props.children,
-    className = props.className,
-    iconAfterSize = props.iconAfterSize,
-    iconAfterBgFill = props.iconAfterBgFill,
-    iconAfterFill = props.iconAfterFill,
-    iconAfterStroke = props.iconAfterStroke,
-    itemUnderline = props.itemUnderline,
-    itemTextColor = props.itemTextColor,
-    itemTextColorHover = props.itemTextColorHover,
-    set = props.set,
-    otherProps = useStyles._objectWithoutPropertiesLoose(props, _excluded);
-  var breadcrumbsItemsList = React.useMemo(function () {
+  const {
+    breadcrumbsList,
+    children,
+    className,
+    iconAfterSize,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterStroke,
+    itemUnderline,
+    itemTextColor,
+    itemTextColorHover,
+    set,
+    ...otherProps
+  } = props;
+  const breadcrumbsItemsList = React.useMemo(() => {
     if (breadcrumbsList) {
-      var itemProps = Object.entries(otherProps).reduce(function (collectedProps, _ref) {
-        var key = _ref[0],
-          value = _ref[1];
+      const itemProps = Object.entries(otherProps).reduce((collectedProps, [key, value]) => {
         if (key.startsWith('item')) {
-          var propKey = camelCase__default.default(key.replace('item', ''));
+          const propKey = camelCase__default.default(key.replace('item', ''));
           collectedProps[propKey] = value;
         }
         return collectedProps;
       }, {});
-      return breadcrumbsList.map(function (item, i) {
-        return /*#__PURE__*/React__default.default.createElement(BreadcrumbsItem, Object.assign({
-          key: "breadcrumbsItem_" + (item.id || item.text),
-          set: i + 1 !== breadcrumbsList.length ? 'default' : 'current',
-          iconAfter: i + 1 !== breadcrumbsList.length ? itemProps.iconAfter : null,
-          iconAfterSize: iconAfterSize,
-          iconAfterBgFill: iconAfterBgFill,
-          iconAfterFill: iconAfterFill,
-          iconAfterStroke: iconAfterStroke,
-          text: item.text,
-          textColor: itemTextColor,
-          textColorHover: itemTextColorHover,
-          underline: itemUnderline,
-          href: item.href
-        }, itemProps));
-      });
+      return breadcrumbsList.map((item, i) => /*#__PURE__*/React__default.default.createElement(BreadcrumbsItem, Object.assign({
+        key: `breadcrumbsItem_${item.id || item.text}`,
+        set: i + 1 !== breadcrumbsList.length ? 'default' : 'current',
+        iconAfter: i + 1 !== breadcrumbsList.length ? itemProps.iconAfter : null,
+        iconAfterSize: iconAfterSize,
+        iconAfterBgFill: iconAfterBgFill,
+        iconAfterFill: iconAfterFill,
+        iconAfterStroke: iconAfterStroke,
+        text: item.text,
+        textColor: itemTextColor,
+        textColorHover: itemTextColorHover,
+        underline: itemUnderline,
+        href: item.href
+      }, itemProps)));
     }
     if (children) {
       return children;
     }
     return [];
   }, [children, breadcrumbsList, otherProps]);
-  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'direction_',
     propsKey: 'direction'
   });
-  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: 'breadcrumbs_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 _useStyles = useStyles.useStyles(props),
-    breadcrumbsStyles = _useStyles.styles;
+  const {
+    styles: breadcrumbsStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && "breadcrumbs_set_" + set),
+    className: clsx__default.default(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && `breadcrumbs_set_${set}`),
     style: breadcrumbsStyles
   }, breadcrumbsItemsList);
 }