@app-studio/web 0.8.30 → 0.8.32

package/dist/web.esm.js

@@ -225,18 +225,18 @@ var _excluded$3 = ["size", "color", "transform", "orientation", "children"],
   _excluded13 = ["size", "color", "filled", "strokeWidth"],
   _excluded14 = ["size", "color", "filled", "strokeWidth"],
   _excluded15 = ["size", "color", "filled", "strokeWidth"],
-  _excluded16 = ["size", "color", "strokeWidth", "filled"],
+  _excluded16 = ["size", "color", "filled", "strokeWidth"],
   _excluded17 = ["size", "color", "filled", "strokeWidth"],
-  _excluded18 = ["size", "color", "strokeWidth"],
+  _excluded18 = ["size", "color", "filled", "strokeWidth"],
   _excluded19 = ["size", "color", "filled", "strokeWidth"],
-  _excluded20 = ["size", "color", "strokeWidth"],
-  _excluded21 = ["size", "color", "filled", "strokeWidth"],
-  _excluded22 = ["size", "color", "strokeWidth"],
-  _excluded23 = ["size", "color", "filled", "strokeWidth"],
+  _excluded20 = ["size", "color", "filled", "strokeWidth"],
+  _excluded21 = ["size", "color", "strokeWidth", "filled"],
+  _excluded22 = ["size", "color", "filled", "strokeWidth"],
+  _excluded23 = ["size", "color", "strokeWidth"],
   _excluded24 = ["size", "color", "filled", "strokeWidth"],
-  _excluded25 = ["size", "color", "filled", "strokeWidth"],
+  _excluded25 = ["size", "color", "strokeWidth"],
   _excluded26 = ["size", "color", "filled", "strokeWidth"],
-  _excluded27 = ["size", "color", "filled", "strokeWidth"],
+  _excluded27 = ["size", "color", "strokeWidth"],
   _excluded28 = ["size", "color", "filled", "strokeWidth"],
   _excluded29 = ["size", "color", "filled", "strokeWidth"],
   _excluded30 = ["size", "color", "filled", "strokeWidth"],
@@ -244,13 +244,13 @@ var _excluded$3 = ["size", "color", "transform", "orientation", "children"],
   _excluded32 = ["size", "color", "filled", "strokeWidth"],
   _excluded33 = ["size", "color", "filled", "strokeWidth"],
   _excluded34 = ["size", "color", "filled", "strokeWidth"],
-  _excluded35 = ["size", "color", "strokeWidth"],
-  _excluded36 = ["size", "color", "strokeWidth"],
+  _excluded35 = ["size", "color", "filled", "strokeWidth"],
+  _excluded36 = ["size", "color", "filled", "strokeWidth"],
   _excluded37 = ["size", "color", "filled", "strokeWidth"],
   _excluded38 = ["size", "color", "filled", "strokeWidth"],
   _excluded39 = ["size", "color", "filled", "strokeWidth"],
-  _excluded40 = ["size", "color", "filled", "strokeWidth"],
-  _excluded41 = ["size", "color", "filled", "strokeWidth"],
+  _excluded40 = ["size", "color", "strokeWidth"],
+  _excluded41 = ["size", "color", "strokeWidth"],
   _excluded42 = ["size", "color", "filled", "strokeWidth"],
   _excluded43 = ["size", "color", "filled", "strokeWidth"],
   _excluded44 = ["size", "color", "filled", "strokeWidth"],
@@ -259,7 +259,12 @@ var _excluded$3 = ["size", "color", "transform", "orientation", "children"],
   _excluded47 = ["size", "color", "filled", "strokeWidth"],
   _excluded48 = ["size", "color", "filled", "strokeWidth"],
   _excluded49 = ["size", "color", "filled", "strokeWidth"],
-  _excluded50 = ["size", "color", "strokeWidth"];
+  _excluded50 = ["size", "color", "filled", "strokeWidth"],
+  _excluded51 = ["size", "color", "filled", "strokeWidth"],
+  _excluded52 = ["size", "color", "filled", "strokeWidth"],
+  _excluded53 = ["size", "color", "filled", "strokeWidth"],
+  _excluded54 = ["size", "color", "filled", "strokeWidth"],
+  _excluded55 = ["size", "color", "strokeWidth"];
 // Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
