@app-studio/web 0.8.73 → 0.8.74

package/dist/web.cjs.development.js

@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-require('core-js/modules/es.symbol.description.js');
 var React = require('react');
 var React__default = _interopDefault(React);
+require('core-js/modules/es.array.includes.js');
+require('core-js/modules/es.array.iterator.js');
+require('core-js/modules/es.string.includes.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/es.object.assign.js');
 var appStudio = require('app-studio');
-require('core-js/modules/es.array.iterator.js');
+require('core-js/modules/es.symbol.description.js');
 require('core-js/modules/es.parse-float.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/es.array.includes.js');
 var reactRouterDom = require('react-router-dom');
-require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.string.starts-with.js');
 var format = _interopDefault(require('date-fns/format'));
 var formik = require('formik');
@@ -25,6 +25,224 @@ require('core-js/modules/web.url-search-params.js');
 var zustand = require('zustand');
 var Layout = require('src/components/Layout');
 
+var useAccordionState = function useAccordionState(defaultExpandedItems, allowMultiple) {
+  if (defaultExpandedItems === void 0) {
+    defaultExpandedItems = [];
+  }
+  if (allowMultiple === void 0) {
+    allowMultiple = false;
+  }
+  var [expandedItems, setExpandedItems] = React.useState(defaultExpandedItems);
+  var toggleItem = itemId => {
+    setExpandedItems(prevExpandedItems => {
+      // Check if the item is already expanded
+      var isExpanded = prevExpandedItems.includes(itemId);
+      if (isExpanded) {
+        // If expanded, remove it from the list
+        return prevExpandedItems.filter(id => id !== itemId);
+      } else {
+        // If not expanded, add it to the list
+        // If allowMultiple is false, replace the current expanded item
+        return allowMultiple ? [...prevExpandedItems, itemId] : [itemId];
+      }
+    });
+  };
+  var isItemExpanded = itemId => {
+    return expandedItems.includes(itemId);
+  };
+  return {
+    expandedItems,
+    toggleItem,
+    isItemExpanded
+  };
+};
+
+var AccordionShapes = {
+  sharp: {
+    borderRadius: 0
+  },
+  rounded: {
+    borderRadius: 8
+  }
+};
+var AccordionVariants = {
+  default: {
+    backgroundColor: 'transparent',
+    borderWidth: 0
+  },
+  outline: {
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'color.gray.200'
+  },
+  filled: {
+    backgroundColor: 'color.gray.50'
+  }
+};
+
+// Create context for the Accordion
+var AccordionContext = /*#__PURE__*/React.createContext({
+  expandedItems: [],
+  toggleItem: () => {},
+  isItemExpanded: () => false
+});
+// Provider component for the Accordion context
+var AccordionProvider = _ref => {
+  var {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
+    value: value
+  }, children);
+};
+// Hook to use the Accordion context
+var useAccordionContext = () => {
+  var context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error('useAccordionContext must be used within an AccordionProvider');
+  }
+  return context;
+};
+// Accordion Item component
+var AccordionItem = _ref2 => {
+  var {
+    id,
+    children,
+    isDisabled = false,
+    views
+  } = _ref2;
+  var {
+    isItemExpanded
+  } = useAccordionContext();
+  var isExpanded = isItemExpanded(id);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "color.gray.200",
+    marginBottom: 8,
+    overflow: "hidden",
+    opacity: isDisabled ? 0.5 : 1,
+    pointerEvents: isDisabled ? 'none' : 'auto'
+  }, views == null ? void 0 : views.item), React__default.Children.map(children, child => {
+    if (/*#__PURE__*/React__default.isValidElement(child)) {
+      // Pass the id and isExpanded props to AccordionHeader and AccordionContent
+      return /*#__PURE__*/React__default.cloneElement(child, Object.assign({}, child.props, {
+        id,
+        isExpanded
+      }));
+    }
+    return child;
+  }));
+};
+// Accordion Header component
+var AccordionHeader = _ref3 => {
+  var {
+    children,
+    id,
+    isExpanded,
+    views
+  } = _ref3;
+  var {
+    toggleItem
+  } = useAccordionContext();
+  var handleClick = () => {
+    if (id) {
+      toggleItem(id);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+    padding: 16,
+    cursor: "pointer",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "color.white",
+    onClick: handleClick
+  }, views == null ? void 0 : views.container), children, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    width: 24,
+    height: 24,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "transform 0.2s ease",
+    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
+  }, views == null ? void 0 : views.icon), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z",
+    fill: "currentColor"
+  }))));
+};
+// Accordion Content component
+var AccordionContent = _ref4 => {
+  var {
+    children,
+    isExpanded,
+    views
+  } = _ref4;
+  if (!isExpanded) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    padding: 16,
+    backgroundColor: "color.white",
+    maxHeight: isExpanded ? '1000px' : '0',
+    transition: "max-height 0.3s ease-in-out",
+    overflow: "hidden"
+  }, views == null ? void 0 : views.container), children);
+};
+// Main Accordion View component
+var AccordionView = _ref5 => {
+  var {
+    children,
+    shape = 'rounded',
+    variant = 'default',
+    views
+  } = _ref5;
+  return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    width: "100%"
+  }, AccordionShapes[shape], AccordionVariants[variant], views == null ? void 0 : views.container), children);
+};
+
+/**
+ * Accordion component for displaying collapsible content panels.
+ */
+var AccordionComponent = _ref => {
+  var {
+    children,
+    allowMultiple = false,
+    defaultExpandedItems = [],
+    shape = 'rounded',
+    variant = 'default',
+    views
+  } = _ref;
+  var {
+    expandedItems,
+    toggleItem,
+    isItemExpanded
+  } = useAccordionState(defaultExpandedItems, allowMultiple);
+  return /*#__PURE__*/React__default.createElement(AccordionProvider, {
+    value: {
+      expandedItems,
+      toggleItem,
+      isItemExpanded
+    }
+  }, /*#__PURE__*/React__default.createElement(AccordionView, {
+    shape: shape,
+    variant: variant,
+    views: views
+  }, children));
+};
+var Accordion = AccordionComponent;
+// Assign the sub-components to the main component
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+
 var Top = props => (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
   marginBottom: "auto"
 }, props)));
@@ -263,17 +481,17 @@ var _excluded$4 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded27 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded28 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded29 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded30 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded30 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded31 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded32 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded33 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded34 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded35 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded36 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded37 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded37 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded38 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded39 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded40 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded39 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded40 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded41 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded42 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded43 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -284,10 +502,10 @@ var _excluded$4 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded48 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded49 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded50 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded51 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded52 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded53 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded54 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded51 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded52 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded53 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded54 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded55 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded56 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded57 = ["widthHeight", "color", "filled", "strokeWidth"],
@@ -299,14 +517,16 @@ var _excluded$4 = ["widthHeight", "color", "transform", "orientation", "children
   _excluded63 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded64 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded65 = ["widthHeight", "color", "filled", "strokeWidth"],
-  _excluded66 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded67 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded66 = ["widthHeight", "color", "filled", "strokeWidth"],
+  _excluded67 = ["widthHeight", "color", "filled", "strokeWidth"],
   _excluded68 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded69 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded70 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded71 = ["widthHeight", "color", "strokeWidth", "filled"],
   _excluded72 = ["widthHeight", "color", "strokeWidth", "filled"],
-  _excluded73 = ["widthHeight", "color", "strokeWidth", "filled"];
+  _excluded73 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded74 = ["widthHeight", "color", "strokeWidth", "filled"],
+  _excluded75 = ["widthHeight", "color", "strokeWidth", "filled"];
 // Default wrapper component for consistent sizing and styling
 var IconWrapper = _ref => {
   var {
@@ -335,8 +555,7 @@ var getSvgProps = (filled, color, strokeWidth) => {
     strokeLinejoin: 'round'
   };
 };
-// Example Icon Component: ChevronIcon
-var ChevronIcon = _ref2 => {
+var UserIcon = _ref2 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
@@ -352,10 +571,10 @@ var ChevronIcon = _ref2 => {
     "aria-hidden": "true",
     focusable: "false"
   }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
   })));
 };
-var DragHandleIcon = _ref3 => {
+var HelpIcon = _ref3 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
@@ -370,6 +589,45 @@ var DragHandleIcon = _ref3 => {
     viewBox: "0 0 24 24",
     "aria-hidden": "true",
     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 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
+  })));
+};
+// Example Icon Component: ChevronIcon
+var ChevronIcon = _ref4 => {
+  var {
+      widthHeight = 24,
+      color = 'currentColor',
+      filled = true,
+      strokeWidth = 1
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+  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: "M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z"
+  })));
+};
+var DragHandleIcon = _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("g", null, /*#__PURE__*/React__default.createElement("circle", {
     cx: "9",
     cy: "6",
@@ -397,14 +655,14 @@ var DragHandleIcon = _ref3 => {
   }))));
 };
 // File Icon Component
-var FileIcon = _ref4 => {
+var FileIcon = _ref6 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -425,14 +683,14 @@ var FileIcon = _ref4 => {
   })));
 };
 // Video Icon Component
-var VideoIcon = _ref5 => {
+var VideoIcon = _ref7 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -458,14 +716,14 @@ var VideoIcon = _ref5 => {
   })));
 };
 // Image Icon Component
-var ImageIcon = _ref6 => {
+var ImageIcon = _ref8 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -497,14 +755,14 @@ var ImageIcon = _ref6 => {
     strokeWidth: strokeWidth
   })));
 };
-var TwitterIcon = _ref7 => {
+var TwitterIcon = _ref9 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+    } = _ref9,
+    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -519,14 +777,14 @@ var TwitterIcon = _ref7 => {
     strokeWidth: filled ? 0 : strokeWidth
   })));
 };
-var XIcon = _ref8 => {
+var XIcon = _ref10 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+    } = _ref10,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -542,14 +800,14 @@ var XIcon = _ref8 => {
   })));
 };
 // Example of a Twitch Icon
-var TwitchIcon = _ref9 => {
+var TwitchIcon = _ref11 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref9,
-    props = _objectWithoutPropertiesLoose(_ref9, _excluded9);
+    } = _ref11,
+    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -570,14 +828,14 @@ var TwitchIcon = _ref9 => {
   })));
 };
 // Example of another Icon: CloseIcon
-var CloseIcon = _ref10 => {
+var CloseIcon = _ref12 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref10,
-    props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
+    } = _ref12,
+    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -599,14 +857,14 @@ var CloseIcon = _ref10 => {
     y2: "18"
   })));
 };
-var InstagramIcon = _ref11 => {
+var InstagramIcon = _ref13 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref11,
-    props = _objectWithoutPropertiesLoose(_ref11, _excluded11);
+    } = _ref13,
+    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -630,14 +888,14 @@ var InstagramIcon = _ref11 => {
     y2: "6.5"
   })));
 };
-var YoutubeIcon = _ref12 => {
+var YoutubeIcon = _ref14 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref12,
-    props = _objectWithoutPropertiesLoose(_ref12, _excluded12);
+    } = _ref14,
+    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -658,14 +916,14 @@ var YoutubeIcon = _ref12 => {
     strokeWidth: strokeWidth
   })));
 };
