sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/TspanTooltip.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TspanTooltip = require("./TspanTooltip.style");
+const Tooltip = props => {
+  const {
+    className,
+    top,
+    left,
+    direction,
+    content
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipContainer, {
+    className: className,
+    top: `${top}px`,
+    left: `${left}px`
+  }, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipTip, {
+    className: `controls ${direction || 'top'}`
+  }, content)));
+};
+var _default = exports.default = Tooltip;
+Tooltip.defaultProps = {
+  className: '',
+  top: 0,
+  left: 0,
+  direction: 'top',
+  content: ''
+};

package/dist/stories/components/TspanTooltip.style.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = exports.TooltipTip = exports.TooltipContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
+  --tooltip-text-color: black;
+  --tooltip-background-color: white;
+  --tooltip-margin: 40px;
+  --tooltip-arrow-size: 10px;
+  position: absolute;
+  z-index: 999999;
+  top: ${props => props.top};
+  left: ${props => props.left};
+`;
+const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div`
+  display: inline-block;
+  position: relative;
+`;
+const TooltipTip = exports.TooltipTip = _styledComponents.default.div`
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  border-radius: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 12px;
+  color: var(--tooltip-text-color);
+  background: var(--tooltip-background-color);
+  font-size: 10px;
+  z-index: 999;
+  white-space: nowrap;
+ 
+  /* CSS border triangles */
+  &.controls::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: var(--tooltip-arrow-size);
+    margin-left: calc(var(--tooltip-arrow-size) * -1);
+  }
+
+  /* Absolute positioning */
+  &.controls.top {
+    top: calc(var(--tooltip-margin) * -1);
+  }
+
+  /* CSS border triangles */
+  &.controls.top::before {
+    top: 100%;
+    border-top-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.right {
+    left: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+
+  /* CSS border triangles */
+  &.controls.right::before {
+    left: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-right-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.bottom {
+    bottom: calc(var(--tooltip-margin) * -1);
+  }
+  /* CSS border triangles */
+  &.controls.bottom::before {
+    bottom: 100%;
+    border-bottom-color: var(--tooltip-background-color);
+  }
+
+  /* Absolute positioning */
+  &.controls.left {
+    left: auto;
+    right: calc(70% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+  /* CSS border triangles */
+  &.controls.left::before {
+    left: auto;
+    right: calc(var(--tooltip-arrow-size) * -2);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-left-color: var(--tooltip-background-color);
+  }
+
+  > ul {
+    padding-left: 10px;
+    margin: 0;
+  }
+`;

package/dist/stories/components/TwoBarCharts.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TwoBarCharts = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _recharts = require("recharts");
+var _CommonFunctions = require("./CommonFunctions");
+var _TwoBarCharts = require("./TwoBarCharts.style");
+var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
+/* eslint-disable react/prop-types */
+/* eslint-disable no-shadow */
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable no-nested-ternary */
+
+const ICON_TYPE_SQUARE = 'Square';
+/* BarChartsByWeeks */
+const TwoBarCharts = props => {
+  const {
+    className,
+    title,
+    barChartData,
+    barSize,
+    barFontSizeValue,
+    isDollar,
+    width,
+    height,
+    barChartColorFirst,
+    barChartColorSecond,
+    showLegend,
+    legendData,
+    showDollarSign,
+    showReferenceLine,
+    referenceLinePoint,
+    referenceLineColor,
+    referenceLineDashed
+  } = props;
+  const controlsContainerRef = (0, _react.useRef)();
+  const displayFormattedValue = value => {
+    if (!value) return '';
+    let formattedValue = '';
+    formattedValue = !isDollar ? ''.concat('', value.toFixed(1)) : ''.concat(showDollarSign ? '$' : '', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
+    return formattedValue;
+  };
+
+  // eslint-disable-next-line react/no-unstable-nested-components
+  const CustomTooltip = tooltipData => {
+    var _payload$0$payload, _payload$0$payload2;
+    const {
+      active,
+      payload,
+      label
+    } = tooltipData;
+    if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
+    let currentTooltipValue = 0;
+    if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
+    return /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue)}`));
+  };
+  const CustomizedTickBarChart = props => {
+    const {
+      x,
+      y,
+      payload
+    } = props;
+    if (barChartData && barChartData.length > 0 && payload) {
+      const retailerData = barChartData.filter(item => item.title === payload.value);
+      if (retailerData && retailerData.length > 0) {
+        return /*#__PURE__*/_react.default.createElement("g", {
+          transform: `translate(${x},${y})`
+        }, /*#__PURE__*/_react.default.createElement("text", {
+          x: 0,
+          y: 0,
+          dy: 16,
+          fill: "#212121"
+        }, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.LabelBoldText, {
+          textAnchor: "middle",
+          x: "0",
+          dy: "50",
+          fontWeight: 600
+        }, payload.value), /*#__PURE__*/_react.default.createElement(_TwoBarCharts.LabelText, {
+          textAnchor: "middle",
+          x: "0",
+          dy: "30",
+          fontWeight: 400
+        }, retailerData[0].date)));
+      }
+      return null;
+    }
+    return null;
+  };
+  const CustomizedLabel = props => {
+    const {
+      x,
+      y,
+      stroke,
+      value
+    } = props;
+    return /*#__PURE__*/_react.default.createElement("text", {
+      x: x + barSize / 2,
+      y: y,
+      dy: -8,
+      fill: stroke,
+      fontSize: barFontSizeValue,
+      textAnchor: "middle"
+    }, displayFormattedValue(value));
+  };
+  return /*#__PURE__*/_react.default.createElement(_TwoBarCharts.ControlsContainer, {
+    className: className,
+    height: height,
+    width: width,
+    ref: controlsContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.Controls, null, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
+    width: "100%",
+    height: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+    width: width,
+    height: height,
+    data: barChartData,
+    margin: {
+      top: 20,
+      right: 0,
+      bottom: 0,
+      left: -5
+    }
+  }, showReferenceLine && /*#__PURE__*/_react.default.createElement(_recharts.ReferenceLine, {
+    y: referenceLinePoint,
+    stroke: referenceLineColor,
+    strokeDasharray: referenceLineDashed
+  }), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
+    dataKey: "title",
+    tick: CustomizedTickBarChart,
+    tickLine: false,
+    interval: 0,
+    height: 120,
+    stroke: "#D0D0D0"
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
+    content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
+  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+    dataKey: "valueOne",
+    fill: barChartColorFirst,
+    minPointSize: 5,
+    barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
+    radius: [5, 5, 0, 0]
+  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "valueOne",
+    content: CustomizedLabel
+  })), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
+    dataKey: "valueTwo",
+    fill: barChartColorSecond,
+    minPointSize: 10,
+    barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
+    radius: [5, 5, 0, 0]
+  }, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
+    dataKey: "valueTwo",
+    content: CustomizedLabel
+  })))), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
+    legendData: legendData
+  })));
+};
+exports.TwoBarCharts = TwoBarCharts;
+var _default = exports.default = TwoBarCharts;
+TwoBarCharts.defaultProps = {
+  title: 'String',
+  barChartData: [{
+    title: 'Food Lion',
+    date: '15.01.24-31.01.24',
+    valueOne: 542366,
+    valueTwo: 542366
+  }, {
+    title: 'Hannaford',
+    date: '15.01.24-31.01.24',
+    valueOne: 699511,
+    valueTwo: 699511
+  }, {
+    title: 'The Giant Company',
+    date: '15.01.24-31.01.24',
+    valueOne: 403092,
+    valueTwo: 403092
+  }, {
+    title: 'Giant Food',
+    date: '15.01.24-31.01.24',
+    valueOne: 396184,
+    valueTwo: 396184
+  }, {
+    title: 'Stop&Shop',
+    date: '15.01.24-31.01.24',
+    valueOne: 415317,
+    valueTwo: 415317
+  }],
+  width: '100%',
+  height: '100%',
+  barSize: 60,
+  barFontSizeValue: '0.6em',
+  barChartColorFirst: '#BD9EFF',
+  barChartColorSecond: '#5865c8',
+  isDollar: true,
+  showDollarSign: true,
+  showLegend: true,
+  legendData: [{
+    title: 'Incremental Sales',
+    iconType: ICON_TYPE_SQUARE,
+    iconColor: '#BD9EFF'
+  }],
+  showReferenceLine: false,
+  referenceLinePoint: 0,
+  referenceLineColor: '#212121',
+  referenceLineDashed: '5'
+};

