@app-studio/web 0.8.26 → 0.8.28

package/dist/web.umd.development.js

@@ -160,16 +160,16 @@
   var _excluded$1 = ["justifyContent", "isReversed"];
   var Vertical = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     var {
+        // Sets a default alignment for content within the Vertical container to 'flex-start'
         justifyContent = 'flex-start',
+        // Determines the direction in which the Vertical elements are stacked, default not reversed
         isReversed = false
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-    return /*#__PURE__*/React__default.createElement("div", Object.assign({
-      style: {
-        display: 'flex',
-        justifyContent: justifyContent,
-        flexDirection: isReversed ? 'column-reverse' : 'column'
-      }
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      display: "flex",
+      justifyContent: justifyContent,
+      flexDirection: isReversed ? 'column-reverse' : 'column'
     }, props, {
       ref: ref
     }));
@@ -195,20 +195,16 @@
   });
   Horizontal.displayName = 'Horizontal';
 
-  var _excluded$3 = ["isReversed"];
-  var Center = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-    var props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center"
-    }, props, {
-      ref: ref
-    }));
-  });
+  var Center = /*#__PURE__*/React__default.forwardRef((props, ref) => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, props, {
+    ref: ref
+  }))));
   Center.displayName = 'Center';
 
-  var _excluded$4 = ["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"],
@@ -222,14 +218,14 @@
     _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", "strokeWidth", "filled"],
+    _excluded17 = ["size", "color", "filled", "strokeWidth"],
+    _excluded18 = ["size", "color", "strokeWidth"],
+    _excluded19 = ["size", "color", "filled", "strokeWidth"],
+    _excluded20 = ["size", "color", "strokeWidth"],
     _excluded21 = ["size", "color", "filled", "strokeWidth"],
-    _excluded22 = ["size", "color", "filled", "strokeWidth"],
+    _excluded22 = ["size", "color", "strokeWidth"],
     _excluded23 = ["size", "color", "filled", "strokeWidth"],
     _excluded24 = ["size", "color", "filled", "strokeWidth"],
     _excluded25 = ["size", "color", "filled", "strokeWidth"],
@@ -239,65 +235,74 @@
     _excluded29 = ["size", "color", "filled", "strokeWidth"],
     _excluded30 = ["size", "color", "filled", "strokeWidth"],
     _excluded31 = ["size", "color", "filled", "strokeWidth"],
-    _excluded32 = ["size", "color"],
-    _excluded33 = ["size", "color"],
-    _excluded34 = ["size", "color"],
-    _excluded35 = ["size", "color", "filled", "strokeWidth"],
-    _excluded36 = ["size", "color", "filled", "strokeWidth"],
+    _excluded32 = ["size", "color", "filled", "strokeWidth"],
+    _excluded33 = ["size", "color", "filled", "strokeWidth"],
+    _excluded34 = ["size", "color", "filled", "strokeWidth"],
+    _excluded35 = ["size", "color", "strokeWidth"],
+    _excluded36 = ["size", "color", "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", "filled", "strokeWidth"],
+    _excluded40 = ["size", "color", "filled", "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", "strokeWidth"];
+  // Default wrapper component for consistent sizing and styling
   var IconWrapper = _ref => {
     var {
-      size,
-      color = 'black',
-      transform,
-      orientation,
-      children
-    } = _ref;
-    return /*#__PURE__*/React__default.createElement(Center, {
+        size,
+        color = 'black',
+        transform,
+        orientation,
+        children
+      } = _ref,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    return /*#__PURE__*/React__default.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$4);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      width: "16",
-      height: "16",
-      fill: filled ? color : 'none',
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      stroke: filled ? 'none' : color,
-      strokeWidth: strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "true",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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,
@@ -305,95 +310,126 @@
         filled = false,
         strokeWidth = 1
       } = _ref3,
-      props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
+    }, props), /*#__PURE__*/React__default.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__default.createElement("line", {
+      "aria-hidden": "true",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "18",
       y1: "6",
       x2: "6",
       y2: "18"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "6",
       y1: "6",
       x2: "18",
       y2: "18"
     })));
   };
