@app-studio/web 0.8.72 → 0.8.74

package/dist/web.umd.development.js

@@ -1,12 +1,230 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.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'), require('react-router-dom'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('src/components/Layout')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.array.includes.js', 'react-router-dom', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'src/components/Layout'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, null, global.format, global.formik, null, null, null, global.zustand, global.Layout));
-}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, es_array_includes_js, reactRouterDom, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('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'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url.to-json.js'), require('core-js/modules/web.url-search-params.js'), require('zustand'), require('src/components/Layout')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'src/components/Layout'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, global.React, null, null, null, null, null, global.appStudio, null, null, global.reactRouterDom, null, global.format, global.formik, null, null, null, null, global.zustand, global.Layout));
+}(this, (function (exports, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_object_assign_js, appStudio, es_symbol_description_js, es_parseFloat_js, reactRouterDom, es_string_startsWith_js, format, formik, es_number_toFixed_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
 
+  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)));
@@ -245,17 +463,17 @@
     _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"],
@@ -266,10 +484,10 @@
     _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"],
@@ -281,14 +499,16 @@
     _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 {
@@ -317,8 +537,7 @@
       strokeLinejoin: 'round'
     };
   };
-  // Example Icon Component: ChevronIcon
-  var ChevronIcon = _ref2 => {
+  var UserIcon = _ref2 => {
     var {
         widthHeight = 24,
         color = 'currentColor',
@@ -334,10 +553,10 @@
       "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',
@@ -352,6 +571,45 @@
       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",
@@ -379,14 +637,14 @@
     }))));
   };
   // 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
@@ -407,14 +665,14 @@
     })));
   };
   // 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
@@ -440,14 +698,14 @@
     })));
   };
   // 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
@@ -479,14 +737,14 @@
       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
@@ -501,14 +759,14 @@
       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
@@ -524,14 +782,14 @@
     })));
   };
   // 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
@@ -552,14 +810,14 @@
     })));
   };
   // 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
@@ -581,14 +839,14 @@
       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
@@ -612,14 +870,14 @@
       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
@@ -640,14 +898,14 @@
       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
@@ -662,14 +920,14 @@
       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
@@ -688,14 +946,14 @@
       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
@@ -706,19 +964,19 @@
       d: "M0 0h24v24H0z",
       fill: "none"
     }), /*#__PURE__*/React__default.createElement("path", {
-      d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 \n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
+      d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5\n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
     })));
   };
   // Example Refactored Icon: MinusIcon without undefined 'padding' prop
-  var MinusIcon = _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
@@ -735,14 +993,14 @@
     })));
   };
   // 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
@@ -756,14 +1014,14 @@
       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
@@ -775,14 +1033,14 @@
       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
@@ -794,14 +1052,14 @@
       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
@@ -813,14 +1071,14 @@
       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
@@ -832,14 +1090,14 @@
       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
@@ -855,14 +1113,14 @@
       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
@@ -886,14 +1144,14 @@
       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
@@ -905,14 +1163,14 @@
       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
@@ -924,14 +1182,14 @@
       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
@@ -943,14 +1201,14 @@
       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
@@ -969,14 +1227,14 @@
       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
@@ -988,14 +1246,15 @@
       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
@@ -1007,14 +1266,14 @@
       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
@@ -1040,14 +1299,14 @@
       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
@@ -1059,14 +1318,14 @@
       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
@@ -1094,14 +1353,14 @@
       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
@@ -1135,14 +1394,14 @@
       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
@@ -1156,14 +1415,14 @@
       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
@@ -1176,14 +1435,14 @@
       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
@@ -1206,14 +1465,14 @@
       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
@@ -1277,14 +1536,14 @@
       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
@@ -1320,14 +1579,14 @@
       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
@@ -1339,14 +1598,14 @@
       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
@@ -1358,14 +1617,14 @@
       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
@@ -1377,14 +1636,14 @@
       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
@@ -1392,7 +1651,9 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+    }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__PURE__*/React__default.createElement("path", {
+      d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -1401,16 +1662,20 @@
       ry: "2"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M7 11V7a5 5 0 0 1 10 0v4"
-    })));
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "12",
+      cy: "16",
+      r: "1.5"
+    })))));
   };
-  var MicrophoneIcon = _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
@@ -1436,14 +1701,14 @@
       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
@@ -1455,14 +1720,14 @@
       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
@@ -1476,14 +1741,14 @@
       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
@@ -1495,14 +1760,14 @@
       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
@@ -1515,14 +1780,14 @@
       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
@@ -1534,14 +1799,14 @@
       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
@@ -1553,14 +1818,14 @@
       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
@@ -1572,14 +1837,14 @@
       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
@@ -1595,14 +1860,14 @@
       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
@@ -1618,14 +1883,14 @@
       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
@@ -1637,14 +1902,14 @@
       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
@@ -1656,14 +1921,14 @@
       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
