sag_components 2.0.0-beta164 → 2.0.0-beta166

package/dist/index.js

@@ -3159,17 +3159,17 @@ const UploadIcon = _ref => {
 
 const UploadIconV2 = _ref => {
   let {
-    color = '"#066768"',
+    color = '#066768',
     width = '14',
     height = '14'
   } = _ref;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
     width: width,
     height: height,
     viewBox: "0 0 14 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M7.4175 1.75616V9.91557C7.4175 10.1447 7.23005 10.3321 7.00094 10.3321C6.77183 10.3321 6.58437 10.1447 6.58437 9.91557V1.75616L3.96263 4.3779C3.80122 4.53931 3.53566 4.53931 3.37424 4.3779C3.21282 4.21648 3.21282 3.95092 3.37424 3.7895L6.70674 0.457001C6.86816 0.295583 7.13372 0.295583 7.29513 0.457001L10.6276 3.7895C10.7891 3.95092 10.7891 4.21648 10.6276 4.3779C10.4662 4.53931 10.2007 4.53931 10.0392 4.3779L7.4175 1.75616ZM5.75125 9.49901H2.00219C1.54137 9.49901 1.16906 9.87131 1.16906 10.3321V11.9984C1.16906 12.4592 1.54137 12.8315 2.00219 12.8315H11.9997C12.4605 12.8315 12.8328 12.4592 12.8328 11.9984V10.3321C12.8328 9.87131 12.4605 9.49901 11.9997 9.49901H8.25063V8.66589H11.9997C12.9187 8.66589 13.6659 9.4131 13.6659 10.3321V11.9984C13.6659 12.9174 12.9187 13.6646 11.9997 13.6646H2.00219C1.08315 13.6646 0.335938 12.9174 0.335938 11.9984V10.3321C0.335938 9.4131 1.08315 8.66589 2.00219 8.66589H5.75125V9.49901ZM10.3334 11.1653C10.3334 10.9995 10.3993 10.8406 10.5164 10.7234C10.6336 10.6062 10.7926 10.5404 10.9583 10.5404C11.124 10.5404 11.2829 10.6062 11.4001 10.7234C11.5173 10.8406 11.5831 10.9995 11.5831 11.1653C11.5831 11.331 11.5173 11.4899 11.4001 11.6071C11.2829 11.7243 11.124 11.7901 10.9583 11.7901C10.7926 11.7901 10.6336 11.7243 10.5164 11.6071C10.3993 11.4899 10.3334 11.331 10.3334 11.1653Z",
     fill: color
   }));
@@ -34715,15 +34715,16 @@ styled.css`
  * • onApply(start,end) – callback, both numbers (inclusive)
  * • onCancel()         – callback
  */
-const WeeksCalendar = ({
-  year,
-  defaultStartWeek = null,
-  defaultEndWeek = null,
-  backgroundColor = "#066768",
-  hoverBackgroundColor = "#E6F0F0",
-  onApply,
-  onCancel
-}) => {
+const WeeksCalendar = _ref => {
+  let {
+    year,
+    defaultStartWeek = null,
+    defaultEndWeek = null,
+    backgroundColor = "#066768",
+    hoverBackgroundColor = "#E6F0F0",
+    onApply,
+    onCancel
+  } = _ref;
   // state -------------------------------------------------
   const [startWeek, setStartWeek] = React$1.useState(defaultStartWeek);
   const [endWeek, setEndWeek] = React$1.useState(defaultEndWeek);
@@ -35689,9 +35690,9 @@ const ToggleSlider = styled__default["default"].span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -38513,7 +38514,7 @@ const DisabledTrashIconWrapper$1 = styled__default["default"].div`
     color: #d9d9d9;
   }
 `;
-const StatusCell = styled__default["default"].div`
+const StatusCell$1 = styled__default["default"].div`
     font-size: 12px;
     font-weight: 500;
     display: flex;
@@ -39223,7 +39224,7 @@ const TableBody = ({
       case 'status':
         const statusObj = statuses.find(status => status.status === value) || {};
         const [palette0, palette1] = statusObj.palette;
-        return /*#__PURE__*/React__default["default"].createElement(StatusCell, {
+        return /*#__PURE__*/React__default["default"].createElement(StatusCell$1, {
           color: palette1
         }, /*#__PURE__*/React__default["default"].createElement(StatusCellCircle, {
           backgroundColor: palette0
@@ -52811,7 +52812,8 @@ const Drawer = styled__default["default"].div`
   top: 0;
   right: ${props => props.open ? '0' : `-${props.widthPercent || 70}%`};
   width: ${props => props.widthPercent ? `${props.widthPercent}%` : '70%'};
