@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/DropdownMenu/DropdownMenu.stories.js

@@ -1,476 +1,475 @@
-import React from "react";
+import react from "react";
 import { DropdownMenu } from "./DropdownMenu.js";
 import { Button } from "../Button/index.js";
-import { ReactComponent as Cloud } from "@webiny/icons/cloud.svg";
-import { ReactComponent as LogOut } from "@webiny/icons/logout.svg";
-import { ReactComponent as LifeBuoy } from "@webiny/icons/safety_check.svg";
-import { ReactComponent as CreditCard } from "@webiny/icons/credit_score.svg";
-import { ReactComponent as Plus } from "@webiny/icons/add.svg";
-import { ReactComponent as PlusCircle } from "@webiny/icons/add_circle.svg";
-import { ReactComponent as Settings } from "@webiny/icons/settings.svg";
-import { ReactComponent as Users } from "@webiny/icons/people.svg";
-import { ReactComponent as UserPlus } from "@webiny/icons/person_add.svg";
-import { ReactComponent as User } from "@webiny/icons/person.svg";
-import { ReactComponent as Keyboard } from "@webiny/icons/keyboard.svg";
-import { ReactComponent as Mail } from "@webiny/icons/mail.svg";
-import { ReactComponent as MessageSquare } from "@webiny/icons/chat_bubble.svg";
-import { ReactComponent as LinkIcon } from "@webiny/icons/link.svg";
+import { ReactComponent } from "@webiny/icons/cloud.svg";
+import { ReactComponent as logout_svg_ReactComponent } from "@webiny/icons/logout.svg";
+import { ReactComponent as safety_check_svg_ReactComponent } from "@webiny/icons/safety_check.svg";
+import { ReactComponent as credit_score_svg_ReactComponent } from "@webiny/icons/credit_score.svg";
+import { ReactComponent as add_svg_ReactComponent } from "@webiny/icons/add.svg";
+import { ReactComponent as add_circle_svg_ReactComponent } from "@webiny/icons/add_circle.svg";
+import { ReactComponent as settings_svg_ReactComponent } from "@webiny/icons/settings.svg";
+import { ReactComponent as people_svg_ReactComponent } from "@webiny/icons/people.svg";
+import { ReactComponent as person_add_svg_ReactComponent } from "@webiny/icons/person_add.svg";
+import { ReactComponent as person_svg_ReactComponent } from "@webiny/icons/person.svg";
+import { ReactComponent as keyboard_svg_ReactComponent } from "@webiny/icons/keyboard.svg";
+import { ReactComponent as mail_svg_ReactComponent } from "@webiny/icons/mail.svg";
+import { ReactComponent as chat_bubble_svg_ReactComponent } from "@webiny/icons/chat_bubble.svg";
+import { ReactComponent as link_svg_ReactComponent } from "@webiny/icons/link.svg";
 import { Text } from "../Text/index.js";
 const meta = {
-  title: "Components/Dropdown Menu",
-  component: DropdownMenu,
-  argTypes: {}
+    title: "Components/Dropdown Menu",
+    component: DropdownMenu,
+    argTypes: {}
 };