-  var HeartIcon = _ref4 => {
+  // Continue refactoring other icons similarly...
+  // Example Refactored Icon: MinusIcon without undefined 'padding' prop
+  var MinusIcon = _ref4 => {
     var {
         size = 24,
         color = 'currentColor',
-        filled = true,
+        filled = false,
+        // Assuming minus can be filled; adjust as needed
         strokeWidth = 1
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "true",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
+      d: "M5 12h14"
+    })));
+  };
+  // Example Refactored Icon: InfoIcon with accessibility enhancements
+  var InfoIcon = _ref5 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = false,
+        strokeWidth = 1
+      } = _ref5,
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props, {
+      "aria-label": "Information"
+    }), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref6 => {
+    var {
+        size = 24,
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref6,
+      props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      size: size,
+      color: color
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      viewBox: "0 0 24 24",
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref7 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+      } = _ref7,
+      props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
+    }, props), /*#__PURE__*/React__default.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__default.createElement("polygon", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref8 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref6,
-      props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+      } = _ref8,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("polyline", {
       points: "17 21 17 13 7 13 7 21"
@@ -401,123 +437,110 @@
       points: "7 3 7 8 15 8"
     })));
   };
-  var WarningIcon = _ref7 => {
+  var WarningIcon = _ref9 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref7,
-      props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+      } = _ref9,
+      props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "6",
       x2: "12",
       y2: "13"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "15",
       x2: "12",
       y2: "15"
     })));
   };
-  var BatteryIcon = _ref8 => {
+  var BatteryIcon = _ref10 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref8,
-      props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+      } = _ref10,
+      props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref11 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref9,
-      props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
+      } = _ref11,
+      props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref12 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref10,
-      props = _objectWithoutPropertiesLoose(_ref10, _excluded9);
+      } = _ref12,
+      props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
     })));
   };
-  var CopyIcon = _ref11 => {
+  var CopyIcon = _ref13 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref11,
-      props = _objectWithoutPropertiesLoose(_ref11, _excluded10);
+      } = _ref13,
+      props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("rect", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
       x: "9",
       y: "9",
       width: "13",
@@ -528,158 +551,146 @@
       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 = _ref14 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref12,
-      props = _objectWithoutPropertiesLoose(_ref12, _excluded11);
+      } = _ref14,
+      props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref15 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref13,
-      props = _objectWithoutPropertiesLoose(_ref13, _excluded12);
+      } = _ref15,
+      props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref16 => {
     var {
         size = 24,
         color = 'currentColor',
-        filled = true,
-        strokeWidth = 1
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded13);
+        strokeWidth = 1,
+        filled = true
+      } = _ref16,
+      props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("circle", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "10"
     }), /*#__PURE__*/React__default.createElement("line", {
-      fill: filled ? 'currentColor' : 'none',
       x1: "15",
       y1: "9",
       x2: "9",
-      y2: "15"
+      y2: "15",
+      stroke: filled ? 'white' : color
     }), /*#__PURE__*/React__default.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 = _ref17 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref15,
-      props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+      } = _ref17,
+      props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
     })));
   };
-  var MenuIcon = _ref16 => {
+  var MenuIcon = _ref18 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref16,
-      props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+        color = 'currentColor',
+        strokeWidth = 1
+      } = _ref18,
+      props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("line", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "3",
       y1: "12",
       x2: "21",
       y2: "12"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "3",
       y1: "6",
       x2: "21",
       y2: "6"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "3",
       y1: "18",
       x2: "21",
       y2: "18"
     })));
   };
