sag_components 1.0.490 → 1.0.492

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

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};

package/dist/stories/components/AttachedFile.js

@@ -22,7 +22,7 @@ const AttachedFile = props => {
   const handleFileChange = event => {
     const files = Array.from(event.target.files);
     setSelectedFiles([...selectedFiles, ...files]);
-    onSelectFile([...selectedFiles, ...files]);
+    onSelectFile(event);
   };
   const handleRemoveFile = fileToRemove => {
     setSelectedFiles(selectedFiles.filter(file => file !== fileToRemove));
@@ -40,7 +40,7 @@ const AttachedFile = props => {
   })), /*#__PURE__*/_react.default.createElement("input", {
     type: "file",
     id: "fileInput",
-    onChange: e => handleFileChange(e),
+    onChange: handleFileChange,
     multiple: true,
     style: {
       display: 'none'

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInput = void 0;
+var _reactHookForm = require("react-hook-form");
+var _Input = _interopRequireDefault(require("../Input"));
+var _PopupFieldsRules = require("./PopupFieldsRules");
+const FormInput = _ref => {
+  let {
+    control,
+    name,
+    ...props
+  } = _ref;
+  const {
+    field,
+    fieldState: {
+      invalid,
+      isTouched,
+      isDirty
+    },
+    formState: {
+      touchedFields,
+      dirtyFields
+    }
+  } = (0, _reactHookForm.useController)({
+    name,
+    control,
+    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
+  });
+  return /*#__PURE__*/React.createElement(_Input.default, Object.assign({}, props, {
+    onChange: field.onChange,
+    value: field.value,
+    name: field.name,
+    inputRef: field.ref
+  }));
+};
+exports.FormInput = FormInput;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormSelect = void 0;
+var _reactHookForm = require("react-hook-form");
+var _Select = _interopRequireDefault(require("../Select"));
+var _react = require("react");
+var _PopupFieldsRules = require("./PopupFieldsRules");
+const FormSelect = _ref => {
+  let {
+    control,
+    name,
+    ...props
+  } = _ref;
+  const {
+    field,
+    fieldState: {
+      invalid,
+      isTouched,
+      isDirty
+    },
+    formState: {
+      touchedFields,
+      dirtyFields
+    }
+  } = (0, _reactHookForm.useController)({
+    name,
+    control,
+    rules: (0, _PopupFieldsRules.getPopupFieldsRules)(name)
+  });
+  const testChange = event => {
+    console.log("event", event);
+  };
+  return /*#__PURE__*/React.createElement(_Select.default, Object.assign({}, props, {
+    onChange: field.onChange,
+    value: field.value,
+    name: field.name,
+    inputRef: field.ref
+  }));
+};
+exports.FormSelect = FormSelect;

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

@@ -1,27 +1,47 @@
 "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 = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _ComboBoxArrowDownIcon = require("../icons/ComboBoxArrowDownIcon");
-var _ComboBoxArrowUpIcon = require("../icons/ComboBoxArrowUpIcon");
+var _MenuItemClosedIcon = require("../icons/MenuItemClosedIcon");
+var _MenuItemOpenIcon = require("../icons/MenuItemOpenIcon");
+var _PopupContent = _interopRequireDefault(require("./PopupContent"));
+var _reactHookForm = require("react-hook-form");
+var _SagButton = _interopRequireDefault(require("../../components/SagButton"));
 var _Popup = require("./Popup.style");
+var _typescript = require("typescript");
 const Popup = props => {
   const {
     title,
-    accordionItemsData,
+    popupItemsData,
     isPopupOpen,
     width,
     height,
-    accordionItemBackgroundColor,
-    onSaveClick,
-    onCancelClick,
-    onOverlayClick
+    borderColor,
+    subtitleTextColor,
+    onOverlayClick,
+    onChange
   } = props;
   const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
+  const useFormMethods = (0, _reactHookForm.useForm)({
+    mode: "onChange"
+  });
+  const divRef = (0, _react.useRef)(null);
+  const [divHeight, setDivHeight] = (0, _react.useState)(0);
+  (0, _react.useEffect)(() => {
+    if (divRef.current) {
+      const {
+        top,
+        bottom
+      } = divRef.current.getBoundingClientRect();
+      const height = bottom - top;
+      setDivHeight(height);
+    }
+  }, [height]);
   (0, _react.useEffect)(() => {
     setIsPopupOpen(isPopupOpen);
   }, [isPopupOpen]);
@@ -35,64 +55,108 @@ const Popup = props => {
   const AccordionItem = _ref => {
     let {
       title,
-      content
+      rowsData
     } = _ref;
     const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
     const handleToggle = () => {
       setIsItemOpen(!IsItemOpen);
     };
-    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, {
+      id: "AccordionItemMainContainer",
+      borderColor: borderColor
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
       id: "AccordionItemContainer",
-      accordionItemBackgroundColor: accordionItemBackgroundColor,
       onClick: handleToggle,
       style: {
-        cursor: 'pointer'
+        cursor: "pointer"
       }
-    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
-      id: "AccordionItemTitle"
-    }, title), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
       id: "AccordionItemIconContainer"
-    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
+    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, null) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, null)), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
+      id: "AccordionItemTitle",
+      subtitleTextColor: subtitleTextColor
+    }, title)), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
       id: "AccordionContentContainer"