@@ -338,20 +343,137 @@ var CloseIcon = _ref3 => {
     y2: "18"
   })));
 };
-// Continue refactoring other icons similarly...
-// Example Refactored Icon: MinusIcon without undefined 'padding' prop
-var MinusIcon = _ref4 => {
+var InstagramIcon = _ref4 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
-      // Assuming minus can be filled; adjust as needed
       strokeWidth = 1
     } = _ref4,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
+  }, props), /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "20",
+    height: "20",
+    rx: "5",
+    ry: "5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "17.5",
+    y1: "6.5",
+    x2: "17.51",
+    y2: "6.5"
+  })));
+};
+var TwitterIcon = _ref5 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 \n                                    10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5\n                                    4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
+  })));
+};
+var YoutubeIcon = _ref6 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "white",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"
+  }), /*#__PURE__*/React.createElement("polygon", {
+    points: "9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"
+  })));
+};
+var LinkedinIcon = _ref7 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", {
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 \n                                      2v7h-4v-7a6 6 0 0 1 6-6z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "9",
+    width: "4",
+    height: "12"
+  }), "#", /*#__PURE__*/React.createElement("circle", {
+    cx: "4",
+    cy: "4",
+    r: "2"
+  })));
+};
+var ThreadsIcon = _ref8 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({}, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 \n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
+  })));
+};
+// Example Refactored Icon: MinusIcon without undefined 'padding' prop
+var MinusIcon = _ref9 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      // Assuming minus can be filled; adjust as needed
+      strokeWidth = 1
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
   }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
@@ -365,14 +487,14 @@ var MinusIcon = _ref4 => {
   })));
 };
 // Example Refactored Icon: InfoIcon with accessibility enhancements
-var InfoIcon = _ref5 => {
+var InfoIcon = _ref10 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    } = _ref10,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -386,14 +508,14 @@ var InfoIcon = _ref5 => {
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
   })));
 };
-var HeartIcon = _ref6 => {
+var HeartIcon = _ref11 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+    } = _ref11,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -405,14 +527,14 @@ var HeartIcon = _ref6 => {
     d: "M20.84 4.61c-1.54-1.56-4.04-1.56-5.59 0l-.7.72-.7-.72a3.95 3.95 0 0 0-5.59 0c-1.56 1.56-1.56 4.09 0 5.66l6.29 6.36 6.29-6.36c1.56-1.56 1.56-4.09 0-5.66z"
   })));
 };
-var StarIcon = _ref7 => {
+var StarIcon = _ref12 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+    } = _ref12,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -424,14 +546,14 @@ var StarIcon = _ref7 => {
     points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
   })));
 };
-var SaveIcon = _ref8 => {
+var SaveIcon = _ref13 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+    } = _ref13,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -447,14 +569,14 @@ var SaveIcon = _ref8 => {
     points: "7 3 7 8 15 8"
   })));
 };
-var WarningIcon = _ref9 => {
+var WarningIcon = _ref14 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref9,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+    } = _ref14,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -478,14 +600,14 @@ var WarningIcon = _ref9 => {
     y2: "15"
   })));
 };
-var BatteryIcon = _ref10 => {
+var BatteryIcon = _ref15 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+    } = _ref15,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -497,14 +619,14 @@ var BatteryIcon = _ref10 => {
     d: "M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"
   })));
 };
-var BookmarkIcon = _ref11 => {
+var BookmarkIcon = _ref16 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref11,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+    } = _ref16,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -516,14 +638,14 @@ var BookmarkIcon = _ref11 => {
     d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
   })));
 };
-var CloudIcon = _ref12 => {
+var CloudIcon = _ref17 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref12,
-    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+    } = _ref17,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -535,14 +657,14 @@ var CloudIcon = _ref12 => {
     d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
   })));
 };