package/dist/stories/components/TwoBarCharts.style.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  color: #212121;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  min-width: 250px;
+`;
+const Controls = exports.Controls = _styledComponents.default.div`
+  height: 100%;
+  width: 100%;
+  background: white;
+  display: flex;
+  flex-direction: column;
+`;
+const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
+  border-radius: 5px;
+  padding: 8px 12px;
+  background: white;
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+  margin: 0;
+`;
+const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 400;
+  width: fit-content;
+`;
+const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div`
+  color: #212121;
+  font-size: 14px;
+  font-weight: 600;
+`;
+const Title = exports.Title = _styledComponents.default.h5`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 20px;
+  margin: 0 0 30px;
+  @media (max-width: 1536px) {
+    font-size: 16px;
+    margin: 0 0 20px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 14px;
+  }
+`;
+const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
+  font-size: 0.7em;
+`;
+const LabelText = exports.LabelText = _styledComponents.default.tspan`
+  font-size: 0.6em;
+`;

package/dist/stories/components/icons/ArrowDownIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowDownIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ArrowDownIcon = _ref => {
+  let {
+    clicked,
+    width = '8',
+    height = '9'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3.52935 8.81165C3.78967 9.06278 4.21242 9.06278 4.47273 8.81165L7.80476 5.59719C8.06508 5.34606 8.06508 4.93822 7.80476 4.68709C7.54445 4.43596 7.1217 4.43596 6.86138 4.68709L4.66641 6.80663L4.66641 0.642893C4.66641 0.287292 4.36861 -4.08657e-07 4 -4.40881e-07C3.63139 -4.73106e-07 3.33359 0.287292 3.33359 0.642893L3.33359 6.80663L1.13862 4.6891C0.878303 4.43797 0.455551 4.43797 0.195236 4.6891C-0.0650787 4.94023 -0.0650787 5.34807 0.195236 5.5992L3.52727 8.81366L3.52935 8.81165Z",
+    fill: "#F00021"
+  }));
+};
+exports.ArrowDownIcon = ArrowDownIcon;
+var _default = exports.default = ArrowDownIcon;

