@activecollab/components 1.0.4 → 1.0.8

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Sheet/Styles.ts"],"names":["StyledSheetIcons","styled","div","displayName","StyledSheetOverlay","Overlay","props","$hasBgColor","css","StyledSheetWrapper","BoxSizingStyle","FontStyle","$mode","$position","StyledSheetWrapperPaper","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","$durationIn","$maxDurationIn","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Overlay } from \"../Overlay\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSheetIcons = styled.div`\n  display: flex;\n  height: 0;\n  position: relative;\n\n  span {\n    position: relative;\n    background-color: var(--page-paper-main);\n    box-shadow: var(--shadow-secondary);\n    cursor: pointer;\n    border-radius: 100%;\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    & > * {\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      fill: var(--color-theme-600);\n    }\n  }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\nexport const StyledSheetOverlay = styled(Overlay)<{ $hasBgColor: boolean }>`\n  ${(props) =>\n    props.$hasBgColor &&\n    css`\n      background: var(--modal-background);\n    `}\n`;\n\nStyledSheetOverlay.displayName = \"StyledSheetOverlay\";\n\ninterface IStyledSheetWrapper {\n  $position?: \"center\" | \"left\" | \"right\";\n  $mode?: \"normal\" | \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  position: relative;\n  max-width: 95vw;\n  display: flex;\n  flex-direction: row;\n\n  ${(props) =>\n    props.$mode === \"stretch\"\n      ? css`\n          margin-top: 8px;\n          height: calc(100vh - 16px);\n          width: calc(100vw - 100px);\n          max-width: 1000px;\n          ${StyledSheetIcons} {\n            flex-direction: column;\n            width: 0;\n            height: calc(100vh - 32px);\n            & > * {\n              margin-bottom: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: 8px;\n            }\n          }\n        `\n      : css`\n          max-height: calc(100vh - 156px);\n          margin-top: 126px;\n          margin-bottom: 30px;\n          width: 540px;\n          flex-direction: column;\n\n          ${StyledSheetIcons} {\n            flex-direction: row-reverse;\n            & > * {\n              margin-left: 8px;\n              animation-fill-mode: both;\n            }\n            span {\n              top: -48px;\n              right: 8px;\n            }\n          }\n        `}\n\n  ${(props) =>\n    props.$position === \"center\" &&\n    css`\n      ${tw`tw-mx-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"left\" &&\n    css`\n      ${tw`tw-ml-2 tw-mr-auto`}\n    `}\n\n  ${(props) =>\n    props.$position === \"right\" &&\n    css`\n      ${tw`tw-mr-2 tw-ml-auto`}\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position !== \"left\" &&\n    css`\n      ${StyledSheetIcons} {\n        span {\n          right: 48px;\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$mode === \"stretch\" &&\n    props.$position === \"left\" &&\n    css`\n      flex-direction: row-reverse;\n\n      ${StyledSheetIcons} {\n        span {\n          right: -8px;\n        }\n      }\n    `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\nexport const StyledSheetWrapperPaper = styled.div`\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  box-shadow: var(--shadow-primary);\n  border-radius: 6px;\n  overflow: auto;\n  animation: 0.3s linear ease-out;\n\n  ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-200px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  100% {\n    opacity: 0;\n    transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n  0% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n  0% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateY(-150px);\n    opacity: 0;\n  }\n`;\n\ninterface IStyledAnimatedSpan {\n  $mode: string;\n  $state: string;\n  $maxDurationIn: number;\n  $maxDurationOut: number;\n  $durationOut: number;\n  $durationIn: number;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n  background: red;\n  ${(props) =>\n    props.$state === \"entering\" &&\n    css`\n      opacity: 1;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsTop};\n            animation-duration: ${`${props.$durationIn}s`};\n            animation-delay: ${`${props.$durationIn}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterIn};\n            animation-duration: ${`${props.$maxDurationIn}s`};\n            animation-delay: 0s;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"entered\" &&\n    css`\n      opacity: 1;\n    `}\n\n  ${(props) =>\n    props.$state === \"exiting\" &&\n    css`\n      opacity: 0;\n\n      ${props.$mode === \"stretch\"\n        ? css`\n            animation-name: ${StyledSheetControlsBottom};\n            animation-duration: ${`${props.$durationOut}s`};\n            animation-delay: ${`${props.$durationOut}s`};\n          `\n        : css`\n            animation-name: ${StyledSheetControlsCenterOut};\n            animation-duration: ${`${props.$maxDurationOut}s`};\n            animation-delay: 0;\n          `}\n    `}\n\n  ${(props) =>\n    props.$state === \"exited\" &&\n    css`\n      opacity: 0;\n    `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n  $direction: string;\n}>`\n  ${(props) =>\n    props.$direction === \"top\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"bottom\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateY(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateY(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateY(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(-100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(-100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-sheet__animation-enter {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-enter-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-appear {\n        opacity: 0;\n        transform: translateX(100%);\n      }\n      &.c-sheet__animation-appear-active {\n        opacity: 1;\n        transform: translateX(0);\n        transition: opacity 400ms, transform 400ms;\n      }\n      &.c-sheet__animation-exit {\n        opacity: 1;\n      }\n      &.c-sheet__animation-exit-active {\n        opacity: 0;\n        transform: translateX(100%);\n        transition: opacity 200ms, transform 200ms;\n      }\n    `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Sheet/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Sheet = require("./Sheet");
+
+Object.keys(_Sheet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Sheet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Sheet[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Sheet/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Sheet\";\n"],"file":"index.js"}

package/dist/cjs/components/Signifier/Signifier.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.signifierTypes = exports.Signifier = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _Tooltip = require("../Tooltip");
+
+var _Typography = require("../Typography");
+
+var _Styles = require("./Styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var signifierTypes = ["EyeIcon", "EyeSmallIcon", "PencilIcon", "PencilSmallIcon", "EyeOffIcon", "EyeOffSmallIcon", "ChecklistIcon", "ChecklistSmallIcon", "WarningTriangleIcon", "WarningTriangleSmallIcon", "DependencyIcon", "DependencySmallIcon", "MessageIcon", "MessageSmallIcon", "ClockStopwatchIcon", "ClockStopwatchSmallIcon", "ClockIcon", "ClockSmallIcon", "DollarOffIcon", "DollarOffSmallIcon", "DollarIcon", "DollarSmallIcon", "DollarCheckmarkIcon", "DollarCheckmarkSmallIcon", "DollarClockIcon", "DollarClockSmallIcon", "BellOffIcon", "BellOffSmallIcon", "LockIcon", "LockSmallIcon", "RecurringCheckmarkIcon", "RecurringCheckmarkSmallIcon"];
+exports.signifierTypes = signifierTypes;
+
+var Signifier = function Signifier(_ref) {
+  var Component = _ref.type,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? null : _ref$value,
+      className = _ref.className,
+      tooltipText = _ref.tooltipText,
+      tooltipClassName = _ref.tooltipClassName;
+
+  if (signifierTypes.indexOf(Component.displayName) === -1) {
+    console.warn("You are using unsupported Signifier icon");
+  }
+
+  var _useState = (0, _react.useState)("c-signifier--top"),
+      _useState2 = _slicedToArray(_useState, 2),
+      direction = _useState2[0],
+      setDirection = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      setPrevValue = _useState4[1];
+
+  var label = (0, _react.useMemo)(function () {
+    if (!value || value < 1) return null;
+    var max = 1000000000;
+    var newValue = value;
+
+    if (newValue > max) {
+      newValue = max;
+    }
+
+    if (newValue === max) {
+      return "".concat(Math.floor(newValue / 1000000000), "B+");
+    } else if (newValue > 999999) {
+      return "".concat(Math.floor(newValue / 1000000), "M");
+    } else if (newValue > 999) {
+      return "".concat(Math.floor(newValue / 1000), "k");
+    }
+
+    return "".concat(newValue);
+  }, [value]);
+  (0, _react.useEffect)(function () {
+    value && setPrevValue(function (v) {
+      v && setDirection(v - value > 0 ? "c-signifier--top" : "c-signifier--bottom");
+      return value;
+    });
+  }, [value]);
+  var renderSignifier = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledSignifier, {
+      className: (0, _classnames.default)("c-signifier", className),
+      $direction: direction
+    }, /*#__PURE__*/_react.default.createElement(_Styles.StyledIcon, {
+      as: Component
+    }), value !== null && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.SwitchTransition, {
+      mode: "out-in"
+    }, /*#__PURE__*/_react.default.createElement(_Styles.StyledSignifierTransition, {
+      key: label,
+      timeout: 300,
+      classNames: "c-signifier--animate"
+    }, Component.displayName.includes("SmallIcon") ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+      color: "secondary"
+    }, label) : /*#__PURE__*/_react.default.createElement(_Typography.Body1, {
+      color: "secondary"
+    }, label))));
+  }, [className, direction, Component, value, label]);
+  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : "",
+    disable: !tooltipText,
+    popperTooltipClassName: tooltipClassName
+  }, renderSignifier);
+};
+
+exports.Signifier = Signifier;
+Signifier.displayName = "Signifier";
+//# sourceMappingURL=Signifier.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Signifier/Signifier.tsx"],"names":["signifierTypes","Signifier","Component","type","value","className","tooltipText","tooltipClassName","indexOf","displayName","console","warn","direction","setDirection","setPrevValue","label","max","newValue","Math","floor","v","renderSignifier","includes"],"mappings":"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","sourcesContent":["import React, { FC, useMemo, ElementType, useState, useEffect } from \"react\";\nimport classnames from \"classnames\";\nimport { SwitchTransition } from \"react-transition-group\";\nimport { Tooltip } from \"../Tooltip\";\nimport { Body1, Caption1 } from \"../Typography\";\nimport {\n  StyledIcon,\n  StyledSignifier,\n  StyledSignifierTransition,\n} from \"./Styles\";\n\ninterface ISignifierProps {\n  /** One of icon types */\n  type: ElementType;\n  /** Number that represent total value */\n  value?: number;\n  /** Value that represent class names */\n  className?: string;\n  /** The text that will be displayed on hover in tooltip */\n  tooltipText?: string;\n  /** ClassName for tooltip if there is one */\n  tooltipClassName?: string;\n}\n\nexport const signifierTypes = [\n  \"EyeIcon\",\n  \"EyeSmallIcon\",\n  \"PencilIcon\",\n  \"PencilSmallIcon\",\n  \"EyeOffIcon\",\n  \"EyeOffSmallIcon\",\n  \"ChecklistIcon\",\n  \"ChecklistSmallIcon\",\n  \"WarningTriangleIcon\",\n  \"WarningTriangleSmallIcon\",\n  \"DependencyIcon\",\n  \"DependencySmallIcon\",\n  \"MessageIcon\",\n  \"MessageSmallIcon\",\n  \"ClockStopwatchIcon\",\n  \"ClockStopwatchSmallIcon\",\n  \"ClockIcon\",\n  \"ClockSmallIcon\",\n  \"DollarOffIcon\",\n  \"DollarOffSmallIcon\",\n  \"DollarIcon\",\n  \"DollarSmallIcon\",\n  \"DollarCheckmarkIcon\",\n  \"DollarCheckmarkSmallIcon\",\n  \"DollarClockIcon\",\n  \"DollarClockSmallIcon\",\n  \"BellOffIcon\",\n  \"BellOffSmallIcon\",\n  \"LockIcon\",\n  \"LockSmallIcon\",\n  \"RecurringCheckmarkIcon\",\n  \"RecurringCheckmarkSmallIcon\",\n];\n\nexport const Signifier: FC<ISignifierProps> = ({\n  type: Component,\n  value = null,\n  className,\n  tooltipText,\n  tooltipClassName,\n}) => {\n  if (\n    signifierTypes.indexOf(\n      (Component as { displayName: string }).displayName\n    ) === -1\n  ) {\n    console.warn(\"You are using unsupported Signifier icon\");\n  }\n\n  const [direction, setDirection] = useState(\"c-signifier--top\");\n  const [, setPrevValue] = useState(value);\n\n  const label: string | null = useMemo(() => {\n    if (!value || value < 1) return null;\n\n    const max = 1_000_000_000;\n    let newValue = value;\n\n    if (newValue > max) {\n      newValue = max;\n    }\n\n    if (newValue === max) {\n      return `${Math.floor(newValue / 1_000_000_000)}B+`;\n    } else if (newValue > 999_999) {\n      return `${Math.floor(newValue / 1_000_000)}M`;\n    } else if (newValue > 999) {\n      return `${Math.floor(newValue / 1000)}k`;\n    }\n\n    return `${newValue}`;\n  }, [value]);\n\n  useEffect(() => {\n    value &&\n      setPrevValue((v) => {\n        v &&\n          setDirection(\n            v - value > 0 ? \"c-signifier--top\" : \"c-signifier--bottom\"\n          );\n        return value;\n      });\n  }, [value]);\n\n  const renderSignifier = useMemo(\n    () => (\n      <StyledSignifier\n        className={classnames(\"c-signifier\", className)}\n        $direction={direction}\n      >\n        <StyledIcon as={Component} />\n        {value !== null && (\n          <SwitchTransition mode={\"out-in\"}>\n            <StyledSignifierTransition\n              key={label}\n              timeout={300}\n              classNames=\"c-signifier--animate\"\n            >\n              {(Component as { displayName: string }).displayName.includes(\n                \"SmallIcon\"\n              ) ? (\n                <Caption1 color=\"secondary\">{label}</Caption1>\n              ) : (\n                <Body1 color=\"secondary\">{label}</Body1>\n              )}\n            </StyledSignifierTransition>\n          </SwitchTransition>\n        )}\n      </StyledSignifier>\n    ),\n    [className, direction, Component, value, label]\n  );\n\n  return (\n    <Tooltip\n      title={tooltipText ?? \"\"}\n      disable={!tooltipText}\n      popperTooltipClassName={tooltipClassName}\n    >\n      {renderSignifier}\n    </Tooltip>\n  );\n};\n\nSignifier.displayName = \"Signifier\";\n"],"file":"Signifier.js"}

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

@@ -0,0 +1,55 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSignifierTransition = exports.StyledSignifier = exports.StyledIcon = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+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 StyledSignifier = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledSignifier",
+  componentId: "sc-1idn4je-0"
+})(["", " ", " ", " cursor:default;", " ", ""], {
+  "display": "inline-flex",
+  "alignItems": "center",
+  "color": "var(--color-theme-800)"
+}, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
+  return props.$direction === "c-signifier--top" && (0, _styledComponents.css)(["--signifier-in:60%;--signifier-out:-60%;"]);
+}, function (props) {
+  return props.$direction === "c-signifier--bottom" && (0, _styledComponents.css)(["--signifier-in:-60%;--signifier-out:60%;"]);
+});
+
+exports.StyledSignifier = StyledSignifier;
+StyledSignifier.displayName = "StyledSignifier";
+var StyledSignifierTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
+  displayName: "Styles__StyledSignifierTransition",
+  componentId: "sc-1idn4je-1"
+})(["&.c-signifier--animate-enter{opacity:0;transform:translateY(var(--signifier-in));}&.c-signifier--animate-enter-active{opacity:1;transform:translateY(0%);transition-duration:300ms;}&.c-signifier--animate-exit{transform:translateY(0%);opacity:1;}&.c-signifier--animate-exit-active{transform:translateY(var(--signifier-out));opacity:0;transition-duration:300ms;}"]);
+exports.StyledSignifierTransition = StyledSignifierTransition;
+StyledSignifierTransition.displayName = "StyledSignifierTransition";
+
+var StyledIcon = _styledComponents.default.svg.withConfig({
+  displayName: "Styles__StyledIcon",
+  componentId: "sc-1idn4je-2"
+})(["", ""], {
+  "fontSize": "0.75rem",
+  "lineHeight": "1rem",
+  "marginRight": "0.25rem"
+});
+
+exports.StyledIcon = StyledIcon;
+StyledIcon.displayName = "StyledIcon";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Signifier/Styles.ts"],"names":["StyledSignifier","styled","div","FontStyle","BoxSizingStyle","props","$direction","css","displayName","StyledSignifierTransition","CSSTransition","StyledIcon","svg"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAEO,IAAMA,eAAe,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,gDACtB;AAAA;AAAA;AAAA;AAAA,CADsB,EAExBC,oBAFwB,EAGxBC,8BAHwB,EAOxB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,kBAArB,QACAC,qBADA,+CADA;AAAA,CAPwB,EAcxB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,qBAArB,QACAC,qBADA,+CADA;AAAA,CAdwB,CAArB;;;AAqBPP,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B;AAEO,IAAMC,yBAAyB,GAAG,+BAAOC,mCAAP,CAAH;AAAA;AAAA;AAAA,+WAA/B;;AAoBPD,yBAAyB,CAACD,WAA1B,GAAwC,2BAAxC;;AAEO,IAAMG,UAAU,GAAGV,0BAAOW,GAAV;AAAA;AAAA;AAAA,aACjB;AAAA;AAAA;AAAA;AAAA,CADiB,CAAhB;;;AAGPD,UAAU,CAACH,WAAX,GAAyB,YAAzB","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledSignifier = styled.div<{ $direction: string }>`\n  ${tw`tw-inline-flex tw-items-center tw-text-theme-800`}\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  cursor: default;\n\n  ${(props) =>\n    props.$direction === \"c-signifier--top\" &&\n    css`\n      --signifier-in: 60%;\n      --signifier-out: -60%;\n    `}\n\n  ${(props) =>\n    props.$direction === \"c-signifier--bottom\" &&\n    css`\n      --signifier-in: -60%;\n      --signifier-out: 60%;\n    `}\n`;\nStyledSignifier.displayName = \"StyledSignifier\";\n\nexport const StyledSignifierTransition = styled(CSSTransition)`\n  &.c-signifier--animate-enter {\n    opacity: 0;\n    transform: translateY(var(--signifier-in));\n  }\n  &.c-signifier--animate-enter-active {\n    opacity: 1;\n    transform: translateY(0%);\n    transition-duration: 300ms;\n  }\n  &.c-signifier--animate-exit {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n  &.c-signifier--animate-exit-active {\n    transform: translateY(var(--signifier-out));\n    opacity: 0;\n    transition-duration: 300ms;\n  }\n`;\nStyledSignifierTransition.displayName = \"StyledSignifierTransition\";\n\nexport const StyledIcon = styled.svg`\n  ${tw`tw-text-xs tw-mr-1`}\n`;\nStyledIcon.displayName = \"StyledIcon\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Signifier/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Signifier = require("./Signifier");
+
+Object.keys(_Signifier).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Signifier[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Signifier[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Signifier/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Signifier/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Signifier\";\n"],"file":"index.js"}

package/dist/cjs/components/Steppers/DateStepper/DateStepper.js

@@ -0,0 +1,339 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateStepper = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _moment2 = _interopRequireDefault(require("react-day-picker/moment"));
+
+var _Button = require("../../Button/Button");
+
+var _CaretLeft = _interopRequireDefault(require("../../Icons/collection/CaretLeft"));
+
+var _CaretRight = _interopRequireDefault(require("../../Icons/collection/CaretRight"));
+
+var _DatePicker = require("../../DatePicker");
+
+var _ClassNames = require("../../DatePicker/ClassNames");
+
+var _Styles = require("./Styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * This component allow you to select date range. It accepts two parameters "from" and "to" as valid format
+ * onChange and onBack and onForward it will return "from: Date" and "to: Date" as function arguments
+ */
+var DateStepper = function DateStepper(_ref) {
+  var step = _ref.step,
+      formatCallback = _ref.formatCallback,
+      onChange = _ref.onChange,
+      from = _ref.from,
+      to = _ref.to,
+      onBack = _ref.onBack,
+      onForward = _ref.onForward,
+      minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      className = _ref.className,
+      _ref$period = _ref.period,
+      period = _ref$period === void 0 ? "week" : _ref$period,
+      datePickerClass = _ref.datePickerClass,
+      _ref$withDatePicker = _ref.withDatePicker,
+      withDatePicker = _ref$withDatePicker === void 0 ? true : _ref$withDatePicker,
+      _ref$defaultMonth = _ref.defaultMonth,
+      defaultMonth = _ref$defaultMonth === void 0 ? new Date() : _ref$defaultMonth,
+      popperClassName = _ref.popperClassName,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? "bottom" : _ref$position;
+
+  var _useState = (0, _react.useState)((0, _moment.default)(from)),
+      _useState2 = _slicedToArray(_useState, 2),
+      fromDate = _useState2[0],
+      setFromDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)((0, _moment.default)(to)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      toDate = _useState4[0],
+      setToDate = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showDatePicker = _useState6[0],
+      setShowDatePicker = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(defaultMonth),
+      _useState8 = _slicedToArray(_useState7, 2),
+      month = _useState8[0],
+      setMonth = _useState8[1];
+
+  var getDatesByPeriod = (0, _react.useCallback)(function (interval) {
+    var date = fromDate ? fromDate : (0, _moment.default)();
+
+    if (step === "daily") {
+      date.add(interval, "days");
+      return [date, date.clone()];
+    } else if (step === "weekly") {
+      date.add(interval, "weeks");
+      return [date.clone().startOf(period), date.clone().endOf(period)];
+    } else if (step === "monthly") {
+      date.add(interval, "months");
+      return [date.clone().startOf("month"), date.clone().endOf("month")];
+    } else if (step === "quarterly") {
+      date.add(interval, "quarters");
+      return [date.clone().startOf("quarter"), date.clone().endOf("quarter")];
+    } else if (step === "yearly") {
+      date.add(interval, "years");
+      return [date.clone().startOf("year"), date.clone().endOf("year")];
+    }
+
+    return [date, date];
+  }, [fromDate, period, step]);
+  var getDateFormatted = (0, _react.useMemo)(function () {
+    if (formatCallback) {
+      return formatCallback(fromDate.toDate(), toDate.toDate());
+    }
+
+    var actualYear = (0, _moment.default)().year();
+
+    var showWeekOrCustomDateFormat = function showWeekOrCustomDateFormat(start, end) {
+      if (start.year() === actualYear && end.year() === actualYear) {
+        return start.format("MMM DD") + " - " + end.format("MMM DD");
+      } else {
+        return start.format("MMM DD YYYY") + " - " + end.format("MMM DD YYYY");
+      }
+    };
+
+    if (step === "daily") {
+      if (fromDate.year() === actualYear) {
+        return fromDate.format("MMM DD");
+      }
+
+      return fromDate.format("MMM DD YYYY");
+    } else if (step === "weekly") {
+      var startDate = fromDate.clone().startOf(period);
+      var endDate = startDate.clone().endOf(period);
+      return showWeekOrCustomDateFormat(startDate, endDate);
+    } else if (step === "monthly") {
+      return fromDate.format("MMM YYYY");
+    } else if (step === "quarterly") {
+      return "Q".concat(fromDate.quarter(), "/").concat(fromDate.format("YYYY"));
+    } else if (step === "yearly") {
+      return fromDate.format("YYYY");
+    } else if (step === "custom") {
+      return showWeekOrCustomDateFormat(fromDate, toDate);
+    }
+
+    return "";
+  }, [fromDate, step, toDate, formatCallback, period]);
+  var onChangeCallback = (0, _react.useCallback)(function (amount) {
+    var _getDatesByPeriod = getDatesByPeriod(amount),
+        _getDatesByPeriod2 = _slicedToArray(_getDatesByPeriod, 2),
+        newFrom = _getDatesByPeriod2[0],
+        newTo = _getDatesByPeriod2[1];
+
+    setFromDate((0, _moment.default)(newFrom));
+    setToDate((0, _moment.default)(newTo));
+
+    if (onChange) {
+      onChange(newFrom.toDate(), newTo.toDate());
+    }
+  }, [onChange, getDatesByPeriod]);
+  var onDatePickerChange = (0, _react.useCallback)(function (dates) {
+    var fromDateTemp = dates === null || dates === void 0 ? void 0 : dates.from;
+    var toDateTemp = dates === null || dates === void 0 ? void 0 : dates.to;
+    setFromDate((0, _moment.default)(fromDateTemp));
+    setToDate((0, _moment.default)(toDateTemp));
+
+    if (onChange && fromDateTemp instanceof Date && toDateTemp instanceof Date) {
+      onChange(fromDateTemp, toDateTemp);
+    }
+  }, [onChange, setFromDate, setToDate]);
+  var isAfterMaxDate = (0, _react.useMemo)(function () {
+    return maxValue instanceof Date && (0, _moment.default)((0, _moment.default)(maxValue).format("YYYY-MM-DD")).isSameOrBefore(toDate.format("YYYY-MM-DD"));
+  }, [maxValue, toDate]);
+  var isBeforeMinDate = (0, _react.useMemo)(function () {
+    return minValue instanceof Date && (0, _moment.default)((0, _moment.default)(minValue).format("YYYY-MM-DD")).isSameOrAfter(toDate.format("YYYY-MM-DD"));
+  }, [minValue, toDate]);
+  (0, _react.useEffect)(function () {
+    if (isBeforeMinDate) {
+      if (step === "daily") {
+        setFromDate((0, _moment.default)(minValue));
+        setToDate((0, _moment.default)(minValue));
+      }
+    }
+
+    if (isAfterMaxDate) {
+      if (step === "daily") {
+        setFromDate((0, _moment.default)(maxValue));
+        setToDate((0, _moment.default)(maxValue));
+      }
+    }
+  }, [step, minValue, maxValue, isBeforeMinDate, isAfterMaxDate]);
+  var onRightClickHandler = (0, _react.useCallback)(function () {
+    if (isAfterMaxDate) {
+      return;
+    }
+
+    onChangeCallback(1);
+
+    if (onForward) {
+      onForward(fromDate.toDate(), toDate.toDate());
+    }
+  }, [isAfterMaxDate, onChangeCallback, onForward, fromDate, toDate]);
+  var onLeftClickHandler = (0, _react.useCallback)(function () {
+    if (isBeforeMinDate) {
+      return;
+    }
+
+    onChangeCallback(-1);
+
+    if (onBack) {
+      onBack(fromDate.toDate(), toDate.toDate());
+    }
+  }, [isBeforeMinDate, onChangeCallback, onBack, fromDate, toDate]);
+  var renderLeftRightButtons = (0, _react.useMemo)(function () {
+    return step !== "custom";
+  }, [step]);
+  var handleShow = (0, _react.useCallback)(function () {
+    setShowDatePicker(!showDatePicker);
+
+    if (fromDate) {
+      setMonth(fromDate.toDate());
+    }
+  }, [setShowDatePicker, showDatePicker, fromDate]);
+  var closeMenu = (0, _react.useCallback)(function () {
+    setShowDatePicker(false);
+  }, []);
+  var onMonthChange = (0, _react.useCallback)(function (m) {
+    setMonth(m);
+  }, [setMonth]);
+  (0, _react.useEffect)(function () {
+    setFromDate((0, _moment.default)(from));
+    setToDate((0, _moment.default)(to));
+  }, [from, to]);
+
+  var dateStepperWidth = function dateStepperWidth(fromDay, toDay, range) {
+    if (fromDay.year() !== (0, _moment.default)().year() || toDay.year() !== (0, _moment.default)().year()) {
+      switch (range) {
+        case "daily":
+        case "monthly":
+          return {
+            minWidth: "122px"
+          };
+
+        case "weekly":
+        case "custom":
+          return {
+            minWidth: "232px"
+          };
+      }
+    }
+
+    switch (range) {
+      case "monthly":
+        return {
+          minWidth: "122px"
+        };
+
+      case "weekly":
+      case "custom":
+        return {
+          minWidth: "182px"
+        };
+    }
+
+    return {
+      minWidth: "102px"
+    };
+  };
+
+  var isDisabled = (0, _react.useCallback)(function (day) {
+    var dayFormat = (0, _moment.default)(day).format("YYYY-MM-DD");
+    var isBefore = maxValue instanceof Date && (0, _moment.default)((0, _moment.default)(maxValue).format("YYYY-MM-DD")).isBefore(dayFormat);
+    var isAfter = minValue instanceof Date && (0, _moment.default)((0, _moment.default)(minValue).format("YYYY-MM-DD")).isAfter(dayFormat);
+    return isBefore || isAfter;
+  }, [maxValue, minValue]);
+  var modifiers = (0, _react.useMemo)(function () {
+    var _ref2;
+
+    return _ref2 = {}, _defineProperty(_ref2, _ClassNames.customClassNames.disabled, function (day) {
+      return isDisabled(day);
+    }), _defineProperty(_ref2, _ClassNames.customClassNames.nonWorkingDay, function (day) {
+      return isDisabled(day);
+    }), _ref2;
+  }, [isDisabled]);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledButtonGroup, {
+    className: (0, _classnames.default)("c-date-stepper", className)
+  }, renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: onLeftClickHandler,
+    disabled: isBeforeMinDate
+  }, /*#__PURE__*/_react.default.createElement(_CaretLeft.default, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledDiv, {
+    $isTargetable: step === "yearly" || !withDatePicker,
+    $isRounded: step === "custom",
+    style: dateStepperWidth(fromDate, toDate, step)
+  }, withDatePicker ? /*#__PURE__*/_react.default.createElement(_Styles.StyledMenu, {
+    target: /*#__PURE__*/_react.default.createElement(_Styles.StyledButton, {
+      type: "button",
+      className: "c-simple-menu__trigger"
+    }, /*#__PURE__*/_react.default.createElement("span", null, getDateFormatted)),
+    open: showDatePicker,
+    onOpen: handleShow,
+    onClose: closeMenu,
+    popperClassName: popperClassName,
+    position: position
+  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
+    month: month,
+    localeUtils: _moment2.default,
+    locale: "en",
+    selectionMode: step,
+    className: datePickerClass,
+    selectedDays: {
+      from: fromDate.toDate(),
+      to: toDate.toDate()
+    },
+    onChange: onDatePickerChange,
+    onMonthChange: onMonthChange,
+    firstDayOfWeek: period === "week" ? 0 : 1,
+    modifiers: modifiers,
+    dateRequired: true,
+    fixedWeeks: true
+  })) : /*#__PURE__*/_react.default.createElement(_Styles.StyledSpan, null, getDateFormatted)), renderLeftRightButtons ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    type: "button",
+    variant: "secondary",
+    onClick: onRightClickHandler,
+    disabled: isAfterMaxDate
+  }, /*#__PURE__*/_react.default.createElement(_CaretRight.default, null)) : null);
+};
+
+exports.DateStepper = DateStepper;
+DateStepper.displayName = "DateStepper";
+//# sourceMappingURL=DateStepper.js.map