-var CopyIcon = _ref13 => {
+var CopyIcon = _ref18 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref13,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+    } = _ref18,
+    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -561,14 +683,14 @@ var CopyIcon = _ref13 => {
     d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
   })));
 };
-var DustBinIcon = _ref14 => {
+var DustBinIcon = _ref19 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref14,
-    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
+    } = _ref19,
+    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -580,14 +702,14 @@ var DustBinIcon = _ref14 => {
     d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
   })));
 };
-var EditIcon = _ref15 => {
+var EditIcon = _ref20 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref15,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
+    } = _ref20,
+    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -599,14 +721,14 @@ var EditIcon = _ref15 => {
     d: "M18.3785 8.44975L8.9636 17.8648C8.6844 18.144 8.3288 18.3343 7.94161 18.4117L4.99988 19.0001L5.58823 16.0583C5.66566 15.6711 5.85597 15.3155 6.13517 15.0363L15.5501 5.62132M18.3785 8.44975L19.7927 7.03553C20.1832 6.64501 20.1832 6.01184 19.7927 5.62132L18.3785 4.20711C17.988 3.81658 17.3548 3.81658 16.9643 4.20711L15.5501 5.62132M18.3785 8.44975L15.5501 5.62132"
   })));
 };
-var ErrorIcon = _ref16 => {
+var ErrorIcon = _ref21 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = true
-    } = _ref16,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
+    } = _ref21,
+    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -632,14 +754,14 @@ var ErrorIcon = _ref16 => {
     stroke: filled ? 'white' : color
   })));
 };
-var DownloadIcon = _ref17 => {
+var DownloadIcon = _ref22 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref17,
-    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
+    } = _ref22,
+    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -651,13 +773,13 @@ var DownloadIcon = _ref17 => {
     d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
   })));
 };
-var MenuIcon = _ref18 => {
+var MenuIcon = _ref23 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref18,
-    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
+    } = _ref23,
+    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -685,14 +807,14 @@ var MenuIcon = _ref18 => {
     y2: "18"
   })));
 };
-var ShareIcon = _ref19 => {
+var ShareIcon = _ref24 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref19,
-    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
+    } = _ref24,
+    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -726,13 +848,13 @@ var ShareIcon = _ref19 => {
     y2: "10.49"
   })));
 };
-var RefreshIcon = _ref20 => {
+var RefreshIcon = _ref25 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref20,
-    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
+    } = _ref25,
+    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -746,14 +868,14 @@ var RefreshIcon = _ref20 => {
     d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
   })));
 };
-var PrintIcon = _ref21 => {
+var PrintIcon = _ref26 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref21,
-    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
+    } = _ref26,
+    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -766,13 +888,13 @@ var PrintIcon = _ref21 => {
     d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"
   })));
 };
-var PanelIcon = _ref22 => {
+var PanelIcon = _ref27 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref22,
-    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
+    } = _ref27,
+    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -836,14 +958,14 @@ var PanelIcon = _ref22 => {
     y2: "16"
   })));
 };
-var FilterIcon = _ref23 => {
+var FilterIcon = _ref28 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref23,
-    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
+    } = _ref28,
+    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -855,14 +977,14 @@ var FilterIcon = _ref23 => {
     d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
   })));
 };
-var HomeIcon = _ref24 => {
+var HomeIcon = _ref29 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref24,
-    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
+    } = _ref29,
+    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -874,14 +996,14 @@ var HomeIcon = _ref24 => {
     d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
   })));
 };
-var LocationIcon = _ref25 => {
+var LocationIcon = _ref30 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref25,
-    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
+    } = _ref30,
+    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -893,14 +1015,14 @@ var LocationIcon = _ref25 => {
     d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
   })));
 };
-var LockIcon = _ref26 => {
+var LockIcon = _ref31 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref26,
-    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
+    } = _ref31,
+    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -919,14 +1041,14 @@ var LockIcon = _ref26 => {
     d: "M7 11V7a5 5 0 0 1 10 0v4"
   })));
 };