-  var ShareIcon = _ref17 => {
+  var ShareIcon = _ref19 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref17,
-      props = _objectWithoutPropertiesLoose(_ref17, _excluded16);
+        color = 'currentColor',
+        filled = false,
+        strokeWidth = 1
+      } = _ref19,
+      props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("circle", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
       cx: "18",
       cy: "5",
       r: "3"
@@ -692,45 +703,47 @@
       cy: "19",
       r: "3"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "8.59",
       y1: "13.51",
       x2: "15.42",
       y2: "17.49"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "15.41",
       y1: "6.51",
       x2: "8.59",
       y2: "10.49"
     })));
   };
-  var RefreshIcon = _ref18 => {
+  var RefreshIcon = _ref20 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref18,
-      props = _objectWithoutPropertiesLoose(_ref18, _excluded17);
+        color = 'currentColor',
+        strokeWidth = 1
+      } = _ref20,
+      props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("polyline", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("polyline", {
       points: "23 4 23 10 17 10"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
     })));
   };
-  var PrintIcon = _ref19 => {
+  var PrintIcon = _ref21 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref19,
-      props = _objectWithoutPropertiesLoose(_ref19, _excluded18);
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref21,
+      props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
@@ -743,155 +756,149 @@
       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 = _ref22 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref20,
-      props = _objectWithoutPropertiesLoose(_ref20, _excluded19);
+        color = 'currentColor',
+        strokeWidth = 1
+      } = _ref22,
+      props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("line", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "4",
       y1: "21",
       x2: "4",
       y2: "14"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "4",
       y1: "10",
       x2: "4",
       y2: "3"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "21",
       x2: "12",
       y2: "12"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "8",
       x2: "12",
       y2: "3"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "20",
       y1: "21",
       x2: "20",
       y2: "16"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "20",
       y1: "12",
       x2: "20",
       y2: "3"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "1",
       y1: "14",
       x2: "7",
       y2: "14"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "9",
       y1: "8",
       x2: "15",
       y2: "8"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "17",
       y1: "16",
       x2: "23",
       y2: "16"
     })));
   };
-  var FilterIcon = _ref21 => {
+  var FilterIcon = _ref23 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref21,
-      props = _objectWithoutPropertiesLoose(_ref21, _excluded20);
+      } = _ref23,
+      props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
     })));
   };
-  var HomeIcon = _ref22 => {
+  var HomeIcon = _ref24 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref22,
-      props = _objectWithoutPropertiesLoose(_ref22, _excluded21);
+      } = _ref24,
+      props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
     })));
   };
-  var LocationIcon = _ref23 => {
+  var LocationIcon = _ref25 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref23,
-      props = _objectWithoutPropertiesLoose(_ref23, _excluded22);
+      } = _ref25,
+      props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref26 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref24,
-      props = _objectWithoutPropertiesLoose(_ref24, _excluded23);
+      } = _ref26,
+      props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("rect", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -902,214 +909,190 @@
       d: "M7 11V7a5 5 0 0 1 10 0v4"
     })));
   };
-  var MicrophoneIcon = _ref25 => {
+  var MicrophoneIcon = _ref27 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref25,
-      props = _objectWithoutPropertiesLoose(_ref25, _excluded24);
+      } = _ref27,
+      props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("path", {
       d: "M19 10v2a7 7 0 0 1-14 0v-2"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "19",
       x2: "12",
       y2: "23"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "8",
       y1: "23",
       x2: "16",
       y2: "23"
     })));
   };
-  var MoonIcon = _ref26 => {
+  var MoonIcon = _ref28 => {
     var {
         size = 24,
         color = 'currentColor',
-        filled = false,
+        filled = true,
         strokeWidth = 1
-      } = _ref26,
-      props = _objectWithoutPropertiesLoose(_ref26, _excluded25);
+      } = _ref28,
+      props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
     })));
   };
-  var NotificationIcon = _ref27 => {
+  var NotificationIcon = _ref29 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref27,
-      props = _objectWithoutPropertiesLoose(_ref27, _excluded26);
+      } = _ref29,
+      props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M13.73 21a2 2 0 0 1-3.46 0"
     })));
   };