@@ -1671,7 +1936,9 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+    }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__PURE__*/React__default.createElement("path", {
+      d: "M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z"
+    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -1680,16 +1947,20 @@
       ry: "2"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M7 11V7a5 5 0 0 1 9.9-1"
-    })));
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "12",
+      cy: "16",
+      r: "1.5"
+    })))));
   };
-  var WifiIcon = _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
@@ -1701,14 +1972,14 @@
       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
@@ -1724,14 +1995,14 @@
       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
@@ -1743,14 +2014,14 @@
       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
@@ -1763,14 +2034,14 @@
       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
@@ -1782,14 +2053,14 @@
       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
@@ -1811,14 +2082,14 @@
       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
@@ -1832,14 +2103,14 @@
       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
@@ -1851,14 +2122,14 @@
       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
@@ -1876,14 +2147,14 @@
       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
@@ -1901,14 +2172,14 @@
       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
@@ -1943,14 +2214,14 @@
       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
@@ -2005,14 +2276,14 @@
       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
@@ -2026,14 +2297,14 @@
       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
@@ -2062,14 +2333,14 @@
       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
@@ -2093,14 +2364,14 @@
       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
@@ -2125,14 +2396,14 @@
       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
@@ -2153,14 +2424,14 @@
       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
@@ -2177,6 +2448,8 @@
 
   var Icon = {
     __proto__: null,
+    UserIcon: UserIcon,
+    HelpIcon: HelpIcon,
     ChevronIcon: ChevronIcon,
     DragHandleIcon: DragHandleIcon,
     FileIcon: FileIcon,
@@ -2204,6 +2477,7 @@
     CloudIcon: CloudIcon,
     CopyIcon: CopyIcon,
     DustBinIcon: DustBinIcon,
+    DeleteIcon: DeleteIcon,
     EditIcon: EditIcon,
     ErrorIcon: ErrorIcon,
     DownloadIcon: DownloadIcon,
@@ -3164,21 +3438,459 @@
   };
   var Button = ButtonComponent;
 
-  var _excluded$a = ["src", "color", "views", "themeMode"],
-    _excluded2$2 = ["path"];
-  var FileSVG = _ref => {
+  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
+    };
+  };
+
+  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 {
-        src,
-        color,
+      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
-      } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$a);
     var {
-      getColor,
-      themeMode
-    } = appStudio.useTheme();
-    var Colorprops = color ? {
-      fill: getColor(color, {
+      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, {
@@ -3195,7 +3907,7 @@
     var {
         path
       } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2$3);
     return /*#__PURE__*/React__default.createElement(appStudio.Image, Object.assign({
       src: path
     }, props));
@@ -3246,7 +3958,7 @@
     };
   };
 
-  var _excluded$b = ["children", "views"];
+  var _excluded$d = ["children", "views"];
   var HelperText = _ref => {
     var {
         children,
@@ -3254,7 +3966,7 @@
           helperText: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
     return /*#__PURE__*/React__default.createElement(Text, Object.assign({
       size: "xs",
       marginVertical: 0,
@@ -3263,7 +3975,7 @@
     }, views['helperText'], props), children);
   };
 
-  var _excluded$c = ["children", "helperText", "error", "views"];
+  var _excluded$e = ["children", "helperText", "error", "views"];
   var FieldContainer = _ref => {
     var {
         children,
@@ -3271,7 +3983,7 @@
         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"
@@ -3330,7 +4042,7 @@
     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,
@@ -3348,7 +4060,7 @@
           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({
@@ -3369,12 +4081,12 @@
     }, 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,
@@ -3426,7 +4138,7 @@
     }
   };
 
-  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,
@@ -3442,7 +4154,7 @@
         size = 'sm'
         // The fontSize prop for the Element is determined by the 'size' prop passed to LabelView.
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$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.
@@ -3474,7 +4186,7 @@
   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,
@@ -3485,7 +4197,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
     return /*#__PURE__*/React__default.createElement(Label, Object.assign({
       top: 6,
       zIndex: 1000,
@@ -3498,12 +4210,12 @@
     }, 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%'
@@ -3520,10 +4232,10 @@
     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 {
@@ -3534,7 +4246,7 @@
         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.
@@ -3604,7 +4316,7 @@
         isReadOnly = false,
         options = []
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded2$4);
     var handleChange = event => {
       if (onChange) onChange(event);
     };
@@ -3694,7 +4406,7 @@
         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,
@@ -3749,7 +4461,7 @@
         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);
@@ -3994,7 +4706,7 @@
     }
   };
 
-  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));
@@ -4023,7 +4735,7 @@
           label: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
     var handleToggle = event => {
       if (!isReadOnly) {
         setValue(!value);
@@ -4113,7 +4825,7 @@
     // 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,
@@ -4152,7 +4864,7 @@
           field: {}
         }
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
     var isWithLabel = !!(isFocused && label);
     var fieldStyles = Object.assign({
       margin: 0,
@@ -4281,7 +4993,7 @@
     };
   };
 
-  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));
@@ -4324,7 +5036,7 @@
         onBlur = () => {},
         themeMode: elementMode
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
     var {
       getColor,
       themeMode
@@ -4505,7 +5217,7 @@
     '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,
@@ -4532,7 +5244,7 @@
         },
         infoText
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
     var handleHover = () => setIsHovered(!isHovered);
     var handleChange = () => {
       if (!isReadOnly && !isDisabled) {
@@ -6096,11 +6808,11 @@
     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));