-var MicrophoneIcon = _ref27 => {
+var MicrophoneIcon = _ref32 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref27,
-    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
+    } = _ref32,
+    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -952,14 +1074,14 @@ var MicrophoneIcon = _ref27 => {
     y2: "23"
   })));
 };
-var MoonIcon = _ref28 => {
+var MoonIcon = _ref33 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref28,
-    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
+    } = _ref33,
+    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -971,14 +1093,14 @@ var MoonIcon = _ref28 => {
     d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
   })));
 };
-var NotificationIcon = _ref29 => {
+var NotificationIcon = _ref34 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref29,
-    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
+    } = _ref34,
+    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -992,14 +1114,14 @@ var NotificationIcon = _ref29 => {
     d: "M13.73 21a2 2 0 0 1-3.46 0"
   })));
 };
-var OpenEyeIcon = _ref30 => {
+var OpenEyeIcon = _ref35 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref30,
-    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
+    } = _ref35,
+    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1011,14 +1133,14 @@ var OpenEyeIcon = _ref30 => {
     d: "M12 4C7 4 2.73 7.11 1 12c1.73 4.89 6 8 11 8s9.27-3.11 11-8c-1.73-4.89-6-8-11-8zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
   })));
 };
-var ProfileIcon = _ref31 => {
+var ProfileIcon = _ref36 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref31,
-    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
+    } = _ref36,
+    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1031,14 +1153,14 @@ var ProfileIcon = _ref31 => {
     d: "M12 13c-2.67 0-8 1.34-8 4v2c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-2c0-2.66-5.33-4-8-4zm0-9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z M12 2C9.79 2 8 3.79 8 6s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z M12 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
   }), ' '));
 };
-var SettingsIcon = _ref32 => {
+var SettingsIcon = _ref37 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref32,
-    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
+    } = _ref37,
+    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1050,14 +1172,14 @@ var SettingsIcon = _ref32 => {
     d: "M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.2.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-.9l-.4-2.6c0-.2-.3-.4-.5-.4h-4c-.2 0-.5.2-.5.4l-.4 2.6c-.6.2-1.2.5-1.7.9l-2.5-1c-.2-.1-.5 0-.6.2l-2 3.5c-.1.2-.1.4.1.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.2-.2.4-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.5.4 1.1.7 1.7.9l.4 2.6c0 .2.3.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.5 1.7-.9l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.4-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
   })));
 };
-var SuccessIcon = _ref33 => {
+var SuccessIcon = _ref38 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref33,
-    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
+    } = _ref38,
+    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1069,14 +1191,14 @@ var SuccessIcon = _ref33 => {
     d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
   })));
 };
-var UnLikeIcon = _ref34 => {
+var UnLikeIcon = _ref39 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref34,
-    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
+    } = _ref39,
+    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1088,13 +1210,13 @@ var UnLikeIcon = _ref34 => {
     d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
   })));
 };
-var ClockIcon = _ref35 => {
+var ClockIcon = _ref40 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref35,
-    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
+    } = _ref40,
+    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1110,13 +1232,13 @@ var ClockIcon = _ref35 => {
     points: "12 6 12 12 16 14"
   })));
 };
-var CameraIcon = _ref36 => {
+var CameraIcon = _ref41 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref36,
-    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
+    } = _ref41,
+    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1132,14 +1254,14 @@ var CameraIcon = _ref36 => {
     r: "4"
   })));
 };
-var BluetoothIcon = _ref37 => {
+var BluetoothIcon = _ref42 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref37,
-    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+    } = _ref42,
+    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1151,14 +1273,14 @@ var BluetoothIcon = _ref37 => {
     d: "M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"
   })));
 };
-var LikeIcon = _ref38 => {
+var LikeIcon = _ref43 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref38,
-    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+    } = _ref43,
+    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1170,14 +1292,14 @@ var LikeIcon = _ref38 => {
     d: "M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
   })));
 };