-var FacebookIcon = _ref13 => {
+var FacebookIcon = _ref15 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref13,
-    props = _objectWithoutPropertiesLoose(_ref13, _excluded13);
+    } = _ref15,
+    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -680,14 +938,14 @@ var FacebookIcon = _ref13 => {
     strokeWidth: filled ? 0 : strokeWidth
   })));
 };
-var LinkedinIcon = _ref14 => {
+var LinkedinIcon = _ref16 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref14,
-    props = _objectWithoutPropertiesLoose(_ref14, _excluded14);
+    } = _ref16,
+    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -706,14 +964,14 @@ var LinkedinIcon = _ref14 => {
     r: "2"
   })));
 };
-var ThreadsIcon = _ref15 => {
+var ThreadsIcon = _ref17 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref15,
-    props = _objectWithoutPropertiesLoose(_ref15, _excluded15);
+    } = _ref17,
+    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -728,15 +986,15 @@ var ThreadsIcon = _ref15 => {
   })));
 };
 // Example Refactored Icon: MinusIcon without undefined 'padding' prop
-var MinusIcon = _ref16 => {
+var MinusIcon = _ref18 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       // Assuming minus can be filled; adjust as needed
       strokeWidth = 1
-    } = _ref16,
-    props = _objectWithoutPropertiesLoose(_ref16, _excluded16);
+    } = _ref18,
+    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -753,14 +1011,14 @@ var MinusIcon = _ref16 => {
   })));
 };
 // Example Refactored Icon: InfoIcon with accessibility enhancements
-var InfoIcon = _ref17 => {
+var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref17,
-    props = _objectWithoutPropertiesLoose(_ref17, _excluded17);
+    } = _ref19,
+    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -774,14 +1032,14 @@ var InfoIcon = _ref17 => {
     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 = _ref18 => {
+var PlayIcon = _ref20 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref18,
-    props = _objectWithoutPropertiesLoose(_ref18, _excluded18);
+    } = _ref20,
+    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -793,14 +1051,14 @@ var PlayIcon = _ref18 => {
     d: "M8 5v14l11-7z"
   })));
 };
-var PauseIcon = _ref19 => {
+var PauseIcon = _ref21 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref19,
-    props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
+    } = _ref21,
+    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -812,14 +1070,14 @@ var PauseIcon = _ref19 => {
     d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z"
   })));
 };
-var HeartIcon = _ref20 => {
+var HeartIcon = _ref22 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref20,
-    props = _objectWithoutPropertiesLoose(_ref20, _excluded20);
+    } = _ref22,
+    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -831,14 +1089,14 @@ var HeartIcon = _ref20 => {
     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 = _ref21 => {
+var StarIcon = _ref23 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref21,
-    props = _objectWithoutPropertiesLoose(_ref21, _excluded21);
+    } = _ref23,
+    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -850,14 +1108,14 @@ var StarIcon = _ref21 => {
     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 = _ref22 => {
+var SaveIcon = _ref24 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref22,
-    props = _objectWithoutPropertiesLoose(_ref22, _excluded22);
+    } = _ref24,
+    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -873,14 +1131,14 @@ var SaveIcon = _ref22 => {
     points: "7 3 7 8 15 8"
   })));
 };
-var WarningIcon = _ref23 => {
+var WarningIcon = _ref25 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref23,
-    props = _objectWithoutPropertiesLoose(_ref23, _excluded23);
+    } = _ref25,
+    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -904,14 +1162,14 @@ var WarningIcon = _ref23 => {
     y2: "15"
   })));
 };
-var BatteryIcon = _ref24 => {
+var BatteryIcon = _ref26 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref24,
-    props = _objectWithoutPropertiesLoose(_ref24, _excluded24);
+    } = _ref26,
+    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -923,14 +1181,14 @@ var BatteryIcon = _ref24 => {
     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 = _ref25 => {
+var BookmarkIcon = _ref27 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref25,
-    props = _objectWithoutPropertiesLoose(_ref25, _excluded25);
+    } = _ref27,
+    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -942,14 +1200,14 @@ var BookmarkIcon = _ref25 => {
     d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
   })));
 };
-var CloudIcon = _ref26 => {
+var CloudIcon = _ref28 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref26,
-    props = _objectWithoutPropertiesLoose(_ref26, _excluded26);
+    } = _ref28,
+    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -961,14 +1219,14 @@ var CloudIcon = _ref26 => {
     d: "M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"
   })));
 };
-var CopyIcon = _ref27 => {
+var CopyIcon = _ref29 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref27,
-    props = _objectWithoutPropertiesLoose(_ref27, _excluded27);
+    } = _ref29,
+    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -987,14 +1245,14 @@ var CopyIcon = _ref27 => {
     d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
   })));
 };
-var DustBinIcon = _ref28 => {
+var DustBinIcon = _ref30 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref28,
-    props = _objectWithoutPropertiesLoose(_ref28, _excluded28);
+    } = _ref30,
+    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1006,14 +1264,15 @@ var DustBinIcon = _ref28 => {
     d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
   })));
 };
-var EditIcon = _ref29 => {
+var DeleteIcon = DustBinIcon;
+var EditIcon = _ref31 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref29,
-    props = _objectWithoutPropertiesLoose(_ref29, _excluded29);
+    } = _ref31,
+    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1025,14 +1284,14 @@ var EditIcon = _ref29 => {
     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 = _ref30 => {
+var ErrorIcon = _ref32 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = true
-    } = _ref30,
-    props = _objectWithoutPropertiesLoose(_ref30, _excluded30);
+    } = _ref32,
+    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1058,14 +1317,14 @@ var ErrorIcon = _ref30 => {
     stroke: filled ? 'white' : color
   })));
 };
-var DownloadIcon = _ref31 => {
+var DownloadIcon = _ref33 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref31,
-    props = _objectWithoutPropertiesLoose(_ref31, _excluded31);
+    } = _ref33,
+    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1077,14 +1336,14 @@ var DownloadIcon = _ref31 => {
     d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
   })));
 };
-var MenuIcon = _ref32 => {
+var MenuIcon = _ref34 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref32,
-    props = _objectWithoutPropertiesLoose(_ref32, _excluded32);
+    } = _ref34,
+    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1112,14 +1371,14 @@ var MenuIcon = _ref32 => {
     y2: "18"
   })));
 };
-var ShareIcon = _ref33 => {
+var ShareIcon = _ref35 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref33,
-    props = _objectWithoutPropertiesLoose(_ref33, _excluded33);
+    } = _ref35,
+    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1153,14 +1412,14 @@ var ShareIcon = _ref33 => {
     y2: "10.49"
   })));
 };
-var RefreshIcon = _ref34 => {
+var RefreshIcon = _ref36 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref34,
-    props = _objectWithoutPropertiesLoose(_ref34, _excluded34);
+    } = _ref36,
+    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1174,14 +1433,14 @@ var RefreshIcon = _ref34 => {
     d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10"
   })));
 };
-var PrintIcon = _ref35 => {
+var PrintIcon = _ref37 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref35,
-    props = _objectWithoutPropertiesLoose(_ref35, _excluded35);
+    } = _ref37,
+    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1194,14 +1453,14 @@ var PrintIcon = _ref35 => {
     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 = _ref36 => {
+var MagicWandIcon = _ref38 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = true
-    } = _ref36,
-    props = _objectWithoutPropertiesLoose(_ref36, _excluded36);
+    } = _ref38,
+    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1224,14 +1483,14 @@ var MagicWandIcon = _ref36 => {
     d: "M16 15L16.7 16.5L18 17L16.7 17.5L16 19L15.3 17.5L14 17L15.3 16.5L16 15Z"
   })));
 };
-var SliderVerticalIcon = _ref37 => {
+var SliderVerticalIcon = _ref39 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref37,
-    props = _objectWithoutPropertiesLoose(_ref37, _excluded37);
+    } = _ref39,
+    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1295,14 +1554,14 @@ var SliderVerticalIcon = _ref37 => {
     y2: "16"
   })));
 };
-var PanelIcon = _ref38 => {
+var PanelIcon = _ref40 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref38,
-    props = _objectWithoutPropertiesLoose(_ref38, _excluded38);
+    } = _ref40,
+    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1338,14 +1597,14 @@ var PanelIcon = _ref38 => {
     y2: "15"
   })));
 };
-var FilterIcon = _ref39 => {
+var FilterIcon = _ref41 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref39,
-    props = _objectWithoutPropertiesLoose(_ref39, _excluded39);
+    } = _ref41,
+    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1357,14 +1616,14 @@ var FilterIcon = _ref39 => {
     d: "M3 4h18l-7 10v5l-4 2v-7L3 4z"
   })));
 };
-var HomeIcon = _ref40 => {
+var HomeIcon = _ref42 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref40,
-    props = _objectWithoutPropertiesLoose(_ref40, _excluded40);
+    } = _ref42,
+    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1376,14 +1635,14 @@ var HomeIcon = _ref40 => {
     d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8h5z"
   })));
 };
-var LocationIcon = _ref41 => {
+var LocationIcon = _ref43 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref41,
-    props = _objectWithoutPropertiesLoose(_ref41, _excluded41);
+    } = _ref43,
+    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1395,14 +1654,14 @@ var LocationIcon = _ref41 => {
     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 = _ref42 => {
+var LockIcon = _ref44 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref42,
-    props = _objectWithoutPropertiesLoose(_ref42, _excluded42);
+    } = _ref44,
+    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1427,14 +1686,14 @@ var LockIcon = _ref42 => {
     r: "1.5"
   })))));
 };
-var MicrophoneIcon = _ref43 => {
+var MicrophoneIcon = _ref45 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref43,
-    props = _objectWithoutPropertiesLoose(_ref43, _excluded43);
+    } = _ref45,
+    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1460,14 +1719,14 @@ var MicrophoneIcon = _ref43 => {
     y2: "23"
   })));
 };
-var MoonIcon = _ref44 => {
+var MoonIcon = _ref46 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref44,
-    props = _objectWithoutPropertiesLoose(_ref44, _excluded44);
+    } = _ref46,
+    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1479,14 +1738,14 @@ var MoonIcon = _ref44 => {
     d: "M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
   })));
 };
-var NotificationIcon = _ref45 => {
+var NotificationIcon = _ref47 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref45,
-    props = _objectWithoutPropertiesLoose(_ref45, _excluded45);
+    } = _ref47,
+    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1500,14 +1759,14 @@ var NotificationIcon = _ref45 => {
     d: "M13.73 21a2 2 0 0 1-3.46 0"
   })));
 };