@@ -6109,7 +6821,7 @@
     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));
@@ -6212,7 +6924,7 @@
         },
         themeMode: elementMode
       } = _ref5,
-      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$3);
+      props = _objectWithoutPropertiesLoose(_ref5, _excluded3$4);
     var {
       getColor,
       themeMode
@@ -6339,7 +7051,7 @@
     };
   };
 
-  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));
@@ -6372,7 +7084,7 @@
         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);
@@ -6459,8 +7171,8 @@
     }, 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, {
@@ -6470,13 +7182,13 @@
           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,
@@ -6524,7 +7236,7 @@
     };
   };
 
-  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 {
@@ -6549,7 +7261,7 @@
         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 => {
@@ -6660,7 +7372,7 @@
     }))))))))))));
   };
 
-  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 {
@@ -6676,7 +7388,7 @@
         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 (
@@ -6692,7 +7404,7 @@
   // 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: () => {},
@@ -6708,7 +7420,7 @@
         initFocus,
         onChange = () => {}
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
     var formik$1 = formik.useFormikContext();
     React.useEffect(() => {
       onChange(formik$1.values);
@@ -6756,7 +7468,7 @@
     }, /*#__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':
@@ -6795,7 +7507,7 @@
         name,
         type
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
     var focus = useFormFocus();
     var {
       touched,
@@ -6839,13 +7551,13 @@
     } : {});
   };
 
-  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));
@@ -6903,11 +7615,11 @@
    */
   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));
   };
   /**
@@ -6915,8 +7627,8 @@
    */
   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, {
@@ -6926,14 +7638,14 @@
           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,
@@ -6951,14 +7663,14 @@
    */
   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
@@ -6974,98 +7686,654 @@
    */
   var FormikComboBox = ComboBoxComponent$1;
 
-  // Create your store with the initial state and actions.
-  var useMessageStore = /*#__PURE__*/zustand.create(set => ({
-    // initial state
-    visible: false,
-    title: '',
-    subtitle: '',
-    variant: 'info',
-    isClosable: false,
-    views: {},
-    action: () => {},
-    actionText: '',
-    showIcon: false,
-    timeout: 3000,
-    show: function show(variant, title, subtitle, isClosable, views, action, actionText, showIcon, timeout) {
-      if (title === void 0) {
-        title = '';
-      }
-      if (subtitle === void 0) {
-        subtitle = '';
+  // Clamp value between min and max
+  var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+  // Calculate value based on position, track dimensions, min, max, step
+  var calculateValue = (position, trackRect, min, max, step, orientation, stepValues) => {
+    var range = max - min;
+    var percentage;
+    if (orientation === 'horizontal') {
+      var trackLength = trackRect.width;
+      var relativePosition = position - trackRect.left;
+      percentage = clamp(relativePosition / trackLength, 0, 1);
+    } else {
+      // Vertical: top is max, bottom is min (reversed from the provided code)
+      var _trackLength = trackRect.height;
+      var _relativePosition = trackRect.bottom - position; // Y position relative to track bottom
+      percentage = clamp(_relativePosition / _trackLength, 0, 1);
+    }
+    // If stepValues are provided, find the closest value in the array
+    if (stepValues && stepValues.length > 0) {
+      var rawValue = min + percentage * range;
+      // Find the closest value in stepValues
+      var closestValue = stepValues[0];
+      var minDistance = Math.abs(rawValue - closestValue);
+      for (var i = 1; i < stepValues.length; i++) {
+        var distance = Math.abs(rawValue - stepValues[i]);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestValue = stepValues[i];
+        }
       }
-      return set({
-        visible: true,
-        variant,
-        title,
-        subtitle,
-        isClosable,
-        views,
-        action,
-        actionText,
-        showIcon,
-        timeout
-      });
-    },
-    hide: () => set({
-      visible: false
-    })
-  }));
-  var showMessage = (variant, title, subtitle, props) => {
-    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.views, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
+      return closestValue;
+    } else {
+      // Use regular step logic
+      var _rawValue = min + percentage * range;
+      var steppedValue = Math.round(_rawValue / step) * step;
+      // Final clamp to ensure step rounding doesn't exceed bounds
+      return clamp(steppedValue, min, max);
+    }
   };
-  var hideMessage = () => {
-    useMessageStore.getState().hide();
+  var useSliderState = _ref => {
+    var _ref2;
+    var {
+      min = 0,
+      max = 100,
+      step = 1,
+      value: controlledValue = 0,
+      defaultValue,
+      onChange,
+      onDrag,
+      orientation = 'horizontal',
+      isDisabled = false,
+      stepValues
+    } = _ref;
+    var initialValue = clamp((_ref2 = controlledValue != null ? controlledValue : defaultValue) != null ? _ref2 : min, min, max);
+    var [internalValue, setInternalValue] = React.useState(initialValue);
+    var [isDragging, setIsDragging] = React.useState(false);
+    var [isHovered, setIsHovered] = React.useState(false);
+    var trackRef = React.useRef(null);
+    var thumbRef = React.useRef(null);
+    var isControlled = controlledValue !== undefined;
+    var currentValue = isControlled ? controlledValue : internalValue;
+    // Update internal state if controlled value changes
+    React.useEffect(() => {
+      if (isControlled) {
+        setInternalValue(clamp(controlledValue, min, max));
+      }
+    }, [controlledValue, isControlled, min, max]);
+    var updateValue = React.useCallback(newValue => {
+      var clampedValue = clamp(newValue, min, max);
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+      if (onChange && clampedValue !== currentValue) {
+        onChange(clampedValue);
+      }
+      if (isDragging && onDrag) {
+        onDrag(clampedValue);
+      }
+    }, [isControlled, min, max, onChange, currentValue, isDragging, onDrag]);
+    var handleInteraction = React.useCallback(event => {
+      if (isDisabled || !trackRef.current) return;
+      var trackRect = trackRef.current.getBoundingClientRect();
+      var position;
+      if ('touches' in event) {
+        position = orientation === 'horizontal' ? event.touches[0].clientX : event.touches[0].clientY;
+      } else {
+        position = orientation === 'horizontal' ? event.clientX : event.clientY;
+      }
+      var newValue = calculateValue(position, trackRect, min, max, step, orientation, stepValues);
+      updateValue(newValue);
+    }, [min, max, step, orientation, updateValue, isDisabled, stepValues]);
+    var handleMouseDown = React.useCallback(event => {
+      if (isDisabled) return;
+      event.preventDefault(); // Prevent text selection during drag
+      setIsDragging(true);
+      handleInteraction(event); // Update value immediately on click/touch
+      var handleMouseMove = moveEvent => {
+        handleInteraction(moveEvent);
+      };
+      var handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchmove', handleMouseMove);
+        document.removeEventListener('touchend', handleMouseUp);
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchmove', handleMouseMove);
+      document.addEventListener('touchend', handleMouseUp);
+    }, [handleInteraction, isDisabled]);
+    // Allow clicking directly on the track
+    var handleTrackMouseDown = React.useCallback(event => {
+      // Prevent triggering if click is on the thumb itself
+      if (thumbRef.current && thumbRef.current.contains(event.target)) {
+        return;
+      }
+      handleMouseDown(event);
+    }, [handleMouseDown]);
+    var handleKeyDown = React.useCallback(event => {
+      if (isDisabled) return;
+      var newValue = currentValue;
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = currentValue - step;
+          break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = currentValue + step;
+          break;
+        case 'Home':
+          newValue = min;
+          break;
+        case 'End':
+          newValue = max;
+          break;
+        default:
+          return;
+        // Exit if key is not handled
+      }
+      event.preventDefault(); // Prevent page scroll
+      updateValue(newValue);
+    }, [currentValue, min, max, step, updateValue, isDisabled]);
+    var range = max - min;
+    var thumbPositionPercent = range === 0 ? 0 : (currentValue - min) / range * 100;
+    return {
+      currentValue,
+      isDragging,
+      isHovered,
+      setIsHovered,
+      trackRef,
+      thumbRef,
+      handleThumbMouseDown: handleMouseDown,
+      handleTrackMouseDown,
+      handleKeyDown,
+      thumbPositionPercent
+    };
   };
 
-  var Themes$1 = {
-    info: {
-      container: {
-        backgroundColor: 'color.blue.200',
-        border: 'color.blue.400'
-      },
-      icon: {
-        color: 'color.blue.500',
-        name: 'InformationIcon'
-      },
-      content: {
-        color: 'color.blue.500'
-      },
-      close: {
-        color: 'color.blue.500',
-        name: 'CloseIcon'
-      }
+  var SliderSizes$1 = {
+    xs: {
+      height: 4,
+      width: '100%'
     },
-    success: {
-      container: {
-        backgroundColor: 'color.green.200',
-        border: 'color.green.400'
-      },
-      icon: {
-        color: 'color.green.500',
-        name: 'CheckCircleIcon'
-      },
-      content: {
-        color: 'color.green.500'
-      },
-      close: {
-        color: 'color.green.500',
-        name: 'CloseIcon'
-      }
+    sm: {
+      height: 6,
+      width: '100%'
     },
-    error: {
-      container: {
-        backgroundColor: 'color.red.200',
-        border: 'color.red.400'
-      },
-      icon: {
-        color: 'color.red.500',
-        name: 'ErrrorIcon'
-      },
-      content: {
-        color: 'color.red.500'
-      },
-      close: {
+    md: {
+      height: 8,
+      width: '100%'
+    },
+    lg: {
+      height: 10,
+      width: '100%'
+    },
+    xl: {
+      height: 12,
+      width: '100%'
+    }
+  };
+  var ThumbSizes = {
+    xs: {
+      width: 12,
+      height: 12
+    },
+    sm: {
+      width: 16,
+      height: 16
+    },
+    md: {
+      width: 20,
+      height: 20
+    },
+    lg: {
+      width: 24,
+      height: 24
+    },
+    xl: {
+      width: 28,
+      height: 28
+    }
+  };
+  var SliderShapes = {
+    sharp: 0,
+    rounded: 4,
+    pillShaped: 24
+  };
+  var SliderVariants = {
+    default: {
+      backgroundColor: 'color.blueGray.200'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'color.blueGray.300'
+    }
+  };
+  // Maps Size enum to track height/width and thumb size for the new implementation
+  var EnhancedSliderSizes = {
+    xs: {
+      trackCrossAxisSize: 4,
+      thumbSize: 12
+    },
+    sm: {
+      trackCrossAxisSize: 6,
+      thumbSize: 16
+    },
+    md: {
+      trackCrossAxisSize: 8,
+      thumbSize: 20
+    },
+    lg: {
+      trackCrossAxisSize: 10,
+      thumbSize: 24
+    },
+    xl: {
+      trackCrossAxisSize: 12,
+      thumbSize: 28
+    }
+  };
+  // Basic styles for horizontal and vertical orientation
+  var OrientationStyles = {
+    horizontal: {
+      width: '100%',
+      minWidth: '120px',
+      height: 'auto',
+      flexDirection: 'row',
+      paddingVertical: 8
+    },
+    vertical: {
+      height: '100%',
+      minHeight: '120px',
+      width: 'auto',
+      flexDirection: 'column-reverse',
+      paddingHorizontal: 8
+    }
+  };
+
+  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 {
+        min = 0,
+        max = 100,
+        step = 1,
+        currentValue,
+        stepValues,
+        shape = 'rounded',
+        size = 'md',
+        variant = 'default',
+        orientation = 'horizontal',
+        isDisabled = false,
+        showValue = false,
+        showTooltip = false,
+        colorScheme = 'theme.primary',
+        label,
+        helperText,
+        themeMode: elementMode,
+        shadow = {},
+        isDragging,
+        isHovered,
+        setIsHovered,
+        trackRef,
+        thumbRef,
+        handleThumbMouseDown,
+        handleTrackMouseDown,
+        handleKeyDown,
+        thumbPositionPercent,
+        ariaLabel = 'Slider',
+        views = {
+          container: {},
+          track: {},
+          progress: {},
+          filledTrack: {},
+          thumb: {},
+          label: {},
+          valueLabel: {},
+          stepMarks: {},
+          tooltip: {}
+        }
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var themeColor = getColor(colorScheme, elementMode || themeMode);
+    var disabledColor = getColor('theme.disabled', elementMode || themeMode);
+    var trackColor = getColor(SliderVariants[variant].backgroundColor, elementMode || themeMode);
+    var isVertical = orientation === 'vertical';
+    var {
+      trackCrossAxisSize,
+      thumbSize
+    } = EnhancedSliderSizes[size] || {
+      trackCrossAxisSize: SliderSizes$1[size].height,
+      thumbSize: ThumbSizes[size].width || 16
+    };
+    // For backward compatibility with the old implementation
+    var legacyView = /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+      width: "100%",
+      gap: 8
+    }, views.container, props), label && (/*#__PURE__*/React__default.createElement(Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      fontWeight: 500
+    }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      color: "color.blueGray.500"
+    }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: trackRef,
+      position: "relative",
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      opacity: isDisabled ? 0.6 : 1,
+      onMouseDown: handleTrackMouseDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    }, SliderSizes$1[size], {
+      borderRadius: SliderShapes[shape],
+      backgroundColor: trackColor
+    }, SliderVariants[variant], shadow, views.track), stepValues && stepValues.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, stepValues.map(stepValue => {
+      var stepPercentage = (stepValue - min) / (max - min) * 100;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: stepValue,
+        position: "absolute",
+        top: "50%",
+        left: stepPercentage + "%",
+        transform: "translate(-50%, -50%)",
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        backgroundColor: isDisabled ? disabledColor : themeColor,
+        zIndex: 1
+      }, views.stepMarks));
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: thumbPositionPercent + "%",
+      backgroundColor: isDisabled ? disabledColor : themeColor,
+      borderRadius: SliderShapes[shape],
+      transition: "width 0.1s ease-in-out"
+    }, views.progress, views.filledTrack)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: thumbRef,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": currentValue,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled,
+      "aria-label": ariaLabel,
+      position: "absolute",
+      top: "50%",
+      left: thumbPositionPercent + "%",
+      borderRadius: "50%",
+      backgroundColor: "white",
+      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+      border: "2px solid " + (isDisabled ? disabledColor : themeColor),
+      transition: isDragging ? 'none' : 'transform 0.1s ease-in-out',
+      transform: isHovered ? 'translate(-50%, -50%) scale(1.1)' : 'translate(-50%, -50%)',
+      zIndex: 2,
+      onMouseDown: handleThumbMouseDown,
+      onTouchStart: handleThumbMouseDown,
+      onKeyDown: handleKeyDown
+    }, ThumbSizes[size], views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      bottom: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      marginBottom: 8,
+      padding: "4px 8px",
+      backgroundColor: "color.black",
+      color: "color.white",
+      borderRadius: 4,
+      fontSize: 12,
+      whiteSpace: "nowrap",
+      zIndex: 3
+    }, views.tooltip), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, (_views$tooltip = views.tooltip) == null ? void 0 : _views$tooltip.text), currentValue == null ? void 0 : currentValue.toFixed(step < 1 ? 1 : 0)))))), helperText && /*#__PURE__*/React__default.createElement(HelperText, null, helperText));
+    // Enhanced view with vertical support and other features
+    var enhancedView = /*#__PURE__*/React__default.createElement(Center
+    // Use Center to easily manage orientation layout
+    , Object.assign({}, OrientationStyles[orientation], {
+      position: "relative" // Needed for absolute positioning of thumb/tooltip
+      ,
+      onMouseEnter: () => !isDisabled && setIsHovered(true),
+      onMouseLeave: () => !isDisabled && setIsHovered(false)
+    }, props, views == null ? void 0 : views.container), label && (/*#__PURE__*/React__default.createElement(Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 8,
+      width: "100%"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      fontWeight: 500
+    }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      color: "color.blueGray.500"
+    }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: trackRef,
+      position: "relative",
+      borderRadius: trackCrossAxisSize / 2,
+      backgroundColor: isDisabled ? disabledColor : trackColor,
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      width: isVertical ? trackCrossAxisSize + "px" : '100%',
+      height: isVertical ? '100%' : trackCrossAxisSize + "px",
+      onMouseDown: handleTrackMouseDown,
+      onTouchStart: handleTrackMouseDown
+    }, views == null ? void 0 : views.track), stepValues && stepValues.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, stepValues.map(stepValue => {
+      var stepPercentage = (stepValue - min) / (max - min) * 100;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: stepValue,
+        position: "absolute",
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        backgroundColor: isDisabled ? disabledColor : themeColor,
+        zIndex: 1
+      }, isVertical ? {
+        bottom: stepPercentage + "%",
+        left: '50%',
+        transform: 'translate(-50%, 50%)'
+      } : {
+        left: stepPercentage + "%",
+        top: '50%',
+        transform: 'translate(-50%, -50%)'
+      }, views.stepMarks));
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      borderRadius: trackCrossAxisSize / 2,
+      backgroundColor: isDisabled ? disabledColor : themeColor
+    }, isVertical ? {
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: thumbPositionPercent + "%"
+    } : {
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: thumbPositionPercent + "%"
+    }, views == null ? void 0 : views.filledTrack, views == null ? void 0 : views.progress)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: thumbRef,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": currentValue,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled,
+      "aria-label": ariaLabel,
+      position: "absolute",
+      width: thumbSize + "px",
+      height: thumbSize + "px",
+      borderRadius: "50%",
+      backgroundColor: isDisabled ? disabledColor : themeColor,
+      border: "2px solid " + getColor('color.white'),
+      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+      cursor: isDisabled ? 'not-allowed' : 'grab',
+      transform: isVertical ? 'translateX(-50%)' : 'translateY(-50%)',
+      zIndex: 2,
+      transition: isDragging ? 'none' : 'left 0.1s, bottom 0.1s'
+    }, isVertical ? {
+      left: '50%',
+      bottom: thumbPositionPercent + "%"
+    } : {
+      top: '50%',
+      left: thumbPositionPercent + "%"
+    }, {
+      onMouseDown: handleThumbMouseDown,
+      onTouchStart: handleThumbMouseDown,
+      onKeyDown: handleKeyDown
+    }, views == null ? void 0 : views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      padding: "4px 8px",
+      backgroundColor: getColor('color.black'),
+      color: getColor('color.white'),
+      borderRadius: "4px",
+      fontSize: "12px",
+      whiteSpace: "nowrap",
+      zIndex: 3
+    }, isVertical ? {
+      left: '100%',
+      marginLeft: '8px',
+      bottom: '0',
+      transform: 'translateY(50%)'
+    } : {
+      bottom: '100%',
+      left: '50%',
+      marginBottom: '8px',
+      transform: 'translateX(-50%)'
+    }, views == null ? void 0 : views.tooltip), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null || (_views$tooltip2 = views.tooltip) == null ? void 0 : _views$tooltip2.text), currentValue == null ? void 0 : currentValue.toFixed(step < 1 ? 1 : 0)))))), helperText && /*#__PURE__*/React__default.createElement(HelperText, {
+      marginTop: 8
+    }, helperText));
+    // Use the enhanced view if orientation is vertical or showTooltip is true
+    // Otherwise use the legacy view for backward compatibility
+    return isVertical || showTooltip ? enhancedView : legacyView;
+  };
+
+  var SliderComponent = props => {
+    // 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$1;
+
+  // Create your store with the initial state and actions.
+  var useMessageStore = /*#__PURE__*/zustand.create(set => ({
+    // initial state
+    visible: false,
+    title: '',
+    subtitle: '',
+    variant: 'info',
+    isClosable: false,
+    views: {},
+    action: () => {},
+    actionText: '',
+    showIcon: false,
+    timeout: 3000,
+    show: function show(variant, title, subtitle, isClosable, views, action, actionText, showIcon, timeout) {
+      if (title === void 0) {
+        title = '';
+      }
+      if (subtitle === void 0) {
+        subtitle = '';
+      }
+      return set({
+        visible: true,
+        variant,
+        title,
+        subtitle,
+        isClosable,
+        views,
+        action,
+        actionText,
+        showIcon,
+        timeout
+      });
+    },
+    hide: () => set({
+      visible: false
+    })
+  }));
+  var showMessage = (variant, title, subtitle, props) => {
+    useMessageStore.getState().show(variant, title, subtitle, props == null ? void 0 : props.isClosable, props == null ? void 0 : props.views, props == null ? void 0 : props.action, props == null ? void 0 : props.actionText, props == null ? void 0 : props.showIcon, props == null ? void 0 : props.timeout);
+  };
+  var hideMessage = () => {
+    useMessageStore.getState().hide();
+  };
+
+  var Themes$1 = {
+    info: {
+      container: {
+        backgroundColor: 'color.blue.200',
+        border: 'color.blue.400'
+      },
+      icon: {
+        color: 'color.blue.500',
+        name: 'InformationIcon'
+      },
+      content: {
+        color: 'color.blue.500'
+      },
+      close: {
+        color: 'color.blue.500',
+        name: 'CloseIcon'
+      }
+    },
+    success: {
+      container: {
+        backgroundColor: 'color.green.200',
+        border: 'color.green.400'
+      },
+      icon: {
+        color: 'color.green.500',
+        name: 'CheckCircleIcon'
+      },
+      content: {
+        color: 'color.green.500'
+      },
+      close: {
+        color: 'color.green.500',
+        name: 'CloseIcon'
+      }
+    },
+    error: {
+      container: {
+        backgroundColor: 'color.red.200',
+        border: 'color.red.400'
+      },
+      icon: {
+        color: 'color.red.500',
+        name: 'ErrrorIcon'
+      },
+      content: {
+        color: 'color.red.500'
+      },
+      close: {
         color: 'color.red.500',
         name: 'CloseIcon'
       }
@@ -7506,7 +8774,7 @@
     }, views == null ? void 0 : views.view)));
   };
 
