@app-studio/web 0.8.16 → 0.8.18

package/dist/web.cjs.development.js

@@ -16,9 +16,11 @@ var reactRouterDom = require('react-router-dom');
 require('core-js/modules/es.array.includes.js');
 require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.string.starts-with.js');
+var Icon$1 = require('src/components/Icon/Icon');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
 var zustand = require('zustand');
+var Layout = require('src/components/Layout');
 
 var Top = props => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
   marginBottom: "auto"
@@ -50,33 +52,33 @@ function _objectWithoutPropertiesLoose(r, e) {
 
 var HeadingSizes = {
   h1: {
-    fontSize: 96,
-    lineHeight: 112,
-    letterSpacing: -1.5
-  },
-  h2: {
     fontSize: 60,
     lineHeight: 71,
     letterSpacing: -0.5
   },
-  h3: {
+  h2: {
     fontSize: 48,
     lineHeight: 57,
     letterSpacing: 0
   },
-  h4: {
+  h3: {
     fontSize: 34,
     lineHeight: 40,
     letterSpacing: 0.25
   },
-  h5: {
+  h4: {
     fontSize: 24,
     lineHeight: 28,
     letterSpacing: 0
   },
+  h5: {
+    fontSize: 18,
+    lineHeight: 22,
+    letterSpacing: 0.15
+  },
   h6: {
-    fontSize: 20,
-    lineHeight: 24,
+    fontSize: 14,
+    lineHeight: 18,
     letterSpacing: 0.15
   }
 };
@@ -171,12 +173,11 @@ var TextComponent = props => {
 var Text = TextComponent;
 
 var _excluded$1 = ["justifyContent", "isReversed"];
-// Defines the functional component VerticalView with props specified by VerticalProps
-var VerticalView = _ref => {
+var VerticalView = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   var {
-      // Sets a default alignment for content within the vertical container to 'flex-start'
+      // 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
+      // Determines the direction in which the Vertical elements are stacked, default not reversed
       isReversed = false
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -184,447 +185,1083 @@ var VerticalView = _ref => {
     display: "flex",
     justifyContent: justifyContent,
     flexDirection: isReversed ? 'column-reverse' : 'column'
-  }, props));
-};
+  }, props, {
+    ref: ref
+  }));
+});
+VerticalView.displayName = 'VerticalView';
 
-// Defines the VerticalComponent as a functional component with VerticalProps as its props signature.
-var VerticalComponent = props => (
-/*#__PURE__*/
-// Renders the VerticalView component, passing all of the received props through to it.
-React__default.createElement(VerticalView, Object.assign({}, props)));
-// Exports the VerticalComponent as Vertical for use in other parts of the application.
-var Vertical = VerticalComponent;
+var Vertical = props => (/*#__PURE__*/React__default.createElement(VerticalView, Object.assign({}, props)));
 
-// Defines a functional component 'HorizontalComponent' utilizing 'ViewProps'. It leverages flexbox to create a horizontal view, which can be reversed based on a prop.
-var HorizontalComponent = props => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
-  display: "flex",
-  flexDirection: props.isReversed ? 'row-reverse' : 'row'
-}, props)));
-// Exports the HorizontalComponent as 'Horizontal', making it available for use in other parts of the application.
-var Horizontal = HorizontalComponent;
+var _excluded$2 = ["justifyContent", "isReversed"];
+var HorizontalView = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  var {
+      // Sets a default alignment for content within the Horizontal container to 'flex-start'
+      justifyContent = 'flex-start',
+      // Determines the direction in which the Horizontal elements are stacked, default not reversed
+      isReversed = false
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    justifyContent: justifyContent,
+    flexDirection: isReversed ? 'row-reverse' : 'row'
+  }, props, {
+    ref: ref
+  }));
+});
+HorizontalView.displayName = 'Horizontal';
 
-// Defines a React Functional Component named CenterView which centers its children both horizontally and vertically using flexbox.
-var CenterView = props => (
-/*#__PURE__*/
-// Renders a 'View' component with display flex and center alignment applied on both axes, passing all received props.
-React__default.createElement(appStudio.View, Object.assign({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center"
-}, props)));
+var Horizontal = props => (/*#__PURE__*/React__default.createElement(HorizontalView, Object.assign({}, props)));
 
-// Defines a functional component named CenterComponent utilizing React's functional component structure, which expects props of the CenterProps type.
-var CenterComponent = props => (
-/*#__PURE__*/
-// Renders the CenterView component, passing down all the props received by the CenterComponent.
-React__default.createElement(CenterView, Object.assign({}, props)));
-// Exports CenterComponent as Center, making it available for use in other parts of the application.
-var Center = CenterComponent;
+var _excluded$3 = ["isReversed"];
+var CenterView = /*#__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
+  }));
+});
+CenterView.displayName = 'Center';
+
+var Center = props => (/*#__PURE__*/React__default.createElement(CenterView, Object.assign({}, props)));
 
-var _excluded$2 = ["size", "color"];
-var ArrowDownSvg = _ref => {
+var _excluded$4 = ["size", "color"],
+  _excluded2 = ["size", "color"],
+  _excluded3 = ["size", "color"],
+  _excluded4 = ["size", "color"],
+  _excluded5 = ["size", "color"],
+  _excluded6 = ["size", "color"],
+  _excluded7 = ["size", "color"],
+  _excluded8 = ["size", "color"],
+  _excluded9 = ["size", "color"],
+  _excluded10 = ["size", "color"],
+  _excluded11 = ["size", "color"],
+  _excluded12 = ["size", "color"],
+  _excluded13 = ["size", "color"],
+  _excluded14 = ["size", "color"],
+  _excluded15 = ["size", "color"],
+  _excluded16 = ["size", "color"],
+  _excluded17 = ["size", "color"],
+  _excluded18 = ["size", "color"],
+  _excluded19 = ["size", "color"],
+  _excluded20 = ["size", "color"],
+  _excluded21 = ["size", "color"],
+  _excluded22 = ["size", "color"],
+  _excluded23 = ["size", "color"],
+  _excluded24 = ["size", "color"],
+  _excluded25 = ["size", "color"],
+  _excluded26 = ["size", "color"],
+  _excluded27 = ["size", "color"],
+  _excluded28 = ["size", "color"],
+  _excluded29 = ["size", "color"],
+  _excluded30 = ["size", "color"],
+  _excluded31 = ["size", "color"],
+  _excluded32 = ["size", "color"],
+  _excluded33 = ["size", "color"],
+  _excluded34 = ["size", "color"],
+  _excluded35 = ["size", "color"],
+  _excluded36 = ["size", "color"],
+  _excluded37 = ["size", "color"],
+  _excluded38 = ["size", "color"],
+  _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"],
+  _excluded50 = ["size", "color"];
+// Default wrapper component for consistent sizing
+var IconWrapper = _ref => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    size,
+    color = 'black',
+    transform,
+    orientation,
+    children
+  } = _ref;
   return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 -4.5 20 20",
-    version: "1.1",
-    fill: "#000000"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("title", null, "arrow_down [#338]"), " ", /*#__PURE__*/React__default.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React__default.createElement("defs", null, " "), /*#__PURE__*/React__default.createElement("g", {
-    id: "Page-1",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Dribbble-Light-Preview",
-    transform: "translate(-220.000000, -6684.000000)",
-    fill: "#000000"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icons",
-    transform: "translate(56.000000, 160.000000)"
+    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);
+};
+var ChevronIcon = _ref2 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
   }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583",
-    id: "arrow_down-[#338]"
-  })))))));
+    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"
+  })));
 };
