@app-studio/web 0.8.31 → 0.8.33

package/dist/web.esm.js

@@ -210,7 +210,7 @@ var Center = /*#__PURE__*/React.forwardRef((props, ref) => (/*#__PURE__*/React.c
 }))));
 Center.displayName = 'Center';
 
-var _excluded$3 = ["size", "color", "filled", "strokeWidth"],
+var _excluded$3 = ["size", "color", "transform", "orientation", "children"],
   _excluded2 = ["size", "color", "filled", "strokeWidth"],
   _excluded3 = ["size", "color", "filled", "strokeWidth"],
   _excluded4 = ["size", "color", "filled", "strokeWidth"],
@@ -224,82 +224,95 @@ var _excluded$3 = ["size", "color", "filled", "strokeWidth"],
   _excluded12 = ["size", "color", "filled", "strokeWidth"],
   _excluded13 = ["size", "color", "filled", "strokeWidth"],
   _excluded14 = ["size", "color", "filled", "strokeWidth"],
-  _excluded15 = ["size", "color"],
-  _excluded16 = ["size", "color"],
-  _excluded17 = ["size", "color"],
-  _excluded18 = ["size", "color"],
-  _excluded19 = ["size", "color"],
-  _excluded20 = ["size", "color", "filled", "strokeWidth"],
+  _excluded15 = ["size", "color", "filled", "strokeWidth"],
+  _excluded16 = ["size", "color", "filled", "strokeWidth"],
+  _excluded17 = ["size", "color", "filled", "strokeWidth"],
+  _excluded18 = ["size", "color", "filled", "strokeWidth"],
+  _excluded19 = ["size", "color", "filled", "strokeWidth"],
+  _excluded20 = ["size", "color", "strokeWidth", "filled"],
   _excluded21 = ["size", "color", "filled", "strokeWidth"],
-  _excluded22 = ["size", "color", "filled", "strokeWidth"],
+  _excluded22 = ["size", "color", "strokeWidth"],
   _excluded23 = ["size", "color", "filled", "strokeWidth"],
-  _excluded24 = ["size", "color", "filled", "strokeWidth"],
+  _excluded24 = ["size", "color", "strokeWidth"],
   _excluded25 = ["size", "color", "filled", "strokeWidth"],
-  _excluded26 = ["size", "color", "filled", "strokeWidth"],
+  _excluded26 = ["size", "color", "strokeWidth"],
   _excluded27 = ["size", "color", "filled", "strokeWidth"],
   _excluded28 = ["size", "color", "filled", "strokeWidth"],
   _excluded29 = ["size", "color", "filled", "strokeWidth"],
   _excluded30 = ["size", "color", "filled", "strokeWidth"],
   _excluded31 = ["size", "color", "filled", "strokeWidth"],
-  _excluded32 = ["size", "color"],
-  _excluded33 = ["size", "color"],
-  _excluded34 = ["size", "color"],
+  _excluded32 = ["size", "color", "filled", "strokeWidth"],
+  _excluded33 = ["size", "color", "filled", "strokeWidth"],
+  _excluded34 = ["size", "color", "filled", "strokeWidth"],
   _excluded35 = ["size", "color", "filled", "strokeWidth"],
   _excluded36 = ["size", "color", "filled", "strokeWidth"],
   _excluded37 = ["size", "color", "filled", "strokeWidth"],
   _excluded38 = ["size", "color", "filled", "strokeWidth"],
