sag_components 2.0.0-beta197 → 2.0.0-beta199

package/dist/index.esm.js

@@ -10579,23 +10579,24 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = ({
-  availableQuarters,
-  // ["Q1-2024"]
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const QuarterPicker = _ref => {
+  let {
+    availableQuarters,
+    // ["Q1-2024"]
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11037,22 +11038,23 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = ({
-  availableMonths,
-  label,
-  onChange,
-  borderRadius,
-  required,
-  width,
-  height,
-  placeholder,
-  disabled,
-  borderColor,
-  borderColorFocus,
-  textColor,
-  selectedValue,
-  startYear
-}) => {
+const MonthPicker = _ref => {
+  let {
+    availableMonths,
+    label,
+    onChange,
+    borderRadius,
+    required,
+    width,
+    height,
+    placeholder,
+    disabled,
+    borderColor,
+    borderColorFocus,
+    textColor,
+    selectedValue,
+    startYear
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -24163,21 +24165,22 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = ({
-  label,
-  hoverColor,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  xIconShow,
-  labelColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownSingle = _ref => {
+  let {
+    label,
+    hoverColor,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    xIconShow,
+    labelColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24574,23 +24577,24 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;  
 `;
 
-const QuickFilterDropdownMultiSelection = ({
-  label,
-  labelEmptyValue,
-  options,
-  selectedValue,
-  placeHolder,
-  onChange,
-  required,
-  disabled,
-  width,
-  error,
-  errorMessage,
-  labelColor,
-  xIconShow,
-  checkBoxColor,
-  showLabelOnTop
-}) => {
+const QuickFilterDropdownMultiSelection = _ref => {
+  let {
+    label,
+    labelEmptyValue,
+    options,
+    selectedValue,
+    placeHolder,
+    onChange,
+    required,
+    disabled,
+    width,
+    error,
+    errorMessage,
+    labelColor,
+    xIconShow,
+    checkBoxColor,
+    showLabelOnTop
+  } = _ref;
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -39944,37 +39948,6 @@ Dropdown.propTypes = {
 
 // combinedShimmerHooks.js - Chrome shimmer effect integrated with your hooks
 
-// Hook that specifically watches for indexToShimmer changes (like your original)
-const useShimmerChromeEffect = (text, currentRowIndex, indexToShimmer) => {
-  // Handle null/undefined text safely
-  const safeText = text !== null && text !== undefined ? text.toString() : '';
-  const [isShimmering, setIsShimmering] = useState(false);
-  const [lastShimmerIndex, setLastShimmerIndex] = useState(null);
-
-  // Check if this row should animate
-  const shouldAnimate = currentRowIndex === indexToShimmer;
-
-  // Reset animation when indexToShimmer changes and this row is targeted
-  useEffect(() => {
-    if (shouldAnimate && indexToShimmer !== lastShimmerIndex) {
-      setIsShimmering(true);
-      setLastShimmerIndex(indexToShimmer);
-
-      // Stop shimmering after 5 seconds
-      const timeout = setTimeout(() => {
-        setIsShimmering(false);
-      }, 5000);
-      return () => clearTimeout(timeout);
-    } else if (!shouldAnimate) {
-      setIsShimmering(false);
-    }
-  }, [indexToShimmer, shouldAnimate, lastShimmerIndex]);
-  return {
-    text: safeText,
-    isShimmering: shouldAnimate && isShimmering
-  };
-};
-
 // Chrome Shimmer Component
 const ChromeShimmerText = ({
   text,
@@ -40070,11 +40043,17 @@ const TableBody = /*#__PURE__*/forwardRef(({
   expandedContent = {},
   onExpandRow = () => {},
   expandedBackgroundColor = "#E6F0F0",
-  // New prop with default
   onDropdownSelected = () => {},
   onCheckboxClick = () => {},
   onHeaderCheckboxClick = () => {}
 }, ref) => {
+  // MOVE ALL VALIDATION TO THE VERY TOP BEFORE ANY HOOKS
+  if (!Array.isArray(data) || !Array.isArray(columns)) {
+    console.warn("TableBody: Invalid data or columns prop");
+    return null;
+  }
+
+  // NOW ALL THE HOOKS CAN BE CALLED SAFELY
   const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
   const [focusedRowIndex, setFocusedRowIndex] = useState(null);
   const [isCommentModalOpen, setIsCommentModalOpen] = useState(false);
@@ -40087,11 +40066,24 @@ const TableBody = /*#__PURE__*/forwardRef(({
   const [hasUserInteracted, setHasUserInteracted] = useState(false);
   const [hasInitialValue, setHasInitialValue] = useState(false);
 
-  // Early return for invalid data
-  if (!Array.isArray(data) || !Array.isArray(columns)) {
-    console.warn("TableBody: Invalid data or columns prop");
-    return null;
-  }
+  // Shimmer state - manage shimmer effect at the top level
+  const [shimmerRowIndex, setShimmerRowIndex] = useState(-1);
+  const [shimmerStartTime, setShimmerStartTime] = useState(null);
+
+  // Handle shimmer effect changes
+  useEffect(() => {
+    if (indexToShimmer >= 0 && indexToShimmer !== shimmerRowIndex) {
+      setShimmerRowIndex(indexToShimmer);
+      setShimmerStartTime(Date.now());
+
+      // Auto-stop shimmer after 5 seconds
+      const timeout = setTimeout(() => {
+        setShimmerRowIndex(-1);
+        setShimmerStartTime(null);
+      }, 5000);
+      return () => clearTimeout(timeout);
+    }
+  }, [indexToShimmer, shimmerRowIndex]);
 
   // Expose methods to parent component via ref
   useImperativeHandle(ref, () => ({
@@ -40665,7 +40657,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
     };
   }, []);
 
-  // Return null if no data
+  // HANDLE SPECIAL CASE: EMPTY DATA AFTER ALL HOOKS
   if (data.length === 0) {
     return /*#__PURE__*/React$1.createElement(StyledTableBody, {
       ref: ref
@@ -40717,7 +40709,7 @@ const TableBody = /*#__PURE__*/forwardRef(({
           key: `invalid-${columnIndex}`
         }, "Invalid Column");
       }
-      let value, formattedValue, shimmerText, isShimmering;
+      let value, formattedValue;
       try {
         value = row[column.key];
         formattedValue = formatValue(value, column, row, rowIndex) || "";
@@ -40726,23 +40718,11 @@ const TableBody = /*#__PURE__*/forwardRef(({
         formattedValue = "";
       }
 
-      // Initialize shimmer defaults
-      shimmerText = formattedValue;
-      isShimmering = false;
-
-      // Only use shimmer hook for text-based fields
+      // Check if this is a text-based field for shimmer rendering
       const isTextBasedField = column.fieldType?.toLowerCase() === "text" || column.fieldType?.toLowerCase() === "currency" || column.fieldType?.toLowerCase() === "number" || column.fieldType?.toLowerCase() === "percentage" || column.fieldType?.toLowerCase() === "date" || !column.fieldType;
-      if (isTextBasedField && typeof useShimmerChromeEffect === 'function') {
-        try {
-          const shimmerResult = useShimmerChromeEffect(String(formattedValue || ""), rowIndex, indexToShimmer, columnIndex, columns.length);
-          if (shimmerResult && typeof shimmerResult === 'object') {
-            shimmerText = shimmerResult.text || formattedValue;
-            isShimmering = Boolean(shimmerResult.isShimmering);
-          }
-        } catch (e) {
-          console.warn("Error with shimmer effect:", e);
-        }
-      }
+
+      // Determine if shimmer should be applied
+      const shouldShimmer = isTextBasedField && rowIndex === shimmerRowIndex && shimmerStartTime !== null;
       return /*#__PURE__*/React$1.createElement(TableCell, {
         key: `${column.key}-${rowIndex}`,
         ref: el => {
@@ -40773,10 +40753,10 @@ const TableBody = /*#__PURE__*/forwardRef(({
         $color: column.color,
         $minWidth: column.minWidth,
         $maxWidth: column.maxWidth
-      }, isTextBasedField ? typeof ChromeShimmerText === 'function' ? /*#__PURE__*/React$1.createElement(ChromeShimmerText, {
-        text: String(shimmerText || ""),
-        isShimmering: isShimmering
-      }) : String(shimmerText || "") : formattedValue || "");
+      }, isTextBasedField && shouldShimmer ? typeof ChromeShimmerText === 'function' ? /*#__PURE__*/React$1.createElement(ChromeShimmerText, {
+        text: String(formattedValue || ""),
+        isShimmering: true
+      }) : String(formattedValue || "") : formattedValue || "");
     })), expandable && expandedRows[rowIndex] && /*#__PURE__*/React$1.createElement(ExpandedRow, {
       $expandedBackgroundColor: expandedBackgroundColor
     }, /*#__PURE__*/React$1.createElement(TableCell, {
@@ -44058,79 +44038,82 @@ const NoSearchUpcIcon = ({
   transform: "translate(73.75 80.8828)"
 }))));
 
-const NothingToTrackIcon = ({
-  width = "251",
-  height = "250"
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 250 251",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.createElement("rect", {
-  x: "0.5",
-  width: "250",
-  height: "250",
-  rx: "125",
-  fill: "#F3F7F7"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M119.792 200.515C121.831 201.751 124.145 202.402 126.5 202.402C128.855 202.402 131.169 201.751 133.208 200.515L180.167 172.349C182.204 171.114 183.897 169.338 185.074 167.2C186.252 165.062 186.873 162.636 186.875 160.167V103.833C186.873 101.364 186.252 98.9379 185.074 96.7997C183.897 94.6616 182.204 92.886 180.167 91.6511L133.208 63.4845C131.169 62.2484 128.855 61.5977 126.5 61.5977C124.145 61.5977 121.831 62.2484 119.792 63.4845L72.8333 91.6511C70.7958 92.886 69.1034 94.6616 67.9259 96.7997C66.7485 98.9379 66.1274 101.364 66.125 103.833V160.167C66.1274 162.636 66.7485 165.062 67.9259 167.2C69.1034 169.338 70.7958 171.114 72.8333 172.349L119.792 200.515Z",
-  stroke: "#519595",
-  "stroke-width": "6",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M126.5 202.417V132",
-  stroke: "#519595",
-  "stroke-width": "6",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M68.0703 96.792L126.5 132L184.929 96.792",
-  stroke: "#519595",
-  "stroke-width": "6",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M96.3125 77.5684L156.688 113.833",
-  stroke: "#519595",
-  "stroke-width": "6",
-  "stroke-linecap": "round",
-  "stroke-linejoin": "round"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M201.551 142.578V142.545C201.55 142.551 201.548 142.556 201.547 142.561C201.545 142.556 201.543 142.551 201.542 142.545V142.578C201.125 144.131 200.158 145.242 198.644 145.909C200.158 146.577 201.125 147.688 201.542 149.241V149.274C201.544 149.268 201.546 149.263 201.547 149.257C201.549 149.263 201.55 149.268 201.551 149.274V149.241C201.969 147.688 202.936 146.577 204.45 145.909C202.936 145.242 201.969 144.131 201.551 142.578ZM32.9078 61.6887V61.656C32.906 61.6615 32.9043 61.6669 32.9034 61.6724C32.9016 61.6669 32.8998 61.6615 32.8989 61.656V61.6887C32.481 63.2419 31.5147 64.3525 30 65.0204C31.5147 65.6884 32.481 66.799 32.8989 68.3521V68.3848C32.9007 68.3794 32.9025 68.3739 32.9034 68.3685C32.9052 68.3739 32.9069 68.3794 32.9078 68.3848V68.3521C33.3258 66.799 34.2921 65.6884 35.8068 65.0204C34.2921 64.3525 33.3258 63.2419 32.9078 61.6887ZM218.101 173.351V173.318C218.099 173.323 218.098 173.329 218.097 173.334C218.095 173.329 218.093 173.323 218.092 173.318V173.351C217.674 174.904 216.708 176.014 215.193 176.682C216.708 177.35 217.674 178.461 218.092 180.014V180.047C218.094 180.041 218.096 180.036 218.097 180.03C218.098 180.036 218.1 180.041 218.101 180.047V180.014C218.519 178.461 219.485 177.35 221 176.682C219.485 176.014 218.519 174.904 218.101 173.351ZM182.681 176.603V176.537C182.679 176.549 182.675 176.559 182.672 176.571C182.67 176.559 182.666 176.549 182.663 176.537V176.603C181.828 179.709 179.895 181.931 176.866 183.267C179.895 184.603 181.827 186.825 182.663 189.93V189.996C182.666 189.985 182.67 189.975 182.672 189.963C182.675 189.975 182.679 189.985 182.681 189.996V189.93C183.517 186.825 185.45 184.603 188.479 183.267C185.45 181.931 183.518 179.709 182.681 176.603ZM53.3947 102.023V101.957C53.3921 101.969 53.3885 101.979 53.3859 101.991C53.3832 101.979 53.3797 101.969 53.377 101.957V102.023C52.5411 105.129 50.6085 107.351 47.5791 108.687C50.6085 110.023 52.5402 112.245 53.377 115.35V115.416C53.3797 115.405 53.3832 115.395 53.3859 115.383C53.3885 115.395 53.3921 115.405 53.3947 115.416V115.35C54.2306 112.245 56.1632 110.023 59.1926 108.687C56.1632 107.351 54.2315 105.129 53.3947 102.023ZM101.463 40.9091V40.8428C101.461 40.8546 101.457 40.8646 101.455 40.8764C101.452 40.8646 101.448 40.8546 101.446 40.8428V40.9091C100.61 44.0145 98.6771 46.2365 95.6478 47.5725C98.6771 48.9084 100.609 51.1304 101.446 54.2358V54.3022C101.448 54.2904 101.452 54.2804 101.455 54.2685C101.457 54.2804 101.461 54.2904 101.463 54.3022V54.2358C102.299 51.1304 104.232 48.9084 107.261 47.5725C104.232 46.2365 102.3 44.0145 101.463 40.9091Z",
-  fill: "#F2BB91"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M47.7905 141.951C47.9948 141.763 48.3225 141.763 48.5269 141.951C48.7375 142.145 48.7375 142.466 48.5269 142.66L40.2554 150.287C40.0511 150.476 39.7234 150.476 39.519 150.287C39.3085 150.093 39.3085 149.772 39.519 149.578L47.7905 141.951ZM45.5845 147.544C46.2935 146.89 47.4389 146.89 48.1479 147.544C48.8634 148.204 48.8633 149.278 48.1479 149.938C47.4389 150.591 46.2935 150.591 45.5845 149.938C44.8693 149.278 44.8692 148.204 45.5845 147.544ZM47.4126 148.253C47.1122 147.976 46.6202 147.976 46.3198 148.253C46.0262 148.524 46.026 148.959 46.3198 149.229C46.6202 149.507 47.1122 149.506 47.4126 149.229C47.7065 148.959 47.7064 148.524 47.4126 148.253ZM39.8979 142.301C40.607 141.647 41.7524 141.647 42.4614 142.301C43.1766 142.96 43.1767 144.035 42.4614 144.694C41.7524 145.348 40.607 145.348 39.8979 144.694C39.1826 144.035 39.1827 142.96 39.8979 142.301ZM41.7261 143.009C41.4257 142.732 40.9337 142.732 40.6333 143.009C40.3394 143.28 40.3397 143.714 40.6333 143.985C40.9337 144.262 41.4257 144.262 41.7261 143.985C42.0197 143.714 42.0199 143.28 41.7261 143.009Z",
-  fill: "#9BC2C3",
-  stroke: "#9BC2C3",
-  "stroke-width": "0.276243"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M136.451 193.856C136.655 193.668 136.983 193.668 137.187 193.856C137.398 194.051 137.398 194.371 137.187 194.565L128.916 202.192C128.711 202.381 128.384 202.381 128.179 202.192C127.969 201.998 127.969 201.678 128.179 201.483L136.451 193.856ZM134.245 199.449C134.954 198.795 136.099 198.795 136.808 199.449C137.524 200.109 137.523 201.183 136.808 201.843C136.099 202.497 134.954 202.497 134.245 201.843C133.53 201.183 133.529 200.109 134.245 199.449ZM136.073 200.158C135.772 199.881 135.28 199.881 134.98 200.158C134.686 200.429 134.686 200.864 134.98 201.135C135.28 201.412 135.772 201.412 136.073 201.135C136.367 200.864 136.367 200.429 136.073 200.158ZM128.558 194.206C129.267 193.552 130.413 193.552 131.122 194.206C131.837 194.866 131.837 195.94 131.122 196.6C130.413 197.253 129.267 197.253 128.558 196.6C127.843 195.94 127.843 194.866 128.558 194.206ZM130.386 194.914C130.086 194.637 129.594 194.637 129.293 194.914C129 195.185 129 195.62 129.293 195.891C129.594 196.168 130.086 196.168 130.386 195.891C130.68 195.62 130.68 195.185 130.386 194.914Z",
-  fill: "#9BC2C3",
-  stroke: "#9BC2C3",
-  "stroke-width": "0.276243"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M147.664 33.4932C147.835 33.3178 148.114 33.3178 148.286 33.4932C148.455 33.6668 148.455 33.9474 148.286 34.1211L141.887 40.6758C141.716 40.8509 141.437 40.851 141.266 40.6758C141.097 40.5021 141.097 40.2215 141.266 40.0479L147.664 33.4932ZM145.958 38.2998C146.519 37.7245 147.431 37.7244 147.993 38.2998C148.553 38.8734 148.553 39.8024 147.993 40.376C147.431 40.9512 146.519 40.9511 145.958 40.376C145.398 39.8024 145.398 38.8734 145.958 38.2998ZM147.371 38.9277C147.152 38.7033 146.798 38.7033 146.579 38.9277C146.358 39.154 146.358 39.5219 146.579 39.748C146.798 39.9725 147.152 39.9724 147.371 39.748C147.592 39.5218 147.591 39.154 147.371 38.9277ZM141.559 33.7939C142.121 33.2185 143.033 33.2185 143.594 33.7939C144.154 34.3675 144.154 35.2956 143.594 35.8691C143.033 36.4446 142.121 36.4445 141.559 35.8691C140.999 35.2955 140.999 34.3676 141.559 33.7939ZM142.972 34.4209C142.753 34.1966 142.399 34.1965 142.18 34.4209C141.959 34.6472 141.959 35.0159 142.18 35.2422C142.399 35.4665 142.753 35.4664 142.972 35.2422C143.193 35.0159 143.193 34.6472 142.972 34.4209Z",
-  fill: "#9BC2C3",
-  stroke: "#9BC2C3",
-  "stroke-width": "0.276243"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M83.7796 190.438V190.474C84.2838 192.128 85.4477 193.311 87.2731 194.023C85.4477 194.735 84.2832 195.918 83.7796 197.572V197.608C83.778 197.601 83.7758 197.596 83.7742 197.59C83.7726 197.596 83.7705 197.601 83.7689 197.608V197.572C83.2647 195.918 82.1007 194.735 80.2754 194.023C82.1007 193.311 83.2652 192.128 83.7689 190.474V190.438C83.7705 190.445 83.7726 190.45 83.7742 190.456C83.7758 190.45 83.778 190.445 83.7796 190.438Z",
-  fill: "#F2BB91"
-}), /*#__PURE__*/React$1.createElement("path", {
-  d: "M190.895 153.01C201.752 153.01 210.673 162.263 210.673 173.829C210.673 185.395 201.752 194.647 190.895 194.647C180.039 194.647 171.117 185.395 171.117 173.829C171.117 162.263 180.038 153.01 190.895 153.01Z",
-  fill: "#B4D1D2",
-  stroke: "#519595",
-  "stroke-width": "3"
-}), /*#__PURE__*/React$1.createElement("line", {
-  x1: "180.763",
-  y1: "174.886",
-  x2: "202.041",
-  y2: "174.886",
-  stroke: "#519595",
-  "stroke-width": "3"
-}));
+const NothingToTrackIcon = _ref => {
+  let {
+    width = "251",
+    height = "250"
+  } = _ref;
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 250 251",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    x: "0.5",
+    width: "250",
+    height: "250",
+    rx: "125",
+    fill: "#F3F7F7"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M119.792 200.515C121.831 201.751 124.145 202.402 126.5 202.402C128.855 202.402 131.169 201.751 133.208 200.515L180.167 172.349C182.204 171.114 183.897 169.338 185.074 167.2C186.252 165.062 186.873 162.636 186.875 160.167V103.833C186.873 101.364 186.252 98.9379 185.074 96.7997C183.897 94.6616 182.204 92.886 180.167 91.6511L133.208 63.4845C131.169 62.2484 128.855 61.5977 126.5 61.5977C124.145 61.5977 121.831 62.2484 119.792 63.4845L72.8333 91.6511C70.7958 92.886 69.1034 94.6616 67.9259 96.7997C66.7485 98.9379 66.1274 101.364 66.125 103.833V160.167C66.1274 162.636 66.7485 165.062 67.9259 167.2C69.1034 169.338 70.7958 171.114 72.8333 172.349L119.792 200.515Z",
+    stroke: "#519595",
+    "stroke-width": "6",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M126.5 202.417V132",
+    stroke: "#519595",
+    "stroke-width": "6",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M68.0703 96.792L126.5 132L184.929 96.792",
+    stroke: "#519595",
+    "stroke-width": "6",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M96.3125 77.5684L156.688 113.833",
+    stroke: "#519595",
+    "stroke-width": "6",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M201.551 142.578V142.545C201.55 142.551 201.548 142.556 201.547 142.561C201.545 142.556 201.543 142.551 201.542 142.545V142.578C201.125 144.131 200.158 145.242 198.644 145.909C200.158 146.577 201.125 147.688 201.542 149.241V149.274C201.544 149.268 201.546 149.263 201.547 149.257C201.549 149.263 201.55 149.268 201.551 149.274V149.241C201.969 147.688 202.936 146.577 204.45 145.909C202.936 145.242 201.969 144.131 201.551 142.578ZM32.9078 61.6887V61.656C32.906 61.6615 32.9043 61.6669 32.9034 61.6724C32.9016 61.6669 32.8998 61.6615 32.8989 61.656V61.6887C32.481 63.2419 31.5147 64.3525 30 65.0204C31.5147 65.6884 32.481 66.799 32.8989 68.3521V68.3848C32.9007 68.3794 32.9025 68.3739 32.9034 68.3685C32.9052 68.3739 32.9069 68.3794 32.9078 68.3848V68.3521C33.3258 66.799 34.2921 65.6884 35.8068 65.0204C34.2921 64.3525 33.3258 63.2419 32.9078 61.6887ZM218.101 173.351V173.318C218.099 173.323 218.098 173.329 218.097 173.334C218.095 173.329 218.093 173.323 218.092 173.318V173.351C217.674 174.904 216.708 176.014 215.193 176.682C216.708 177.35 217.674 178.461 218.092 180.014V180.047C218.094 180.041 218.096 180.036 218.097 180.03C218.098 180.036 218.1 180.041 218.101 180.047V180.014C218.519 178.461 219.485 177.35 221 176.682C219.485 176.014 218.519 174.904 218.101 173.351ZM182.681 176.603V176.537C182.679 176.549 182.675 176.559 182.672 176.571C182.67 176.559 182.666 176.549 182.663 176.537V176.603C181.828 179.709 179.895 181.931 176.866 183.267C179.895 184.603 181.827 186.825 182.663 189.93V189.996C182.666 189.985 182.67 189.975 182.672 189.963C182.675 189.975 182.679 189.985 182.681 189.996V189.93C183.517 186.825 185.45 184.603 188.479 183.267C185.45 181.931 183.518 179.709 182.681 176.603ZM53.3947 102.023V101.957C53.3921 101.969 53.3885 101.979 53.3859 101.991C53.3832 101.979 53.3797 101.969 53.377 101.957V102.023C52.5411 105.129 50.6085 107.351 47.5791 108.687C50.6085 110.023 52.5402 112.245 53.377 115.35V115.416C53.3797 115.405 53.3832 115.395 53.3859 115.383C53.3885 115.395 53.3921 115.405 53.3947 115.416V115.35C54.2306 112.245 56.1632 110.023 59.1926 108.687C56.1632 107.351 54.2315 105.129 53.3947 102.023ZM101.463 40.9091V40.8428C101.461 40.8546 101.457 40.8646 101.455 40.8764C101.452 40.8646 101.448 40.8546 101.446 40.8428V40.9091C100.61 44.0145 98.6771 46.2365 95.6478 47.5725C98.6771 48.9084 100.609 51.1304 101.446 54.2358V54.3022C101.448 54.2904 101.452 54.2804 101.455 54.2685C101.457 54.2804 101.461 54.2904 101.463 54.3022V54.2358C102.299 51.1304 104.232 48.9084 107.261 47.5725C104.232 46.2365 102.3 44.0145 101.463 40.9091Z",
+    fill: "#F2BB91"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M47.7905 141.951C47.9948 141.763 48.3225 141.763 48.5269 141.951C48.7375 142.145 48.7375 142.466 48.5269 142.66L40.2554 150.287C40.0511 150.476 39.7234 150.476 39.519 150.287C39.3085 150.093 39.3085 149.772 39.519 149.578L47.7905 141.951ZM45.5845 147.544C46.2935 146.89 47.4389 146.89 48.1479 147.544C48.8634 148.204 48.8633 149.278 48.1479 149.938C47.4389 150.591 46.2935 150.591 45.5845 149.938C44.8693 149.278 44.8692 148.204 45.5845 147.544ZM47.4126 148.253C47.1122 147.976 46.6202 147.976 46.3198 148.253C46.0262 148.524 46.026 148.959 46.3198 149.229C46.6202 149.507 47.1122 149.506 47.4126 149.229C47.7065 148.959 47.7064 148.524 47.4126 148.253ZM39.8979 142.301C40.607 141.647 41.7524 141.647 42.4614 142.301C43.1766 142.96 43.1767 144.035 42.4614 144.694C41.7524 145.348 40.607 145.348 39.8979 144.694C39.1826 144.035 39.1827 142.96 39.8979 142.301ZM41.7261 143.009C41.4257 142.732 40.9337 142.732 40.6333 143.009C40.3394 143.28 40.3397 143.714 40.6333 143.985C40.9337 144.262 41.4257 144.262 41.7261 143.985C42.0197 143.714 42.0199 143.28 41.7261 143.009Z",
+    fill: "#9BC2C3",
+    stroke: "#9BC2C3",
+    "stroke-width": "0.276243"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M136.451 193.856C136.655 193.668 136.983 193.668 137.187 193.856C137.398 194.051 137.398 194.371 137.187 194.565L128.916 202.192C128.711 202.381 128.384 202.381 128.179 202.192C127.969 201.998 127.969 201.678 128.179 201.483L136.451 193.856ZM134.245 199.449C134.954 198.795 136.099 198.795 136.808 199.449C137.524 200.109 137.523 201.183 136.808 201.843C136.099 202.497 134.954 202.497 134.245 201.843C133.53 201.183 133.529 200.109 134.245 199.449ZM136.073 200.158C135.772 199.881 135.28 199.881 134.98 200.158C134.686 200.429 134.686 200.864 134.98 201.135C135.28 201.412 135.772 201.412 136.073 201.135C136.367 200.864 136.367 200.429 136.073 200.158ZM128.558 194.206C129.267 193.552 130.413 193.552 131.122 194.206C131.837 194.866 131.837 195.94 131.122 196.6C130.413 197.253 129.267 197.253 128.558 196.6C127.843 195.94 127.843 194.866 128.558 194.206ZM130.386 194.914C130.086 194.637 129.594 194.637 129.293 194.914C129 195.185 129 195.62 129.293 195.891C129.594 196.168 130.086 196.168 130.386 195.891C130.68 195.62 130.68 195.185 130.386 194.914Z",
+    fill: "#9BC2C3",
+    stroke: "#9BC2C3",
+    "stroke-width": "0.276243"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M147.664 33.4932C147.835 33.3178 148.114 33.3178 148.286 33.4932C148.455 33.6668 148.455 33.9474 148.286 34.1211L141.887 40.6758C141.716 40.8509 141.437 40.851 141.266 40.6758C141.097 40.5021 141.097 40.2215 141.266 40.0479L147.664 33.4932ZM145.958 38.2998C146.519 37.7245 147.431 37.7244 147.993 38.2998C148.553 38.8734 148.553 39.8024 147.993 40.376C147.431 40.9512 146.519 40.9511 145.958 40.376C145.398 39.8024 145.398 38.8734 145.958 38.2998ZM147.371 38.9277C147.152 38.7033 146.798 38.7033 146.579 38.9277C146.358 39.154 146.358 39.5219 146.579 39.748C146.798 39.9725 147.152 39.9724 147.371 39.748C147.592 39.5218 147.591 39.154 147.371 38.9277ZM141.559 33.7939C142.121 33.2185 143.033 33.2185 143.594 33.7939C144.154 34.3675 144.154 35.2956 143.594 35.8691C143.033 36.4446 142.121 36.4445 141.559 35.8691C140.999 35.2955 140.999 34.3676 141.559 33.7939ZM142.972 34.4209C142.753 34.1966 142.399 34.1965 142.18 34.4209C141.959 34.6472 141.959 35.0159 142.18 35.2422C142.399 35.4665 142.753 35.4664 142.972 35.2422C143.193 35.0159 143.193 34.6472 142.972 34.4209Z",
+    fill: "#9BC2C3",
+    stroke: "#9BC2C3",
+    "stroke-width": "0.276243"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M83.7796 190.438V190.474C84.2838 192.128 85.4477 193.311 87.2731 194.023C85.4477 194.735 84.2832 195.918 83.7796 197.572V197.608C83.778 197.601 83.7758 197.596 83.7742 197.59C83.7726 197.596 83.7705 197.601 83.7689 197.608V197.572C83.2647 195.918 82.1007 194.735 80.2754 194.023C82.1007 193.311 83.2652 192.128 83.7689 190.474V190.438C83.7705 190.445 83.7726 190.45 83.7742 190.456C83.7758 190.45 83.778 190.445 83.7796 190.438Z",
+    fill: "#F2BB91"
+  }), /*#__PURE__*/React$1.createElement("path", {
+    d: "M190.895 153.01C201.752 153.01 210.673 162.263 210.673 173.829C210.673 185.395 201.752 194.647 190.895 194.647C180.039 194.647 171.117 185.395 171.117 173.829C171.117 162.263 180.038 153.01 190.895 153.01Z",
+    fill: "#B4D1D2",
+    stroke: "#519595",
+    "stroke-width": "3"
+  }), /*#__PURE__*/React$1.createElement("line", {
+    x1: "180.763",
+    y1: "174.886",
+    x2: "202.041",
+    y2: "174.886",
+    stroke: "#519595",
+    "stroke-width": "3"
+  }));
+};
 
 // Table.jsx
 const Table = props => {