-var UnlockIcon = _ref39 => {
+var UnlockIcon = _ref44 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref39,
-    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
+    } = _ref44,
+    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1196,14 +1318,14 @@ var UnlockIcon = _ref39 => {
     d: "M7 11V7a5 5 0 0 1 9.9-1"
   })));
 };
-var WifiIcon = _ref40 => {
+var WifiIcon = _ref45 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref40,
-    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
+    } = _ref45,
+    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1215,14 +1337,14 @@ var WifiIcon = _ref40 => {
     d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
   })));
 };
-var UploadIcon = _ref41 => {
+var UploadIcon = _ref46 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref41,
-    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
+    } = _ref46,
+    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1238,14 +1360,14 @@ var UploadIcon = _ref41 => {
     d: "M12 12l0 9"
   })));
 };
-var SearchIcon = _ref42 => {
+var SearchIcon = _ref47 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref42,
-    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+    } = _ref47,
+    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1257,14 +1379,14 @@ var SearchIcon = _ref42 => {
     d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
   })));
 };
-var CloseEyeIcon = _ref43 => {
+var CloseEyeIcon = _ref48 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref43,
-    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+    } = _ref48,
+    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1277,14 +1399,14 @@ var CloseEyeIcon = _ref43 => {
     fill: "currentColor"
   })));
 };
-var ExternalLinkIcon = _ref44 => {
+var ExternalLinkIcon = _ref49 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref44,
-    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+    } = _ref49,
+    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1296,14 +1418,14 @@ var ExternalLinkIcon = _ref44 => {
     d: "M14 3h7v7h-2V5.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h5v2H6v11h11v-4h2v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
   })));
 };
-var PlusIcon = _ref45 => {
+var PlusIcon = _ref50 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref45,
-    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+    } = _ref50,
+    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1325,14 +1447,14 @@ var PlusIcon = _ref45 => {
     y2: "12"
   })));
 };
-var TickIcon = _ref46 => {
+var TickIcon = _ref51 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref46,
-    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+    } = _ref51,
+    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1346,14 +1468,14 @@ var TickIcon = _ref46 => {
     strokeLinejoin: "round"
   })));
 };
-var BoldArrowIcon = _ref47 => {
+var BoldArrowIcon = _ref52 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref47,
-    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+    } = _ref52,
+    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1365,14 +1487,14 @@ var BoldArrowIcon = _ref47 => {
     d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
   })));
 };
-var ArrowIcon = _ref48 => {
+var ArrowIcon = _ref53 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref48,
-    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+    } = _ref53,
+    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1390,14 +1512,14 @@ var ArrowIcon = _ref48 => {
     points: "6 12 12 6 18 12"
   })));
 };
-var SpinnerIcon = _ref49 => {
+var SpinnerIcon = _ref54 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref49,
-    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+    } = _ref54,
+    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1415,13 +1537,13 @@ var SpinnerIcon = _ref49 => {
     strokeOpacity: "1"
   })));
 };