-var OpenEyeIcon = _ref46 => {
+var OpenEyeIcon = _ref48 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref46,
-    props = _objectWithoutPropertiesLoose(_ref46, _excluded46);
+    } = _ref48,
+    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1519,14 +1778,14 @@ var OpenEyeIcon = _ref46 => {
     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 = _ref47 => {
+var ProfileIcon = _ref49 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref47,
-    props = _objectWithoutPropertiesLoose(_ref47, _excluded47);
+    } = _ref49,
+    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1539,14 +1798,14 @@ var ProfileIcon = _ref47 => {
     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 = _ref48 => {
+var SettingsIcon = _ref50 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref48,
-    props = _objectWithoutPropertiesLoose(_ref48, _excluded48);
+    } = _ref50,
+    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1558,14 +1817,14 @@ var SettingsIcon = _ref48 => {
     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 = _ref49 => {
+var SuccessIcon = _ref51 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref49,
-    props = _objectWithoutPropertiesLoose(_ref49, _excluded49);
+    } = _ref51,
+    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1577,14 +1836,14 @@ var SuccessIcon = _ref49 => {
     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 = _ref50 => {
+var UnLikeIcon = _ref52 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref50,
-    props = _objectWithoutPropertiesLoose(_ref50, _excluded50);
+    } = _ref52,
+    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1596,14 +1855,14 @@ var UnLikeIcon = _ref50 => {
     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 = _ref51 => {
+var ClockIcon = _ref53 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref51,
-    props = _objectWithoutPropertiesLoose(_ref51, _excluded51);
+    } = _ref53,
+    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1619,14 +1878,14 @@ var ClockIcon = _ref51 => {
     points: "12 6 12 12 16 14"
   })));
 };
-var CameraIcon = _ref52 => {
+var CameraIcon = _ref54 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref52,
-    props = _objectWithoutPropertiesLoose(_ref52, _excluded52);
+    } = _ref54,
+    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1642,14 +1901,14 @@ var CameraIcon = _ref52 => {
     r: "4"
   })));
 };
-var BluetoothIcon = _ref53 => {
+var BluetoothIcon = _ref55 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref53,
-    props = _objectWithoutPropertiesLoose(_ref53, _excluded53);
+    } = _ref55,
+    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1661,14 +1920,14 @@ var BluetoothIcon = _ref53 => {
     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 = _ref54 => {
+var LikeIcon = _ref56 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref54,
-    props = _objectWithoutPropertiesLoose(_ref54, _excluded54);
+    } = _ref56,
+    props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1680,14 +1939,14 @@ var LikeIcon = _ref54 => {
     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 = _ref55 => {
+var UnlockIcon = _ref57 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref55,
-    props = _objectWithoutPropertiesLoose(_ref55, _excluded55);
+    } = _ref57,
+    props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1712,14 +1971,14 @@ var UnlockIcon = _ref55 => {
     r: "1.5"
   })))));
 };
-var WifiIcon = _ref56 => {
+var WifiIcon = _ref58 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref56,
-    props = _objectWithoutPropertiesLoose(_ref56, _excluded56);
+    } = _ref58,
+    props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1731,14 +1990,14 @@ var WifiIcon = _ref56 => {
     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 = _ref57 => {
+var UploadIcon = _ref59 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref57,
-    props = _objectWithoutPropertiesLoose(_ref57, _excluded57);
+    } = _ref59,
+    props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1754,14 +2013,14 @@ var UploadIcon = _ref57 => {
     d: "M12 12l0 9"
   })));
 };
-var SearchIcon = _ref58 => {
+var SearchIcon = _ref60 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref58,
-    props = _objectWithoutPropertiesLoose(_ref58, _excluded58);
+    } = _ref60,
+    props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1773,14 +2032,14 @@ var SearchIcon = _ref58 => {
     d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
   })));
 };
-var CloseEyeIcon = _ref59 => {
+var CloseEyeIcon = _ref61 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref59,
-    props = _objectWithoutPropertiesLoose(_ref59, _excluded59);
+    } = _ref61,
+    props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1793,14 +2052,14 @@ var CloseEyeIcon = _ref59 => {
     fill: "currentColor"
   })));
 };
-var ExternalLinkIcon = _ref60 => {
+var ExternalLinkIcon = _ref62 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref60,
-    props = _objectWithoutPropertiesLoose(_ref60, _excluded60);
+    } = _ref62,
+    props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1812,14 +2071,14 @@ var ExternalLinkIcon = _ref60 => {
     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 = _ref61 => {
+var PlusIcon = _ref63 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref61,
-    props = _objectWithoutPropertiesLoose(_ref61, _excluded61);
+    } = _ref63,
+    props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1841,14 +2100,14 @@ var PlusIcon = _ref61 => {
     y2: "12"
   })));
 };
-var TickIcon = _ref62 => {
+var TickIcon = _ref64 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref62,
-    props = _objectWithoutPropertiesLoose(_ref62, _excluded62);
+    } = _ref64,
+    props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1862,14 +2121,14 @@ var TickIcon = _ref62 => {
     strokeLinejoin: "round"
   })));
 };
-var BoldArrowIcon = _ref63 => {
+var BoldArrowIcon = _ref65 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = true,
       strokeWidth = 1
-    } = _ref63,
-    props = _objectWithoutPropertiesLoose(_ref63, _excluded63);
+    } = _ref65,
+    props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1881,14 +2140,14 @@ var BoldArrowIcon = _ref63 => {
     d: "M12 4l7 7h-4v7h-6v-7H5l7-7z"
   })));
 };
-var ArrowIcon = _ref64 => {
+var ArrowIcon = _ref66 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref64,
-    props = _objectWithoutPropertiesLoose(_ref64, _excluded64);
+    } = _ref66,
+    props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1906,14 +2165,14 @@ var ArrowIcon = _ref64 => {
     points: "6 12 12 6 18 12"
   })));
 };
-var SpinnerIcon = _ref65 => {
+var SpinnerIcon = _ref67 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       filled = false,
       strokeWidth = 1
-    } = _ref65,
-    props = _objectWithoutPropertiesLoose(_ref65, _excluded65);
+    } = _ref67,
+    props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1931,14 +2190,14 @@ var SpinnerIcon = _ref65 => {
     strokeOpacity: "1"
   })));
 };
-var CalendarIcon = _ref66 => {
+var CalendarIcon = _ref68 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref66,
-    props = _objectWithoutPropertiesLoose(_ref66, _excluded66);
+    } = _ref68,
+    props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -1973,14 +2232,14 @@ var CalendarIcon = _ref66 => {
     y2: "10"
   })));
 };
-var SliderIcon = _ref67 => {
+var SliderIcon = _ref69 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref67,
-    props = _objectWithoutPropertiesLoose(_ref67, _excluded67);
+    } = _ref69,
+    props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2035,14 +2294,14 @@ var SliderIcon = _ref67 => {
     y2: "23"
   })));
 };
-var CropIcon = _ref68 => {
+var CropIcon = _ref70 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref68,
-    props = _objectWithoutPropertiesLoose(_ref68, _excluded68);
+    } = _ref70,
+    props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2056,14 +2315,14 @@ var CropIcon = _ref68 => {
     d: "M18 22V8a2 2 0 0 0-2-2H2"
   })));
 };
-var ZoomInIcon = _ref69 => {
+var ZoomInIcon = _ref71 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref69,
-    props = _objectWithoutPropertiesLoose(_ref69, _excluded69);
+    } = _ref71,
+    props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2092,14 +2351,14 @@ var ZoomInIcon = _ref69 => {
     y2: "11"
   })));
 };
-var ZoomOutIcon = _ref70 => {
+var ZoomOutIcon = _ref72 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref70,
-    props = _objectWithoutPropertiesLoose(_ref70, _excluded70);
+    } = _ref72,
+    props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2123,14 +2382,14 @@ var ZoomOutIcon = _ref70 => {
     y2: "11"
   })));
 };
-var TextIcon = _ref71 => {
+var TextIcon = _ref73 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref71,
-    props = _objectWithoutPropertiesLoose(_ref71, _excluded71);
+    } = _ref73,
+    props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2155,14 +2414,14 @@ var TextIcon = _ref71 => {
     y2: "18"
   })));
 };
-var ShapeIcon = _ref72 => {
+var ShapeIcon = _ref74 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref72,
-    props = _objectWithoutPropertiesLoose(_ref72, _excluded72);
+    } = _ref74,
+    props = _objectWithoutPropertiesLoose(_ref74, _excluded74);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2183,14 +2442,14 @@ var ShapeIcon = _ref72 => {
     points: "16,4 19,8 13,8"
   })));
 };