-    }, content));
+    }, /*#__PURE__*/_react.default.createElement(_PopupContent.default, {
+      id: "PopupContent",
+      width: "100%",
+      height: "100%",
+      rowsData: rowsData,
+      borderColor: borderColor,
+      onClick: () => {},
+      onChange: onChange
+    })));
   };
   const Accordion = _ref2 => {
     let {
       items
     } = _ref2;
     return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
-      id: "AccordionContainer"
-    }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(AccordionItem, {
-      key: index,
-      title: item.title,
-      content: item.content
-    })));
+      id: "AccordionContainer",
+      maxHeight: divHeight ? (divHeight - 190).toString().concat("", "px") : null
+    }, items.map((item, index) => {
+      var _item$rowsData;
+      return /*#__PURE__*/_react.default.createElement(AccordionItem, {
+        key: index,
+        title: item.title,
+        rowsData: ((_item$rowsData = item.rowsData) === null || _item$rowsData === void 0 ? void 0 : _item$rowsData.length) > 0 ? item.rowsData : []
+      });
+    }));
   };
   return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
     id: "MainContainer"
-  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
+  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_reactHookForm.FormProvider, useFormMethods, /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: useFormMethods.handleSubmit(submittedValues => console.log("submittedValues", submittedValues))
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
     id: "ModalOverlay",
     className: "modal-overlay",
     onClick: e => closePopup(e)
   }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
     id: "ModalContent",
+    ref: divRef,
     className: "modal-content",
     height: height,
     width: width,
     onClick: e => e.stopPropagation()
-  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
+  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, {
+    id: "TitleContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
     id: "Close",
     className: "close",
     onClick: e => closePopup(e)
   }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
-    items: accordionItemsData
-  }))));
+    items: popupItemsData
+  }), /*#__PURE__*/_react.default.createElement(_Popup.ButtonsContainer, {
+    id: "ButtonsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_Popup.InputCommit, {
+    value: "Save",
+    type: "submit",
+    style: {
+      backgroundColor: "#BCC6DA",
+      color: "white",
+      transition: "background-color 0.3s, color 0.3s"
+    },
+    borderColor: borderColor
+  }), /*#__PURE__*/_react.default.createElement(_SagButton.default, {
+    textColor: "#212121",
+    backgroundColor: "#ffffff",
+    borderColor: borderColor,
+    onClickColor: "#B1B1B1",
+    radius: "8px",
+    text: "Cancel",
+    height: "40px",
+    width: "100px",
+    fontSize: "14px",
+    fontWeight: "500",
+    disabled: false,
+    onClick: e => closePopup(e)
+  })))))));
 };
 var _default = exports.default = Popup;
 Popup.defaultProps = {
   isPopupOpen: true,
-  width: '800px',
-  height: '600px',
+  width: "800px",
+  height: "600px",
   onSaveClick: () => {},
   onCancelClick: () => {},
   onOverlayClick: () => {}

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

@@ -4,19 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.Close = exports.AccordionItemTitle = exports.AccordionItemMainContainer = exports.AccordionItemIconContainer = exports.AccordionItemContainer = exports.AccordionContentContainer = exports.AccordionContainer = void 0;
+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;
+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: 9999;\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: 20px;\n  border: 1px solid #888;\n  height: ", ";\n  width: ", ";\n  border-radius: 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
+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;\n"])));
-const Title = exports.Title = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 18px;\n  margin: 0;\n"])));
-const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
-const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["  \n  margin: 0;\n"])));
-const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n  display:flex;  \n  justify-content: space-between;\n  align-items: center;\n  margin: 10px;\n  background-color: ", ";\n"])), props => props.accordionItemBackgroundColor);
-const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 25px;\n  margin: 10px; \n"])));
-const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin: 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: 10px 10px 10px 30px; \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));