-  _excluded39 = ["size", "color"],
-  _excluded40 = ["size", "color"],
-  _excluded41 = ["size", "color"],
-  _excluded42 = ["size", "color"],
-  _excluded43 = ["size", "color"],
-  _excluded44 = ["size", "color"],
-  _excluded45 = ["size", "color"],
-  _excluded46 = ["size", "color"],
-  _excluded47 = ["size", "color"],
-  _excluded48 = ["size", "color"],
-  _excluded49 = ["size", "color"];
-// Default wrapper component for consistent sizing
+  _excluded39 = ["size", "color", "strokeWidth"],
+  _excluded40 = ["size", "color", "strokeWidth"],
+  _excluded41 = ["size", "color", "filled", "strokeWidth"],
+  _excluded42 = ["size", "color", "filled", "strokeWidth"],
+  _excluded43 = ["size", "color", "filled", "strokeWidth"],
+  _excluded44 = ["size", "color", "filled", "strokeWidth"],
+  _excluded45 = ["size", "color", "filled", "strokeWidth"],
+  _excluded46 = ["size", "color", "filled", "strokeWidth"],
+  _excluded47 = ["size", "color", "filled", "strokeWidth"],
+  _excluded48 = ["size", "color", "filled", "strokeWidth"],
+  _excluded49 = ["size", "color", "filled", "strokeWidth"],
+  _excluded50 = ["size", "color", "filled", "strokeWidth"],
+  _excluded51 = ["size", "color", "filled", "strokeWidth"],
+  _excluded52 = ["size", "color", "filled", "strokeWidth"],
+  _excluded53 = ["size", "color", "filled", "strokeWidth"],
+  _excluded54 = ["size", "color", "strokeWidth"];
+// Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
-    size,
-    color = 'black',
-    transform,
-    orientation,
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(Center, {
+      size,
+      color = 'black',
+      transform,
+      orientation,
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return /*#__PURE__*/React.createElement(Center, Object.assign({
     size: size,
     lineHeight: size,
     color: color,
     display: "flex",
-    transform: transform ? transform : orientation == 'left' ? 'rotate(-90deg)' : orientation == 'right' ? 'rotate(90deg)' : orientation == 'up' ? 'rotate(0deg)' : orientation == 'down' ? 'rotate(180deg)' : 'none'
-  }, children);
+    transform: transform ? transform : orientation === 'left' ? 'rotate(-90deg)' : orientation === 'right' ? 'rotate(90deg)' : orientation === 'up' ? 'rotate(0deg)' : orientation === 'down' ? 'rotate(180deg)' : 'none'
+  }, rest), children);
 };
+// Utility function to handle fill and stroke based on 'filled' prop
+var getSvgProps = (filled, color, strokeWidth) => {
+  return {
+    fill: filled ? color : 'none',
+    stroke: filled ? 'none' : color,
+    strokeWidth,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  };
+};
+// Example Icon Component: ChevronIcon
 var ChevronIcon = _ref2 => {
   var {
       size = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    fill: filled ? color : 'none',
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "true",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
   })));
 };
+// Example of another Icon: CloseIcon
 var CloseIcon = _ref3 => {
   var {
       size = 24,
@@ -307,95 +320,226 @@ var CloseIcon = _ref3 => {
       filled = false,
       strokeWidth = 1
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
+    "aria-hidden": "true",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "18",
     y1: "6",
     x2: "6",
     y2: "18"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "6",
     y1: "6",
     x2: "18",
     y2: "18"
   })));
 };
-var HeartIcon = _ref4 => {
+var InstagramIcon = _ref4 => {
   var {
       size = 24,
       color = 'currentColor',
-      filled = true,
+      filled = false,
       strokeWidth = 1
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "true",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__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 YoutubeIcon = _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", Object.assign({
+    viewBox: "0 0 24 24"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__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 = _ref6 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__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 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 = _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", Object.assign({
+    viewBox: "0 0 24 24"
+  }, 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 = _ref8 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      // Assuming minus can be filled; adjust as needed
+      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({
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
+    x1: "8",
+    y1: "12",
+    x2: "16",
+    y2: "12"
+  })));
+};
+// Example Refactored Icon: InfoIcon with accessibility enhancements
+var InfoIcon = _ref9 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props, {
+    "aria-label": "Information"
+  }), /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
+    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 = _ref10 => {
+  var {
+      size = 24,
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref10,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+  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": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref5 => {
+var StarIcon = _ref11 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+    } = _ref11,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("polygon", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("polygon", {
     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 = _ref6 => {
+var SaveIcon = _ref12 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+    } = _ref12,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
   }), /*#__PURE__*/React.createElement("polyline", {
     points: "17 21 17 13 7 13 7 21"
@@ -403,123 +547,110 @@ var SaveIcon = _ref6 => {
     points: "7 3 7 8 15 8"
   })));
 };
