@activecollab/components 1.0.109 → 1.0.112

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -9,19 +9,23 @@ exports.Breadcrumbs = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _ = require("../..");
+var _utils = require("../../utils");
+
+var _Menu = require("../Menu");
+
+var _List = require("../List");
 
 var _Button = require("../Button");
 
 var _Icons = require("../Icons");
 
-var _List = require("../List");
-
-var _Menu = require("../Menu");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
 var _Styles = require("./Styles");
 
-var _excluded = ["children", "className", "separator"];
+var _excluded = ["children", "className", "separator", "timeout"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -29,6 +33,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -50,38 +62,136 @@ var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       className = _ref.className,
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? "/" : _ref$separator,
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 300 : _ref$timeout,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var internalRef = (0, _react.useRef)(null);
-  var handleRef = (0, _.useForkRef)(ref, internalRef);
-  var menuBreadcrumbs = 0;
+  var prevWidth = (0, _react.useRef)();
+  var widthCollectionRef = (0, _react.useRef)([]);
+  var handleRef = (0, _utils.useForkRef)(ref, internalRef);
+  var dimensions = (0, _utils.useResizeObserver)(internalRef);
+  var childrenCollection = (0, _react.useMemo)(function () {
+    return _react.default.Children.toArray(children);
+  }, [children]);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      menuBreadcrumbs = _useState4[0],
+      setMenuBreadcrumbs = _useState4[1];
 
   var _useMemo = (0, _react.useMemo)(function () {
-    var collection = _react.default.Children.toArray(children);
-
-    return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
-  }, [children, menuBreadcrumbs]),
+    return [childrenCollection.slice(0, menuBreadcrumbs), childrenCollection.slice(menuBreadcrumbs, childrenCollection.length)];
+  }, [childrenCollection, menuBreadcrumbs]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       menuCollection = _useMemo2[0],
       listCollection = _useMemo2[1];
 
+  (0, _react.useEffect)(function () {
+    var _internalRef$current, _internalRef$current2, _prevWidth$current;
+
+    var actualWidth = ((_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.scrollWidth) || 0;
+    var breadcrumbItems = (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.firstElementChild;
+    var enabled = ((_prevWidth$current = prevWidth.current) !== null && _prevWidth$current !== void 0 ? _prevWidth$current : 0) > (width !== null && width !== void 0 ? width : 0);
+
+    if (enabled && width && actualWidth > width) {
+      var diffWidth = actualWidth - width;
+      var childWidthCollection = [];
+      var childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;
+      var childSumWidth = 0;
+
+      while (diffWidth > childSumWidth) {
+        var _offsetWidth, _breadcrumbItems$chil, _offsetWidth2, _breadcrumbItems$chil2;
+
+        var childWidth = (_offsetWidth = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$chil = breadcrumbItems.children[childIndex]) === null || _breadcrumbItems$chil === void 0 ? void 0 : _breadcrumbItems$chil.offsetWidth) !== null && _offsetWidth !== void 0 ? _offsetWidth : 0;
+        var separatorWidth = (_offsetWidth2 = breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$chil2 = breadcrumbItems.children[childIndex + 1]) === null || _breadcrumbItems$chil2 === void 0 ? void 0 : _breadcrumbItems$chil2.offsetWidth) !== null && _offsetWidth2 !== void 0 ? _offsetWidth2 : 0;
+        var result = separatorWidth + childWidth;
+        childWidthCollection.push(result);
+        childSumWidth += result;
+        childIndex += 2;
+      }
+
+      if (childWidthCollection.length === listCollection.length) {
+        childWidthCollection.pop();
+      }
+
+      widthCollectionRef.current = [].concat(_toConsumableArray(widthCollectionRef.current), childWidthCollection);
+      setMenuBreadcrumbs(function (oldVal) {
+        return oldVal + childWidthCollection.length;
+      });
+    }
+  }, [listCollection.length, width]);
+  (0, _react.useEffect)(function () {
+    var _internalRef$current3, _breadcrumbItems$last, _breadcrumbItems$last2, _prevWidth$current2;
+
+    var breadcrumbItems = (_internalRef$current3 = internalRef.current) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.firstElementChild;
+    var nextWidth = (breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$last = breadcrumbItems.lastElementChild) === null || _breadcrumbItems$last === void 0 ? void 0 : _breadcrumbItems$last.offsetWidth) + (breadcrumbItems === null || breadcrumbItems === void 0 ? void 0 : (_breadcrumbItems$last2 = breadcrumbItems.lastElementChild) === null || _breadcrumbItems$last2 === void 0 ? void 0 : _breadcrumbItems$last2.offsetLeft);
+    var enabled = ((_prevWidth$current2 = prevWidth.current) !== null && _prevWidth$current2 !== void 0 ? _prevWidth$current2 : 0) < (width !== null && width !== void 0 ? width : 0);
+    var diffWidth = (width !== null && width !== void 0 ? width : 0) - nextWidth;
+
+    if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {
+      var total = widthCollectionRef.current.length;
+
+      var collection = _toConsumableArray(widthCollectionRef.current);
+
+      var sumWidth = 0;
+
+      while (diffWidth > sumWidth && collection.length > 0) {
+        var _collection;
+
+        var lastWidth = (_collection = collection[collection.length - 1]) !== null && _collection !== void 0 ? _collection : 0;
+
+        if (diffWidth < lastWidth + sumWidth) {
+          sumWidth = diffWidth;
+        } else {
+          var _collection$pop;
+
+          sumWidth += (_collection$pop = collection.pop()) !== null && _collection$pop !== void 0 ? _collection$pop : 0;
+        }
+      }
+
+      var totalToDecrease = total - collection.length;
+      setMenuBreadcrumbs(function (oldVal) {
+        return oldVal - totalToDecrease;
+      });
+      var end = total - totalToDecrease;
+      widthCollectionRef.current = end > 0 ? widthCollectionRef.current.slice(0, end) : [];
+    }
+  }, [width]);
+  (0, _react.useEffect)(function () {
+    var _dimensions$width;
+
+    var debounceWidth = (0, _lodash.default)(function (width) {
+      setWidth(function (prevState) {
+        prevWidth.current = prevState !== null && prevState !== void 0 ? prevState : width + 1;
+        return width;
+      });
+    }, timeout);
+    debounceWidth((_dimensions$width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width) !== null && _dimensions$width !== void 0 ? _dimensions$width : 0);
+    return function () {
+      debounceWidth.cancel();
+    };
+  }, [timeout, dimensions === null || dimensions === void 0 ? void 0 : dimensions.width]);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledNavElement, _extends({
     className: className,
     ref: handleRef
-  }, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledOList, null, menuBreadcrumbs > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledListMenuItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Styles.StyledOList, null, menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
     target: /*#__PURE__*/_react.default.createElement(_Button.Button, {
       variant: "text gray"
     }, /*#__PURE__*/_react.default.createElement(_Icons.TreeDotsIcon, null))
-  }, /*#__PURE__*/_react.default.createElement(_List.List, {
-    className: "tw-py-2"
-  }, menuCollection.map(function (child, index) {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledMenuList, null, menuCollection.map(function (child, index) {
     return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       key: index
     }, child);
   })))) : null, listCollection.map(function (child, index) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: index
-    }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, child));
+    }, index > 0 || menuCollection.length > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, child));
   })));
 });
 