-  var OpenEyeIcon = _ref28 => {
+  var OpenEyeIcon = _ref30 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref28,
-      props = _objectWithoutPropertiesLoose(_ref28, _excluded27);
+      } = _ref30,
+      props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref31 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref29,
-      props = _objectWithoutPropertiesLoose(_ref29, _excluded28);
+      } = _ref31,
+      props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref32 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref30,
-      props = _objectWithoutPropertiesLoose(_ref30, _excluded29);
+      } = _ref32,
+      props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref33 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref31,
-      props = _objectWithoutPropertiesLoose(_ref31, _excluded30);
+      } = _ref33,
+      props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref34 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref32,
-      props = _objectWithoutPropertiesLoose(_ref32, _excluded31);
+      } = _ref34,
+      props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref35 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref33,
-      props = _objectWithoutPropertiesLoose(_ref33, _excluded32);
+        color = 'currentColor',
+        strokeWidth = 1
+      } = _ref35,
+      props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("circle", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "10"
@@ -1117,23 +1100,21 @@
       points: "12 6 12 12 16 14"
     })));
   };
-  var CameraIcon = _ref34 => {
+  var CameraIcon = _ref36 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref34,
-      props = _objectWithoutPropertiesLoose(_ref34, _excluded33);
+        color = 'currentColor',
+        strokeWidth = 1
+      } = _ref36,
+      props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("circle", {
       cx: "12",
@@ -1141,63 +1122,60 @@
       r: "4"
     })));
   };
-  var BluetoothIcon = _ref35 => {
+  var BluetoothIcon = _ref37 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref35,
-      props = _objectWithoutPropertiesLoose(_ref35, _excluded34);
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref37,
+      props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref38 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = true,
         strokeWidth = 1
-      } = _ref36,
-      props = _objectWithoutPropertiesLoose(_ref36, _excluded35);
+      } = _ref38,
+      props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref39 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref37,
-      props = _objectWithoutPropertiesLoose(_ref37, _excluded36);
+      } = _ref39,
+      props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("rect", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -1208,47 +1186,41 @@
       d: "M7 11V7a5 5 0 0 1 9.9-1"
     })));
   };
-  var WifiIcon = _ref38 => {
+  var WifiIcon = _ref40 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref38,
-      props = _objectWithoutPropertiesLoose(_ref38, _excluded37);
+      } = _ref40,
+      props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref41 => {
     var {
         size = 24,
         color = 'currentColor',
         filled = false,
         strokeWidth = 1
-      } = _ref39,
-      props = _objectWithoutPropertiesLoose(_ref39, _excluded38);
+      } = _ref41,
+      props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.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__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.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__default.createElement("path", {
       d: "M9 15l3 -3l3 3"
@@ -1256,123 +1228,99 @@
       d: "M12 12l0 9"
     })));
   };
-  var SearchIcon = _ref40 => {
+  var SearchIcon = _ref42 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref40,
-      props = _objectWithoutPropertiesLoose(_ref40, _excluded39);
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref42,
+      props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.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 = _ref43 => {
     var {
         size = 24,
-        color = 'currentColor'
-      } = _ref41,
-      props = _objectWithoutPropertiesLoose(_ref41, _excluded40);
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
+      } = _ref43,
+      props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: color
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.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 {
-        size = 24,
-        color = 'currentColor'
-      } = _ref42,
-      props = _objectWithoutPropertiesLoose(_ref42, _excluded41);
-    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-      size: size,
-      color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.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__default.createElement(IconWrapper, Object.assign({
-      padding: 2,
-      size: size,
-      color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: 'currentColor',
-      strokeWidth: "1"
-    }, /*#__PURE__*/React__default.createElement("path", {
-      d: "M7 12h10",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })));
-  };
-  var InfoIcon = _ref44 => {
+  var ExternalLinkIcon = _ref44 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref44,
-      props = _objectWithoutPropertiesLoose(_ref44, _excluded43);
+      props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.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"
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.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 PlusIcon = _ref45 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref45,
-      props = _objectWithoutPropertiesLoose(_ref45, _excluded44);
+      props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
     })));
   };
   var TickIcon = _ref46 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref46,