package/dist/stories/components/icons/ArrowDropDownIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowDropDownIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ArrowDropDownIcon = _ref => {
+  let {
+    clicked,
+    width = "8",
+    height = "9"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 12 7",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M5.60156 6.39844L1.10156 1.89844C0.867188 1.6875 0.867188 1.33594 1.10156 1.10156C1.3125 0.890625 1.66406 0.890625 1.89844 1.10156L6 5.22656L10.1016 1.125C10.3125 0.890625 10.6641 0.890625 10.8984 1.125C11.1094 1.33594 11.1094 1.6875 10.8984 1.89844L6.375 6.39844C6.16406 6.63281 5.8125 6.63281 5.60156 6.39844Z",
+    fill: "#212121"
+  }));
+};
+exports.ArrowDropDownIcon = ArrowDropDownIcon;
+var _default = exports.default = ArrowDropDownIcon;

package/dist/stories/components/icons/ArrowSelectIcon.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowSelectIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ArrowSelectIcon = _ref => {
+  let {
+    // eslint-disable-next-line react/prop-types
+    width = '18',
+    height = '18',
+    color = '#229E38'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 9C15 6.6875 13.75 4.5625 11.75 3.375C9.71875 2.21875 7.25 2.21875 5.25 3.375C3.21875 4.5625 2 6.6875 2 9C2 11.3438 3.21875 13.4688 5.25 14.6562C7.25 15.8125 9.71875 15.8125 11.75 14.6562C13.75 13.4688 15 11.3438 15 9ZM0.5 9C0.5 6.15625 2 3.53125 4.5 2.09375C6.96875 0.65625 10 0.65625 12.5 2.09375C14.9688 3.53125 16.5 6.15625 16.5 9C16.5 11.875 14.9688 14.5 12.5 15.9375C10 17.375 6.96875 17.375 4.5 15.9375C2 14.5 0.5 11.875 0.5 9ZM9.53125 12.2812C9.21875 12.5938 8.75 12.5938 8.46875 12.2812C8.15625 12 8.15625 11.5312 8.46875 11.2188L9.9375 9.75H5.25C4.8125 9.75 4.5 9.4375 4.5 9C4.5 8.59375 4.8125 8.25 5.25 8.25H9.9375L8.46875 6.78125C8.15625 6.5 8.15625 6.03125 8.46875 5.75C8.75 5.4375 9.21875 5.4375 9.53125 5.75L12.2812 8.5C12.5625 8.78125 12.5625 9.25 12.2812 9.53125L9.53125 12.2812Z",
+    fill: color
+  }));
+};
+exports.ArrowSelectIcon = ArrowSelectIcon;
+var _default = exports.default = ArrowSelectIcon;