-  var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
+  var _excluded$B = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
   var Uploader = _ref => {
     var {
         accept = '*/*',
@@ -7518,7 +8786,7 @@
         isLoading = false,
         progress = 0
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     var {
       previewUrl,
       thumbnailUrl,
@@ -7655,11 +8923,11 @@
     xl: 28
   };
 
-  var _excluded$z = ["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,
@@ -7670,7 +8938,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -7704,7 +8972,7 @@
         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)'
     } : {
@@ -7736,7 +9004,7 @@
         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,
@@ -7761,7 +9029,7 @@
         children,
         views
       } = _ref4,
-      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$3);
+      props = _objectWithoutPropertiesLoose(_ref4, _excluded4$4);
     var defaultBorder = {
       borderBottomWidth: 2,
       borderTopWidth: 2,
@@ -7778,7 +9046,7 @@
         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",
@@ -7840,33 +9108,371 @@
   Modal.Footer = ModalFooter;
   Modal.Layout = ModalLayout;
 
-  var defaultStyles = {};
-  // Create a context that includes both styles and the onClick function
-  var TableContext = /*#__PURE__*/React.createContext({
-    views: defaultStyles,
-    onRowClick: () => {}
-  });
-  var TableProvider = _ref => {
-    var {
-      children,
-      views = defaultStyles,
-      onRowClick
-    } = _ref;
-    return (
-      /*#__PURE__*/
-      // Pass both styles and onClick to the context
-      React__default.createElement(TableContext.Provider, {
-        value: {
-          views,
-          onRowClick
+  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];
         }
-      }, children)
-    );
+      });
+    };
+    var isItemExpanded = itemId => {
+      return expandedItemIds.includes(itemId);
+    };
+    return {
+      activeItemId,
+      setActiveItemId,
+      expandedItemIds,
+      toggleExpandedItem,
+      isItemExpanded
+    };
   };