-      props = _objectWithoutPropertiesLoose(_ref46, _excluded45);
+      props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: 'currentColor',
-      strokeWidth: "1"
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M5 13l4 4L19 7",
       strokeLinecap: "round",
       strokeLinejoin: "round"
@@ -1381,38 +1329,39 @@
   var BoldArrowIcon = _ref47 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref47,
-      props = _objectWithoutPropertiesLoose(_ref47, _excluded46);
+      props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: 'currentColor'
-    }, /*#__PURE__*/React__default.createElement("path", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
       d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
     })));
   };
   var ArrowIcon = _ref48 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref48,
-      props = _objectWithoutPropertiesLoose(_ref48, _excluded47);
+      props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      width: "24",
-      height: "24",
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      strokeWidth: "1",
-      stroke: 'currentColor',
-      fill: "none",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("line", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "12",
       y1: "20",
       x2: "12",
@@ -1424,23 +1373,19 @@
   var SpinnerIcon = _ref49 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        filled = true,
+        strokeWidth = 1
       } = _ref49,
-      props = _objectWithoutPropertiesLoose(_ref49, _excluded48);
+      props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "24",
-      height: "24",
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("circle", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
       cx: "12",
       cy: "12",
       r: "10",
@@ -1453,20 +1398,18 @@
   var CalendarIcon = _ref50 => {
     var {
         size = 24,
-        color = 'currentColor'
+        color = 'currentColor',
+        strokeWidth = 1
       } = _ref50,
-      props = _objectWithoutPropertiesLoose(_ref50, _excluded49);
+      props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
     return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
       size: size,
       color: color
-    }, props), /*#__PURE__*/React__default.createElement("svg", {
+    }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }, /*#__PURE__*/React__default.createElement("rect", {
+      "aria-hidden": "false",
+      focusable: "false"
+    }, getSvgProps(false, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "4",
       width: "18",
@@ -1474,16 +1417,19 @@
       rx: "2",
       ry: "2"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "16",
       y1: "2",
       x2: "16",
       y2: "6"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "8",
       y1: "2",
       x2: "8",
       y2: "6"
     }), /*#__PURE__*/React__default.createElement("line", {
+      stroke: color,
       x1: "3",
       y1: "10",
       x2: "21",
@@ -1495,6 +1441,8 @@
     __proto__: null,
     ChevronIcon: ChevronIcon,
     CloseIcon: CloseIcon,
+    MinusIcon: MinusIcon,
+    InfoIcon: InfoIcon,
     HeartIcon: HeartIcon,
     StarIcon: StarIcon,
     SaveIcon: SaveIcon,
@@ -1534,8 +1482,6 @@
     SearchIcon: SearchIcon,
     CloseEyeIcon: CloseEyeIcon,
     ExternalLinkIcon: ExternalLinkIcon,
-    MinusIcon: MinusIcon,
-    InfoIcon: InfoIcon,
     PlusIcon: PlusIcon,
     TickIcon: TickIcon,
     BoldArrowIcon: BoldArrowIcon,
@@ -1657,7 +1603,7 @@
   // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
   var Alert = AlertComponent;
 
-  var _excluded$5 = ["ratio", "children"];
+  var _excluded$4 = ["ratio", "children"];
   // Declaration of a functional component named AspectRatioView.
   var AspectRatioView = _ref => {
     var {
@@ -1667,7 +1613,7 @@
         children
         // Spread the rest of the props to inherit additional properties.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       width: '100%',
       position: "relative",
@@ -1683,14 +1629,14 @@
     }, children));
   };
 