package/dist/stories/components/icons/ArrowUpIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ArrowUpIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ArrowUpIcon = _ref => {
+  let {
+    clicked,
+    width = '8',
+    height = '9'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 8 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M4.47065 0.188348C4.21033 -0.0627825 3.78758 -0.0627825 3.52727 0.188348L0.195236 3.40281C-0.0650787 3.65394 -0.0650787 4.06178 0.195236 4.31291C0.455551 4.56404 0.878303 4.56404 1.13862 4.31291L3.33359 2.19337V8.35711C3.33359 8.71271 3.63139 9 4 9C4.36861 9 4.66641 8.71271 4.66641 8.35711V2.19337L6.86138 4.3109C7.1217 4.56203 7.54445 4.56203 7.80476 4.3109C8.06508 4.05977 8.06508 3.65193 7.80476 3.4008L4.47273 0.186338L4.47065 0.188348Z",
+    fill: "#5FCC70"
+  }));
+};
+exports.ArrowUpIcon = ArrowUpIcon;
+var _default = exports.default = ArrowUpIcon;

package/dist/stories/components/icons/AttachedIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AttachedIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const AttachedIcon = _ref => {
+  let {
+    width = '14',
+    height = '15',
+    fill = '#229E38'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11.2539 2.74609C10.543 2.03516 9.36719 2.03516 8.65625 2.74609L3.43359 7.99609C2.23047 9.19922 2.23047 11.1406 3.43359 12.3164C4.60938 13.5195 6.55078 13.5195 7.75391 12.3164L11.9102 8.16016C12.1562 7.91406 12.5664 7.91406 12.8125 8.16016C13.0859 8.43359 13.0859 8.84375 12.8125 9.08984L8.68359 13.2461C6.96094 14.9688 4.19922 14.9688 2.50391 13.2461C0.78125 11.5508 0.78125 8.78906 2.50391 7.06641L7.75391 1.81641C8.95703 0.613281 10.9531 0.613281 12.1836 1.81641C13.3867 3.04688 13.3867 5.04297 12.1836 6.24609L7.15234 11.2773C6.27734 12.1523 4.85547 12.0703 4.08984 11.1133C3.43359 10.293 3.51562 9.11719 4.25391 8.37891L8.41016 4.22266C8.65625 3.97656 9.06641 3.97656 9.3125 4.22266C9.58594 4.49609 9.58594 4.90625 9.3125 5.15234L5.18359 9.30859C4.91016 9.58203 4.88281 9.99219 5.12891 10.293C5.40234 10.6211 5.89453 10.6758 6.22266 10.3477L11.2539 5.31641C11.9648 4.60547 11.9648 3.45703 11.2539 2.74609Z",
+    fill: fill
+  }));
+};
+exports.AttachedIcon = AttachedIcon;
+var _default = exports.default = AttachedIcon;

package/dist/stories/components/icons/BellIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BellIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const BellIcon = _ref => {
+  let {
+    width = '8',
+    height = '9',
+    color = '#212121'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 18 21",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8.08569 1.125C8.08569 0.8125 8.39819 0.5 8.71069 0.5C9.06226 0.5 9.37476 0.8125 9.37476 1.125V1.78906C12.4998 2.10156 14.9998 4.75781 14.9998 8V9.17188C14.9998 10.8516 15.6638 12.4922 16.8748 13.7031L16.9919 13.8203C17.3044 14.1328 17.4998 14.5625 17.4998 15.0312C17.4998 16.0078 16.7185 16.75 15.7419 16.75H1.71851C0.741943 16.75 -0.000244141 16.0078 -0.000244141 15.0312C-0.000244141 14.5625 0.156006 14.1328 0.468506 13.8203L0.585693 13.7031C1.79663 12.4922 2.49976 10.8516 2.49976 9.17188V8C2.49976 4.75781 4.96069 2.10156 8.12476 1.78906L8.08569 1.125ZM8.71069 3C5.97632 3 3.71069 5.26562 3.71069 8V9.17188C3.71069 11.2031 2.92944 13.1562 1.48413 14.6016L1.36694 14.6797C1.28882 14.7969 1.21069 14.9141 1.21069 15.0312C1.21069 15.3047 1.44507 15.5 1.71851 15.5H15.7419C16.0154 15.5 16.2498 15.3047 16.2498 15.0312C16.2498 14.9141 16.1716 14.7969 16.0935 14.6797L15.9763 14.6016C14.531 13.1562 13.7498 11.2031 13.7498 9.17188V8C13.7498 5.26562 11.4841 3 8.71069 3ZM8.71069 19.25C9.25757 19.25 9.72632 18.9375 9.92163 18.4297C10.0388 18.1172 10.3904 17.9219 10.7029 18.0391C11.0154 18.1562 11.2107 18.5078 11.0935 18.8594C10.7419 19.8359 9.80444 20.5 8.71069 20.5C7.65601 20.5 6.71851 19.8359 6.36694 18.8594C6.24976 18.5078 6.44507 18.1562 6.75757 18.0391C7.07007 17.9219 7.42163 18.1172 7.53882 18.4297C7.73413 18.9375 8.20288 19.25 8.71069 19.25Z",
+    fill: color
+  }));
+};
+exports.BellIcon = BellIcon;
+var _default = exports.default = BellIcon;

