@shipfox/react-ui 0.9.0 → 0.11.0

package/dist/components/dropdown-menu/dropdown-menu.stories.js

@@ -0,0 +1,462 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useState } from 'react';
+import { Avatar } from '../avatar/index.js';
+import { Button } from '../button/index.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './dropdown-menu.js';
+const OPEN_MENU_REGEX = /open menu/i;
+const ACTIONS_REGEX = /actions/i;
+const ORGANIZATION_REGEX = /organization/i;
+const COMPLETE_MENU_REGEX = /complete menu/i;
+const SWITCH_ORGANIZATION_REGEX = /switch organization/i;
+const isTestEnvironment = ()=>typeof navigator !== 'undefined' && navigator.webdriver === true;
+async function openMenuAndScreenshot(ctx, triggerRegex, screenshotName, additionalSteps) {
+    const { canvasElement, step } = ctx;
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    let triggerButton = null;
+    await step('Open the dropdown menu', async ()=>{
+        triggerButton = canvas.getByRole('button', {
+            name: triggerRegex
+        });
+        await user.click(triggerButton);
+    });
+    await step('Wait for menu to appear and render', async ()=>{
+        await screen.findByRole('menu');
+        await new Promise((resolve)=>setTimeout(resolve, 300));
+        if (isTestEnvironment() && triggerButton instanceof HTMLElement) {
+            triggerButton.style.display = 'none';
+        }
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+    });
+    await argosScreenshot(ctx, screenshotName);
+    if (additionalSteps) {
+        await additionalSteps(ctx, user);
+    }
+}
+const meta = {
+    title: 'Components/DropdownMenu',
+    component: DropdownMenuContent,
+    subcomponents: {
+        DropdownMenu,
+        DropdownMenuTrigger,
+        DropdownMenuItem,
+        DropdownMenuCheckboxItem,
+        DropdownMenuRadioGroup,
+        DropdownMenuRadioItem,
+        DropdownMenuLabel,
+        DropdownMenuSeparator,
+        DropdownMenuGroup,
+        DropdownMenuSub,
+        DropdownMenuSubTrigger,
+        DropdownMenuSubContent
+    },
+    parameters: {
+        layout: 'centered'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        side: {
+            control: 'select',
+            options: [
+                'top',
+                'right',
+                'bottom',
+                'left'
+            ],
+            description: 'The preferred side of the trigger to render against',
+            table: {
+                defaultValue: {
+                    summary: 'bottom'
+                }
+            }
+        },
+        align: {
+            control: 'select',
+            options: [
+                'start',
+                'center',
+                'end'
+            ],
+            description: 'The preferred alignment against the trigger',
+            table: {
+                defaultValue: {
+                    summary: 'start'
+                }
+            }
+        },
+        sideOffset: {
+            control: {
+                type: 'number',
+                min: 0,
+                max: 20,
+                step: 1
+            },
+            description: 'Distance in pixels from the trigger',
+            table: {
+                defaultValue: {
+                    summary: '4'
+                }
+            }
+        },
+        alignOffset: {
+            control: {
+                type: 'number',
+                min: -20,
+                max: 20,
+                step: 1
+            },
+            description: 'Offset in pixels from the alignment edge',
+            table: {
+                defaultValue: {
+                    summary: '0'
+                }
+            }
+        },
+        size: {
+            control: 'select',
+            options: [
+                'sm',
+                'md',
+                'lg'
+            ],
+            description: 'Size variant of the dropdown content',
+            table: {
+                defaultValue: {
+                    summary: 'md'
+                }
+            }
+        }
+    },
+    args: {
+        side: 'bottom',
+        align: 'center',
+        sideOffset: 8,
+        alignOffset: 0,
+        size: 'md'
+    }
+};
+export default meta;
+export const Default = {
+    play: (ctx)=>openMenuAndScreenshot(ctx, OPEN_MENU_REGEX, 'DropdownMenu Default Open'),
+    render: function DefaultStory(args) {
+        const [container, setContainer] = useState(null);
+        return /*#__PURE__*/ _jsx("div", {
+            ref: setContainer,
+            className: "relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
+            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "secondary",
+                            children: "Open Menu"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                        ...args,
+                        container: container,
+                        side: "bottom",
+                        align: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "editLine",
+                                children: "Edit"
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "addLine",
+                                children: "Add"
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "deleteBinLine",
+                                children: "Delete"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const WithShortcuts = {
+    play: (ctx)=>openMenuAndScreenshot(ctx, ACTIONS_REGEX, 'DropdownMenu With Shortcuts Open'),
+    render: function WithShortcutsStory(args) {
+        const [container, setContainer] = useState(null);
+        return /*#__PURE__*/ _jsx("div", {
+            ref: setContainer,
+            className: "relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
+            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "secondary",
+                            children: "Actions"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                        ...args,
+                        container: container,
+                        side: "bottom",
+                        align: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "fileCopyLine",
+                                shortcut: "⌘C",
+                                children: "Copy"
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "clipboardLine",
+                                shortcut: "⌘V",
+                                children: "Paste"
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "deleteBinLine",
+                                shortcut: "⌘⌫",
+                                children: "Delete"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+function UserProfileSection() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-8 px-8 py-6",
+        children: [
+            /*#__PURE__*/ _jsx(Avatar, {
+                size: "sm",
+                content: "image",
+                src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=faces",
+                fallback: "John Doe"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-sm font-medium leading-20 text-foreground-neutral-base",
+                        children: "John Doe"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "text-xs leading-16 text-foreground-neutral-muted",
+                        children: "john@example.com"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function OrganizationItem() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-8 px-8 py-6",
+        children: [
+            /*#__PURE__*/ _jsx(Avatar, {
+                size: "3xs",
+                content: "logo",
+                logoName: "stripe",
+                radius: "rounded"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-sm leading-20 text-foreground-neutral-subtle",
+                children: "Stripe's organization"
+            })
+        ]
+    });
+}
+export const OrganizationMenu = {
+    args: {
+        size: 'md'
+    },
+    play: (ctx)=>openMenuAndScreenshot(ctx, ORGANIZATION_REGEX, 'DropdownMenu Organization Menu Open', async ({ step }, user)=>{
+            await step('Hover over submenu trigger', async ()=>{
+                const submenuTrigger = screen.getByRole('menuitem', {
+                    name: SWITCH_ORGANIZATION_REGEX
+                });
+                await user.hover(submenuTrigger);
+                await new Promise((resolve)=>setTimeout(resolve, 200));
+            });
+            await argosScreenshot(ctx, 'DropdownMenu Organization Menu Submenu Open');
+        }),
+    render: function OrganizationMenuStory(args) {
+        const [container, setContainer] = useState(null);
+        return /*#__PURE__*/ _jsx("div", {
+            ref: setContainer,
+            className: "relative flex h-600 w-600 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
+            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "secondary",
+                            iconLeft: "buildingLine",
+                            children: "Organization"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                        ...args,
+                        container: container,
+                        side: "bottom",
+                        align: "start",
+                        children: [
+                            /*#__PURE__*/ _jsx(OrganizationItem, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "settings3Line",
+                                children: "Settings"
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuSub, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(DropdownMenuSubTrigger, {
+                                        icon: "arrowLeftRightLine",
+                                        children: "Switch organization"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(DropdownMenuSubContent, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                icon: "shipfox",
+                                                iconStyle: "text-foreground-neutral-base",
+                                                className: "text-foreground-neutral-base",
+                                                children: "Shipfox"
+                                            }),
+                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                icon: "github",
+                                                iconStyle: "text-foreground-neutral-base",
+                                                className: "text-foreground-neutral-base",
+                                                children: "Github"
+                                            }),
+                                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                icon: "google",
+                                                iconStyle: "text-foreground-neutral-base",
+                                                className: "text-foreground-neutral-base",
+                                                children: "Google"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "addLine",
+                                children: "New organization"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+export const CompleteExample = {
+    args: {
+        size: 'lg',
+        side: 'bottom'
+    },
+    play: (ctx)=>openMenuAndScreenshot(ctx, COMPLETE_MENU_REGEX, 'DropdownMenu Complete Example Open'),
+    render: function CompleteExampleStory(args) {
+        const [container, setContainer] = useState(null);
+        const [showNotifications, setShowNotifications] = useState(true);
+        const [showBadges, setShowBadges] = useState(false);
+        const [theme, setTheme] = useState('dark');
+        return /*#__PURE__*/ _jsx("div", {
+            ref: setContainer,
+            className: "relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
+            children: container && /*#__PURE__*/ _jsxs(DropdownMenu, {
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "secondary",
+                            iconLeft: "menu3Line",
+                            children: "Complete Menu"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                        ...args,
+                        className: "w-260",
+                        container: container,
+                        side: "bottom",
+                        align: "start",
+                        children: [
+                            /*#__PURE__*/ _jsx(UserProfileSection, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                children: "Actions"
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuGroup, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "sparklingLine",
+                                        children: "Getting started"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        icon: "userLine",
+                                        children: "Profile settings"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                children: "Preferences"
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuGroup, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+                                        checked: showNotifications,
+                                        onCheckedChange: setShowNotifications,
+                                        closeOnSelect: false,
+                                        children: "Show notifications"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+                                        checked: showBadges,
+                                        onCheckedChange: setShowBadges,
+                                        closeOnSelect: false,
+                                        children: "Show badges"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                                children: "Theme"
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuRadioGroup, {
+                                value: theme,
+                                onValueChange: setTheme,
+                                children: [
+                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
+                                        value: "light",
+                                        closeOnSelect: false,
+                                        children: "Light"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
+                                        value: "dark",
+                                        closeOnSelect: false,
+                                        children: "Dark"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuRadioItem, {
+                                        value: "system",
+                                        closeOnSelect: false,
+                                        children: "System"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                            /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                icon: "logoutCircleLine",
+                                children: "Log out"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+};
+
+//# sourceMappingURL=dropdown-menu.stories.js.map

package/dist/components/dropdown-menu/dropdown-menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dropdown-menu/dropdown-menu.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {screen, within} from '@testing-library/react';\nimport type {UserEvent} from '@testing-library/user-event';\nimport userEvent from '@testing-library/user-event';\nimport {useState} from 'react';\nimport {Avatar} from '../avatar';\nimport {Button} from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from './dropdown-menu';\n\nconst OPEN_MENU_REGEX = /open menu/i;\nconst ACTIONS_REGEX = /actions/i;\nconst ORGANIZATION_REGEX = /organization/i;\nconst COMPLETE_MENU_REGEX = /complete menu/i;\nconst SWITCH_ORGANIZATION_REGEX = /switch organization/i;\n\nconst isTestEnvironment = () => typeof navigator !== 'undefined' && navigator.webdriver === true;\n\ntype StoryContext = Parameters<NonNullable<Story['play']>>[0];\ntype AdditionalStepsCallback = (ctx: StoryContext, user: UserEvent) => Promise<void>;\n\nasync function openMenuAndScreenshot(\n  ctx: StoryContext,\n  triggerRegex: RegExp,\n  screenshotName: string,\n  additionalSteps?: AdditionalStepsCallback,\n): Promise<void> {\n  const {canvasElement, step} = ctx;\n  const canvas = within(canvasElement);\n  const user = userEvent.setup();\n\n  let triggerButton: HTMLElement | null = null;\n\n  await step('Open the dropdown menu', async () => {\n    triggerButton = canvas.getByRole('button', {name: triggerRegex});\n    await user.click(triggerButton);\n  });\n\n  await step('Wait for menu to appear and render', async () => {\n    await screen.findByRole('menu');\n    await new Promise((resolve) => setTimeout(resolve, 300));\n\n    if (isTestEnvironment() && triggerButton instanceof HTMLElement) {\n      triggerButton.style.display = 'none';\n    }\n    await new Promise((resolve) => setTimeout(resolve, 100));\n  });\n\n  await argosScreenshot(ctx, screenshotName);\n\n  if (additionalSteps) {\n    await additionalSteps(ctx, user);\n  }\n}\n\nconst meta = {\n  title: 'Components/DropdownMenu',\n  component: DropdownMenuContent,\n  subcomponents: {\n    DropdownMenu,\n    DropdownMenuTrigger,\n    DropdownMenuItem,\n    DropdownMenuCheckboxItem,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuGroup,\n    DropdownMenuSub,\n    DropdownMenuSubTrigger,\n    DropdownMenuSubContent,\n  },\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    side: {\n      control: 'select',\n      options: ['top', 'right', 'bottom', 'left'],\n      description: 'The preferred side of the trigger to render against',\n      table: {defaultValue: {summary: 'bottom'}},\n    },\n    align: {\n      control: 'select',\n      options: ['start', 'center', 'end'],\n      description: 'The preferred alignment against the trigger',\n      table: {defaultValue: {summary: 'start'}},\n    },\n    sideOffset: {\n      control: {type: 'number', min: 0, max: 20, step: 1},\n      description: 'Distance in pixels from the trigger',\n      table: {defaultValue: {summary: '4'}},\n    },\n    alignOffset: {\n      control: {type: 'number', min: -20, max: 20, step: 1},\n      description: 'Offset in pixels from the alignment edge',\n      table: {defaultValue: {summary: '0'}},\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'Size variant of the dropdown content',\n      table: {defaultValue: {summary: 'md'}},\n    },\n  },\n  args: {\n    side: 'bottom',\n    align: 'center',\n    sideOffset: 8,\n    alignOffset: 0,\n    size: 'md',\n  },\n} satisfies Meta<typeof DropdownMenuContent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: (ctx) => openMenuAndScreenshot(ctx, OPEN_MENU_REGEX, 'DropdownMenu Default Open'),\n  render: function DefaultStory(args) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    return (\n      <div\n        ref={setContainer}\n        className=\"relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible\"\n      >\n        {container && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\">Open Menu</Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent {...args} container={container} side=\"bottom\" align=\"center\">\n              <DropdownMenuItem icon=\"editLine\">Edit</DropdownMenuItem>\n              <DropdownMenuItem icon=\"addLine\">Add</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem icon=\"deleteBinLine\">Delete</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    );\n  },\n};\n\nexport const WithShortcuts: Story = {\n  play: (ctx) => openMenuAndScreenshot(ctx, ACTIONS_REGEX, 'DropdownMenu With Shortcuts Open'),\n  render: function WithShortcutsStory(args) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    return (\n      <div\n        ref={setContainer}\n        className=\"relative flex h-500 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible\"\n      >\n        {container && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\">Actions</Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent {...args} container={container} side=\"bottom\" align=\"center\">\n              <DropdownMenuItem icon=\"fileCopyLine\" shortcut=\"⌘C\">\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem icon=\"clipboardLine\" shortcut=\"⌘V\">\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem icon=\"deleteBinLine\" shortcut=\"⌘⌫\">\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    );\n  },\n};\n\nfunction UserProfileSection() {\n  return (\n    <div className=\"flex items-center gap-8 px-8 py-6\">\n      <Avatar\n        size=\"sm\"\n        content=\"image\"\n        src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=faces\"\n        fallback=\"John Doe\"\n      />\n      <div className=\"flex flex-col\">\n        <span className=\"text-sm font-medium leading-20 text-foreground-neutral-base\">\n          John Doe\n        </span>\n        <span className=\"text-xs leading-16 text-foreground-neutral-muted\">john@example.com</span>\n      </div>\n    </div>\n  );\n}\n\nfunction OrganizationItem() {\n  return (\n    <div className=\"flex items-center gap-8 px-8 py-6\">\n      <Avatar size=\"3xs\" content=\"logo\" logoName=\"stripe\" radius=\"rounded\" />\n      <span className=\"text-sm leading-20 text-foreground-neutral-subtle\">\n        Stripe&apos;s organization\n      </span>\n    </div>\n  );\n}\n\nexport const OrganizationMenu: Story = {\n  args: {\n    size: 'md',\n  },\n  play: (ctx) =>\n    openMenuAndScreenshot(\n      ctx,\n      ORGANIZATION_REGEX,\n      'DropdownMenu Organization Menu Open',\n      async ({step}, user) => {\n        await step('Hover over submenu trigger', async () => {\n          const submenuTrigger = screen.getByRole('menuitem', {name: SWITCH_ORGANIZATION_REGEX});\n          await user.hover(submenuTrigger);\n          await new Promise((resolve) => setTimeout(resolve, 200));\n        });\n\n        await argosScreenshot(ctx, 'DropdownMenu Organization Menu Submenu Open');\n      },\n    ),\n  render: function OrganizationMenuStory(args) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n    return (\n      <div\n        ref={setContainer}\n        className=\"relative flex h-600 w-600 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible\"\n      >\n        {container && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" iconLeft=\"buildingLine\">\n                Organization\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent {...args} container={container} side=\"bottom\" align=\"start\">\n              <OrganizationItem />\n              <DropdownMenuSeparator />\n              <DropdownMenuItem icon=\"settings3Line\">Settings</DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger icon=\"arrowLeftRightLine\">\n                  Switch organization\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem\n                    icon=\"shipfox\"\n                    iconStyle=\"text-foreground-neutral-base\"\n                    className=\"text-foreground-neutral-base\"\n                  >\n                    Shipfox\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    icon=\"github\"\n                    iconStyle=\"text-foreground-neutral-base\"\n                    className=\"text-foreground-neutral-base\"\n                  >\n                    Github\n                  </DropdownMenuItem>\n                  <DropdownMenuItem\n                    icon=\"google\"\n                    iconStyle=\"text-foreground-neutral-base\"\n                    className=\"text-foreground-neutral-base\"\n                  >\n                    Google\n                  </DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n              <DropdownMenuItem icon=\"addLine\">New organization</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    );\n  },\n};\n\nexport const CompleteExample: Story = {\n  args: {\n    size: 'lg',\n    side: 'bottom',\n  },\n  play: (ctx) =>\n    openMenuAndScreenshot(ctx, COMPLETE_MENU_REGEX, 'DropdownMenu Complete Example Open'),\n  render: function CompleteExampleStory(args) {\n    const [container, setContainer] = useState<HTMLDivElement | null>(null);\n    const [showNotifications, setShowNotifications] = useState(true);\n    const [showBadges, setShowBadges] = useState(false);\n    const [theme, setTheme] = useState('dark');\n\n    return (\n      <div\n        ref={setContainer}\n        className=\"relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible\"\n      >\n        {container && (\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"secondary\" iconLeft=\"menu3Line\">\n                Complete Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              {...args}\n              className=\"w-260\"\n              container={container}\n              side=\"bottom\"\n              align=\"start\"\n            >\n              <UserProfileSection />\n              <DropdownMenuSeparator />\n\n              <DropdownMenuLabel>Actions</DropdownMenuLabel>\n              <DropdownMenuGroup>\n                <DropdownMenuItem icon=\"sparklingLine\">Getting started</DropdownMenuItem>\n                <DropdownMenuItem icon=\"userLine\">Profile settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n              <DropdownMenuGroup>\n                <DropdownMenuCheckboxItem\n                  checked={showNotifications}\n                  onCheckedChange={setShowNotifications}\n                  closeOnSelect={false}\n                >\n                  Show notifications\n                </DropdownMenuCheckboxItem>\n                <DropdownMenuCheckboxItem\n                  checked={showBadges}\n                  onCheckedChange={setShowBadges}\n                  closeOnSelect={false}\n                >\n                  Show badges\n                </DropdownMenuCheckboxItem>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator />\n\n              <DropdownMenuLabel>Theme</DropdownMenuLabel>\n              <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n                <DropdownMenuRadioItem value=\"light\" closeOnSelect={false}>\n                  Light\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"dark\" closeOnSelect={false}>\n                  Dark\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"system\" closeOnSelect={false}>\n                  System\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n\n              <DropdownMenuSeparator />\n              <DropdownMenuItem icon=\"logoutCircleLine\">Log out</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        )}\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","screen","within","userEvent","useState","Avatar","Button","DropdownMenu","DropdownMenuCheckboxItem","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","DropdownMenuLabel","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSeparator","DropdownMenuSub","DropdownMenuSubContent","DropdownMenuSubTrigger","DropdownMenuTrigger","OPEN_MENU_REGEX","ACTIONS_REGEX","ORGANIZATION_REGEX","COMPLETE_MENU_REGEX","SWITCH_ORGANIZATION_REGEX","isTestEnvironment","navigator","webdriver","openMenuAndScreenshot","ctx","triggerRegex","screenshotName","additionalSteps","canvasElement","step","canvas","user","setup","triggerButton","getByRole","name","click","findByRole","Promise","resolve","setTimeout","HTMLElement","style","display","meta","title","component","subcomponents","parameters","layout","tags","argTypes","side","control","options","description","table","defaultValue","summary","align","sideOffset","type","min","max","alignOffset","size","args","Default","play","render","DefaultStory","container","setContainer","div","ref","className","asChild","variant","icon","WithShortcuts","WithShortcutsStory","shortcut","UserProfileSection","content","src","fallback","span","OrganizationItem","logoName","radius","OrganizationMenu","submenuTrigger","hover","OrganizationMenuStory","iconLeft","iconStyle","CompleteExample","CompleteExampleStory","showNotifications","setShowNotifications","showBadges","setShowBadges","theme","setTheme","checked","onCheckedChange","closeOnSelect","value","onValueChange"],"mappings":"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"}

package/dist/components/dropdown-menu/index.d.ts

@@ -0,0 +1,3 @@
+export type { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRadioItemProps, DropdownMenuShortcutProps, DropdownMenuSubTriggerProps, } from './dropdown-menu';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants, } from './dropdown-menu';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dropdown-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-menu/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,6BAA6B,EAC7B,wBAAwB,EACxB,qBAAqB,EACrB,sBAAsB,EACtB,0BAA0B,EAC1B,yBAAyB,EACzB,2BAA2B,GAC5B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,mBAAmB,EACnB,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,iBAAiB,CAAC"}

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1,3 @@
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuContentVariants, dropdownMenuItemVariants, dropdownMenuLabelVariants } from './dropdown-menu.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dropdown-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/dropdown-menu/index.ts"],"sourcesContent":["export type {\n  DropdownMenuCheckboxItemProps,\n  DropdownMenuContentProps,\n  DropdownMenuItemProps,\n  DropdownMenuLabelProps,\n  DropdownMenuRadioItemProps,\n  DropdownMenuShortcutProps,\n  DropdownMenuSubTriggerProps,\n} from './dropdown-menu';\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n  dropdownMenuContentVariants,\n  dropdownMenuItemVariants,\n  dropdownMenuLabelVariants,\n} from './dropdown-menu';\n"],"names":["DropdownMenu","DropdownMenuCheckboxItem","DropdownMenuContent","DropdownMenuGroup","DropdownMenuItem","DropdownMenuLabel","DropdownMenuPortal","DropdownMenuRadioGroup","DropdownMenuRadioItem","DropdownMenuSeparator","DropdownMenuShortcut","DropdownMenuSub","DropdownMenuSubContent","DropdownMenuSubTrigger","DropdownMenuTrigger","dropdownMenuContentVariants","dropdownMenuItemVariants","dropdownMenuLabelVariants"],"mappings":"AASA,SACEA,YAAY,EACZC,wBAAwB,EACxBC,mBAAmB,EACnBC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,EAClBC,sBAAsB,EACtBC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,eAAe,EACfC,sBAAsB,EACtBC,sBAAsB,EACtBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,wBAAwB,EACxBC,yBAAyB,QACpB,kBAAkB"}

package/dist/components/dynamic-item/dynamic-item.d.ts

@@ -4,7 +4,7 @@ export type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'>
     variant?: 'default' | 'neutral';
     leftElement?: ReactNode;
     title?: ReactNode;
-    description?: string;
+    description?: ReactNode;
     action?: ReactNode;
     rightElement?: ReactNode;
     contentClassName?: string;

package/dist/components/dynamic-item/dynamic-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-item.d.ts","sourceRoot":"","sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,WAAW,EACX,KAAK,EACL,WAAW,EACX,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAmClB"}
+{"version":3,"file":"dynamic-item.d.ts","sourceRoot":"","sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,EAML,KAAK,SAAS,EAEf,MAAM,cAAc,CAAC;AAEtB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IACjF,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,WAAW,EACX,KAAK,EACL,WAAW,EACX,MAAM,EACN,YAAY,EACZ,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAyClB"}

package/dist/components/dynamic-item/dynamic-item.js

@@ -19,12 +19,12 @@ export function DynamicItem({ className, variant = 'default', leftElement, title
                 hasContent && /*#__PURE__*/ _jsxs(ItemContent, {
                     className: "text-center sm:text-left",
                     children: [
-                        title && typeof title === 'string' ? /*#__PURE__*/ _jsx(ItemTitle, {
+                        title ? typeof title === 'string' ? /*#__PURE__*/ _jsx(ItemTitle, {
                             children: title
-                        }) : title,
-                        description && /*#__PURE__*/ _jsx(ItemDescription, {
+                        }) : title : null,
+                        description ? typeof description === 'string' ? /*#__PURE__*/ _jsx(ItemDescription, {
                             children: description
-                        }),
+                        }) : description : null,
                         action && /*#__PURE__*/ _jsx(ItemActions, {
                             className: cn('mt-8 flex flex-wrap items-center gap-16'),
                             children: action

package/dist/components/dynamic-item/dynamic-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {cn} from 'utils/cn';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  type ItemProps,\n  ItemTitle,\n} from '../item/item';\n\nexport type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'> & {\n  variant?: 'default' | 'neutral';\n  leftElement?: ReactNode;\n  title?: ReactNode;\n  description?: string;\n  action?: ReactNode;\n  rightElement?: ReactNode;\n  contentClassName?: string;\n};\n\nexport function DynamicItem({\n  className,\n  variant = 'default',\n  leftElement,\n  title,\n  description,\n  action,\n  rightElement,\n  contentClassName,\n  ...props\n}: DynamicItemProps) {\n  const hasLeftSide = Boolean(leftElement);\n  const hasRightSide = Boolean(rightElement);\n  const hasContent = Boolean(title || description || action);\n\n  return (\n    <Item variant={variant} className={className} {...props}>\n      <div\n        className={cn(\n          'relative flex flex-col sm:flex-row justify-center items-center gap-16 min-h-64 px-12 py-12',\n          contentClassName,\n        )}\n      >\n        {hasLeftSide && (\n          <ItemMedia className={cn('self-center sm:self-start pt-2')}>{leftElement}</ItemMedia>\n        )}\n\n        {hasContent && (\n          <ItemContent className=\"text-center sm:text-left\">\n            {title && typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title}\n            {description && <ItemDescription>{description}</ItemDescription>}\n            {action && (\n              <ItemActions className={cn('mt-8 flex flex-wrap items-center gap-16')}>\n                {action}\n              </ItemActions>\n            )}\n          </ItemContent>\n        )}\n\n        {hasRightSide && (\n          <ItemActions className=\"self-center sm:ml-auto\">{rightElement}</ItemActions>\n        )}\n      </div>\n    </Item>\n  );\n}\n"],"names":["cn","Item","ItemActions","ItemContent","ItemDescription","ItemMedia","ItemTitle","DynamicItem","className","variant","leftElement","title","description","action","rightElement","contentClassName","props","hasLeftSide","Boolean","hasRightSide","hasContent","div"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SACEC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,SAAS,EAETC,SAAS,QACJ,eAAe;AAYtB,OAAO,SAASC,YAAY,EAC1BC,SAAS,EACTC,UAAU,SAAS,EACnBC,WAAW,EACXC,KAAK,EACLC,WAAW,EACXC,MAAM,EACNC,YAAY,EACZC,gBAAgB,EAChB,GAAGC,OACc;IACjB,MAAMC,cAAcC,QAAQR;IAC5B,MAAMS,eAAeD,QAAQJ;IAC7B,MAAMM,aAAaF,QAAQP,SAASC,eAAeC;IAEnD,qBACE,KAACZ;QAAKQ,SAASA;QAASD,WAAWA;QAAY,GAAGQ,KAAK;kBACrD,cAAA,MAACK;YACCb,WAAWR,GACT,8FACAe;;gBAGDE,6BACC,KAACZ;oBAAUG,WAAWR,GAAG;8BAAoCU;;gBAG9DU,4BACC,MAACjB;oBAAYK,WAAU;;wBACpBG,SAAS,OAAOA,UAAU,yBAAW,KAACL;sCAAWK;6BAAqBA;wBACtEC,6BAAe,KAACR;sCAAiBQ;;wBACjCC,wBACC,KAACX;4BAAYM,WAAWR,GAAG;sCACxBa;;;;gBAMRM,8BACC,KAACjB;oBAAYM,WAAU;8BAA0BM;;;;;AAK3D"}
+{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {cn} from 'utils/cn';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  type ItemProps,\n  ItemTitle,\n} from '../item/item';\n\nexport type DynamicItemProps = Omit<ItemProps, 'variant' | 'children' | 'title'> & {\n  variant?: 'default' | 'neutral';\n  leftElement?: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  rightElement?: ReactNode;\n  contentClassName?: string;\n};\n\nexport function DynamicItem({\n  className,\n  variant = 'default',\n  leftElement,\n  title,\n  description,\n  action,\n  rightElement,\n  contentClassName,\n  ...props\n}: DynamicItemProps) {\n  const hasLeftSide = Boolean(leftElement);\n  const hasRightSide = Boolean(rightElement);\n  const hasContent = Boolean(title || description || action);\n\n  return (\n    <Item variant={variant} className={className} {...props}>\n      <div\n        className={cn(\n          'relative flex flex-col sm:flex-row justify-center items-center gap-16 min-h-64 px-12 py-12',\n          contentClassName,\n        )}\n      >\n        {hasLeftSide && (\n          <ItemMedia className={cn('self-center sm:self-start pt-2')}>{leftElement}</ItemMedia>\n        )}\n\n        {hasContent && (\n          <ItemContent className=\"text-center sm:text-left\">\n            {title ? typeof title === 'string' ? <ItemTitle>{title}</ItemTitle> : title : null}\n            {description ? (\n              typeof description === 'string' ? (\n                <ItemDescription>{description}</ItemDescription>\n              ) : (\n                description\n              )\n            ) : null}\n            {action && (\n              <ItemActions className={cn('mt-8 flex flex-wrap items-center gap-16')}>\n                {action}\n              </ItemActions>\n            )}\n          </ItemContent>\n        )}\n\n        {hasRightSide && (\n          <ItemActions className=\"self-center sm:ml-auto\">{rightElement}</ItemActions>\n        )}\n      </div>\n    </Item>\n  );\n}\n"],"names":["cn","Item","ItemActions","ItemContent","ItemDescription","ItemMedia","ItemTitle","DynamicItem","className","variant","leftElement","title","description","action","rightElement","contentClassName","props","hasLeftSide","Boolean","hasRightSide","hasContent","div"],"mappings":";AACA,SAAQA,EAAE,QAAO,WAAW;AAC5B,SACEC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,SAAS,EAETC,SAAS,QACJ,eAAe;AAYtB,OAAO,SAASC,YAAY,EAC1BC,SAAS,EACTC,UAAU,SAAS,EACnBC,WAAW,EACXC,KAAK,EACLC,WAAW,EACXC,MAAM,EACNC,YAAY,EACZC,gBAAgB,EAChB,GAAGC,OACc;IACjB,MAAMC,cAAcC,QAAQR;IAC5B,MAAMS,eAAeD,QAAQJ;IAC7B,MAAMM,aAAaF,QAAQP,SAASC,eAAeC;IAEnD,qBACE,KAACZ;QAAKQ,SAASA;QAASD,WAAWA;QAAY,GAAGQ,KAAK;kBACrD,cAAA,MAACK;YACCb,WAAWR,GACT,8FACAe;;gBAGDE,6BACC,KAACZ;oBAAUG,WAAWR,GAAG;8BAAoCU;;gBAG9DU,4BACC,MAACjB;oBAAYK,WAAU;;wBACpBG,QAAQ,OAAOA,UAAU,yBAAW,KAACL;sCAAWK;6BAAqBA,QAAQ;wBAC7EC,cACC,OAAOA,gBAAgB,yBACrB,KAACR;sCAAiBQ;6BAElBA,cAEA;wBACHC,wBACC,KAACX;4BAAYM,WAAWR,GAAG;sCACxBa;;;;gBAMRM,8BACC,KAACjB;oBAAYM,WAAU;8BAA0BM;;;;;AAK3D"}

package/dist/components/dynamic-item/dynamic-item.stories.js

@@ -230,7 +230,17 @@ export const ConnectGithubAccountItem = {
                         ]
                     }),
                     title: "Slack",
-                    description: "Personal account (kye-nguyen)",
+                    description: /*#__PURE__*/ _jsxs("p", {
+                        className: "text-xs leading-20 text-tag-warning-icon inline-flex items-center gap-2",
+                        children: [
+                            "Personal account (kyle-nguyen)",
+                            /*#__PURE__*/ _jsx(Icon, {
+                                name: "info",
+                                size: "sm",
+                                className: "shrink-0 size-16 text-tag-warning-icon"
+                            })
+                        ]
+                    }),
                     rightElement: /*#__PURE__*/ _jsx(Button, {
                         variant: "primary",
                         size: "sm",