-  // Custom hook to consume the context and get the styles and onClick handler
-  var useTableContext = () => React.useContext(TableContext);
 
-  var TableContainer = props => {
+  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({
+    views: defaultStyles,
+    onRowClick: () => {}
+  });
+  var TableProvider = _ref => {
+    var {
+      children,
+      views = defaultStyles,
+      onRowClick
+    } = _ref;
+    return (
+      /*#__PURE__*/
+      // Pass both styles and onClick to the context
+      React__default.createElement(TableContext.Provider, {
+        value: {
+          views,
+          onRowClick
+        }
+      }, children)
+    );
+  };
+  // Custom hook to consume the context and get the styles and onClick handler
+  var useTableContext = () => React.useContext(TableContext);
+
+  var TableContainer = props => {
     var {
       views
     } = useTableContext();
@@ -8149,7 +9755,7 @@
     };
   };
 
-  var _excluded$A = ["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,
@@ -8163,7 +9769,7 @@
         onToggle,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
     var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var toggleVariants = {
@@ -8206,7 +9812,7 @@
     }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$B = ["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 {
@@ -8218,7 +9824,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$F);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -8458,6 +10064,552 @@
   };
   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 {
+      isOpen,
+      setIsOpen
+    };
+  };
+
+  var ContentPositions = {
+    top: align => Object.assign({
+      position: 'absolute',
+      bottom: '100%',
+      marginBottom: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    right: align => Object.assign({
+      position: 'absolute',
+      left: '100%',
+      marginLeft: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    }),
+    bottom: align => Object.assign({
+      position: 'absolute',
+      top: '100%',
+      marginTop: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    left: align => Object.assign({
+      position: 'absolute',
+      right: '100%',
+      marginRight: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    })
+  };
+
+  var _excluded$I = ["children", "views"],
+    _excluded2$a = ["children", "views", "side", "align"];
+  // Create context for the HoverCard
+  var HoverCardContext = /*#__PURE__*/React.createContext({
+    isOpen: false,
+    setIsOpen: () => {}
+  });
+  var HoverCardProvider = _ref => {
+    var {
+      children,
+      value
+    } = _ref;
+    return /*#__PURE__*/React__default.createElement(HoverCardContext.Provider, {
+      value: value
+    }, children);
+  };
+  var useHoverCardContext = () => {
+    var context = React.useContext(HoverCardContext);
+    if (!context) {
+      throw new Error('useHoverCardContext must be used within a HoverCardProvider');
+    }
+    return context;
+  };
+  var HoverCardTrigger = _ref2 => {
+    var {
+        children,
+        views
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$I);
+    var {
+      setIsOpen
+    } = useHoverCardContext();
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "relative",
+      display: "inline-block",
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false)
+    }, views == null ? void 0 : views.container, props), children);
+  };
+  var HoverCardContent = _ref3 => {
+    var {
+        children,
+        views,
+        side = 'bottom',
+        align = 'center'
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$a);
+    var {
+      isOpen
+    } = useHoverCardContext();
+    if (!isOpen) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      backgroundColor: "white",
+      borderRadius: "4px",
+      boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
+      padding: "12px",
+      minWidth: "200px",
+      maxWidth: "300px",
+      zIndex: 1000
+    }, ContentPositions[side](align), views == null ? void 0 : views.container, props), children);
+  };
+
+  var _excluded$J = ["children", "views"];
+  /**
+   * HoverCard component displays floating content when hovering over a trigger element.
+   */
+  var HoverCardComponent = _ref => {
+    var {
+        children,
+        views
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$J);
+    var {
+      isOpen,
+      setIsOpen
+    } = useHoverCardState();
+    return /*#__PURE__*/React__default.createElement(HoverCardProvider, {
+      value: {
+        isOpen,
+        setIsOpen
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "relative",
+      display: "inline-block"
+    }, views == null ? void 0 : views.container, props), children));
+  };
+  var HoverCard = HoverCardComponent;
+  HoverCard.Trigger = HoverCardTrigger;
+  HoverCard.Content = HoverCardContent;
+
+  exports.Accordion = Accordion;
   exports.Alert = Alert;
   exports.ArrowIcon = ArrowIcon;
   exports.AspectRatio = AspectRatio;