-var WarningIcon = _ref7 => {
+var WarningIcon = _ref13 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+    } = _ref13,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M10.29 3.86l-6.6 11.4c-.78 1.36.2 3.1 1.71 3.1h13.2c1.51 0 2.49-1.74 1.71-3.1l-6.6-11.4a2 2 0 0 0-3.42 0z"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "6",
     x2: "12",
     y2: "13"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "15",
     x2: "12",
     y2: "15"
   })));
 };
-var BatteryIcon = _ref8 => {
+var BatteryIcon = _ref14 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+    } = _ref14,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref9 => {
+var BookmarkIcon = _ref15 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref9,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
+    } = _ref15,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
   })));
 };
-var CloudIcon = _ref10 => {
+var CloudIcon = _ref16 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded9);
+    } = _ref16,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
   })));
 };
-var CopyIcon = _ref11 => {
+var CopyIcon = _ref17 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref11,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded10);
+    } = _ref17,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("rect", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("rect", {
     x: "9",
     y: "9",
     width: "13",
@@ -530,158 +661,146 @@ var CopyIcon = _ref11 => {
     d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
   })));
 };
-var DustBinIcon = _ref12 => {
+var DustBinIcon = _ref18 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref12,
-    props = _objectWithoutPropertiesLoose(_ref12, _excluded11);
+    } = _ref18,
+    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref13 => {
+var EditIcon = _ref19 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref13,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded12);
+    } = _ref19,
+    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref14 => {
+var ErrorIcon = _ref20 => {
   var {
       size = 24,
       color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref14,
-    props = _objectWithoutPropertiesLoose(_ref14, _excluded13);
+      strokeWidth = 1,
+      filled = true
+    } = _ref20,
+    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? 'currentColor' : 'none',
-    stroke: filled ? 'white' : 'currentColor',
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("circle", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/React.createElement("line", {
-    fill: filled ? 'currentColor' : 'none',
     x1: "15",
     y1: "9",
     x2: "9",
-    y2: "15"
+    y2: "15",
+    stroke: filled ? 'white' : color
   }), /*#__PURE__*/React.createElement("line", {
-    fill: filled ? 'currentColor' : 'none',
     x1: "9",
     y1: "9",
     x2: "15",
-    y2: "15"
+    y2: "15",
+    stroke: filled ? 'white' : color
   })));
 };
-var DownloadIcon = _ref15 => {
+var DownloadIcon = _ref21 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref15,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+    } = _ref21,
+    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
   })));
 };
-var MenuIcon = _ref16 => {
+var MenuIcon = _ref22 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref16,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref22,
+    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "3",
     y1: "12",
     x2: "21",
     y2: "12"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "3",
     y1: "6",
     x2: "21",
     y2: "6"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "3",
     y1: "18",
     x2: "21",
     y2: "18"
   })));
 };
-var ShareIcon = _ref17 => {
+var ShareIcon = _ref23 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref17,
-    props = _objectWithoutPropertiesLoose(_ref17, _excluded16);
+      color = 'currentColor',
+      filled = false,
+      strokeWidth = 1
+    } = _ref23,
+    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("circle", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("circle", {
     cx: "18",
     cy: "5",
     r: "3"
@@ -694,45 +813,47 @@ var ShareIcon = _ref17 => {
     cy: "19",
     r: "3"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "8.59",
     y1: "13.51",
     x2: "15.42",
     y2: "17.49"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "15.41",
     y1: "6.51",
     x2: "8.59",
     y2: "10.49"
   })));
 };
-var RefreshIcon = _ref18 => {
+var RefreshIcon = _ref24 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref18,
-    props = _objectWithoutPropertiesLoose(_ref18, _excluded17);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref24,
+    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("polyline", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("polyline", {
     points: "23 4 23 10 17 10"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
   })));
 };
