@activecollab/components 1.0.102 → 1.0.105

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

@@ -21,55 +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 () {
-    return children.reduce(function (acc, value, index) {
-      index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-      return acc;
-    }, {
-      x: [],
-      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.StyledSeparator, null, separator) : null, /*#__PURE__*/_react.default.createElement("li", {
-      className: "tw-flex"
-    }, child));
+    }, 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","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,WAAOJ,QAAQ,CAACK,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,MAAAA,KAAK,IAAIJ,eAAT,GAA2BE,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,aAAOD,GAAP;AACD,KAJI,EAKL;AAAEG,MAAAA,CAAC,EAAE,EAAL;AAASE,MAAAA,CAAC,EAAE;AAAZ,KALK,CAAP;AAOD,GARgB,EAQd,CAACX,QAAD,EAAWI,eAAX,CARc,CAAjB;AAAA,MAAQK,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAUA,sBACE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAEV,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,6BAAC,mBAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,6BAAC,0BAAD,qBACE,6BAAC,sBAAD;AAAsB,IAAA,KAAK,EAAE;AAAEQ,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,IAAaJ,eAAe,GAAG,CAA/B,gBACC,6BAAC,uBAAD,QAAkBF,SAAlB,CADD,GAEG,IAHN,eAIE;AAAI,MAAA,SAAS,EAAC;AAAd,OAAyBc,KAAzB,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CArDM","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  StyledSeparator,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Children type of node or string */\n  children: 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    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  }, [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                <StyledSeparator>{separator}</StyledSeparator>\n              ) : null}\n              <li className=\"tw-flex\">{child}</li>\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/cjs/components/Breadcrumbs/Styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSeparator = exports.StyledOList = exports.StyledNavElement = exports.StyledListMenuItem = exports.StyledListItem = void 0;
+exports.StyledOList = exports.StyledNavElement = exports.StyledListMenuItem = exports.StyledBreadcrumbListItem = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -55,24 +55,13 @@ var StyledListMenuItem = _styledComponents.default.li.withConfig({
 exports.StyledListMenuItem = StyledListMenuItem;
 StyledListMenuItem.displayName = "StyledListMenuItem";
 
-var StyledListItem = _styledComponents.default.li.withConfig({
-  displayName: "Styles__StyledListItem",
+var StyledBreadcrumbListItem = _styledComponents.default.li.withConfig({
+  displayName: "Styles__StyledBreadcrumbListItem",
   componentId: "sc-rxaesd-3"
 })(["", ""], {
   "display": "flex"
 });
 
-exports.StyledListItem = StyledListItem;
-StyledListItem.displayName = "StyledListItem";
-
-var StyledSeparator = _styledComponents.default.li.withConfig({
-  displayName: "Styles__StyledSeparator",
-  componentId: "sc-rxaesd-4"
-})(["", ""], {
-  "marginLeft": "1rem",
-  "marginRight": "1rem"
-});
-
-exports.StyledSeparator = StyledSeparator;
-StyledSeparator.displayName = "StyledSeparator";
+exports.StyledBreadcrumbListItem = StyledBreadcrumbListItem;
+StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
 //# sourceMappingURL=Styles.js.map

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","StyledListItem","StyledSeparator"],"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,cAAc,GAAGT,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aACrB;AAAA;AAAA,CADqB,CAApB;;;AAIPC,cAAc,CAACL,WAAf,GAA6B,gBAA7B;;AAEO,IAAMM,eAAe,GAAGV,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aACtB;AAAA;AAAA;AAAA,CADsB,CAArB;;;AAIPE,eAAe,CAACN,WAAhB,GAA8B,iBAA9B","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 StyledListItem = styled.li`\n  ${tw`tw-flex`}\n`;\n\nStyledListItem.displayName = \"StyledListItem\";\n\nexport const StyledSeparator = styled.li`\n  ${tw`tw-mx-4`}\n`;\n\nStyledSeparator.displayName = \"StyledSeparator\";\n"],"file":"Styles.js"}
+{"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"}

package/dist/cjs/components/CompleteCheckbox/CompleteCheckbox.js

@@ -31,10 +31,11 @@ var CompleteCheckbox = function CompleteCheckbox(_ref) {
     $primary: primary,
     $completed: completed,
     $disabled: disabled,
-    $animation: !disabled && completed && animate
+    $animation: !disabled && completed && animate,
+    $checkMarkClassName: !!checkMarkClassName
   }, /*#__PURE__*/_react.default.createElement("svg", {
     viewBox: "0 0 48 48",
-    className: checkMarkClassName ? checkMarkClassName : "tw-w-12 tw-h-12"
+    className: checkMarkClassName
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8"
   }), /*#__PURE__*/_react.default.createElement("polyline", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAmBO,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,6BAAC,8BAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAE,yBAAW,qBAAX,EAAkCC,SAAlC,CAFb;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE;AANxC,kBAQE;AACE,IAAA,OAAO,EAAC,WADV;AAEE,IAAA,SAAS,EAAEI,kBAAkB,GAAGA,kBAAH,GAAwB;AAFvD,kBAIE;AAAM,IAAA,CAAC,EAAC;AAAR,IAJF,eAKE;AAAU,IAAA,MAAM,EAAC;AAAjB,IALF,CARF,CADF;AAkBD,CA3BM;;;AA6BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n    >\n      <svg\n        viewBox=\"0 0 48 48\"\n        className={checkMarkClassName ? checkMarkClassName : \"tw-w-12 tw-h-12\"}\n      >\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/CompleteCheckbox.tsx"],"names":["CompleteCheckbox","completed","disabled","animate","onClick","className","primary","checkMarkClassName","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAmBO,IAAMA,gBAA4C,GAAG,SAA/CA,gBAA+C,OAQtD;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,2BANJC,QAMI;AAAA,MANJA,QAMI,8BANO,KAMP;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,KAKN;AAAA,MAJJC,OAII,QAJJA,OAII;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,KAEN;AAAA,MADJC,kBACI,QADJA,kBACI;AACJ,sBACE,6BAAC,8BAAD;AACE,IAAA,OAAO,EAAEH,OADX;AAEE,IAAA,SAAS,EAAE,yBAAW,qBAAX,EAAkCC,SAAlC,CAFb;AAGE,IAAA,QAAQ,EAAEC,OAHZ;AAIE,IAAA,UAAU,EAAEL,SAJd;AAKE,IAAA,SAAS,EAAEC,QALb;AAME,IAAA,UAAU,EAAE,CAACA,QAAD,IAAaD,SAAb,IAA0BE,OANxC;AAOE,IAAA,mBAAmB,EAAE,CAAC,CAACI;AAPzB,kBASE;AAAK,IAAA,OAAO,EAAC,WAAb;AAAyB,IAAA,SAAS,EAAEA;AAApC,kBACE;AAAM,IAAA,CAAC,EAAC;AAAR,IADF,eAEE;AAAU,IAAA,MAAM,EAAC;AAAjB,IAFF,CATF,CADF;AAgBD,CAzBM;;;AA2BPP,gBAAgB,CAACQ,WAAjB,GAA+B,kBAA/B","sourcesContent":["import React, { FC, MouseEvent } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledCompleteCheckbox } from \"./Styles\";\n\nexport interface ICompleteCheckboxProps {\n  /** Change completed state of checkbox */\n  completed?: boolean;\n  /** Callback */\n  onClick?: (event: MouseEvent) => void;\n  /** Make component disabled for interaction */\n  disabled?: boolean;\n  /** Animation (works only when is completed and not disabled) */\n  animate?: boolean;\n  /** Class names */\n  className?: string | undefined;\n  /** Set green color for checkbox */\n  primary?: boolean;\n  /** Set checkmark height and width */\n  checkMarkClassName?: string;\n}\n\nexport const CompleteCheckbox: FC<ICompleteCheckboxProps> = ({\n  completed = false,\n  disabled = false,\n  animate = false,\n  onClick,\n  className,\n  primary = false,\n  checkMarkClassName,\n}) => {\n  return (\n    <StyledCompleteCheckbox\n      onClick={onClick}\n      className={classnames(\"c-complete-checkbox\", className)}\n      $primary={primary}\n      $completed={completed}\n      $disabled={disabled}\n      $animation={!disabled && completed && animate}\n      $checkMarkClassName={!!checkMarkClassName}\n    >\n      <svg viewBox=\"0 0 48 48\" className={checkMarkClassName}>\n        <path d=\"M7,7l5.7,5.7 M0,24h8 M7,41l5.7-5.7 M24,48v-8 M41,41l-5.7-5.7 M48,24h-8 M41,7l-5.7,5.7 M24,0v8\" />\n        <polyline points=\"19.5,24 22.5,27 28.5,21\" />\n      </svg>\n    </StyledCompleteCheckbox>\n  );\n};\n\nCompleteCheckbox.displayName = \"CompleteCheckbox\";\n"],"file":"CompleteCheckbox.js"}

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

@@ -19,7 +19,7 @@ var burstAnimation = (0, _styledComponents.keyframes)(["from{stroke-dashoffset:0
 var StyledCompleteCheckbox = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledCompleteCheckbox",
   componentId: "sc-1801dzg-0"
-})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", ""], {
+})(["", " border-color:var(--color-theme-600);transition:ease 0.3s all;svg{", " top:50%;left:50%;transform:translate(-50%,-50%);}svg path{fill:none;stroke:#32b370;stroke-width:3;transform:scale(0);}", " svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:0.3s;stroke-dasharray:13;stroke-dashoffset:13;stroke:#d2d2d2;", "}", " ", " ", " ", " ", ""], {
   "width": "1.5rem",
   "height": "1.5rem",
   "borderRadius": "9999px",
@@ -47,6 +47,11 @@ var StyledCompleteCheckbox = _styledComponents.default.div.withConfig({
   return props.$disabled && (0, _styledComponents.css)(["", " opacity:0.5;"], {
     "cursor": "default"
   });
+}, function (props) {
+  return !props.$checkMarkClassName && (0, _styledComponents.css)(["svg{", "}"], {
+    "width": "3rem",
+    "height": "3rem"
+  });
 });
 
 exports.StyledCompleteCheckbox = StyledCompleteCheckbox;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["burstScale","keyframes","burstAnimation","StyledCompleteCheckbox","styled","div","props","$primary","css","$completed","$disabled","$animation","displayName"],"mappings":";;;;;;;;;AAAA;;;;;;AAUA,IAAMA,UAAU,OAAGC,2BAAH,uDAAhB;AASA,IAAMC,cAAc,OAAGD,2BAAH,yDAApB;;AASO,IAAME,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,gYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,6CADA;AAAA,CAnB+B,EAoC7B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,qCADA;AAAA,CApC6B,EA2C/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,gSAMI,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,sEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMF,KAAK,CAACC,QAAN,QACFC,qBADE,wDAfN,EAwBMF,KAAK,CAACC,QAAN,QACFC,qBADE,qCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,UAAP,IACA,CAACH,KAAK,CAACI,SADP,QAEAF,qBAFA,+JAOM,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,mEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACK,UAAN,QACAH,qBADA,oFAIiBR,UAJjB,EAKQE,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,QACAF,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,CAA5B;;;AAsHPL,sBAAsB,CAACS,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CompleteCheckbox/Styles.ts"],"names":["burstScale","keyframes","burstAnimation","StyledCompleteCheckbox","styled","div","props","$primary","css","$completed","$disabled","$animation","$checkMarkClassName","displayName"],"mappings":";;;;;;;;;AAAA;;;;;;AAWA,IAAMA,UAAU,OAAGC,2BAAH,uDAAhB;AASA,IAAMC,cAAc,OAAGD,2BAAH,yDAApB;;AASO,IAAME,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,qYAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAD6B,EAM3B;AAAA;AAAA;AAAA,CAN2B,EAmB/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,6CADA;AAAA,CAnB+B,EAoC7B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,qCADA;AAAA,CApC6B,EA2C/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,UAAN,QACAD,qBADA,gSAMI,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,sEAEI;AAAA;AAAA;AAAA,GAFJ,CANJ,EAeMF,KAAK,CAACC,QAAN,QACFC,qBADE,wDAfN,EAwBMF,KAAK,CAACC,QAAN,QACFC,qBADE,qCAxBN,CADA;AAAA,CA3C+B,EAiF/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,UAAP,IACA,CAACH,KAAK,CAACI,SADP,QAEAF,qBAFA,+JAOM,CAACF,KAAK,CAACC,QAAP,QACFC,qBADE,mEAPN,CADA;AAAA,CAjF+B,EAoG/B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACK,UAAN,QACAH,qBADA,oFAIiBR,UAJjB,EAKQE,cALR,CADA;AAAA,CApG+B,EA8G/B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACI,SAAN,QACAF,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9G+B,EAqH/B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACM,mBAAP,QACAJ,qBADA,iBAGQ;AAAA;AAAA;AAAA,GAHR,CADA;AAAA,CArH+B,CAA5B;;;AA8HPL,sBAAsB,CAACU,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\ninterface StyledCompleteCheckboxProps {\n  $primary?: boolean;\n  $completed?: boolean;\n  $disabled?: boolean;\n  $animation?: boolean;\n  $checkMarkClassName?: boolean;\n}\n\nconst burstScale = keyframes`\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n`;\n\nconst burstAnimation = keyframes`\n  from {\n    stroke-dashoffset: 0;\n  }\n  to {\n    stroke-dashoffset: 8;\n  }\n`;\n\nexport const StyledCompleteCheckbox = styled.div<StyledCompleteCheckboxProps>`\n  ${tw`tw-w-6 tw-h-6 tw-rounded-full tw-border tw-border-solid tw-relative tw-cursor-pointer`}\n  border-color: var(--color-theme-600);\n  transition: ease 0.3s all;\n\n  svg {\n    ${tw`tw-absolute tw-pointer-events-none`}\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  svg path {\n    fill: none;\n    stroke: #32b370;\n    stroke-width: 3;\n    transform: scale(0);\n  }\n\n  ${(props) =>\n    props.$primary &&\n    css`\n      svg path {\n        stroke: var(--color-primary);\n      }\n    `}\n\n  svg polyline {\n    fill: none;\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    transition: 0.3s;\n    stroke-dasharray: 13;\n    stroke-dashoffset: 13;\n    stroke: #d2d2d2;\n    ${(props) =>\n      props.$primary &&\n      css`\n        stroke: var(--color-theme-500);\n      `}\n  }\n\n  ${(props) =>\n    props.$completed &&\n    css`\n      box-shadow: inset 0 0 0 12px var(--color-primary);\n      border-color: var(--color-primary);\n      border-width: 0px;\n\n      ${!props.$primary &&\n      css`\n        ${tw`tw-border tw-border-solid`}\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        border-color: #84cc7c;\n      `}\n\n      &:hover {\n        box-shadow: inset 0 0 0 12px #84cc7c;\n        ${props.$primary &&\n        css`\n          box-shadow: inset 0 0 0 12px var(--color-primary);\n        `}\n      }\n\n      svg polyline {\n        stroke-dashoffset: 0;\n        stroke: #fff;\n        ${props.$primary &&\n        css`\n          stroke: var(--color-theme-100);\n        `}\n      }\n\n      svg path {\n        stroke-dasharray: 8;\n        stroke-dashoffset: 0;\n        transform-origin: 24px 24px;\n      }\n    `}\n\n  ${(props) =>\n    !props.$completed &&\n    !props.$disabled &&\n    css`\n      &:hover {\n        border: 1px solid var(--color-primary);\n        box-shadow: inset 0 0 0 2px var(--color-primary);\n        border-width: 0px;\n        ${!props.$primary &&\n        css`\n          border: 1px solid #84cc7c;\n          box-shadow: inset 0 0 0 2px #84cc7c;\n        `}\n        svg polyline {\n          stroke-dashoffset: 0;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$animation &&\n    css`\n      /* Delay of 0.01s is for safari transform bug. */\n      svg path {\n        animation: ${burstScale} 0.6s ease 0s 1 normal,\n          ${burstAnimation} 0.4s ease 0.2s 1 normal;\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-default`}\n      opacity: 0.5;\n    `}\n\n  ${(props) =>\n    !props.$checkMarkClassName &&\n    css`\n      svg {\n        ${tw`tw-w-12 tw-h-12`}\n      }\n    `}\n`;\n\nStyledCompleteCheckbox.displayName = \"StyledCompleteCheckbox\";\n"],"file":"Styles.js"}