-var RotateIcon = _ref73 => {
+var RotateIcon = _ref75 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
       strokeWidth = 1,
       filled = false
-    } = _ref73,
-    props = _objectWithoutPropertiesLoose(_ref73, _excluded73);
+    } = _ref75,
+    props = _objectWithoutPropertiesLoose(_ref75, _excluded75);
   return /*#__PURE__*/React__default.createElement(IconWrapper, Object.assign({
     widthHeight: widthHeight,
     color: color
@@ -2207,6 +2466,8 @@ var RotateIcon = _ref73 => {
 
 var Icon = {
   __proto__: null,
+  UserIcon: UserIcon,
+  HelpIcon: HelpIcon,
   ChevronIcon: ChevronIcon,
   DragHandleIcon: DragHandleIcon,
   FileIcon: FileIcon,
@@ -2234,6 +2495,7 @@ var Icon = {
   CloudIcon: CloudIcon,
   CopyIcon: CopyIcon,
   DustBinIcon: DustBinIcon,
+  DeleteIcon: DeleteIcon,
   EditIcon: EditIcon,
   ErrorIcon: ErrorIcon,
   DownloadIcon: DownloadIcon,
@@ -3194,65 +3456,503 @@ var ButtonComponent = props => {
 };
 var Button = ButtonComponent;
 
-var _excluded$a = ["src", "color", "views", "themeMode"],
-  _excluded2$2 = ["path"];
-var FileSVG = _ref => {
-  var {
-      src,
-      color,
-      views
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  var {
-    getColor,
-    themeMode
-  } = appStudio.useTheme();
-  var Colorprops = color ? {
-    fill: getColor(color, {
-      themeMode
-    }),
-    stroke: getColor(color, {
-      themeMode
-    })
-  } : {};
-  return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
-    content: 'url("' + src + '")',
-    width: "100%",
-    height: "100%"
-  }, views == null ? void 0 : views.image)));
-};
-var FileImage = _ref2 => {
-  var {
-      path
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
-  return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
-    src: path
-  }, props));
+var useContextMenuState = () => {
+  var [isOpen, setIsOpen] = React.useState(false);
+  var [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  var [activeSubmenuId, setActiveSubmenuId] = React.useState(null);
+  // Close the context menu when clicking outside
+  React.useEffect(() => {
+    var handleClickOutside = event => {
+      var path = event.composedPath();
+      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'context-menu');
+      if (isOutside && isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    // Close the context menu when the window is resized
+    var handleResize = () => {
+      if (isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    // Close the context menu when the escape key is pressed
+    var handleKeyDown = event => {
+      if (event.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', handleResize);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+  return {
+    isOpen,
+    setIsOpen,
+    position,
+    setPosition,
+    activeSubmenuId,
+    setActiveSubmenuId
+  };
 };
 
-// Initializes the custom hook 'useSelectState' for managing the state of the Select component
-var useSelectState = _ref => {
-  var {
-    placeholder,
-    isMulti,
-    options
-  } = _ref;
-  // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
-  var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
-  : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
-  // State hook for managing visibility of the Select dropdown, initially set to hidden
-  var [hide, setHide] = React__default.useState(true);
-  // State hook for tracking mouse hover status over the Select component
-  var [isHovered, setIsHovered] = React__default.useState(false);
-  // State hook for tracking focus status of the Select input field
-  var [isFocused, setIsFocused] = React__default.useState(false);
-  // State hook for managing the value(s) selected by the user, initialized with the default value
-  var [value, setValue] = React__default.useState(defaultValue);
-  // State hook for keeping track of the currently highlighted index in the options list
-  var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
-  // Returns an object containing all stateful values and their associated setters to manage the Select component's state
-  return {
+var ContextMenuSizes = {
+  sm: {
+    padding: '6px 8px',
+    fontSize: '14px',
+    minWidth: '160px'
+  },
+  md: {
+    padding: '8px 12px',
+    fontSize: '16px',
+    minWidth: '180px'
+  },
+  lg: {
+    padding: '10px 16px',
+    fontSize: '18px',
+    minWidth: '200px'
+  }
+};
+var ContextMenuVariants = {
+  default: {
+    backgroundColor: 'white',
+    color: 'color.gray.800'
+  },
+  filled: {
+    backgroundColor: 'color.gray.100',
+    color: 'color.gray.800'
+  },
+  outline: {
+    backgroundColor: 'white',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color.gray.200',
+    color: 'color.gray.800'
+  }
+};
+var ContextMenuItemStates = {
+  hover: {
+    backgroundColor: 'color.gray.100'
+  },
+  active: {
+    backgroundColor: 'color.gray.200'
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+};
+// Helper function to calculate position based on available space
+var calculateMenuPosition = function calculateMenuPosition(x, y, menuWidth, menuHeight, windowWidth, windowHeight, side, align) {
+  if (side === void 0) {
+    side = 'right';
+  }
+  if (align === void 0) {
+    align = 'start';
+  }
+  var posX = x;
+  var posY = y;
+  // Adjust horizontal position based on side
+  if (side === 'left') {
+    posX = x - menuWidth;
+  } else if (side === 'right') {
+    posX = x;
+  } else if (side === 'top' || side === 'bottom') {
+    // Adjust horizontal position based on alignment for top/bottom
+    if (align === 'center') {
+      posX = x - menuWidth / 2;
+    } else if (align === 'end') {
+      posX = x - menuWidth;
+    }
+  }
+  // Adjust vertical position based on side
+  if (side === 'top') {
+    posY = y - menuHeight;
+  } else if (side === 'bottom') {
+    posY = y;
+  } else if (side === 'left' || side === 'right') {
+    // Adjust vertical position based on alignment for left/right
+    if (align === 'center') {
+      posY = y - menuHeight / 2;
+    } else if (align === 'end') {
+      posY = y - menuHeight;
+    }
+  }
+  // Ensure menu stays within window bounds
+  if (posX + menuWidth > windowWidth) {
+    posX = windowWidth - menuWidth;
+  }
+  if (posX < 0) {
+    posX = 0;
+  }
+  if (posY + menuHeight > windowHeight) {
+    posY = windowHeight - menuHeight;
+  }
+  if (posY < 0) {
+    posY = 0;
+  }
+  return {
+    x: posX,
+    y: posY
+  };
+};
+
+var _excluded$a = ["children", "disableNativeContextMenu", "views"],
+  _excluded2$2 = ["items", "position", "side", "align", "views"],
+  _excluded3$2 = ["item", "views"],
+  _excluded4$2 = ["views"],
+  _excluded5$1 = ["children", "items", "size", "variant", "disableNativeContextMenu", "views"];
+// Create context for the ContextMenu
+var ContextMenuContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  setIsOpen: () => {},
+  position: {
+    x: 0,
+    y: 0
+  },
+  setPosition: () => {},
+  activeSubmenuId: null,
+  setActiveSubmenuId: () => {},
+  size: 'md',
+  variant: 'default'
+});
+// Provider component for the ContextMenu context
+var ContextMenuProvider = _ref => {
+  var {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(ContextMenuContext.Provider, {
+    value: value
+  }, children);
+};
+// Hook to use the ContextMenu context
+var useContextMenuContext = () => {
+  var context = React.useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error('useContextMenuContext must be used within a ContextMenuProvider');
+  }
+  return context;
+};
+// ContextMenu Trigger component
+var ContextMenuTrigger = _ref2 => {
+  var {
+      children,
+      disableNativeContextMenu = true,
+      views
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$a);
+  var {
+    setIsOpen,
+    setPosition
+  } = useContextMenuContext();
+  var handleContextMenu = e => {
+    if (disableNativeContextMenu) {
+      e.preventDefault();
+    }
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+    setIsOpen(true);
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    onContextMenu: handleContextMenu
+  }, views == null ? void 0 : views.container, props), children);
+};
+// ContextMenu Content component
+var ContextMenuContent = _ref3 => {
+  var {
+      items,
+      position,
+      side = 'right',
+      align = 'start',
+      views
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
+  var {
+    isOpen,
+    position: contextPosition,
+    // activeSubmenuId,
+    // setActiveSubmenuId,
+    // size,
+    variant
+  } = useContextMenuContext();
+  var menuRef = React.useRef(null);
+  var [menuPosition, setMenuPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  // Calculate the position of the menu
+  React.useEffect(() => {
+    if (isOpen && menuRef.current) {
+      var menuWidth = menuRef.current.offsetWidth;
+      var menuHeight = menuRef.current.offsetHeight;
+      var windowWidth = window.innerWidth;
+      var windowHeight = window.innerHeight;
+      var pos = position || contextPosition;
+      var calculatedPosition = calculateMenuPosition(pos.x, pos.y, menuWidth, menuHeight, windowWidth, windowHeight, side, align);
+      setMenuPosition(calculatedPosition);
+    }
+  }, [isOpen, contextPosition, position, side, align]);
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    id: "context-menu",
+    ref: menuRef,
+    position: "fixed",
+    top: menuPosition.y,
+    left: menuPosition.x,
+    zIndex: 1000,
+    borderRadius: 4,
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
+    overflow: "hidden"
+  }, ContextMenuVariants[variant], views == null ? void 0 : views.menu, props), items.map((item, index) => {
+    if (item.divider) {
+      return /*#__PURE__*/React__default.createElement(ContextMenuDivider, {
+        key: "divider-" + index,
+        views: views
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(ContextMenuItem, {
+      key: item.id,
+      item: item,
+      views: views
+    });
+  }));
+};
+// ContextMenu Item component
+var ContextMenuItem = _ref4 => {
+  var {
+      item,
+      views
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$2);
+  var {
+    activeSubmenuId,
+    setActiveSubmenuId,
+    size
+  } = useContextMenuContext();
+  var [isHovered, setIsHovered] = React.useState(false);
+  var hasSubmenu = item.items && item.items.length > 0;
+  var isSubmenuActive = activeSubmenuId === item.id;
+  var itemRef = React.useRef(null);
+  var [submenuPosition, setSubmenuPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
+  // Handle mouse enter event
+  var handleMouseEnter = () => {
+    setIsHovered(true);
+    if (hasSubmenu) {
+      setActiveSubmenuId(item.id);
+    }
+  };
+  // Handle mouse leave event
+  var handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  // Handle click event
+  var handleClick = () => {
+    if (item.disabled) return;
+    if (!hasSubmenu && item.onClick) {
+      item.onClick();
+    }
+  };
+  // Calculate the position of the submenu
+  React.useEffect(() => {
+    if (isSubmenuActive && itemRef.current) {
+      var rect = itemRef.current.getBoundingClientRect();
+      setSubmenuPosition({
+        x: rect.right,
+        y: rect.top
+      });
+    }
+  }, [isSubmenuActive]);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: itemRef,
+    display: "flex",
+    alignItems: "center",
+    cursor: item.disabled ? 'not-allowed' : 'pointer',
+    opacity: item.disabled ? 0.5 : 1,
+    position: "relative"
+  }, ContextMenuSizes[size], {
+    _hover: !item.disabled ? ContextMenuItemStates.hover : {},
+    backgroundColor: isHovered && !item.disabled ? 'color.gray.100' : 'transparent',
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick
+  }, views == null ? void 0 : views.item, props), item.icon && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    marginRight: 8
+  }, views == null ? void 0 : views.icon), item.icon)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    flexGrow: 1
+  }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    marginLeft: 8
+  }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z",
+    fill: "currentColor"
+  })))), isSubmenuActive && hasSubmenu && (/*#__PURE__*/React__default.createElement(ContextMenuContent, {
+    items: item.items || [],
+    position: submenuPosition,
+    side: "right",
+    align: "start",
+    views: views
+  })));
+};
+// ContextMenu Divider component
+var ContextMenuDivider = _ref5 => {
+  var {
+      views
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    height: "1px",
+    backgroundColor: "color.gray.200",
+    margin: "4px 0"
+  }, views == null ? void 0 : views.divider, props));
+};
+// Main ContextMenu View component
+var ContextMenuView = _ref6 => {
+  var {
+      children,
+      items,
+      disableNativeContextMenu = true,
+      views
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$1);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ContextMenuTrigger, Object.assign({
+    disableNativeContextMenu: disableNativeContextMenu,
+    views: views
+  }, props), children), /*#__PURE__*/React__default.createElement(ContextMenuContent, {
+    items: items,
+    views: views
+  }));
+};
+
+var _excluded$b = ["children", "items", "size", "variant", "disableNativeContextMenu", "views"];
+/**
+ * ContextMenu component for displaying a custom context menu on right-click.
+ */
+var ContextMenuComponent = _ref => {
+  var {
+      children,
+      items,
+      size = 'md',
+      variant = 'default',
+      disableNativeContextMenu = true,
+      views
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var {
+    isOpen,
+    setIsOpen,
+    position,
+    setPosition,
+    activeSubmenuId,
+    setActiveSubmenuId
+  } = useContextMenuState();
+  return /*#__PURE__*/React__default.createElement(ContextMenuProvider, {
+    value: {
+      isOpen,
+      setIsOpen,
+      position,
+      setPosition,
+      activeSubmenuId,
+      setActiveSubmenuId,
+      size,
+      variant
+    }
+  }, /*#__PURE__*/React__default.createElement(ContextMenuView, Object.assign({
+    items: items,
+    size: size,
+    variant: variant,
+    disableNativeContextMenu: disableNativeContextMenu,
+    views: views
+  }, props), children));
+};
+var ContextMenu = ContextMenuComponent;
+// Assign the sub-components to the main component
+ContextMenu.Trigger = ContextMenuTrigger;
+ContextMenu.Content = ContextMenuContent;
+ContextMenu.Item = ContextMenuItem;
+ContextMenu.Divider = ContextMenuDivider;
+
+var _excluded$c = ["src", "color", "views", "themeMode"],
+  _excluded2$3 = ["path"];
+var FileSVG = _ref => {
+  var {
+      src,
+      color,
+      views
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+  var {
+    getColor,
+    themeMode
+  } = appStudio.useTheme();
+  var Colorprops = color ? {
+    fill: getColor(color, {
+      themeMode
+    }),
+    stroke: getColor(color, {
+      themeMode
+    })
+  } : {};
+  return /*#__PURE__*/React__default.createElement(Center, Object.assign({}, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({}, Colorprops, {
+    content: 'url("' + src + '")',
+    width: "100%",
+    height: "100%"
+  }, views == null ? void 0 : views.image)));
+};
+var FileImage = _ref2 => {
+  var {
+      path
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
+  return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
+    src: path
+  }, props));
+};
+
+// Initializes the custom hook 'useSelectState' for managing the state of the Select component
+var useSelectState = _ref => {
+  var {
+    placeholder,
+    isMulti,
+    options
+  } = _ref;
+  // Determines the default value based on the 'placeholder' and 'isMulti' props, setting to an empty array for multi-select or an empty string/single default option
+  var defaultValue = placeholder ? isMulti ? [] : '' // If there's a placeholder, set default to empty array for multi-select or empty string for single select
+  : Array.isArray(options) && options.length > 0 ? options[0].value : ''; // If no placeholder, use the first option value if available, otherwise undefined
+  // State hook for managing visibility of the Select dropdown, initially set to hidden
+  var [hide, setHide] = React__default.useState(true);
+  // State hook for tracking mouse hover status over the Select component
+  var [isHovered, setIsHovered] = React__default.useState(false);
+  // State hook for tracking focus status of the Select input field
+  var [isFocused, setIsFocused] = React__default.useState(false);
+  // State hook for managing the value(s) selected by the user, initialized with the default value
+  var [value, setValue] = React__default.useState(defaultValue);
+  // State hook for keeping track of the currently highlighted index in the options list
+  var [highlightedIndex, setHighlightedIndex] = React__default.useState(0);
+  // Returns an object containing all stateful values and their associated setters to manage the Select component's state
+  return {
     value,
     setValue,
     hide,
@@ -3276,7 +3976,7 @@ var useItemState = () => {
   };
 };
 
-var _excluded$b = ["children", "views"];
+var _excluded$d = ["children", "views"];
 var HelperText = _ref => {
   var {
       children,
@@ -3284,7 +3984,7 @@ var HelperText = _ref => {
         helperText: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return /*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginVertical: 0,
@@ -3293,7 +3993,7 @@ var HelperText = _ref => {
   }, views['helperText'], props), children);
 };
 
-var _excluded$c = ["children", "helperText", "error", "views"];
+var _excluded$e = ["children", "helperText", "error", "views"];
 var FieldContainer = _ref => {
   var {
       children,
@@ -3301,7 +4001,7 @@ var FieldContainer = _ref => {
       error = false,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     gap: 5,
     position: "relative"
@@ -3360,7 +4060,7 @@ var PaddingWithoutLabel = {
   paddingRight: 16
 };
 
-var _excluded$d = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
+var _excluded$f = ["label", "shadow", "children", "value", "size", "shape", "variant", "error", "isWithLabel", "isFocused", "isHovered", "isDisabled", "isReadOnly", "views"];
 var FieldContent = _ref => {
   var {
       shadow,
@@ -3378,7 +4078,7 @@ var FieldContent = _ref => {
         pickerBox: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
   var isInteractive = (isHovered || isFocused) && !isDisabled;
   var color = error ? 'error' : isInteractive ? 'theme.primary' : 'midgray';
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
@@ -3399,12 +4099,12 @@ var FieldContent = _ref => {
   }, isWithLabel ? PadddingWithLabel : PaddingWithoutLabel, shadow, Shapes[shape], InputVariants[variant], views['box'], props), children);
 };
 
-var _excluded$e = ["children"];
+var _excluded$g = ["children"];
 var FieldIcons = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   return /*#__PURE__*/React__default.createElement(Center, Object.assign({
     gap: 10,
     right: 16,
@@ -3456,7 +4156,7 @@ var HeadingSizes$1 = {
   }
 };
 
-var _excluded$f = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
+var _excluded$h = ["children", "heading", "isItalic", "isUnderlined", "isStriked", "weight", "size"];
 var LabelView = _ref => {
   var {
       children,
@@ -3472,7 +4172,7 @@ var LabelView = _ref => {
       size = 'sm'
       // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   // The fontStyle prop toggles between 'italic' and 'normal' based on the 'isItalic' boolean prop.
   var headingStyles = heading ? HeadingSizes$1[heading] : {};
   // fontWeight is derived from the Typography module, ensuring consistent font weighting across the app.
@@ -3504,7 +4204,7 @@ React__default.createElement(LabelView, Object.assign({}, props))
 var Label = LabelComponent;
 // Export the 'LabelComponent' as 'Label' to be reused throughout the project.
 
-var _excluded$g = ["children", "size", "error", "color", "views", "helperText"];
+var _excluded$i = ["children", "size", "error", "color", "views", "helperText"];
 var FieldLabel = _ref => {
   var {
       children,
@@ -3515,7 +4215,7 @@ var FieldLabel = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(Label, Object.assign({
     top: 6,
     zIndex: 1000,
@@ -3528,12 +4228,12 @@ var FieldLabel = _ref => {
   }, views['label'], props), children);
 };
 
-var _excluded$h = ["children"];
+var _excluded$j = ["children"];
 var FieldWrapper = _ref => {
   var {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
     width: "100%",
     maxWidth: '100%'
@@ -3550,10 +4250,10 @@ var IconSizes$2 = {
   xl: 16
 };
 
-var _excluded$i = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
-  _excluded2$3 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
-  _excluded3$2 = ["option", "size", "removeOption"],
-  _excluded4$2 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "shape", "variant", "views", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused", "setHighlightedIndex", "highlightedIndex"];
+var _excluded$k = ["isHovered", "setIsHovered", "option", "size", "callback", "style"],
+  _excluded2$4 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded3$3 = ["option", "size", "removeOption"],
+  _excluded4$3 = ["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"];
 // Defines a component to render individual selection items within a list.
 var Item = _ref => {
   var {
@@ -3564,7 +4264,7 @@ var Item = _ref => {
       callback = () => {},
       style
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   // Handles the click event on an option by invoking the callback with the selected option's value.
   var handleOptionClick = option => callback(option);
   // Toggles the hover state on the item.
@@ -3634,7 +4334,7 @@ var HiddenSelect = _ref4 => {
       isReadOnly = false,
       options = []
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$3);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded2$4);
   var handleChange = event => {
     if (onChange) onChange(event);
   };
@@ -3724,7 +4424,7 @@ var MultiSelect = _ref6 => {
       size = 'md',
       removeOption = () => {}
     } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$2);
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded3$3);
   var handleClick = () => removeOption(option);
   return /*#__PURE__*/React__default.createElement(Horizontal, Object.assign({
     gap: 10,
@@ -3779,7 +4479,7 @@ var SelectView = _ref7 => {
       setHighlightedIndex,
       highlightedIndex
     } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$2);
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded4$3);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -4024,7 +4724,7 @@ var SliderPadding = {
   }
 };
 
-var _excluded$j = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
+var _excluded$l = ["id", "name", "label", "inActiveChild", "activeChild", "labelPosition", "shadow", "size", "value", "isHovered", "isDisabled", "isReadOnly", "on", "setOn", "onChange", "setValue", "setIsHovered", "helperText", "views"];
 var SwitchContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "checkbox"
 }, props));
@@ -4053,7 +4753,7 @@ var SwitchView = _ref => {
         label: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   var handleToggle = event => {
     if (!isReadOnly) {
       setValue(!value);
@@ -4143,7 +4843,7 @@ var useTextAreaState = _ref => {
   // Export of the useTextAreaState hook for external usage.
 };
 
-var _excluded$k = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
+var _excluded$m = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "views"];
 var TextAreaView = _ref => {
   var {
       id,
@@ -4182,7 +4882,7 @@ var TextAreaView = _ref => {
         field: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = Object.assign({
     margin: 0,
@@ -4311,7 +5011,7 @@ var useTextFieldState = _ref => {
   };
 };
 
-var _excluded$l = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
+var _excluded$n = ["id", "name", "label", "hint", "value", "onChange", "left", "right", "helperText", "placeholder", "onChangeText", "shadow", "views", "size", "shape", "variant", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur", "themeMode"];
 var TextFieldInput = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "text"
 }, props));
@@ -4354,7 +5054,7 @@ var TextFieldView = _ref => {
       onBlur = () => {},
       themeMode: elementMode
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   var {
     getColor,
     themeMode
@@ -4535,7 +5235,7 @@ var IconSizes$3 = {
   '6xl': 60
 };
 
-var _excluded$m = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
+var _excluded$o = ["id", "icon", "name", "label", "isChecked", "onChange", "onValueChange", "shadow", "labelPosition", "size", "error", "isSelected", "isHovered", "isDisabled", "isReadOnly", "isIndeterminate", "defaultIsSelected", "setIsSelected", "setIsHovered", "views", "infoText", "helperText"];
 var CheckboxView = _ref => {
   var {
       id,
@@ -4562,7 +5262,7 @@ var CheckboxView = _ref => {
       },
       infoText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   var handleHover = () => setIsHovered(!isHovered);
   var handleChange = () => {
     if (!isReadOnly && !isDisabled) {
@@ -6126,11 +6826,11 @@ var IconSizes$4 = {
   xl: 16
 };
 
-var _excluded$n = ["size"],
-  _excluded2$4 = ["size"],
-  _excluded3$3 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "views", "themeMode"];
+var _excluded$p = ["size"],
+  _excluded2$5 = ["size"],
+  _excluded3$4 = ["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$n);
+  var props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
   }, props));
@@ -6139,7 +6839,7 @@ var CountrySelector = props => (/*#__PURE__*/React__default.createElement(appStu
   type: "country"
 }, props)));
 var CountryItem = _ref2 => {
-  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$4);
+  var props = _objectWithoutPropertiesLoose(_ref2, _excluded2$5);
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "li"
   }, props));
@@ -6242,7 +6942,7 @@ var CountryPickerView = _ref5 => {
       },
       themeMode: elementMode
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded3$4);
   var {
     getColor,
     themeMode
@@ -6369,7 +7069,7 @@ var useDatePickerState = () => {
   };
 };
 
-var _excluded$o = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
+var _excluded$q = ["id", "icon", "name", "label", "date", "children", "helperText", "shadow", "size", "variant", "shape", "views", "error", "isHovered", "isFocused", "isDisabled", "isReadOnly", "setDate", "setIsFocused", "setIsHovered", "onChange", "onChangeText"];
 var DatePickerContent = props => /*#__PURE__*/React__default.createElement(appStudio.Input, Object.assign({
   type: "date"
 }, props));
@@ -6402,7 +7102,7 @@ var DatePickerView = _ref => {
       onChange,
       onChangeText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   var isWithLabel = !!(isFocused && label);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => setIsFocused(true);
@@ -6489,8 +7189,8 @@ var usePasswordState = props => {
   }, props, textFieldStates);
 };
 
-var _excluded$p = ["visibleIcon", "hiddenIcon"],
-  _excluded2$5 = ["isVisible", "setIsVisible"];
+var _excluded$r = ["visibleIcon", "hiddenIcon"],
+  _excluded2$6 = ["isVisible", "setIsVisible"];
 var PasswordComponent = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -6500,13 +7200,13 @@ var PasswordComponent = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   var _usePasswordState = usePasswordState(props),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$5);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$6);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -6554,7 +7254,7 @@ var useComboBoxState = (items, placeholder, searchPlaceholder) => {
   };
 };
 
-var _excluded$q = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
+var _excluded$s = ["placeholder", "items", "showTick", "onSelect", "searchEnabled", "left", "right", "label", "filteredItems", "setSelectedItem", "selectedItem", "highlightedIndex", "setHighlightedIndex", "searchQuery", "setSearchQuery", "setFilteredItems", "views", "isDropdownVisible", "setIsDropdownVisible"];
 // Defines the functional component 'ComboBoxView' with destructured props.
 var ComboBoxView = _ref => {
   var {
@@ -6579,7 +7279,7 @@ var ComboBoxView = _ref => {
       setIsDropdownVisible
       // Collects all further props not destructured explicitly.
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   // Sets up an effect to handle clicking outside the dropdown to close it.
   React.useEffect(() => {
     var handleClickOutside = event => {
@@ -6690,7 +7390,7 @@ var ComboBoxView = _ref => {
   }))))))))))));
 };
 