-  var _excluded$6 = ["ratio", "children"];
+  var _excluded$5 = ["ratio", "children"];
   // Declaration of the AspectRatioComponent functional component with destructured props.
   var AspectRatioComponent = _ref => {
     var {
         ratio,
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     // Beginning of the return statement in the functional component.
     return /*#__PURE__*/React__default.createElement(AspectRatioView, Object.assign({
       ratio: ratio
@@ -1960,7 +1906,7 @@
     '6xl': 64
   };
 
-  var _excluded$7 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+  var _excluded$6 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
   // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
   var LinkView = _ref => {
     var {
@@ -1983,7 +1929,7 @@
         // Setter function for the hover state, noop function provided by default.
         setIsHovered = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
     // Function to handle mouse enter/leave events to toggle hover state.
     var handleHover = () => {
       if (underline === 'hover') setIsHovered(true);
@@ -1999,10 +1945,9 @@
       gap: 3,
       alignItems: "center",
       flexWrap: "nowrap"
-    }, children, isExternal && (/*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
-      size: IconSizes[iconSize],
-      style: styles.icon
-    })))));
+    }, children, isExternal && /*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
+      size: IconSizes[iconSize]
+    }))));
   };
 
   // Defines the 'LinkComponent' as a functional component with props typed to 'LinkProps'
@@ -2141,7 +2086,7 @@
     slow: 300
   };
 
-  var _excluded$8 = ["size", "speed", "color"],
+  var _excluded$7 = ["size", "speed", "color"],
     _excluded2$1 = ["size", "speed", "color"],
     _excluded3$1 = ["size", "speed", "color"],
     _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
@@ -2151,7 +2096,7 @@
         speed = 'normal',
         color = 'theme.loading'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
     var theme = appStudio.useTheme();
     var colorStyle = theme.getColor(color);
     var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -2304,7 +2249,7 @@
   // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
   var Loader = LoaderComponent;
 
-  var _excluded$9 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
+  var _excluded$8 = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
   var contrast = /*#__PURE__*/require('contrast');
   var ButtonView = _ref => {
     var _props$onClick;
@@ -2340,7 +2285,7 @@
         setIsHovered = () => {}
         // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
     var {
       getColor
     } = appStudio.useTheme();
@@ -2455,14 +2400,14 @@
   };
   var Button = ButtonComponent;
 
-  var _excluded$a = ["src", "color"],
+  var _excluded$9 = ["src", "color"],
     _excluded2$2 = ["path"];
   var FileSVG = _ref => {
     var {
         src,
         color
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var {
       getColor
     } = appStudio.useTheme();
@@ -2531,7 +2476,7 @@
     };
   };
 
-  var _excluded$b = ["children", "styles"];
+  var _excluded$a = ["children", "styles"];
   var HelperText = _ref => {
     var {
         children,
@@ -2539,7 +2484,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "xs",
       marginVertical: 0,
@@ -2548,7 +2493,7 @@
     }, styles['helperText'], props), children);
   };
 
-  var _excluded$c = ["children", "helperText", "error", "styles"];
+  var _excluded$b = ["children", "helperText", "error", "styles"];
   var FieldContainer = _ref => {
     var {
         children,
@@ -2556,7 +2501,7 @@
         error = false,
         styles
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       gap: 5,
       position: "relative"
@@ -2615,7 +2560,7 @@
     paddingRight: 36
   };
 
-  var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+  var _excluded$c = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
   var FieldContent = _ref => {
     var {
         shadow,
@@ -2634,7 +2579,7 @@
           pickerBox: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
     var isInteractive = (isHovered || isFocused) && !isDisabled;
     var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
     return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -2655,12 +2600,12 @@
     }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
   };
 
-  var _excluded$e = ["children"];
+  var _excluded$d = ["children"];
   var FieldIcons = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     return /*#__PURE__*/React__default.createElement(Center, Object.assign({
       gap: 10,
       right: 16,
@@ -2712,7 +2657,7 @@
     }
   };
 
-  var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+  var _excluded$e = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
   var LabelView = _ref => {
     var {
         children,
@@ -2728,7 +2673,7 @@
         size = 'sm'
         // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
     // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
     var headingStyles = heading ? HeadingSizes$1[heading] : {};
     // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -2760,7 +2705,7 @@
   var Label = LabelComponent;
   // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-  var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
+  var _excluded$f = ["children", "size", "error", "color", "styles", "helperText"];
   var FieldLabel = _ref => {
     var {
         children,
@@ -2771,7 +2716,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       top: 6,
       zIndex: 1000,
@@ -2784,12 +2729,12 @@
     }, styles['label'], props), children);
   };
 
-  var _excluded$h = ["children"];
+  var _excluded$g = ["children"];
   var FieldWrapper = _ref => {
     var {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
     return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
       width: "100%"
     }, props), children);
@@ -2805,7 +2750,7 @@
     xl: 16
   };
 
-  var _excluded$i = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  var _excluded$h = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
     _excluded2$3 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
     _excluded3$2 = ["option", "size", "removeOption"],
     _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
@@ -2819,7 +2764,7 @@
         callback = () => {},
         style
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
     // Handles the click event on an option by invoking the callback with the selected option's value.
     var handleOptionClick = option => callback(option);
     // Toggles the hover state on the item.
@@ -3281,7 +3226,7 @@
     }
   };
 
-  var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+  var _excluded$i = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
   var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "checkbox"
   }, props));