-
-var _excluded$3 = ["size", "color"];
-var ArrowUpSvg = _ref => {
+var CheckIcon = _ref3 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    width: size + "px",
-    height: size + "px",
-    viewBox: "0 -4.5 20 20",
-    version: "1.1",
-    fill: "#000000"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
+      size = 24,
+      color = 'currentColor'
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M17.0001 9L10 16L7 13",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("title", null, "arrow_up [#337]"), " ", /*#__PURE__*/React__default.createElement("desc", null, "Created with Sketch."), /*#__PURE__*/React__default.createElement("defs", null, " "), /*#__PURE__*/React__default.createElement("g", {
-    id: "Page-1",
-    stroke: "none",
-    strokeWidth: "1",
+  })));
+};
+var CloseIcon = _ref4 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3);
+  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: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+  })));
+};
+var CloseEyeIcon = _ref5 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: color,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__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 DustBinIcon = _ref6 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5);
+  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: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+  })));
+};
+var EditIcon = _ref7 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded6);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 24 24",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "Dribbble-Light-Preview",
-    transform: "translate(-260.000000, -6684.000000)",
-    fill: "#000000"
-  }, /*#__PURE__*/React__default.createElement("g", {
-    id: "icons",
-    transform: "translate(56.000000, 160.000000)"
+    stroke: 'currentColor',
+    strokeWidth: "1"
   }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378",
-    id: "arrow_up-[#337]"
-  })))))));
+    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 _excluded$4 = ["size", "color"];
-var CheckSvg = _ref => {
+var ExternalLinkIcon = _ref8 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    width: size + "px",
-    height: size + "px",
+      size = 24,
+      color = 'currentColor'
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded7);
+  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 = _ref9 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded8);
+  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",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    stroke: "#CCCCCC",
-    strokeWidth: "0.048"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+    stroke: 'currentColor',
+    strokeWidth: "2"
   }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M17.0001 9L10 16L7 13",
-    stroke: color,
-    strokeWidth: "1.5",
+    d: "M7 12h10",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }))));
+  })));
 };
-
-var _excluded$5 = ["size", "color"];
-var CloseSvg = _ref => {
+var InfoIcon = _ref10 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    width: size + "px",
-    height: size + "px",
-    viewBox: "0 0 1024 1024",
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "#000000"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+      size = 24,
+      color = 'currentColor'
+    } = _ref10,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded9);
+  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", {
-    fill: color,
-    d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
-  }))));
+    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 _excluded$6 = ["size", "color"];
-var CloseEyeSvg = _ref => {
+var OpenEyeIcon = _ref11 => {
   var {
-      size = 64,
-      color = '#2F4858'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      size = 24,
+      color = 'currentColor'
+    } = _ref11,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded10);
+  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: "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 PlusIcon = _ref12 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref12,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded11);
+  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: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+  })));
+};
+var SpinnerIcon = _ref13 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref13,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded12);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: color,
+    strokeWidth: "2",
+    opacity: "0.3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M22 12a10 10 0 1 1-4.93-8.62",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  })));
+};
+var ProfileIcon = _ref14 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref14,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded13);
+  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", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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: color
-  }))));
+    fill: "currentColor",
+    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 _excluded$7 = ["size", "color"];
-var ExternalLinkSvg = _ref => {
+var ArrowIcon = _ref15 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    fill: color,
-    width: size + "px",
-    height: size + "px",
-    viewBox: "0 0 50 50",
-    xmlns: "http://www.w3.org/2000/svg",
-    stroke: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
+      size = 24,
+      color = 'currentColor'
+    } = _ref15,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded14);
+  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: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
+  })));
+};
+var SearchIcon = _ref16 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref16,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded15);
+  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: "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 SuccessIcon = _ref17 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref17,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded16);
+  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: "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 TickIcon = _ref18 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref18,
+    props = _objectWithoutPropertiesLoose(_ref18, _excluded17);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: 'currentColor',
+    strokeWidth: "2"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M5 13l4 4L19 7",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+  })));
+};
+var NotificationIcon = _ref19 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref19,
+    props = _objectWithoutPropertiesLoose(_ref19, _excluded18);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"
+    d: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"
+  })));
+};
+var SettingsIcon = _ref20 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref20,
+    props = _objectWithoutPropertiesLoose(_ref20, _excluded19);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "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 CalendarIcon = _ref21 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref21,
+    props = _objectWithoutPropertiesLoose(_ref21, _excluded20);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M19 4h-1V3c0-.55-.45-1-1-1s-1 .45-1 1v1H8V3c0-.55-.45-1-1-1s-1 .45-1 1v1H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM9 14H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm-8 4H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2z"
+  })));
+};
+var AddIcon = _ref22 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref22,
+    props = _objectWithoutPropertiesLoose(_ref22, _excluded21);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M22.286 11.143h-9.429V1.715h-1.714v9.428H1.714v1.715h9.429v9.428h1.714v-9.428h9.429v-1.715Z"
+  })));
+};
+var DownloadIcon = _ref23 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref23,
+    props = _objectWithoutPropertiesLoose(_ref23, _excluded22);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+  })));
+};
+var UploadIcon = _ref24 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref24,
+    props = _objectWithoutPropertiesLoose(_ref24, _excluded23);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z"
+  })));
+};
+var BookmarkIcon = _ref25 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref25,
+    props = _objectWithoutPropertiesLoose(_ref25, _excluded24);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  })));
+};
+var HomeIcon = _ref26 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref26,
+    props = _objectWithoutPropertiesLoose(_ref26, _excluded25);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
+  })));
+};
+var MenuIcon = _ref27 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref27,
+    props = _objectWithoutPropertiesLoose(_ref27, _excluded26);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+  })));
+};
+var ShareIcon = _ref28 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref28,
+    props = _objectWithoutPropertiesLoose(_ref28, _excluded27);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"
+  })));
+};
+var FilterIcon = _ref29 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref29,
+    props = _objectWithoutPropertiesLoose(_ref29, _excluded28);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+  })));
+};
+var RefreshIcon = _ref30 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref30,
+    props = _objectWithoutPropertiesLoose(_ref30, _excluded29);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+  })));
+};
+var CopyIcon = _ref31 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref31,
+    props = _objectWithoutPropertiesLoose(_ref31, _excluded30);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+  })));
+};
+var SaveIcon = _ref32 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref32,
+    props = _objectWithoutPropertiesLoose(_ref32, _excluded31);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19zm-7-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zM6 6h9v4H6z"
+  })));
+};
+var PrintIcon = _ref33 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref33,
+    props = _objectWithoutPropertiesLoose(_ref33, _excluded32);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "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 LockIcon = _ref34 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref34,
+    props = _objectWithoutPropertiesLoose(_ref34, _excluded33);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+  })));
+};
+// Previous icons remain the same...
+var UnlockIcon = _ref35 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref35,
+    props = _objectWithoutPropertiesLoose(_ref35, _excluded34);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h2c0-1.66 1.34-3 3-3s3 1.34 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z"
+  })));
+};
+var StarIcon = _ref36 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref36,
+    props = _objectWithoutPropertiesLoose(_ref36, _excluded35);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
+  })));
+};
+var HeartIcon = _ref37 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref37,
+    props = _objectWithoutPropertiesLoose(_ref37, _excluded36);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+  })));
+};
+var ThumbUpIcon = _ref38 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref38,
+    props = _objectWithoutPropertiesLoose(_ref38, _excluded37);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "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 ThumbDownIcon = _ref39 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref39,
+    props = _objectWithoutPropertiesLoose(_ref39, _excluded38);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "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 LocationIcon = _ref40 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref40,
+    props = _objectWithoutPropertiesLoose(_ref40, _excluded39);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "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 ClockIcon = _ref41 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref41,
+    props = _objectWithoutPropertiesLoose(_ref41, _excluded40);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"
+  })));
+};
+var CameraIcon = _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: "none",
+    stroke: 'currentColor',
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M9 3L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-3.17L15 3H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"
   }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M40 20h-2v-8h-8v-2h10z"
+    d: "M12 17c1.65 0 3-1.35 3-3s-1.35-3-3-3-3 1.35-3 3 1.35 3 3 3z"
+  })));
+};
+var MicrophoneIcon = _ref43 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref43,
+    props = _objectWithoutPropertiesLoose(_ref43, _excluded42);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"
   }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z"
-  }))));
+    d: "M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"
+  })));
 };
-
-var _excluded$8 = ["size", "color"];
-var IndeterminateSvg = _ref => {
+var WifiIcon = _ref44 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      size = 24,
+      color = 'currentColor'
+    } = _ref44,
+    props = _objectWithoutPropertiesLoose(_ref44, _excluded43);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+    stroke: 'currentColor',
+    strokeWidth: "1"
   }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M7 12L17 12",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), ' ')));