-export default meta;
-const {
-  Label,
-  Separator,
-  Group,
-  Item,
-  Link,
-  CheckboxItem
-} = DropdownMenu;
-export const Default = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
-      text: "My Account"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Profile",
-        element: /*#__PURE__*/React.createElement(User, null)
-      }),
-      text: "Profile"
-    }), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(CreditCard, null),
-        label: "Billing"
-      }),
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Settings, null),
-        label: "Settings"
-      }),
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Keyboard, null),
-        label: "Keyboard shortcuts"
-      }),
-      text: "Keyboard shortcuts"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Users, null),
-        label: "Team"
-      }),
-      text: "Team"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(UserPlus, null),
-        label: "Invite users"
-      }),
-      text: "Invite users"
-    }, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Mail, null),
-        label: "Email"
-      }),
-      text: "Email"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(MessageSquare, null),
-        label: "Message"
-      }),
-      text: "Message"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "More...",
-        element: /*#__PURE__*/React.createElement(PlusCircle, null)
-      }),
-      text: "More..."
-    })), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "New Team",
-        element: /*#__PURE__*/React.createElement(Plus, null)
-      }),
-      text: "New Team"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Support",
-        element: /*#__PURE__*/React.createElement(LifeBuoy, null)
-      }),
-      text: "Support"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "API",
-        element: /*#__PURE__*/React.createElement(Cloud, null)
-      }),
-      text: "API",
-      disabled: true
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Log out",
-        element: /*#__PURE__*/React.createElement(LogOut, null)
-      }),
-      text: "Log out"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Label, {
-      text: "Links"
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 1",
-      to: "#link-1",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 1",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 2 (target: _blank)",
-      to: "#link-2",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 2",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      }),
-      target: "_blank"
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 3",
-      to: "#link-3",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 3",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }))
-  },
-  argTypes: {}
+const DropdownMenu_stories = meta;
+const { Label: Label, Separator: Separator, Group: Group, Item: Item, Link: Link, CheckboxItem: CheckboxItem } = DropdownMenu;
+const Default = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Label, {
+            text: "My Account"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Profile",
+                element: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null)
+            }),
+            text: "Profile"
+        }), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(credit_score_svg_ReactComponent, null),
+                label: "Billing"
+            }),
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+                label: "Settings"
+            }),
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(keyboard_svg_ReactComponent, null),
+                label: "Keyboard shortcuts"
+            }),
+            text: "Keyboard shortcuts"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(people_svg_ReactComponent, null),
+                label: "Team"
+            }),
+            text: "Team"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(person_add_svg_ReactComponent, null),
+                label: "Invite users"
+            }),
+            text: "Invite users"
+        }, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(mail_svg_ReactComponent, null),
+                label: "Email"
+            }),
+            text: "Email"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(chat_bubble_svg_ReactComponent, null),
+                label: "Message"
+            }),
+            text: "Message"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "More...",
+                element: /*#__PURE__*/ react.createElement(add_circle_svg_ReactComponent, null)
+            }),
+            text: "More..."
+        })), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "New Team",
+                element: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null)
+            }),
+            text: "New Team"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Support",
+                element: /*#__PURE__*/ react.createElement(safety_check_svg_ReactComponent, null)
+            }),
+            text: "Support"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "API",
+                element: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            }),
+            text: "API",
+            disabled: true
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Log out",
+                element: /*#__PURE__*/ react.createElement(logout_svg_ReactComponent, null)
+            }),
+            text: "Log out"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Label, {
+            text: "Links"
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 1",
+            to: "#link-1",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 1",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            })
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 2 (target: _blank)",
+            to: "#link-2",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 2",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            }),
+            target: "_blank"
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 3",
+            to: "#link-3",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 3",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            })
+        }))
+    },
+    argTypes: {}
 };
-export const SimpleMenuWithIcons = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Billing",
-        element: /*#__PURE__*/React.createElement(CreditCard, null)
-      }),
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Settings",
-        element: /*#__PURE__*/React.createElement(Settings, null)
-      }),
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Keyboard shortcuts",
-        element: /*#__PURE__*/React.createElement(Keyboard, null)
-      }),
-      text: "Keyboard shortcuts"
-    }))
-  },
-  argTypes: {}
+const SimpleMenuWithIcons = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Billing",
+                element: /*#__PURE__*/ react.createElement(credit_score_svg_ReactComponent, null)
+            }),
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Settings",
+                element: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null)
+            }),
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Keyboard shortcuts",
+                element: /*#__PURE__*/ react.createElement(keyboard_svg_ReactComponent, null)
+            }),
+            text: "Keyboard shortcuts"
+        }))
+    },
+    argTypes: {}
 };