@@ -8480,14 +10632,17 @@
   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;
@@ -8504,13 +10659,16 @@
   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;
+  exports.HoverCard = HoverCard;
   exports.Icon = Icon;
   exports.ImageIcon = ImageIcon;
   exports.InfoIcon = InfoIcon;
@@ -8531,6 +10689,7 @@
   exports.MinusIcon = MinusIcon;
   exports.Modal = Modal;
   exports.MoonIcon = MoonIcon;
+  exports.NavigationMenu = NavigationMenu;
   exports.NotificationIcon = NotificationIcon;
   exports.OpenEyeIcon = OpenEyeIcon;
   exports.PanelIcon = PanelIcon;
@@ -8549,6 +10708,7 @@
   exports.SettingsIcon = SettingsIcon;
   exports.ShapeIcon = ShapeIcon;
   exports.ShareIcon = ShareIcon;
+  exports.Slider = Slider;
   exports.SliderIcon = SliderIcon;
   exports.SliderVerticalIcon = SliderVerticalIcon;
   exports.SpinnerIcon = SpinnerIcon;
@@ -8572,6 +10732,7 @@
   exports.UnlockIcon = UnlockIcon;
   exports.UploadIcon = UploadIcon;
   exports.Uploader = Uploader;
+  exports.UserIcon = UserIcon;
   exports.Vertical = Vertical;
   exports.VerticalBase = VerticalBase;
   exports.VideoIcon = VideoIcon;