+    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 _excluded$9 = ["size", "color"];
-var OpenEyeSvg = _ref => {
+var BluetoothIcon = _ref45 => {
   var {
-      size = 64,
-      color = '#2F4858'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
+      size = 24,
+      color = 'currentColor'
+    } = _ref45,
+    props = _objectWithoutPropertiesLoose(_ref45, _excluded44);
+  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: "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 BatteryIcon = _ref46 => {
+  var {
+      size = 24,
+      color = 'currentColor'
+    } = _ref46,
+    props = _objectWithoutPropertiesLoose(_ref46, _excluded45);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
     viewBox: "0 0 24 24",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
+    stroke: 'currentColor',
+    strokeWidth: "1"
   }, /*#__PURE__*/React__default.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.30147 15.5771C4.77832 14.2684 3.6904 12.7726 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C14.1843 6 16.1261 7.07185 17.6986 8.42294C19.2218 9.73158 20.3097 11.2274 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18C9.81574 18 7.87402 16.9282 6.30147 15.5771ZM12 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.0302C2.00757 13.8624 3.23268 15.5772 4.99812 17.0941C6.75717 18.6054 9.14754 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.9698C21.9925 10.1376 20.7674 8.42276 19.002 6.90595C17.2429 5.39462 14.8525 4 12 4ZM10 12C10 10.8954 10.8955 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8955 14 10 13.1046 10 12ZM12 8C9.7909 8 8.00004 9.79086 8.00004 12C8.00004 14.2091 9.7909 16 12 16C14.2092 16 16 14.2091 16 12C16 9.79086 14.2092 8 12 8Z",
-    fill: color
-  }))));
+    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 _excluded$a = ["size", "color"];
-var WarningSvg = _ref => {
+// More modern UI icons
+var SunIcon = _ref47 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    height: size + "px",
-    width: size + "px",
-    version: "1.1",
-    id: "Capa_1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 192.146 192.146",
-    fill: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M108.186,144.372c0,7.054-4.729,12.32-12.037,12.32h-0.254c-7.054,0-11.92-5.266-11.92-12.32 c0-7.298,5.012-12.31,12.174-12.31C103.311,132.062,108.059,137.054,108.186,144.372z M88.44,125.301h15.447l2.951-61.298H85.46 L88.44,125.301z M190.372,177.034c-2.237,3.664-6.214,5.921-10.493,5.921H12.282c-4.426,0-8.51-2.384-10.698-6.233 c-2.159-3.849-2.11-8.549,0.147-12.349l84.111-149.22c2.208-3.722,6.204-5.96,10.522-5.96h0.332 c4.445,0.107,8.441,2.618,10.513,6.546l83.515,149.229C192.717,168.768,192.629,173.331,190.372,177.034z M179.879,170.634 L96.354,21.454L12.292,170.634H179.879z"
-  })))))));
+      size = 24,
+      color = 'currentColor'
+    } = _ref47,
+    props = _objectWithoutPropertiesLoose(_ref47, _excluded46);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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("circle", {
+    cx: "12",
+    cy: "12",
+    r: "5"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+  })));
 };
-
-var _excluded$b = ["size", "color"];
-var SuccessSvg = _ref => {
+var MoonIcon = _ref48 => {
   var {
-      size = 64,
+      size = 24,
+      color = 'currentColor'
+    } = _ref48,
+    props = _objectWithoutPropertiesLoose(_ref48, _excluded47);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
+  })));
+};
+var ErrorIcon = _ref49 => {
+  var {
+      size = 24,
       color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    height: size + "px",
-    width: size + "px",
-    version: "1.1",
-    id: "Capa_1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 484.8 484.8",
-    fill: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M242.4,0C108.6,0,0,108.6,0,242.4S108.6,484.8,242.4,484.8S484.8,376.2,484.8,242.4S376.2,0,242.4,0z M198.4,358.8l-120-120L84,228l114.4,114.4l188-188l28.8,28.8L198.4,358.8z",
-    fill: color
-  }))))));
+    } = _ref49,
+    props = _objectWithoutPropertiesLoose(_ref49, _excluded48);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 510 510"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M255,0C114.615,0,0,114.615,0,255s114.615,255,255,255s255-114.615,255-255S395.385,0,255,0z M255,459c-114.75,0-207-92.25-207-207c0-114.75,92.25-207,207-207c114.75,0,207,92.25,207,207C462,366.75,369.75,459,255,459z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M255,140.25c11.05,0,20-8.95,20-20s-8.95-20-20-20s-20,8.95-20,20S243.95,140.25,255,140.25z"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M265,357c0,11.05-8.95,20-20,20s-20-8.95-20-20v-175c0-11.05,8.95-20,20-20s20,8.95,20,20V357z"
+  })));
 };
-
-var _excluded$c = ["size", "color"];
-var InfoSvg = _ref => {
+var WarningIcon = _ref50 => {
   var {
-      size = 64,
+      size = 24,
       color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    height: size + "px",
-    width: size + "px",
+    } = _ref50,
+    props = _objectWithoutPropertiesLoose(_ref50, _excluded49);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    size: size,
+    color: color
+  }, props), /*#__PURE__*/React__default.createElement("svg", {
     version: "1.1",
     id: "Capa_1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 192.146 192.146",
-    fill: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
+    fill: 'currentColor'
+  }, /*#__PURE__*/React__default.createElement("g", {
     id: "SVGRepo_bgCarrier"
   }), /*#__PURE__*/React__default.createElement("g", {
     id: "SVGRepo_tracerCarrier"
   }), /*#__PURE__*/React__default.createElement("g", {
     id: "SVGRepo_iconCarrier"
   }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M96.073,3.515C43.19,3.515,0,46.705,0,99.587s43.19,96.072,96.073,96.072s96.073-43.19,96.073-96.072 S148.955,3.515,96.073,3.515z M101.468,154.072h-15.447V120.57h15.447V154.072z M101.468,111.875h-15.447V49.54h15.447V111.875z"
+    d: "M108.186,144.372c0,7.054-4.729,12.32-12.037,12.32h-0.254c-7.054,0-11.92-5.266-11.92-12.32 c0-7.298,5.012-12.31,12.174-12.31C103.311,132.062,108.059,137.054,108.186,144.372z M88.44,125.301h15.447l2.951-61.298H85.46 L88.44,125.301z M190.372,177.034c-2.237,3.664-6.214,5.921-10.493,5.921H12.282c-4.426,0-8.51-2.384-10.698-6.233 c-2.159-3.849-2.11-8.549,0.147-12.349l84.111-149.22c2.208-3.722,6.204-5.96,10.522-5.96h0.332 c4.445,0.107,8.441,2.618,10.513,6.546l83.515,149.229C192.717,168.768,192.629,173.331,190.372,177.034z M179.879,170.634 L96.354,21.454L12.292,170.634H179.879z"
   })))))));
 };