-var PrintIcon = _ref19 => {
+var PrintIcon = _ref25 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref19,
-    props = _objectWithoutPropertiesLoose(_ref19, _excluded18);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref25,
+    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
@@ -745,155 +866,149 @@ var PrintIcon = _ref19 => {
     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 = _ref20 => {
+var PanelIcon = _ref26 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref20,
-    props = _objectWithoutPropertiesLoose(_ref20, _excluded19);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref26,
+    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "4",
     y1: "21",
     x2: "4",
     y2: "14"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "4",
     y1: "10",
     x2: "4",
     y2: "3"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "21",
     x2: "12",
     y2: "12"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "8",
     x2: "12",
     y2: "3"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "20",
     y1: "21",
     x2: "20",
     y2: "16"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "20",
     y1: "12",
     x2: "20",
     y2: "3"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "1",
     y1: "14",
     x2: "7",
     y2: "14"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "9",
     y1: "8",
     x2: "15",
     y2: "8"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "17",
     y1: "16",
     x2: "23",
     y2: "16"
   })));
 };
-var FilterIcon = _ref21 => {
+var FilterIcon = _ref27 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref21,
-    props = _objectWithoutPropertiesLoose(_ref21, _excluded20);
+    } = _ref27,
+    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
   })));
 };
-var HomeIcon = _ref22 => {
+var HomeIcon = _ref28 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref22,
-    props = _objectWithoutPropertiesLoose(_ref22, _excluded21);
+    } = _ref28,
+    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
   })));
 };
-var LocationIcon = _ref23 => {
+var LocationIcon = _ref29 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref23,
-    props = _objectWithoutPropertiesLoose(_ref23, _excluded22);
+    } = _ref29,
+    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref24 => {
+var LockIcon = _ref30 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref24,
-    props = _objectWithoutPropertiesLoose(_ref24, _excluded23);
+    } = _ref30,
+    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
-    color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("rect", {
+    color: color
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
+    viewBox: "0 0 24 24",
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("rect", {
     x: "3",
     y: "11",
     width: "18",
@@ -904,214 +1019,190 @@ var LockIcon = _ref24 => {
     d: "M7 11V7a5 5 0 0 1 10 0v4"
   })));
 };
-var MicrophoneIcon = _ref25 => {
+var MicrophoneIcon = _ref31 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref25,
-    props = _objectWithoutPropertiesLoose(_ref25, _excluded24);
+    } = _ref31,
+    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M12 1a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V5a4 4 0 0 0-4-4z"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M19 10v2a7 7 0 0 1-14 0v-2"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "19",
     x2: "12",
     y2: "23"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "8",
     y1: "23",
     x2: "16",
     y2: "23"
   })));
 };
-var MoonIcon = _ref26 => {
+var MoonIcon = _ref32 => {
   var {
       size = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
-    } = _ref26,
-    props = _objectWithoutPropertiesLoose(_ref26, _excluded25);
+    } = _ref32,
+    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
   })));
 };
-var NotificationIcon = _ref27 => {
+var NotificationIcon = _ref33 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref27,
-    props = _objectWithoutPropertiesLoose(_ref27, _excluded26);
+    } = _ref33,
+    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M13.73 21a2 2 0 0 1-3.46 0"
   })));
 };
-var OpenEyeIcon = _ref28 => {
+var OpenEyeIcon = _ref34 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref28,
-    props = _objectWithoutPropertiesLoose(_ref28, _excluded27);
+    } = _ref34,
+    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref29 => {
+var ProfileIcon = _ref35 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref29,
-    props = _objectWithoutPropertiesLoose(_ref29, _excluded28);
+    } = _ref35,
+    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     fill: filled ? color : 'none',
     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 = _ref30 => {
+var SettingsIcon = _ref36 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref30,
-    props = _objectWithoutPropertiesLoose(_ref30, _excluded29);
+    } = _ref36,
+    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref31 => {
+var SuccessIcon = _ref37 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref31,
-    props = _objectWithoutPropertiesLoose(_ref31, _excluded30);
+    } = _ref37,
+    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref32 => {
+var UnLikeIcon = _ref38 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref32,
-    props = _objectWithoutPropertiesLoose(_ref32, _excluded31);
+    } = _ref38,
+    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref33 => {
+var ClockIcon = _ref39 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref33,
-    props = _objectWithoutPropertiesLoose(_ref33, _excluded32);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref39,
+    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("circle", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10"
@@ -1119,23 +1210,21 @@ var ClockIcon = _ref33 => {
     points: "12 6 12 12 16 14"
   })));
 };
