@app-studio/web 0.9.67 → 0.9.69

package/dist/web.cjs.development.js

@@ -14,6 +14,7 @@ require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.regexp.to-string.js');
 var appStudio = require('app-studio');
 require('core-js/modules/es.symbol.description.js');
+var dynamic = require('lucide-react/dynamic');
 require('core-js/modules/es.array-buffer.constructor.js');
 require('core-js/modules/es.array-buffer.slice.js');
 require('core-js/modules/es.typed-array.uint8-array.js');
@@ -453,2407 +454,370 @@ Accordion.Trigger = AccordionTrigger;
 Accordion.Content = AccordionContent;
 
 var _excluded$2 = ["widthHeight", "color", "transform", "orientation", "children"],
-  _excluded2$1 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded3$1 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded4$1 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded5 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded6 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded7 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded8 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded9 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded10 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded11 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded12 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded13 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded14 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded15 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded16 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded17 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded18 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded19 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded20 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded21 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded22 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded23 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded24 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded25 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded26 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded27 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded28 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded29 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded30 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded31 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded32 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded33 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded34 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded35 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded36 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded37 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded38 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded39 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded40 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded41 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded42 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded43 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded44 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded45 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded46 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded47 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded48 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded49 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded50 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded51 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded52 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded53 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded54 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded55 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded56 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded57 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded58 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded59 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded60 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded61 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded62 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded63 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded64 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded65 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded66 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded67 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded68 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded69 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded70 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded71 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded72 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded73 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded74 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded75 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded76 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded77 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded78 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded79 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded80 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded81 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded82 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded83 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded84 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded85 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded86 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded87 = ["widthHeight", "color", "strokeWidth", "filled"];
+  _excluded2$1 = ["name", "widthHeight", "color", "filled", "strokeWidth", "size", "children"];
 // Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
       widthHeight,