package/dist/stories/components/icons/ButtonArrowRight.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ButtonArrowRight = void 0;
+var _react = _interopRequireDefault(require("react"));
+const ButtonArrowRight = _ref => {
+  let {
+    width = '16',
+    height = '17'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 16 17",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
+    id: "icon",
+    d: "M14.5 8.48438C14.5 6.17188 13.25 4.04688 11.25 2.85938C9.21875 1.70312 6.75 1.70312 4.75 2.85938C2.71875 4.04688 1.5 6.17188 1.5 8.48438C1.5 10.8282 2.71875 12.9532 4.75 14.1406C6.75 15.2969 9.21875 15.2969 11.25 14.1406C13.25 12.9532 14.5 10.8282 14.5 8.48438ZM0 8.48438C0 5.64062 1.5 3.01562 4 1.57812C6.46875 0.140625 9.5 0.140625 12 1.57812C14.4688 3.01562 16 5.64062 16 8.48438C16 11.3594 14.4688 13.9844 12 15.4219C9.5 16.8594 6.46875 16.8594 4 15.4219C1.5 13.9844 0 11.3594 0 8.48438ZM9.03125 11.7656C8.71875 12.0782 8.25 12.0782 7.96875 11.7656C7.65625 11.4844 7.65625 11.0156 7.96875 10.7032L9.4375 9.23438H4.75C4.3125 9.23438 4 8.92188 4 8.48438C4 8.07812 4.3125 7.73438 4.75 7.73438H9.4375L7.96875 6.26562C7.65625 5.98438 7.65625 5.51562 7.96875 5.23438C8.25 4.92188 8.71875 4.92188 9.03125 5.23438L11.7812 7.98438C12.0625 8.26562 12.0625 8.73438 11.7812 9.01562L9.03125 11.7656Z",
+    fill: "white"
+  })));
+};
+exports.ButtonArrowRight = ButtonArrowRight;
+var _default = exports.default = ButtonArrowRight;

package/dist/stories/components/icons/Calendar.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calendar = void 0;
+var _react = _interopRequireDefault(require("react"));
+const Calendar = () => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "11",
+  height: "12",
+  viewBox: "0 0 11 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H0.75V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V4.5ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+  fill: "#568202"
+}));
+exports.Calendar = Calendar;
+var _default = exports.default = Calendar;

package/dist/stories/components/icons/CalendarIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CalendarIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+const CalendarIcon = _ref => {
+  let {
+    clicked,
+    width = "14",
+    height = "14"
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M2.625 0C2.8125 0 3 0.1875 3 0.375V1.5H7.5V0.375C7.5 0.1875 7.66406 0 7.875 0C8.0625 0 8.25 0.1875 8.25 0.375V1.5H9C9.82031 1.5 10.5 2.17969 10.5 3V3.75V4.5V10.5C10.5 11.3438 9.82031 12 9 12H1.5C0.65625 12 0 11.3438 0 10.5V4.5V3.75V3C0 2.17969 0.65625 1.5 1.5 1.5H2.25V0.375C2.25 0.1875 2.41406 0 2.625 0ZM9.75 4.5H7.3125V6.1875H9.75V4.5ZM9.75 6.9375H7.3125V8.8125H9.75V6.9375ZM9.75 9.5625H7.3125V11.25H9C9.39844 11.25 9.75 10.9219 9.75 10.5V9.5625ZM6.5625 8.8125V6.9375H3.9375V8.8125H6.5625ZM3.9375 9.5625V11.25H6.5625V9.5625H3.9375ZM3.1875 8.8125V6.9375H0.75V8.8125H3.1875ZM0.75 9.5625V10.5C0.75 10.9219 1.07812 11.25 1.5 11.25H3.1875V9.5625H0.75ZM0.75 6.1875H3.1875V4.5H0.75V6.1875ZM3.9375 6.1875H6.5625V4.5H3.9375V6.1875ZM9 2.25H1.5C1.07812 2.25 0.75 2.60156 0.75 3V3.75H9.75V3C9.75 2.60156 9.39844 2.25 9 2.25Z",
+    fill: "#212121"
+  }));
+};
+exports.CalendarIcon = CalendarIcon;
+var _default = exports.default = CalendarIcon;