@activecollab/components 1.0.103 → 1.0.104

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

@@ -21,60 +21,70 @@ var _Menu = require("../Menu");
 
 var _Styles = require("./Styles");
 
+var _excluded = ["children", "className", "separator"];
+
 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); }
 
 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 Breadcrumbs = function Breadcrumbs(_ref) {
+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 _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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Breadcrumbs = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? "/" : _ref$separator;
-  var ref = (0, _react.useRef)(null);
+      separator = _ref$separator === void 0 ? "/" : _ref$separator,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var internalRef = (0, _react.useRef)(null);
+  var handleRef = (0, _.useForkRef)(ref, internalRef);
   var menuBreadcrumbs = 0;
 
   var _useMemo = (0, _react.useMemo)(function () {
-    if (children instanceof Array) {
-      return children.reduce(function (acc, value, index) {
-        index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-        return acc;
-      }, {
-        x: [],
-        y: []
-      });
-    } else {
-      return {
-        x: [children],
-        y: []
-      };
-    }
+    var collection = _react.default.Children.toArray(children);
+
+    return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
   }, [children, menuBreadcrumbs]),
-      x = _useMemo.x,
-      y = _useMemo.y;
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      menuCollection = _useMemo2[0],
+      listCollection = _useMemo2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledNavElement, {
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledNavElement, _extends({
     className: className,
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledOList, null, menuBreadcrumbs > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledListMenuItem, null, /*#__PURE__*/_react.default.createElement(_.LayerContextProvider, {
-    value: {
-      zIndex: _.layers.skyscraper
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    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, {
     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"
-  }, y.map(function (child, index) {
+  }, menuCollection.map(function (child, index) {
     return /*#__PURE__*/_react.default.createElement(_List.ListItem, {
       key: index
     }, child);
-  }))))) : null, x.map(function (child, index) {
+  })))) : 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));
   })));
-};
+});
 
 exports.Breadcrumbs = Breadcrumbs;
+Breadcrumbs.displayName = "Breadcrumbs";
 //# sourceMappingURL=Breadcrumbs.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","Array","reduce","acc","value","index","x","push","y","zIndex","layers","skyscraper","map","child"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,4BADtBC,SACsB;AAAA,MADtBA,SACsB,+BADV,GACU;AACtB,MAAMC,GAAG,GAAG,mBAAgC,IAAhC,CAAZ;AACA,MAAMC,eAAe,GAAG,CAAxB;;AAEA,iBAAiB,oBAAQ,YAAM;AAC7B,QAAIJ,QAAQ,YAAYK,KAAxB,EAA+B;AAC7B,aAAOL,QAAQ,CAACM,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,QAAAA,KAAK,IAAIL,eAAT,GAA2BG,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,eAAOD,GAAP;AACD,OAJI,EAKL;AAAEG,QAAAA,CAAC,EAAE,EAAL;AAASE,QAAAA,CAAC,EAAE;AAAZ,OALK,CAAP;AAOD,KARD,MAQO;AACL,aAAO;AAAEF,QAAAA,CAAC,EAAE,CAACV,QAAD,CAAL;AAAiBY,QAAAA,CAAC,EAAE;AAApB,OAAP;AACD;AACF,GAZgB,EAYd,CAACZ,QAAD,EAAWI,eAAX,CAZc,CAAjB;AAAA,MAAQM,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAcA,sBACE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAEX,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,6BAAC,mBAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,6BAAC,0BAAD,qBACE,6BAAC,sBAAD;AAAsB,IAAA,KAAK,EAAE;AAAES,MAAAA,MAAM,EAAEC,SAAOC;AAAjB;AAA7B,kBACE,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,KACGH,CAAC,CAACI,GAAF,CAAM,UAACC,KAAD,EAAQR,KAAR;AAAA,wBACL,6BAAC,cAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBQ,KAAvB,CADK;AAAA,GAAN,CADH,CAPF,CADF,CADF,CADD,GAkBG,IAnBN,EAoBGP,CAAC,CAACM,GAAF,CAAM,UAACC,KAAD,EAAQR,KAAR,EAAkB;AACvB,wBACE,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaL,eAAe,GAAG,CAA/B,gBACC,6BAAC,gCAAD,QAA2BF,SAA3B,CADD,GAEG,IAHN,eAIE,6BAAC,gCAAD,QAA2Be,KAA3B,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CAzDM","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { LayerContextProvider, layers } 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  /** Children type of node or string */\n  children: ReactElement[] | ReactElement;\n  /** ClassName */\n  className?: string;\n  /** Separator */\n  separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = ({\n  children,\n  className,\n  separator = \"/\",\n}: BreadcrumbsProps) => {\n  const ref = useRef<null | HTMLUListElement>(null);\n  const menuBreadcrumbs = 0;\n\n  const { x, y } = useMemo(() => {\n    if (children instanceof Array) {\n      return children.reduce(\n        (acc, value, index) => {\n          index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);\n          return acc;\n        },\n        { x: [], y: [] } as { x: ReactElement[]; y: ReactElement[] }\n      );\n    } else {\n      return { x: [children], y: [] };\n    }\n  }, [children, menuBreadcrumbs]);\n\n  return (\n    <StyledNavElement className={className} ref={ref}>\n      <StyledOList>\n        {menuBreadcrumbs > 0 ? (\n          <StyledListMenuItem>\n            <LayerContextProvider value={{ zIndex: layers.skyscraper }}>\n              <Menu\n                target={\n                  <Button variant=\"text gray\">\n                    <TreeDotsIcon />\n                  </Button>\n                }\n              >\n                <List className=\"tw-py-2\">\n                  {y.map((child, index) => (\n                    <ListItem key={index}>{child}</ListItem>\n                  ))}\n                </List>\n              </Menu>\n            </LayerContextProvider>\n          </StyledListMenuItem>\n        ) : null}\n        {x.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"],"file":"Breadcrumbs.js"}