-var CameraIcon = _ref34 => {
+var CameraIcon = _ref40 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref34,
-    props = _objectWithoutPropertiesLoose(_ref34, _excluded33);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref40,
+    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3l2-3h8l2 3h3a2 2 0 0 1 2 2z"
   }), /*#__PURE__*/React.createElement("circle", {
     cx: "12",
@@ -1143,63 +1232,60 @@ var CameraIcon = _ref34 => {
     r: "4"
   })));
 };
-var BluetoothIcon = _ref35 => {
+var BluetoothIcon = _ref41 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref35,
-    props = _objectWithoutPropertiesLoose(_ref35, _excluded34);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref41,
+    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref36 => {
+var LikeIcon = _ref42 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref36,
-    props = _objectWithoutPropertiesLoose(_ref36, _excluded35);
+    } = _ref42,
+    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref37 => {
+var UnlockIcon = _ref43 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref37,
-    props = _objectWithoutPropertiesLoose(_ref37, _excluded36);
+    } = _ref43,
+    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("rect", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("rect", {
     x: "3",
     y: "11",
     width: "18",
@@ -1210,47 +1296,41 @@ var UnlockIcon = _ref37 => {
     d: "M7 11V7a5 5 0 0 1 9.9-1"
   })));
 };
-var WifiIcon = _ref38 => {
+var WifiIcon = _ref44 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref38,
-    props = _objectWithoutPropertiesLoose(_ref38, _excluded37);
+    } = _ref44,
+    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref39 => {
+var UploadIcon = _ref45 => {
   var {
       size = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref39,
-    props = _objectWithoutPropertiesLoose(_ref39, _excluded38);
+    } = _ref45,
+    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9 15l3 -3l3 3"
@@ -1258,163 +1338,150 @@ var UploadIcon = _ref39 => {
     d: "M12 12l0 9"
   })));
 };
-var SearchIcon = _ref40 => {
+var SearchIcon = _ref46 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref40,
-    props = _objectWithoutPropertiesLoose(_ref40, _excluded39);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref46,
+    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 = _ref41 => {
+var CloseEyeIcon = _ref47 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref41,
-    props = _objectWithoutPropertiesLoose(_ref41, _excluded40);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref47,
+    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: color
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z",
     fill: "currentColor"
   })));
 };
-var ExternalLinkIcon = _ref42 => {
+var ExternalLinkIcon = _ref48 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref42,
-    props = _objectWithoutPropertiesLoose(_ref42, _excluded41);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref48,
+    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     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 MinusIcon = _ref43 => {
-  var {
-      size = 24,
-      color = 'currentColor'
-    } = _ref43,
-    props = _objectWithoutPropertiesLoose(_ref43, _excluded42);
-  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    padding: 2,
-    size: size,
-    color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: 'currentColor',
-    strokeWidth: "1"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7 12h10",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-};
-var InfoIcon = _ref44 => {
-  var {
-      size = 24,
-      color = 'currentColor'
-    } = _ref44,
-    props = _objectWithoutPropertiesLoose(_ref44, _excluded43);
-  return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
-    size: size,
-    color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
-    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 PlusIcon = _ref45 => {
+var PlusIcon = _ref49 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref45,
-    props = _objectWithoutPropertiesLoose(_ref45, _excluded44);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref49,
+    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
+  }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
   })));
 };
