@webiny/admin-ui 6.4.0-beta.3 → 6.4.0-beta.4

package/DropdownMenu/DropdownMenu.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu/DropdownMenu.stories.js","sources":["../../src/DropdownMenu/DropdownMenu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { DropdownMenu } from \"./DropdownMenu.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { ReactComponent as Cloud } from \"@webiny/icons/cloud.svg\";\nimport { ReactComponent as LogOut } from \"@webiny/icons/logout.svg\";\nimport { ReactComponent as LifeBuoy } from \"@webiny/icons/safety_check.svg\";\nimport { ReactComponent as CreditCard } from \"@webiny/icons/credit_score.svg\";\nimport { ReactComponent as Plus } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusCircle } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as Settings } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as Users } from \"@webiny/icons/people.svg\";\nimport { ReactComponent as UserPlus } from \"@webiny/icons/person_add.svg\";\nimport { ReactComponent as User } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as Keyboard } from \"@webiny/icons/keyboard.svg\";\nimport { ReactComponent as Mail } from \"@webiny/icons/mail.svg\";\nimport { ReactComponent as MessageSquare } from \"@webiny/icons/chat_bubble.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DropdownMenu> = {\n    title: \"Components/Dropdown Menu\",\n    component: DropdownMenu,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof DropdownMenu>;\n\nconst { Label, Separator, Group, Item, Link, CheckboxItem } = DropdownMenu;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2 (target: _blank)\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                    target={\"_blank\"}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SimpleMenuWithIcons: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithSubMenus: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon element={<User />} label={\"Profile\"} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon label={\"Team\"} element={<Users />} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon label={\"Invite user\"} element={<UserPlus />} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        >\n                            <Item\n                                icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                                text={\"Email\"}\n                            />\n                            <Item\n                                icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                                text={\"Message\"}\n                            />\n                            <Separator />\n                            <Item\n                                icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                                text={\"More...\"}\n                            />\n                        </Item>\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nconst TARGET_LEVELS = [\n    {\n        id: \"viewer\",\n        label: \"Viewer\",\n        description: \"Can view content, but not modify it\"\n    },\n    {\n        id: \"editor\",\n        label: \"Editor\",\n        description: \"Can view and modify content\"\n    },\n    {\n        id: \"owner\",\n        label: \"Owner\",\n        description: \"Can edit and manage content permissions\"\n    }\n];\n\nexport const WithCheckboxItems: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                {TARGET_LEVELS.map(level => (\n                    <CheckboxItem\n                        key={level.id}\n                        checked={level.id === \"viewer\"}\n                        text={\n                            <div>\n                                <Text as={\"div\"}>{level.label}</Text>\n                                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                    {level.description}\n                                </Text>\n                            </div>\n                        }\n                        onClick={() => {\n                            console.log(\"Selected level:\", level.id);\n                        }}\n                    />\n                ))}\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item text={\"Remove access\"} />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithOnOpenChange: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        onOpenChange: opened => {\n            console.log(`Menu is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const Documentation: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The trigger element that opens the menu. Please refer to the example code for details.\"\n        },\n        children: {\n            description: \"The content of the menu. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","DropdownMenu","Label","Separator","Group","Item","Link","CheckboxItem","Default","Button","User","CreditCard","Settings","Keyboard","Users","UserPlus","Mail","MessageSquare","PlusCircle","Plus","LifeBuoy","Cloud","LogOut","LinkIcon","SimpleMenuWithIcons","WithSubMenus","TARGET_LEVELS","WithCheckboxItems","level","Text","console","WithOnOpenChange","opened","Documentation"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu/DropdownMenu.stories.js","sources":["../../src/DropdownMenu/DropdownMenu.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { DropdownMenu } from \"./DropdownMenu.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { ReactComponent as Cloud } from \"@webiny/icons/cloud.svg\";\nimport { ReactComponent as LogOut } from \"@webiny/icons/logout.svg\";\nimport { ReactComponent as LifeBuoy } from \"@webiny/icons/safety_check.svg\";\nimport { ReactComponent as CreditCard } from \"@webiny/icons/credit_score.svg\";\nimport { ReactComponent as Plus } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as PlusCircle } from \"@webiny/icons/add_circle.svg\";\nimport { ReactComponent as Settings } from \"@webiny/icons/settings.svg\";\nimport { ReactComponent as Users } from \"@webiny/icons/people.svg\";\nimport { ReactComponent as UserPlus } from \"@webiny/icons/person_add.svg\";\nimport { ReactComponent as User } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as Keyboard } from \"@webiny/icons/keyboard.svg\";\nimport { ReactComponent as Mail } from \"@webiny/icons/mail.svg\";\nimport { ReactComponent as MessageSquare } from \"@webiny/icons/chat_bubble.svg\";\nimport { ReactComponent as LinkIcon } from \"@webiny/icons/link.svg\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof DropdownMenu> = {\n    title: \"Components/Dropdown Menu\",\n    component: DropdownMenu,\n    argTypes: {}\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof DropdownMenu>;\n\nconst { Label, Separator, Group, Item, Link, CheckboxItem } = DropdownMenu;\n\nexport const Default: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2 (target: _blank)\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                    target={\"_blank\"}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const SimpleMenuWithIcons: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithSubMenus: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon element={<User />} label={\"Profile\"} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon label={\"Billing\"} element={<CreditCard />} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Settings\"} element={<Settings />} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon label={\"Keyboard shortcuts\"} element={<Keyboard />} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon label={\"Team\"} element={<Users />} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon label={\"Invite user\"} element={<UserPlus />} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        >\n                            <Item\n                                icon={<Item.Icon label={\"Email\"} element={<Mail />} />}\n                                text={\"Email\"}\n                            />\n                            <Item\n                                icon={<Item.Icon label={\"Message\"} element={<MessageSquare />} />}\n                                text={\"Message\"}\n                            />\n                            <Separator />\n                            <Item\n                                icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                                text={\"More...\"}\n                            />\n                        </Item>\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nconst TARGET_LEVELS = [\n    {\n        id: \"viewer\",\n        label: \"Viewer\",\n        description: \"Can view content, but not modify it\"\n    },\n    {\n        id: \"editor\",\n        label: \"Editor\",\n        description: \"Can view and modify content\"\n    },\n    {\n        id: \"owner\",\n        label: \"Owner\",\n        description: \"Can edit and manage content permissions\"\n    }\n];\n\nexport const WithCheckboxItems: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                {TARGET_LEVELS.map(level => (\n                    <CheckboxItem\n                        key={level.id}\n                        checked={level.id === \"viewer\"}\n                        text={\n                            <div>\n                                <Text as={\"div\"}>{level.label}</Text>\n                                <Text as={\"div\"} size={\"sm\"} className={\"text-neutral-strong\"}>\n                                    {level.description}\n                                </Text>\n                            </div>\n                        }\n                        onClick={() => {\n                            console.log(\"Selected level:\", level.id);\n                        }}\n                    />\n                ))}\n                <DropdownMenu.Separator />\n                <DropdownMenu.Item text={\"Remove access\"} />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const WithOnOpenChange: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        onOpenChange: opened => {\n            console.log(`Menu is ${opened ? \"opened\" : \"closed\"}.`);\n        },\n        children: (\n            <>\n                <Item\n                    icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                    text={\"Billing\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                    text={\"Settings\"}\n                />\n                <Item\n                    icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                    text={\"Keyboard shortcuts\"}\n                />\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const Documentation: Story = {\n    args: {\n        trigger: <Button variant=\"primary\" text={\"Open\"} />,\n        children: (\n            <>\n                <Label text={\"My Account\"} />\n                <Item icon={<Item.Icon label={\"Profile\"} element={<User />} />} text={\"Profile\"} />\n                <Group>\n                    <Item\n                        icon={<Item.Icon element={<CreditCard />} label={\"Billing\"} />}\n                        text={\"Billing\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Settings />} label={\"Settings\"} />}\n                        text={\"Settings\"}\n                    />\n                    <Item\n                        icon={<Item.Icon element={<Keyboard />} label={\"Keyboard shortcuts\"} />}\n                        text={\"Keyboard shortcuts\"}\n                    />\n                </Group>\n                <Separator />\n                <Group>\n                    <Item icon={<Item.Icon element={<Users />} label={\"Team\"} />} text={\"Team\"} />\n                    <Item\n                        icon={<Item.Icon element={<UserPlus />} label={\"Invite users\"} />}\n                        text={\"Invite users\"}\n                    >\n                        <Item\n                            icon={<Item.Icon element={<Mail />} label={\"Email\"} />}\n                            text={\"Email\"}\n                        />\n                        <Item\n                            icon={<Item.Icon element={<MessageSquare />} label={\"Message\"} />}\n                            text={\"Message\"}\n                        />\n                        <Separator />\n                        <Item\n                            icon={<Item.Icon label={\"More...\"} element={<PlusCircle />} />}\n                            text={\"More...\"}\n                        />\n                    </Item>\n                    <Item\n                        icon={<Item.Icon label={\"New Team\"} element={<Plus />} />}\n                        text={\"New Team\"}\n                    />\n                </Group>\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Support\"} element={<LifeBuoy />} />}\n                    text={\"Support\"}\n                />\n                <Item\n                    icon={<Item.Icon label={\"API\"} element={<Cloud />} />}\n                    text={\"API\"}\n                    disabled\n                />\n                <Separator />\n                <Item\n                    icon={<Item.Icon label={\"Log out\"} element={<LogOut />} />}\n                    text={\"Log out\"}\n                />\n                <Separator />\n                <Label text={\"Links\"} />\n                <Link\n                    text={\"Link 1\"}\n                    to={\"#link-1\"}\n                    icon={<Link.Icon label=\"Link 1\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 2\"}\n                    to={\"#link-2\"}\n                    icon={<Link.Icon label=\"Link 2\" element={<LinkIcon />} />}\n                />\n                <Link\n                    text={\"Link 3\"}\n                    to={\"#link-3\"}\n                    icon={<Link.Icon label=\"Link 3\" element={<LinkIcon />} />}\n                />\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The trigger element that opens the menu. Please refer to the example code for details.\"\n        },\n        children: {\n            description: \"The content of the menu. Please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","DropdownMenu","Label","Separator","Group","Item","Link","CheckboxItem","Default","Button","User","CreditCard","Settings","Keyboard","Users","UserPlus","Mail","MessageSquare","PlusCircle","Plus","LifeBuoy","Cloud","LogOut","LinkIcon","SimpleMenuWithIcons","WithSubMenus","TARGET_LEVELS","WithCheckboxItems","level","Text","console","WithOnOpenChange","opened","Documentation"],"mappings":"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"}