-
-var _excluded$d = ["size", "color"];
-var ErrorSvg = _ref => {
+var CloudIcon = _ref51 => {
   var {
-      size = 64,
-      color = 'white'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    height: size + "px",
-    width: size + "px",
-    version: "1.1",
-    id: "Capa_1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 510 510",
-    fill: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M255,0C114.615,0,0,114.615,0,255s114.615,255,255,255s255-114.615,255-255S395.385,0,255,0z M255,459c-114.75,0-207-92.25-207-207c0-114.75,92.25-207,207-207c114.75,0,207,92.25,207,207C462,366.75,369.75,459,255,459z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M255,140.25c11.05,0,20-8.95,20-20s-8.95-20-20-20s-20,8.95-20,20S243.95,140.25,255,140.25z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M265,357c0,11.05-8.95,20-20,20s-20-8.95-20-20v-175c0-11.05,8.95-20,20-20s20,8.95,20,20V357z",
-    fill: color
-  }))))));
+      size = 24,
+      color = 'currentColor'
+    } = _ref51,
+    props = _objectWithoutPropertiesLoose(_ref51, _excluded50);
+  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+    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: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
+  })));
+};
+
+var Icon = {
+  __proto__: null,
+  ChevronIcon: ChevronIcon,
+  CheckIcon: CheckIcon,
+  CloseIcon: CloseIcon,
+  CloseEyeIcon: CloseEyeIcon,
+  DustBinIcon: DustBinIcon,
+  EditIcon: EditIcon,
+  ExternalLinkIcon: ExternalLinkIcon,
+  MinusIcon: MinusIcon,
+  InfoIcon: InfoIcon,
+  OpenEyeIcon: OpenEyeIcon,
+  PlusIcon: PlusIcon,
+  SpinnerIcon: SpinnerIcon,
+  ProfileIcon: ProfileIcon,
+  ArrowIcon: ArrowIcon,
+  SearchIcon: SearchIcon,
+  SuccessIcon: SuccessIcon,
+  TickIcon: TickIcon,
+  NotificationIcon: NotificationIcon,
+  SettingsIcon: SettingsIcon,
+  CalendarIcon: CalendarIcon,
+  AddIcon: AddIcon,
+  DownloadIcon: DownloadIcon,
+  UploadIcon: UploadIcon,
+  BookmarkIcon: BookmarkIcon,
+  HomeIcon: HomeIcon,
+  MenuIcon: MenuIcon,
+  ShareIcon: ShareIcon,
+  FilterIcon: FilterIcon,
+  RefreshIcon: RefreshIcon,
+  CopyIcon: CopyIcon,
+  SaveIcon: SaveIcon,
+  PrintIcon: PrintIcon,
+  LockIcon: LockIcon,
+  UnlockIcon: UnlockIcon,
+  StarIcon: StarIcon,
+  HeartIcon: HeartIcon,
+  ThumbUpIcon: ThumbUpIcon,
+  ThumbDownIcon: ThumbDownIcon,
+  LocationIcon: LocationIcon,
+  ClockIcon: ClockIcon,
+  CameraIcon: CameraIcon,
+  MicrophoneIcon: MicrophoneIcon,
+  WifiIcon: WifiIcon,
+  BluetoothIcon: BluetoothIcon,
+  BatteryIcon: BatteryIcon,
+  SunIcon: SunIcon,
+  MoonIcon: MoonIcon,
+  ErrorIcon: ErrorIcon,
+  WarningIcon: WarningIcon,
+  CloudIcon: CloudIcon
 };
 
 // Define a constant object 'Themes' exporting various theme styles.
