@itcase/ui 1.0.1

package/dist/components/Accordion.js

@@ -0,0 +1,249 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var castArray = require('lodash/castArray');
+var fill = require('../constants/componentProps/fill.js');
+var direction = require('../constants/componentProps/direction.js');
+var shape = require('../constants/componentProps/shape.js');
+var index = require('./Icon.js');
+var index$1 = require('../index-f1505c84.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+var castArray__default = /*#__PURE__*/_interopDefault(castArray);
+
+/* React, PropTypes, other third-party modules */
+
+/* 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 () {
+    // !isExpanded - is next state of expanded
+    var thisItemData = {
+      id: id,
+      title: title,
+      content: content,
+      isExpanded: !isExpanded
+    };
+    onClick && onClick(thisItemData);
+  }, [onClick, id, title, content, isExpanded]);
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'accordion-item_shape_',
+    propsKey: 'shape'
+  });
+  var iconFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'iconFill'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('accordion-item', className, fillClass, shapeClass, isExpanded && 'accordion-item_state_open'),
+    style: styles
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "accordion-item__title",
+    onClick: onClickTitle
+  }, title), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "accordion-item__icon",
+    onClick: onClickTitle
+  }, icon || /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    fill: iconFillClass,
+    size: "16",
+    SvgImage: index$1.icon16.chevron_down
+  })), beforeContent && beforeContent, isExpanded && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "accordion-item__content"
+  }, children || content), afterContent && afterContent);
+}
+
+/* Component default props */
+AccordionItem.defaultProps = {
+  iconFill: 'surfaceItemAccent'
+};
+
+/* Component prop types */
+AccordionItem.propTypes = {
+  afterContent: PropTypes__default.default.any,
+  beforeContent: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  content: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  icon: PropTypes__default.default.any,
+  iconFill: PropTypes__default.default.oneOf(fill.default),
+  iconFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  iconFillMobile: PropTypes__default.default.oneOf(fill.default),
+  iconFillTablet: PropTypes__default.default.oneOf(fill.default),
+  id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+  isExpanded: PropTypes__default.default.bool,
+  item: PropTypes__default.default.shape({
+    id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
+    title: PropTypes__default.default.string,
+    content: PropTypes__default.default.string
+  }),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  title: PropTypes__default.default.any,
+  onClick: PropTypes__default.default.func
+};
+
+/* React, PropTypes, other third-party modules */
+
+/* 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;
+      });
+      if (isMultiple) {
+        if (isExpanded) {
+          // ... without target id
+          return prevState.filter(function (id) {
+            return id !== targetItem.id;
+          });
+        } else {
+          // ... with target id
+          return [].concat(prevState, [targetItem.id]);
+        }
+      } else {
+        if (isExpanded) {
+          return [];
+        } else {
+          return [targetItem.id];
+        }
+      }
+    });
+    onClickItem && onClickItem(targetItem);
+  }, [onClickItem]);
+  var accordionItemsList = React.useMemo(function () {
+    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
+        });
+      });
+    }
+    if (children) {
+      return React__default.default.Children.toArray(children).map(function (child) {
+        var 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,
+          isExpanded: expandedItems.includes(childID),
+          onClick: onClickAccordionItem
+        });
+      });
+    }
+    return [];
+  }, [children, items, expandedItems, onClickAccordionItem]);
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'accordion_direction_',
+    propsKey: 'direction'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+
+  /*
+   * paddingHorizontalWrapper="16px"
+   * paddingHorizontal - styles  (horizontal will be parsed to left/right)
+   * wrapper - target
+   */
+  var _useStyles = useStyles.useStyles(props),
+    accordionStyles = _useStyles.styles,
+    accordionWrapperStyles = _useStyles.wrapper;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'accordion', directionClass, fillClass),
+    style: accordionStyles
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "accordion__wrapper",
+    style: accordionWrapperStyles
+  }, accordionItemsList));
+}
+
+/* Component default props */
+Accordion.defaultProps = {
+  initial: []
+};
+
+/* Component prop types */
+Accordion.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  /**
+   * The number of columns to span on extra small devices (<576px)
+   *
+   */
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  initial: PropTypes__default.default.array,
+  isMultiple: PropTypes__default.default.bool,
+  items: PropTypes__default.default.array,
+  onClickItem: PropTypes__default.default.func
+};
+
+exports.Accordion = Accordion;
+exports.AccordionItem = AccordionItem;