+{"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"}

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

@@ -1,8 +1,6 @@
-import { ReactElement } from "react";
+import React, { ReactElement } from "react";
 export interface BreadcrumbsProps {
-    children: ReactElement[] | ReactElement;
-    className?: string;
     separator?: ReactElement | string;
 }
-export declare const Breadcrumbs: ({ children, className, separator, }: BreadcrumbsProps) => JSX.Element;
+export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.HTMLAttributes<HTMLElement>>, "separator"> & 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,OAAc,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAa7D,MAAM,WAAW,gBAAgB;IAE/B,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAIrB,gBAAgB,gBAqDlB,CAAC"}
+{"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"}

package/dist/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -1,58 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "separator"];
 import React, { useRef, useMemo } from "react";
-import { LayerContextProvider, layers } from "../..";
+import { useForkRef } from "../..";
 import { Button } from "../Button";
 import { TreeDotsIcon } from "../Icons";
 import { List, ListItem } from "../List";
 import { Menu } from "../Menu";
 import { StyledListMenuItem, StyledNavElement, StyledOList, StyledBreadcrumbListItem } from "./Styles";
-export var Breadcrumbs = function Breadcrumbs(_ref) {
+export var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
-      separator = _ref$separator === void 0 ? "/" : _ref$separator;
-  var ref = useRef(null);
+      separator = _ref$separator === void 0 ? "/" : _ref$separator,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var internalRef = useRef(null);
+  var handleRef = useForkRef(ref, internalRef);
   var menuBreadcrumbs = 0;
 
   var _useMemo = useMemo(function () {
-    if (children instanceof Array) {
-      return children.reduce(function (acc, value, index) {
-        index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-        return acc;
-      }, {
-        x: [],
-        y: []
-      });
-    } else {
-      return {
-        x: [children],
-        y: []
-      };
-    }
+    var collection = React.Children.toArray(children);
+    return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
   }, [children, menuBreadcrumbs]),
-      x = _useMemo.x,
-      y = _useMemo.y;
+      menuCollection = _useMemo[0],
+      listCollection = _useMemo[1];
 
-  return /*#__PURE__*/React.createElement(StyledNavElement, {
+  return /*#__PURE__*/React.createElement(StyledNavElement, _extends({
     className: className,
-    ref: ref
-  }, /*#__PURE__*/React.createElement(StyledOList, null, menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledListMenuItem, null, /*#__PURE__*/React.createElement(LayerContextProvider, {
-    value: {
-      zIndex: layers.skyscraper
-    }
-  }, /*#__PURE__*/React.createElement(Menu, {
+    ref: handleRef
+  }, rest), /*#__PURE__*/React.createElement(StyledOList, null, menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledListMenuItem, null, /*#__PURE__*/React.createElement(Menu, {
     target: /*#__PURE__*/React.createElement(Button, {
       variant: "text gray"
     }, /*#__PURE__*/React.createElement(TreeDotsIcon, null))
   }, /*#__PURE__*/React.createElement(List, {
     className: "tw-py-2"
-  }, y.map(function (child, index) {
+  }, menuCollection.map(function (child, index) {
     return /*#__PURE__*/React.createElement(ListItem, {
       key: index
     }, child);
-  }))))) : null, x.map(function (child, index) {
+  })))) : null, listCollection.map(function (child, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: index
     }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, child));
   })));