package/dist/cjs/components/CounterButton/CounterButton.js

@@ -42,8 +42,8 @@ var CounterButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       args = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("tw-flex ac-font box-sizing", className)
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButtonWrapper, {
+    className: className
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledCounterButton, _extends({
     className: (0, _classnames.default)("c-counter-button", {
       "c-counter-button__selected": counter

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","React","cloneElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAwBO,IAAMA,aAAa,gBAAG,uBAC3B,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE;AAAK,IAAA,SAAS,EAAE,yBAAW,4BAAX,EAAyCD,SAAzC;AAAhB,kBACE,6BAAC,2BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+B;AACxC,oCAA8BH;AADU,KAA/B;AADb,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHO,eAAMC,YAAN,CAAmBR,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAE,yBAAW,wBAAX;AADY,GAAzB,CAXJ,EAcGN,KAAK,iBACJ,6BAAC,gCAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEG,OAAO,GAAG,CAAV,IAAeD;AAJ1B,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,6BAAC,gBAAD;AACE,IAAA,KAAK,YAAKC,WAAL,CADP;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,6BAAC,gCAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,6BAAC,mBAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9D0B,CAAtB;;AAiEPP,aAAa,CAACY,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n} from \"./Styles\";\n\nexport interface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <div className={classNames(\"tw-flex ac-font box-sizing\", className)}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </div>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/CounterButton.tsx"],"names":["CounterButton","ref","label","icon","active","counter","tooltipText","onClearAll","className","args","React","cloneElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAyBO,IAAMA,aAAa,gBAAG,uBAC3B,gBAWEC,GAXF,EAYK;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,IASC,QATDA,IASC;AAAA,MARDC,MAQC,QARDA,MAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,CAOT;AAAA,MANDC,WAMC,QANDA,WAMC;AAAA,MALDC,UAKC,QALDA,UAKC;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAED;AAAvC,kBACE,6BAAC,2BAAD;AACE,IAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+B;AACxC,oCAA8BH;AADU,KAA/B;AADb,KAIMI,IAJN;AAKE,IAAA,GAAG,EAAER,GALP;AAME,IAAA,OAAO,EAAE,WANX;AAOE,IAAA,OAAO,EAAEI,OAAO,GAAG,CAAV,IAAeD,MAP1B;AAQE,IAAA,SAAS,EAAEC,OAAO,GAAG;AARvB,MAUGF,IAAI,iBACHO,eAAMC,YAAN,CAAmBR,IAAnB,EAAyB;AACvBK,IAAAA,SAAS,EAAE,yBAAW,wBAAX;AADY,GAAzB,CAXJ,EAcGN,KAAK,iBACJ,6BAAC,gCAAD;AACE,IAAA,KAAK,EAAC,WADR;AAEE,IAAA,MAAM,EAAC,QAFT;AAGE,IAAA,SAAS,EAAE,yBAHb;AAIE,IAAA,OAAO,EAAEG,OAAO,GAAG,CAAV,IAAeD;AAJ1B,KAMGF,KANH,CAfJ,EAwBGG,OAAO,GAAG,CAAV,gBACC,6BAAC,kCAAD;AAA4B,IAAA,SAAS,EAAE;AAAvC,KACGA,OADH,CADD,GAIG,IA5BN,CADF,EA+BGA,OAAO,GAAG,CAAV,gBACC,6BAAC,gBAAD;AACE,IAAA,KAAK,YAAKC,WAAL,CADP;AAEE,IAAA,sBAAsB,EAAC;AAFzB,kBAIE,6BAAC,gCAAD;AACE,IAAA,OAAO,EAAC,cADV;AAEE,IAAA,SAAS,EAAC,yBAFZ;AAGE,IAAA,OAAO,EAAEC;AAHX,kBAKE,6BAAC,mBAAD,OALF,CAJF,CADD,GAaG,IA5CN,CADF;AAgDD,CA9D0B,CAAtB;;AAiEPP,aAAa,CAACY,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport CloseSmallIcon from \"../Icons/collection/CloseSmall\";\nimport {\n  StyledCounterButton,\n  StyledCounterButtonCounter,\n  StyledCounterButtonLabel,\n  StyledCounterButtonReset,\n  StyledCounterButtonWrapper,\n} from \"./Styles\";\n\nexport interface ICounterButtonProps {\n  /** Set active state */\n  active?: boolean;\n  /** Label for value */\n  label?: string;\n  /** Icon */\n  icon?: ReactElement;\n  /** Number of applied filters */\n  counter?: number;\n  /** OnClearAll callback */\n  onClearAll: () => void;\n  /** Tooltip content */\n  tooltipText?: string;\n  /** Applies passed classes */\n  className?: string;\n}\n\nexport const CounterButton = forwardRef<HTMLButtonElement, ICounterButtonProps>(\n  (\n    {\n      label,\n      icon,\n      active,\n      counter = 0,\n      tooltipText,\n      onClearAll,\n      className,\n      ...args\n    },\n    ref\n  ) => {\n    return (\n      <StyledCounterButtonWrapper className={className}>\n        <StyledCounterButton\n          className={classNames(\"c-counter-button\", {\n            \"c-counter-button__selected\": counter,\n          })}\n          {...args}\n          ref={ref}\n          variant={\"text gray\"}\n          $active={counter > 0 || active}\n          $selected={counter > 0}\n        >\n          {icon &&\n            React.cloneElement(icon, {\n              className: classNames(\"c-counter-button__icon\"),\n            })}\n          {label && (\n            <StyledCounterButtonLabel\n              color=\"secondary\"\n              weight=\"medium\"\n              className={\"c-counter-button__label\"}\n              $active={counter > 0 || active}\n            >\n              {label}\n            </StyledCounterButtonLabel>\n          )}\n          {counter > 0 ? (\n            <StyledCounterButtonCounter className={\"c-counter-button__counter\"}>\n              {counter}\n            </StyledCounterButtonCounter>\n          ) : null}\n        </StyledCounterButton>\n        {counter > 0 ? (\n          <Tooltip\n            title={`${tooltipText}`}\n            popperTooltipClassName=\"z-index-1300\"\n          >\n            <StyledCounterButtonReset\n              variant=\"text colored\"\n              className=\"c-counter-button__reset\"\n              onClick={onClearAll}\n            >\n              <CloseSmallIcon />\n            </StyledCounterButtonReset>\n          </Tooltip>\n        ) : null}\n      </StyledCounterButtonWrapper>\n    );\n  }\n);\n\nCounterButton.displayName = \"CounterButton\";\n"],"file":"CounterButton.js"}

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButtonCounter = exports.StyledCounterButton = void 0;
+exports.StyledCounterButtonWrapper = exports.StyledCounterButtonReset = exports.StyledCounterButtonLabel = exports.StyledCounterButtonCounter = exports.StyledCounterButton = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -13,13 +13,26 @@ var _Body = require("../Typography/Variants/Body2");
 
 var _Button = require("../Button/Button");
 
+var _BoxSizingStyle = require("../BoxSizingStyle");
+
+var _FontStyle = require("../FontStyle");
+
 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 StyledCounterButtonWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledCounterButtonWrapper",
+  componentId: "sc-1ecrcba-0"
+})(["", " ", " ", ""], {
+  "display": "flex"
+}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
+
+exports.StyledCounterButtonWrapper = StyledCounterButtonWrapper;
+StyledCounterButtonWrapper.displayName = "StyledCounterButtonWrapper";
 var StyledCounterButton = (0, _styledComponents.default)(_Button.Button).withConfig({
   displayName: "Styles__StyledCounterButton",
-  componentId: "sc-1ecrcba-0"
+  componentId: "sc-1ecrcba-1"
 })(["", " ", ""], function (props) {
   return props.$active && (0, _styledComponents.css)(["padding:0 8px;svg{fill:var(--color-primary);}&:hover{background:var(--color-primary-300);}"]);
 }, function (props) {
@@ -30,20 +43,20 @@ StyledCounterButton.displayName = "StyledCounterButton";
 
 var StyledCounterButtonCounter = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledCounterButtonCounter",
-  componentId: "sc-1ecrcba-1"
+  componentId: "sc-1ecrcba-2"
 })(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
 
 exports.StyledCounterButtonCounter = StyledCounterButtonCounter;
 StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
 var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
   displayName: "Styles__StyledCounterButtonReset",
-  componentId: "sc-1ecrcba-2"
+  componentId: "sc-1ecrcba-3"
 })(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
 exports.StyledCounterButtonReset = StyledCounterButtonReset;
 StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
 var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
   displayName: "Styles__StyledCounterButtonLabel",
-  componentId: "sc-1ecrcba-3"
+  componentId: "sc-1ecrcba-4"
 })(["", " ", ":hover &&{", "}", ""], {
   "pointerEvents": "none"
 }, StyledCounterButton, function (props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["StyledCounterButton","Button","props","$active","css","$selected","displayName","StyledCounterButtonCounter","styled","div","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAOO,IAAMA,mBAAmB,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,kBAC5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,iGADA;AAAA,CAD4B,EAe5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,wGADA;AAAA,CAf4B,CAAzB;;AAwBPJ,mBAAmB,CAACM,WAApB,GAAkC,qBAAlC;;AAEO,IAAMC,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,6MAAhC;;;AAaPF,0BAA0B,CAACD,WAA3B,GAAyC,4BAAzC;AAEO,IAAMI,wBAAwB,GAAG,+BAAOT,cAAP,CAAH;AAAA;AAAA;AAAA,+MAA9B;;AAYPS,wBAAwB,CAACJ,WAAzB,GAAuC,0BAAvC;AAEO,IAAMK,wBAAwB,GAAG,+BAAOC,WAAP,CAAH;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCZ,mBAHiC,EAI/B,UAACE,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,QACAC,qBADA,oCADA;AAAA,CAJ+B,EAWjC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,kCADA;AAAA,CAXiC,CAA9B;;AAkBPO,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover && {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/CounterButton/Styles.ts"],"names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAOO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBACjC;AAAA;AAAA,CADiC,EAEnCC,oBAFmC,EAGnCC,8BAHmC,CAAhC;;;AAMPJ,0BAA0B,CAACK,WAA3B,GAAyC,4BAAzC;AAEO,IAAMC,mBAAmB,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,kBAC5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,iGADA;AAAA,CAD4B,EAe5B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,wGADA;AAAA,CAf4B,CAAzB;;AAwBPJ,mBAAmB,CAACD,WAApB,GAAkC,qBAAlC;;AAEO,IAAMO,0BAA0B,GAAGX,0BAAOC,GAAV;AAAA;AAAA;AAAA,6MAAhC;;;AAaPU,0BAA0B,CAACP,WAA3B,GAAyC,4BAAzC;AAEO,IAAMQ,wBAAwB,GAAG,+BAAON,cAAP,CAAH;AAAA;AAAA;AAAA,+MAA9B;;AAYPM,wBAAwB,CAACR,WAAzB,GAAuC,0BAAvC;AAEO,IAAMS,wBAAwB,GAAG,+BAAOC,WAAP,CAAH;AAAA;AAAA;AAAA,qCAC/B;AAAA;AAAA,CAD+B,EAGjCT,mBAHiC,EAI/B,UAACE,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,OAAP,QACAC,qBADA,oCADA;AAAA,CAJ+B,EAWjC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,OAAN,QACAC,qBADA,kCADA;AAAA,CAXiC,CAA9B;;AAkBPI,wBAAwB,CAACT,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n  $active?: boolean;\n  $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n  ${tw`tw-flex`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n  ${(props) =>\n    props.$active &&\n    css`\n      padding: 0 8px;\n\n      svg {\n        fill: var(--color-primary);\n      }\n\n      &:hover {\n        background: var(--color-primary-300);\n      }\n    `}\n\n  ${(props) =>\n    props.$selected &&\n    css`\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      background-color: var(--color-primary-200);\n    `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n  border-radius: 50%;\n  background-color: var(--color-primary);\n  color: var(--page-paper-main);\n  line-height: 15px;\n  width: 15px;\n  font-weight: bold;\n  font-size: 10px;\n  text-align: center;\n  margin-left: 4px;\n  margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n  background-color: var(--color-primary-200);\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n  ${tw`tw-pointer-events-none`}\n\n  ${StyledCounterButton}:hover && {\n    ${(props) =>\n      !props.$active &&\n      css`\n        color: var(--color-theme-900);\n      `}\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      color: var(--color-primary);\n    `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Menu/MenuHeader.js

@@ -48,7 +48,10 @@ var MenuHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     color: "secondary",
     weight: "bold",
     overflow: "truncate",
-    className: "tw-mx-1"
+    style: {
+      marginLeft: "4px",
+      marginRight: "4px "
+    }
   }, title), rightElement || /*#__PURE__*/_react.default.createElement("div", {
     style: {
       minWidth: "24px"

package/dist/cjs/components/Menu/MenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASO,IAAMA,UAAU,gBAAG,uBACxB,gBAQEC,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,6BAAC,wBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAE,yBAAW,eAAX,EAA4BH,SAA5B,CAFb;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,SAAS,EAAC;AALZ,KAOGL,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BuB,CAAnB;;AAiCPP,UAAU,CAACQ,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          className=\"tw-mx-1\"\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}
+{"version":3,"sources":["../../../../src/components/Menu/MenuHeader.tsx"],"names":["MenuHeader","ref","title","className","leftElement","rightElement","props","minWidth","marginLeft","marginRight","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AASO,IAAMA,UAAU,gBAAG,uBACxB,gBAQEC,GARF,EASK;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,SAMC,QANDA,SAMC;AAAA,MALDC,WAKC,QALDA,WAKC;AAAA,MAJDC,YAIC,QAJDA,YAIC;AAAA,MAHEC,KAGF;;AACH,sBACE,6BAAC,wBAAD,eACMA,KADN;AAEE,IAAA,SAAS,EAAE,yBAAW,eAAX,EAA4BH,SAA5B,CAFb;AAGE,IAAA,GAAG,EAAEF;AAHP,MAKGG,WAAW,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YALlB,eAME,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAC,QADV;AAEE,IAAA,KAAK,EAAC,WAFR;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAC,UAJX;AAKE,IAAA,KAAK,EAAE;AAAEC,MAAAA,UAAU,EAAE,KAAd;AAAqBC,MAAAA,WAAW,EAAE;AAAlC;AALT,KAOGP,KAPH,CANF,EAeGG,YAAY,iBAAI;AAAK,IAAA,KAAK,EAAE;AAAEE,MAAAA,QAAQ,EAAE;AAAZ;AAAZ,YAfnB,CADF;AAmBD,CA9BuB,CAAnB;;AAiCPP,UAAU,CAACU,WAAX,GAAyB,YAAzB","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { Typography } from \"../Typography/Typography\";\nimport { StyledMenuHeader } from \"./Styles\";\n\ninterface IMenuHeader {\n  className?: string;\n  title?: string;\n  leftElement?: ReactNode;\n  rightElement?: ReactNode;\n}\n\nexport const MenuHeader = forwardRef(\n  (\n    {\n      title,\n      className,\n      leftElement,\n      rightElement,\n      ...props\n    }: IMenuHeader & HTMLAttributes<HTMLDivElement>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <StyledMenuHeader\n        {...props}\n        className={classnames(\"c-menu-header\", className)}\n        ref={ref}\n      >\n        {leftElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n        <Typography\n          variant=\"Body 2\"\n          color=\"secondary\"\n          weight=\"bold\"\n          overflow=\"truncate\"\n          style={{ marginLeft: \"4px\", marginRight: \"4px \" }}\n        >\n          {title}\n        </Typography>\n        {rightElement || <div style={{ minWidth: \"24px\" }}>&nbsp;</div>}\n      </StyledMenuHeader>\n    );\n  }\n);\n\nMenuHeader.displayName = \"MenuHeader\";\n"],"file":"MenuHeader.js"}

package/dist/cjs/components/ScrollShadow/ScrollElement.js

@@ -15,7 +15,7 @@ var _hooks = require("../../hooks");
 
 var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
 
-var _excluded = ["as", "className", "invert"];
+var _excluded = ["as", "className", "invert", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +39,7 @@ var ScrollElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       _ref$invert = _ref.invert,
       invert = _ref$invert === void 0 ? false : _ref$invert,
+      style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var internalRef = (0, _hooks.useInitScrollRef)(null, invert);
@@ -46,7 +47,10 @@ var ScrollElement = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var props = _objectSpread(_objectSpread({}, rest), {}, {
     ref: handleRef,
-    className: (0, _classnames.default)("c-scroll-element tw-overflow-auto", className)
+    className: (0, _classnames.default)("c-scroll-element", className),
+    style: _objectSpread({
+      overflow: "auto"
+    }, style)
   });
 
   return /*#__PURE__*/_react.default.createElement(as, props);

package/dist/cjs/components/ScrollShadow/ScrollElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":["ScrollElement","ref","as","className","invert","rest","internalRef","handleRef","props","React","createElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,aAAa,gBAAG,uBAC3B,gBAAqDC,GAArD,EAA6D;AAAA,qBAA1DC,EAA0D;AAAA,MAA1DA,EAA0D,wBAArD,KAAqD;AAAA,MAA9CC,SAA8C,QAA9CA,SAA8C;AAAA,yBAAnCC,MAAmC;AAAA,MAAnCA,MAAmC,4BAA1B,KAA0B;AAAA,MAAhBC,IAAgB;;AAC3D,MAAMC,WAAW,GAAG,6BAAiB,IAAjB,EAAuBF,MAAvB,CAApB;AACA,MAAMG,SAAS,GAAG,yBAAWD,WAAX,EAAwBL,GAAxB,CAAlB;;AAEA,MAAMO,KAAK,mCACNH,IADM;AAETJ,IAAAA,GAAG,EAAEM,SAFI;AAGTJ,IAAAA,SAAS,EAAE,yBAAW,mCAAX,EAAgDA,SAAhD;AAHF,IAAX;;AAMA,sBAAOM,eAAMC,aAAN,CAAoBR,EAApB,EAAwBM,KAAxB,CAAP;AACD,CAZ0B,CAAtB;;AAePR,aAAa,CAACW,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { useInitScrollRef } from \"../../hooks\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface IScrollElement extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  children?: ReactNode;\n  invert?: boolean;\n}\n\nexport const ScrollElement = forwardRef<HTMLElement, IScrollElement>(\n  ({ as = \"div\", className, invert = false, ...rest }, ref) => {\n    const internalRef = useInitScrollRef(null, invert);\n    const handleRef = useForkRef(internalRef, ref);\n\n    const props = {\n      ...rest,\n      ref: handleRef,\n      className: classNames(\"c-scroll-element tw-overflow-auto\", className),\n    };\n\n    return React.createElement(as, props);\n  }\n);\n\nScrollElement.displayName = \"ScrollElement\";\n"],"file":"ScrollElement.js"}
+{"version":3,"sources":["../../../../src/components/ScrollShadow/ScrollElement.tsx"],"names":["ScrollElement","ref","as","className","invert","style","rest","internalRef","handleRef","props","overflow","React","createElement","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAQO,IAAMA,aAAa,gBAAG,uBAC3B,gBAA4DC,GAA5D,EAAoE;AAAA,qBAAjEC,EAAiE;AAAA,MAAjEA,EAAiE,wBAA5D,KAA4D;AAAA,MAArDC,SAAqD,QAArDA,SAAqD;AAAA,yBAA1CC,MAA0C;AAAA,MAA1CA,MAA0C,4BAAjC,KAAiC;AAAA,MAA1BC,KAA0B,QAA1BA,KAA0B;AAAA,MAAhBC,IAAgB;;AAClE,MAAMC,WAAW,GAAG,6BAAiB,IAAjB,EAAuBH,MAAvB,CAApB;AACA,MAAMI,SAAS,GAAG,yBAAWD,WAAX,EAAwBN,GAAxB,CAAlB;;AAEA,MAAMQ,KAAK,mCACNH,IADM;AAETL,IAAAA,GAAG,EAAEO,SAFI;AAGTL,IAAAA,SAAS,EAAE,yBAAW,kBAAX,EAA+BA,SAA/B,CAHF;AAITE,IAAAA,KAAK;AAAIK,MAAAA,QAAQ,EAAE;AAAd,OAAyBL,KAAzB;AAJI,IAAX;;AAOA,sBAAOM,eAAMC,aAAN,CAAoBV,EAApB,EAAwBO,KAAxB,CAAP;AACD,CAb0B,CAAtB;;AAgBPT,aAAa,CAACa,WAAd,GAA4B,eAA5B","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { useInitScrollRef } from \"../../hooks\";\nimport useForkRef from \"../../utils/useForkRef\";\n\ninterface IScrollElement extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  children?: ReactNode;\n  invert?: boolean;\n}\n\nexport const ScrollElement = forwardRef<HTMLElement, IScrollElement>(\n  ({ as = \"div\", className, invert = false, style, ...rest }, ref) => {\n    const internalRef = useInitScrollRef(null, invert);\n    const handleRef = useForkRef(internalRef, ref);\n\n    const props = {\n      ...rest,\n      ref: handleRef,\n      className: classNames(\"c-scroll-element\", className),\n      style: { overflow: \"auto\", ...style },\n    };\n\n    return React.createElement(as, props);\n  }\n);\n\nScrollElement.displayName = \"ScrollElement\";\n"],"file":"ScrollElement.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[];
-    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,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAIrB,gBAAgB,gBAiDlB,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,53 +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, StyledSeparator } from "./Styles";
-export var Breadcrumbs = function Breadcrumbs(_ref) {
+import { StyledListMenuItem, StyledNavElement, StyledOList, StyledBreadcrumbListItem } from "./Styles";
+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 () {
-    return children.reduce(function (acc, value, index) {
-      index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
-      return acc;
-    }, {
-      x: [],
-      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(StyledSeparator, null, separator) : null, /*#__PURE__*/React.createElement("li", {
-      className: "tw-flex"
-    }, child));
+    }, 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","StyledSeparator","Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","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,eAJF,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,WAAOa,QAAQ,CAACK,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,MAAAA,KAAK,IAAIJ,eAAT,GAA2BE,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,aAAOD,GAAP;AACD,KAJI,EAKL;AAAEG,MAAAA,CAAC,EAAE,EAAL;AAASE,MAAAA,CAAC,EAAE;AAAZ,KALK,CAAP;AAOD,GARuB,EAQrB,CAACX,QAAD,EAAWI,eAAX,CARqB,CAAxB;AAAA,MAAQK,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAUA,sBACE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEV,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,oBAAC,WAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,oBAAC,kBAAD,qBACE,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAE;AAAEQ,MAAAA,MAAM,EAAEvB,MAAM,CAACwB;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,IAAaJ,eAAe,GAAG,CAA/B,gBACC,oBAAC,eAAD,QAAkBF,SAAlB,CADD,GAEG,IAHN,eAIE;AAAI,MAAA,SAAS,EAAC;AAAd,OAAyBa,KAAzB,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CArDM","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  StyledSeparator,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n  /** Children type of node or string */\n  children: 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    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  }, [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                <StyledSeparator>{separator}</StyledSeparator>\n              ) : null}\n              <li className=\"tw-flex\">{child}</li>\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/esm/components/Breadcrumbs/Styles.d.ts

@@ -1,6 +1,5 @@
 export declare const StyledNavElement: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export declare const StyledOList: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const StyledListMenuItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const StyledListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const StyledSeparator: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const StyledBreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map