-var TickIcon = _ref46 => {
+var TickIcon = _ref50 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref46,
-    props = _objectWithoutPropertiesLoose(_ref46, _excluded45);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref50,
+    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: 'currentColor',
-    strokeWidth: "1"
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M5 13l4 4L19 7",
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })));
 };
-var BoldArrowIcon = _ref47 => {
+var BoldArrowIcon = _ref51 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref47,
-    props = _objectWithoutPropertiesLoose(_ref47, _excluded46);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref51,
+    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: 'currentColor'
-  }, /*#__PURE__*/React.createElement("path", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("path", {
     d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
   })));
 };
-var ArrowIcon = _ref48 => {
+var ArrowIcon = _ref52 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref48,
-    props = _objectWithoutPropertiesLoose(_ref48, _excluded47);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref52,
+    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    strokeWidth: "1",
-    stroke: 'currentColor',
-    fill: "none",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("line", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "12",
     y1: "20",
     x2: "12",
@@ -1423,26 +1490,22 @@ var ArrowIcon = _ref48 => {
     points: "6 12 12 6 18 12"
   })));
 };
-var SpinnerIcon = _ref49 => {
+var SpinnerIcon = _ref53 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref49,
-    props = _objectWithoutPropertiesLoose(_ref49, _excluded48);
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref53,
+    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   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",
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("circle", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10",
@@ -1452,23 +1515,21 @@ var SpinnerIcon = _ref49 => {
     strokeOpacity: "1"
   })));
 };
-var CalendarIcon = _ref50 => {
+var CalendarIcon = _ref54 => {
   var {
       size = 24,
-      color = 'currentColor'
-    } = _ref50,
-    props = _objectWithoutPropertiesLoose(_ref50, _excluded49);
+      color = 'currentColor',
+      strokeWidth = 1
+    } = _ref54,
+    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React.createElement(IconWrapper, Object.assign({
     size: size,
     color: color
-  }, props), /*#__PURE__*/React.createElement("svg", {
+  }, props), /*#__PURE__*/React.createElement("svg", Object.assign({
     viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "1",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("rect", {
+    "aria-hidden": "false",
+    focusable: "false"
+  }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React.createElement("rect", {
     x: "3",
     y: "4",
     width: "18",
@@ -1476,16 +1537,19 @@ var CalendarIcon = _ref50 => {
     rx: "2",
     ry: "2"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "16",
     y1: "2",
     x2: "16",
     y2: "6"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "8",
     y1: "2",
     x2: "8",
     y2: "6"
   }), /*#__PURE__*/React.createElement("line", {
+    stroke: color,
     x1: "3",
     y1: "10",
     x2: "21",
@@ -1497,6 +1561,12 @@ var Icon = {
   __proto__: null,
   ChevronIcon: ChevronIcon,
   CloseIcon: CloseIcon,
+  InstagramIcon: InstagramIcon,
+  YoutubeIcon: YoutubeIcon,
+  LinkedinIcon: LinkedinIcon,
+  ThreadsIcon: ThreadsIcon,
+  MinusIcon: MinusIcon,
+  InfoIcon: InfoIcon,
   HeartIcon: HeartIcon,
   StarIcon: StarIcon,
   SaveIcon: SaveIcon,
@@ -1536,8 +1606,6 @@ var Icon = {
   SearchIcon: SearchIcon,
   CloseEyeIcon: CloseEyeIcon,
   ExternalLinkIcon: ExternalLinkIcon,
-  MinusIcon: MinusIcon,
-  InfoIcon: InfoIcon,
   PlusIcon: PlusIcon,
   TickIcon: TickIcon,
   BoldArrowIcon: BoldArrowIcon,
@@ -6794,34 +6862,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",
@@ -6830,7 +6908,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",
@@ -6839,13 +6919,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",
@@ -6854,19 +6941,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',
@@ -6897,10 +6990,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;
@@ -7203,5 +7298,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, UnLikeIcon, UnlockIcon, UploadIcon, Vertical, View, WarningIcon, WifiIcon, YoutubeIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore };
 //# sourceMappingURL=web.esm.js.map