-var _excluded$r = ["id", "name", "items", "placeholder", "searchPlaceholder"];
+var _excluded$t = ["id", "name", "items", "placeholder", "searchPlaceholder"];
 // Defines the ComboBoxComponent functional component with ComboBoxProps
 var ComboBoxComponent = _ref => {
   var {
@@ -6706,7 +7406,7 @@ var ComboBoxComponent = _ref => {
       searchPlaceholder
       // Destructures the rest of the props not explicitly defined
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   // Initializes ComboBox state using custom hook with items and placeholders
   var state = useComboBoxState(items, placeholder, searchPlaceholder);
   return (
@@ -6722,7 +7422,7 @@ var ComboBoxComponent = _ref => {
 // Exports the ComboBoxComponent as ComboBox
 var ComboBox = ComboBoxComponent;
 
-var _excluded$s = ["children", "autoFocus", "initFocus", "onChange"];
+var _excluded$u = ["children", "autoFocus", "initFocus", "onChange"];
 var FocusContext = /*#__PURE__*/React.createContext({
   active: false,
   focusNextInput: () => {},
@@ -6738,7 +7438,7 @@ var FormikForm = _ref => {
       initFocus,
       onChange = () => {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var formik$1 = formik.useFormikContext();
   React.useEffect(() => {
     onChange(formik$1.values);
@@ -6786,7 +7486,7 @@ var FormikForm = _ref => {
   }, /*#__PURE__*/React__default.createElement(appStudio.Form, Object.assign({}, props), children));
 };
 
-var _excluded$t = ["name", "type"];
+var _excluded$v = ["name", "type"];
 var getInputTypeProps = type => {
   switch (type) {
     case 'email':
@@ -6825,7 +7525,7 @@ var useFormikInput = _ref => {
       name,
       type
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   var focus = useFormFocus();
   var {
     touched,
@@ -6869,13 +7569,13 @@ var useFormikInput = _ref => {
   } : {});
 };
 
-var _excluded$u = ["value"];
+var _excluded$w = ["value"];
 var CheckboxComponent$1 = props => {
   var _useFormikInput = useFormikInput(props),
     {
       value
     } = _useFormikInput,
-    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$u);
+    formProps = _objectWithoutPropertiesLoose(_useFormikInput, _excluded$w);
   formProps.isChecked = value;
   var checkboxStates = useCheckboxState(props);
   return /*#__PURE__*/React__default.createElement(CheckboxView, Object.assign({}, checkboxStates, formProps));
@@ -6933,11 +7633,11 @@ var TextAreaComponent$1 = props => {
  */
 var FormikTextArea = TextAreaComponent$1;
 
-var _excluded$v = ["value"];
+var _excluded$x = ["value"];
 var TextFieldComponent$1 = props => {
   var formProps = useFormikInput(props);
   var _useTextFieldState = useTextFieldState(props),
-    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$v);
+    textFieldStates = _objectWithoutPropertiesLoose(_useTextFieldState, _excluded$x);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, textFieldStates, formProps));
 };
 /**
@@ -6945,8 +7645,8 @@ var TextFieldComponent$1 = props => {
  */
 var FormikTextField = TextFieldComponent$1;
 
-var _excluded$w = ["visibleIcon", "hiddenIcon"],
-  _excluded2$6 = ["isVisible", "setIsVisible"];
+var _excluded$y = ["visibleIcon", "hiddenIcon"],
+  _excluded2$7 = ["isVisible", "setIsVisible"];
 var PasswordComponent$1 = _ref => {
   var {
       visibleIcon = /*#__PURE__*/React__default.createElement(OpenEyeIcon, {
@@ -6956,14 +7656,14 @@ var PasswordComponent$1 = _ref => {
         widthHeight: 14
       })
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   var formProps = useFormikInput(props);
   var _usePasswordState = usePasswordState(formProps),
     {
       isVisible,
       setIsVisible
     } = _usePasswordState,
-    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$6);
+    passwordProps = _objectWithoutPropertiesLoose(_usePasswordState, _excluded2$7);
   return /*#__PURE__*/React__default.createElement(TextFieldView, Object.assign({}, passwordProps, {
     type: isVisible ? 'text' : 'password',
     isClearable: false,
@@ -6981,14 +7681,14 @@ var PasswordComponent$1 = _ref => {
  */
 var FormikPassword = PasswordComponent$1;
 
-var _excluded$x = ["items", "placeholder", "searchPlaceholder"];
+var _excluded$z = ["items", "placeholder", "searchPlaceholder"];
 var ComboBoxComponent$1 = _ref => {
   var {
       items,
       placeholder,
       searchPlaceholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var formProps = useFormikInput(props);
   var ComboBoxStates = useComboBoxState(items, placeholder, searchPlaceholder);
   // Ensure the onChange function from formProps is being called when an item is selected
@@ -7264,7 +7964,7 @@ var OrientationStyles = {
   }
 };
 
-var _excluded$y = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+var _excluded$A = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
 var SliderView = _ref => {
   var _views$tooltip, _views$tooltip2;
   var {
@@ -7307,7 +8007,7 @@ var SliderView = _ref => {
         tooltip: {}
       }
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var {
     getColor,
     themeMode
@@ -7528,15 +8228,37 @@ var SliderView = _ref => {
 };
 
 var SliderComponent = props => {
-  // Get state and handlers from the custom hook
-  var sliderState = useSliderState(props);
-  // Render the view component, passing down props and state
-  return /*#__PURE__*/React__default.createElement(SliderView, Object.assign({}, props, sliderState));
-};
-/**
+  // Get Formik props (value, onChange, etc.)
+  var formProps = useFormikInput(props);
+  // Get slider state and handlers
+  var sliderState = useSliderState(Object.assign({}, props, {
+    value: formProps.value !== undefined ? Number(formProps.value) : undefined,
+    onChange: value => {
+      // Call Formik's onChange
+      formProps.onChange(value);
+      // Call the original onChange if provided
+      props.onChange == null || props.onChange(value);
+    }
+  }));
+  // Render the slider with both Formik props and slider state
+  return /*#__PURE__*/React__default.createElement(SliderView, Object.assign({}, props, sliderState, formProps));
+};
+/**
+ * Slider component integrated with Formik for form state management.
+ * Allows users to select a value from a range by moving a handle.
+ */
+var FormikSlider = SliderComponent;
+
+var SliderComponent$1 = props => {
+  // Get state and handlers from the custom hook
+  var sliderState = useSliderState(props);
+  // Render the view component, passing down props and state
+  return /*#__PURE__*/React__default.createElement(SliderView, Object.assign({}, props, sliderState));
+};
+/**
  * Slider allows users to select a value from a range by moving a handle.
  */
-var Slider = SliderComponent;
+var Slider = SliderComponent$1;
 
 // Create your store with the initial state and actions.
 var useMessageStore = /*#__PURE__*/zustand.create(set => ({
@@ -8070,7 +8792,7 @@ var UploadView = _ref => {
   }, views == null ? void 0 : views.view)));
 };
 
-var _excluded$z = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
+var _excluded$B = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
 var Uploader = _ref => {
   var {
       accept = '*/*',
@@ -8082,7 +8804,7 @@ var Uploader = _ref => {
       isLoading = false,
       progress = 0
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   var {
     previewUrl,
     thumbnailUrl,
@@ -8219,11 +8941,11 @@ var HeaderIconSizes = {
   xl: 28
 };
 
-var _excluded$A = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
-  _excluded2$7 = ["children", "shadow", "isFullScreen", "shape", "views"],
-  _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
-  _excluded4$3 = ["children", "views"],
-  _excluded5$1 = ["children", "views"];
+var _excluded$C = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  _excluded2$8 = ["children", "shadow", "isFullScreen", "shape", "views"],
+  _excluded3$5 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
+  _excluded4$4 = ["children", "views"],
+  _excluded5$2 = ["children", "views"];
 var ModalOverlay = _ref => {
   var {
       children,
@@ -8234,7 +8956,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -8268,7 +8990,7 @@ var ModalContainer = _ref2 => {
       shape = 'rounded',
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$7);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2$8);
   var defaultShadow = typeof document !== undefined ? {
     boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)'
   } : {
@@ -8300,7 +9022,7 @@ var ModalHeader = _ref3 => {
       buttonPosition = 'right',
       views
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$4);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3$5);
   var onClose = props.onClose ? props.onClose : hideModal;
   var buttonIcon = /*#__PURE__*/React__default.createElement(Button, {
     onClick: onClose,
@@ -8325,7 +9047,7 @@ var ModalBody = _ref4 => {
       children,
       views
     } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
   var defaultBorder = {
     borderBottomWidth: 2,
     borderTopWidth: 2,
@@ -8342,7 +9064,7 @@ var ModalFooter = _ref5 => {
       children,
       views
     } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$1);
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5$2);
   return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
     marginTop: "auto",
     alignItems: "center",
@@ -8404,6 +9126,344 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.Layout = ModalLayout;
 
+var useNavigationMenuState = function useNavigationMenuState(defaultActiveItemId, defaultExpandedItemIds) {
+  if (defaultActiveItemId === void 0) {
+    defaultActiveItemId = null;
+  }
+  if (defaultExpandedItemIds === void 0) {
+    defaultExpandedItemIds = [];
+  }
+  var [activeItemId, setActiveItemId] = React.useState(defaultActiveItemId);
+  var [expandedItemIds, setExpandedItemIds] = React.useState(defaultExpandedItemIds);
+  var toggleExpandedItem = itemId => {
+    setExpandedItemIds(prevExpandedItemIds => {
+      // Check if the item is already expanded
+      var isExpanded = prevExpandedItemIds.includes(itemId);
+      if (isExpanded) {
+        // If expanded, remove it from the list
+        return prevExpandedItemIds.filter(id => id !== itemId);
+      } else {
+        // If not expanded, add it to the list
+        return [...prevExpandedItemIds, itemId];
+      }
+    });
+  };
+  var isItemExpanded = itemId => {
+    return expandedItemIds.includes(itemId);
+  };
+  return {
+    activeItemId,
+    setActiveItemId,
+    expandedItemIds,
+    toggleExpandedItem,
+    isItemExpanded
+  };
+};
+
+var NavigationMenuSizes = {
+  sm: {
+    padding: '8px 12px',
+    fontSize: '14px'
+  },
+  md: {
+    padding: '10px 16px',
+    fontSize: '16px'
+  },
+  lg: {
+    padding: '12px 20px',
+    fontSize: '18px'
+  }
+};
+var NavigationMenuVariants = {
+  default: {
+    backgroundColor: 'transparent',
+    color: 'color.gray.800'
+  },
+  filled: {
+    backgroundColor: 'color.gray.100',
+    color: 'color.gray.800'
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color.gray.200',
+    color: 'color.gray.800'
+  }
+};
+var NavigationMenuOrientations = {
+  horizontal: {
+    flexDirection: 'row'
+  },
+  vertical: {
+    flexDirection: 'column'
+  }
+};
+var NavigationMenuItemStates = {
+  active: {
+    backgroundColor: 'color.gray.200',
+    fontWeight: 'bold'
+  },
+  hover: {
+    backgroundColor: 'color.gray.100'
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+};
+
+// Create context for the NavigationMenu
+var NavigationMenuContext = /*#__PURE__*/React.createContext({
+  activeItemId: null,
+  setActiveItemId: () => {},
+  expandedItemIds: [],
+  toggleExpandedItem: () => {},
+  isItemExpanded: () => false,
+  orientation: 'vertical',
+  size: 'md',
+  variant: 'default'
+});
+// Provider component for the NavigationMenu context
+var NavigationMenuProvider = _ref => {
+  var {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(NavigationMenuContext.Provider, {
+    value: value
+  }, children);
+};
+// Hook to use the NavigationMenu context
+var useNavigationMenuContext = () => {
+  var context = React.useContext(NavigationMenuContext);
+  if (!context) {
+    throw new Error('useNavigationMenuContext must be used within a NavigationMenuProvider');
+  }
+  return context;
+};
+// NavigationMenu List component
+var NavigationMenuList = _ref2 => {
+  var {
+    children,
+    views
+  } = _ref2;
+  var {
+    orientation
+  } = useNavigationMenuContext();
+  var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
+  return /*#__PURE__*/React__default.createElement(Container, Object.assign({
+    width: "100%",
+    gap: 2
+  }, NavigationMenuOrientations[orientation], views == null ? void 0 : views.container), children);
+};
+// NavigationMenu Item component
+var NavigationMenuItem = _ref3 => {
+  var {
+    item,
+    views
+  } = _ref3;
+  var {
+    activeItemId,
+    setActiveItemId,
+    // isItemExpanded,
+    orientation,
+    size,
+    variant,
+    onItemActivate
+  } = useNavigationMenuContext();
+  var isActive = activeItemId === item.id;
+  var hasSubItems = item.items && item.items.length > 0;
+  // const isExpanded = hasSubItems && isItemExpanded(item.id);
+  var handleClick = () => {
+    if (item.disabled) return;
+    setActiveItemId(item.id);
+    if (onItemActivate) {
+      onItemActivate(item.id);
+    }
+  };
+  var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
+  // Render item with sub-items
+  if (hasSubItems) {
+    var _item$items;
+    return /*#__PURE__*/React__default.createElement(Container, Object.assign({
+      width: "100%",
+      flexDirection: orientation === 'horizontal' ? 'column' : 'column',
+      position: "relative"
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(NavigationMenuTrigger, {
+      itemId: item.id,
+      disabled: item.disabled,
+      views: views
+    }, item.icon && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      marginRight: 8
+    }, views == null ? void 0 : views.icon), item.icon)), item.label), /*#__PURE__*/React__default.createElement(NavigationMenuContent, {
+      itemId: item.id
+    }, /*#__PURE__*/React__default.createElement(NavigationMenuList, null, (_item$items = item.items) == null ? void 0 : _item$items.map(subItem => (/*#__PURE__*/React__default.createElement(NavigationMenuItem, {
+      key: subItem.id,
+      item: subItem
+    }))))));
+  }
+  // Render regular item (no sub-items)
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    as: item.href ? 'a' : 'div',
+    to: item.href,
+    onClick: handleClick,
+    cursor: item.disabled ? 'not-allowed' : 'pointer',
+    opacity: item.disabled ? 0.5 : 1,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    borderRadius: 4,
+    transition: "background-color 0.2s ease"
+  }, NavigationMenuSizes[size], NavigationMenuVariants[variant], isActive ? NavigationMenuItemStates.active : {}, {
+    _hover: !item.disabled ? NavigationMenuItemStates.hover : {}
+  }, views == null ? void 0 : views.item), item.icon && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    marginRight: 8
+  }, views == null ? void 0 : views.icon), item.icon)), item.label);
+};
+// NavigationMenu Trigger component
+var NavigationMenuTrigger = _ref4 => {
+  var {
+    children,
+    itemId,
+    disabled,
+    views
+  } = _ref4;
+  var {
+    activeItemId,
+    toggleExpandedItem,
+    isItemExpanded,
+    size,
+    variant
+  } = useNavigationMenuContext();
+  var isActive = activeItemId === itemId;
+  var isExpanded = isItemExpanded(itemId);
+  var handleClick = e => {
+    e.preventDefault();
+    if (disabled) return;
+    toggleExpandedItem(itemId);
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    onClick: handleClick,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 4,
+    transition: "background-color 0.2s ease"
+  }, NavigationMenuSizes[size], NavigationMenuVariants[variant], isActive ? NavigationMenuItemStates.active : {}, {
+    _hover: !disabled ? NavigationMenuItemStates.hover : {}
+  }, views == null ? void 0 : views.trigger), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    display: "flex",
+    alignItems: "center"
+  }, children), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    transition: "transform 0.2s ease",
+    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)'
+  }, views == null ? void 0 : views.indicator), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z",
+    fill: "currentColor"
+  }))));
+};
+// NavigationMenu Content component
+var NavigationMenuContent = _ref5 => {
+  var {
+    children,
+    itemId,
+    views
+  } = _ref5;
+  var {
+    isItemExpanded,
+    orientation
+  } = useNavigationMenuContext();
+  var isExpanded = isItemExpanded(itemId);
+  if (!isExpanded) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    paddingLeft: orientation === 'vertical' ? 16 : 0,
+    paddingTop: orientation === 'horizontal' ? 8 : 0,
+    overflow: "hidden",
+    width: "100%"
+  }, views == null ? void 0 : views.container), children);
+};
+// Main NavigationMenu View component
+var NavigationMenuView = _ref6 => {
+  var {
+    items,
+    orientation,
+    //size, variant,
+    views
+  } = _ref6;
+  var Container = orientation === 'horizontal' ? appStudio.Horizontal : appStudio.Vertical;
+  return /*#__PURE__*/React__default.createElement(Container, Object.assign({
+    width: "100%"
+  }, NavigationMenuOrientations[orientation], views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(NavigationMenuList, {
+    views: views
+  }, items.map(item => (/*#__PURE__*/React__default.createElement(NavigationMenuItem, {
+    key: item.id,
+    item: item,
+    views: views
+  })))));
+};
+
+var _excluded$D = ["items", "orientation", "size", "variant", "defaultActiveItemId", "defaultExpandedItemIds", "onItemActivate", "views"];
+/**
+ * NavigationMenu component for creating navigation menus with optional nested items.
+ */
+var NavigationMenuComponent = _ref => {
+  var {
+      items,
+      orientation = 'vertical',
+      size = 'md',
+      variant = 'default',
+      defaultActiveItemId = null,
+      defaultExpandedItemIds = [],
+      onItemActivate,
+      views
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
+  var {
+    activeItemId,
+    setActiveItemId,
+    expandedItemIds,
+    toggleExpandedItem,
+    isItemExpanded
+  } = useNavigationMenuState(defaultActiveItemId, defaultExpandedItemIds);
+  return /*#__PURE__*/React__default.createElement(NavigationMenuProvider, {
+    value: {
+      activeItemId,
+      setActiveItemId,
+      expandedItemIds,
+      toggleExpandedItem,
+      isItemExpanded,
+      orientation,
+      size,
+      variant,
+      onItemActivate
+    }
+  }, /*#__PURE__*/React__default.createElement(NavigationMenuView, Object.assign({
+    items: items,
+    orientation: orientation,
+    size: size,
+    variant: variant,
+    views: views
+  }, props)));
+};
+var NavigationMenu = NavigationMenuComponent;
+// Assign the sub-components to the main component
+NavigationMenu.List = NavigationMenuList;
+NavigationMenu.Item = NavigationMenuItem;
+NavigationMenu.Trigger = NavigationMenuTrigger;
+NavigationMenu.Content = NavigationMenuContent;
+
 var defaultStyles = {};
 // Create a context that includes both styles and the onClick function
 var TableContext = /*#__PURE__*/React.createContext({
@@ -8713,7 +9773,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-var _excluded$B = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+var _excluded$E = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
 var ToggleView = _ref => {
   var {
       children,
@@ -8727,7 +9787,7 @@ var ToggleView = _ref => {
       onToggle,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
   var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
   var isActive = !!(isToggle || isHovered);
   var toggleVariants = {
@@ -8770,7 +9830,7 @@ var ToggleView = _ref => {
   }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
 };
 
-var _excluded$C = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+var _excluded$F = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
 // Destructuring properties from ToggleProps to be used within the ToggleComponent.
 var ToggleComponent = _ref => {
   var {
@@ -8782,7 +9842,7 @@ var ToggleComponent = _ref => {
       isToggled = false,
       onToggle
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
   // Initializing toggle state and set state functions using the custom hook useToggleState.
   var {
     isHovered,
@@ -9022,6 +10082,400 @@ var DragAndDropComponent = props => {
 };
 var DragAndDrop = DragAndDropComponent;
 
+var useDropdownMenuState = function useDropdownMenuState(defaultOpen) {
+  if (defaultOpen === void 0) {
+    defaultOpen = false;
+  }
+  var [isOpen, setIsOpen] = React.useState(defaultOpen);
+  var [activeSubmenuId, setActiveSubmenuId] = React.useState(null);
+  // Close the dropdown menu when clicking outside
+  React.useEffect(() => {
+    var handleClickOutside = event => {
+      var path = event.composedPath();
+      var isOutside = !path.some(element => (element == null ? void 0 : element.id) === 'dropdown-menu' || (element == null ? void 0 : element.id) === 'dropdown-trigger');
+      if (isOutside && isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    // Close the dropdown menu when the window is resized
+    var handleResize = () => {
+      if (isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    // Close the dropdown menu when the escape key is pressed
+    var handleKeyDown = event => {
+      if (event.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+        setActiveSubmenuId(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', handleResize);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', handleResize);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen]);
+  return {
+    isOpen,
+    setIsOpen,
+    activeSubmenuId,
+    setActiveSubmenuId
+  };
+};
+
+var DropdownMenuSizes = {
+  sm: {
+    padding: '6px 8px',
+    fontSize: '14px',
+    minWidth: '160px'
+  },
+  md: {
+    padding: '8px 12px',
+    fontSize: '16px',
+    minWidth: '180px'
+  },
+  lg: {
+    padding: '10px 16px',
+    fontSize: '18px',
+    minWidth: '200px'
+  }
+};
+var DropdownMenuVariants = {
+  default: {
+    backgroundColor: 'white',
+    color: 'color.gray.800'
+  },
+  filled: {
+    backgroundColor: 'color.gray.100',
+    color: 'color.gray.800'
+  },
+  outline: {
+    backgroundColor: 'white',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'color.gray.200',
+    color: 'color.gray.800'
+  }
+};
+var DropdownMenuItemStates = {
+  hover: {
+    backgroundColor: 'color.gray.100'
+  },
+  active: {
+    backgroundColor: 'color.gray.200'
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed'
+  }
+};
+// Helper function to calculate position based on side and alignment
+var getDropdownPosition = function getDropdownPosition(side, align) {
+  if (side === void 0) {
+    side = 'bottom';
+  }
+  if (align === void 0) {
+    align = 'start';
+  }
+  var positions = {
+    top: Object.assign({
+      bottom: '100%',
+      marginBottom: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    right: Object.assign({
+      left: '100%',
+      marginLeft: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    }),
+    bottom: Object.assign({
+      top: '100%',
+      marginTop: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    left: Object.assign({
+      right: '100%',
+      marginRight: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    })
+  };
+  return positions[side];
+};
+
+var _excluded$G = ["children", "views"],
+  _excluded2$9 = ["items", "side", "align", "views"],
+  _excluded3$6 = ["item", "views"],
+  _excluded4$5 = ["views"],
+  _excluded5$3 = ["trigger", "items", "side", "align", "views"];
+// Create context for the DropdownMenu
+var DropdownMenuContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  setIsOpen: () => {},
+  activeSubmenuId: null,
+  setActiveSubmenuId: () => {},
+  size: 'md',
+  variant: 'default'
+});
+// Provider component for the DropdownMenu context
+var DropdownMenuProvider = _ref => {
+  var {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(DropdownMenuContext.Provider, {
+    value: value
+  }, children);
+};
+// Hook to use the DropdownMenu context
+var useDropdownMenuContext = () => {
+  var context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error('useDropdownMenuContext must be used within a DropdownMenuProvider');
+  }
+  return context;
+};
+// DropdownMenu Trigger component
+var DropdownMenuTrigger = _ref2 => {
+  var {
+      children,
+      views
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$G);
+  var {
+    isOpen,
+    setIsOpen
+  } = useDropdownMenuContext();
+  var handleClick = e => {
+    e.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    id: "dropdown-trigger",
+    onClick: handleClick,
+    cursor: "pointer",
+    position: "relative",
+    display: "inline-block"
+  }, views == null ? void 0 : views.container, props), children);
+};
+// DropdownMenu Content component
+var DropdownMenuContent = _ref3 => {
+  var {
+      items,
+      side = 'bottom',
+      align = 'start',
+      views
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$9);
+  var {
+    isOpen,
+    //activeSubmenuId, setActiveSubmenuId, size,
+    variant
+  } = useDropdownMenuContext();
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    id: "dropdown-menu",
+    position: "absolute",
+    zIndex: 1000,
+    borderRadius: 4,
+    boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
+    overflow: "hidden"
+  }, getDropdownPosition(side, align), DropdownMenuVariants[variant], views == null ? void 0 : views.menu, props), items.map((item, index) => {
+    if (item.divider) {
+      return /*#__PURE__*/React__default.createElement(DropdownMenuDivider, {
+        key: "divider-" + index,
+        views: views
+      });
+    }
+    return /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
+      key: item.id,
+      item: item,
+      views: views
+    });
+  }));
+};
+// DropdownMenu Item component
+var DropdownMenuItem = _ref4 => {
+  var {
+      item,
+      views
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded3$6);
+  var {
+    activeSubmenuId,
+    setActiveSubmenuId,
+    size
+  } = useDropdownMenuContext();
+  var [isHovered, setIsHovered] = React.useState(false);
+  var hasSubmenu = item.items && item.items.length > 0;
+  var isSubmenuActive = activeSubmenuId === item.id;
+  var itemRef = React.useRef(null);
+  // Handle mouse enter event
+  var handleMouseEnter = () => {
+    setIsHovered(true);
+    if (hasSubmenu) {
+      setActiveSubmenuId(item.id);
+    }
+  };
+  // Handle mouse leave event
+  var handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  // Handle click event
+  var handleClick = e => {
+    e.stopPropagation();
+    if (item.disabled) return;
+    if (!hasSubmenu && item.onClick) {
+      item.onClick();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    ref: itemRef,
+    display: "flex",
+    alignItems: "center",
+    cursor: item.disabled ? 'not-allowed' : 'pointer',
+    opacity: item.disabled ? 0.5 : 1,
+    position: "relative"
+  }, DropdownMenuSizes[size], {
+    _hover: !item.disabled ? DropdownMenuItemStates.hover : {},
+    backgroundColor: isHovered && !item.disabled ? 'color.gray.100' : 'transparent',
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick
+  }, views == null ? void 0 : views.item, props), item.icon && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    marginRight: 8
+  }, views == null ? void 0 : views.icon), item.icon)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+    flexGrow: 1
+  }, item.label), hasSubmenu && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    marginLeft: 8
+  }, views == null ? void 0 : views.submenuIndicator), /*#__PURE__*/React__default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z",
+    fill: "currentColor"
+  })))), isSubmenuActive && hasSubmenu && (/*#__PURE__*/React__default.createElement(DropdownMenuContent, {
+    items: item.items || [],
+    side: "right",
+    align: "start",
+    views: views
+  })));
+};
+// DropdownMenu Divider component
+var DropdownMenuDivider = _ref5 => {
+  var {
+      views
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded4$5);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    height: "1px",
+    backgroundColor: "color.gray.200",
+    margin: "4px 0"
+  }, views == null ? void 0 : views.divider, props));
+};
+// Main DropdownMenu View component
+var DropdownMenuView = _ref6 => {
+  var {
+      trigger,
+      items,
+      side = 'bottom',
+      align = 'start',
+      views
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded5$3);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    position: "relative",
+    display: "inline-block"
+  }, views == null ? void 0 : views.container, props), /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
+    views: views
+  }, trigger), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
+    items: items,
+    side: side,
+    align: align,
+    views: views
+  }));
+};
+
+var _excluded$H = ["trigger", "items", "size", "variant", "side", "align", "defaultOpen", "views"];
+/**
+ * DropdownMenu component for displaying a menu when clicking on a trigger element.
+ */
+var DropdownMenuComponent = _ref => {
+  var {
+      trigger,
+      items,
+      size = 'md',
+      variant = 'default',
+      side = 'bottom',
+      align = 'start',
+      defaultOpen = false,
+      views
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$H);
+  var {
+    isOpen,
+    setIsOpen,
+    activeSubmenuId,
+    setActiveSubmenuId
+  } = useDropdownMenuState(defaultOpen);
+  return /*#__PURE__*/React__default.createElement(DropdownMenuProvider, {
+    value: {
+      isOpen,
+      setIsOpen,
+      activeSubmenuId,
+      setActiveSubmenuId,
+      size,
+      variant
+    }
+  }, /*#__PURE__*/React__default.createElement(DropdownMenuView, Object.assign({
+    trigger: trigger,
+    items: items,
+    side: side,
+    align: align,
+    views: views
+  }, props)));
+};
+var DropdownMenu = DropdownMenuComponent;
+// Assign the sub-components to the main component
+DropdownMenu.Trigger = DropdownMenuTrigger;
+DropdownMenu.Content = DropdownMenuContent;
+DropdownMenu.Item = DropdownMenuItem;
+DropdownMenu.Divider = DropdownMenuDivider;
+
 var useHoverCardState = () => {
   var [isOpen, setIsOpen] = React.useState(false);
   return {
@@ -9081,8 +10535,8 @@ var ContentPositions = {
   })
 };
 
