sag_components 1.0.921 → 1.0.923

package/dist/stories/components/CampaignTool/MultipleCard.style.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardsWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
 /* eslint-disable import/prefer-default-export */
-const CardsWrapper = exports.CardsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: \"Poppins\", sans-serif;\n    width: ", ";\n    height: ", ";\n"])), props => props.width, props => props.height);
+
+const CardsWrapper = exports.CardsWrapper = _styledComponents.default.div`
+    font-family: "Poppins", sans-serif;
+    width: ${props => props.width};
+    height: ${props => props.height};
+`;

package/dist/stories/components/CampaignTool/PageFilterBar.style.js

@@ -5,8 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Headline = exports.BarContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2;
-const BarContainer = exports.BarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  position: relative;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: white;\n"])));
-const Headline = exports.Headline = _styledComponents.default.h1(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 500;\n  margin: 0;\n"])));
+const BarContainer = exports.BarContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  position: relative;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+`;
+const Headline = exports.Headline = _styledComponents.default.h1`
+  font-size: 20px;
+  font-weight: 500;
+  margin: 0;
+`;

package/dist/stories/components/CampaignTool/Popup.style.js

@@ -5,20 +5,118 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.InputCommit = exports.Close = exports.ButtonsContainer = exports.AccordionItemTitle = exports.AccordionItemMainContainer = exports.AccordionItemIconContainer = exports.AccordionItemContainer = exports.AccordionContentContainer = exports.AccordionContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  z-index: 100;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 30px 20px 60px 40px;\n  border: 1px solid #888;\n  border-radius: 10px;\n  height: ", ";\n  width: ", ";\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
-const Close = exports.Close = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #aaa;\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  cursor: pointer;\n\n  .close:hover,\n  .close:focus {\n    color: black;\n    text-decoration: none;\n  }\n"])));
-const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 0 20px 0;\n"])));
-const Title = exports.Title = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 30px;\n  margin: 0;\n"])));
-const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  overflow-y: auto;\n  padding: 0 20px 0 0;\n  max-height: ", ";\n"])), props => props.maxHeight);
-const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 20px 0;\n  border: ", ";\n  border-radius: 10px;\n"])), props => "1px solid ".concat(props.borderColor));
-const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  margin: 10px;\n"])));
-const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 25px;\n  margin: 0 10px;\n  color: ", ";\n"])), props => props.subtitleTextColor);
-const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 0 0 10px;\n"])));
-const AccordionContentContainer = exports.AccordionContentContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 0;\n"])));
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  //align-items: flex-end;\n  flex-direction: row-reverse;\n  //flex-wrap: nowrap;\n  //flex-direction: column;\n  padding: 20px 20px 0 0;\n  gap: 20px;\n  \n"])));
-const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;  \n  border:  ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n  height: 40px;\n  width: 100px;\n  cursor: pointer;\n   \n   &:hover {\n    background-Color: #f1f1f1;\n  } \n \n"])), props => "1px solid ".concat(props.borderColor));
+const MainContainer = exports.MainContainer = _styledComponents.default.div``;
+const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalContent = exports.ModalContent = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  background-color: #fefefe;
+  padding: 30px 20px 60px 40px;
+  border: 1px solid #888;
+  border-radius: 10px;
+  height: ${props => props.height};
+  width: ${props => props.width};
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+`;
+const Close = exports.Close = _styledComponents.default.span`
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+  }
+`;
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 20px 0;
+`;
+const Title = exports.Title = _styledComponents.default.p`
+  font-weight: 600;
+  font-size: 30px;
+  margin: 0;
+`;
+const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 0 20px 0 0;
+  max-height: ${props => props.maxHeight};
+`;
+const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div`
+  margin: 0 0 20px 0;
+  border: ${props => `1px solid ${props.borderColor}`};
+  border-radius: 10px;
+`;
+const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px;
+`;
+const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3`
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 25px;
+  margin: 0 10px;
+  color: ${props => props.subtitleTextColor};
+`;
+const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3`
+  margin: 0 0 0 10px;
+`;
+const AccordionContentContainer = exports.AccordionContentContainer = _styledComponents.default.div`
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0;
+`;
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div`
+  display: flex;
+  //align-items: flex-end;
+  flex-direction: row-reverse;
+  //flex-wrap: nowrap;
+  //flex-direction: column;
+  padding: 20px 20px 0 0;
+  gap: 20px;
+  
+`;
+const InputCommit = exports.InputCommit = _styledComponents.default.input`
+  font-family: "Poppins", sans-serif;  
+  border:  ${props => `1px solid ${props.borderColor}`};
+  border-radius: 8px;
+  font-weight: 400;
+  font-size: 14px;
+  @media (max-width: 1536px) {
+    font-size: 12px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+  height: 40px;
+  width: 100px;
+  cursor: pointer;
+   
+   &:hover {
+    background-Color: #f1f1f1;
+  } 
+ 
+`;

package/dist/stories/components/CampaignTool/PopupContent.style.js

@@ -5,17 +5,70 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PanelContainer = exports.MainContainer = exports.FieldsContainer = exports.FieldTitle = exports.FieldContainer = exports.DatePickerContainer = exports.AllFieldsContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-size: 1rem;\n  border-radius: 12px;\n  width: ", ";\n  height: ", ";\n"])), props => {
+const MainContainer = exports.MainContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-size: 1rem;
+  border-radius: 12px;
+  width: ${props => {
   return props.width;
-}, props => {
+}};
+  height: ${props => {
   return props.height;
-});
-const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: #ffffff;\n  padding: 0 10px ;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 19px;\n  white-space: pre-wrap;\n  overflow: hidden;\n  width: 100%;\n"])));
-const FieldTitle = exports.FieldTitle = _styledComponents.default.h4(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 14px;\n  margin: 5px;\n  @media (max-width: 1536px) {\n    font-size: 11px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  white-space: wrap;\n  padding: 10px;\n  gap: 20px;\n  width: 100%;\n \n"])));
-const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n  width: 100%;\n  margin: 0;\n \n"])));
-const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));
+}};
+`;
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div`
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 0 10px ;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  white-space: pre-wrap;
+  overflow: hidden;
+  width: 100%;
+`;
+const FieldTitle = exports.FieldTitle = _styledComponents.default.h4`
+  font-weight: 600;
+  font-size: 14px;
+  margin: 5px;
+  @media (max-width: 1536px) {
+    font-size: 11px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  white-space: wrap;
+  padding: 10px;
+  gap: 20px;
+  width: 100%;
+ 
+`;
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div` 
+  width: 100%;
+  margin: 0;
+ 
+`;
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div`
+ 
+`;

package/dist/stories/components/CampaignTool/Table.js

@@ -73,10 +73,10 @@ const Table = props => {
   };
   const handleMouseMove = e => {
     if (resizing) {
-      const th = document.querySelector("th[data-column=\"".concat(resizeColumn, "\"]"));
+      const th = document.querySelector(`th[data-column="${resizeColumn}"]`);
       const dx = e.clientX - m_pos.current;
       m_pos.current = e.clientX;
-      th.style.width = "".concat(parseInt(getComputedStyle(th, '').width) + dx, "px");
+      th.style.width = `${parseInt(getComputedStyle(th, '').width) + dx}px`;
     }
   };
   const handleMouseUp = () => {

package/dist/stories/components/CampaignTool/Table.style.js

@@ -5,14 +5,84 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /* eslint-disable import/prefer-default-export */
-const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  background-color: white;\n"])));
-const TableTag = exports.TableTag = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: ", ";\n  height: ", ";\n  margin-bottom: 15px;\n    th,\n    td {\n        position: relative;\n        font-weight: 400;\n        border: 1px solid #ddd;\n        padding: 8px;\n    }\n"])), props => props.width, props => props.height);
-const Thead = exports.Thead = _styledComponents.default.thead(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: #000000;\n    tr {\n        > th {\n            position: relative;\n            &.actions-th,\n            &:last-of-type {\n                > div {\n                    display: none;\n                }\n            }\n            \n            &.actions-th {\n                width: 22px;\n            }\n        }\n    }\n"])));
-const Tbody = exports.Tbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    tr {\n        &:nth-child(even) {\n            background-color: #f2f2f2;\n        }\n        &:hover {\n            background-color: #ddd;\n        }\n    }\n"])));
-const Dragger = exports.Dragger = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 5px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    cursor: col-resize;\n"])));
-const Pagination = exports.Pagination = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    gap: 5px;\n"])));
-const PaginationButton = exports.PaginationButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    padding: 8px 12px;\n    background-color: #ffffff;\n    border: 1px solid #ccc;\n    text-decoration: none;\n    color: #333;\n    border-radius: 4px;\n    cursor: pointer;\n    &:hover, &:focus {\n      background-color: #e0e0e0;\n    }\n    &.active {\n        background-color: #aaa;\n    }\n"])));
+
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  background-color: white;
+`;
+const TableTag = exports.TableTag = _styledComponents.default.table`
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  margin-bottom: 15px;
+    th,
+    td {
+        position: relative;
+        font-weight: 400;
+        border: 1px solid #ddd;
+        padding: 8px;
+    }
+`;
+const Thead = exports.Thead = _styledComponents.default.thead`
+    color: white;
+    background-color: #000000;
+    tr {
+        > th {
+            position: relative;
+            &.actions-th,
+            &:last-of-type {
+                > div {
+                    display: none;
+                }
+            }
+            
+            &.actions-th {
+                width: 22px;
+            }
+        }
+    }
+`;
+const Tbody = exports.Tbody = _styledComponents.default.tbody`
+    tr {
+        &:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+        &:hover {
+            background-color: #ddd;
+        }
+    }
+`;
+const Dragger = exports.Dragger = _styledComponents.default.div`
+    width: 5px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: col-resize;
+`;
+const Pagination = exports.Pagination = _styledComponents.default.ul`
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 5px;
+`;
+const PaginationButton = exports.PaginationButton = _styledComponents.default.button`
+    display: inline-block;
+    padding: 8px 12px;
+    background-color: #ffffff;
+    border: 1px solid #ccc;
+    text-decoration: none;
+    color: #333;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover, &:focus {
+      background-color: #e0e0e0;
+    }
+    &.active {
+        background-color: #aaa;
+    }
+`;

package/dist/stories/components/Card/Card.js

@@ -0,0 +1,72 @@
+"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 _Card = require("./Card.style");
+const Card = props => {
+  const {
+    data,
+    cardTitle,
+    buttonText,
+    onCardButtonClick,
+    width,
+    height
+  } = props;
+  const onCardButtonClickHandle = e => {
+    onCardButtonClick(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Card.CardFrame, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Card.CardDetails, null, /*#__PURE__*/_react.default.createElement(_Card.CardTitle, null, cardTitle), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "Lorem ipsum minima "), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "commodi optio molesti"), /*#__PURE__*/_react.default.createElement(_Card.CardDetailText, null, "optio molesti")), /*#__PURE__*/_react.default.createElement(_Card.SegmentsContainer, {
+    rows: data.lenght
+  }, data.map(segment =>
+  /*#__PURE__*/
+  // TODO: make icons
+  _react.default.createElement(_Card.Segment, null, segment.value, /*#__PURE__*/_react.default.createElement("br", null), segment.label))), /*#__PURE__*/_react.default.createElement(_Card.ButtonWrap, null, /*#__PURE__*/_react.default.createElement(_Card.Button, {
+    onClick: e => onCardButtonClickHandle(e)
+  }, buttonText)));
+};
+var _default = exports.default = Card;
+Card.defaultProps = {
+  data: [{
+    key: '1',
+    icon: 'cart',
+    label: 'Products',
+    value: 335
+  }, {
+    key: '2',
+    icon: 'gift',
+    label: 'Brands',
+    value: 161
+  }, {
+    key: '3',
+    icon: 'label',
+    label: 'Offers',
+    value: 223
+  }, {
+    key: '4',
+    icon: 'truck',
+    label: 'Suppliers',
+    value: 246
+  }, {
+    key: '5',
+    icon: '',
+    label: 'Total budget',
+    value: 45
+  }, {
+    key: '6',
+    icon: '',
+    label: 'Self-funded budget',
+    value: 146
+  }],
+  cardTitle: 'March 2024',
+  buttonText: 'Campaign Details',
+  onCardButtonClick: () => {},
+  width: '100%',
+  height: 'auto'
+};

package/dist/stories/components/Card/Card.stories.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Card = _interopRequireDefault(require("./Card"));
+const data = [{
+  key: '1',
+  icon: 'cart',
+  label: 'Products',
+  value: 335
+}, {
+  key: '2',
+  icon: 'gift',
+  label: 'Brands',
+  value: 161
+}, {
+  key: '3',
+  icon: 'label',
+  label: 'Offers',
+  value: 223
+}, {
+  key: '4',
+  icon: 'truck',
+  label: 'Suppliers',
+  value: 246
+}, {
+  key: '5',
+  icon: '',
+  label: 'Total budget',
+  value: 45
+}, {
+  key: '6',
+  icon: '',
+  label: 'Self-funded budget',
+  value: 146
+}];
+var _default = exports.default = {
+  title: 'Sag Campaign Tool/Card',
+  component: _Card.default,
+  tags: ['autodocs'],
+  argTypes: {
+    cardTitle: {
+      name: 'cardTitle',
+      control: {
+        type: 'text'
+      },
+      description: 'Card title'
+    },
+    buttonText: {
+      name: 'buttonText',
+      control: {
+        type: 'text'
+      },
+      description: 'Button text'
+    },
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCardButtonClick: {
+      name: 'Button event',
+      action: 'onClick',
+      description: 'Click on a side big button'
+    }
+
+    // showPagination: {
+    //   name: 'Show Pagination',
+    //   control: { type: 'boolean' },
+    //   description: 'hide/show pagination',
+    //   defaultValue: true,
+    // },
+  }
+};
+const SingleCard = exports.SingleCard = {
+  args: {
+    data
+  }
+};

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentsContainer = exports.Segment = exports.CardTitle = exports.CardFrame = exports.CardDetails = exports.CardDetailText = exports.ButtonWrap = exports.Button = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const CardFrame = exports.CardFrame = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: \"Poppins\", sans-serif;\n    background-color: white;\n    border: 1px solid gray;\n    border-left: 5px solid #6e9eed;\n    margin-bottom: 10px;\n    display: flex;\n    justify-content: space-between;\n    align-items: stretch;\n    width: ", ";\n    height: ", ";\n"])), props => props.width, props => props.height);
+const CardDetails = exports.CardDetails = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 16px 20px;\n"])));
+const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 22px;\n    margin: 0;\n"])));
+const CardDetailText = exports.CardDetailText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    font-size: 12px;\n"])));
+const SegmentsContainer = exports.SegmentsContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: grid;\n    flex-grow: 1;\n    gap: 20px;\n    flex-wrap: wrap;\n    padding: 16px;\n    grid-template-rows: repeat(2, 1fr);\n    grid-template-columns: repeat(3, 1fr);\n"])));
+const Segment = exports.Segment = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 0px;\n    display: flex;\n    gap: 8px;\n    font-size: 12px;\n    border: 1px solid gray;\n    padding: 8px;\n"])));
+const ButtonWrap = exports.ButtonWrap = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    align-items: center;\n    padding: 30px;\n    background-color: bisque;\n"])));
+const Button = exports.Button = _styledComponents.default.button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    font-size: 20px;\n    color: white;\n    background-color: gray;\n    border: none;\n    padding: 8px 16px;\n    cursor: pointer;\n    &:hover, &:focus {\n        background-color: rebeccapurple;\n    }\n"])));

package/dist/stories/components/CheckBox/CheckBox.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CheckBox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon");
+var _CheckBox = require("./CheckBox.style");
+/* CheckBox */
+const CheckBox = _ref => {
+  let {
+    label,
+    checked = false,
+    disabled = false,
+    width = '100px',
+    height = '14px',
+    iconSize = '14px',
+    fontSize = '14px',
+    colorChecked = '#1B30AA',
+    colorUnchecked = '#212121',
+    colorDisabled = '#D0D0D0',
+    onClick,
+    ...props
+  } = _ref;
+  const [checkedState, setCheckedState] = (0, _react.useState)(checked);
+  (0, _react.useEffect)(() => {
+    setCheckedState(checked);
+  }, [checked]);
+  return /*#__PURE__*/_react.default.createElement(_CheckBox.ControlsContainer, {
+    id: "ControlsContainer",
+    fontSize: fontSize,
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_CheckBox.Controls, {
+    id: "Controls"
+  }, checkedState ? /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
+    id: "CheckBoxIconContainer",
+    disabled: disabled,
+    onClick: () => {
+      if (!disabled) {
+        setCheckedState(false);
+        onClick({
+          label,
+          checked: false
+        });
+      }
+    }
+  }, ' ', /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: disabled ? colorDisabled : colorChecked
+  })) : /*#__PURE__*/_react.default.createElement(_CheckBox.CheckBoxIconContainer, {
+    id: "CheckBoxIconContainer",
+    disabled: disabled,
+    onClick: () => {
+      if (!disabled) {
+        onClick({
+          label,
+          checked: true
+        });
+        setCheckedState(true);
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: disabled ? colorDisabled : colorUnchecked
+  })), /*#__PURE__*/_react.default.createElement(_CheckBox.Label, {
+    id: "Label"
+  }, label)));
+};
+exports.CheckBox = CheckBox;
+var _default = exports.default = CheckBox;