-export const WithSubMenus = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
-      text: "My Account"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(User, null),
-        label: "Profile"
-      }),
-      text: "Profile"
-    }), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Billing",
-        element: /*#__PURE__*/React.createElement(CreditCard, null)
-      }),
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Settings",
-        element: /*#__PURE__*/React.createElement(Settings, null)
-      }),
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Keyboard shortcuts",
-        element: /*#__PURE__*/React.createElement(Keyboard, null)
-      }),
-      text: "Keyboard shortcuts"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Team",
-        element: /*#__PURE__*/React.createElement(Users, null)
-      }),
-      text: "Team"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Invite user",
-        element: /*#__PURE__*/React.createElement(UserPlus, null)
-      }),
-      text: "Invite users"
-    }, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Email",
-        element: /*#__PURE__*/React.createElement(Mail, null)
-      }),
-      text: "Email"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Message",
-        element: /*#__PURE__*/React.createElement(MessageSquare, null)
-      }),
-      text: "Message"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "More...",
-        element: /*#__PURE__*/React.createElement(PlusCircle, null)
-      }),
-      text: "More..."
-    }, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Email",
-        element: /*#__PURE__*/React.createElement(Mail, null)
-      }),
-      text: "Email"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Message",
-        element: /*#__PURE__*/React.createElement(MessageSquare, null)
-      }),
-      text: "Message"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "More...",
-        element: /*#__PURE__*/React.createElement(PlusCircle, null)
-      }),
-      text: "More..."
-    }))), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "New Team",
-        element: /*#__PURE__*/React.createElement(Plus, null)
-      }),
-      text: "New Team"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Support",
-        element: /*#__PURE__*/React.createElement(LifeBuoy, null)
-      }),
-      text: "Support"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "API",
-        element: /*#__PURE__*/React.createElement(Cloud, null)
-      }),
-      text: "API",
-      disabled: true
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Log out",
-        element: /*#__PURE__*/React.createElement(LogOut, null)
-      }),
-      text: "Log out"
-    }))
-  },
-  argTypes: {}
+const WithSubMenus = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Label, {
+            text: "My Account"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null),
+                label: "Profile"
+            }),
+            text: "Profile"
+        }), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Billing",
+                element: /*#__PURE__*/ react.createElement(credit_score_svg_ReactComponent, null)
+            }),
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Settings",
+                element: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null)
+            }),
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Keyboard shortcuts",
+                element: /*#__PURE__*/ react.createElement(keyboard_svg_ReactComponent, null)
+            }),
+            text: "Keyboard shortcuts"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Team",
+                element: /*#__PURE__*/ react.createElement(people_svg_ReactComponent, null)
+            }),
+            text: "Team"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Invite user",
+                element: /*#__PURE__*/ react.createElement(person_add_svg_ReactComponent, null)
+            }),
+            text: "Invite users"
+        }, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Email",
+                element: /*#__PURE__*/ react.createElement(mail_svg_ReactComponent, null)
+            }),
+            text: "Email"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Message",
+                element: /*#__PURE__*/ react.createElement(chat_bubble_svg_ReactComponent, null)
+            }),
+            text: "Message"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "More...",
+                element: /*#__PURE__*/ react.createElement(add_circle_svg_ReactComponent, null)
+            }),
+            text: "More..."
+        }, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Email",
+                element: /*#__PURE__*/ react.createElement(mail_svg_ReactComponent, null)
+            }),
+            text: "Email"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Message",
+                element: /*#__PURE__*/ react.createElement(chat_bubble_svg_ReactComponent, null)
+            }),
+            text: "Message"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "More...",
+                element: /*#__PURE__*/ react.createElement(add_circle_svg_ReactComponent, null)
+            }),
+            text: "More..."
+        }))), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "New Team",
+                element: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null)
+            }),
+            text: "New Team"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Support",
+                element: /*#__PURE__*/ react.createElement(safety_check_svg_ReactComponent, null)
+            }),
+            text: "Support"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "API",
+                element: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            }),
+            text: "API",
+            disabled: true
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Log out",
+                element: /*#__PURE__*/ react.createElement(logout_svg_ReactComponent, null)
+            }),
+            text: "Log out"
+        }))
+    },
+    argTypes: {}
 };