-};
+});
+Breadcrumbs.displayName = "Breadcrumbs";
 //# sourceMappingURL=Breadcrumbs.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","LayerContextProvider","layers","Button","TreeDotsIcon","List","ListItem","Menu","StyledListMenuItem","StyledNavElement","StyledOList","StyledBreadcrumbListItem","Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","Array","reduce","acc","value","index","x","push","y","zIndex","skyscraper","map","child"],"mappings":"AAAA,OAAOA,KAAP,IAA8BC,MAA9B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,oBAAT,EAA+BC,MAA/B,QAA6C,OAA7C;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,SAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SACEC,kBADF,EAEEC,gBAFF,EAGEC,WAHF,EAIEC,wBAJF,QAKO,UALP;AAgBA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,4BADtBC,SACsB;AAAA,MADtBA,SACsB,+BADV,GACU;AACtB,MAAMC,GAAG,GAAGjB,MAAM,CAA0B,IAA1B,CAAlB;AACA,MAAMkB,eAAe,GAAG,CAAxB;;AAEA,iBAAiBjB,OAAO,CAAC,YAAM;AAC7B,QAAIa,QAAQ,YAAYK,KAAxB,EAA+B;AAC7B,aAAOL,QAAQ,CAACM,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,QAAAA,KAAK,IAAIL,eAAT,GAA2BG,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,eAAOD,GAAP;AACD,OAJI,EAKL;AAAEG,QAAAA,CAAC,EAAE,EAAL;AAASE,QAAAA,CAAC,EAAE;AAAZ,OALK,CAAP;AAOD,KARD,MAQO;AACL,aAAO;AAAEF,QAAAA,CAAC,EAAE,CAACV,QAAD,CAAL;AAAiBY,QAAAA,CAAC,EAAE;AAApB,OAAP;AACD;AACF,GAZuB,EAYrB,CAACZ,QAAD,EAAWI,eAAX,CAZqB,CAAxB;AAAA,MAAQM,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAcA,sBACE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEX,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,oBAAC,WAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,oBAAC,kBAAD,qBACE,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAE;AAAES,MAAAA,MAAM,EAAExB,MAAM,CAACyB;AAAjB;AAA7B,kBACE,oBAAC,IAAD;AACE,IAAA,MAAM,eACJ,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,oBAAC,YAAD,OADF;AAFJ,kBAOE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGF,CAAC,CAACG,GAAF,CAAM,UAACC,KAAD,EAAQP,KAAR;AAAA,wBACL,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBO,KAAvB,CADK;AAAA,GAAN,CADH,CAPF,CADF,CADF,CADD,GAkBG,IAnBN,EAoBGN,CAAC,CAACK,GAAF,CAAM,UAACC,KAAD,EAAQP,KAAR,EAAkB;AACvB,wBACE,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaL,eAAe,GAAG,CAA/B,gBACC,oBAAC,wBAAD,QAA2BF,SAA3B,CADD,GAEG,IAHN,eAIE,oBAAC,wBAAD,QAA2Bc,KAA3B,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CAzDM","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { LayerContextProvider, layers } 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  /** Children type of node or string */\n  children: ReactElement[] | ReactElement;\n  /** ClassName */\n  className?: string;\n  /** Separator */\n  separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = ({\n  children,\n  className,\n  separator = \"/\",\n}: BreadcrumbsProps) => {\n  const ref = useRef<null | HTMLUListElement>(null);\n  const menuBreadcrumbs = 0;\n\n  const { x, y } = useMemo(() => {\n    if (children instanceof Array) {\n      return children.reduce(\n        (acc, value, index) => {\n          index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);\n          return acc;\n        },\n        { x: [], y: [] } as { x: ReactElement[]; y: ReactElement[] }\n      );\n    } else {\n      return { x: [children], y: [] };\n    }\n  }, [children, menuBreadcrumbs]);\n\n  return (\n    <StyledNavElement className={className} ref={ref}>\n      <StyledOList>\n        {menuBreadcrumbs > 0 ? (\n          <StyledListMenuItem>\n            <LayerContextProvider value={{ zIndex: layers.skyscraper }}>\n              <Menu\n                target={\n                  <Button variant=\"text gray\">\n                    <TreeDotsIcon />\n                  </Button>\n                }\n              >\n                <List className=\"tw-py-2\">\n                  {y.map((child, index) => (\n                    <ListItem key={index}>{child}</ListItem>\n                  ))}\n                </List>\n              </Menu>\n            </LayerContextProvider>\n          </StyledListMenuItem>\n        ) : null}\n        {x.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"],"file":"Breadcrumbs.js"}