-var CalendarIcon = _ref50 => {
+var CalendarIcon = _ref55 => {
   var {
       size = 24,
       color = 'currentColor',
       strokeWidth = 1
-    } = _ref50,
-    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+    } = _ref55,
+    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -1461,6 +1583,11 @@ var Icon = {
   __proto__: null,
   ChevronIcon: ChevronIcon,
   CloseIcon: CloseIcon,
+  InstagramIcon: InstagramIcon,
+  TwitterIcon: TwitterIcon,
+  YoutubeIcon: YoutubeIcon,
+  LinkedinIcon: LinkedinIcon,
+  ThreadsIcon: ThreadsIcon,
   MinusIcon: MinusIcon,
   InfoIcon: InfoIcon,
   HeartIcon: HeartIcon,
@@ -6758,34 +6885,44 @@ Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
 var defaultStyles = {};
-// Initializes an empty 'defaultStyles' object that will be used as a fallback if no custom styles are provided.
-var TableStylesContext = /*#__PURE__*/React.createContext(defaultStyles);
-// Creates a new Context object for 'TableViewStyles' with the default value set to 'defaultStyles'. This allows the styles to be passed down through the component tree without having to pass props manually.
-var TableStylesProvider = _ref => {
+// Create a context that includes both styles and the onClick function
+var TableContext = /*#__PURE__*/React.createContext({
+  styles: defaultStyles,
+  onRowClick: () => {}
+});
+var TableProvider = _ref => {
   var {
     children,
-    styles = defaultStyles
+    styles = defaultStyles,
+    onRowClick
   } = _ref;
   return (
     /*#__PURE__*/
-    // The 'styles' prop is optional and defaults to 'defaultStyles' if not provided. When used, 'styles' are propagated down the component hierarchy.
-    React.createElement(TableStylesContext.Provider, {
-      value: styles
+    // Pass both styles and onClick to the context
+    React.createElement(TableContext.Provider, {
+      value: {
+        styles,
+        onRowClick
+      }
     }, children)
-    // Exports a custom hook 'useTableStyles' that encapsulates the logic for consuming the 'TableStylesContext' and returns its value, which are the current style configurations.
   );
 };
-var useTableStyles = () => React.useContext(TableStylesContext);
+// Custom hook to consume the context and get the styles and onClick handler
+var useTableContext = () => React.useContext(TableContext);
 
 var TableContainer = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "table",
     borderCollapse: "collapse"
   }, styles.table, props));
 };
 var TableHead = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "thead",
     borderBottom: "0.5px solid #ddd",
@@ -6794,7 +6931,9 @@ var TableHead = props => {
   }, styles.thead, props));
 };
 var TableHeadCell = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "th",
     padding: "14px",
@@ -6803,13 +6942,20 @@ var TableHeadCell = props => {
   }, styles.th, props));
 };
 var TableRow = props => {
-  var styles = useTableStyles();
+  var {
+    styles,
+    onRowClick
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "tr"
-  }, styles.tr, props));
+  }, styles.tr, {
+    onClick: onRowClick
+  }, props));
 };
 var TableCell = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "td",
     padding: "14px",
@@ -6818,19 +6964,25 @@ var TableCell = props => {
   }, styles.td, props));
 };
 var TableBody = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "tbody"
   }, styles.tbody, props));
 };
 var TableFooter = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "tfoot"
   }, styles.tfoot, props));
 };
 var TableCaption = props => {
-  var styles = useTableStyles();
+  var {
+    styles
+  } = useTableContext();
   return /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "caption",
     margin: '10px 0',
@@ -6861,10 +7013,12 @@ var TableView = _ref => {
 var Table = _ref => {
   var {
     children,
-    styles
+    styles,
+    onClick
   } = _ref;
-  return /*#__PURE__*/React.createElement(TableStylesProvider, {
-    styles: styles
+  return /*#__PURE__*/React.createElement(TableProvider, {
+    styles: styles,
+    onRowClick: onClick
   }, children);
 };
 Table.Head = TableHead;
@@ -7167,5 +7321,5 @@ var ToggleGroupComponent = _ref => {
 // Expose the ToggleGroupComponent for import into other modules
 var ToggleGroup = ToggleGroupComponent;
 
-export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, Icon, InfoIcon, Inline, Left, LikeIcon, Link, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, TickIcon, Toggle, ToggleGroup, Top, UnLikeIcon, UnlockIcon, UploadIcon, Vertical, View, WarningIcon, WifiIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
+export { Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Bottom, Button, CalendarIcon, CameraIcon, Center, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, CopyIcon, CountryPicker, DatePicker, DownloadIcon, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikPassword, FormikSelect, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HomeIcon, Horizontal, Icon, InfoIcon, Inline, InstagramIcon, Left, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MenuIcon, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NotificationIcon, OpenEyeIcon, PanelIcon, Password, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Right, SaveIcon, SearchIcon, Select, SettingsIcon, ShareIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, ThreadsIcon, TickIcon, Toggle, ToggleGroup, Top, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Vertical, View, WarningIcon, WifiIcon, YoutubeIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
 //# sourceMappingURL=web.esm.js.map