-const TARGET_LEVELS = [{
-  id: "viewer",
-  label: "Viewer",
-  description: "Can view content, but not modify it"
-}, {
-  id: "editor",
-  label: "Editor",
-  description: "Can view and modify content"
-}, {
-  id: "owner",
-  label: "Owner",
-  description: "Can edit and manage content permissions"
-}];
-export const WithCheckboxItems = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, TARGET_LEVELS.map(level => /*#__PURE__*/React.createElement(CheckboxItem, {
-      key: level.id,
-      checked: level.id === "viewer",
-      text: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
-        as: "div"
-      }, level.label), /*#__PURE__*/React.createElement(Text, {
-        as: "div",
-        size: "sm",
-        className: "text-neutral-strong"
-      }, level.description)),
-      onClick: () => {
-        console.log("Selected level:", level.id);
-      }
-    })), /*#__PURE__*/React.createElement(DropdownMenu.Separator, null), /*#__PURE__*/React.createElement(DropdownMenu.Item, {
-      text: "Remove access"
-    }))
-  },
-  argTypes: {}
+const TARGET_LEVELS = [
+    {
+        id: "viewer",
+        label: "Viewer",
+        description: "Can view content, but not modify it"
+    },
+    {
+        id: "editor",
+        label: "Editor",
+        description: "Can view and modify content"
+    },
+    {
+        id: "owner",
+        label: "Owner",
+        description: "Can edit and manage content permissions"
+    }
+];
+const WithCheckboxItems = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, TARGET_LEVELS.map((level)=>/*#__PURE__*/ react.createElement(CheckboxItem, {
+                key: level.id,
+                checked: "viewer" === level.id,
+                text: /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Text, {
+                    as: "div"
+                }, level.label), /*#__PURE__*/ react.createElement(Text, {
+                    as: "div",
+                    size: "sm",
+                    className: "text-neutral-strong"
+                }, level.description)),
+                onClick: ()=>{
+                    console.log("Selected level:", level.id);
+                }
+            })), /*#__PURE__*/ react.createElement(DropdownMenu.Separator, null), /*#__PURE__*/ react.createElement(DropdownMenu.Item, {
+            text: "Remove access"
+        }))
+    },
+    argTypes: {}
 };
-export const WithOnOpenChange = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    onOpenChange: opened => {
-      console.log(`Menu is ${opened ? "opened" : "closed"}.`);
+const WithOnOpenChange = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        onOpenChange: (opened)=>{
+            console.log(`Menu is ${opened ? "opened" : "closed"}.`);
+        },
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(credit_score_svg_ReactComponent, null),
+                label: "Billing"
+            }),
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+                label: "Settings"
+            }),
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(keyboard_svg_ReactComponent, null),
+                label: "Keyboard shortcuts"
+            }),
+            text: "Keyboard shortcuts"
+        }))
     },
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(CreditCard, null),
-        label: "Billing"
-      }),
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Settings, null),
-        label: "Settings"
-      }),
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Keyboard, null),
-        label: "Keyboard shortcuts"
-      }),
-      text: "Keyboard shortcuts"
-    }))
-  },
-  argTypes: {}
+    argTypes: {}
 };