+{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","useForkRef","Button","TreeDotsIcon","List","ListItem","Menu","StyledListMenuItem","StyledNavElement","StyledOList","StyledBreadcrumbListItem","Breadcrumbs","forwardRef","ref","children","className","separator","rest","internalRef","handleRef","menuBreadcrumbs","collection","Children","toArray","slice","length","menuCollection","listCollection","map","child","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAA8BC,MAA9B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,UAAT,QAA2B,OAA3B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,SAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SACEC,kBADF,EAEEC,gBAFF,EAGEC,WAHF,EAIEC,wBAJF,QAKO,UALP;AAYA,OAAO,IAAMC,WAAW,gBAAGb,KAAK,CAACc,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,GAAGnB,MAAM,CAAqB,IAArB,CAA1B;AACA,MAAMoB,SAAS,GAAGlB,UAAU,CAACY,GAAD,EAAMK,WAAN,CAA5B;AACA,MAAME,eAAe,GAAG,CAAxB;;AAEA,iBAAyCpB,OAAO,CAAC,YAAM;AACrD,QAAMqB,UAAU,GAAGvB,KAAK,CAACwB,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,GAN+C,EAM7C,CAACX,QAAD,EAAWM,eAAX,CAN6C,CAAhD;AAAA,MAAOM,cAAP;AAAA,MAAuBC,cAAvB;;AAQA,sBACE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEZ,SAA7B;AAAwC,IAAA,GAAG,EAAEI;AAA7C,KAA4DF,IAA5D,gBACE,oBAAC,WAAD,QACGG,eAAe,GAAG,CAAlB,gBACC,oBAAC,kBAAD,qBACE,oBAAC,IAAD;AACE,IAAA,MAAM,eACJ,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,oBAAC,YAAD,OADF;AAFJ,kBAOE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGM,cAAc,CAACE,GAAf,CAAmB,UAACC,KAAD,EAAQC,KAAR;AAAA,wBAClB,oBAAC,QAAD;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,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaV,eAAe,GAAG,CAA/B,gBACC,oBAAC,wBAAD,QAA2BJ,SAA3B,CADD,GAEG,IAHN,eAIE,oBAAC,wBAAD,QAA2Ba,KAA3B,CAJF,CADF;AAQD,GATA,CAlBH,CADF,CADF;AAiCD,CAlD0B,CAApB;AAoDPlB,WAAW,CAACoB,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"}

package/dist/index.js

@@ -314,7 +314,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$Z = ["children", "variant", "size", "disabled", "className"];
+  var _excluded$_ = ["children", "variant", "size", "disabled", "className"];
 
   /**
    * Button component
@@ -328,7 +328,7 @@
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
         className = _ref.className,
-        args = _objectWithoutProperties(_ref, _excluded$Z);
+        args = _objectWithoutProperties(_ref, _excluded$_);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$1, _extends({
       disabled: disabled,
@@ -381,12 +381,12 @@
   })(["svg{fill:var(--color-theme-100);}&:hover svg{transform:rotate(90deg);transition:ease 0.3s;}"]);
   StyledGlobalAddButton.displayName = "StyledGlobalAddButton";
 
-  var _excluded$Y = ["className", "disabled"];
+  var _excluded$Z = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
         _ref$disabled = _ref.disabled,
         disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        rest = _objectWithoutProperties(_ref, _excluded$Y);
+        rest = _objectWithoutProperties(_ref, _excluded$Z);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
@@ -419,11 +419,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$X = ["children", "className"];
+  var _excluded$Y = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$X);
+        rest = _objectWithoutProperties(_ref, _excluded$Y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
@@ -2790,11 +2790,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$W = ["children", "className"];
+  var _excluded$X = ["children", "className"];
   var List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$W);
+        props = _objectWithoutProperties(_ref, _excluded$X);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
       className: className,
@@ -2803,11 +2803,11 @@
   });
   List.displayName = "List";
 
-  var _excluded$V = ["children", "className"];
+  var _excluded$W = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$V);
+        props = _objectWithoutProperties(_ref, _excluded$W);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
       className: classNames__default["default"]("c-list-item", className),
@@ -2848,7 +2848,7 @@
     }, [refA, refB]);
   }
 
-  var _excluded$U = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
+  var _excluded$V = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         anchorEl = _ref.anchorEl,
@@ -2861,7 +2861,7 @@
         initialPlacement = _ref$placement === void 0 ? "bottom" : _ref$placement,
         _ref$strategy = _ref.strategy,
         strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
-        rest = _objectWithoutProperties(_ref, _excluded$U);
+        rest = _objectWithoutProperties(_ref, _excluded$V);
 
     var _useState = React.useState(true),
         _useState2 = _slicedToArray(_useState, 2),
@@ -2967,12 +2967,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$T = ["className", "disableBackgroundColor"];
+  var _excluded$U = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
         _ref$disableBackgroun = _ref.disableBackgroundColor,
         disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-        rest = _objectWithoutProperties(_ref, _excluded$T);
+        rest = _objectWithoutProperties(_ref, _excluded$U);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
@@ -3023,7 +3023,7 @@
     house: 1000
   };
 
-  var _excluded$S = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
+  var _excluded$T = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "preventClickEventBubbling", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -3040,7 +3040,7 @@
         _ref$preventClickEven = _ref.preventClickEventBubbling,
         preventClickEventBubbling = _ref$preventClickEven === void 0 ? false : _ref$preventClickEven,
         onClick = _ref.onClick,
-        rest = _objectWithoutProperties(_ref, _excluded$S);
+        rest = _objectWithoutProperties(_ref, _excluded$T);
 
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
@@ -3114,7 +3114,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$R = ["children", "className", "innerRef", "style"];
+  var _excluded$S = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -3122,7 +3122,7 @@
         innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style,
-        rest = _objectWithoutProperties(_ref, _excluded$R);
+        rest = _objectWithoutProperties(_ref, _excluded$S);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
@@ -3430,7 +3430,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$Q = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$R = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
         variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -3461,7 +3461,7 @@
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         className = _ref.className,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$Q);
+        props = _objectWithoutProperties(_ref, _excluded$R);
 
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
@@ -3485,13 +3485,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$P = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$Q = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
         className = _ref.className,
         leftElement = _ref.leftElement,
         rightElement = _ref.rightElement,
-        props = _objectWithoutProperties(_ref, _excluded$P);
+        props = _objectWithoutProperties(_ref, _excluded$Q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
@@ -3514,11 +3514,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$O = ["children", "className"];
+  var _excluded$P = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
-        props = _objectWithoutProperties(_ref, _excluded$O);
+        props = _objectWithoutProperties(_ref, _excluded$P);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
@@ -3568,42 +3568,36 @@
   });
   StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 
-  var Breadcrumbs = function Breadcrumbs(_ref) {
+  var _excluded$O = ["children", "className", "separator"];
+  var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
         _ref$separator = _ref.separator,
-        separator = _ref$separator === void 0 ? "/" : _ref$separator;
-    var ref = React.useRef(null);
+        separator = _ref$separator === void 0 ? "/" : _ref$separator,
+        rest = _objectWithoutProperties(_ref, _excluded$O);
+
+    var internalRef = React.useRef(null);
+    var handleRef = useForkRef(ref, internalRef);
     var menuBreadcrumbs = 0;
 
     var _useMemo = React.useMemo(function () {
-      if (children instanceof Array) {
-        return children.reduce(function (acc, value, index) {
-          index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-          return acc;
-        }, {
-          x: [],
-          y: []
-        });
-      } else {
-        return {
-          x: [children],
-          y: []
-        };
-      }
+      var collection = React__default["default"].Children.toArray(children);
+      return [collection.slice(0, menuBreadcrumbs), collection.slice(menuBreadcrumbs, collection.length)];
     }, [children, menuBreadcrumbs]),
-        x = _useMemo.x;
-        _useMemo.y;
+        _useMemo2 = _slicedToArray(_useMemo, 2);
+        _useMemo2[0];
+        var listCollection = _useMemo2[1];
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, {
+    return /*#__PURE__*/React__default["default"].createElement(StyledNavElement, _extends({
       className: className,
-      ref: ref
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOList, null, null, x.map(function (child, index) {
+      ref: handleRef
+    }, rest), /*#__PURE__*/React__default["default"].createElement(StyledOList, null, null, listCollection.map(function (child, index) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: index
       }, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, child));
     })));
-  };
+  });
+  Breadcrumbs.displayName = "Breadcrumbs";
 
   var defaultStyle$3 = {
     transitionProperty: "opacity, transform",