@orfium/ictinus 4.16.0 → 4.19.0

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -3,8 +3,6 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _lodash = require("lodash");
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
@@ -15,8 +13,6 @@ var _reactRouterDom = require("react-router-dom");
 
 var _Breadcrumb = require("./Breadcrumb.style");
 
-var _BreadcrumbCollapsed = _interopRequireDefault(require("./BreadcrumbCollapsed/BreadcrumbCollapsed"));
-
 var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem/BreadcrumbItem"));
 
 var _react2 = require("@emotion/react");
@@ -27,71 +23,38 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var MAX_LIMIT_BREADCRUMB_LENGTH = 4;
-var MAX_ITEMS_TO_SHOW_AFTER_COLLAPSE = 2;
-var MAX_ITEMS_TO_SHOW_BEFORE_COLLAPSE = 1;
-
-var Breadcrumb = function Breadcrumb(props) {
-  var children = props.children,
-      _props$data = props.data,
-      data = _props$data === void 0 ? [] : _props$data;
+var isLastItem = function isLastItem(dataItems, itemIndex) {
+  return itemIndex === dataItems.length - 1;
+};
 
-  var passDataToRouterLink = function passDataToRouterLink(_ref) {
-    var to = _ref.to,
-        label = _ref.label;
-    return (0, _react2.jsx)(_reactRouterDom.Link, {
-      css: (0, _Breadcrumb.breadcrumbLinkStyles)(),
+var Breadcrumb = function Breadcrumb(_ref) {
+  var children = _ref.children,
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data;
+  var passDataToRouterLink = React.useCallback(function (dataItem, index) {
+    var to = dataItem.to,
+        label = dataItem.label;
+    var isLast = isLastItem(data, index);
+    return to ? (0, _react2.jsx)(_reactRouterDom.Link, {
+      css: (0, _Breadcrumb.breadcrumbLinkStyles)(isLast),
       key: to,
       to: to
-    }, label);
-  };
-
+    }, label) : (0, _react2.jsx)("div", null, label);
+  }, [data]);
   var childrenCollection = React.Children.toArray(children);
   var dataItems = (0, _isEmpty["default"])(data) ? childrenCollection : data.map(passDataToRouterLink);
-
-  var isLastItem = function isLastItem(dataItems, itemIndex) {
-    return itemIndex === dataItems.length - 1;
-  }; //Checks if an item is in collapsed area and if should break the breadcrumb items with a collapsed view
-
-
-  var shouldCollapse = React.useCallback(function (item, itemIndex) {
-    return item && dataItems.length > MAX_LIMIT_BREADCRUMB_LENGTH && itemIndex >= MAX_ITEMS_TO_SHOW_BEFORE_COLLAPSE && itemIndex < dataItems.length - MAX_ITEMS_TO_SHOW_AFTER_COLLAPSE;
-  }, [dataItems]);
-  var collapsedItems = React.useMemo(function () {
-    return dataItems.filter(shouldCollapse);
-  }, [shouldCollapse, dataItems]);
-
-  var _pick = (0, _lodash.pick)((0, _lodash.last)(data), ['label', 'onChangeHandler', 'options']),
-      lastItemLabel = _pick.label,
-      lastItemOnChangeHandler = _pick.onChangeHandler,
-      lastItemOptions = _pick.options;
-
   var getBreadcrumbItem = React.useMemo( // eslint-disable-next-line react/display-name
   function () {
     return function (child, index) {
       var itemKey = (0, _uniqueId["default"])('data_item_');
-
-      if (shouldCollapse(child, index)) {
-        return index === MAX_ITEMS_TO_SHOW_BEFORE_COLLAPSE ? (0, _react2.jsx)(_BreadcrumbCollapsed["default"], {
-          collapsedItems: collapsedItems,
-          key: itemKey
-        }) : null;
-      }
-
       var isLast = isLastItem(dataItems, index);
-      return isLast ? (0, _react2.jsx)(_BreadcrumbItem["default"], {
+      return (0, _react2.jsx)(_BreadcrumbItem["default"], {
         key: itemKey,
-        lastItemLabel: lastItemLabel,
-        onChangeHandler: lastItemOnChangeHandler,
-        options: lastItemOptions,
         childComponent: child,
         isLastItem: isLast
-      }) : (0, _react2.jsx)(_BreadcrumbItem["default"], {
-        key: itemKey,
-        childComponent: child
       });
     };
-  }, [dataItems, collapsedItems, lastItemLabel, lastItemOnChangeHandler, lastItemOptions, shouldCollapse]);
+  }, [dataItems]);
   return (0, _react2.jsx)("ol", {
     "aria-label": "Breadcrumb",
     css: (0, _Breadcrumb.breadcrumbStyles)()

package/dist/components/Breadcrumb/Breadcrumb.style.d.ts

@@ -1,3 +1,4 @@
+import { SerializedStyles } from '@emotion/react';
 import { Theme } from '../../theme';
-export declare const breadcrumbStyles: () => (theme: Theme) => import("@emotion/react").SerializedStyles;
-export declare const breadcrumbLinkStyles: () => (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const breadcrumbStyles: () => () => SerializedStyles;
+export declare const breadcrumbLinkStyles: (isLast: boolean) => (theme: Theme) => SerializedStyles;

package/dist/components/Breadcrumb/Breadcrumb.style.js

@@ -5,33 +5,28 @@ exports.breadcrumbLinkStyles = exports.breadcrumbStyles = void 0;
 
 var _react = require("@emotion/react");
 
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "4ka015",
-  styles: "display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;&>li{margin:auto;}"
-} : {
-  name: "1vmw4de-breadcrumbStyles",
-  styles: "display:flex;flex-wrap:nowrap;list-style:none;padding:0;margin:0;&>li{margin:auto;};label:breadcrumbStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYi5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJMkQiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9CcmVhZGNydW1iLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcblxuZXhwb3J0IGNvbnN0IGJyZWFkY3J1bWJTdHlsZXMgPSAoKSA9PiAodGhlbWU6IFRoZW1lKSA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtd3JhcDogbm93cmFwO1xuICBsaXN0LXN0eWxlOiBub25lO1xuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG5cbiAgJiA+IGxpIHtcbiAgICBtYXJnaW46IGF1dG87XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBicmVhZGNydW1iTGlua1N0eWxlcyA9ICgpID0+ICh0aGVtZTogVGhlbWUpID0+IGNzc2BcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBjb2xvcjogaW5oZXJpdDtcbiAgcGFkZGluZzogJHt0aGVtZS5zcGFjaW5nLnNtfTtcbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2RhcmtHcmV5JywgNjUwKX07XG4gIH1cbmA7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+var _functions = require("../../theme/functions");
 
 var breadcrumbStyles = function breadcrumbStyles() {
-  return function (theme) {
-    return _ref;
+  return function () {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)(_functions.flex, ";flex-wrap:nowrap;list-style:none;padding:0;margin:0;" + (process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYi5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLaUUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9CcmVhZGNydW1iLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZmxleCB9IGZyb20gJ3RoZW1lL2Z1bmN0aW9ucyc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnO1xuXG5leHBvcnQgY29uc3QgYnJlYWRjcnVtYlN0eWxlcyA9ICgpID0+ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4fTtcbiAgZmxleC13cmFwOiBub3dyYXA7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBicmVhZGNydW1iTGlua1N0eWxlcyA9IChpc0xhc3Q6IGJvb2xlYW4pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBjb2xvcjogaW5oZXJpdDtcbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7aXNMYXN0ID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2JsdWUnLCA2NTApIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2RhcmtHcmV5JywgNjUwKX07XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbStyles;")
+    );
   };
 };
 
 exports.breadcrumbStyles = breadcrumbStyles;
 
-var breadcrumbLinkStyles = function breadcrumbLinkStyles() {
+var breadcrumbLinkStyles = function breadcrumbLinkStyles(isLast) {
   return function (theme) {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("text-decoration:none;color:inherit;padding:", theme.spacing.sm, ";&:hover{color:", theme.utils.getColor('darkGrey', 650), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbLinkStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYi5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQitEIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYi5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi8uLi90aGVtZSc7XG5cbmV4cG9ydCBjb25zdCBicmVhZGNydW1iU3R5bGVzID0gKCkgPT4gKHRoZW1lOiBUaGVtZSkgPT4gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LXdyYXA6IG5vd3JhcDtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbiAgcGFkZGluZzogMDtcbiAgbWFyZ2luOiAwO1xuXG4gICYgPiBsaSB7XG4gICAgbWFyZ2luOiBhdXRvO1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgYnJlYWRjcnVtYkxpbmtTdHlsZXMgPSAoKSA9PiAodGhlbWU6IFRoZW1lKSA9PiBjc3NgXG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgY29sb3I6IGluaGVyaXQ7XG4gIHBhZGRpbmc6ICR7dGhlbWUuc3BhY2luZy5zbX07XG4gICY6aG92ZXIge1xuICAgIGNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdkYXJrR3JleScsIDY1MCl9O1xuICB9XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbLinkStyles;")
+      (0, _react.css)("text-decoration:none;color:inherit;&:hover{color:", isLast ? theme.utils.getColor('blue', 650) : theme.utils.getColor('darkGrey', 650), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbLinkStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYi5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhZ0ciLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9CcmVhZGNydW1iLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZmxleCB9IGZyb20gJ3RoZW1lL2Z1bmN0aW9ucyc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnO1xuXG5leHBvcnQgY29uc3QgYnJlYWRjcnVtYlN0eWxlcyA9ICgpID0+ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4fTtcbiAgZmxleC13cmFwOiBub3dyYXA7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBicmVhZGNydW1iTGlua1N0eWxlcyA9IChpc0xhc3Q6IGJvb2xlYW4pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICBjb2xvcjogaW5oZXJpdDtcbiAgJjpob3ZlciB7XG4gICAgY29sb3I6ICR7aXNMYXN0ID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2JsdWUnLCA2NTApIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2RhcmtHcmV5JywgNjUwKX07XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbLinkStyles;")
     );
   };
 };

package/dist/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.d.ts

@@ -4,12 +4,6 @@ declare type Props = {
     childComponent: React.ReactNode;
     /** Defines if the current item of the breadcrumb is the last one */
     isLastItem?: boolean;
-    /** Defines the options used to render a Menu button */
-    options?: string[];
-    /** Defines the method where a developer can manipulate the selection of an menu item */
-    onChangeHandler?: (selectedItem: string) => void;
-    /** Defines the label of the current level of breadcrumb */
-    lastItemLabel?: string;
 };
 declare const BreadcrumbItem: React.FC<Props>;
 export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.js

@@ -5,8 +5,6 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _BreadcrumbAdvancedItem = _interopRequireDefault(require("./BreadcrumbAdvancedItem"));
-
 var _BreadcrumbItem = require("./BreadcrumbItem.style");
 
 var _Separator = _interopRequireDefault(require("../Separator/Separator"));
@@ -15,24 +13,15 @@ var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var BreadcrumbItem = function BreadcrumbItem(props) {
-  var childComponent = props.childComponent,
-      _props$isLastItem = props.isLastItem,
-      isLastItem = _props$isLastItem === void 0 ? false : _props$isLastItem,
-      _props$options = props.options,
-      options = _props$options === void 0 ? undefined : _props$options,
-      onChangeHandler = props.onChangeHandler,
-      lastItemLabel = props.lastItemLabel;
-  var renderComponentBasedOnOptions = options ? (0, _react2.jsx)(_BreadcrumbAdvancedItem["default"], {
-    onChangeHandler: onChangeHandler,
-    options: options,
-    label: lastItemLabel
-  }) : childComponent;
+var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var childComponent = _ref.childComponent,
+      _ref$isLastItem = _ref.isLastItem,
+      isLastItem = _ref$isLastItem === void 0 ? false : _ref$isLastItem;
   return (0, _react2.jsx)("li", null, (0, _react2.jsx)("div", {
     css: (0, _BreadcrumbItem.breadcrumbItemStyles)({
       active: isLastItem
     })
-  }, renderComponentBasedOnOptions, (0, _react2.jsx)(_Separator["default"], {
+  }, childComponent, (0, _react2.jsx)(_Separator["default"], {
     isLastItem: isLastItem
   })));
 };

package/dist/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.style.d.ts

@@ -1,7 +1,8 @@
+import { SerializedStyles } from '@emotion/react';
 import { Theme } from '../../../theme';
 import { RequiredProperties } from '../../../utils/common';
 declare type StyleProps = {
     active: boolean;
 };
-export declare const breadcrumbItemStyles: ({ active }: RequiredProperties<StyleProps>) => (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const breadcrumbItemStyles: ({ active }: RequiredProperties<StyleProps>) => (theme: Theme) => SerializedStyles;
 export {};

package/dist/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.style.js

@@ -5,7 +5,7 @@ exports.breadcrumbItemStyles = void 0;
 
 var _react = require("@emotion/react");
 
-var _utils = require("../../../theme/utils");
+var _palette = require("../../../theme/palette");
 
 var breadcrumbItemStyles = function breadcrumbItemStyles(_ref) {
   var active = _ref.active;
@@ -14,7 +14,7 @@ var breadcrumbItemStyles = function breadcrumbItemStyles(_ref) {
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("display:flex;cursor:default;font-weight:", active ? theme.typography.weights.medium : theme.typography.weights.regular, ";color:", active ? theme.utils.getColor('darkGrey', 850) : theme.utils.getColor('lightGrey', 650), ";& button{height:auto;background-color:white;padding:", theme.spacing.sm, ";&:focus{outline:none;background-color:", theme.utils.getColor('lightGrey', 250), ";}&>span{margin-left:0;}}&>div>div>div{top:3rem;box-shadow:", theme.utils.getColor('darkGrey', 650), " 0px 0px ", (0, _utils.rem)(16), ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYkl0ZW0vQnJlYWRjcnVtYkl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWVEiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9CcmVhZGNydW1iSXRlbS9CcmVhZGNydW1iSXRlbS5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi8uLi8uLi90aGVtZSc7XG5pbXBvcnQgeyBSZXF1aXJlZFByb3BlcnRpZXMgfSBmcm9tICcuLi8uLi8uLi91dGlscy9jb21tb24nO1xuXG50eXBlIFN0eWxlUHJvcHMgPSB7XG4gIGFjdGl2ZTogYm9vbGVhbjtcbn07XG5cbmV4cG9ydCBjb25zdCBicmVhZGNydW1iSXRlbVN0eWxlcyA9ICh7IGFjdGl2ZSB9OiBSZXF1aXJlZFByb3BlcnRpZXM8U3R5bGVQcm9wcz4pID0+IChcbiAgdGhlbWU6IFRoZW1lXG4pID0+IGNzc2BcbiAgZGlzcGxheTogZmxleDtcbiAgY3Vyc29yOiBkZWZhdWx0O1xuICBmb250LXdlaWdodDogJHthY3RpdmUgPyB0aGVtZS50eXBvZ3JhcGh5LndlaWdodHMubWVkaXVtIDogdGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLnJlZ3VsYXJ9O1xuICBjb2xvcjogJHthY3RpdmUgPyB0aGVtZS51dGlscy5nZXRDb2xvcignZGFya0dyZXknLCA4NTApIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDY1MCl9O1xuXG4gICYgYnV0dG9uIHtcbiAgICBoZWlnaHQ6IGF1dG87XG4gICAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gICAgcGFkZGluZzogJHt0aGVtZS5zcGFjaW5nLnNtfTtcbiAgICAmOmZvY3VzIHtcbiAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAyNTApfTtcbiAgICB9XG5cbiAgICAmID4gc3BhbiB7XG4gICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG4gIH1cblxuICAmID4gZGl2ID4gZGl2ID4gZGl2IHtcbiAgICB0b3A6IDNyZW07XG4gICAgYm94LXNoYWRvdzogJHt0aGVtZS51dGlscy5nZXRDb2xvcignZGFya0dyZXknLCA2NTApfSAwcHggMHB4ICR7cmVtKDE2KX07XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbItemStyles;")
+      (0, _react.css)("display:flex;cursor:default;font-size:", theme.typography.fontSizes[15], ";font-weight:", active ? theme.typography.weights.medium : theme.typography.weights.regular, ";color:", active ? theme.utils.getColor('primary', _palette.BASE_SHADE, 'normal') : theme.utils.getColor('lightGrey', 650), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYkl0ZW0vQnJlYWRjcnVtYkl0ZW0uc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBWTBCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvQnJlYWRjcnVtYkl0ZW0vQnJlYWRjcnVtYkl0ZW0uc3R5bGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBCQVNFX1NIQURFIH0gZnJvbSAndGhlbWUvcGFsZXR0ZSc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdGhlbWUnO1xuaW1wb3J0IHsgUmVxdWlyZWRQcm9wZXJ0aWVzIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvY29tbW9uJztcblxudHlwZSBTdHlsZVByb3BzID0ge1xuICBhY3RpdmU6IGJvb2xlYW47XG59O1xuXG5leHBvcnQgY29uc3QgYnJlYWRjcnVtYkl0ZW1TdHlsZXMgPSAoeyBhY3RpdmUgfTogUmVxdWlyZWRQcm9wZXJ0aWVzPFN0eWxlUHJvcHM+KSA9PiAoXG4gIHRoZW1lOiBUaGVtZVxuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGN1cnNvcjogZGVmYXVsdDtcbiAgZm9udC1zaXplOiAke3RoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWzE1XX07XG4gIGZvbnQtd2VpZ2h0OiAke2FjdGl2ZSA/IHRoZW1lLnR5cG9ncmFwaHkud2VpZ2h0cy5tZWRpdW0gOiB0aGVtZS50eXBvZ3JhcGh5LndlaWdodHMucmVndWxhcn07XG4gIGNvbG9yOiAke2FjdGl2ZVxuICAgID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ3ByaW1hcnknLCBCQVNFX1NIQURFLCAnbm9ybWFsJylcbiAgICA6IHRoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCA2NTApfTtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:breadcrumbItemStyles;")
     );
   };
 };

package/dist/components/Breadcrumb/Separator/Separator.js

@@ -25,8 +25,9 @@ var Separator = function Separator(props) {
     css: (0, _Separator.separatorStyles)()
   }, (0, _react2.jsx)(_Icon["default"], {
     name: 'triangleRight',
-    color: "black",
-    size: 10
+    color: 'lightGrey',
+    variant: 650,
+    size: 12
   }));
 };
 

package/dist/components/Breadcrumb/Separator/Separator.style.d.ts

@@ -1,2 +1,3 @@
+import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
-export declare const separatorStyles: () => (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const separatorStyles: () => (theme: Theme) => SerializedStyles;

package/dist/components/Breadcrumb/Separator/Separator.style.js

@@ -11,7 +11,7 @@ var separatorStyles = function separatorStyles() {
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("margin:auto ", theme.spacing.sm, ";color:", theme.utils.getColor('lightGrey', 650), ";cursor:default;" + (process.env.NODE_ENV === "production" ? "" : ";label:separatorStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvU2VwYXJhdG9yL1NlcGFyYXRvci5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHMEQiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9TZXBhcmF0b3IvU2VwYXJhdG9yLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5cbmV4cG9ydCBjb25zdCBzZXBhcmF0b3JTdHlsZXMgPSAoKSA9PiAodGhlbWU6IFRoZW1lKSA9PiBjc3NgXG4gIG1hcmdpbjogYXV0byAke3RoZW1lLnNwYWNpbmcuc219O1xuICBjb2xvcjogJHt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgNjUwKX07XG4gIGN1cnNvcjogZGVmYXVsdDtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:separatorStyles;")
+      (0, _react.css)("margin:auto ", theme.spacing.md, ";cursor:default;" + (process.env.NODE_ENV === "production" ? "" : ";label:separatorStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0JyZWFkY3J1bWIvU2VwYXJhdG9yL1NlcGFyYXRvci5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHNEUiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnJlYWRjcnVtYi9TZXBhcmF0b3IvU2VwYXJhdG9yLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5cbmV4cG9ydCBjb25zdCBzZXBhcmF0b3JTdHlsZXMgPSAoKSA9PiAodGhlbWU6IFRoZW1lKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG1hcmdpbjogYXV0byAke3RoZW1lLnNwYWNpbmcubWR9O1xuICBjdXJzb3I6IGRlZmF1bHQ7XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:separatorStyles;")
     );
   };
 };

package/dist/components/Breadcrumb/types.d.ts

@@ -1,10 +1,6 @@
 export declare type BreadcrumbItemData = {
     /** Defines the path used for a link breadcrumb item*/
-    to: string;
+    to?: string;
     /** Defines the label used for a link breadcrumb item */
     label: string;
-    /** Defines the options used to render a Menu button */
-    options?: string[];
-    /** Defines the method where a developer can manipulate the selection of an menu item */
-    onChangeHandler?: (selectedItem: string) => void;
 };

package/dist/components/ButtonBase/ButtonBase.js

@@ -42,7 +42,8 @@ var ButtonBase = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
       children = props.children,
       _props$dataTestId = props.dataTestId,
       dataTestId = _props$dataTestId === void 0 ? '' : _props$dataTestId,
-      buttonType = props.buttonType,
+      _props$buttonType = props.buttonType,
+      buttonType = _props$buttonType === void 0 ? 'button' : _props$buttonType,
       _onClick = props.onClick,
       onBlur = props.onBlur;
 

package/dist/components/DatePicker/DatePickInput/DatePickInput.d.ts

@@ -1,15 +1,29 @@
 import React from 'react';
+import { FilterType, StyleType } from '../../Filter/types';
 import { Props as TextFieldProps } from '../../TextField/TextField';
 import { DateFormatType } from '../DatePicker';
 import { Range } from '../OverlayComponent/OverlayComponent';
 declare type Props = {
+    /** Handles the focus state of the component */
     handleFocus: () => void;
-    handleClear: (event: React.KeyboardEvent) => void;
+    /** Handles the clear action for the datepicker */
+    handleClear: (event?: React.KeyboardEvent) => void;
+    /** Defines whether the component selects a single date or a range */
     isRangePicker: boolean;
+    /** Style properties for the DatePicker with a filter base */
+    filterConfig?: {
+        buttonType?: 'primary' | 'secondary';
+        styleType?: StyleType;
+        filterType?: FilterType;
+    };
+    /** The selected day */
     selectedDay: Range;
     /** Props for styling the input */
     inputProps?: TextFieldProps;
+    /** Overrides the default date format */
     dateFormatOverride?: DateFormatType;
+    /** Defines whether the component is open */
+    isOpen: boolean;
 };
 declare const DatePickInput: React.ForwardRefExoticComponent<Props & Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">> & React.RefAttributes<HTMLInputElement>>;
 export default DatePickInput;

package/dist/components/DatePicker/DatePickInput/DatePickInput.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../../utils/helpers");
 
+var _FilterBase = _interopRequireDefault(require("../../Filter/components/FilterBase"));
+
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
 var _TextField = _interopRequireDefault(require("../../TextField/TextField"));
@@ -26,12 +28,14 @@ var ON_CHANGE_MOCK = function ON_CHANGE_MOCK() {};
 
 var DatePickInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var handleFocus = _ref.handleFocus,
+      filterConfig = _ref.filterConfig,
       handleClear = _ref.handleClear,
       isRangePicker = _ref.isRangePicker,
       inputProps = _ref.inputProps,
       selectedDay = _ref.selectedDay,
       _ref$dateFormatOverri = _ref.dateFormatOverride,
-      dateFormatOverride = _ref$dateFormatOverri === void 0 ? 'MM/DD/YYYY' : _ref$dateFormatOverri;
+      dateFormatOverride = _ref$dateFormatOverri === void 0 ? 'MM/DD/YYYY' : _ref$dateFormatOverri,
+      isOpen = _ref.isOpen;
 
   var formatDate = function formatDate(date) {
     return date ? (0, _dayjs["default"])(date).format((0, _helpers.getLocaleFormat)(dateFormatOverride)) : '';
@@ -39,33 +43,55 @@ var DatePickInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, re
 
   var getDateFormatted = _react["default"].useCallback(formatDate, []);
 
+  var renderBase = function renderBase() {
+    if (filterConfig != null && filterConfig.filterType) {
+      return (0, _react2.jsx)(_FilterBase["default"], {
+        isDatePicker: true,
+        dataTestId: 'filter',
+        disabled: false,
+        buttonType: (filterConfig == null ? void 0 : filterConfig.buttonType) || 'primary',
+        styleType: (filterConfig == null ? void 0 : filterConfig.styleType) || 'filled',
+        handleOpen: handleFocus,
+        filterType: filterConfig.filterType,
+        onClear: handleClear,
+        selectedItemLabel: selectedDay.from && "Select Date" + (isRangePicker ? 's' : '') + " : " + getDateFormatted(selectedDay.from) + " " + (isRangePicker ? "- " + getDateFormatted(selectedDay.to) : ''),
+        open: isOpen,
+        hasSelectedValue: Boolean(selectedDay.from && getDateFormatted(selectedDay.from) + " - " + getDateFormatted(selectedDay.to)),
+        label: !selectedDay.from ? "Select Date" + (isRangePicker ? 's' : '') : '',
+        iconName: selectedDay.from ? 'calendarFilled' : 'calendarEmpty'
+      });
+    }
+
+    return isRangePicker ? (0, _react2.jsx)(_TextField["default"], _extends({
+      ref: ref
+    }, inputProps, {
+      onFocus: handleFocus,
+      onKeyDown: handleClear,
+      onChange: ON_CHANGE_MOCK,
+      placeholder: "Date (start) - Date (end)",
+      value: selectedDay.from && getDateFormatted(selectedDay.from) + " - " + getDateFormatted(selectedDay.to),
+      rightIcon: (0, _react2.jsx)(_Icon["default"], {
+        name: 'calendarEmpty',
+        color: '#676767'
+      })
+    })) : (0, _react2.jsx)(_TextField["default"], _extends({
+      ref: ref
+    }, inputProps, {
+      onFocus: handleFocus,
+      onKeyDown: handleClear,
+      onChange: ON_CHANGE_MOCK,
+      placeholder: "Select date",
+      value: selectedDay.to && getDateFormatted(selectedDay.to),
+      rightIcon: (0, _react2.jsx)(_Icon["default"], {
+        name: 'calendarEmpty',
+        color: '#676767'
+      })
+    }));
+  };
+
   return (0, _react2.jsx)("div", {
     css: (0, _DatePickInput.rangeInputsWrapper)()
-  }, isRangePicker ? (0, _react2.jsx)(_TextField["default"], _extends({
-    ref: ref
-  }, inputProps, {
-    onFocus: handleFocus,
-    onKeyDown: handleClear,
-    onChange: ON_CHANGE_MOCK,
-    placeholder: "Date (start) - Date (end)",
-    value: selectedDay.from && getDateFormatted(selectedDay.from) + " - " + getDateFormatted(selectedDay.to),
-    rightIcon: (0, _react2.jsx)(_Icon["default"], {
-      name: 'calendarEmpty',
-      color: '#676767'
-    })
-  })) : (0, _react2.jsx)(_TextField["default"], _extends({
-    ref: ref
-  }, inputProps, {
-    onFocus: handleFocus,
-    onKeyDown: handleClear,
-    onChange: ON_CHANGE_MOCK,
-    placeholder: "Select date",
-    value: selectedDay.to && getDateFormatted(selectedDay.to),
-    rightIcon: (0, _react2.jsx)(_Icon["default"], {
-      name: 'calendarEmpty',
-      color: '#676767'
-    })
-  })));
+  }, renderBase());
 });
 
 DatePickInput.displayName = 'DatePickInput';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,6 @@
 import { Dayjs } from 'dayjs';
 import React from 'react';
+import { FilterType, StyleType } from '../Filter/types';
 import { Props as TextFieldProps } from '../TextField/TextField';
 import { Range } from './OverlayComponent/OverlayComponent';
 export declare type DisabledDates = {
@@ -28,6 +29,15 @@ export declare type Props = {
     isClearable?: boolean;
     /** if the datepicker's default date is today instead of placeholder text */
     isDefaultNow?: boolean;
+    /** Style properties for the DatePicker with a filter base */
+    filterConfig?: {
+        /** The type of the filter button's palette - defaults to "primary" */
+        buttonType?: 'primary' | 'secondary';
+        /** Defines the style type of the filter button */
+        styleType?: StyleType;
+        /** This property defines the Filter's type */
+        filterType?: FilterType;
+    };
 };
 export declare type ExtraOption = {
     value: string;

package/dist/components/DatePicker/DatePicker.js

@@ -57,12 +57,13 @@ var DatePicker = function DatePicker(_ref) {
       dateFormatOverride = _ref$dateFormatOverri === void 0 ? undefined : _ref$dateFormatOverri,
       _ref$isClearable = _ref.isClearable,
       isClearable = _ref$isClearable === void 0 ? false : _ref$isClearable,
+      filterConfig = _ref.filterConfig,
       _ref$isDefaultNow = _ref.isDefaultNow,
       isDefaultNow = _ref$isDefaultNow === void 0 ? true : _ref$isDefaultNow;
 
   var _useState = (0, _react.useState)(false),
-      open = _useState[0],
-      setOpen = _useState[1];
+      isOpen = _useState[0],
+      setIsOpen = _useState[1];
 
   var _useState2 = (0, _react.useState)(''),
       selectedOption = _useState2[0],
@@ -104,7 +105,7 @@ var DatePicker = function DatePicker(_ref) {
     };
 
     if (newRange.to) {
-      setOpen(false);
+      setIsOpen(false);
     }
 
     setSelectedRange(newRange);
@@ -159,19 +160,27 @@ var DatePicker = function DatePicker(_ref) {
     });
   }, [isRangePicker]);
   var onCancel = (0, _react.useCallback)(function () {
-    setOpen(false);
+    setIsOpen(false);
   }, []);
   var handleFocus = (0, _react.useCallback)(function () {
-    setOpen(true);
+    setIsOpen(true);
   }, []);
   var handleClear = (0, _react.useCallback)(function (e) {
-    if (!isClearable) {
+    if (!isClearable && (filterConfig == null ? void 0 : filterConfig.filterType) !== 'added') {
       return false;
     }
 
+    if (filterConfig != null && filterConfig.filterType) {
+      setIsOpen(false);
+      return setSelectedRange({
+        to: undefined,
+        from: undefined
+      });
+    }
+
     if (e.keyCode === 27) {
       // if escape
-      return setOpen(false);
+      return setIsOpen(false);
     }
 
     if (e.keyCode === 8) {
@@ -190,22 +199,24 @@ var DatePicker = function DatePicker(_ref) {
         };
       });
     }
-  }, [isClearable]);
+  }, [isClearable, filterConfig == null ? void 0 : filterConfig.filterType]);
   var onApply = (0, _react.useCallback)(function () {
     applyRangeAndClose(range);
   }, [applyRangeAndClose, range]);
   return (0, _react2.jsx)(_ClickAwayListener["default"], {
     onClick: onCancel
   }, (0, _react2.jsx)(_PositionInScreen["default"], {
-    visible: open,
+    visible: isOpen,
     parent: function parent() {
       return (0, _react2.jsx)(_DatePickInput["default"], {
+        filterConfig: filterConfig,
         isRangePicker: isRangePicker,
         selectedDay: selectedRange,
         inputProps: inputProps,
         dateFormatOverride: dateFormatOverride,
         handleFocus: handleFocus,
-        handleClear: handleClear
+        handleClear: handleClear,
+        isOpen: isOpen
       });
     }
   }, (0, _react2.jsx)("div", {

package/dist/components/DatePicker/Month/Month.utils.d.ts

@@ -2,5 +2,5 @@ import { Dayjs } from 'dayjs';
 import { DisabledDates } from '../DatePicker';
 export declare const calculateDisabledDays: (day: number | undefined, month: number, year: number, disabledDates?: DisabledDates | undefined) => boolean;
 export declare const calculatedDayIsBetween: (day: number | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | undefined;
-export declare const calculateSelectedDayPosition: (day: number | undefined, position: "first" | "last" | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | 0 | undefined;
+export declare const calculateSelectedDayPosition: (day: number | undefined, position: "last" | "first" | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | 0 | undefined;
 export declare const calculateSelectedDay: (day: number, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean;

package/dist/components/ExpandCollapse/ExpandCollapse.d.ts

@@ -40,12 +40,12 @@ export declare type Props = {
      * A function accepting a boolean representing the current expansion state. Returns the
      * collapsible/expandable content. Mutually exclusive with children.
      */
-    content?: (x: boolean) => React.ReactElement;
+    content?: (x: boolean) => React.ReactNode;
     /**
      * A function accepting a boolean representing the current expansion state. Returns the
      * collapsible/expandable content. Mutually exclusive with content.
      */
-    children?: (x: boolean) => React.ReactElement;
+    children?: (x: boolean) => React.ReactNode;
 } & TestProps;
 declare function ExpandCollapse(props: Props): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ExpandCollapse;