-      color = 'black',
-      transform,
-      orientation = 'up',
-      children
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
-    widthHeight: widthHeight,
-    lineHeight: widthHeight,
-    color: color,
-    display: "flex",
-    transform: transform ? transform : orientation === 'left' ? 'rotate(-90deg)' : orientation === 'right' ? 'rotate(90deg)' : orientation === 'up' ? 'rotate(0deg)' : orientation === 'down' ? 'rotate(180deg)' : 'none'
-  }, rest), children);
-};
-// Utility function to handle fill and stroke based on 'filled' prop
-var getSvgProps = (filled, color, strokeWidth) => {
-  var {
-    getColor
-  } = appStudio.useTheme();
-  return {
-    fill: filled ? getColor(color) : 'none',
-    stroke: filled ? 'none' : getColor(color),
-    strokeWidth,
-    strokeLinecap: 'round',
-    strokeLinejoin: 'round'
-  };
-};
-var UserIcon = _ref2 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", {
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "8",
-    r: "4"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M4 20c0-4 4-7 8-7s8 3 8 7"
-  })));
-};
-var HelpIcon = _ref3 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M9.09 9a3 3 0 1 1 5.91 1c0 2-3 3-3 3"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  })));
-};
-var FolderIcon = _ref4 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "9",
-    y1: "17",
-    x2: "9",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "15",
-    y1: "17",
-    x2: "15",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "17",
-    x2: "12",
-    y2: "17"
-  })));
-};
-// Example Icon Component: ChevronIcon
-var ChevronIcon = _ref5 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M7.41 15.41L12 10.83L16.59 15.41L18 14L12 8L6 14L7.41 15.41Z",
-    fill: "currentColor"
-  })));
-};
-var DragHandleIcon = _ref6 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("g", null, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "9",
-    cy: "6",
-    r: "2"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "9",
-    cy: "12",
-    r: "2"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "9",
-    cy: "18",
-    r: "2"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "15",
-    cy: "6",
-    r: "2"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "15",
-    cy: "12",
-    r: "2"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "15",
-    cy: "18",
-    r: "2"
-  }))));
-};
-var FileIcon = _ref7 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M6 2H14L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2Z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 2V8H20"
-  })));
-};
-// Video Icon Component
-var VideoIcon = _ref8 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "2",
-    y: "4",
-    width: "20",
-    height: "16",
-    rx: "2",
-    ry: "2",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "10 8 16 12 10 16 10 8",
-    fill: filled ? filled ? 'white' : color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  })));
-};
-// Image Icon Component
-var ImageIcon = _ref9 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref9,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "20",
-    height: "20",
-    rx: "2",
-    ry: "2",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "8.5",
-    cy: "8.5",
-    r: "1.5",
-    fill: filled ? filled ? 'white' : color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "21 15 16 10 5 21",
-    fill: "none",
-    stroke: filled ? 'white' : color,
-    strokeWidth: strokeWidth
-  })));
-};
-// Audio/Speaker Icon Component
-var AudioIcon = _ref10 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", Object.assign({
-    d: "M11 5l-5 5H2v4h4l5 5V5z"
-  }, getSvgProps(filled, color, strokeWidth))), /*#__PURE__*/React__default.createElement("path", Object.assign({
-    d: "M15.54 8.46a5 5 0 0 1 0 7.07"
-  }, getSvgProps(false, color, strokeWidth))), /*#__PURE__*/React__default.createElement("path", Object.assign({
-    d: "M18.07 5.93a8 8 0 0 1 0 12.14"
-  }, getSvgProps(false, color, strokeWidth)))));
-};
-var TwitterIcon = _ref11 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref11,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M22.46 6.01c-.83.37-1.72.62-2.65.74a4.6 4.6 0 0 0 2.01-2.54 9.2 9.2 0 0 1-2.91 1.11 4.54 4.54 0 0 0-7.75 4.14A12.86 12.86 0 0 1 3.15 4.47a4.54 4.54 0 0 0 1.4 6.06 4.5 4.5 0 0 1-2.06-.57v.06a4.54 4.54 0 0 0 3.64 4.45 4.61 4.61 0 0 1-2.05.08 4.54 4.54 0 0 0 4.23 3.15 9.12 9.12 0 0 1-5.64 1.94c-.37 0-.74-.02-1.1-.07A12.86 12.86 0 0 0 8.21 21c8.38 0 12.96-6.94 12.96-12.96 0-.2 0-.4-.01-.6a9.28 9.28 0 0 0 2.3-2.37z",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  })));
-};
-var XIcon = _ref12 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref12,
-    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z",
-    fill: filled ? color : 'none',
-    stroke: color,
-    strokeWidth: strokeWidth
-  })));
-};
-// Example of a Twitch Icon
-var TwitchIcon = _ref13 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref13,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M2 2v16h5v4l4-4h5l6-6V2H2zm18 10-3 3h-5l-3 3v-3H4V4h16v8z",
-    fill: filled ? color : 'none',
-    stroke: color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 7h2v5h-2V7zm-4 0h2v5H10V7z",
-    fill: filled ? color : 'none',
-    stroke: color,
-    strokeWidth: filled ? 0 : strokeWidth
-  })));
-};
-// Example of another Icon: CloseIcon
-var CloseIcon = _ref14 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 2
-    } = _ref14,
-    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "18",
-    y1: "6",
-    x2: "6",
-    y2: "18"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "6",
-    y1: "6",
-    x2: "18",
-    y2: "18"
-  })));
-};
-var InstagramIcon = _ref15 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref15,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "2",
-    y: "2",
-    width: "20",
-    height: "20",
-    rx: "5",
-    ry: "5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "17.5",
-    y1: "6.5",
-    x2: "17.51",
-    y2: "6.5"
-  })));
-};
-var YoutubeIcon = _ref16 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref16,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M21.8 8.001A2.8 2.8 0 0 0 19 5.2C17.793 5 12 5 12 5s-5.793 0-7 0.2a2.8 2.8 0 0 0-2.8 2.8c-0.2 1.207-0.2 3-0.2 3s0 1.793 0.2 3a2.8 2.8 0 0 0 2.8 2.8c1.207 0.2 7 0.2 7 0.2s5.793 0 7-0.2a2.8 2.8 0 0 0 2.8-2.8c0.2-1.207 0.2-3 0.2-3s0-1.793-0.2-3z",
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
-    strokeWidth: filled ? 0 : strokeWidth
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "10 8 10 14 14 10",
-    fill: "white" // Ensures the play button is transparent
-    ,
-    stroke: 'white',
-    strokeWidth: strokeWidth
-  })));
-};
-var FacebookIcon = _ref17 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref17,
-    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M22 2H2v20h10v-7h-2v-3h2V9.5a4 4 0 0 1 4-4h3v3h-3a1 1 0 0 0-1 1V12h4l-1 3h-3v7h6V2z",
-    fill: filled ? color : 'none',
-    stroke: color,
-    strokeWidth: filled ? 0 : strokeWidth
-  })));
-};
-var LinkedinIcon = _ref18 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref18,
-    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"
-  }), /*#__PURE__*/React__default.createElement("rect", {
-    x: "2",
-    y: "9",
-    width: "4",
-    height: "12"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "4",
-    cy: "4",
-    r: "2"
-  })));
-};
-var ThreadsIcon = _ref19 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref19,
-    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5\n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
-  })));
-};
-// Example Refactored Icon: MinusIcon without undefined 'padding' prop
-var MinusIcon = _ref20 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      // Assuming minus can be filled; adjust as needed
-      strokeWidth = 1
-    } = _ref20,
-    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "8",
-    y1: "12",
-    x2: "16",
-    y2: "12"
-  })));
-};
-// Example Refactored Icon: InfoIcon with accessibility enhancements
-var InfoIcon = _ref21 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref21,
-    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props, {
-    "aria-label": "Information"
-  }), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-  })));
-};
-var PlayIcon = _ref22 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref22,
-    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M8 5v14l11-7z"
-  })));
-};
-var PauseIcon = _ref23 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref23,
-    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z"
-  })));
-};
-var HeartIcon = _ref24 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref24,
-    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M20.84 4.61c-1.54-1.56-4.04-1.56-5.59 0l-.7.72-.7-.72a3.95 3.95 0 0 0-5.59 0c-1.56 1.56-1.56 4.09 0 5.66l6.29 6.36 6.29-6.36c1.56-1.56 1.56-4.09 0-5.66z"
-  })));
-};
-var StarIcon = _ref25 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref25,
-    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
-  })));
-};
-var SaveIcon = _ref26 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref26,
-    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "17 21 17 13 7 13 7 21"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "7 3 7 8 15 8"
-  })));
-};
-var WarningIcon = _ref27 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref27,
-    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M10.29 3.86l-6.6 11.4c-.78 1.36.2 3.1 1.71 3.1h13.2c1.51 0 2.49-1.74 1.71-3.1l-6.6-11.4a2 2 0 0 0-3.42 0z"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "6",
-    x2: "12",
-    y2: "13"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "15",
-    x2: "12",
-    y2: "15"
-  })));
-};
-var BatteryIcon = _ref28 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref28,
-    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"
-  })));
-};
-var BookmarkIcon = _ref29 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref29,
-    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
-  })));
-};
-var CloudIcon = _ref30 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref30,
-    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
-  })));
-};
-var CopyIcon = _ref31 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref31,
-    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "9",
-    y: "9",
-    width: "13",
-    height: "13",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-  })));
-};
-var DustBinIcon = _ref32 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref32,
-    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-  })));
-};
-var DeleteIcon = DustBinIcon;
-var EditIcon = _ref33 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref33,
-    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.3785 8.44975L8.9636 17.8648C8.6844 18.144 8.3288 18.3343 7.94161 18.4117L4.99988 19.0001L5.58823 16.0583C5.66566 15.6711 5.85597 15.3155 6.13517 15.0363L15.5501 5.62132M18.3785 8.44975L19.7927 7.03553C20.1832 6.64501 20.1832 6.01184 19.7927 5.62132L18.3785 4.20711C17.988 3.81658 17.3548 3.81658 16.9643 4.20711L15.5501 5.62132M18.3785 8.44975L15.5501 5.62132"
-  })));
-};
-var ErrorIcon = _ref34 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = true
-    } = _ref34,
-    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "15",
-    y1: "9",
-    x2: "9",
-    y2: "15",
-    stroke: filled ? 'white' : color
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "9",
-    y1: "9",
-    x2: "15",
-    y2: "15",
-    stroke: filled ? 'white' : color
-  })));
-};
-var DownloadIcon = _ref35 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref35,
-    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
-  })));
-};
-var MenuIcon = _ref36 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref36,
-    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "3",
-    y1: "12",
-    x2: "21",
-    y2: "12"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "3",
-    y1: "6",
-    x2: "21",
-    y2: "6"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "3",
-    y1: "18",
-    x2: "21",
-    y2: "18"
-  })));
-};
-var ShareIcon = _ref37 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref37,
-    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "18",
-    cy: "5",
-    r: "3"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "6",
-    cy: "12",
-    r: "3"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "18",
-    cy: "19",
-    r: "3"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "8.59",
-    y1: "13.51",
-    x2: "15.42",
-    y2: "17.49"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "15.41",
-    y1: "6.51",
-    x2: "8.59",
-    y2: "10.49"
-  })));
-};
-var RefreshIcon = _ref38 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref38,
-    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "23 4 23 10 17 10"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
-  })));
-};
-var PrintIcon = _ref39 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref39,
-    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__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 MagicWandIcon = _ref40 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = true
-    } = _ref40,
-    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "-3",
-    y: "17",
-    width: "15",
-    height: "4",
-    rx: "1",
-    transform: "rotate(-40 2 13)"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M17 3L18 6L21 7L18 8L17 11L16 8L13 7L16 6L17 3Z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M21 9L21.7 11L23.5 12L21.7 13L21 15L20.3 13L18.5 12L20.3 11L21 9Z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16 15L16.7 16.5L18 17L16.7 17.5L16 19L15.3 17.5L14 17L15.3 16.5L16 15Z"
-  })));
-};
-var PanelIcon = _ref41 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref41,
-    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    width: "18",
-    height: "18",
-    x: "3",
-    y: "3",
-    rx: "2"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M9 3v18"
-  })));
-};
-var FilterIcon = _ref42 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref42,
-    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
-  })));
-};
-var HomeIcon = _ref43 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref43,
-    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
-  })));
-};
-var LocationIcon = _ref44 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref44,
-    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
-  })));
-};
-var LockIcon = _ref45 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref45,
-    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__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"
-  })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
-    x: "3",
-    y: "11",
-    width: "18",
-    height: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M7 11V7a5 5 0 0 1 10 0v4"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "16",
-    r: "1.5"
-  })))));
-};
-var MicrophoneIcon = _ref46 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref46,
-    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 1a4 4 0 0 0-4 4v6a4 4 0 0 0 8 0V5a4 4 0 0 0-4-4z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M19 10v2a7 7 0 0 1-14 0v-2"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "19",
-    x2: "12",
-    y2: "23"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "8",
-    y1: "23",
-    x2: "16",
-    y2: "23"
-  })));
-};
-var MoonIcon = _ref47 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref47,
-    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
-  })));
-};
-var NotificationIcon = _ref48 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref48,
-    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M13.73 21a2 2 0 0 1-3.46 0"
-  })));
-};
-var OpenEyeIcon = _ref49 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref49,
-    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 4C7 4 2.73 7.11 1 12c1.73 4.89 6 8 11 8s9.27-3.11 11-8c-1.73-4.89-6-8-11-8zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
-  })));
-};
-var ProfileIcon = _ref50 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref50,
-    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    fill: filled ? color : 'none',
-    d: "M12 13c-2.67 0-8 1.34-8 4v2c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-2c0-2.66-5.33-4-8-4zm0-9c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z M12 2C9.79 2 8 3.79 8 6s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z M12 13c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"
-  }), ' '));
-};
-var SettingsIcon = _ref51 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref51,
-    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.2.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-.9l-.4-2.6c0-.2-.3-.4-.5-.4h-4c-.2 0-.5.2-.5.4l-.4 2.6c-.6.2-1.2.5-1.7.9l-2.5-1c-.2-.1-.5 0-.6.2l-2 3.5c-.1.2-.1.4.1.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.2-.2.4-.1.6l2 3.5c.1.2.4.3.6.2l2.5-1c.5.4 1.1.7 1.7.9l.4 2.6c0 .2.3.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.5 1.7-.9l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.4-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"
-  })));
-};
-var SuccessIcon = _ref52 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref52,
-    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-  })));
-};
-var UnLikeIcon = _ref53 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref53,
-    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"
-  })));
-};
-var ClockIcon = _ref54 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref54,
-    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "12 6 12 12 16 14"
-  })));
-};
-var CameraIcon = _ref55 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref55,
-    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h3l2-3h8l2 3h3a2 2 0 0 1 2 2z"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "13",
-    r: "4"
-  })));
-};
-var BluetoothIcon = _ref56 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref56,
-    props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M17.71 7.71L12 2h-1v7.59L6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 11 14.41V22h1l5.71-5.71-4.3-4.29 4.3-4.29zM13 5.83l1.88 1.88L13 9.59V5.83zm1.88 10.46L13 18.17v-3.76l1.88 1.88z"
-  })));
-};
-var LikeIcon = _ref57 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref57,
-    props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"
-  })));
-};
-var UnlockIcon = _ref58 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref58,
-    props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__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 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-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"
-  })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
-    x: "3",
-    y: "11",
-    width: "18",
-    height: "11",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M7 11V7a5 5 0 0 1 9.9-1"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "16",
-    r: "1.5"
-  })))));
-};
-var WifiIcon = _ref59 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref59,
-    props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
-  })));
-};
-var UploadIcon = _ref60 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref60,
-    props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M9 15l3 -3l3 3"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 12l0 9"
-  })));
-};
-var SearchIcon = _ref61 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref61,
-    props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "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"
-  })));
-};
-// Stop Icon (rectangle) for stopping agent
-var StopIcon = _ref62 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 2
-    } = _ref62,
-    props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "3",
-    y: "3",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
-  })));
-};
-// Send Icon (paper airplane) for chat submit
-var SendIcon = _ref63 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 2
-    } = _ref63,
-    props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    x1: "22",
-    y1: "2",
-    x2: "11",
-    y2: "13"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "22 2 15 22 11 13 2 9 22 2"
-  })));
-};
-// Loading Spinner Icon for agent running indicator
-var LoadingSpinnerIcon = _ref64 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 2
-    } = _ref64,
-    props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "2",
-    x2: "12",
-    y2: "6"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "18",
-    x2: "12",
-    y2: "22"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "4.93",
-    y1: "4.93",
-    x2: "7.76",
-    y2: "7.76"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16.24",
-    y1: "16.24",
-    x2: "19.07",
-    y2: "19.07"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "2",
-    y1: "12",
-    x2: "6",
-    y2: "12"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "18",
-    y1: "12",
-    x2: "22",
-    y2: "12"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "4.93",
-    y1: "19.07",
-    x2: "7.76",
-    y2: "16.24"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16.24",
-    y1: "7.76",
-    x2: "19.07",
-    y2: "4.93"
-  })));
-};
-// Horizontal lines drag handle icon for Tree component
-var DragHandleLinesIcon = _ref65 => {
-  var {
-      widthHeight = 16,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1.5
-    } = _ref65,
-    props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M4 6H12",
-    stroke: "currentColor",
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M4 10H12",
-    stroke: "currentColor",
-    strokeWidth: strokeWidth,
-    strokeLinecap: "round"
-  })));
-};
-var CloseEyeIcon = _ref66 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref66,
-    props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "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 TrashIcon = DeleteIcon;
-var AttachmentIcon = _ref67 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref67,
-    props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    width: widthHeight,
-    height: widthHeight,
-    viewBox: "0 0 24 24"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    // fillRule="evenodd"
-    // clipRule="evenodd"
-    d: "M3.70104 5.15932C3.0938 3.61775 3.85122 1.8758 5.39278 1.26856L5.56558 1.2005C7.10714 0.593259 8.84909 1.35068 9.45633 2.89225L13.071 12.0685C13.4252 12.9677 12.9833 13.9839 12.0841 14.3381L11.9977 14.3721C11.0985 14.7264 10.0823 14.2845 9.72809 13.3853L7.81051 8.5172C7.7093 8.26027 7.83554 7.96995 8.09247 7.86874C8.34939 7.76753 8.63972 7.89377 8.74092 8.1507L10.6585 13.0188C10.8103 13.4042 11.2458 13.5935 11.6312 13.4417L11.7176 13.4077C12.103 13.2559 12.2923 12.8204 12.1405 12.435L8.52592 3.25875C8.12109 2.23104 6.95979 1.72609 5.93208 2.13092L5.75929 2.19898C4.73158 2.60381 4.22663 3.76511 4.63145 4.79282L8.99282 15.8648C9.65066 17.5348 11.5378 18.3554 13.2078 17.6975L13.467 17.5954C15.137 16.9376 15.9576 15.0505 15.2997 13.3804L12.6354 6.61663C12.5342 6.3597 12.6604 6.06938 12.9173 5.96817C13.1743 5.86696 13.4646 5.9932 13.5658 6.25013L16.2301 13.0139C17.0904 15.1978 16.0174 17.6656 13.8335 18.5258L13.5743 18.6279C11.3904 19.4882 8.92266 18.4152 8.0624 16.2313L3.70104 5.15932Z"
-  }), ' '));
-};
-var ExternalLinkIcon = _ref68 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref68,
-    props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(true, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 3h7v7h-2V5.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3ZM5 5h5v2H6v11h11v-4h2v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"
-  })));
-};
-var PlusIcon = _ref69 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref69,
-    props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "5",
-    x2: "12",
-    y2: "19"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "5",
-    y1: "12",
-    x2: "19",
-    y2: "12"
-  })));
-};
-var TickIcon = _ref70 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref70,
-    props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M5 13l4 4L19 7",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  })));
-};
-var BoldArrowIcon = _ref71 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = true,
-      strokeWidth = 1
-    } = _ref71,
-    props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
-  })));
-};
-var ArrowIcon = _ref72 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref72,
-    props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "12",
-    y1: "20",
-    x2: "12",
-    y2: "8"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "6 12 12 6 18 12"
-  })));
-};
-var SpinnerIcon = _ref73 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      filled = false,
-      strokeWidth = 1
-    } = _ref73,
-    props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10",
-    strokeOpacity: "0.25"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2a10 10 0 0 1 10 10",
-    strokeOpacity: "1"
-  })));
-};
-var CalendarIcon = _ref74 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref74,
-    props = _objectWithoutPropertiesLoose(_ref74, _excluded74);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "3",
-    y: "4",
-    width: "18",
-    height: "18",
-    rx: "2",
-    ry: "2"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "16",
-    y1: "2",
-    x2: "16",
-    y2: "6"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "8",
-    y1: "2",
-    x2: "8",
-    y2: "6"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    stroke: color,
-    x1: "3",
-    y1: "10",
-    x2: "21",
-    y2: "10"
-  })));
-};
-var SliderIcon = _ref75 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref75,
-    props = _objectWithoutPropertiesLoose(_ref75, _excluded75);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    x1: "3",
-    y1: "4",
-    x2: "10",
-    y2: "4"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "14",
-    y1: "4",
-    x2: "21",
-    y2: "4"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "3",
-    y1: "12",
-    x2: "12",
-    y2: "12"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "12",
-    x2: "21",
-    y2: "12"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "10",
-    y1: "1",
-    x2: "10",
-    y2: "7"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "9",
-    x2: "16",
-    y2: "15"
-  })));
-};
-var CropIcon = _ref76 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref76,
-    props = _objectWithoutPropertiesLoose(_ref76, _excluded76);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M6 2v14a2 2 0 0 0 2 2h14"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18 22V8a2 2 0 0 0-2-2H2"
-  })));
-};
-var ZoomInIcon = _ref77 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref77,
-    props = _objectWithoutPropertiesLoose(_ref77, _excluded77);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "11",
-    cy: "11",
-    r: "8"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "21",
-    y1: "21",
-    x2: "16.65",
-    y2: "16.65"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "11",
-    y1: "8",
-    x2: "11",
-    y2: "14"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "8",
-    y1: "11",
-    x2: "14",
-    y2: "11"
-  })));
-};
-var ZoomOutIcon = _ref78 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref78,
-    props = _objectWithoutPropertiesLoose(_ref78, _excluded78);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "11",
-    cy: "11",
-    r: "8"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "21",
-    y1: "21",
-    x2: "16.65",
-    y2: "16.65"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "8",
-    y1: "11",
-    x2: "14",
-    y2: "11"
-  })));
-};
-var TextIcon = _ref79 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref79,
-    props = _objectWithoutPropertiesLoose(_ref79, _excluded79);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    x1: "4",
-    y1: "6",
-    x2: "20",
-    y2: "6"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "6",
-    x2: "12",
-    y2: "18"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "8",
-    y1: "18",
-    x2: "16",
-    y2: "18"
-  })));
-};
-var ShapeIcon = _ref80 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref80,
-    props = _objectWithoutPropertiesLoose(_ref80, _excluded80);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "4",
-    y: "8",
-    width: "8",
-    height: "8"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "16",
-    cy: "16",
-    r: "4"
-  }), /*#__PURE__*/React__default.createElement("polygon", {
-    points: "16,4 19,8 13,8"
-  })));
-};
-var RotateIcon = _ref81 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref81,
-    props = _objectWithoutPropertiesLoose(_ref81, _excluded81);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "1 4 1 10 7 10"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10"
-  })));
-};
-var DocumentIcon = _ref82 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref82,
-    props = _objectWithoutPropertiesLoose(_ref82, _excluded82);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "14 2 14 8 20 8"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "13",
-    x2: "8",
-    y2: "13"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "17",
-    x2: "8",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "10 9 9 9 8 9"
-  })));
-};
-var ChartIcon = _ref83 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref83,
-    props = _objectWithoutPropertiesLoose(_ref83, _excluded83);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "14 2 14 8 20 8"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "13",
-    x2: "8",
-    y2: "13"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "10 9 9 9 8 9"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "17",
-    x2: "8",
-    y2: "17"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "13",
-    x2: "8",
-    y2: "13"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "14 2 14 8 20 8"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-  }), /*#__PURE__*/React__default.createElement("polyline", {
-    points: "10 9 9 9 8 9"
-  }), /*#__PURE__*/React__default.createElement("line", {
-    x1: "16",
-    y1: "17",
-    x2: "8",
-    y2: "17"
-  })));
-};
-var GiftIcon = _ref84 => {
-  var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref84,
-    props = _objectWithoutPropertiesLoose(_ref84, _excluded84);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
-    x: "3",
-    y: "8",
-    width: "18",
-    height: "4",
-    rx: "1"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 8V21"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M3 12v6a3 3 0 0 0 3 3h3V12"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18 21h-3v-9h6v6a3 3 0 0 1-3 3z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 8c-.5-2.5-4-3-5-1.5S9 10 12 8z"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 8c.5-2.5 4-3 5-1.5S15 10 12 8z"
-  })));
-};
-var ShieldIcon = _ref85 => {
-  var {
-      widthHeight = 24,
       color = 'currentColor',
-      strokeWidth = 1,
-      filled = true
-    } = _ref85,
-    props = _objectWithoutPropertiesLoose(_ref85, _excluded85);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      transform,
+      orientation = 'up',
+      children
+    } = _ref,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
     widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