package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","React","forwardRef","ref","children","className","separator","rest","internalRef","handleRef","menuBreadcrumbs","collection","Children","toArray","slice","length","menuCollection","listCollection","map","child","index","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,IAAMA,WAAW,gBAAGC,eAAMC,UAAN,CAIzB,gBAAoDC,GAApD,EAA4D;AAAA,MAAzDC,QAAyD,QAAzDA,QAAyD;AAAA,MAA/CC,SAA+C,QAA/CA,SAA+C;AAAA,4BAApCC,SAAoC;AAAA,MAApCA,SAAoC,+BAAxB,GAAwB;AAAA,MAAhBC,IAAgB;;AAC5D,MAAMC,WAAW,GAAG,mBAA2B,IAA3B,CAApB;AACA,MAAMC,SAAS,GAAG,kBAAWN,GAAX,EAAgBK,WAAhB,CAAlB;AACA,MAAME,eAAe,GAAG,CAAxB;;AAEA,iBAAyC,oBAAQ,YAAM;AACrD,QAAMC,UAAU,GAAGV,eAAMW,QAAN,CAAeC,OAAf,CAAuBT,QAAvB,CAAnB;;AACA,WAAO,CACLO,UAAU,CAACG,KAAX,CAAiB,CAAjB,EAAoBJ,eAApB,CADK,EAELC,UAAU,CAACG,KAAX,CAAiBJ,eAAjB,EAAkCC,UAAU,CAACI,MAA7C,CAFK,CAAP;AAID,GANwC,EAMtC,CAACX,QAAD,EAAWM,eAAX,CANsC,CAAzC;AAAA;AAAA,MAAOM,cAAP;AAAA,MAAuBC,cAAvB;;AAQA,sBACE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAEZ,SAA7B;AAAwC,IAAA,GAAG,EAAEI;AAA7C,KAA4DF,IAA5D,gBACE,6BAAC,mBAAD,QACGG,eAAe,GAAG,CAAlB,gBACC,6BAAC,0BAAD,qBACE,6BAAC,UAAD;AACE,IAAA,MAAM,eACJ,6BAAC,cAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,6BAAC,mBAAD,OADF;AAFJ,kBAOE,6BAAC,UAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGM,cAAc,CAACE,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR;AAAA,wBAClB,6BAAC,cAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBD,KAAvB,CADkB;AAAA,GAAnB,CADH,CAPF,CADF,CADD,GAgBG,IAjBN,EAkBGF,cAAc,CAACC,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR,EAAkB;AACpC,wBACE,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaV,eAAe,GAAG,CAA/B,gBACC,6BAAC,gCAAD,QAA2BJ,SAA3B,CADD,GAEG,IAHN,eAIE,6BAAC,gCAAD,QAA2Ba,KAA3B,CAJF,CADF;AAQD,GATA,CAlBH,CADF,CADF;AAiCD,CAlD0B,CAApB;;;AAoDPnB,WAAW,CAACqB,WAAZ,GAA0B,aAA1B","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { useForkRef } from \"../..\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport { List, ListItem } from \"../List\";\nimport { Menu } from \"../Menu\";\nimport {\n  StyledListMenuItem,\n  StyledNavElement,\n  StyledOList,\n  StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const handleRef = useForkRef(ref, internalRef);\n  const menuBreadcrumbs = 0;\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    const collection = React.Children.toArray(children);\n    return [\n      collection.slice(0, menuBreadcrumbs),\n      collection.slice(menuBreadcrumbs, collection.length),\n    ];\n  }, [children, menuBreadcrumbs]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledOList>\n        {menuBreadcrumbs > 0 ? (\n          <StyledListMenuItem>\n            <Menu\n              target={\n                <Button variant=\"text gray\">\n                  <TreeDotsIcon />\n                </Button>\n              }\n            >\n              <List className=\"tw-py-2\">\n                {menuCollection.map((child, index) => (\n                  <ListItem key={index}>{child}</ListItem>\n                ))}\n              </List>\n            </Menu>\n          </StyledListMenuItem>\n        ) : null}\n        {listCollection.map((child, index) => {\n          return (\n            <React.Fragment key={index}>\n              {index > 0 || menuBreadcrumbs > 0 ? (\n                <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n              ) : null}\n              <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n            </React.Fragment>\n          );\n        })}\n      </StyledOList>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","React","forwardRef","ref","children","className","separator","timeout","rest","internalRef","prevWidth","widthCollectionRef","handleRef","dimensions","childrenCollection","Children","toArray","width","setWidth","menuBreadcrumbs","setMenuBreadcrumbs","slice","length","menuCollection","listCollection","actualWidth","current","scrollWidth","breadcrumbItems","firstElementChild","enabled","diffWidth","childWidthCollection","childIndex","childSumWidth","childWidth","offsetWidth","separatorWidth","result","push","pop","oldVal","nextWidth","lastElementChild","offsetLeft","total","collection","sumWidth","lastWidth","totalToDecrease","end","debounceWidth","prevState","cancel","map","child","index","displayName"],"mappings":"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","sourcesContent":["import React, {\n  ReactElement,\n  useRef,\n  useMemo,\n  useEffect,\n  useState,\n} from \"react\";\nimport { useForkRef, useResizeObserver } from \"../../utils\";\nimport { Menu } from \"../Menu\";\nimport { ListItem } from \"../List\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport debounce from \"lodash.debounce\";\nimport {\n  StyledNavElement,\n  StyledOList,\n  StyledBreadcrumbListItem,\n  StyledMenuList,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Separator element */\n  separator?: ReactElement | string;\n  /** Resize update timeout */\n  timeout?: number;\n}\n\nexport const Breadcrumbs = React.forwardRef<\n  HTMLElement,\n  BreadcrumbsProps &\n    Omit<React.ComponentPropsWithoutRef<\"nav\">, keyof BreadcrumbsProps>\n>(({ children, className, separator = \"/\", timeout = 300, ...rest }, ref) => {\n  const internalRef = useRef<HTMLElement | null>(null);\n  const prevWidth = useRef<number | undefined>();\n  const widthCollectionRef = useRef<number[]>([]);\n  const handleRef = useForkRef(ref, internalRef);\n  const dimensions = useResizeObserver(internalRef);\n\n  const childrenCollection = useMemo(\n    () => React.Children.toArray(children),\n    [children]\n  );\n\n  const [width, setWidth] = useState<number | undefined>();\n  const [menuBreadcrumbs, setMenuBreadcrumbs] = useState(0);\n\n  const [menuCollection, listCollection] = useMemo(() => {\n    return [\n      childrenCollection.slice(0, menuBreadcrumbs),\n      childrenCollection.slice(menuBreadcrumbs, childrenCollection.length),\n    ];\n  }, [childrenCollection, menuBreadcrumbs]);\n\n  useEffect(() => {\n    const actualWidth = internalRef.current?.scrollWidth || 0;\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n\n    const enabled = (prevWidth.current ?? 0) > (width ?? 0);\n\n    if (enabled && width && actualWidth > width) {\n      const diffWidth = actualWidth - width;\n      const childWidthCollection: number[] = [];\n\n      let childIndex = widthCollectionRef.current.length === 0 ? 0 : 2;\n      let childSumWidth = 0;\n\n      while (diffWidth > childSumWidth) {\n        const childWidth =\n          (breadcrumbItems?.children[childIndex] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const separatorWidth =\n          (breadcrumbItems?.children[childIndex + 1] as HTMLLIElement)\n            ?.offsetWidth ?? 0;\n        const result = separatorWidth + childWidth;\n        childWidthCollection.push(result);\n        childSumWidth += result;\n        childIndex += 2;\n      }\n\n      if (childWidthCollection.length === listCollection.length) {\n        childWidthCollection.pop();\n      }\n\n      widthCollectionRef.current = [\n        ...widthCollectionRef.current,\n        ...childWidthCollection,\n      ];\n\n      setMenuBreadcrumbs((oldVal) => oldVal + childWidthCollection.length);\n    }\n  }, [listCollection.length, width]);\n\n  useEffect(() => {\n    const breadcrumbItems = internalRef.current?.firstElementChild;\n    const nextWidth =\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetWidth +\n      (breadcrumbItems?.lastElementChild as HTMLLIElement)?.offsetLeft;\n\n    const enabled = (prevWidth.current ?? 0) < (width ?? 0);\n    const diffWidth = (width ?? 0) - nextWidth;\n\n    if (enabled && diffWidth > 0 && widthCollectionRef.current.length > 0) {\n      const total = widthCollectionRef.current.length;\n      const collection = [...widthCollectionRef.current];\n\n      let sumWidth = 0;\n\n      while (diffWidth > sumWidth && collection.length > 0) {\n        const lastWidth = collection[collection.length - 1] ?? 0;\n        if (diffWidth < lastWidth + sumWidth) {\n          sumWidth = diffWidth;\n        } else {\n          sumWidth += collection.pop() ?? 0;\n        }\n      }\n\n      const totalToDecrease = total - collection.length;\n\n      setMenuBreadcrumbs((oldVal) => oldVal - totalToDecrease);\n\n      const end = total - totalToDecrease;\n\n      widthCollectionRef.current =\n        end > 0 ? widthCollectionRef.current.slice(0, end) : [];\n    }\n  }, [width]);\n\n  useEffect(() => {\n    const debounceWidth = debounce((width: number) => {\n      setWidth((prevState) => {\n        prevWidth.current = prevState ?? width + 1;\n        return width;\n      });\n    }, timeout);\n\n    debounceWidth(dimensions?.width ?? 0);\n\n    return (): void => {\n      debounceWidth.cancel();\n    };\n  }, [timeout, dimensions?.width]);\n\n  return (\n    <StyledNavElement className={className} ref={handleRef} {...rest}>\n      <StyledOList>\n        {menuCollection.length > 0 ? (\n          <StyledBreadcrumbListItem>\n            <Menu\n              target={\n                <Button variant=\"text gray\">\n                  <TreeDotsIcon />\n                </Button>\n              }\n            >\n              <StyledMenuList>\n                {menuCollection.map((child, index) => (\n                  <ListItem key={index}>{child}</ListItem>\n                ))}\n              </StyledMenuList>\n            </Menu>\n          </StyledBreadcrumbListItem>\n        ) : null}\n        {listCollection.map((child, index) => {\n          return (\n            <React.Fragment key={index}>\n              {index > 0 || menuCollection.length > 0 ? (\n                <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n              ) : null}\n              <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n            </React.Fragment>\n          );\n        })}\n      </StyledOList>\n    </StyledNavElement>\n  );\n});\n\nBreadcrumbs.displayName = \"Breadcrumbs\";\n"],"file":"Breadcrumbs.js"}