@@ -706,7 +1343,7 @@ var AlertView = _ref => {
     flexWrap: "nowrap"
   }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(View, {
     alignSelf: 'center'
-  }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningSvg, {
+  }, icon ? icon : (/*#__PURE__*/React__default.createElement(WarningIcon, {
     size: 24,
     color: (_styles$icon$color = styles == null ? void 0 : styles.icon.color) != null ? _styles$icon$color : Themes[variant].content.color
   }))), /*#__PURE__*/React__default.createElement(Vertical, {
@@ -740,7 +1377,7 @@ var AlertComponent = _ref => {
 // Exporting the AlertComponent as 'Alert' for use in other parts of the application.
 var Alert = AlertComponent;
 
-var _excluded$e = ["ratio", "children"];
+var _excluded$5 = ["ratio", "children"];
 // Declaration of a functional component named AspectRatioView.
 var AspectRatioView = _ref => {
   var {
@@ -750,7 +1387,7 @@ var AspectRatioView = _ref => {
       children
       // Spread the rest of the props to inherit additional properties.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     width: '100%',
     position: "relative",
@@ -766,14 +1403,14 @@ var AspectRatioView = _ref => {
   }, children));
 };
 
-var _excluded$f = ["ratio", "children"];
+var _excluded$6 = ["ratio", "children"];
 // Declaration of the AspectRatioComponent functional component with destructured props.
 var AspectRatioComponent = _ref => {
   var {
       ratio,
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   // Beginning of the return statement in the functional component.
   return /*#__PURE__*/React__default.createElement(AspectRatioView, Object.assign({
     ratio: ratio
@@ -1043,7 +1680,7 @@ var IconSizes = {
   '6xl': 64
 };
 
-var _excluded$g = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
+var _excluded$7 = ["children", "href", "iconSize", "underline", "isHovered", "isExternal", "styles", "setIsHovered"];
 // Component definition for 'LinkView', a functional component with props defined by 'LinkViewProps'.
 var LinkView = _ref => {
   var {
@@ -1066,7 +1703,7 @@ var LinkView = _ref => {
       // Setter function for the hover state, noop function provided by default.
       setIsHovered = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   // Function to handle mouse enter/leave events to toggle hover state.
   var handleHover = () => {
     if (underline === 'hover') setIsHovered(true);
@@ -1082,7 +1719,7 @@ var LinkView = _ref => {
     gap: 3,
     alignItems: "center",
     flexWrap: "nowrap"
-  }, children, isExternal && (/*#__PURE__*/React__default.createElement(ExternalLinkSvg, {
+  }, children, isExternal && (/*#__PURE__*/React__default.createElement(ExternalLinkIcon, {
     size: IconSizes[iconSize],
     style: styles.icon
   })))));
@@ -1107,9 +1744,9 @@ var ButtonSizes = {
     paddingBottom: 8,
     paddingLeft: 12,
     paddingRight: 12,
-    fontWeight: 600,
-    fontSize: 'xs',
-    lineHeight: 16,
+    fontWeight: 400,
+    fontSize: 11,
+    lineHeight: 14,
     letterSpacing: 1.25
   },
   sm: {
@@ -1118,10 +1755,10 @@ var ButtonSizes = {
     paddingBottom: 10,
     paddingLeft: 16,
     paddingRight: 16,
-    fontWeight: 600,
-    fontSize: 'sm',
+    fontWeight: 400,
+    fontSize: 12,
     // Establishes style configuration for medium (md) button size.
-    lineHeight: 20,
+    lineHeight: 16,
     letterSpacing: 1.25
   },
   md: {
@@ -1131,9 +1768,9 @@ var ButtonSizes = {
     paddingLeft: 18,
     paddingRight: 18,
     // Establishes style configuration for large (lg) button size.
-    fontWeight: 600,
-    fontSize: 'md',
-    lineHeight: 24,
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: 18,
     letterSpacing: 1.25
   },
   lg: {
@@ -1143,8 +1780,8 @@ var ButtonSizes = {
     // Establishes style configuration for extra-large (xl) button size.
     paddingLeft: 22,
     paddingRight: 22,
-    fontWeight: 600,
-    fontSize: 'lg',
+    fontWeight: 400,
+    fontSize: 18,
     lineHeight: 24,
     letterSpacing: 1.25
   },
@@ -1158,10 +1795,10 @@ var ButtonSizes = {
     // Sets the border-radius for a rounded button shape to '4'.
     paddingRight: 26,
     // Sets the border-radius for a pill-shaped button to '24'.
-    fontWeight: 600,
-    fontSize: 'xl',
+    fontWeight: 400,
+    fontSize: 22,
     // Defines a constant 'IconSizes' as a mapping from 'Size' to corresponding 'CSSProperties' for icons.
-    lineHeight: 24,
+    lineHeight: 28,
     // Sets the width, height, and padding for icons of extra-small size.
     letterSpacing: 1.25
   }
@@ -1224,17 +1861,17 @@ var DefaultSpeeds = {
   slow: 300
 };
 
-var _excluded$h = ["size", "speed", "color"],
-  _excluded2 = ["size", "speed", "color"],
-  _excluded3 = ["size", "speed", "color"],
-  _excluded4 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
+var _excluded$8 = ["size", "speed", "color"],
+  _excluded2$1 = ["size", "speed", "color"],
+  _excluded3$1 = ["size", "speed", "color"],
+  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition"];
 var DefaultSpinner = _ref => {
   var {
       size = 'md',
       speed = 'normal',
       color = 'theme.loading'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -1277,7 +1914,7 @@ var Dotted = _ref2 => {
       speed = 'normal',
       color = 'theme.loading'
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -1319,7 +1956,7 @@ var Quarter = _ref3 => {
       speed = 'normal',
       color = 'theme.loading'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
   var theme = appStudio.useTheme();
   var colorStyle = theme.getColor(color);
   var sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
@@ -1358,7 +1995,7 @@ var LoaderView = _ref4 => {
       speed = 'normal',
       textPosition = 'right'
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
   var style = {
     size,
     speed,
@@ -1387,7 +2024,7 @@ React__default.createElement(LoaderView, Object.assign({}, props)));
 // Exports the LoaderComponent as Loader, making it available for use in other parts of the application.
 var Loader = LoaderComponent;
 
-var _excluded$i = ["icon", "shadow", "children", "ariaLabel", "externalHref", "isAuto", "isFilled", "isIconRounded", "isLoading", "isDisabled", "size", "variant", "iconPosition", "colorScheme", "shape", "onClick", "loaderProps", "loaderPosition", "effect", "isHovered", "setIsHovered"];
+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 contrast = /*#__PURE__*/require('contrast');
 var ButtonView = _ref => {
   var _props$onClick;
@@ -1423,7 +2060,7 @@ var ButtonView = _ref => {
       setIsHovered = () => {}
       // Defines CSS properties for 'outline' variant of the button with conditional styles based on reverse state.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var {
     getColor
   } = appStudio.useTheme();
@@ -1538,14 +2175,14 @@ var ButtonComponent = props => {
 };
 var Button = ButtonComponent;
 
-var _excluded$j = ["src", "color"],
-  _excluded2$1 = ["path"];
+var _excluded$a = ["src", "color"],
+  _excluded2$2 = ["path"];
 var FileSVG = _ref => {
   var {
       src,
       color
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var {
     getColor
   } = appStudio.useTheme();
@@ -1563,7 +2200,7 @@ var FileImage = _ref2 => {
   var {
       path
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
     src: path
   }, props));
@@ -1613,7 +2250,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$k = ["children", "styles"];
+var _excluded$b = ["children", "styles"];
 var HelperText = _ref => {
   var {
       children,
@@ -1621,7 +2258,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -1630,7 +2267,7 @@ var HelperText = _ref => {
   }, styles['helperText'], props), children);
 };
 
-var _excluded$l = ["children", "helperText", "error", "styles"];
+var _excluded$c = ["children", "helperText", "error", "styles"];
 var FieldContainer = _ref => {
   var {
       children,
@@ -1638,7 +2275,7 @@ var FieldContainer = _ref => {
       error = false,
       styles
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -1697,7 +2334,7 @@ var PaddingWithoutLabel = {
   paddingRight: 36
 };
 
-var _excluded$m = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
+var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "colorScheme", "styles"];
 var FieldContent = _ref => {
   var {
       shadow,
@@ -1716,7 +2353,7 @@ var FieldContent = _ref => {
         pickerBox: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? colorScheme : 'midgray';
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -1737,12 +2374,12 @@ var FieldContent = _ref => {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], styles['box'], props), children);
 };
 
-var _excluded$n = ["children"];
+var _excluded$e = ["children"];
 var FieldIcons = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -1794,7 +2431,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$o = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = _ref => {
   var {
       children,
@@ -1810,7 +2447,7 @@ var LabelView = _ref => {
       size = 'sm'
       // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   // 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.
@@ -1842,7 +2479,7 @@ React__default.createElement(LabelView, Object.assign({}, props))
 var Label = LabelComponent;
 // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-var _excluded$p = ["children", "size", "error", "color", "styles", "helperText"];
+var _excluded$g = ["children", "size", "error", "color", "styles", "helperText"];
 var FieldLabel = _ref => {
   var {
       children,
@@ -1853,7 +2490,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -1866,12 +2503,12 @@ var FieldLabel = _ref => {
   }, styles['label'], props), children);
 };
 
-var _excluded$q = ["children"];
+var _excluded$h = ["children"];
 var FieldWrapper = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     width: "100%"
   }, props), children);
@@ -1887,10 +2524,10 @@ var IconSizes$2 = {
   xl: 16
 };
 
-var _excluded$r = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$2 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$1 = ["option", "size", "removeOption"],
-  _excluded4$1 = ["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"];
+var _excluded$i = ["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"];
 // Defines a component to render individual selection items within a list.
 var Item = _ref => {
   var {
@@ -1901,7 +2538,7 @@ var Item = _ref => {
       callback = () => {},
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   // 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.
@@ -1966,7 +2603,7 @@ var HiddenSelect = _ref3 => {
       isReadOnly = false,
       options = []
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$3);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -2056,7 +2693,7 @@ var MultiSelect = _ref5 => {
       size = 'md',
       removeOption = () => {}
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$1);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$2);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     gap: 10,
@@ -2068,7 +2705,7 @@ var MultiSelect = _ref5 => {
     onClick: event => event.stopPropagation()
   }, props), /*#__PURE__*/React__default.createElement(Text, {
     size: size
-  }, option), /*#__PURE__*/React__default.createElement(CloseSvg, {
+  }, option), /*#__PURE__*/React__default.createElement(CloseIcon, {
     role: "close-button",
     color: "inherit",
     size: IconSizes$2[size],
@@ -2112,7 +2749,7 @@ var SelectView = _ref6 => {
       setHighlightedIndex,
       highlightedIndex
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded4$1);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded4$2);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -2182,12 +2819,14 @@ var SelectView = _ref6 => {
     isDisabled: isDisabled,
     placeholder: placeholder,
     removeOption: handleRemoveOption
-  })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? (/*#__PURE__*/React__default.createElement(ArrowDownSvg, {
+  })), /*#__PURE__*/React__default.createElement(FieldIcons, null, !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, hide ? (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     color: "inherit",
     size: IconSizes$2[size],
-    style: styles.icon
-  })) : (/*#__PURE__*/React__default.createElement(ArrowUpSvg, {
+    style: styles.icon,
+    orientation: "down"
+  })) : (/*#__PURE__*/React__default.createElement(ChevronIcon, {
     color: "inherit",
+    orientation: "up",
     size: IconSizes$2[size],
     style: styles.icon
   })))))), !hide && (/*#__PURE__*/React__default.createElement(DropDown, {
@@ -2356,7 +2995,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$s = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "colorScheme", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "styles"];
+var _excluded$j = ["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));
@@ -2386,7 +3025,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -2476,7 +3115,7 @@ var useTextAreaState = _ref => {
   // Export of the useTextAreaState hook for external usage.
 };
 
-var _excluded$t = ["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$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 TextAreaView = _ref => {
   var {
       id,
@@ -2516,7 +3155,7 @@ var TextAreaView = _ref => {
         field: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = Object.assign({
     margin: 0,
@@ -2646,7 +3285,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$u = ["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$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 TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "text"
 }, props));
@@ -2689,7 +3328,7 @@ var TextFieldView = _ref => {
       onFocus,
       onBlur = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var {
     getColor
   } = appStudio.useTheme();
@@ -2785,7 +3424,7 @@ var TextFieldView = _ref => {
   }, fieldStyles, props, {
     onChange: handleChange,
     value: value
-  }))), (rightChild || isClearable && value) && (/*#__PURE__*/React__default.createElement(FieldIcons, null, isClearable && value && !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(CloseSvg, {
+  }))), (rightChild || isClearable && value) && (/*#__PURE__*/React__default.createElement(FieldIcons, null, isClearable && value && !isReadOnly && !isDisabled && (/*#__PURE__*/React__default.createElement(CloseIcon, {
     size: appStudio.Typography.fontSizes[size],
     color: IconColor,
     onClick: handleClear
@@ -2870,7 +3509,7 @@ var IconSizes$3 = {
   '6xl': 60
 };
 
-var _excluded$v = ["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$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 CheckboxView = _ref => {
   var {
       id,
@@ -2898,7 +3537,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -2945,8 +3584,12 @@ var CheckboxView = _ref => {
     alignItems: "center"
   }, labelPosition === 'left' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
-  }, styles == null ? void 0 : styles.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(IndeterminateSvg, null)) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(CheckSvg, {
-    size: IconSizes$3[size]
+  }, styles == null ? void 0 : styles.label), label)), /*#__PURE__*/React__default.createElement(Center, Object.assign({}, checkboxStyle.checkbox), isIndeterminate ? (/*#__PURE__*/React__default.createElement(MinusIcon, {
+    size: IconSizes$3[size],
+    color: "white"
+  })) : (isChecked || isSelected) && (icon != null ? icon : /*#__PURE__*/React__default.createElement(TickIcon, {
+    size: IconSizes$3[size],
+    color: "white"
   }))), labelPosition === 'right' && label && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: size
   }, styles == null ? void 0 : styles.label), label))), infoText && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
@@ -4453,11 +5096,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$w = ["size"],
-  _excluded2$3 = ["size"],
-  _excluded3$2 = ["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 _excluded$n = ["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$w);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
@@ -4466,7 +5109,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -4490,6 +5133,7 @@ var DropDownItem = _ref3 => {
     margin: 0,
     role: "DropDownItem",
     listStyleType: "none",
+    fontWeight: "normal",
     paddingVertical: 6,
     paddingHorizontal: 12,
     onMouseEnter: handleHover,
@@ -4568,7 +5212,7 @@ var CountryPickerView = _ref5 => {
         box: {}
       }
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$2);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
   var {
     getColor
   } = appStudio.useTheme();
@@ -4653,11 +5297,13 @@ var CountryPickerView = _ref5 => {
   }, fieldStyles, props, {
     value: value,
     onChange: handleChange
-  }))), /*#__PURE__*/React__default.createElement(FieldIcons, null, hide ? (/*#__PURE__*/React__default.createElement(ArrowDownSvg, {
+  }))), /*#__PURE__*/React__default.createElement(FieldIcons, null, hide ? (/*#__PURE__*/React__default.createElement(Icon$1.ChevronIcon, {
+    orientation: "down",
     size: IconSizes$4[size],
     color: IconColor,
     style: styles['icon']
-  })) : (/*#__PURE__*/React__default.createElement(ArrowUpSvg, {
+  })) : (/*#__PURE__*/React__default.createElement(Icon$1.ChevronIcon, {
+    orientation: "up",
     size: IconSizes$4[size],
     color: IconColor,
     style: styles['icon']
@@ -4693,7 +5339,7 @@ var useDatePickerState = () => {
   };
 };
 
-var _excluded$x = ["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$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 DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -4727,7 +5373,7 @@ var DatePickerView = _ref => {
       onChange,
       onChangeText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -4815,42 +5461,240 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$y = ["visibleIcon", "hiddenIcon"],
-  _excluded2$4 = ["isVisible", "setIsVisible"];
-var PasswordComponent = _ref => {
+var _excluded$p = ["visibleIcon", "hiddenIcon"],
+  _excluded2$5 = ["isVisible", "setIsVisible"];
+var PasswordComponent = _ref => {
+  var {
+      visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
+        size: 14
+      }),
+      hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
+        size: 14
+      })
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+  var _usePasswordState = usePasswordState(props),
+    {
+      isVisible,
+      setIsVisible
+    } = _usePasswordState,
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$5);
+  return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
+    type: isVisible ? 'text' : 'password',
+    isClearable: false,
+    rightChild: /*#__PURE__*/React__default.createElement(appStudio.View, {
+      onClick: () => {
+        if (!props.isDisabled) {
+          setIsVisible(!isVisible);
+        }
+      }
+    }, isVisible ? visibleIcon : hiddenIcon)
+  }));
+};
+/**
+ * To allow users to securely enter sensitive information
+ */
+var Password = PasswordComponent;
+
+// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
+var useComboBoxState = (items, placeholder, searchPlaceholder) => {
+  // State hook for filtered items with initial state set to the items passed to the hook.
+  var [filteredItems, setFilteredItems] = React.useState(items);
+  // State hook to track the selected item with an initial state based on the placeholder or the first item.
+  var [selectedItem, setSelectedItem] = React.useState(placeholder ? {
+    value: placeholder,
+    label: placeholder
+  } : items[0]);
+  // State hook for highlighted index in the dropdown list, initialized to 0.
+  var [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
+  var [searchQuery, setSearchQuery] = React.useState(searchPlaceholder != null ? searchPlaceholder : '');
+  // State hook to manage dropdown visibility, starts as false (hidden).
+  var [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
+  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
+  return {
+    filteredItems,
+    setFilteredItems,
+    selectedItem,
+    setSelectedItem,
+    highlightedIndex,
+    setHighlightedIndex,
+    searchQuery,
+    setSearchQuery,
+    isDropdownVisible,
+    setIsDropdownVisible
+  };
+};
+
+var _excluded$q = ["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 {
+      placeholder,
+      items,
+      showTick = true,
+      onSelect,
+      searchEnabled = true,
+      left,
+      right,
+      label,
+      filteredItems,
+      setSelectedItem,
+      selectedItem,
+      highlightedIndex,
+      setHighlightedIndex,
+      searchQuery,
+      setSearchQuery,
+      setFilteredItems,
+      styles,
+      isDropdownVisible,
+      setIsDropdownVisible
+      // Collects all further props not destructured explicitly.
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+  // Sets up an effect to handle clicking outside the dropdown to close it.
+  React.useEffect(() => {
+    var handleClickOutside = event => {
+      var path = event.composedPath();
+      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
+      if (isOutside) {
+        setIsDropdownVisible(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+  // Defines 'handleSearch' to filter items based on the user's query.
+  var handleSearch = query => {
+    setSearchQuery(query);
+    if (query === '') {
+      setFilteredItems(items);
+    } else {
+      var filtered = items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
+      setFilteredItems(filtered);
+    }
+    setHighlightedIndex(0);
+  };
+  // Defines 'handleSelect' to handle item selection and close the dropdown.
+  var handleSelect = item => {
+    setSelectedItem(item);
+    onSelect == null || onSelect(item);
+    setIsDropdownVisible(false);
+  };
+  // Starts the JSX returned by the component representing the combobox.
+  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    role: "combobox",
+    flexWrap: "nowrap",
+    gap: 15,
+    alignItems: "center",
+    width: "100%"
+  }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
+    styles: styles == null ? void 0 : styles.label,
+    htmlFor: props.id
+  }, label)), /*#__PURE__*/React__default.createElement(View, {
+    position: "relative"
+  }, /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    cursor: "pointer",
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
+    padding: "12px",
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "4px",
+    justifyContent: "space-between",
+    minWidth: 300,
+    flexWrap: "nowrap"
+  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    gap: 15,
+    alignItems: "center",
+    position: "relative",
+    width: "100%",
+    onClick: () => setIsDropdownVisible(!isDropdownVisible)
+  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
+    weight: "medium",
+    flexGrow: 1
+  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
+    id: "combobox-dropdown",
+    position: "absolute",
+    backgroundColor: "white",
+    boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
+    width: "100%",
+    overflowY: "auto",
+    zIndex: 10000,
+    bottom: -8,
+    left: 0,
+    transform: "translateY(100%)",
+    marginTop: "4px",
+    borderRadius: "4px"
+  }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
+    id: props.id,
+    name: props.name,
+    width: "100%",
+    type: "search",
+    value: searchQuery,
+    onChange: value => handleSearch(value),
+    hint: placeholder,
+    isClearable: false,
+    leftChild: /*#__PURE__*/React__default.createElement(Icon$1.SearchIcon, {
+      size: 12
+    }),
+    styles: {
+      box: Object.assign({
+        width: '100%',
+        padding: '6px 12px',
+        borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
+      }, styles == null ? void 0 : styles.text)
+    }
+  })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(View, {
+    margin: 0,
+    padding: 4
+  }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+    justifyContent: "space-between",
+    key: item.value,
+    padding: "12px",
+    cursor: "pointer",
+    borderRadius: 4,
+    backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
+    onMouseEnter: () => setHighlightedIndex(index),
+    onClick: () => handleSelect(item)
+  }, styles == null ? void 0 : styles.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(Icon$1.TickIcon, {
+    size: 20
+  }))))))))))));
+};
+
+var _excluded$r = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+// Defines the ComboBoxComponent functional component with ComboBoxProps
+var ComboBoxComponent = _ref => {
   var {
-      visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeSvg, {
-        size: 14
-      }),
-      hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeSvg, {
-        size: 14
-      })
+      // Destructures 'id' from component props
+      id,
+      // Destructures 'name' from component props
+      name,
+      // Destructures 'items' from component props, used to populate combobox
+      items,
+      // Destructures 'placeholder' from component props, displayed when no item selected
+      placeholder,
+      // Destructures 'searchPlaceholder' from component props, used as the search field placeholder
+      searchPlaceholder
+      // Destructures the rest of the props not explicitly defined
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
-  var _usePasswordState = usePasswordState(props),
-    {
-      isVisible,
-      setIsVisible
-    } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$4);
-  return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
-    type: isVisible ? 'text' : 'password',
-    isClearable: false,
-    rightChild: /*#__PURE__*/React__default.createElement(appStudio.View, {
-      onClick: () => {
-        if (!props.isDisabled) {
-          setIsVisible(!isVisible);
-        }
-      }
-    }, isVisible ? visibleIcon : hiddenIcon)
-  }));
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+  // Initializes ComboBox state using custom hook with items and placeholders
+  var state = useComboBoxState(items, placeholder, searchPlaceholder);
+  return (
+    /*#__PURE__*/
+    // Render ComboBoxView with passed and state props
+    React__default.createElement(ComboBoxView, Object.assign({
+      id: id,
+      name: name,
+      items: items
+    }, state, props))
+  );
 };