-  })));
+    lineHeight: widthHeight,
+    color: color,
+    display: "flex",
+    transform: transform ? transform : orientation === 'left' ? 'rotate(-90deg)' : orientation === 'right' ? 'rotate(90deg)' : orientation === 'up' ? 'rotate(0deg)' : orientation === 'down' ? 'rotate(180deg)' : 'none'
+  }, rest), children);
 };
-var CheckIcon = TickIcon;
-var LogoutIcon = _ref86 => {
+// Utility function to handle fill and stroke based on 'filled' prop
+var getSvgProps = (filled, color, strokeWidth) => {
   var {
-      widthHeight = 24,
-      color = 'currentColor',
-      strokeWidth = 1,
-      filled = false
-    } = _ref86,
-    props = _objectWithoutPropertiesLoose(_ref86, _excluded86);
-  return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
-    widthHeight: widthHeight,
-    color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16 17l5-5-5-5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M21 12H9"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M13 5v-2a1 1 0 0 0-1-1H5a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h7a1 1 0 0 0 1-1v-2"
-  })));
+    getColor
+  } = appStudio.useTheme();
+  var themeColor = getColor(color);
+  return {
+    fill: filled ? themeColor : 'none',
+    stroke: themeColor,
+    strokeWidth,
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  };
 };