@@ -3311,7 +3256,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -3401,7 +3346,7 @@
     // Export of the useTextAreaState hook for external usage.
   };
 
-  var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
+  var _excluded$j = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
   var TextAreaView = _ref => {
     var {
         id,
@@ -3441,7 +3386,7 @@
           field: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = Object.assign({
       margin: 0,
@@ -3571,7 +3516,7 @@
     };
   };
 
-  var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
+  var _excluded$k = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
   var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
   }, props));
@@ -3614,7 +3559,7 @@
         onFocus,
         onBlur = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
     var {
       getColor
     } = appStudio.useTheme();
@@ -3795,7 +3740,7 @@
     '6xl': 60
   };
 
-  var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
+  var _excluded$l = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "colorScheme", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "styles", "infoText", "helperText"];
   var CheckboxView = _ref => {
     var {
         id,
@@ -3823,7 +3768,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -5382,11 +5327,11 @@
     xl: 16
   };
 
-  var _excluded$n = ["size"],
+  var _excluded$m = ["size"],
     _excluded2$4 = ["size"],
     _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
   var CountryList = _ref => {
-    var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    var props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       as: "ul"
     }, props));
@@ -5625,7 +5570,7 @@
     };
   };
 
-  var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+  var _excluded$n = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "colorScheme", "styles", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
   var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
     type: "date"
   }, props));
@@ -5659,7 +5604,7 @@
         onChange,
         onChangeText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     var isWithLabel = !!(isFocused && label);
     var handleHover = () => setIsHovered(!isHovered);
     var handleFocus = () => setIsFocused(true);
@@ -5747,7 +5692,7 @@
     }, props, textFieldStates);
   };
 
-  var _excluded$p = ["visibleIcon", "hiddenIcon"],
+  var _excluded$o = ["visibleIcon", "hiddenIcon"],
     _excluded2$5 = ["isVisible", "setIsVisible"];
   var PasswordComponent = _ref => {
     var {
@@ -5758,7 +5703,7 @@
           size: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     var _usePasswordState = usePasswordState(props),
       {
         isVisible,
@@ -5812,7 +5757,7 @@
     };
   };
 
-  var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
+  var _excluded$p = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "styles", "isDropdownVisible", "setIsDropdownVisible"];
   // Defines the functional component 'ComboBoxView' with destructured props.
   var ComboBoxView = _ref => {
     var {
@@ -5837,7 +5782,7 @@
         setIsDropdownVisible
         // Collects all further props not destructured explicitly.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
     // Sets up an effect to handle clicking outside the dropdown to close it.
     React.useEffect(() => {
       var handleClickOutside = event => {
@@ -5948,7 +5893,7 @@
     }))))))))))));
   };
 