package/dist/cjs/components/Breadcrumbs/Styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOList = exports.StyledNavElement = exports.StyledListMenuItem = exports.StyledBreadcrumbListItem = void 0;
+exports.StyledOList = exports.StyledNavElement = exports.StyledMenuList = exports.StyledBreadcrumbListItem = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -11,6 +11,8 @@ var _BoxSizingStyle = require("../BoxSizingStyle");
 
 var _FontStyle = require("../FontStyle");
 
+var _List = require("../List");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var StyledNavElement = _styledComponents.default.nav.withConfig({
@@ -44,22 +46,23 @@ var StyledOList = _styledComponents.default.ul.withConfig({
 
 exports.StyledOList = StyledOList;
 StyledOList.displayName = "StyledOList";
-
-var StyledListMenuItem = _styledComponents.default.li.withConfig({
-  displayName: "Styles__StyledListMenuItem",
+var StyledMenuList = (0, _styledComponents.default)(_List.List).withConfig({
+  displayName: "Styles__StyledMenuList",
   componentId: "sc-rxaesd-2"
 })(["", ""], {
-  "flexShrink": "0"
+  "paddingTop": "0.5rem",
+  "paddingBottom": "0.5rem"
 });
-
-exports.StyledListMenuItem = StyledListMenuItem;
-StyledListMenuItem.displayName = "StyledListMenuItem";
+exports.StyledMenuList = StyledMenuList;
+StyledMenuList.displayName = "StyledMenuList";
 
 var StyledBreadcrumbListItem = _styledComponents.default.li.withConfig({
   displayName: "Styles__StyledBreadcrumbListItem",
   componentId: "sc-rxaesd-3"
-})(["", ""], {
+})(["", " ", ""], {
   "display": "flex"
+}, {
+  "flexShrink": "0"
 });
 
 exports.StyledBreadcrumbListItem = StyledBreadcrumbListItem;

package/dist/cjs/components/Breadcrumbs/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledOList","ul","StyledListMenuItem","li","StyledBreadcrumbListItem"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBC,oBAHyB,EAIzBC,8BAJyB,CAAtB;;;AAOPJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,WAAW,GAAGL,0BAAOM,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;;;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,kBAAkB,GAAGP,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;;;AAIPD,kBAAkB,CAACH,WAAnB,GAAiC,oBAAjC;;AAEO,IAAMK,wBAAwB,GAAGT,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA,CAD+B,CAA9B;;;AAIPC,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledNavElement = styled.nav`\n  ${tw`tw-w-full`}\n  ${tw`tw-overflow-visible`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n  ${tw`tw-flex`}\n  ${tw`tw-items-start`}\n  ${tw`tw-list-none`}\n  ${tw`tw-p-0`}\n  ${tw`tw-m-0`}\n  ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledListMenuItem = styled.li`\n  ${tw`tw-flex-shrink-0`}\n`;\n\nStyledListMenuItem.displayName = \"StyledListMenuItem\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n  ${tw`tw-flex`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledOList","ul","StyledMenuList","List","StyledBreadcrumbListItem","li"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBC,oBAHyB,EAIzBC,8BAJyB,CAAtB;;;AAOPJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,WAAW,GAAGL,0BAAOM,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;;;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEO,IAAMG,cAAc,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA;AAAA,CADqB,CAApB;;AAIPD,cAAc,CAACH,WAAf,GAA6B,gBAA7B;;AAEO,IAAMK,wBAAwB,GAAGT,0BAAOU,EAAV;AAAA;AAAA;AAAA,kBAC/B;AAAA;AAAA,CAD+B,EAE/B;AAAA;AAAA,CAF+B,CAA9B;;;AAKPD,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { List } from \"../List\";\n\nexport const StyledNavElement = styled.nav`\n  ${tw`tw-w-full`}\n  ${tw`tw-overflow-visible`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n  ${tw`tw-flex`}\n  ${tw`tw-items-start`}\n  ${tw`tw-list-none`}\n  ${tw`tw-p-0`}\n  ${tw`tw-m-0`}\n  ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledMenuList = styled(List)`\n  ${tw`tw-py-2`}\n`;\n\nStyledMenuList.displayName = \"StyledMenuList\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n  ${tw`tw-flex`}\n  ${tw`tw-flex-shrink-0`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Checkbox/Styles.js

@@ -33,7 +33,7 @@ var StyledCheckbox = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledCheckbox",
   componentId: "sc-y7zymm-2"
 })(["height:16px;width:16px;position:relative;transition-duration:0.2s;border-radius:2px;path{transition-duration:0.2s;stroke:transparent;stroke-dashoffset:12;stroke-dasharray:12;}svg{cursor:pointer;border-radius:2px;fill:transparent;}rect{transition-duration:0.2s;stroke:var(--color-theme-500);}", ":disabled ~ ", "{pointer-events:none;opacity:0.5;}", ":focus ~ ", "{rect{stroke:var(--color-secondary);stroke-width:3px;}}&:not(.c-checkbox__controlled) ", ":hover:not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}", " ", ":checked ~ ", "{path{stroke:var(--page-paper-main);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:19px;}}"], StyledInput, StyledLabel, StyledInput, StyledLabel, StyledInput, StyledLabel, function (props) {
-  return props.hover && (0, _styledComponents.css)(["", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}"], StyledLabel);
+  return props.hover && (0, _styledComponents.css)(["", ":not(:checked) ~ ", "{path{stroke:var(--color-secondary-500);stroke-dashoffset:24;}rect{stroke:var(--color-secondary);stroke-width:3px;}}"], StyledInput, StyledLabel);
 }, StyledInput, StyledLabel);
 
 exports.StyledCheckbox = StyledCheckbox;

package/dist/cjs/components/Checkbox/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover","css"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAjB;;;AAGPF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;;AAEO,IAAMC,WAAW,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,QAAjB;;;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,cAAc,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,quBAsBvBP,WAtBuB,EAsBGI,WAtBH,EA2BvBJ,WA3BuB,EA2BAI,WA3BA,EAmCrBJ,WAnCqB,EAoCnBI,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,+HAEIN,WAFJ,CADA;AAAA,CA/CuB,EA6DvBJ,WA7DuB,EA6DEI,WA7DF,CAApB;;;AAwEPE,cAAc,CAACH,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ICheckboxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n  display: none;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<ICheckboxProps>`\n  height: 16px;\n  width: 16px;\n  position: relative;\n  transition-duration: 0.2s;\n  border-radius: 2px;\n  path {\n    transition-duration: 0.2s;\n    stroke: transparent;\n    stroke-dashoffset: 12;\n    stroke-dasharray: 12;\n  }\n  svg {\n    cursor: pointer;\n    border-radius: 2px;\n    fill: transparent;\n  }\n  rect {\n    transition-duration: 0.2s;\n    stroke: var(--color-theme-500);\n  }\n\n  ${StyledInput}:disabled ~ ${StyledLabel} {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  ${StyledInput}:focus ~ ${StyledLabel} {\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  &:not(.c-checkbox__controlled)\n    ${StyledInput}:hover:not(:checked)\n    ~ ${StyledLabel} {\n    path {\n      stroke: var(--color-secondary-500);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  ${(props) =>\n    props.hover &&\n    css`\n      ${StyledLabel} {\n        path {\n          stroke: var(--color-secondary-500);\n          stroke-dashoffset: 24;\n        }\n        rect {\n          stroke: var(--color-secondary);\n          stroke-width: 3px;\n        }\n    `}\n\n  ${StyledInput}:checked ~ ${StyledLabel} {\n    path {\n      stroke: var(--page-paper-main);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 19px;\n    }\n  }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Styles.ts"],"names":["StyledInput","styled","input","displayName","StyledLabel","label","StyledCheckbox","div","props","hover","css"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,qBAAjB;;;AAGPF,WAAW,CAACG,WAAZ,GAA0B,aAA1B;;AAEO,IAAMC,WAAW,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,QAAjB;;;AACPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,cAAc,GAAGL,0BAAOM,GAAV;AAAA;AAAA;AAAA,quBAsBvBP,WAtBuB,EAsBGI,WAtBH,EA2BvBJ,WA3BuB,EA2BAI,WA3BA,EAmCrBJ,WAnCqB,EAoCnBI,WApCmB,EA+CvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,qJAEIV,WAFJ,EAEmCI,WAFnC,CADA;AAAA,CA/CuB,EA8DvBJ,WA9DuB,EA8DEI,WA9DF,CAApB;;;AAyEPE,cAAc,CAACH,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ICheckboxProps } from \"./Checkbox\";\n\nexport const StyledInput = styled.input`\n  display: none;\n`;\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledLabel = styled.label``;\nStyledLabel.displayName = \"StyledLabel\";\n\nexport const StyledCheckbox = styled.div<ICheckboxProps>`\n  height: 16px;\n  width: 16px;\n  position: relative;\n  transition-duration: 0.2s;\n  border-radius: 2px;\n  path {\n    transition-duration: 0.2s;\n    stroke: transparent;\n    stroke-dashoffset: 12;\n    stroke-dasharray: 12;\n  }\n  svg {\n    cursor: pointer;\n    border-radius: 2px;\n    fill: transparent;\n  }\n  rect {\n    transition-duration: 0.2s;\n    stroke: var(--color-theme-500);\n  }\n\n  ${StyledInput}:disabled ~ ${StyledLabel} {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  ${StyledInput}:focus ~ ${StyledLabel} {\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  &:not(.c-checkbox__controlled)\n    ${StyledInput}:hover:not(:checked)\n    ~ ${StyledLabel} {\n    path {\n      stroke: var(--color-secondary-500);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 3px;\n    }\n  }\n\n  ${(props) =>\n    props.hover &&\n    css`\n      ${StyledInput}:not(:checked) ~ ${StyledLabel} {\n        path {\n          stroke: var(--color-secondary-500);\n          stroke-dashoffset: 24;\n        }\n        rect {\n          stroke: var(--color-secondary);\n          stroke-width: 3px;\n        }\n      }\n    `}\n\n  ${StyledInput}:checked ~ ${StyledLabel} {\n    path {\n      stroke: var(--page-paper-main);\n      stroke-dashoffset: 24;\n    }\n    rect {\n      stroke: var(--color-secondary);\n      stroke-width: 19px;\n    }\n  }\n`;\nStyledCheckbox.displayName = \"StyledCheckbox\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Select/OptionContent/OptionContent.js

@@ -19,7 +19,7 @@ var OptionContent = function OptionContent(_ref) {
       textColor = _ref.textColor,
       name = _ref.name,
       additionalInfo = _ref.additionalInfo;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imageUrl || color ? /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionIndicator, {
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionContentWrapper, null, imageUrl || color ? /*#__PURE__*/_react.default.createElement(_Styles.StyledOptionIndicator, {
     className: "c-option--label",
     backgroundColor: color
   }, imageUrl ? /*#__PURE__*/_react.default.createElement(_Avatar.Avatar, {

package/dist/cjs/components/Select/OptionContent/OptionContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAcO,IAAMA,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,4DACGJ,QAAQ,IAAIC,KAAZ,gBACC,6BAAC,6BAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,6BAAC,cAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,6BAAC,4BAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;;;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n  StyledOptionIndicator,\n  StyledOptionText,\n  StyledAdditionalInfo,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n  imageUrl?: string;\n  color?: string;\n  textColor?: string;\n  name: string;\n  additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n  imageUrl,\n  color,\n  textColor,\n  name,\n  additionalInfo,\n}) => {\n  return (\n    <>\n      {imageUrl || color ? (\n        <StyledOptionIndicator\n          className=\"c-option--label\"\n          backgroundColor={color}\n        >\n          {imageUrl ? (\n            <Avatar className=\"c-option--avatar\" url={imageUrl} />\n          ) : null}\n        </StyledOptionIndicator>\n      ) : null}\n      <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n        {name}\n      </StyledOptionText>\n      {additionalInfo ? (\n        <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n      ) : null}\n    </>\n  );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}
+{"version":3,"sources":["../../../../../src/components/Select/OptionContent/OptionContent.tsx"],"names":["OptionContent","imageUrl","color","textColor","name","additionalInfo","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAeO,IAAMA,aAAqC,GAAG,SAAxCA,aAAwC,OAM/C;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,cACI,QADJA,cACI;AACJ,sBACE,6BAAC,kCAAD,QACGJ,QAAQ,IAAIC,KAAZ,gBACC,6BAAC,6BAAD;AACE,IAAA,SAAS,EAAC,iBADZ;AAEE,IAAA,eAAe,EAAEA;AAFnB,KAIGD,QAAQ,gBACP,6BAAC,cAAD;AAAQ,IAAA,SAAS,EAAC,kBAAlB;AAAqC,IAAA,GAAG,EAAEA;AAA1C,IADO,GAEL,IANN,CADD,GASG,IAVN,eAWE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAC,gBAA5B;AAA6C,IAAA,SAAS,EAAEE;AAAxD,KACGC,IADH,CAXF,EAcGC,cAAc,gBACb,6BAAC,4BAAD,QAAuBA,cAAvB,CADa,GAEX,IAhBN,CADF;AAoBD,CA3BM;;;AA6BPL,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { FC } from \"react\";\nimport { Avatar } from \"../../Avatar/Avatar\";\nimport {\n  StyledOptionIndicator,\n  StyledOptionText,\n  StyledAdditionalInfo,\n  StyledOptionContentWrapper,\n} from \"./Styles\";\n\ninterface OptionContentProps {\n  imageUrl?: string;\n  color?: string;\n  textColor?: string;\n  name: string;\n  additionalInfo?: string;\n}\n\nexport const OptionContent: FC<OptionContentProps> = ({\n  imageUrl,\n  color,\n  textColor,\n  name,\n  additionalInfo,\n}) => {\n  return (\n    <StyledOptionContentWrapper>\n      {imageUrl || color ? (\n        <StyledOptionIndicator\n          className=\"c-option--label\"\n          backgroundColor={color}\n        >\n          {imageUrl ? (\n            <Avatar className=\"c-option--avatar\" url={imageUrl} />\n          ) : null}\n        </StyledOptionIndicator>\n      ) : null}\n      <StyledOptionText className=\"c-option--text\" textColor={textColor}>\n        {name}\n      </StyledOptionText>\n      {additionalInfo ? (\n        <StyledAdditionalInfo>{additionalInfo}</StyledAdditionalInfo>\n      ) : null}\n    </StyledOptionContentWrapper>\n  );\n};\n\nOptionContent.displayName = \"OptionContent\";\n"],"file":"OptionContent.js"}

package/dist/cjs/components/Select/OptionContent/Styles.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledOptionText = exports.StyledOptionIndicator = exports.StyledAdditionalInfo = void 0;
+exports.StyledOptionText = exports.StyledOptionIndicator = exports.StyledOptionContentWrapper = exports.StyledAdditionalInfo = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,9 +13,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var StyledOptionContentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledOptionContentWrapper",
+  componentId: "sc-6fiqyy-0"
+})(["display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;"]);
+
+exports.StyledOptionContentWrapper = StyledOptionContentWrapper;
+StyledOptionContentWrapper.displayName = "StyledOptionContentWrapper";
+
 var StyledOptionIndicator = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOptionIndicator",
-  componentId: "sc-6fiqyy-0"
+  componentId: "sc-6fiqyy-1"
 })(["height:24px;width:24px;border-radius:100%;margin-right:8px;flex-shrink:0;", ""], function (props) {
   return props.backgroundColor && !props.children && (0, _styledComponents.css)(["background-color:", ";"], props.backgroundColor);
 });
@@ -25,7 +33,7 @@ StyledOptionIndicator.displayName = "StyledOptionIndicator";
 
 var StyledOptionText = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledOptionText",
-  componentId: "sc-6fiqyy-1"
+  componentId: "sc-6fiqyy-2"
 })(["", " flex-grow:1;line-height:18px;", ""], {
   "overflow": "hidden",
   "textOverflow": "ellipsis",
@@ -39,7 +47,7 @@ StyledOptionText.displayName = "StyledOptionText";
 
 var StyledAdditionalInfo = _styledComponents.default.span.withConfig({
   displayName: "Styles__StyledAdditionalInfo",
-  componentId: "sc-6fiqyy-2"
+  componentId: "sc-6fiqyy-3"
 })(["margin:0 0 0 5px;line-height:18px;flex-shrink:0;"]);
 
 exports.StyledAdditionalInfo = StyledAdditionalInfo;

package/dist/cjs/components/Select/OptionContent/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["StyledOptionIndicator","styled","div","props","backgroundColor","children","css","displayName","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,QAEAC,qBAFA,8BAGsBH,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;;;AAcPJ,qBAAqB,CAACO,WAAtB,GAAoC,uBAApC;;AAEO,IAAMC,gBAAgB,GAAGP,0BAAOQ,IAAV;AAAA;AAAA;AAAA,+CACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAIzB,UAACN,KAAD;AAAA,SACAA,KAAK,CAACO,SAAN,QACAJ,qBADA,mBAEWH,KAAK,CAACO,SAFjB,CADA;AAAA,CAJyB,CAAtB;;;AAWPF,gBAAgB,CAACD,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMI,oBAAoB,GAAGV,0BAAOQ,IAAV;AAAA;AAAA;AAAA,wDAA1B;;;AAMPE,oBAAoB,CAACJ,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n  height: 24px;\n  width: 24px;\n  border-radius: 100%;\n  margin-right: 8px;\n  flex-shrink: 0;\n  ${(props) =>\n    props.backgroundColor &&\n    !props.children &&\n    css`\n      background-color: ${props.backgroundColor};\n    `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n  ${tw`tw-truncate`}\n  flex-grow: 1;\n  line-height: 18px;\n  ${(props) =>\n    props.textColor &&\n    css`\n      color: ${props.textColor};\n    `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n  margin: 0 0 0 5px;\n  line-height: 18px;\n  flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Select/OptionContent/Styles.ts"],"names":["StyledOptionContentWrapper","styled","div","displayName","StyledOptionIndicator","props","backgroundColor","children","css","StyledOptionText","span","textColor","StyledAdditionalInfo"],"mappings":";;;;;;;;;AAAA;;;;;;AAGO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,kGAAhC;;;AAQPF,0BAA0B,CAACG,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMC,qBAAqB,GAAGH,0BAAOC,GAAV;AAAA;AAAA;AAAA,sFAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,eAAN,IACA,CAACD,KAAK,CAACE,QADP,QAEAC,qBAFA,8BAGsBH,KAAK,CAACC,eAH5B,CADA;AAAA,CAN8B,CAA3B;;;AAcPF,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;;AAEO,IAAMM,gBAAgB,GAAGR,0BAAOS,IAAV;AAAA;AAAA;AAAA,+CACvB;AAAA;AAAA;AAAA;AAAA,CADuB,EAIzB,UAACL,KAAD;AAAA,SACAA,KAAK,CAACM,SAAN,QACAH,qBADA,mBAEWH,KAAK,CAACM,SAFjB,CADA;AAAA,CAJyB,CAAtB;;;AAWPF,gBAAgB,CAACN,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMS,oBAAoB,GAAGX,0BAAOS,IAAV;AAAA;AAAA;AAAA,wDAA1B;;;AAMPE,oBAAoB,CAACT,WAArB,GAAmC,sBAAnC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nexport const StyledOptionContentWrapper = styled.div`\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  align-items: center;\n`;\n\nStyledOptionContentWrapper.displayName = \"StyledOptionContentWrapper\";\n\nexport const StyledOptionIndicator = styled.div<{ backgroundColor?: string }>`\n  height: 24px;\n  width: 24px;\n  border-radius: 100%;\n  margin-right: 8px;\n  flex-shrink: 0;\n  ${(props) =>\n    props.backgroundColor &&\n    !props.children &&\n    css`\n      background-color: ${props.backgroundColor};\n    `}\n`;\n\nStyledOptionIndicator.displayName = \"StyledOptionIndicator\";\n\nexport const StyledOptionText = styled.span<{ textColor?: string }>`\n  ${tw`tw-truncate`}\n  flex-grow: 1;\n  line-height: 18px;\n  ${(props) =>\n    props.textColor &&\n    css`\n      color: ${props.textColor};\n    `}\n`;\n\nStyledOptionText.displayName = \"StyledOptionText\";\n\nexport const StyledAdditionalInfo = styled.span`\n  margin: 0 0 0 5px;\n  line-height: 18px;\n  flex-shrink: 0;\n`;\n\nStyledAdditionalInfo.displayName = \"StyledAdditionalInfo\";\n"],"file":"Styles.js"}

package/dist/cjs/utils/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useForkRef: true
+  useForkRef: true,
+  useResizeObserver: true
 };
 Object.defineProperty(exports, "useForkRef", {
   enumerable: true,
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "useForkRef", {
     return _useForkRef.default;
   }
 });
+Object.defineProperty(exports, "useResizeObserver", {
+  enumerable: true,
+  get: function get() {
+    return _useResizeObserver.default;
+  }
+});
 
 var _layers = require("./layers");
 
@@ -29,5 +36,7 @@ Object.keys(_layers).forEach(function (key) {
 
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
 
+var _useResizeObserver = _interopRequireDefault(require("./useResizeObserver"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/dist/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA","sourcesContent":["export * from \"./layers\";\nexport { default as useForkRef } from \"./useForkRef\";\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["export * from \"./layers\";\nexport { default as useForkRef } from \"./useForkRef\";\nexport { default as useResizeObserver } from \"./useResizeObserver\";\n"],"file":"index.js"}

package/dist/cjs/utils/useResizeObserver.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useResizeObserver = function useResizeObserver(ref) {
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      dimensions = _useState2[0],
+      setDimensions = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observeTarget = ref === null || ref === void 0 ? void 0 : ref.current;
+    var resizeObserver = new _resizeObserverPolyfill.default(function (entries) {
+      entries.forEach(function (entry) {
+        setDimensions(entry.contentRect);
+      });
+    });
+    observeTarget && resizeObserver.observe(observeTarget);
+    return function () {
+      observeTarget && resizeObserver.unobserve(observeTarget);
+    };
+  }, [ref]);
+  return dimensions;
+};
+
+var _default = useResizeObserver;
+exports.default = _default;
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/cjs/utils/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useResizeObserver.ts"],"names":["useResizeObserver","ref","dimensions","setDimensions","observeTarget","current","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","observe","unobserve"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,GAAD,EAA2C;AACnE,kBAAoC,sBAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,wBAAU,YAAM;AACd,QAAMC,aAAa,GAAGH,GAAH,aAAGA,GAAH,uBAAGA,GAAG,CAAEI,OAA3B;AACA,QAAMC,cAAc,GAAG,IAAIC,+BAAJ,CACrB,UAACC,OAAD,EAAoC;AAClCA,MAAAA,OAAO,CAACC,OAAR,CAAgB,UAACC,KAAD,EAAW;AACzBP,QAAAA,aAAa,CAACO,KAAK,CAACC,WAAP,CAAb;AACD,OAFD;AAGD,KALoB,CAAvB;AAQAP,IAAAA,aAAa,IAAIE,cAAc,CAACM,OAAf,CAAuBR,aAAvB,CAAjB;AAEA,WAAO,YAAM;AACXA,MAAAA,aAAa,IAAIE,cAAc,CAACO,SAAf,CAAyBT,aAAzB,CAAjB;AACD,KAFD;AAGD,GAfD,EAeG,CAACH,GAAD,CAfH;AAiBA,SAAOC,UAAP;AACD,CArBD;;eAuBeF,iB","sourcesContent":["import { useState, useEffect } from \"react\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nconst useResizeObserver = (ref: { current?: HTMLElement | null }) => {\n  const [dimensions, setDimensions] = useState<DOMRectReadOnly>();\n\n  useEffect(() => {\n    const observeTarget = ref?.current;\n    const resizeObserver = new ResizeObserver(\n      (entries: ResizeObserverEntry[]) => {\n        entries.forEach((entry) => {\n          setDimensions(entry.contentRect);\n        });\n      }\n    );\n\n    observeTarget && resizeObserver.observe(observeTarget);\n\n    return () => {\n      observeTarget && resizeObserver.unobserve(observeTarget);\n    };\n  }, [ref]);\n\n  return dimensions;\n};\n\nexport default useResizeObserver;\n"],"file":"useResizeObserver.js"}

package/dist/cjs/utils/useResizeObserver.test.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useResizeObserver = _interopRequireDefault(require("./useResizeObserver"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe("useResizeObserver", function () {
+  it("should test", function () {
+    var ref = {
+      current: undefined
+    };
+
+    var _renderHook = (0, _reactHooks.renderHook)(function () {
+      return (0, _useResizeObserver.default)(ref);
+    }),
+        result = _renderHook.result;
+
+    expect(result.current).toBeUndefined();
+  });
+  it("should test real element", function () {
+    var div = document.createElement("div");
+    document.body.appendChild(div);
+    var ref = {
+      current: div
+    };
+
+    var _renderHook2 = (0, _reactHooks.renderHook)(function () {
+      return (0, _useResizeObserver.default)(ref);
+    }),
+        result = _renderHook2.result;
+
+    expect(result.current).toBeUndefined();
+  });
+});
+//# sourceMappingURL=useResizeObserver.test.js.map

package/dist/cjs/utils/useResizeObserver.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/useResizeObserver.test.ts"],"names":["describe","it","ref","current","undefined","result","expect","toBeUndefined","div","document","createElement","body","appendChild"],"mappings":";;AAAA;;AACA;;;;AAEAA,QAAQ,CAAC,mBAAD,EAAsB,YAAM;AAClCC,EAAAA,EAAE,CAAC,aAAD,EAAgB,YAAM;AACtB,QAAMC,GAAG,GAAG;AAAEC,MAAAA,OAAO,EAAEC;AAAX,KAAZ;;AACA,sBAAmB,4BAAW;AAAA,aAAM,gCAAkBF,GAAlB,CAAN;AAAA,KAAX,CAAnB;AAAA,QAAQG,MAAR,eAAQA,MAAR;;AACAC,IAAAA,MAAM,CAACD,MAAM,CAACF,OAAR,CAAN,CAAuBI,aAAvB;AACD,GAJC,CAAF;AAMAN,EAAAA,EAAE,CAAC,0BAAD,EAA6B,YAAM;AACnC,QAAMO,GAAG,GAAGC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAZ;AACAD,IAAAA,QAAQ,CAACE,IAAT,CAAcC,WAAd,CAA0BJ,GAA1B;AACA,QAAMN,GAAG,GAAG;AAAEC,MAAAA,OAAO,EAAEK;AAAX,KAAZ;;AACA,uBAAmB,4BAAW;AAAA,aAAM,gCAAkBN,GAAlB,CAAN;AAAA,KAAX,CAAnB;AAAA,QAAQG,MAAR,gBAAQA,MAAR;;AACAC,IAAAA,MAAM,CAACD,MAAM,CAACF,OAAR,CAAN,CAAuBI,aAAvB;AACD,GANC,CAAF;AAOD,CAdO,CAAR","sourcesContent":["import { renderHook } from \"@testing-library/react-hooks\";\nimport useResizeObserver from \"./useResizeObserver\";\n\ndescribe(\"useResizeObserver\", () => {\n  it(\"should test\", () => {\n    const ref = { current: undefined };\n    const { result } = renderHook(() => useResizeObserver(ref));\n    expect(result.current).toBeUndefined();\n  });\n\n  it(\"should test real element\", () => {\n    const div = document.createElement(\"div\");\n    document.body.appendChild(div);\n    const ref = { current: div };\n    const { result } = renderHook(() => useResizeObserver(ref));\n    expect(result.current).toBeUndefined();\n  });\n});\n"],"file":"useResizeObserver.test.js"}

package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 export interface BreadcrumbsProps {
     separator?: ReactElement | string;
+    timeout?: number;
 }
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>>, "separator"> & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>>, keyof BreadcrumbsProps> & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Breadcrumbs.d.ts.map

package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAa7D,MAAM,WAAW,gBAAgB;IAE/B,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,0OAkDtB,CAAC"}
+{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EAKb,MAAM,OAAO,CAAC;AAcf,MAAM,WAAW,gBAAgB;IAE/B,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;IAElC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,qPAoJtB,CAAC"}