-  height: 100%;
+  height: ${props => props.height ? props.height : '100%'};
+
   background: #fff;
   z-index: 1001;
   transition: right 0.3s;
@@ -52847,6 +52849,7 @@ const CloseBtn = styled__default["default"].button`
 function ModalDrawer(_ref) {
   let {
     open,
+    height,
     onClose,
     children,
     widthPercent = 70
@@ -52855,6 +52858,7 @@ function ModalDrawer(_ref) {
     onClick: onClose,
     "data-testid": "overlay"
   }), /*#__PURE__*/React__default["default"].createElement(Drawer, {
+    height: height,
     open: open,
     widthPercent: widthPercent,
     "data-testid": "drawer"
@@ -52926,10 +52930,11 @@ const DropdownList = styled__default["default"].ul`
       `}
 `;
 const SectionDiv = styled__default["default"].div`
-  ${({
-  $showBorder,
-  margin
-}) => {
+  ${_ref => {
+  let {
+    $showBorder,
+    margin
+  } = _ref;
   switch ($showBorder) {
     case 'Template Offer':
       return styled.css`border-top: 1px solid #e6e2e2ff;
@@ -53877,6 +53882,73 @@ const QuickFilterCards = _ref => {
   }));
 };
 
+const StatusCell = styled__default["default"].div`
+    display: inline-flex;
+    height: ${props => props.height};
+    padding: 8px 12px;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+    flex-shrink: 0;
+    border-radius: ${props => props.borderRadius};
+    border: 1px solid ${props => props.borderColor.toString()};
+    background: ${props => props.backgroundColor.toString()};
+    font-size: 14px;
+    font-weight: 500;
+    color: ${props => props.color.toString()};
+    font-family: Poppins;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+`;
+
+const tagTemplates = {
+  pending: {
+    backgroundColor: '#F5C9A74D',
+    borderColor: '#F5C9A7',
+    textColor: '#8B4513',
+    text: 'Pending'
+  },
+  received: {
+    backgroundColor: '#B9D5D54D',
+    borderColor: '#B9D5D5',
+    textColor: '#000000',
+    text: 'Received'
+  },
+  approved: {
+    backgroundColor: '#BFEBC64D',
+    borderColor: '#BFEBC6',
+    textColor: '#074310',
+    text: 'Approved'
+  },
+  canceled: {
+    backgroundColor: '#EBA6AF4D',
+    borderColor: '#EBA6AF',
+    textColor: '#44070F',
+    text: 'Canceled'
+  }
+};
+const Tag = props => {
+  const {
+    type = 'pending',
+    size = 'small',
+    backgroundColor,
+    borderColor,
+    textColor,
+    borderRadius = "62px",
+    text
+  } = props;
+  const template = tagTemplates[type];
+  const height = size === 'small' ? '21px' : size === 'medium' ? '32px' : '35px';
+  return /*#__PURE__*/React__default["default"].createElement(StatusCell, {
+    backgroundColor: backgroundColor || template.backgroundColor,
+    borderColor: borderColor || template.borderColor,
+    color: textColor || template.textColor,
+    height: height,
+    borderRadius: borderRadius
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, text || template.text));
+};
+
 exports.AdvancedThresholds = AdvancedThresholds;
 exports.Analytics = Analytics;
 exports.AreaChart = AreaChart;
@@ -53941,6 +54013,7 @@ exports.SingleBarLineCharts = SingleBarLineCharts;
 exports.SortPop = SortPop;
 exports.TabMenu = TabMenu;
 exports.Table = Table;
+exports.Tag = Tag;
 exports.ToasterMessageBox = ToasterMessageBox;
 exports.ToggleSwitch = ToggleSwitch;
 exports.Tooltip = Tooltip$2;