-  var _excluded$r = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+  var _excluded$q = ["id", "name", "items", "placeholder", "searchPlaceholder"];
   // Defines the ComboBoxComponent functional component with ComboBoxProps
   var ComboBoxComponent = _ref => {
     var {
@@ -5964,7 +5909,7 @@
         searchPlaceholder
         // Destructures the rest of the props not explicitly defined
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
     // Initializes ComboBox state using custom hook with items and placeholders
     var state = useComboBoxState(items, placeholder, searchPlaceholder);
     return (
@@ -5980,7 +5925,7 @@
   // Exports the ComboBoxComponent as ComboBox
   var ComboBox = ComboBoxComponent;
 
-  var _excluded$s = ["children", "autoFocus", "initFocus", "onChange"];
+  var _excluded$r = ["children", "autoFocus", "initFocus", "onChange"];
   var FocusContext = /*#__PURE__*/React.createContext({
     active: false,
     focusNextInput: () => {},
@@ -5996,7 +5941,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -6044,7 +5989,7 @@
     }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
   };
 
-  var _excluded$t = ["name", "type"];
+  var _excluded$s = ["name", "type"];
   var getInputTypeProps = type => {
     switch (type) {
       case 'email':
@@ -6083,7 +6028,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
     var focus = useFormFocus();
     var {
       touched,
@@ -6127,13 +6072,13 @@
     } : {});
   };
 
-  var _excluded$u = ["value"];
+  var _excluded$t = ["value"];
   var CheckboxComponent$1 = props => {
     var _useFormikInput = useFormikInput(props),
       {
         value
       } = _useFormikInput,
-      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$u);
+      formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$t);
     formProps.isChecked = value;
     var checkboxStates = useCheckboxState(props);
     return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -6191,11 +6136,11 @@
    */
   var FormikTextArea = TextAreaComponent$1;
 
-  var _excluded$v = ["value"];
+  var _excluded$u = ["value"];
   var TextFieldComponent$1 = props => {
     var formProps = useFormikInput(props);
     var _useTextFieldState = useTextFieldState(props),
-      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$v);
+      textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$u);
     return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
   };
   /**
@@ -6203,7 +6148,7 @@
    */
   var FormikTextField = TextFieldComponent$1;
 
-  var _excluded$w = ["visibleIcon", "hiddenIcon"],
+  var _excluded$v = ["visibleIcon", "hiddenIcon"],
     _excluded2$6 = ["isVisible", "setIsVisible"];
   var PasswordComponent$1 = _ref => {
     var {
@@ -6214,7 +6159,7 @@
           size: 14
         })
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var formProps = useFormikInput(props);
     var _usePasswordState = usePasswordState(formProps),
       {
@@ -6239,14 +6184,14 @@
    */
   var FormikPassword = PasswordComponent$1;
 
-  var _excluded$x = ["items", "placeholder", "searchPlaceholder"];
+  var _excluded$w = ["items", "placeholder", "searchPlaceholder"];
   var ComboBoxComponent$1 = _ref => {
     var {
         items,
         placeholder,
         searchPlaceholder
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
     var formProps = useFormikInput(props);
     var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
     // Ensure the onChange function from formProps is being called when an item is selected
@@ -6615,7 +6560,7 @@
     xl: 28
   };
 
-  var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  var _excluded$x = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
     _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
     _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
     _excluded4$3 = ["children"],
@@ -6629,7 +6574,7 @@
         onClose = () => {},
         position = 'center'
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -7018,7 +6963,7 @@
     pillShaped: 24
   };
 
-  var _excluded$z = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+  var _excluded$y = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
   var ToggleView = _ref => {
     var {
         children,
@@ -7032,7 +6977,7 @@
         setIsToggled,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
     var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var ToggleVariants = {
@@ -7074,7 +7019,7 @@
     }, ToggleVariants[variant], props), children);
   };
 
-  var _excluded$A = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$z = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -7087,7 +7032,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,