-var PowerOffIcon = _ref87 => {
+var Icon = _ref2 => {
   var {
+      name = 'circle',
       widthHeight = 24,
       color = 'currentColor',
-      strokeWidth = 1.5,
-      filled = false
-    } = _ref87,
-    props = _objectWithoutPropertiesLoose(_ref87, _excluded87);
+      filled = false,
+      strokeWidth = 1,
+      size,
+      children
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
+  // Use size if provided, otherwise fallback to widthHeight (numeric part if possible)
+  var iconSize = size || widthHeight;
+  if (!name) {
+    return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
+      widthHeight: widthHeight,
+      color: color
+    }, props), children);
+  }
+  // // @ts-ignore
+  // const LucideIcon = LucideIcon[name] || LucideIcon[name.charAt(0).toUpperCase() + name.slice(1)];
+  // if (!LucideIcon) {
+  //   console.warn(`Icon "${name}" not found in lucide-dream`);
+  //   return null;
+  // }
+  var svgProps = getSvgProps(filled, color, strokeWidth);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
-  }, props), /*#__PURE__*/React__default.createElement("svg", Object.assign({
-    viewBox: "0 0 24 24",
-    "aria-hidden": "false",
-    focusable: "false"
-  }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("line", {
-    x1: "12",
-    y1: "2",
-    x2: "12",
-    y2: "8"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M6.8 6.8a8 8 0 1 0 10 0"
-  })));
-};
-var BackIcon = props => (/*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
+  }, props), /*#__PURE__*/React__default.createElement(dynamic.DynamicIcon, Object.assign({
+    name: name,
+    size: iconSize
+  }, svgProps)));
+};
+// Re-export specific icons for backward compatibility mapping to Lucide names
+// We use 'Icon' component with 'name' prop.
+var createIcon = function createIcon(name, defaultProps) {
+  if (defaultProps === void 0) {
+    defaultProps = {};
+  }
+  var IconComponent = props => /*#__PURE__*/React__default.createElement(Icon, Object.assign({
+    name: name
+  }, defaultProps, props));
+  IconComponent.displayName = name + "Icon";
+  return IconComponent;
+};
+var UserIcon = /*#__PURE__*/createIcon('user', {
+  filled: false
+});
+var HelpIcon = /*#__PURE__*/createIcon('circle-help', {
+  filled: false
+});
+var FolderIcon = /*#__PURE__*/createIcon('folder', {
+  filled: false
+});
+var ChevronIcon = /*#__PURE__*/createIcon('chevron-up', {
+  filled: false
+});
+var DragHandleIcon = /*#__PURE__*/createIcon('grip-vertical', {
+  filled: false
+});
+var FileIcon = /*#__PURE__*/createIcon('file', {
+  filled: false
+});
+var VideoIcon = /*#__PURE__*/createIcon('video', {
+  filled: false
+});
+var ImageIcon = /*#__PURE__*/createIcon('image', {
+  filled: false
+});
+var AudioIcon = /*#__PURE__*/createIcon('volume', {
+  filled: false
+});
+var TwitterIcon = /*#__PURE__*/createIcon('twitter', {
+  filled: false
+});
+var XIcon = /*#__PURE__*/createIcon('x', {
+  filled: false
+});
+var TwitchIcon = /*#__PURE__*/createIcon('twitch', {
+  filled: false
+});
+var CloseIcon = /*#__PURE__*/createIcon('x', {
+  filled: false,
+  strokeWidth: 2
+});
+var InstagramIcon = /*#__PURE__*/createIcon('instagram', {
+  filled: false
+});
+var YoutubeIcon = /*#__PURE__*/createIcon('youtube', {
+  filled: false
+});
+var FacebookIcon = /*#__PURE__*/createIcon('facebook', {
+  filled: false
+});
+var LinkedinIcon = /*#__PURE__*/createIcon('linkedin', {
+  filled: false
+});
+var ThreadsIcon = /*#__PURE__*/createIcon('at-sign', {
+  filled: false
+}); // Fallback
+var MinusIcon = /*#__PURE__*/createIcon('minus', {
+  filled: false
+});
+var InfoIcon = /*#__PURE__*/createIcon('info', {
+  filled: false
+});
+var PlayIcon = /*#__PURE__*/createIcon('play', {
+  filled: false
+});
+var PauseIcon = /*#__PURE__*/createIcon('pause', {
+  filled: false
+});
+var HeartIcon = /*#__PURE__*/createIcon('heart', {
+  filled: false
+});
+var StarIcon = /*#__PURE__*/createIcon('star', {
+  filled: false
+});
+var SaveIcon = /*#__PURE__*/createIcon('save', {
+  filled: false
+});
+var WarningIcon = /*#__PURE__*/createIcon('triangle-alert', {
+  filled: false
+});
+var BatteryIcon = /*#__PURE__*/createIcon('battery', {
+  filled: false
+});
+var BookmarkIcon = /*#__PURE__*/createIcon('bookmark', {
+  filled: false
+});
+var CloudIcon = /*#__PURE__*/createIcon('cloud', {
+  filled: false
+});
+var CopyIcon = /*#__PURE__*/createIcon('copy', {
+  filled: false
+});
+var DustBinIcon = /*#__PURE__*/createIcon('trash', {
+  filled: false
+});
+var DeleteIcon = DustBinIcon;
+var EditIcon = /*#__PURE__*/createIcon('edit', {
+  filled: false
+});
+var MicrophoneIcon = /*#__PURE__*/createIcon('mic', {
+  filled: false
+});
+var StopIcon = /*#__PURE__*/createIcon('square', {
+  filled: false
+});
+var SendIcon = /*#__PURE__*/createIcon('send', {
+  filled: false
+});
+var LoadingSpinnerIcon = /*#__PURE__*/createIcon('loader', {
+  filled: false
+}); // Note: usage might require animation class
+var AttachmentIcon = /*#__PURE__*/createIcon('paperclip', {
+  filled: false
+});
+var SearchIcon = /*#__PURE__*/createIcon('search', {
+  filled: false
+});
+var HomeIcon = /*#__PURE__*/createIcon('home', {
+  filled: false
+});
+var SettingsIcon = /*#__PURE__*/createIcon('settings', {
+  filled: false
+});
+var DownloadIcon = /*#__PURE__*/createIcon('download', {
+  filled: false
+});
+var ShareIcon = /*#__PURE__*/createIcon('share', {
+  filled: false
+});
+var TickIcon = /*#__PURE__*/createIcon('check', {
+  filled: false
+});
+var PlusIcon = /*#__PURE__*/createIcon('plus', {
+  filled: false
+});
+var CloseEyeIcon = /*#__PURE__*/createIcon('eye-off', {
+  filled: false
+});
+var OpenEyeIcon = /*#__PURE__*/createIcon('eye', {
+  filled: false
+});
+var LockIcon = /*#__PURE__*/createIcon('lock', {
+  filled: false
+});
+var ProfileIcon = /*#__PURE__*/createIcon('user', {
+  filled: false
+});
+var ExternalLinkIcon = /*#__PURE__*/createIcon('external-link', {
+  filled: false
+});
+var SuccessIcon = /*#__PURE__*/createIcon('check-circle', {
+  filled: false
+});
+var ErrorIcon = /*#__PURE__*/createIcon('alert-circle', {
+  filled: false
+});
+var NotificationIcon = /*#__PURE__*/createIcon('bell', {
+  filled: false
+});
+var DocumentIcon = /*#__PURE__*/createIcon('file-text', {
+  filled: false
+});
+var ChartIcon = /*#__PURE__*/createIcon('bar-chart', {
+  filled: false
+});
+var MoonIcon = /*#__PURE__*/createIcon('moon', {
+  filled: false
+});
+var PanelIcon = /*#__PURE__*/createIcon('panel-left', {
+  filled: false
+}); // Sidebar or PanelLeft
+var UploadIcon = /*#__PURE__*/createIcon('upload', {
+  filled: false
+});
+// Restored icons
+var CheckIcon = TickIcon;
+var BackIcon = props => /*#__PURE__*/React__default.createElement(ChevronIcon, Object.assign({
   orientation: "left"
-}, props)));
+}, props));
+var ZoomOutIcon = /*#__PURE__*/createIcon('zoom-out', {
+  filled: false
+});
+var TextIcon = /*#__PURE__*/createIcon('type', {
+  filled: false
+});
+var ShapeIcon = /*#__PURE__*/createIcon('shapes', {
+  filled: false
+});
+var RotateIcon = /*#__PURE__*/createIcon('rotate-cw', {
+  filled: false
+});
+var GiftIcon = /*#__PURE__*/createIcon('gift', {
+  filled: false
+});
+var ShieldIcon = /*#__PURE__*/createIcon('shield', {
+  filled: false
+});
+var LogoutIcon = /*#__PURE__*/createIcon('log-out', {
+  filled: false
+});
+var PowerOffIcon = /*#__PURE__*/createIcon('power', {
+  filled: false
+});
+var LinkIcon = /*#__PURE__*/createIcon('link', {
+  filled: false
+});
+var LayoutIcon = /*#__PURE__*/createIcon('layout', {
+  filled: false
+});
+var ZapIcon = /*#__PURE__*/createIcon('zap', {
+  filled: false
+});
+var CreditCardIcon = /*#__PURE__*/createIcon('credit-card', {
+  filled: false
+});
+var MoreIcon = /*#__PURE__*/createIcon('more-horizontal', {
+  filled: false
+});
+var TrashIcon = DustBinIcon;
+var FilterIcon = /*#__PURE__*/createIcon('filter', {
+  filled: false
+});
+var CalendarIcon = /*#__PURE__*/createIcon('calendar', {
+  filled: false
+});
+var ClockIcon = /*#__PURE__*/createIcon('clock', {
+  filled: false
+});
+var MapPinIcon = /*#__PURE__*/createIcon('map-pin', {
+  filled: false
+});
+var MenuIcon = /*#__PURE__*/createIcon('menu', {
+  filled: false
+});
+var RefreshIcon = /*#__PURE__*/createIcon('refresh-cw', {
+  filled: false
+});
+var PrintIcon = /*#__PURE__*/createIcon('printer', {
+  filled: false
+});
+var MagicWandIcon = /*#__PURE__*/createIcon('wand', {
+  filled: false
+});
+var UnLikeIcon = /*#__PURE__*/createIcon('thumbs-down', {
+  filled: false
+});
+var LikeIcon = /*#__PURE__*/createIcon('thumbs-up', {
+  filled: false
+});
+var CameraIcon = /*#__PURE__*/createIcon('camera', {
+  filled: false
+});
+var BluetoothIcon = /*#__PURE__*/createIcon('bluetooth', {
+  filled: false
+});
+var UnlockIcon = /*#__PURE__*/createIcon('unlock', {
+  filled: false
+});
+var WifiIcon = /*#__PURE__*/createIcon('wifi', {
+  filled: false
+});
+var BoldArrowIcon = /*#__PURE__*/createIcon('arrow-right', {
+  filled: false
+});
+var ArrowIcon = /*#__PURE__*/createIcon('arrow-up', {
+  filled: false
+});
+var SpinnerIcon = /*#__PURE__*/createIcon('loader', {
+  filled: false
+});
+var SliderIcon = /*#__PURE__*/createIcon('sliders-horizontal', {
+  filled: false
+});
+var CropIcon = /*#__PURE__*/createIcon('crop', {
+  filled: false
+});
+var ZoomInIcon = /*#__PURE__*/createIcon('zoom-in', {
+  filled: false
+});
+var DragHandleLinesIcon = /*#__PURE__*/createIcon('grip-horizontal', {
+  filled: false
+});
 