package/FilePicker/FilePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FilePicker } from "../FilePicker/index.js";
 declare const meta: Meta<typeof FilePicker>;
 export default meta;

package/FilePicker/FilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}
+{"version":3,"file":"FilePicker/FilePicker.stories.js","sources":["../../src/FilePicker/FilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, FilePicker } from \"~/FilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePicker> = {\n    title: \"Components/Form/FilePicker\",\n    component: FilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <FilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.value changes\n        useEffect(() => {\n            setSelectedFile(args.value);\n        }, [args.value]);\n\n        const handleSelect = () => {\n            setSelectedFile(getFile());\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any) => {\n            if (file) {\n                console.log(\"Editing file:\", file);\n                alert(`Editing File: ${file.name}`);\n            }\n        };\n\n        const handleRemove = () => {\n            setSelectedFile(null);\n\n            if (args.required) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && !selectedFile) {\n                setValidation({ isValid: false, message: \"Please select a file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFile]);\n\n        return (\n            <FilePicker\n                {...args}\n                value={selectedFile}\n                onSelectItem={handleSelect}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Image\",\n        required: true,\n        disabled: false,\n        description: \"Select a file to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB\",\n        type: \"area\",\n        value: null,\n        validation: undefined,\n        onSelectItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\"\n        },\n        disabled: {\n            description: \"Disables the file picker when set to true\",\n            control: \"boolean\"\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        type: {\n            description: \"The visual style of the file picker\",\n            control: \"radio\",\n            options: [\"area\", \"compact\"]\n        },\n        value: {\n            description: \"The currently selected file\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description: \"Function called when a file is selected\"\n        },\n        onEditItem: {\n            description: \"Function called when a file is edited\"\n        },\n        onRemoveItem: {\n            description: \"Function called when a file is removed\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePicker","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","handleSelect","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/FilePicker/primitives/FilePickerPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { FilePickerPrimitive } from "./FilePickerPrimitive.js";
 declare const meta: Meta<typeof FilePickerPrimitive>;
 export default meta;

package/FilePicker/primitives/FilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilePicker/primitives/FilePickerPrimitive.stories.js","sources":["../../../src/FilePicker/primitives/FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePickerPrimitive","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}
+{"version":3,"file":"FilePicker/primitives/FilePickerPrimitive.stories.js","sources":["../../../src/FilePicker/primitives/FilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { FilePickerPrimitive } from \"./FilePickerPrimitive.js\";\nimport type { FileItemDto } from \"~/FilePicker//index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst getFile = (): FileItemDto => {\n    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n    return {\n        name: \"selected-file.jpg\",\n        mimeType: \"image/jpeg\",\n        size: fileSize,\n        url: `https://picsum.photos/${width}/${height}`\n    };\n};\n\nconst meta: Meta<typeof FilePickerPrimitive> = {\n    title: \"Components/Form Primitives/FilePicker\",\n    component: FilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFile, setSelectedFile] = useState(args.value);\n        return (\n            <FilePickerPrimitive\n                {...args}\n                value={selectedFile}\n                onSelectItem={() => setSelectedFile(getFile())}\n                onRemoveItem={() => setSelectedFile(null)}\n                onEditItem={() => alert(`Editing File`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Upload background image\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        value: {\n            name: \"export.csv\",\n            url: \"export.csv\",\n            mimeType: \"text/csv\",\n            size: 100000\n        },\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <FilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        renderFilePreview: props => <FilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","getFile","width","height","fileSize","meta","FilePickerPrimitive","args","selectedFile","setSelectedFile","useState","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":";;AAKA,MAAMA,kBAAkB,CAACC,KAAaC,MAClCC,KAAK,KAAK,CAACA,KAAK,MAAM,KAAMD,CAAAA,MAAMD,MAAM,MAAMA;AAElD,MAAMG,UAAU;IACZ,MAAMC,QAAQL,gBAAgB,KAAK;IACnC,MAAMM,SAASN,gBAAgB,KAAK;IACpC,MAAMO,WAAWP,gBAAgB,QAAQ;IAEzC,OAAO;QACH,MAAM;QACN,UAAU;QACV,MAAMO;QACN,KAAK,CAAC,sBAAsB,EAAEF,MAAM,CAAC,EAAEC,QAAQ;IACnD;AACJ;AAEA,MAAME,OAAyC;IAC3C,OAAO;IACP,WAAWC;IACX,UAAU;QACN,cAAc;YAAE,QAAQ;QAAe;QACvC,YAAY;YAAE,QAAQ;QAAa;QACnC,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,cAAcC,gBAAgB,GAAGC,SAASH,KAAK,KAAK;QAC3D,OAAO,WAAP,GACI,oBAACD,qBAAmBA;YACf,GAAGC,IAAI;YACR,OAAOC;YACP,cAAc,IAAMC,gBAAgBR;YACpC,cAAc,IAAMQ,gBAAgB;YACpC,YAAY,IAAME,MAAM;;IAGpC;AACJ;AAEA,oCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGD,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGD,mBAAmB,IAAI;QAC1B,UAAU;IACd;AACJ;AAEO,MAAME,4BAAmC;IAC5C,MAAM;QACF,GAAGF,mBAAmB,IAAI;QAC1B,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGJ,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,qBAAqB,IAAI;QAC5B,UAAU;IACd;AACJ;AAEO,MAAME,8BAAqC;IAC9C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,SAAS;IACb;AACJ;AAEO,MAAMG,mBAA0B;IACnC,MAAM;QACF,GAAGP,SAAS,IAAI;QAChB,SAAS;IACb;AACJ;AAEO,MAAMQ,2BAAkC;IAC3C,MAAM;QACF,GAAGD,iBAAiB,IAAI;QACxB,UAAU;IACd;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,iBAAiB,IAAI;QACxB,SAAS;IACb;AACJ;AAEO,MAAMG,uBAA8B;IACvC,MAAM;QACF,GAAGV,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAAClB,oBAAoB,OAAO,CAAC,KAAK,EAAKkB;IACvE;AACJ;AAEO,MAAMC,4BAAmC;IAC5C,MAAM;QACF,GAAGF,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAU,GAAGkB,KAAK;;IAEtE;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,GAAGH,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAS,GAAGkB,KAAK;;IAErE;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGJ,qBAAqB,IAAI;QAC5B,mBAAmBC,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,KAAK;gBAAC,SAAS;gBAAgB,GAAGkB,KAAK;;IAE5E;AACJ;AAEO,MAAMI,0BAAiC;IAC1C,MAAM;QACF,GAAGf,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ,EAAKkB;IAC1E;AACJ;AAEO,MAAMK,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGkB,KAAK;;IAEzE;AACJ;AAEO,MAAMM,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGkB,KAAK;;IAExE;AACJ;AAEO,MAAMO,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBJ,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGkB,KAAK;;IAE/E;AACJ;AAEO,MAAMQ,mCAA0C;IACnD,MAAM;QACF,GAAGnB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGkB,KAAK;;IAE7E;AACJ;AAEO,MAAMS,kCAAyC;IAClD,MAAM;QACF,GAAGpB,SAAS,IAAI;QAChB,OAAO;YACH,MAAM;YACN,KAAK;YACL,UAAU;YACV,MAAM;QACV;QACA,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAc,GAAGkB,KAAK;;IAE7E;AACJ;AAEO,MAAMU,sCAA6C;IACtD,MAAM;QACF,GAAGrB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGkB,KAAK;;IAE/E;AACJ;AAEO,MAAMW,0BAAiC;IAC1C,MAAM;QACF,GAAGtB,SAAS,IAAI;QAChB,mBAAmBW,CAAAA,QAAAA,WAAAA,GAAS,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ,EAAKkB;IAC1E;AACJ;AAEO,MAAMY,+BAAsC;IAC/C,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAU,GAAGkB,KAAK;;IAEzE;AACJ;AAEO,MAAMa,8BAAqC;IAC9C,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAS,GAAGkB,KAAK;;IAExE;AACJ;AAEO,MAAMc,qCAA4C;IACrD,MAAM;QACF,GAAGH,wBAAwB,IAAI;QAC/B,mBAAmBX,CAAAA,QAAAA,WAAAA,GACf,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAC,SAAS;gBAAgB,GAAGkB,KAAK;;IAE/E;AACJ;AAEO,MAAMe,cAAqB;IAC9B,MAAM;QACF,GAAG3B,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAM4B,wBAA+B;IACxC,MAAM;QACF,GAAGD,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAME,gCAAuC;IAChD,MAAM;QACF,GAAGD,sBAAsB,IAAI;QAC7B,UAAU;IACd;AACJ;AAEO,MAAME,+BAAsC;IAC/C,MAAM;QACF,GAAGF,sBAAsB,IAAI;QAC7B,SAAS;IACb;AACJ;AAEO,MAAMG,0BAAiC;IAC1C,MAAM;QACF,GAAGJ,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMK,kCAAyC;IAClD,MAAM;QACF,GAAGD,wBAAwB,IAAI;QAC/B,UAAU;IACd;AACJ;AAEO,MAAME,iCAAwC;IACjD,MAAM;QACF,GAAGF,wBAAwB,IAAI;QAC/B,SAAS;IACb;AACJ;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGP,YAAY,IAAI;QACnB,SAAS;IACb;AACJ;AAEO,MAAMQ,8BAAqC;IAC9C,MAAM;QACF,GAAGD,oBAAoB,IAAI;QAC3B,UAAU;IACd;AACJ;AAEO,MAAME,6BAAoC;IAC7C,MAAM;QACF,GAAGF,oBAAoB,IAAI;QAC3B,SAAS;IACb;AACJ;AAEO,MAAMG,kCAAyC;IAClD,MAAM;QACF,GAAGV,YAAY,IAAI;QACnB,mBAAmBf,CAAAA,QAAAA,WAAAA,GAAS,oBAAClB,oBAAoB,OAAO,CAAC,QAAQ;gBAAE,GAAGkB,KAAK;gBAAE,OAAO;;IACxF;AACJ"}

package/FillViewport/FillViewport.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+type FillViewportProps = React.HTMLAttributes<HTMLDivElement>;
+declare const FillViewportHeight: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewportWidth: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+declare const FillViewport: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+    original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element) & {
+        original: ({ children, style: userStyle, ...rest }: FillViewportProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { FillViewportHeight, FillViewportWidth, FillViewport };

package/FillViewport/FillViewport.js

@@ -0,0 +1,67 @@
+import react, { useEffect, useRef, useState } from "react";
+import { makeDecoratable } from "../utils.js";
+function useFillViewportStyle(axis) {
+    const ref = useRef(null);
+    const [style, setStyle] = useState();
+    useEffect(()=>{
+        const el = ref.current;
+        if (!el) return;
+        const measure = ()=>{
+            const rect = el.getBoundingClientRect();
+            const next = {};
+            if ("width" === axis || "both" === axis) next.width = window.innerWidth - rect.left;
+            if ("height" === axis || "both" === axis) next.height = window.innerHeight - rect.top;
+            setStyle(next);
+        };
+        measure();
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.documentElement);
+        return ()=>ro.disconnect();
+    }, []);
+    return {
+        ref,
+        style
+    };
+}
+const BaseFillViewportHeight = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("height");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "height",
+        style: void 0 !== style ? {
+            height: style.height,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewportWidth = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("width");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "width",
+        style: void 0 !== style ? {
+            width: style.width,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const BaseFillViewport = ({ children, style: userStyle, ...rest })=>{
+    const { ref, style } = useFillViewportStyle("both");
+    return /*#__PURE__*/ react.createElement("div", {
+        ...rest,
+        ref: ref,
+        "data-fill-viewport": "both",
+        style: void 0 !== style ? {
+            ...style,
+            ...userStyle
+        } : userStyle
+    }, children);
+};
+const FillViewportHeight = makeDecoratable("FillViewportHeight", BaseFillViewportHeight);
+const FillViewportWidth = makeDecoratable("FillViewportWidth", BaseFillViewportWidth);
+const FillViewport = makeDecoratable("FillViewport", BaseFillViewport);
+export { FillViewport, FillViewportHeight, FillViewportWidth };
+
+//# sourceMappingURL=FillViewport.js.map

package/FillViewport/FillViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FillViewport/FillViewport.js","sources":["../../src/FillViewport/FillViewport.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface FillViewportStyle {\n    width?: number;\n    height?: number;\n}\n\nfunction useFillViewportStyle(axis: \"width\" | \"height\" | \"both\") {\n    const ref = useRef<HTMLDivElement>(null);\n    const [style, setStyle] = useState<FillViewportStyle>();\n\n    useEffect(() => {\n        const el = ref.current;\n        if (!el) {\n            return;\n        }\n\n        const measure = () => {\n            const rect = el.getBoundingClientRect();\n            const next: FillViewportStyle = {};\n\n            if (axis === \"width\" || axis === \"both\") {\n                next.width = window.innerWidth - rect.left;\n            }\n\n            if (axis === \"height\" || axis === \"both\") {\n                next.height = window.innerHeight - rect.top;\n            }\n\n            setStyle(next);\n        };\n\n        measure();\n\n        const ro = new ResizeObserver(measure);\n        ro.observe(document.documentElement);\n\n        return () => ro.disconnect();\n    }, []);\n\n    return { ref, style };\n}\n\ntype FillViewportProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst BaseFillViewportHeight = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"height\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"height\"\n            style={style !== undefined ? { height: style.height, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewportWidth = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"width\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"width\"\n            style={style !== undefined ? { width: style.width, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst BaseFillViewport = ({ children, style: userStyle, ...rest }: FillViewportProps) => {\n    const { ref, style } = useFillViewportStyle(\"both\");\n\n    return (\n        <div\n            {...rest}\n            ref={ref}\n            data-fill-viewport=\"both\"\n            style={style !== undefined ? { ...style, ...userStyle } : userStyle}\n        >\n            {children}\n        </div>\n    );\n};\n\nconst FillViewportHeight = makeDecoratable(\"FillViewportHeight\", BaseFillViewportHeight);\nconst FillViewportWidth = makeDecoratable(\"FillViewportWidth\", BaseFillViewportWidth);\nconst FillViewport = makeDecoratable(\"FillViewport\", BaseFillViewport);\n\nexport { FillViewportHeight, FillViewportWidth, FillViewport };\n"],"names":["useFillViewportStyle","axis","ref","useRef","style","setStyle","useState","useEffect","el","measure","rect","next","window","ro","ResizeObserver","document","BaseFillViewportHeight","children","userStyle","rest","undefined","BaseFillViewportWidth","BaseFillViewport","FillViewportHeight","makeDecoratable","FillViewportWidth","FillViewport"],"mappings":";;AAQA,SAASA,qBAAqBC,IAAiC;IAC3D,MAAMC,MAAMC,OAAuB;IACnC,MAAM,CAACC,OAAOC,SAAS,GAAGC;IAE1BC,UAAU;QACN,MAAMC,KAAKN,IAAI,OAAO;QACtB,IAAI,CAACM,IACD;QAGJ,MAAMC,UAAU;YACZ,MAAMC,OAAOF,GAAG,qBAAqB;YACrC,MAAMG,OAA0B,CAAC;YAEjC,IAAIV,AAAS,YAATA,QAAoBA,AAAS,WAATA,MACpBU,KAAK,KAAK,GAAGC,OAAO,UAAU,GAAGF,KAAK,IAAI;YAG9C,IAAIT,AAAS,aAATA,QAAqBA,AAAS,WAATA,MACrBU,KAAK,MAAM,GAAGC,OAAO,WAAW,GAAGF,KAAK,GAAG;YAG/CL,SAASM;QACb;QAEAF;QAEA,MAAMI,KAAK,IAAIC,eAAeL;QAC9BI,GAAG,OAAO,CAACE,SAAS,eAAe;QAEnC,OAAO,IAAMF,GAAG,UAAU;IAC9B,GAAG,EAAE;IAEL,OAAO;QAAEX;QAAKE;IAAM;AACxB;AAIA,MAAMY,yBAAyB,CAAC,EAAEC,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACtF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,QAAQA,MAAM,MAAM;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAErED;AAGb;AAEA,MAAMI,wBAAwB,CAAC,EAAEJ,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IACrF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,OAAOA,MAAM,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEnED;AAGb;AAEA,MAAMK,mBAAmB,CAAC,EAAEL,QAAQ,EAAE,OAAOC,SAAS,EAAE,GAAGC,MAAyB;IAChF,MAAM,EAAEjB,GAAG,EAAEE,KAAK,EAAE,GAAGJ,qBAAqB;IAE5C,OAAO,WAAP,GACI,oBAAC;QACI,GAAGmB,IAAI;QACR,KAAKjB;QACL,sBAAmB;QACnB,OAAOE,AAAUgB,WAAVhB,QAAsB;YAAE,GAAGA,KAAK;YAAE,GAAGc,SAAS;QAAC,IAAIA;OAEzDD;AAGb;AAEA,MAAMM,qBAAqBC,gBAAgB,sBAAsBR;AACjE,MAAMS,oBAAoBD,gBAAgB,qBAAqBH;AAC/D,MAAMK,eAAeF,gBAAgB,gBAAgBF"}

package/FillViewport/index.d.ts

@@ -0,0 +1 @@
+export * from "./FillViewport.js";

package/FillViewport/index.js

@@ -0,0 +1 @@
+export * from "./FillViewport.js";

package/Grid/Grid.d.ts

@@ -31,7 +31,7 @@ declare const gridVariants: (props?: ({
     gap?: "none" | "small" | "compact" | "micro" | "comfortable" | "spacious" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
-    children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;
+    children: null | React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column> | null>;
 }
 declare const Grid: (({ gap, children, className, ...props }: GridProps) => React.JSX.Element) & {
     original: ({ gap, children, className, ...props }: GridProps) => React.JSX.Element;

package/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid/Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column>>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"names":["columnVariants","cva","ColumnBase","span","align","children","className","offset","props","cn","Column","makeDecoratable","gridVariants","GridBase","gap","DecoratableGrid","Grid","withStaticProps"],"mappings":";;AAGA,MAAMA,iBAAiBC,IAAI,IAAI;IAC3B,UAAU;QACN,MAAM;YACF,MAAM;YACN,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,QAAQ;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAOA,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,OAAoB,GAC5E,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGT,eAAe;YAAEG;YAAMI;YAAQH;QAAM,IAAIE;OAClED;AAKb,MAAMK,SAASC,gBAAgB,UAAUT;AAEzC,MAAMU,eAAeX,IAAI,QAAQ;IAC7B,UAAU;QACN,KAAK;YACD,MAAM;YACN,OAAO;YACP,OAAO;YACP,SAAS;YACT,aAAa;YACb,UAAU;QACd;IACJ;IACA,iBAAiB;QACb,KAAK;IACT;AACJ;AAUA,MAAMY,WAAW,CAAC,EAAEC,GAAG,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAAkB,GACxD,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG,gBAAgBG,aAAa;YAAEE;QAAI,IAAIR;OAChED;AAKb,MAAMU,kBAAkBJ,gBAAgB,QAAQE;AAEhD,MAAMG,OAAOC,gBAAgBF,iBAAiB;IAAEL,QAAAA;AAAO"}
+{"version":3,"file":"Grid/Grid.js","sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, withStaticProps, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\nconst columnVariants = cva(\"\", {\n    variants: {\n        span: {\n            auto: \"col-auto\",\n            1: \"col-span-1\",\n            2: \"col-span-2\",\n            3: \"col-span-3\",\n            4: \"col-span-4\",\n            5: \"col-span-5\",\n            6: \"col-span-6\",\n            7: \"col-span-7\",\n            8: \"col-span-8\",\n            9: \"col-span-9\",\n            10: \"col-span-10\",\n            11: \"col-span-11\",\n            12: \"col-span-12\"\n        },\n        offset: {\n            1: \"col-start-2\",\n            2: \"col-start-3\",\n            3: \"col-start-4\",\n            4: \"col-start-5\",\n            5: \"col-start-6\",\n            6: \"col-start-7\",\n            7: \"col-start-8\",\n            8: \"col-start-9\",\n            9: \"col-start-10\",\n            10: \"col-start-11\",\n            11: \"col-start-12\"\n        },\n        align: {\n            top: \"self-start\",\n            middle: \"self-center\",\n            bottom: \"self-end\"\n        }\n    },\n    defaultVariants: {\n        span: \"auto\"\n    }\n});\n\ninterface ColumnProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {\n    children?: React.ReactNode;\n}\n\nconst ColumnBase = ({ span, align, children, className, offset, ...props }: ColumnProps) => {\n    return (\n        <div {...props} className={cn(columnVariants({ span, offset, align }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst Column = makeDecoratable(\"Column\", ColumnBase);\n\nconst gridVariants = cva(\"grid\", {\n    variants: {\n        gap: {\n            none: \"gap-0\",\n            micro: \"gap-xs\",\n            small: \"gap-sm\",\n            compact: \"gap-md\",\n            comfortable: \"gap-lg\",\n            spacious: \"gap-xl\"\n        }\n    },\n    defaultVariants: {\n        gap: \"comfortable\"\n    }\n});\n\ninterface GridProps\n    extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {\n    children:\n        | null\n        | React.ReactElement<ColumnProps, typeof Column>\n        | Array<React.ReactElement<ColumnProps, typeof Column> | null>;\n}\n\nconst GridBase = ({ gap, children, className, ...props }: GridProps) => {\n    return (\n        <div {...props} className={cn(\"grid-cols-12\", gridVariants({ gap }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableGrid = makeDecoratable(\"Grid\", GridBase);\n\nconst Grid = withStaticProps(DecoratableGrid, { Column });\n\nexport { Grid, type GridProps, type ColumnProps };\n"],"names":["columnVariants","cva","ColumnBase","span","align","children","className","offset","props","cn","Column","makeDecoratable","gridVariants","GridBase","gap","DecoratableGrid","Grid","withStaticProps"],"mappings":";;AAGA,MAAMA,iBAAiBC,IAAI,IAAI;IAC3B,UAAU;QACN,MAAM;YACF,MAAM;YACN,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;YACJ,IAAI;QACR;QACA,QAAQ;YACJ,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,GAAG;YACH,IAAI;YACJ,IAAI;QACR;QACA,OAAO;YACH,KAAK;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,MAAM;IACV;AACJ;AAOA,MAAMC,aAAa,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGC,OAAoB,GAC5E,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAGT,eAAe;YAAEG;YAAMI;YAAQH;QAAM,IAAIE;OAClED;AAKb,MAAMK,SAASC,gBAAgB,UAAUT;AAEzC,MAAMU,eAAeX,IAAI,QAAQ;IAC7B,UAAU;QACN,KAAK;YACD,MAAM;YACN,OAAO;YACP,OAAO;YACP,SAAS;YACT,aAAa;YACb,UAAU;QACd;IACJ;IACA,iBAAiB;QACb,KAAK;IACT;AACJ;AAUA,MAAMY,WAAW,CAAC,EAAEC,GAAG,EAAET,QAAQ,EAAEC,SAAS,EAAE,GAAGE,OAAkB,GACxD,WAAP,GACI,oBAAC;QAAK,GAAGA,KAAK;QAAE,WAAWC,GAAG,gBAAgBG,aAAa;YAAEE;QAAI,IAAIR;OAChED;AAKb,MAAMU,kBAAkBJ,gBAAgB,QAAQE;AAEhD,MAAMG,OAAOC,gBAAgBF,iBAAiB;IAAEL,QAAAA;AAAO"}

package/Grid/Grid.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Grid } from "./Grid.js";
 declare const meta: Meta<typeof Grid>;
 export default meta;

package/Grid/Grid.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid/Grid.stories.js","sources":["../../src/Grid/Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Grid","Default","StyledColumn","WithGapNone","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","Documentation","args"],"mappings":";;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,WAAW;QACX,UAAU,WAAV,GACI,wDACI,oBAACC,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;;IAGjC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMO,kBAAyB;IAClC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,YAAY;QACR,QAAQ;IACZ;IACA,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDAEI,oBAACC,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BACzC,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BAGzC,oBAACA,cAAYA;YAAC,MAAM;YAAI,QAAQ;YAAG,OAAO;0BAC1C,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAI,OAAO;;IAG3C;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,oBAACX,MAASW,MAAAA,WAAAA,GACN,oBAACX,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD;IAM1F,MAAM;QACF,KAAK;QACL,WAAW;IACf;IACA,UAAU;QACN,KAAK;YACD,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;gBAAS;gBAAW;gBAAe;aAAW;YACzE,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}
+{"version":3,"file":"Grid/Grid.stories.js","sources":["../../src/Grid/Grid.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Grid } from \"./Grid.js\";\nimport { StyledColumn } from \"./stories/StyledColumn.js\";\n\nconst meta: Meta<typeof Grid> = {\n    title: \"Components/Grid\",\n    component: Grid,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Grid>;\n\nexport const Default: Story = {\n    args: {\n        className: \"bg-neutral-light p-md w-full\",\n        children: (\n            <>\n                <StyledColumn index={1} />\n                <StyledColumn index={2} span={3} />\n                <StyledColumn index={3} />\n                <StyledColumn index={4} />\n                <StyledColumn index={5} />\n                <StyledColumn index={6} />\n                <StyledColumn index={7} span={2} />\n                <StyledColumn index={8} />\n                <StyledColumn index={9} />\n            </>\n        )\n    }\n};\n\nexport const WithGapNone: Story = {\n    args: {\n        ...Default.args,\n        gap: \"none\"\n    }\n};\n\nexport const WithGapMicro: Story = {\n    args: {\n        ...Default.args,\n        gap: \"micro\"\n    }\n};\n\nexport const WithGapSmall: Story = {\n    args: {\n        ...Default.args,\n        gap: \"small\"\n    }\n};\n\nexport const WithGapCompact: Story = {\n    args: {\n        ...Default.args,\n        gap: \"compact\"\n    }\n};\n\nexport const WithGapComfortable: Story = {\n    args: {\n        ...Default.args,\n        gap: \"comfortable\"\n    }\n};\n\nexport const WithGapSpacious: Story = {\n    args: {\n        ...Default.args,\n        gap: \"spacious\"\n    }\n};\n\nexport const WithOffset: Story = {\n    parameters: {\n        layout: \"padded\"\n    },\n    args: {\n        ...Default.args,\n        children: (\n            <>\n                {/* Row 1 */}\n                <StyledColumn span={8} offset={2} index={1} />\n                <Grid.Column span={2} />\n\n                {/* Row 2 */}\n                <StyledColumn span={8} offset={4} index={1} />\n\n                {/* Row 3 */}\n                <StyledColumn span={10} offset={1} index={1} />\n                <Grid.Column span={1} />\n\n                {/* Row 4 */}\n                <StyledColumn span={12} index={1} />\n            </>\n        )\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return (\n            <Grid {...args}>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 1\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={3}\n                >\n                    Col 2<br />\n                    Span: 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 3\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 4\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 5\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 6\n                </Grid.Column>\n                <Grid.Column\n                    className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\"\n                    span={2}\n                >\n                    Col 7<br />\n                    Span: 2\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 8\n                </Grid.Column>\n                <Grid.Column className=\"bg-primary text-neutral-light p-2 text-md rounded-sm\">\n                    Col 9\n                </Grid.Column>\n            </Grid>\n        );\n    },\n    args: {\n        gap: \"comfortable\",\n        className: \"bg-neutral-light p-md w-full\"\n    },\n    argTypes: {\n        gap: {\n            description: \"Spacing between grid columns\",\n            control: \"select\",\n            options: [\"none\", \"micro\", \"small\", \"compact\", \"comfortable\", \"spacious\"],\n            defaultValue: \"comfortable\"\n        },\n        className: {\n            description:\n                \"Additional CSS class names. You can pass multiple class names that will be applied to Grid.\",\n            control: \"text\"\n        }\n    }\n};\n"],"names":["meta","Grid","Default","StyledColumn","WithGapNone","WithGapMicro","WithGapSmall","WithGapCompact","WithGapComfortable","WithGapSpacious","WithOffset","Documentation","args"],"mappings":";;;AAMA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAIR,MAAME,UAAiB;IAC1B,MAAM;QACF,WAAW;QACX,UAAU,WAAV,GACI,wDACI,oBAACC,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;YAAG,MAAM;0BAC9B,oBAACA,cAAYA;YAAC,OAAO;0BACrB,oBAACA,cAAYA;YAAC,OAAO;;IAGjC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMG,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMM,qBAA4B;IACrC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMO,kBAAyB;IAClC,MAAM;QACF,GAAGP,QAAQ,IAAI;QACf,KAAK;IACT;AACJ;AAEO,MAAMQ,aAAoB;IAC7B,YAAY;QACR,QAAQ;IACZ;IACA,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,UAAU,WAAV,GACI,wDAEI,oBAACC,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BACzC,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAG,QAAQ;YAAG,OAAO;0BAGzC,oBAACA,cAAYA;YAAC,MAAM;YAAI,QAAQ;YAAG,OAAO;0BAC1C,oBAACF,KAAK,MAAM;YAAC,MAAM;0BAGnB,oBAACE,cAAYA;YAAC,MAAM;YAAI,OAAO;;IAG3C;AACJ;AAEO,MAAMQ,gBAAuB;IAChC,QAAQC,CAAAA,OACG,WAAP,GACI,oBAACX,MAASW,MAAAA,WAAAA,GACN,oBAACX,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YACR,WAAU;YACV,MAAM;WACT,uBACQ,oBAAC,aAAK,0BAGf,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD,wBAG9E,oBAACA,KAAK,MAAM;YAAC,WAAU;WAAuD;IAM1F,MAAM;QACF,KAAK;QACL,WAAW;IACf;IACA,UAAU;QACN,KAAK;YACD,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;gBAAS;gBAAS;gBAAW;gBAAe;aAAW;YACzE,cAAc;QAClB;QACA,WAAW;YACP,aACI;YACJ,SAAS;QACb;IACJ;AACJ"}

package/HeaderBar/HeaderBar.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { HeaderBar } from "./HeaderBar.js";
 declare const meta: Meta<typeof HeaderBar>;
 export default meta;

package/HeaderBar/HeaderBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBar/HeaderBar.stories.js","sources":["../../src/HeaderBar/HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar.js\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"flex gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div className={\"flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light\"}>\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\"\n        }\n    }\n};\n"],"names":["meta","HeaderBar","Story","StartExample","Text","MiddleExample","EndExample","Button","Avatar","IconButton","KeyboardArrowRightIcon","console","Default","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation"],"mappings":";;;;;;AAQA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,0BAAeF;AAIf,MAAMG,eAAe,kBACjB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB;AAIT,MAAMC,gBAAgB,kBAAM,0CAAE;AAE9B,MAAMC,aAAa,kBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAS,MAAM;QAAM,MAAM;sBAC5C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,qBAAO,oBAACA,OAAO,KAAK;YAAC,KAAK;;QAC1B,wBAAU,oBAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;sBAE3C,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,gBAAsBA;QAC7B,SAAS,IAAMC,QAAQ,GAAG,CAAC;;AAMpC,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,oBAACT,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACV,cAAYA;IACxB;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,QAAQ,WAAR,GAAQ,oBAACT,eAAaA;IAC1B;AACJ;AAEO,MAAMU,iBAAwB;IACjC,MAAM;QACF,KAAK,WAAL,GAAK,oBAACT,YAAUA;IACpB;AACJ;AAEO,MAAMU,sBAA6B;IACtC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACb,cAAYA;QACpB,KAAK,WAAL,GAAK,oBAACG,YAAUA;IACpB;AACJ;AAEO,MAAMW,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GACI,wDACI,oBAACd,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA;QAGrB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACf,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,QAAQ;YACJ,aAAa;QACjB;QACA,KAAK;YACD,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"file":"HeaderBar/HeaderBar.stories.js","sources":["../../src/HeaderBar/HeaderBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as KeyboardArrowRightIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { HeaderBar } from \"./HeaderBar.js\";\nimport React from \"react\";\nimport { Button, IconButton } from \"~/Button/index.js\";\nimport { Avatar } from \"~/Avatar/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\nconst meta: Meta<typeof HeaderBar> = {\n    title: \"Components/HeaderBar\",\n    component: HeaderBar,\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f4f4f4] h-[500px] w-[850px]  rounded-[5px] px-[50px] content-center\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof HeaderBar>;\n\nconst StartExample = () => (\n    <Text size={\"sm\"} className={\"text-neutral-dimmed\"}>\n        {\"Headless CMS / Articles / The best article ever\"}\n    </Text>\n);\n\nconst MiddleExample = () => <>Content in the middle</>;\n\nconst EndExample = () => (\n    <div className={\"flex gap-x-sm\"}>\n        <Button variant={\"ghost\"} size={\"md\"} text={\"Root tenant\"} />\n        <div className={\"flex items-center rounded-md gap-xxs py-xs px-xs bg-neutral-light\"}>\n            <Avatar\n                size={\"sm\"}\n                variant={\"strong\"}\n                image={<Avatar.Image src={\"https://i.pravatar.cc/300\"} />}\n                fallback={<Avatar.Fallback delayMs={0}>W</Avatar.Fallback>}\n            />\n            <IconButton\n                variant={\"ghost\"}\n                size={\"xs\"}\n                color={\"neutral-strong\"}\n                icon={<KeyboardArrowRightIcon />}\n                onClick={() => console.log(\"clicked\")}\n            />\n        </div>\n    </div>\n);\n\nexport const Default: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const StartContentOnly: Story = {\n    args: {\n        start: <StartExample />\n    }\n};\n\nexport const MiddleContentOnly: Story = {\n    args: {\n        middle: <MiddleExample />\n    }\n};\n\nexport const EndContentOnly: Story = {\n    args: {\n        end: <EndExample />\n    }\n};\n\nexport const StartEndContentOnly: Story = {\n    args: {\n        start: <StartExample />,\n        end: <EndExample />\n    }\n};\n\nexport const MoreStartContent: Story = {\n    args: {\n        start: (\n            <>\n                <StartExample />\n                <StartExample />\n                <StartExample />\n            </>\n        ),\n        middle: <MiddleExample />,\n        end: <EndExample />\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        start: <StartExample />,\n        middle: <MiddleExample />,\n        end: <EndExample />\n    },\n    argTypes: {\n        start: {\n            description: \"Content displayed at the start of the header bar\"\n        },\n        middle: {\n            description: \"Content displayed in the middle of the header bar\"\n        },\n        end: {\n            description: \"Content displayed at the end of the header bar\"\n        }\n    }\n};\n"],"names":["meta","HeaderBar","Story","StartExample","Text","MiddleExample","EndExample","Button","Avatar","IconButton","KeyboardArrowRightIcon","console","Default","StartContentOnly","MiddleContentOnly","EndContentOnly","StartEndContentOnly","MoreStartContent","Documentation"],"mappings":";;;;;;AAQA,MAAMA,OAA+B;IACjC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,0BAAeF;AAIf,MAAMG,eAAe,kBACjB,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxB;AAIT,MAAMC,gBAAgB,kBAAM,0CAAE;AAE9B,MAAMC,aAAa,kBACf,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QAAC,SAAS;QAAS,MAAM;QAAM,MAAM;sBAC5C,oBAAC;QAAI,WAAW;qBACZ,oBAACC,QAAMA;QACH,MAAM;QACN,SAAS;QACT,qBAAO,oBAACA,OAAO,KAAK;YAAC,KAAK;;QAC1B,wBAAU,oBAACA,OAAO,QAAQ;YAAC,SAAS;WAAG;sBAE3C,oBAACC,YAAUA;QACP,SAAS;QACT,MAAM;QACN,OAAO;QACP,oBAAM,oBAACC,gBAAsBA;QAC7B,SAAS,IAAMC,QAAQ,GAAG,CAAC;;AAMpC,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO,WAAP,GAAO,oBAACT,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMO,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACV,cAAYA;IACxB;AACJ;AAEO,MAAMW,oBAA2B;IACpC,MAAM;QACF,QAAQ,WAAR,GAAQ,oBAACT,eAAaA;IAC1B;AACJ;AAEO,MAAMU,iBAAwB;IACjC,MAAM;QACF,KAAK,WAAL,GAAK,oBAACT,YAAUA;IACpB;AACJ;AAEO,MAAMU,sBAA6B;IACtC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACb,cAAYA;QACpB,KAAK,WAAL,GAAK,oBAACG,YAAUA;IACpB;AACJ;AAEO,MAAMW,mBAA0B;IACnC,MAAM;QACF,OAAO,WAAP,GACI,wDACI,oBAACd,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA,OAAAA,WAAAA,GACb,oBAACA,cAAYA;QAGrB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;AACJ;AAEO,MAAMY,gBAAuB;IAChC,MAAM;QACF,OAAO,WAAP,GAAO,oBAACf,cAAYA;QACpB,QAAQ,WAAR,GAAQ,oBAACE,eAAaA;QACtB,KAAK,WAAL,GAAK,oBAACC,YAAUA;IACpB;IACA,UAAU;QACN,OAAO;YACH,aAAa;QACjB;QACA,QAAQ;YACJ,aAAa;QACjB;QACA,KAAK;YACD,aAAa;QACjB;IACJ;AACJ"}

package/Heading/Heading.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Heading } from "./Heading.js";
 declare const meta: Meta<typeof Heading>;
 export default meta;