@3sc/common-component 0.0.2 → 0.0.4

package/dist/components/alert/style.scss

@@ -3,8 +3,16 @@
   .title {
     color: $secondary-color;
     font-family: Montserrat, sans-serif;
-    font-size: 1.2rem;
+    font-size: 1.6rem;
     font-weight: 600;
+    width: 95%;
+    line-height: 1.2;
+  }
+
+  .sub-title {
+    color: $primary-color;
+    font-weight: 500;
+    margin-top: 0.5rem;
   }
 
   .dialog-action {
@@ -13,10 +21,146 @@
     justify-content: space-between;
 
     .view-all {
-      color: #1d1d1b;
+      color: $secondary-color;
       font-family: Montserrat, sans-serif;
       font-weight: 500;
       text-transform: initial;
+      font-size: 1.2rem;
+    }
+  }
+
+  .card {
+    &:not(:last-child) {
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      padding-bottom: 0.5rem;
+    }
+    padding: 0.5rem 0;
+
+    .badge {
+      margin-top: 0.6rem;
+    }
+
+    .title-card {
+      color: $secondary-color;
+      font-family: Montserrat, sans-serif;
+      font-size: 1rem;
+      font-weight: 600;
+      max-height: 2.625rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+
+    .sub-title {
+      font-size: 1rem;
+      color: $light-grey;
+      font-family: Montserrat, sans-serif;
+      font-weight: 600;
+      text-align: right;
+      margin: 0.2rem 0;
+    }
+
+    .read {
+      font-weight: 400;
+    }
+  }
+}
+
+.alert-dialog-main {
+  .MuiPaper-root {
+    width: 35rem;
+  }
+
+  .no-record {
+    font-family: Montserrat, sans-serif;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: initial;
+    color: $secondary-color;
+    text-align: center;
+  }
+}
+
+.alert-dialog {
+  .MuiPaper-root {
+    width: 70rem;
+  }
+
+  .no-record {
+    font-family: Montserrat, sans-serif;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-transform: initial;
+    color: $secondary-color;
+    text-align: center;
+  }
+
+  .sticky-input-select {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1;
+    position: sticky;
+    background: #fff;
+    z-index: 1;
+    width: 100%;
+    top: 0;
+    height: 5rem;
+  }
+}
+
+.action-show-all-dialog {
+  .view-all {
+    font-family: Montserrat, sans-serif;
+    font-weight: 500;
+    text-transform: initial;
+    font-size: 1.2rem;
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+
+  tr {
+    th {
+      span {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        cursor: pointer;
+      }
     }
   }
+
+  th,
+  td {
+    border: 0.125rem solid $secondary-color;
+    font-family: Montserrat, sans-serif;
+  }
+
+  th {
+    word-break: break-word;
+    font-weight: 600;
+    font-size: 1.3rem;
+    line-height: 1.5rem;
+    color: $secondary-color;
+    background: $table-header;
+    padding: 0.6rem 1.3125rem;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  td {
+    word-break: break-word;
+    color: $table-td-color;
+    font-size: 1.1rem;
+    line-height: 1.25rem;
+    padding: 0.6rem 1.3125rem;
+  }
 }

package/dist/components/alert/table-detail.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = _interopRequireDefault(require("react"));
+var _Constant = require("../../utils/Constant");
+var _sortIcon = _interopRequireDefault(require("../sort-icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TableDetail = _ref => {
+  var _Object$entries;
+  let {
+    data,
+    handleSort,
+    sortDir,
+    sortKey
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("table", {
+    className: "table"
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, (_Object$entries = Object.entries(_Constant.detailsHeadObj)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.map((_ref2, index) => {
+    let [col, colKey] = _ref2;
+    return /*#__PURE__*/_react.default.createElement("th", {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      onClick: () => handleSort(colKey)
+    }, col, /*#__PURE__*/_react.default.createElement(_sortIcon.default, {
+      column: colKey,
+      sortKey: sortKey,
+      sortDir: sortDir
+    })));
+  }))), /*#__PURE__*/_react.default.createElement("tbody", null, data.map((item, index) => /*#__PURE__*/_react.default.createElement("tr", {
+    key: index
+  }, /*#__PURE__*/_react.default.createElement("td", null, item.sku_name), /*#__PURE__*/_react.default.createElement("td", null, item.node), /*#__PURE__*/_react.default.createElement("td", null, item.channel_name)))));
+};
+var _default = exports.default = TableDetail;

package/dist/components/input-field/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+const _excluded = ["adornmentIcon"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const CustomizeTextField = (0, _styles.styled)(_material.TextField)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    "& .MuiInputBase-root": {
+      height: "3.52rem"
+    },
+    "& .MuiFormLabel-root": {
+      color: "".concat(theme.palette.input.border, " !important"),
+      fontSize: "1rem",
+      marginTop: "0.4rem"
+    },
+    "& label.Mui-focused": {
+      color: theme.palette.input.color
+    },
+    "& .MuiInput-underline:after": {
+      borderBottomColor: theme.palette.input.border,
+      borderBottomWidth: "0.1rem"
+    },
+    "& .MuiOutlinedInput-root": {
+      "& fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      },
+      "&:hover fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: theme.palette.input.border,
+        borderWidth: "0.1rem"
+      }
+    }
+  };
+});
+const InputField = _ref2 => {
+  let {
+      adornmentIcon
+    } = _ref2,
+    otherProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/_react.default.createElement(CustomizeTextField, _extends({}, otherProps, {
+    InputProps: _objectSpread({}, adornmentIcon ? adornmentIcon : {})
+  }));
+};
+var _default = exports.default = InputField;