-var Icon = {
+var Icon$1 = {
   __proto__: null,
+  Icon: Icon,
   UserIcon: UserIcon,
   HelpIcon: HelpIcon,
   FolderIcon: FolderIcon,
@@ -2887,63 +851,68 @@ var Icon = {
   DustBinIcon: DustBinIcon,
   DeleteIcon: DeleteIcon,
   EditIcon: EditIcon,
-  ErrorIcon: ErrorIcon,
+  MicrophoneIcon: MicrophoneIcon,
+  StopIcon: StopIcon,
+  SendIcon: SendIcon,
+  LoadingSpinnerIcon: LoadingSpinnerIcon,
+  AttachmentIcon: AttachmentIcon,
+  SearchIcon: SearchIcon,
+  HomeIcon: HomeIcon,
+  SettingsIcon: SettingsIcon,
   DownloadIcon: DownloadIcon,
-  MenuIcon: MenuIcon,
   ShareIcon: ShareIcon,
-  RefreshIcon: RefreshIcon,
-  PrintIcon: PrintIcon,
-  MagicWandIcon: MagicWandIcon,
-  PanelIcon: PanelIcon,
-  FilterIcon: FilterIcon,
-  HomeIcon: HomeIcon,
-  LocationIcon: LocationIcon,
-  LockIcon: LockIcon,
-  MicrophoneIcon: MicrophoneIcon,
-  MoonIcon: MoonIcon,
-  NotificationIcon: NotificationIcon,
+  TickIcon: TickIcon,
+  PlusIcon: PlusIcon,
+  CloseEyeIcon: CloseEyeIcon,
   OpenEyeIcon: OpenEyeIcon,
+  LockIcon: LockIcon,
   ProfileIcon: ProfileIcon,
-  SettingsIcon: SettingsIcon,
+  ExternalLinkIcon: ExternalLinkIcon,
   SuccessIcon: SuccessIcon,
-  UnLikeIcon: UnLikeIcon,
+  ErrorIcon: ErrorIcon,
+  NotificationIcon: NotificationIcon,
+  DocumentIcon: DocumentIcon,
+  ChartIcon: ChartIcon,
+  MoonIcon: MoonIcon,
+  PanelIcon: PanelIcon,
+  UploadIcon: UploadIcon,
+  CheckIcon: CheckIcon,
+  BackIcon: BackIcon,
+  ZoomOutIcon: ZoomOutIcon,
+  TextIcon: TextIcon,
+  ShapeIcon: ShapeIcon,
+  RotateIcon: RotateIcon,
+  GiftIcon: GiftIcon,
+  ShieldIcon: ShieldIcon,
+  LogoutIcon: LogoutIcon,
+  PowerOffIcon: PowerOffIcon,
+  LinkIcon: LinkIcon,
+  LayoutIcon: LayoutIcon,
+  ZapIcon: ZapIcon,
+  CreditCardIcon: CreditCardIcon,
+  MoreIcon: MoreIcon,
+  TrashIcon: TrashIcon,
+  FilterIcon: FilterIcon,
+  CalendarIcon: CalendarIcon,
   ClockIcon: ClockIcon,
+  MapPinIcon: MapPinIcon,
+  MenuIcon: MenuIcon,
+  RefreshIcon: RefreshIcon,
+  PrintIcon: PrintIcon,
+  MagicWandIcon: MagicWandIcon,
+  UnLikeIcon: UnLikeIcon,
+  LikeIcon: LikeIcon,
   CameraIcon: CameraIcon,
   BluetoothIcon: BluetoothIcon,
-  LikeIcon: LikeIcon,
   UnlockIcon: UnlockIcon,
   WifiIcon: WifiIcon,
-  UploadIcon: UploadIcon,
-  SearchIcon: SearchIcon,
-  StopIcon: StopIcon,
-  SendIcon: SendIcon,
-  LoadingSpinnerIcon: LoadingSpinnerIcon,
-  DragHandleLinesIcon: DragHandleLinesIcon,
-  CloseEyeIcon: CloseEyeIcon,
-  TrashIcon: TrashIcon,
-  AttachmentIcon: AttachmentIcon,
-  ExternalLinkIcon: ExternalLinkIcon,
-  PlusIcon: PlusIcon,
-  TickIcon: TickIcon,
   BoldArrowIcon: BoldArrowIcon,
   ArrowIcon: ArrowIcon,
   SpinnerIcon: SpinnerIcon,
-  CalendarIcon: CalendarIcon,
   SliderIcon: SliderIcon,
   CropIcon: CropIcon,
   ZoomInIcon: ZoomInIcon,
-  ZoomOutIcon: ZoomOutIcon,
-  TextIcon: TextIcon,
-  ShapeIcon: ShapeIcon,
-  RotateIcon: RotateIcon,
-  DocumentIcon: DocumentIcon,
-  ChartIcon: ChartIcon,
-  GiftIcon: GiftIcon,
-  ShieldIcon: ShieldIcon,
-  CheckIcon: CheckIcon,
-  LogoutIcon: LogoutIcon,
-  PowerOffIcon: PowerOffIcon,
-  BackIcon: BackIcon
+  DragHandleLinesIcon: DragHandleLinesIcon
 };
 
 /**
@@ -4645,8 +2614,8 @@ var DefaultSpeeds = {
 
 var _excluded$c = ["size", "speed", "color", "themeMode"],
   _excluded2$2 = ["size", "speed", "color", "themeMode"],
-  _excluded3$2 = ["size", "speed", "color", "themeMode"],
-  _excluded4$2 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition", "views"];
+  _excluded3$1 = ["size", "speed", "color", "themeMode"],
+  _excluded4$1 = ["size", "children", "textColor", "loaderColor", "type", "speed", "textPosition", "views"];
 var DefaultSpinner = _ref => {
   var {
       size = 'md',
@@ -4751,7 +2720,7 @@ var Quarter = _ref3 => {
       color = 'theme.loading',
       themeMode: elementMode
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$2);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$1);
   var {
     getColor,
     themeMode
@@ -4796,7 +2765,7 @@ var LoaderView = _ref4 => {
       textPosition = 'right',
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$2);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$1);
   var {
     getColor
   } = appStudio.useTheme();
@@ -5046,8 +3015,8 @@ var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
 
 var _excluded$d = ["asComponent", "isDisabled", "isLoading", "isWrapped", "borderRadius", "width", "height", "baseStyles", "sizeStyles", "iconPad", "mainTone", "resolvedTextColor", "children", "borderWidth"],
   _excluded2$3 = ["shape", "isDisabled", "onClick", "shadow", "borderWidth", "isAuto", "isFilled", "views", "children"],
-  _excluded3$3 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
-  _excluded4$3 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
+  _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
+  _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
 // --- Helper: Button Content ---
 // Renders the inner content: Loader, Icon, and Children.
 var ButtonContent = _ref => {
@@ -5182,7 +3151,7 @@ var StandardButton = _ref4 => {
       animatedStrokeTextColor = '#333333',
       getColor = c => c
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
   // --- Common Helpers ---
   var numericBorderRadius = getNumericBorderRadius(shape);
   var linkOrContent = to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
@@ -5444,7 +3413,7 @@ var ButtonView = _ref5 => {
       animatedStrokeAccentColor = '#705CFF',
       animatedStrokeTextColor = '#333333'
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$3);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
   /* theme helpers */
   var {
     getColorHex,
@@ -5642,8 +3611,8 @@ var useCardContext = () => {
 
 var _excluded$e = ["children", "views", "style", "themeMode"],
   _excluded2$4 = ["children", "views", "style", "themeMode"],
-  _excluded3$4 = ["children", "views", "style", "themeMode"],
-  _excluded4$4 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
+  _excluded3$3 = ["children", "views", "style", "themeMode"],
+  _excluded4$3 = ["variant", "size", "shape", "children", "header", "footer", "isFullWidth", "views", "style", "themeMode"];
 var CardHeader = _ref => {
   var _contextStyles$header;
   var {
@@ -5686,7 +3655,7 @@ var CardFooter = _ref3 => {
       children,
       style
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$3);
   var theme = appStudio.useTheme();
   var {
     styles: contextStyles
@@ -5712,7 +3681,7 @@ var CardView = _ref4 => {
       style,
       themeMode: elementMode
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
   var theme = appStudio.useTheme();
   var defaultStyles = getDefaultCardStyles();
   // Prepare context value, merging default styles with user's `views` overrides
@@ -6046,10 +4015,10 @@ var useCarouselContext = () => {
 
 var _excluded$f = ["children", "isActive", "views"],
   _excluded2$5 = ["views", "children"],
-  _excluded3$5 = ["views", "children"],
-  _excluded4$5 = ["children", "views"],
-  _excluded5$1 = ["children", "views", "style"],
-  _excluded6$1 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
+  _excluded3$4 = ["views", "children"],
+  _excluded4$4 = ["children", "views"],
+  _excluded5 = ["children", "views", "style"],
+  _excluded6 = ["children", "defaultActiveIndex", "activeIndex", "onChange", "showNavigation", "navigationPosition", "prevButton", "nextButton", "showIndicators", "indicatorPosition", "indicatorVariant", "autoPlay", "autoPlayInterval", "pauseOnHover", "infinite", "direction", "transitionDuration", "views", "stepIndices", "themeMode"];
 var CarouselSlide = _ref => {
   var {
       children,
@@ -6095,7 +4064,7 @@ var CarouselNextComponent = _ref3 => {
       views,
       children
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
   var {
     goToNext,
     canGoNext,
@@ -6118,7 +4087,7 @@ var CarouselItemComponent = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$5);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
   var {
     registerSlide,
     unregisterSlide,
@@ -6150,7 +4119,7 @@ var CarouselContentComponent = _ref5 => {
       style // User style for outer container
       // User props for outer container
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   var {
     currentIndex,
     styles: globalStyles,
@@ -6197,7 +4166,7 @@ var CarouselView = _ref6 => {
       transitionDuration = 300,
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6$1);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   // Convert children to array if it's not already
   var slides = React.useMemo(() => {
     return React__default.Children.toArray(children);
@@ -7889,10 +5858,10 @@ var ContextMenuItemStates = {
 
 var _excluded$i = ["children", "disableNativeContextMenu", "asChild", "isDisabled", "views"],
   _excluded2$6 = ["items", "children", "position", "side", "align", "views", "style"],
-  _excluded3$6 = ["item", "children", "onSelect", "isDisabled", "views"],
-  _excluded4$6 = ["views"],
-  _excluded5$2 = ["views"],
-  _excluded6$2 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
+  _excluded3$5 = ["item", "children", "onSelect", "isDisabled", "views"],
+  _excluded4$5 = ["views"],
+  _excluded5$1 = ["views"],
+  _excluded6$1 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views", "themeMode"];
 // Create context for the ContextMenu
 var ContextMenuContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -8112,7 +6081,7 @@ var ContextMenuItem = _ref4 => {
       isDisabled = false,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$5);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -8241,7 +6210,7 @@ var ContextMenuDivider = _ref5 => {
   var {
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$6);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$5);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     height: "1px",
     backgroundColor: "color.gray.200",
@@ -8255,7 +6224,7 @@ var ContextMenuSeparator = _ref6 => {
   var {
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$2);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$1);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     height: "1px",
     backgroundColor: "color.gray.200",
@@ -8274,7 +6243,7 @@ var ContextMenuView = _ref7 => {
       disableNativeContextMenu = true,
       views
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded6$2);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded6$1);
   if (!items || items.length === 0) {
     // If no items are provided, just render the children (for compound component pattern)
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
@@ -8865,8 +6834,8 @@ var IconSizes$2 = {
 
 var _excluded$s = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
   _excluded2$8 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$7 = ["option", "size", "removeOption"],
-  _excluded4$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+  _excluded3$6 = ["option", "size", "removeOption"],
+  _excluded4$6 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
 /**
  * Item Component
  *
@@ -9074,7 +7043,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$7);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$6);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     gap: 8,
@@ -9135,7 +7104,7 @@ var SelectView = _ref7 => {
       setHighlightedIndex,
       highlightedIndex
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$7);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$6);
   var {
     ref: triggerRef,
     relation,
@@ -12504,7 +10473,7 @@ var IconSizes$4 = {
 
 var _excluded$z = ["size"],
   _excluded2$9 = ["size"],
-  _excluded3$8 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+  _excluded3$7 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
 var CountryList = _ref => {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
@@ -12615,7 +10584,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$8);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$7);
   var {
     getColor,
     themeMode
@@ -17466,9 +15435,9 @@ var ModalTypography = {
 
 var _excluded$U = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
   _excluded2$e = ["children", "shadow", "isFullScreen", "shape", "views", "isOpen"],
-  _excluded3$9 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
-  _excluded4$8 = ["children", "views"],
-  _excluded5$3 = ["children", "views"];
+  _excluded3$8 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+  _excluded4$7 = ["children", "views"],
+  _excluded5$2 = ["children", "views"];
 var ModalOverlay = _ref => {
   var {
       children,
@@ -17556,7 +15525,7 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$8);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(appStudio.View, {
     onClick: onClose
@@ -17585,7 +15554,7 @@ var ModalBody = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$8);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$7);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     paddingVertical: 16,
     paddingHorizontal: 24,
@@ -17607,7 +15576,7 @@ var ModalFooter = _ref5 => {
       children,
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$3);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$2);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
@@ -17729,9 +15698,9 @@ var DrawerPlacements = {
 
 var _excluded$V = ["isOpen", "onClose", "isClosePrevented", "blur", "children"],
   _excluded2$f = ["placement", "size", "children"],
-  _excluded3$a = ["children", "onClose", "buttonPosition"],
-  _excluded4$9 = ["children"],
-  _excluded5$4 = ["children"];
+  _excluded3$9 = ["children", "onClose", "buttonPosition"],
+  _excluded4$8 = ["children"],
+  _excluded5$3 = ["children"];
 var DrawerOverlay = _ref => {
   var {
       isOpen,
@@ -17807,7 +15776,7 @@ var DrawerHeader = _ref3 => {
       onClose,
       buttonPosition = 'right'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$a);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$9);
   var closeButton = onClose && (/*#__PURE__*/React__default.createElement(appStudio.View, {
     onClick: onClose,
     cursor: "pointer",
@@ -17829,7 +15798,7 @@ var DrawerBody = _ref4 => {
   var {
       children
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$9);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$8);
   return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
     padding: 24,
     flex: 1,
@@ -17840,7 +15809,7 @@ var DrawerFooter = _ref5 => {
   var {
       children
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$4);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$3);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     paddingHorizontal: 24,
     paddingVertical: 16,
@@ -19671,16 +17640,17 @@ var TitleView = _ref => {
   // Get the text to display
   var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
   // Common container props
-  var containerProps = {
+  var containerProps = Object.assign({
     ref,
     as: 'h1',
+    animate: inView ? controlledAnimate : undefined
+  }, !textComponent && {
     fontSize: useResponsive ? undefined : fontSize,
     fontWeight: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.fontWeight : 'bold',
     letterSpacing: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.letterSpacing : undefined,
     marginBottom: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.marginBottom : undefined,
-    animate: inView ? controlledAnimate : undefined,
     media: useResponsive ? responsiveStyles == null ? void 0 : responsiveStyles.media : undefined
-  };
+  });
   // Render highlighted text content (typewriter, slide, or plain)
   var renderHighlightedContent = content => {
     // If animations are enabled but not in view, render invisible placeholder
@@ -20294,9 +18264,9 @@ var DropdownMenuItemStates = {
 
 var _excluded$12 = ["children", "views"],
   _excluded2$h = ["items", "side", "align", "views"],
-  _excluded3$b = ["item", "views"],
-  _excluded4$a = ["views"],
-  _excluded5$5 = ["trigger", "items", "side", "align", "views", "themeMode"];
+  _excluded3$a = ["item", "views"],
+  _excluded4$9 = ["views"],
+  _excluded5$4 = ["trigger", "items", "side", "align", "views", "themeMode"];
 // Create context for the DropdownMenu
 var DropdownMenuContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -20491,7 +18461,7 @@ var DropdownMenuItem = _ref4 => {
       item,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$a);
   var {
     activeSubmenuId,
     setActiveSubmenuId,
@@ -20556,7 +18526,7 @@ var DropdownMenuDivider = _ref5 => {
   var {
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$a);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$9);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     height: "1px",
     backgroundColor: "color.gray.200",
@@ -20572,7 +18542,7 @@ var DropdownMenuView = _ref6 => {
       align = 'start',
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$5);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$4);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     position: "relative",
     display: "inline-block"
@@ -24986,8 +22956,8 @@ var SidebarTransitions = {
 
 var _excluded$1f = ["children", "showToggleButton", "views"],
   _excluded2$i = ["children", "views"],
-  _excluded3$c = ["children", "views"],
-  _excluded4$b = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
+  _excluded3$b = ["children", "views"],
+  _excluded4$a = ["children", "position", "size", "variant", "fixed", "hasBackdrop", "expandedWidth", "collapsedWidth", "breakpointBehavior", "elevation", "transitionPreset", "ariaLabel", "isExpanded", "isMobile", "collapse", "views", "themeMode"];
 // Create context for the Sidebar
 var SidebarContext = /*#__PURE__*/React.createContext({
   isExpanded: true,
@@ -25102,7 +23072,7 @@ var SidebarFooter = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$b);
   var {
     isExpanded
   } = useSidebarContext();
@@ -25138,7 +23108,7 @@ var SidebarView = _ref5 => {
       collapse,
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$b);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$a);
   // Determine width based on expanded state and size
   var sizeConfig = SidebarSizes[size];
   var width = isExpanded ? expandedWidth || sizeConfig.expandedWidth : collapsedWidth || sizeConfig.collapsedWidth;
@@ -25661,7 +23631,7 @@ var HandleIconStyles = {
 
 var _excluded$1h = ["children", "id", "defaultSize", "minSize", "maxSize", "collapsible", "defaultCollapsed", "onCollapseChange", "views"],
   _excluded2$j = ["id", "position", "disabled", "withVisualIndicator", "withCollapseButton", "collapseTarget", "views"],
-  _excluded3$d = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
+  _excluded3$c = ["children", "orientation", "size", "variant", "defaultSizes", "minSize", "maxSize", "collapsible", "containerRef", "autoSaveId", "views"];
 // Create context for the Resizable component
 var ResizableContext = /*#__PURE__*/React.createContext({
   orientation: 'horizontal',
@@ -25908,7 +23878,7 @@ var ResizableView = _ref4 => {
       containerRef,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$c);
   var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
   return /*#__PURE__*/React__default.createElement(Container, Object.assign({
     ref: containerRef,
@@ -26710,10 +24680,10 @@ var CommandFooterStyles = {
 
 var _excluded$1j = ["value", "onValueChange", "placeholder", "views"],
   _excluded2$k = ["children", "views"],
-  _excluded3$e = ["heading", "children", "views"],
-  _excluded4$c = ["item", "selected", "onSelect", "views"],
-  _excluded5$6 = ["children", "views"],
-  _excluded6$3 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
+  _excluded3$d = ["heading", "children", "views"],
+  _excluded4$b = ["item", "selected", "onSelect", "views"],
+  _excluded5$5 = ["children", "views"],
+  _excluded6$2 = ["open", "onOpenChange", "groups", "commands", "placeholder", "size", "variant", "emptyState", "footer", "search", "setSearch", "selectedIndex", "setSelectedIndex", "filteredCommands", "filteredGroups", "listRef", "views", "filter"];
 var CommandContext = /*#__PURE__*/React.createContext({
   search: '',
   setSearch: () => {},
@@ -26782,7 +24752,7 @@ var CommandGroup = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$d);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandGroupStyles, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, CommandGroupHeadingStyles, views == null ? void 0 : views.heading), heading), children);
 };
 // Command Item component
@@ -26793,7 +24763,7 @@ var CommandItem = _ref5 => {
       onSelect,
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$c);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$b);
   var handleClick = () => {
     if (!item.disabled && onSelect) {
       onSelect();
@@ -26809,7 +24779,7 @@ var CommandEmpty = _ref6 => {
       children = 'No results found.',
       views
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$6);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$5);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, CommandEmptyStyles, views == null ? void 0 : views.container, props), children);
 };
 // Main Command View component
@@ -26833,7 +24803,7 @@ var CommandView = _ref7 => {
       listRef,
       views
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded6$3);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded6$2);
   if (!open) return null;
   var handleItemSelect = React__default.useCallback(item => {
     if (item.disabled) return;
@@ -27180,7 +25150,7 @@ var getArrowStyles = position => {
 
 var _excluded$1l = ["children", "views", "asChild"],
   _excluded2$l = ["children", "views"],
-  _excluded3$f = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
+  _excluded3$e = ["content", "children", "position", "align", "size", "variant", "showArrow", "views", "themeMode"];
 // Create context for the Tooltip
 var TooltipContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -27280,7 +25250,7 @@ var TooltipView = _ref4 => {
       showArrow = true,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$f);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$e);
   var {
     isOpen,
     triggerRef,
@@ -27807,15 +25777,15 @@ var Gradient = props => {
 
 var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded2$m = ["number", "children"],
-  _excluded3$g = ["rows", "cols", "squareSize"],
-  _excluded4$d = ["count", "colors", "speed", "shapes"],
-  _excluded5$7 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
-  _excluded6$4 = ["rippleCount", "colors", "maxSize", "frequency"],
-  _excluded7$1 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
-  _excluded8$1 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
-  _excluded9$1 = ["children"],
-  _excluded10$1 = ["contentPosition"],
-  _excluded11$1 = ["children", "views"];
+  _excluded3$f = ["rows", "cols", "squareSize"],
+  _excluded4$c = ["count", "colors", "speed", "shapes"],
+  _excluded5$6 = ["gridSize", "lineColor", "pulseColor", "animationSpeed"],
+  _excluded6$3 = ["rippleCount", "colors", "maxSize", "frequency"],
+  _excluded7 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
+  _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
+  _excluded9 = ["children"],
+  _excluded10 = ["contentPosition"],
+  _excluded11 = ["children", "views"];
 // Background Context
 var BackgroundContext = /*#__PURE__*/React.createContext({});
 /**
@@ -27919,7 +25889,7 @@ var Wall = _ref3 => {
       cols = 10,
       squareSize = 40
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$g);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$f);
   var rowsArray = Array(rows).fill(1);
   var colsArray = Array(cols).fill(1);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -27962,7 +25932,7 @@ var Particles = _ref4 => {
       speed = 'medium',
       shapes = ['circle']
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$d);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$c);
   var particles = Array.from({
     length: count
   }, (_, i) => i);
@@ -28045,7 +26015,7 @@ var Grid = _ref5 => {
       pulseColor = 'rgba(59, 130, 246, 0.8)',
       animationSpeed = 'medium'
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$7);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$6);
   var getSpeedValue = () => {
     switch (animationSpeed) {
       case 'slow':
@@ -28127,7 +26097,7 @@ var Ripples = _ref6 => {
       maxSize = 200,
       frequency = 3
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6$4);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6$3);
   var ripples = Array.from({
     length: rippleCount
   }, (_, i) => ({
@@ -28213,7 +26183,7 @@ var BackgroundImage = _ref7 => {
       blendMode = 'normal',
       views
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7$1);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   var imageStyle = Object.assign({}, BackgroundImageStyles.image, {
     backgroundImage: "url(" + src + ")",
     backgroundSize,
@@ -28241,7 +26211,7 @@ var BackgroundVideo = _ref8 => {
       blendMode = 'normal',
       views
     } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8$1);
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, BackgroundVideoStyles.container, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
     as: "video",
     src: src,
@@ -28260,7 +26230,7 @@ var BackgroundGradient = _ref9 => {
   var {
       children
     } = _ref9,
-    gradientProps = _objectWithoutPropertiesLoose(_ref9, _excluded9$1);
+    gradientProps = _objectWithoutPropertiesLoose(_ref9, _excluded9);
   return /*#__PURE__*/React__default.createElement(Gradient, Object.assign({}, gradientProps), children);
 };
 /**
@@ -28270,7 +26240,7 @@ var BackgroundOverlay = _ref10 => {
   var {
       contentPosition
     } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10$1);
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   var getDefaultOverlay = () => {
     switch (contentPosition) {
       case 'left':
@@ -28304,7 +26274,7 @@ var BackgroundViewBase = _ref11 => {
       children,
       views
     } = _ref11,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11$1);
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React__default.createElement(BackgroundContext.Provider, {
     value: {}
   }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, DefaultBackgroundStyles.container, views == null ? void 0 : views.container, props), children));
@@ -28428,6 +26398,7 @@ exports.ContextMenu = ContextMenu;
 exports.CookieConsent = CookieConsent;
 exports.CopyIcon = CopyIcon;
 exports.CountryPicker = CountryPicker;
+exports.CreditCardIcon = CreditCardIcon;
 exports.CropIcon = CropIcon;
 exports.DatePicker = DatePicker;
 exports.DeleteIcon = DeleteIcon;
@@ -28473,19 +26444,21 @@ exports.HeartIcon = HeartIcon;
 exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
 exports.HoverCard = HoverCard;
-exports.Icon = Icon;
+exports.Icon = Icon$1;
 exports.ImageIcon = ImageIcon;
 exports.InfoIcon = InfoIcon;
 exports.InstagramIcon = InstagramIcon;
+exports.LayoutIcon = LayoutIcon;
 exports.LikeIcon = LikeIcon;
 exports.Link = Link;
+exports.LinkIcon = LinkIcon;
 exports.LinkedinIcon = LinkedinIcon;
 exports.Loader = Loader;
 exports.LoadingSpinnerIcon = LoadingSpinnerIcon;
-exports.LocationIcon = LocationIcon;
 exports.LockIcon = LockIcon;
 exports.LogoutIcon = LogoutIcon;
 exports.MagicWandIcon = MagicWandIcon;
+exports.MapPinIcon = MapPinIcon;
 exports.MediaPreview = MediaPreview;
 exports.MenuIcon = MenuIcon;
 exports.Menubar = Menubar;
@@ -28495,6 +26468,7 @@ exports.MicrophoneIcon = MicrophoneIcon;
 exports.MinusIcon = MinusIcon;
 exports.Modal = Modal;
 exports.MoonIcon = MoonIcon;
+exports.MoreIcon = MoreIcon;
 exports.NavigationMenu = NavigationMenu;
 exports.NotificationIcon = NotificationIcon;
 exports.OTPInput = OTPInput;
@@ -28558,6 +26532,7 @@ exports.WarningIcon = WarningIcon;
 exports.WifiIcon = WifiIcon;
 exports.XIcon = XIcon;
 exports.YoutubeIcon = YoutubeIcon;
+exports.ZapIcon = ZapIcon;
 exports.ZoomInIcon = ZoomInIcon;
 exports.ZoomOutIcon = ZoomOutIcon;
 exports.hideMessage = hideMessage;