-/**
- * To allow users to securely enter sensitive information
- */
-var Password = PasswordComponent;
+// Exports the ComboBoxComponent as ComboBox
+var ComboBox = ComboBoxComponent;
 
-var _excluded$z = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$s = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -4866,7 +5710,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -4914,7 +5758,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$A = ["name", "type"];
+var _excluded$t = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -4953,7 +5797,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var focus = useFormFocus();
   var {
     touched,
@@ -4997,13 +5841,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$B = ["value"];
+var _excluded$u = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$B);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$u);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -5061,11 +5905,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$C = ["value"];
+var _excluded$v = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$C);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$v);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -5073,25 +5917,25 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$D = ["visibleIcon", "hiddenIcon"],
-  _excluded2$5 = ["isVisible", "setIsVisible"];
+var _excluded$w = ["visibleIcon", "hiddenIcon"],
+  _excluded2$6 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
-      visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeSvg, {
+      visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
         size: 14
       }),
-      hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeSvg, {
+      hiddenIcon = /*#__PURE__*/React__default.createElement(CloseEyeIcon, {
         size: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$5);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$6);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -5109,245 +5953,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-// Defines the useComboBoxState hook with parameters for the list of items and optional placeholder texts.
-var useComboBoxState = (items, placeholder, searchPlaceholder) => {
-  // State hook for filtered items with initial state set to the items passed to the hook.
-  var [filteredItems, setFilteredItems] = React.useState(items);
-  // State hook to track the selected item with an initial state based on the placeholder or the first item.
-  var [selectedItem, setSelectedItem] = React.useState(placeholder ? {
-    value: placeholder,
-    label: placeholder
-  } : items[0]);
-  // State hook for highlighted index in the dropdown list, initialized to 0.
-  var [highlightedIndex, setHighlightedIndex] = React.useState(0);
-  // State hook for search query with an initial state based on the searchPlaceholder or empty string.
-  var [searchQuery, setSearchQuery] = React.useState(searchPlaceholder != null ? searchPlaceholder : '');
-  // State hook to manage dropdown visibility, starts as false (hidden).
-  var [isDropdownVisible, setIsDropdownVisible] = React.useState(false);
-  // Start of object returned by the useComboBoxState hook containing all state and state updater functions.
-  return {
-    filteredItems,
-    setFilteredItems,
-    selectedItem,
-    setSelectedItem,
-    highlightedIndex,
-    setHighlightedIndex,
-    searchQuery,
-    setSearchQuery,
-    isDropdownVisible,
-    setIsDropdownVisible
-  };
-};
-
-var _excluded$E = ["size", "color"];
-var TickSvg = _ref => {
-  var {
-      size = 16,
-      color = '#c0c0c0'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    width: size + "px",
-    height: size + "px",
-    viewBox: "0 -0.5 25 25",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "0"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, ' ', /*#__PURE__*/React__default.createElement("path", {
-    d: "M5.5 12.5L10.167 17L19.5 8",
-    stroke: "#444444",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), ' ')));
-};
-
-var _excluded$F = ["size", "color"];
-var SearchLoopSvg = _ref => {
-  var {
-      size = 14,
-      color = '#c0c0c0'
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
-  return /*#__PURE__*/React__default.createElement(Center, {
-    width: size + "px",
-    height: size + "px"
-  }, /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    fill: "#c0c0c0",
-    width: size + "px",
-    height: size + "px",
-    version: "1.1",
-    id: "Capa_1",
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 488.4 488.4",
-    stroke: color
-  }, props), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_bgCarrier",
-    strokeWidth: "9.279599999999999"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_tracerCarrier",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    id: "SVGRepo_iconCarrier"
-  }, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("path", {
-    d: "M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 S381.9,104.65,381.9,203.25z"
-  }), ' ')))));
-};
-
-var _excluded$G = ["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 {
-      placeholder,
-      items,
-      showTick = true,
-      onSelect,
-      searchEnabled = true,
-      left,
-      right,
-      label,
-      filteredItems,
-      setSelectedItem,
-      selectedItem,
-      highlightedIndex,
-      setHighlightedIndex,
-      searchQuery,
-      setSearchQuery,
-      setFilteredItems,
-      styles,
-      isDropdownVisible,
-      setIsDropdownVisible
-      // Collects all further props not destructured explicitly.
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$G);
-  // Sets up an effect to handle clicking outside the dropdown to close it.
-  React.useEffect(() => {
-    var handleClickOutside = event => {
-      var path = event.composedPath();
-      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'combobox-dropdown');
-      if (isOutside) {
-        setIsDropdownVisible(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-  // Defines 'handleSearch' to filter items based on the user's query.
-  var handleSearch = query => {
-    setSearchQuery(query);
-    if (query === '') {
-      setFilteredItems(items);
-    } else {
-      var filtered = items.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
-      setFilteredItems(filtered);
-    }
-    setHighlightedIndex(0);
-  };
-  // Defines 'handleSelect' to handle item selection and close the dropdown.
-  var handleSelect = item => {
-    setSelectedItem(item);
-    onSelect == null || onSelect(item);
-    setIsDropdownVisible(false);
-  };
-  // Starts the JSX returned by the component representing the combobox.
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    role: "combobox",
-    flexWrap: "nowrap",
-    gap: 15,
-    alignItems: "center",
-    width: "100%"
-  }, props), label && (/*#__PURE__*/React__default.createElement(Text, {
-    styles: styles == null ? void 0 : styles.label,
-    htmlFor: props.id
-  }, label)), /*#__PURE__*/React__default.createElement(View, {
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    cursor: "pointer",
-    backgroundColor: "white",
-    boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
-    padding: "12px",
-    display: "flex",
-    alignItems: "center",
-    borderRadius: "4px",
-    justifyContent: "space-between",
-    minWidth: 300,
-    flexWrap: "nowrap"
-  }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    gap: 15,
-    alignItems: "center",
-    position: "relative",
-    width: "100%",
-    onClick: () => setIsDropdownVisible(!isDropdownVisible)
-  }, styles == null ? void 0 : styles.labelContainer), left, /*#__PURE__*/React__default.createElement(Text, Object.assign({
-    weight: "medium",
-    flexGrow: 1
-  }, styles == null ? void 0 : styles.label), selectedItem.label)), right, isDropdownVisible && (/*#__PURE__*/React__default.createElement(View, Object.assign({
-    id: "combobox-dropdown",
-    position: "absolute",
-    backgroundColor: "white",
-    boxShadow: "rgba(0, 0 ,0 ,0.16) 0px 1px 4px",
-    width: "100%",
-    overflowY: "auto",
-    zIndex: 10000,
-    bottom: -8,
-    left: 0,
-    transform: "translateY(100%)",
-    marginTop: "4px",
-    borderRadius: "4px"
-  }, styles == null ? void 0 : styles.dropdown), searchEnabled && (/*#__PURE__*/React__default.createElement(TextFieldView, {
-    id: props.id,
-    name: props.name,
-    width: "100%",
-    type: "search",
-    value: searchQuery,
-    onChange: value => handleSearch(value),
-    hint: placeholder,
-    isClearable: false,
-    leftChild: /*#__PURE__*/React__default.createElement(SearchLoopSvg, {
-      size: 12
-    }),
-    styles: {
-      box: Object.assign({
-        width: '100%',
-        padding: '6px 12px',
-        borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
-      }, styles == null ? void 0 : styles.text)
-    }
-  })), filteredItems.length > 0 && (/*#__PURE__*/React__default.createElement(View, {
-    margin: 0,
-    padding: 4
-  }, filteredItems.map((item, index) => (/*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
-    justifyContent: "space-between",
-    key: item.value,
-    padding: "12px",
-    cursor: "pointer",
-    borderRadius: 4,
-    backgroundColor: index === highlightedIndex ? 'color.gray.100' : 'transparent',
-    onMouseEnter: () => setHighlightedIndex(index),
-    onClick: () => handleSelect(item)
-  }, styles == null ? void 0 : styles.item), /*#__PURE__*/React__default.createElement(Text, null, item.label), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, item.icon && item.icon, item.value === selectedItem.value && showTick && !item.icon && /*#__PURE__*/React__default.createElement(TickSvg, null))))))))))));
-};
-
-var _excluded$H = ["items", "placeholder", "searchPlaceholder"];
-var ComboBoxComponent = _ref => {
+var _excluded$x = ["items", "placeholder", "searchPlaceholder"];
+var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -5361,7 +5974,7 @@ var ComboBoxComponent = _ref => {
 /**
  * ComboBox allows users to select one or more options from a list of choices.
  */
-var FormikComboBox = ComboBoxComponent;
+var FormikComboBox = ComboBoxComponent$1;
 
 // Create your store with the initial state and actions.
 var useMessageStore = /*#__PURE__*/zustand.create(set => ({
@@ -5415,14 +6028,14 @@ var Themes$1 = {
     },
     icon: {
       color: 'color.blue.500',
-      name: 'InformationSvg'
+      name: 'InformationIcon'
     },
     content: {
       color: 'color.blue.500'
     },
     close: {
       color: 'color.blue.500',
-      name: 'CloseSvg'
+      name: 'CloseIcon'
     }
   },
   success: {
@@ -5432,14 +6045,14 @@ var Themes$1 = {
     },
     icon: {
       color: 'color.green.500',
-      name: 'CheckCircleSvg'
+      name: 'CheckCircleIcon'
     },
     content: {
       color: 'color.green.500'
     },
     close: {
       color: 'color.green.500',
-      name: 'CloseSvg'
+      name: 'CloseIcon'
     }
   },
   error: {
@@ -5449,14 +6062,14 @@ var Themes$1 = {
     },
     icon: {
       color: 'color.red.500',
-      name: 'ErrrorSvg'
+      name: 'ErrrorIcon'
     },
     content: {
       color: 'color.red.500'
     },
     close: {
       color: 'color.red.500',
-      name: 'CloseSvg'
+      name: 'CloseIcon'
     }
   },
   warning: {
@@ -5466,14 +6079,14 @@ var Themes$1 = {
     },
     icon: {
       color: 'color.orange.500',
-      name: 'ErrrorSvg'
+      name: 'ErrrorIcon'
     },
     content: {
       color: 'color.orange.500'
     },
     close: {
       color: 'color.orange.500',
-      name: 'CloseSvg'
+      name: 'CloseIcon'
     }
   }
 };
@@ -5520,19 +6133,19 @@ var MessageView = _ref => {
     error: '#ef4444'
   }[variant];
   var iconComponent = {
-    info: /*#__PURE__*/React__default.createElement(InfoSvg, Object.assign({
+    info: /*#__PURE__*/React__default.createElement(InfoIcon, Object.assign({
       size: 24,
       color: iconColor
     }, styles == null ? void 0 : styles.icon)),
-    success: /*#__PURE__*/React__default.createElement(SuccessSvg, Object.assign({
+    success: /*#__PURE__*/React__default.createElement(SuccessIcon, Object.assign({
       size: 24,
       color: iconColor
     }, styles == null ? void 0 : styles.icon)),
-    warning: /*#__PURE__*/React__default.createElement(WarningSvg, Object.assign({
+    warning: /*#__PURE__*/React__default.createElement(WarningIcon, Object.assign({
       size: 24,
       color: iconColor
     }, styles == null ? void 0 : styles.icon)),
-    error: /*#__PURE__*/React__default.createElement(ErrorSvg, Object.assign({
+    error: /*#__PURE__*/React__default.createElement(ErrorIcon, Object.assign({
       size: 24,
       color: iconColor
     }, styles == null ? void 0 : styles.icon))
@@ -5573,7 +6186,7 @@ var MessageView = _ref => {
     onClick: () => {
       hide();
     }
-  }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseSvg, Object.assign({
+  }, styles == null || (_styles$closingIcon = styles.closingIcon) == null ? void 0 : _styles$closingIcon.container), /*#__PURE__*/React__default.createElement(CloseIcon, Object.assign({
     size: 18,
     color: iconColor
   }, styles == null || (_styles$closingIcon2 = styles.closingIcon) == null ? void 0 : _styles$closingIcon2.icon)))));
@@ -5716,11 +6329,11 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$I = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
-  _excluded2$6 = ["children", "shadow", "isFullScreen", "shape"],
-  _excluded3$3 = ["children", "buttonColor", "iconSize", "buttonPosition"],
-  _excluded4$2 = ["children"],
-  _excluded5 = ["children"];
+var _excluded$y = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position"],
+  _excluded2$7 = ["children", "shadow", "isFullScreen", "shape"],
+  _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition"],
+  _excluded4$3 = ["children"],
+  _excluded5$1 = ["children"];
 var ModalOverlay = _ref => {
   var {
       children,
@@ -5730,7 +6343,7 @@ var ModalOverlay = _ref => {
       onClose = () => {},
       position = 'center'
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -5763,7 +6376,7 @@ var ModalContainer = _ref2 => {
       isFullScreen = false,
       shape = 'rounded'
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$6);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -5794,12 +6407,12 @@ var ModalHeader = _ref3 => {
       iconSize = 'md',
       buttonPosition = 'right'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
     onClick: onClose,
     colorScheme: "transparent",
-    icon: /*#__PURE__*/React__default.createElement(CloseSvg, {
+    icon: /*#__PURE__*/React__default.createElement(CloseIcon, {
       size: HeaderIconSizes[iconSize],
       color: buttonColor
     }),
@@ -5819,7 +6432,7 @@ var ModalBody = _ref4 => {
   var {
       children
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var defaultBorder = {
     borderBottomWidth: 2,
     borderTopWidth: 2,
@@ -5835,7 +6448,7 @@ var ModalFooter = _ref5 => {
   var {
       children
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
@@ -6054,7 +6667,7 @@ var TabsView = props => {
     // Returns a boolean indicating if the given tab is identical to the first tab in 'tabsState'.
     return tab.value === tabsState[0].value;
   };
-  return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
+  return /*#__PURE__*/React__default.createElement(Layout.Vertical, Object.assign({
     width: "100w",
     height: '100%'
   }, styles == null ? void 0 : styles.container), /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -6119,7 +6732,7 @@ var ToggleShapes = {
   pillShaped: 24
 };
 
-var _excluded$J = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
+var _excluded$z = ["children", "shape", "colorScheme", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle"];
 var ToggleView = _ref => {
   var {
       children,
@@ -6133,7 +6746,7 @@ var ToggleView = _ref => {
       setIsToggled,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var toggleColor = !isDisabled ? colorScheme : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var ToggleVariants = {
@@ -6175,7 +6788,7 @@ var ToggleView = _ref => {
   }, ToggleVariants[variant], props), children);
 };
 
-var _excluded$K = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$A = ["children", "shape", "colorScheme", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -6188,7 +6801,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$K);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -6311,6 +6924,7 @@ exports.Bottom = Bottom;
 exports.Button = Button;
 exports.Center = Center;
 exports.Checkbox = Checkbox;
+exports.ComboBox = ComboBox;
 exports.CountryPicker = CountryPicker;
 exports.DatePicker = DatePicker;
 exports.FileImage = FileImage;
@@ -6326,6 +6940,7 @@ exports.FormikSwitch = FormikSwitch;
 exports.FormikTextArea = FormikTextArea;
 exports.FormikTextField = FormikTextField;
 exports.Horizontal = Horizontal;
+exports.Icon = Icon;
 exports.Inline = Inline;
 exports.Left = Left;
 exports.Link = Link;