package/dist/components/my-dialog.js

@@ -9,8 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _styles = require("@mui/material/styles");
 var _Refresh = _interopRequireDefault(require("@mui/icons-material/Refresh"));
+var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _colors = require("@mui/material/colors");
-const _excluded = ["title", "children", "onRefresh", "loading", "handleShowAll", "handleMarkAllAsRead", "isMarkAllAsRead"];
+var _Constant = require("../utils/Constant");
+const _excluded = ["title", "subTitle", "children", "onRefresh", "onClose", "loading", "handleShowAll", "handleMarkAllAsRead", "isMarkAllAsRead", "width", "headerIconType", "isDialogActionShow", "className"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -21,7 +23,6 @@ const CustomizeDialog = (0, _styles.styled)(_material.Dialog)(_ref => {
   } = _ref;
   return {
     "& .MuiPaper-root": {
-      width: 350,
       borderRadius: 8,
       border: "1px solid ".concat(_colors.grey[50]),
       boxShadow: theme.shadows[5]
@@ -37,43 +38,80 @@ const CustomizeDialog = (0, _styles.styled)(_material.Dialog)(_ref => {
 const MyDialog = _ref2 => {
   let {
       title,
+      subTitle,
       children,
       onRefresh,
+      onClose,
       loading,
       handleShowAll,
       handleMarkAllAsRead,
-      isMarkAllAsRead
+      isMarkAllAsRead,
+      width,
+      headerIconType,
+      isDialogActionShow,
+      className
     } = _ref2,
     otherProps = _objectWithoutProperties(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement(CustomizeDialog, _extends({}, otherProps, {
-    className: "notification-dialog"
+  const headerIcon = () => {
+    switch (headerIconType) {
+      case _Constant.HEADER_ICON_TYPE.REFRESH:
+        return /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+          disabled: loading,
+          "aria-label": "close",
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "primary.main"
+          },
+          onClick: onRefresh
+        }, /*#__PURE__*/_react.default.createElement(_Refresh.default, {
+          fontSize: "medium"
+        }));
+      case _Constant.HEADER_ICON_TYPE.CLOSE:
+        return /*#__PURE__*/_react.default.createElement(_material.IconButton, {
+          "aria-label": "close",
+          sx: {
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: "primary.main"
+          },
+          onClick: onClose
+        }, /*#__PURE__*/_react.default.createElement(_Close.default, {
+          fontSize: "medium"
+        }));
+      default:
+        return null;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(CustomizeDialog, _extends({
+    maxWidth: "md",
+    onClose: onClose
+  }, otherProps, {
+    className: ["notification-dialog", className].join(" ")
   }), /*#__PURE__*/_react.default.createElement(_material.DialogTitle, {
     sx: {
-      p: 1
+      p: 1,
+      display: "flex"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      gap: 1,
+      display: "flex"
     }
   }, /*#__PURE__*/_react.default.createElement(_material.Box, null, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     variant: "h6",
     className: "title"
-  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    disabled: loading,
-    "aria-label": "close",
-    sx: {
-      position: "absolute",
-      right: 8,
-      top: 8,
-      color: "primary.main"
-    },
-    onClick: onRefresh
-  }, /*#__PURE__*/_react.default.createElement(_Refresh.default, {
-    fontSize: "small"
-  })))), /*#__PURE__*/_react.default.createElement(_material.DialogContent, {
-    dividers: true
-  }, children), /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    className: "title sub-title"
+  }, subTitle)), headerIcon())), children, isDialogActionShow && /*#__PURE__*/_react.default.createElement(_material.DialogActions, {
     className: "dialog-action"
   }, /*#__PURE__*/_react.default.createElement(_material.Button, {
     onClick: handleShowAll,
     className: "view-all"
-  }, "Show all"), isMarkAllAsRead && /*#__PURE__*/_react.default.createElement(_material.Button, {
+  }, "Show all"), isMarkAllAsRead.boo && /*#__PURE__*/_react.default.createElement(_material.Button, {
     className: "view-all",
     onClick: handleMarkAllAsRead
   }, "Mark all as read")));

package/dist/components/my-pagination/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pagination = _interopRequireDefault(require("@mui/material/Pagination"));
+var _material = require("@mui/material");
+var _logs = _interopRequireDefault(require("./logs"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MyPagination = _ref => {
+  let {
+    page,
+    rowPerPage,
+    total,
+    handleChangePage,
+    isLogo,
+    isMarkAllRead,
+    selectedAlert,
+    handleAllRead
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+    count: Math.ceil(total / rowPerPage),
+    page: page,
+    onChange: (_, page) => {
+      handleChangePage(page);
+    },
+    sx: {
+      margin: "1rem 0",
+      "& .MuiPaginationItem-root": {
+        fontSize: "1.25rem",
+        "& .MuiSvgIcon-root": {
+          fontSize: "2.2rem",
+          color: "primary.main"
+        }
+      }
+    },
+    color: "primary",
+    shape: "rounded",
+    showFirstButton: true,
+    showLastButton: true
+  }), isLogo && /*#__PURE__*/_react.default.createElement(_logs.default, {
+    start: page * rowPerPage - rowPerPage + 1,
+    end: page * rowPerPage > total ? total : page * rowPerPage,
+    total: total
+  }), isMarkAllRead && /*#__PURE__*/_react.default.createElement(_material.Button, {
+    variant: "contained",
+    className: "view-all",
+    disabled: selectedAlert.length === 0,
+    onClick: handleAllRead
+  }, "Mark Read"));
+};
+var _default = exports.default = MyPagination;

package/dist/components/my-pagination/logs.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Logs = _ref => {
+  let {
+    start,
+    end,
+    total
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    component: "h1",
+    sx: {
+      fontSize: "1.5rem",
+      fontWeight: 500
+    }
+  }, start, " - ", end, " of ", total, " logs");
+};
+var _default = exports.default = Logs;

package/dist/components/notification-card/card.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _colors = require("@mui/material/colors");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Card = _ref => {
+  let {
+    type,
+    title,
+    subTitle,
+    subType,
+    isRead,
+    handleShowDetails,
+    handleRead,
+    isCheckBox,
+    isSubType,
+    selectedAlert,
+    id,
+    handleCheckboxChange
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    className: "card"
+  }, /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "start",
+    gap: 1
+  }, type && /*#__PURE__*/_react.default.createElement(_material.Badge, {
+    color: type,
+    variant: "dot",
+    className: "badge"
+  }), isCheckBox && /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+    checked: selectedAlert.includes(id) ? true : false,
+    onChange: e => handleCheckboxChange(e, id),
+    disabled: isRead
+  }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "h6",
+    component: "span",
+    className: ["title-card", isRead && "read"].join(" ")
+  }, title)), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    justifyContent: "space-between",
+    flexDirection: "row",
+    alignItems: "start",
+    gap: 1
+  }, isSubType && /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    label: subType,
+    variant: "filled",
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: "primary.main",
+      ml: 5
+    }
+  }), /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    variant: "body2",
+    component: "div",
+    className: ["sub-title", isRead && "read"].join(" ")
+  }, subTitle)), /*#__PURE__*/_react.default.createElement(_material.Stack, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "end",
+    gap: 1
+  }, /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    onClick: handleShowDetails,
+    label: "Show Details",
+    component: "button",
+    variant: "filled",
+    clickable: true,
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: _colors.blue[500]
+    }
+  }), !isRead && /*#__PURE__*/_react.default.createElement(_material.Chip, {
+    onClick: handleRead,
+    label: "Mark as Read",
+    component: "button",
+    variant: "filled",
+    clickable: true,
+    size: "small",
+    sx: {
+      fontFamily: "Montserrat, sans-serif",
+      fontWeight: "medium",
+      color: "primary.main"
+    }
+  })));
+};
+var _default = exports.default = Card;
+Card.propTypes = {
+  type: _propTypes.default.string,
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.string,
+  isRead: _propTypes.default.bool,
+  handleShowDetails: _propTypes.default.func,
+  handleRead: _propTypes.default.func
+};