-export const Documentation = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      variant: "primary",
-      text: "Open"
-    }),
-    children: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, {
-      text: "My Account"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Profile",
-        element: /*#__PURE__*/React.createElement(User, null)
-      }),
-      text: "Profile"
-    }), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(CreditCard, null),
-        label: "Billing"
-      }),
-      text: "Billing"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Settings, null),
-        label: "Settings"
-      }),
-      text: "Settings"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Keyboard, null),
-        label: "Keyboard shortcuts"
-      }),
-      text: "Keyboard shortcuts"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Users, null),
-        label: "Team"
-      }),
-      text: "Team"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(UserPlus, null),
-        label: "Invite users"
-      }),
-      text: "Invite users"
-    }, /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(Mail, null),
-        label: "Email"
-      }),
-      text: "Email"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        element: /*#__PURE__*/React.createElement(MessageSquare, null),
-        label: "Message"
-      }),
-      text: "Message"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "More...",
-        element: /*#__PURE__*/React.createElement(PlusCircle, null)
-      }),
-      text: "More..."
-    })), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "New Team",
-        element: /*#__PURE__*/React.createElement(Plus, null)
-      }),
-      text: "New Team"
-    })), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Support",
-        element: /*#__PURE__*/React.createElement(LifeBuoy, null)
-      }),
-      text: "Support"
-    }), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "API",
-        element: /*#__PURE__*/React.createElement(Cloud, null)
-      }),
-      text: "API",
-      disabled: true
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Item, {
-      icon: /*#__PURE__*/React.createElement(Item.Icon, {
-        label: "Log out",
-        element: /*#__PURE__*/React.createElement(LogOut, null)
-      }),
-      text: "Log out"
-    }), /*#__PURE__*/React.createElement(Separator, null), /*#__PURE__*/React.createElement(Label, {
-      text: "Links"
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 1",
-      to: "#link-1",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 1",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 2",
-      to: "#link-2",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 2",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }), /*#__PURE__*/React.createElement(Link, {
-      text: "Link 3",
-      to: "#link-3",
-      icon: /*#__PURE__*/React.createElement(Link.Icon, {
-        label: "Link 3",
-        element: /*#__PURE__*/React.createElement(LinkIcon, null)
-      })
-    }))
-  },
-  argTypes: {
-    trigger: {
-      description: "The trigger element that opens the menu. Please refer to the example code for details."
+const Documentation = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            variant: "primary",
+            text: "Open"
+        }),
+        children: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Label, {
+            text: "My Account"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Profile",
+                element: /*#__PURE__*/ react.createElement(person_svg_ReactComponent, null)
+            }),
+            text: "Profile"
+        }), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(credit_score_svg_ReactComponent, null),
+                label: "Billing"
+            }),
+            text: "Billing"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(settings_svg_ReactComponent, null),
+                label: "Settings"
+            }),
+            text: "Settings"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(keyboard_svg_ReactComponent, null),
+                label: "Keyboard shortcuts"
+            }),
+            text: "Keyboard shortcuts"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Group, null, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(people_svg_ReactComponent, null),
+                label: "Team"
+            }),
+            text: "Team"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(person_add_svg_ReactComponent, null),
+                label: "Invite users"
+            }),
+            text: "Invite users"
+        }, /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(mail_svg_ReactComponent, null),
+                label: "Email"
+            }),
+            text: "Email"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                element: /*#__PURE__*/ react.createElement(chat_bubble_svg_ReactComponent, null),
+                label: "Message"
+            }),
+            text: "Message"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "More...",
+                element: /*#__PURE__*/ react.createElement(add_circle_svg_ReactComponent, null)
+            }),
+            text: "More..."
+        })), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "New Team",
+                element: /*#__PURE__*/ react.createElement(add_svg_ReactComponent, null)
+            }),
+            text: "New Team"
+        })), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Support",
+                element: /*#__PURE__*/ react.createElement(safety_check_svg_ReactComponent, null)
+            }),
+            text: "Support"
+        }), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "API",
+                element: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            }),
+            text: "API",
+            disabled: true
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Item, {
+            icon: /*#__PURE__*/ react.createElement(Item.Icon, {
+                label: "Log out",
+                element: /*#__PURE__*/ react.createElement(logout_svg_ReactComponent, null)
+            }),
+            text: "Log out"
+        }), /*#__PURE__*/ react.createElement(Separator, null), /*#__PURE__*/ react.createElement(Label, {
+            text: "Links"
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 1",
+            to: "#link-1",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 1",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            })
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 2",
+            to: "#link-2",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 2",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            })
+        }), /*#__PURE__*/ react.createElement(Link, {
+            text: "Link 3",
+            to: "#link-3",
+            icon: /*#__PURE__*/ react.createElement(Link.Icon, {
+                label: "Link 3",
+                element: /*#__PURE__*/ react.createElement(link_svg_ReactComponent, null)
+            })
+        }))
     },
-    children: {
-      description: "The content of the menu. Please refer to the example code for details."
+    argTypes: {
+        trigger: {
+            description: "The trigger element that opens the menu. Please refer to the example code for details."
+        },
+        children: {
+            description: "The content of the menu. Please refer to the example code for details."
+        }
     }
-  }
 };
+export default DropdownMenu_stories;
+export { Default, Documentation, SimpleMenuWithIcons, WithCheckboxItems, WithOnOpenChange, WithSubMenus };
 
 //# sourceMappingURL=DropdownMenu.stories.js.map