-var _excluded$D = ["children", "views"],
-  _excluded2$8 = ["children", "views", "side", "align"];
+var _excluded$I = ["children", "views"],
+  _excluded2$a = ["children", "views", "side", "align"];
 // Create context for the HoverCard
 var HoverCardContext = /*#__PURE__*/React.createContext({
   isOpen: false,
@@ -9109,7 +10563,7 @@ var HoverCardTrigger = _ref2 => {
       children,
       views
     } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$I);
   var {
     setIsOpen
   } = useHoverCardContext();
@@ -9127,7 +10581,7 @@ var HoverCardContent = _ref3 => {
       side = 'bottom',
       align = 'center'
     } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$8);
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2$a);
   var {
     isOpen
   } = useHoverCardContext();
@@ -9145,7 +10599,7 @@ var HoverCardContent = _ref3 => {
   }, ContentPositions[side](align), views == null ? void 0 : views.container, props), children);
 };
 
-var _excluded$E = ["children", "views"];
+var _excluded$J = ["children", "views"];
 /**
  * HoverCard component displays floating content when hovering over a trigger element.
  */
@@ -9154,7 +10608,7 @@ var HoverCardComponent = _ref => {
       children,
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
   var {
     isOpen,
     setIsOpen
@@ -9173,6 +10627,7 @@ var HoverCard = HoverCardComponent;
 HoverCard.Trigger = HoverCardTrigger;
 HoverCard.Content = HoverCardContent;
 
+exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.ArrowIcon = ArrowIcon;
 exports.AspectRatio = AspectRatio;
@@ -9195,14 +10650,17 @@ exports.CloseEyeIcon = CloseEyeIcon;
 exports.CloseIcon = CloseIcon;
 exports.CloudIcon = CloudIcon;
 exports.ComboBox = ComboBox;
+exports.ContextMenu = ContextMenu;
 exports.CopyIcon = CopyIcon;
 exports.CountryPicker = CountryPicker;
 exports.CropIcon = CropIcon;
 exports.DatePicker = DatePicker;
+exports.DeleteIcon = DeleteIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragAndDrop = DragAndDrop;
 exports.DragAndDropComponent = DragAndDropComponent;
 exports.DragHandleIcon = DragHandleIcon;
+exports.DropdownMenu = DropdownMenu;
 exports.DustBinIcon = DustBinIcon;
 exports.EditIcon = EditIcon;
 exports.ErrorIcon = ErrorIcon;
@@ -9219,10 +10677,12 @@ exports.FormikDatePicker = FormikDatePicker;
 exports.FormikForm = FormikForm;
 exports.FormikPassword = FormikPassword;
 exports.FormikSelect = FormikSelect;
+exports.FormikSlider = FormikSlider;
 exports.FormikSwitch = FormikSwitch;
 exports.FormikTextArea = FormikTextArea;
 exports.FormikTextField = FormikTextField;
 exports.HeartIcon = HeartIcon;
+exports.HelpIcon = HelpIcon;
 exports.HomeIcon = HomeIcon;
 exports.Horizontal = Horizontal;
 exports.HorizontalBase = HorizontalBase;
@@ -9247,6 +10707,7 @@ exports.MicrophoneIcon = MicrophoneIcon;
 exports.MinusIcon = MinusIcon;
 exports.Modal = Modal;
 exports.MoonIcon = MoonIcon;
+exports.NavigationMenu = NavigationMenu;
 exports.NotificationIcon = NotificationIcon;
 exports.OpenEyeIcon = OpenEyeIcon;
 exports.PanelIcon = PanelIcon;
@@ -9289,6 +10750,7 @@ exports.UnLikeIcon = UnLikeIcon;
 exports.UnlockIcon = UnlockIcon;
 exports.UploadIcon = UploadIcon;
 exports.Uploader = Uploader;
+exports.UserIcon = UserIcon;
 exports.Vertical = Vertical;
 exports.VerticalBase = VerticalBase;
 exports.VideoIcon = VideoIcon;