package/dist/components/notification-card/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _card = _interopRequireDefault(require("./card"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _commonFun = require("../../helper/common-fun");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const NotificationCard = _ref => {
+  let {
+    data,
+    handleRead: _handleRead,
+    handleShowDetails: _handleShowDetails
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_material.Box, null, data.map((item, index) => {
+    return /*#__PURE__*/_react.default.createElement(_card.default, {
+      key: index,
+      type: "success",
+      title: item.message,
+      subTitle: (0, _commonFun.fullFormatDate)(item.createdAt),
+      isRead: item.isRead,
+      handleShowDetails: () => _handleShowDetails(item.id),
+      handleRead: () => _handleRead([item.id])
+    });
+  }));
+};
+var _default = exports.default = NotificationCard;
+NotificationCard.propTypes = {
+  data: _propTypes.default.array,
+  handleRead: _propTypes.default.func,
+  handleShowDetails: _propTypes.default.func
+};

package/dist/components/select-field/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const BootstrapInput = (0, _styles.styled)(_material.InputBase)(_ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    "& .MuiInputBase-input": {
+      color: theme.palette.input.border,
+      borderRadius: 4,
+      position: "relative",
+      backgroundColor: theme.palette.background.paper,
+      border: "1px solid ".concat(theme.palette.input.border),
+      fontSize: ".9rem",
+      fontWeight: 500,
+      fontFamily: "Montserrat, sans-serif",
+      padding: "11px 26px 10px 12px",
+      transition: theme.transitions.create(["border-color", "box-shadow"])
+    }
+  };
+});
+const SelectField = _ref2 => {
+  let {
+    option,
+    value,
+    handleSelectChange
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+    sx: {
+      width: 120
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Select, {
+    onChange: handleSelectChange,
+    value: value,
+    size: "small",
+    input: /*#__PURE__*/_react.default.createElement(BootstrapInput, null),
+    sx: {
+      "& .MuiSelected": {
+        color: "primary.main"
+      }
+    }
+  }, option.map((item, index) => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+    key: index,
+    value: item.value
+  }, item.label))));
+};
+var _default = exports.default = SelectField;