package/dist/components/Avatar.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index = require('./Image.js');
+var index$1 = require('./Text.js');
+var size = require('../constants/componentProps/size.js');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/horizontalContentAlign.js');
+require('../constants/componentProps/resizeMode.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/verticalContentAlign.js');
+require('../constants/componentProps/width.js');
+require('../useStyles-77c3b520.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');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Avatar(props) {
+  var children = props.children,
+    className = props.className,
+    icon = props.icon,
+    size = props.size,
+    src = props.src,
+    text = props.text,
+    textSize = props.textSize,
+    textColor = props.textColor,
+    textTag = props.textTag,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTag = props.titleTag,
+    titleColor = props.titleColor,
+    type = props.type,
+    onClick = props.onClick;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    onClick: onClick,
+    className: clsx__default.default(className, 'avatar', size && "avatar_size_" + size, type && "avatar_type_" + type)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "avatar__wrapper"
+  }, /*#__PURE__*/React__default.default.createElement(index.Image, {
+    className: "avatar__image",
+    shape: "circular",
+    src: src
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "avatar__data"
+  }, title && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "avatar__data-title",
+    size: titleSize,
+    textColor: titleColor,
+    tag: titleTag
+  }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    size: textSize,
+    tag: textTag,
+    textColor: textColor,
+    className: "avatar__data-desc"
+  }, text), icon && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "avatar__icon"
+  }, icon)), children));
+}
+Avatar.propTypes = {
+  size: PropTypes__default.default.oneOf(PropTypes__default.default.oneOf(size.default)),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  icon: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+Avatar.defaultProps = {
+  textSize: 'l',
+  titleColor: 'surfaceTextPrimary',
+  titleTag: 'span',
+  titleSize: 'xxl',
+  textColor: 'surfaceTextTertiary'
+};
+
+exports.Avatar = Avatar;

package/dist/components/Background.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+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-77c3b520.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.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('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+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, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'backdround_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var constraintsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'constraints_',
+    propsKey: 'constraints'
+  });
+  var imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'imageWidth'
+  });
+  var imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'imageHeight'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    backgroundStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'background', positionClass, widthClass, fillClass, shapeClass),
+    style: backgroundStyles
+  }, /*#__PURE__*/React__default.default.createElement("img", {
+    className: clsx__default.default('background__item', imageWidthClass, imageHeightClass, constraintsClass),
+    src: src
+  }));
+}
+Background.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  src: PropTypes__default.default.string,
+  position: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default)
+};
+
+exports.Background = Background;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,239 @@
+'use strict';
+
+var useStyles = require('../useStyles-77c3b520.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var camelCase = require('lodash/camelCase');
+var direction = require('../constants/componentProps/direction.js');
+var fill = require('../constants/componentProps/fill.js');
+var position = require('../constants/componentProps/position.js');
+var shape = require('../constants/componentProps/shape.js');
+var width = require('../constants/componentProps/width.js');
+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');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/strokeColor.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('lodash/castArray');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+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, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'breadcrumbs__item_shape_',
+    propsKey: 'shape'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var textSize = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'textSize'
+  });
+  var textColor = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'textColor'
+  });
+  var textColorHover = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'textColorHover'
+  });
+  var underlineClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-decoration_',
+    propsKey: 'underline'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    itemStyles = _useStyles.styles;
+  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),
+    style: itemStyles,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "breadcrumbs__item-text",
+    textColor: textColor,
+    textColorHover: textColorHover,
+    size: textSize
+  }, text || children), iconAfter && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+    className: "breadcrumbs__item-icon",
+    SvgImage: iconAfter,
+    size: iconAfterSize,
+    bgFill: iconAfterBgFill,
+    fill: iconAfterFill,
+    stroke: iconAfterStroke
+  }));
+}
+BreadcrumbsItem.propTypes = {
+  text: PropTypes__default.default.string,
+  textColor: PropTypes__default.default.string,
+  textSize: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  position: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  tag: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+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 () {
+    if (breadcrumbsList) {
+      var itemProps = Object.entries(otherProps).reduce(function (collectedProps, _ref) {
+        var key = _ref[0],
+          value = _ref[1];
+        if (key.startsWith('item')) {
+          var 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));
+      });
+    }
+    if (children) {
+      return children;
+    }
+    return [];
+  }, [children, breadcrumbsList, otherProps]);
+  var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'direction_',
+    propsKey: 'direction'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'breadcrumbs_shape_',
+    propsKey: 'shape'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'position_',
+    propsKey: 'position'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    breadcrumbsStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'breadcrumbs', widthClass, directionClass, fillClass, positionClass, shapeClass, set && "breadcrumbs_set_" + set),
+    style: breadcrumbsStyles
+  }, breadcrumbsItemsList);
+}
+Breadcrumbs.propTypes = {
+  breadcrumbsList: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
+    text: PropTypes__default.default.string,
+    href: PropTypes__default.default.string
+  })),
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  set: PropTypes__default.default.string,
+  direction: PropTypes__default.default.oneOf(direction.default),
+  directionDesktop: PropTypes__default.default.oneOf(direction.default),
+  directionMobile: PropTypes__default.default.oneOf(direction.default),
+  directionTablet: PropTypes__default.default.oneOf(direction.default),
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  shape: PropTypes__default.default.oneOf(shape.default),
+  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
+  shapeMobile: PropTypes__default.default.oneOf(shape.default),
+  shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  position: PropTypes__default.default.oneOf(position.default),
+  positionMobile: PropTypes__default.default.oneOf(position.default),
+  positionTablet: PropTypes__default.default.oneOf(position.default),
+  positionDesktop: PropTypes__default.default.oneOf(position.default),
+  width: PropTypes__default.default.oneOf(width.default),
+  widthMobile: PropTypes__default.default.oneOf(width.default),
+  widthTablet: PropTypes__default.default.oneOf(width.default),
+  widthDesktop: PropTypes__default.default.oneOf(width.default)
+};
+Breadcrumbs.defaultProps = {
+  direction: 'horizontal'
+};
+
+exports.Breadcrumbs = Breadcrumbs;
+exports.BreadcrumbsItem = BreadcrumbsItem;