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

package/Toggle/primitives/TogglePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle/primitives/TogglePrimitive.stories.js","sources":["../../../src/Toggle/primitives/TogglePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { TogglePrimitive } from \"./TogglePrimitive.js\";\n\nconst meta: Meta<typeof TogglePrimitive> = {\n    title: \"Components/Form Primitives/Toggle\",\n    component: TogglePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <TogglePrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TogglePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const WithIconTrailing: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const OutlineChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\",\n        checked: true\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\",\n        checked: true\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"sm\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"lg\"\n    }\n};\n\nexport const SizeXL: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"xl\"\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const DisabledChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true,\n        disabled: true\n    }\n};\n"],"names":["meta","TogglePrimitive","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","WithIconTrailing","IconOnly","IconOnlyChecked","Outline","OutlineChecked","Ghost","GhostChecked","SizeSmall","SizeLarge","SizeXL","Disabled","DisabledChecked"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IACnB;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACD,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAME,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACF,gBAAQA;QACf,cAAc;IAClB;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACH,gBAAQA;IACnB;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACJ,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;IACd;AACJ"}
+{"version":3,"file":"Toggle/primitives/TogglePrimitive.stories.js","sources":["../../../src/Toggle/primitives/TogglePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { TogglePrimitive } from \"./TogglePrimitive.js\";\n\nconst meta: Meta<typeof TogglePrimitive> = {\n    title: \"Components/Form Primitives/Toggle\",\n    component: TogglePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [checked, setChecked] = useState(args.checked);\n        return (\n            <TogglePrimitive {...args} checked={checked} onChange={value => setChecked(value)} />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TogglePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Toggle\"\n    }\n};\n\nexport const Checked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />\n    }\n};\n\nexport const WithIconChecked: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const WithIconTrailing: Story = {\n    args: {\n        label: \"Bold\",\n        icon: <BoldIcon />,\n        iconPosition: \"end\"\n    }\n};\n\nexport const IconOnly: Story = {\n    args: {\n        icon: <BoldIcon />\n    }\n};\n\nexport const IconOnlyChecked: Story = {\n    args: {\n        icon: <BoldIcon />,\n        checked: true\n    }\n};\n\nexport const Outline: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\"\n    }\n};\n\nexport const OutlineChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"outline\",\n        checked: true\n    }\n};\n\nexport const Ghost: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\"\n    }\n};\n\nexport const GhostChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        variant: \"ghost\",\n        checked: true\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"sm\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"lg\"\n    }\n};\n\nexport const SizeXL: Story = {\n    args: {\n        label: \"Toggle\",\n        size: \"xl\"\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Toggle\",\n        disabled: true\n    }\n};\n\nexport const DisabledChecked: Story = {\n    args: {\n        label: \"Toggle\",\n        checked: true,\n        disabled: true\n    }\n};\n"],"names":["meta","TogglePrimitive","args","checked","setChecked","useState","value","Default","Checked","WithIcon","BoldIcon","WithIconChecked","WithIconTrailing","IconOnly","IconOnlyChecked","Outline","OutlineChecked","Ghost","GhostChecked","SizeSmall","SizeLarge","SizeXL","Disabled","DisabledChecked"],"mappings":";;;AAKA,MAAMA,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,SAASC,WAAW,GAAGC,SAASH,KAAK,OAAO;QACnD,OAAO,WAAP,GACI,oBAACD,iBAAeA;YAAE,GAAGC,IAAI;YAAE,SAASC;YAAS,UAAUG,CAAAA,QAASF,WAAWE;;IAEnF;AACJ;AAEA,gCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QACF,OAAO;IACX;AACJ;AAEO,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IACnB;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACD,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAME,mBAA0B;IACnC,MAAM;QACF,OAAO;QACP,MAAM,WAAN,GAAM,oBAACF,gBAAQA;QACf,cAAc;IAClB;AACJ;AAEO,MAAMG,WAAkB;IAC3B,MAAM;QACF,MAAM,WAAN,GAAM,oBAACH,gBAAQA;IACnB;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,MAAM,WAAN,GAAM,oBAACJ,gBAAQA;QACf,SAAS;IACb;AACJ;AAEO,MAAMK,UAAiB;IAC1B,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,QAAe;IACxB,MAAM;QACF,OAAO;QACP,SAAS;IACb;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,OAAO;QACP,SAAS;QACT,SAAS;IACb;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,YAAmB;IAC5B,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,SAAgB;IACzB,MAAM;QACF,OAAO;QACP,MAAM;IACV;AACJ;AAEO,MAAMC,WAAkB;IAC3B,MAAM;QACF,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMC,kBAAyB;IAClC,MAAM;QACF,OAAO;QACP,SAAS;QACT,UAAU;IACd;AACJ"}

package/ToggleGroup/ToggleGroup.stories.d.ts

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

package/ToggleGroup/ToggleGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/ToggleGroup.stories.js","sources":["../../src/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { ToggleGroup } from \"~/ToggleGroup/index.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroup> = {\n    title: \"Components/Form/ToggleGroup\",\n    component: ToggleGroup,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroup>;\n\nexport const Default: Story = {\n    args: { items: textItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, label: \"Alignment\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        items: iconTextItems,\n        label: \"Text formatting\",\n        description: \"Choose one or more formatting options.\",\n        bordered: true\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        note: \"Note: Formatting applies to selected text only.\",\n        bordered: true\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        items: textItems,\n        label: \"Text formatting\",\n        bordered: true,\n        validation: { isValid: false, message: \"Please select a formatting option.\" }\n    }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true, disabled: true }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    },\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        bordered: true,\n        description: \"Choose a text alignment option.\",\n        note: \"Note: Alignment applies to the selected paragraph.\"\n    },\n    argTypes: {\n        label: { description: \"Label above the group\", control: \"text\" },\n        description: { description: \"Description below the label\", control: \"text\" },\n        note: { description: \"Note below the group\", control: \"text\" },\n        bordered: { description: \"Show a border around the group container\", control: \"boolean\" },\n        disabled: { description: \"Disables all items\", control: \"boolean\" },\n        variant: {\n            description: \"Visual style of items\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of items\",\n            control: \"select\",\n            options: [\"sm\", \"md\"]\n        },\n        onChange: { description: \"Called with the new value when selection changes\" }\n    }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroup","Story","Tooltip","args","value","setValue","useState","v","Default","IconOnly","IconOnlyGhost","WithIconAndText","Outline","Ghost","WithDescription","WithNotes","WithErrors","Multiple","Disabled","Documentation"],"mappings":"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"}
+{"version":3,"file":"ToggleGroup/ToggleGroup.stories.js","sources":["../../src/ToggleGroup/ToggleGroup.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { ToggleGroup } from \"~/ToggleGroup/index.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroup> = {\n    title: \"Components/Form/ToggleGroup\",\n    component: ToggleGroup,\n    parameters: {\n        layout: \"padded\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <Story />\n            </Tooltip.Provider>\n        )\n    ],\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroup>;\n\nexport const Default: Story = {\n    args: { items: textItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, label: \"Alignment\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, label: \"Text formatting\", variant: \"ghost\", bordered: true }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        items: iconTextItems,\n        label: \"Text formatting\",\n        description: \"Choose one or more formatting options.\",\n        bordered: true\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        note: \"Note: Formatting applies to selected text only.\",\n        bordered: true\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        items: textItems,\n        label: \"Text formatting\",\n        bordered: true,\n        validation: { isValid: false, message: \"Please select a formatting option.\" }\n    }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, label: \"Text formatting\", bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, label: \"Alignment\", bordered: true, disabled: true }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroup\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    },\n    args: {\n        items: iconItems,\n        label: \"Alignment\",\n        bordered: true,\n        description: \"Choose a text alignment option.\",\n        note: \"Note: Alignment applies to the selected paragraph.\"\n    },\n    argTypes: {\n        label: { description: \"Label above the group\", control: \"text\" },\n        description: { description: \"Description below the label\", control: \"text\" },\n        note: { description: \"Note below the group\", control: \"text\" },\n        bordered: { description: \"Show a border around the group container\", control: \"boolean\" },\n        disabled: { description: \"Disables all items\", control: \"boolean\" },\n        variant: {\n            description: \"Visual style of items\",\n            control: \"select\",\n            options: [\"primary\", \"outline\", \"ghost\", \"ghost-negative\"]\n        },\n        size: {\n            description: \"Size of items\",\n            control: \"select\",\n            options: [\"sm\", \"md\"]\n        },\n        onChange: { description: \"Called with the new value when selection changes\" }\n    }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroup","Story","Tooltip","args","value","setValue","useState","v","Default","IconOnly","IconOnlyGhost","WithIconAndText","Outline","Ghost","WithDescription","WithNotes","WithErrors","Multiple","Disabled","Documentation"],"mappings":"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"}

package/ToggleGroup/domains/ToggleGroupItem.d.ts

@@ -6,6 +6,7 @@ export declare class ToggleGroupItem {
     private readonly _disabled;
     private readonly _icon;
     private readonly _iconPosition;
+    private readonly _tooltip?;
     protected constructor(data: {
         id: string;
         label: any;
@@ -13,6 +14,7 @@ export declare class ToggleGroupItem {
         disabled: boolean;
         icon: any;
         iconPosition: "start" | "end";
+        tooltip?: any;
     });
     static create(data: ToggleGroupItemParams): ToggleGroupItem;
     get id(): string;
@@ -21,4 +23,5 @@ export declare class ToggleGroupItem {
     get disabled(): boolean;
     get icon(): any;
     get iconPosition(): "end" | "start";
+    get tooltip(): any;
 }

package/ToggleGroup/domains/ToggleGroupItem.js

@@ -7,6 +7,7 @@ class ToggleGroupItem {
         this._disabled = data.disabled;
         this._icon = data.icon;
         this._iconPosition = data.iconPosition;
+        this._tooltip = data.tooltip;
     }
     static create(data) {
         return new ToggleGroupItem({
@@ -15,7 +16,8 @@ class ToggleGroupItem {
             value: data.value,
             disabled: data.disabled ?? false,
             icon: data.icon,
-            iconPosition: data.iconPosition ?? "start"
+            iconPosition: data.iconPosition ?? "start",
+            tooltip: data.tooltip
         });
     }
     get id() {
@@ -36,6 +38,9 @@ class ToggleGroupItem {
     get iconPosition() {
         return this._iconPosition;
     }
+    get tooltip() {
+        return this._tooltip;
+    }
 }
 export { ToggleGroupItem };
 

package/ToggleGroup/domains/ToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/domains/ToggleGroupItem.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItem.ts"],"sourcesContent":["import type { ToggleGroupItemParams } from \"./ToggleGroupItemParams.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class ToggleGroupItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string;\n    private readonly _disabled: boolean;\n    private readonly _icon: any;\n    private readonly _iconPosition: \"start\" | \"end\";\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string;\n        disabled: boolean;\n        icon: any;\n        iconPosition: \"start\" | \"end\";\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n        this._iconPosition = data.iconPosition;\n    }\n\n    static create(data: ToggleGroupItemParams): ToggleGroupItem {\n        return new ToggleGroupItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon,\n            iconPosition: data.iconPosition ?? \"start\"\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n\n    get icon() {\n        return this._icon;\n    }\n\n    get iconPosition() {\n        return this._iconPosition;\n    }\n}\n"],"names":["ToggleGroupItem","data","generateId"],"mappings":";AAGO,MAAMA;IAQT,YAAsBC,IAOrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,aAAa,GAAGA,KAAK,YAAY;IAC1C;IAEA,OAAO,OAAOA,IAA2B,EAAmB;QACxD,OAAO,IAAID,gBAAgB;YACvB,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ,IAAI;YAC3B,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY,IAAI;QACvC;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,aAAa;IAC7B;AACJ"}
+{"version":3,"file":"ToggleGroup/domains/ToggleGroupItem.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItem.ts"],"sourcesContent":["import type { ToggleGroupItemParams } from \"./ToggleGroupItemParams.js\";\nimport { generateId } from \"~/utils.js\";\n\nexport class ToggleGroupItem {\n    private readonly _id: string;\n    private readonly _label: any;\n    private readonly _value: string;\n    private readonly _disabled: boolean;\n    private readonly _icon: any;\n    private readonly _iconPosition: \"start\" | \"end\";\n    private readonly _tooltip?: any;\n\n    protected constructor(data: {\n        id: string;\n        label: any;\n        value: string;\n        disabled: boolean;\n        icon: any;\n        iconPosition: \"start\" | \"end\";\n        tooltip?: any;\n    }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._value = data.value;\n        this._disabled = data.disabled;\n        this._icon = data.icon;\n        this._iconPosition = data.iconPosition;\n        this._tooltip = data.tooltip;\n    }\n\n    static create(data: ToggleGroupItemParams): ToggleGroupItem {\n        return new ToggleGroupItem({\n            id: generateId(data.id),\n            label: data.label,\n            value: data.value,\n            disabled: data.disabled ?? false,\n            icon: data.icon,\n            iconPosition: data.iconPosition ?? \"start\",\n            tooltip: data.tooltip\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get value() {\n        return this._value;\n    }\n\n    get disabled() {\n        return this._disabled;\n    }\n\n    get icon() {\n        return this._icon;\n    }\n\n    get iconPosition() {\n        return this._iconPosition;\n    }\n\n    get tooltip() {\n        return this._tooltip;\n    }\n}\n"],"names":["ToggleGroupItem","data","generateId"],"mappings":";AAGO,MAAMA;IAST,YAAsBC,IAQrB,CAAE;QACC,IAAI,CAAC,GAAG,GAAGA,KAAK,EAAE;QAClB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,MAAM,GAAGA,KAAK,KAAK;QACxB,IAAI,CAAC,SAAS,GAAGA,KAAK,QAAQ;QAC9B,IAAI,CAAC,KAAK,GAAGA,KAAK,IAAI;QACtB,IAAI,CAAC,aAAa,GAAGA,KAAK,YAAY;QACtC,IAAI,CAAC,QAAQ,GAAGA,KAAK,OAAO;IAChC;IAEA,OAAO,OAAOA,IAA2B,EAAmB;QACxD,OAAO,IAAID,gBAAgB;YACvB,IAAIE,WAAWD,KAAK,EAAE;YACtB,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ,IAAI;YAC3B,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY,IAAI;YACnC,SAASA,KAAK,OAAO;QACzB;IACJ;IAEA,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,GAAG;IACnB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,KAAK;IACrB;IAEA,IAAI,eAAe;QACf,OAAO,IAAI,CAAC,aAAa;IAC7B;IAEA,IAAI,UAAU;QACV,OAAO,IAAI,CAAC,QAAQ;IACxB;AACJ"}

package/ToggleGroup/domains/ToggleGroupItemFormatted.d.ts

@@ -6,4 +6,5 @@ export interface ToggleGroupItemFormatted {
     disabled: boolean;
     icon?: React.ReactNode;
     iconPosition: "start" | "end";
+    tooltip?: React.ReactNode;
 }

package/ToggleGroup/domains/ToggleGroupItemFormatter.js

@@ -6,7 +6,8 @@ class ToggleGroupItemFormatter {
             value: item.value,
             disabled: item.disabled,
             icon: item.icon,
-            iconPosition: item.iconPosition
+            iconPosition: item.iconPosition,
+            tooltip: item.tooltip
         };
     }
 }

package/ToggleGroup/domains/ToggleGroupItemFormatter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/domains/ToggleGroupItemFormatter.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItemFormatter.ts"],"sourcesContent":["import type { ToggleGroupItemFormatted } from \"./ToggleGroupItemFormatted.js\";\nimport type { ToggleGroupItem } from \"./ToggleGroupItem.js\";\n\nexport class ToggleGroupItemFormatter {\n    static format(item: ToggleGroupItem): ToggleGroupItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            disabled: item.disabled,\n            icon: item.icon,\n            iconPosition: item.iconPosition\n        };\n    }\n}\n"],"names":["ToggleGroupItemFormatter","item"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAAqB,EAA4B;QAC3D,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY;QACnC;IACJ;AACJ"}
+{"version":3,"file":"ToggleGroup/domains/ToggleGroupItemFormatter.js","sources":["../../../src/ToggleGroup/domains/ToggleGroupItemFormatter.ts"],"sourcesContent":["import type { ToggleGroupItemFormatted } from \"./ToggleGroupItemFormatted.js\";\nimport type { ToggleGroupItem } from \"./ToggleGroupItem.js\";\n\nexport class ToggleGroupItemFormatter {\n    static format(item: ToggleGroupItem): ToggleGroupItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            value: item.value,\n            disabled: item.disabled,\n            icon: item.icon,\n            iconPosition: item.iconPosition,\n            tooltip: item.tooltip\n        };\n    }\n}\n"],"names":["ToggleGroupItemFormatter","item"],"mappings":"AAGO,MAAMA;IACT,OAAO,OAAOC,IAAqB,EAA4B;QAC3D,OAAO;YACH,IAAIA,KAAK,EAAE;YACX,OAAOA,KAAK,KAAK;YACjB,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,MAAMA,KAAK,IAAI;YACf,cAAcA,KAAK,YAAY;YAC/B,SAASA,KAAK,OAAO;QACzB;IACJ;AACJ"}

package/ToggleGroup/domains/ToggleGroupItemParams.d.ts

@@ -6,4 +6,5 @@ export interface ToggleGroupItemParams {
     disabled?: boolean;
     icon?: React.ReactNode;
     iconPosition?: "start" | "end";
+    tooltip?: React.ReactNode;
 }

package/ToggleGroup/primitives/ToggleGroupPrimitive.js

@@ -1,5 +1,6 @@
 import { ToggleGroup } from "radix-ui";
 import { cn, cva, makeDecoratable } from "../../utils.js";
+import { Tooltip } from "../../Tooltip/index.js";
 import { useToggleGroup } from "./useToggleGroup.js";
 import * as __rspack_external_react from "react";
 const toggleGroupItemVariants = cva([
@@ -107,8 +108,7 @@ const ToggleGroupRenderer = ({ items, changeValue, value, type = "single", varia
         className: containerClass
     }, items.map((item)=>{
         const contentLayout = !item.label && item.icon ? "icon" : "text";
-        return /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Item, {
-            key: item.id,
+        const trigger = /*#__PURE__*/ __rspack_external_react.createElement(ToggleGroup.Item, {
             value: item.value,
             disabled: item.disabled,
             className: cn(toggleGroupItemVariants({
@@ -117,6 +117,15 @@ const ToggleGroupRenderer = ({ items, changeValue, value, type = "single", varia
                 contentLayout
             }))
         }, "end" !== item.iconPosition && item.icon, item.label, "end" === item.iconPosition && item.icon);
+        if (item.tooltip) return /*#__PURE__*/ __rspack_external_react.createElement(Tooltip, {
+            key: item.id,
+            content: item.tooltip,
+            side: "bottom",
+            trigger: trigger
+        });
+        return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, {
+            key: item.id
+        }, trigger);
     }));
 };
 const DecoratableToggleGroupPrimitive = (props)=>{

package/ToggleGroup/primitives/ToggleGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { useToggleGroup } from \"./useToggleGroup.js\";\nimport type { ToggleGroupItemFormatted, ToggleGroupItemParams } from \"../domains/index.js\";\n\n/**\n * Toggle Group Item\n */\n\nconst toggleGroupItemVariants = cva(\n    [\n        \"border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors rounded-sm\",\n        \"focus-visible:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        \"disabled:pointer-events-none disabled:opacity-50\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"border-transparent bg-neutral-dimmed text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-muted\",\n                    \"data-[state=on]:bg-neutral-xstrong data-[state=on]:text-neutral-light data-[state=on]:fill-neutral-light\"\n                ],\n                outline: [\n                    \"border-neutral-dimmed-darker bg-neutral-base text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[state=on]:bg-neutral-dimmed\"\n                ],\n                ghost: [\n                    \"border-transparent bg-transparent text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"data-[state=on]:bg-neutral-dark/5 data-[state=on]:fill-neutral-xstrong\"\n                ],\n                \"ghost-negative\": [\n                    \"border-transparent bg-transparent text-neutral-light fill-neutral-light\",\n                    \"hover:bg-neutral-base/20\",\n                    \"data-[state=on]:bg-neutral-base/30\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\n/**\n * Toggle Group Container\n */\n\nconst toggleGroupVariants = cva(\"inline-flex items-center\", {\n    variants: {\n        bordered: {\n            true: \"rounded-md border-sm border-neutral-dimmed-darker p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\",\n            false: \"\"\n        },\n        variant: {\n            primary: \"gap-xs\",\n            outline: \"gap-xs\",\n            ghost: \"\",\n            \"ghost-negative\": \"\"\n        }\n    },\n    defaultVariants: {\n        bordered: false,\n        variant: \"primary\"\n    }\n});\n\ntype ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>[\"variant\"];\ntype ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>[\"size\"];\n\ntype ToggleGroupSingleProps = {\n    type?: \"single\";\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\ntype ToggleGroupMultipleProps = {\n    type: \"multiple\";\n    value?: string[];\n    onChange?: (value: string[]) => void;\n};\n\ntype ToggleGroupPrimitiveBaseProps = {\n    items: ToggleGroupItemParams[];\n    variant?: ToggleGroupVariant;\n    size?: ToggleGroupSize;\n    bordered?: boolean;\n    disabled?: boolean;\n    className?: string;\n};\n\ntype ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps &\n    (ToggleGroupSingleProps | ToggleGroupMultipleProps);\n\ntype ToggleGroupVm = {\n    items: ToggleGroupItemFormatted[];\n};\n\n/**\n * Toggle Group Renderer\n */\n\ntype ToggleGroupRendererProps = ToggleGroupPrimitiveProps & {\n    items: ToggleGroupItemFormatted[];\n    changeValue: (value: string | string[]) => void;\n};\n\nconst ToggleGroupRenderer = ({\n    items,\n    changeValue,\n    value,\n    type = \"single\",\n    variant = \"primary\",\n    size = \"md\",\n    bordered = false,\n    disabled,\n    className\n}: ToggleGroupRendererProps) => {\n    const containerClass = cn(toggleGroupVariants({ bordered, variant }), className);\n\n    const radixProps = useMemo(() => {\n        if (type === \"multiple\") {\n            return {\n                type: \"multiple\" as const,\n                value: (value as string[] | undefined) ?? [],\n                onValueChange: changeValue as (value: string[]) => void\n            };\n        }\n        return {\n            type: \"single\" as const,\n            value: (value as string | undefined) ?? \"\",\n            onValueChange: changeValue as (value: string) => void\n        };\n    }, [type, value, changeValue]);\n\n    return (\n        <ToggleGroupPrimitives.Root {...radixProps} disabled={disabled} className={containerClass}>\n            {items.map(item => {\n                const contentLayout = !item.label && item.icon ? \"icon\" : \"text\";\n                return (\n                    <ToggleGroupPrimitives.Item\n                        key={item.id}\n                        value={item.value}\n                        disabled={item.disabled}\n                        className={cn(toggleGroupItemVariants({ variant, size, contentLayout }))}\n                    >\n                        {item.iconPosition !== \"end\" && item.icon}\n                        {item.label}\n                        {item.iconPosition === \"end\" && item.icon}\n                    </ToggleGroupPrimitives.Item>\n                );\n            })}\n        </ToggleGroupPrimitives.Root>\n    );\n};\n\n/**\n * Toggle Group Primitive\n */\n\nconst DecoratableToggleGroupPrimitive = (props: ToggleGroupPrimitiveProps) => {\n    const { vm, changeValue } = useToggleGroup(props);\n    return <ToggleGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nconst ToggleGroupPrimitive = makeDecoratable(\n    \"ToggleGroupPrimitive\",\n    DecoratableToggleGroupPrimitive\n);\n\nexport {\n    ToggleGroupPrimitive,\n    type ToggleGroupPrimitiveProps,\n    type ToggleGroupVm,\n    type ToggleGroupVariant,\n    type ToggleGroupSize\n};\n"],"names":["toggleGroupItemVariants","cva","toggleGroupVariants","ToggleGroupRenderer","items","changeValue","value","type","variant","size","bordered","disabled","className","containerClass","cn","radixProps","useMemo","ToggleGroupPrimitives","item","contentLayout","DecoratableToggleGroupPrimitive","props","vm","useToggleGroup","ToggleGroupPrimitive","makeDecoratable"],"mappings":";;;;AAWA,MAAMA,0BAA0BC,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAOJ,MAAMC,sBAAsBD,IAAI,4BAA4B;IACxD,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,SAAS;YACL,SAAS;YACT,SAAS;YACT,OAAO;YACP,kBAAkB;QACtB;IACJ;IACA,iBAAiB;QACb,UAAU;QACV,SAAS;IACb;AACJ;AA0CA,MAAME,sBAAsB,CAAC,EACzBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,OAAO,QAAQ,EACfC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACc;IACvB,MAAMC,iBAAiBC,GAAGZ,oBAAoB;QAAEQ;QAAUF;IAAQ,IAAII;IAEtE,MAAMG,aAAaC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QACvB,IAAIT,AAAS,eAATA,MACA,OAAO;YACH,MAAM;YACN,OAAQD,SAAkC,EAAE;YAC5C,eAAeD;QACnB;QAEJ,OAAO;YACH,MAAM;YACN,OAAQC,SAAgC;YACxC,eAAeD;QACnB;IACJ,GAAG;QAACE;QAAMD;QAAOD;KAAY;IAE7B,OAAO,WAAP,GACI,sCAACY,YAAAA,IAA0B;QAAE,GAAGF,UAAU;QAAE,UAAUJ;QAAU,WAAWE;OACtET,MAAM,GAAG,CAACc,CAAAA;QACP,MAAMC,gBAAgB,CAACD,KAAK,KAAK,IAAIA,KAAK,IAAI,GAAG,SAAS;QAC1D,OAAO,WAAP,GACI,sCAACD,YAAAA,IAA0B;YACvB,KAAKC,KAAK,EAAE;YACZ,OAAOA,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,WAAWJ,GAAGd,wBAAwB;gBAAEQ;gBAASC;gBAAMU;YAAc;WAEpED,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI,EACxCA,KAAK,KAAK,EACVA,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI;IAGrD;AAGZ;AAMA,MAAME,kCAAkC,CAACC;IACrC,MAAM,EAAEC,EAAE,EAAEjB,WAAW,EAAE,GAAGkB,eAAeF;IAC3C,OAAO,WAAP,GAAO,sCAAClB,qBAAmBA;QAAE,GAAGkB,KAAK;QAAE,OAAOC,GAAG,KAAK;QAAE,aAAajB;;AACzE;AAEA,MAAMmB,uBAAuBC,gBACzB,wBACAL"}
+{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { ToggleGroup as ToggleGroupPrimitives } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { useToggleGroup } from \"./useToggleGroup.js\";\nimport type { ToggleGroupItemFormatted, ToggleGroupItemParams } from \"../domains/index.js\";\n\n/**\n * Toggle Group Item\n */\n\nconst toggleGroupItemVariants = cva(\n    [\n        \"border-sm inline-flex items-center justify-center gap-xs whitespace-nowrap font-sans cursor-pointer transition-colors rounded-sm\",\n        \"focus-visible:outline-none focus-visible:border-accent-default focus-visible:ring-lg focus-visible:ring-primary-dimmed\",\n        \"disabled:pointer-events-none disabled:opacity-50\"\n    ],\n    {\n        variants: {\n            variant: {\n                primary: [\n                    \"border-transparent bg-neutral-dimmed text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-muted\",\n                    \"data-[state=on]:bg-neutral-xstrong data-[state=on]:text-neutral-light data-[state=on]:fill-neutral-light\"\n                ],\n                outline: [\n                    \"border-neutral-dimmed-darker bg-neutral-base text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-light\",\n                    \"data-[state=on]:bg-neutral-dimmed\"\n                ],\n                ghost: [\n                    \"border-transparent bg-transparent text-neutral-strong fill-neutral-strong\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"data-[state=on]:bg-neutral-dark/5 data-[state=on]:fill-neutral-xstrong\"\n                ],\n                \"ghost-negative\": [\n                    \"border-transparent bg-transparent text-neutral-light fill-neutral-light\",\n                    \"hover:bg-neutral-base/20\",\n                    \"data-[state=on]:bg-neutral-base/30\"\n                ]\n            },\n            size: {\n                sm: [\n                    \"text-sm [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs)-(var(--border-width-sm)))] px-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n                ],\n                md: [\n                    \"text-md [&>svg]:size-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ]\n            },\n            contentLayout: {\n                text: \"\",\n                icon: \"\"\n            }\n        },\n        compoundVariants: [\n            {\n                size: \"sm\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\"\n            },\n            {\n                size: \"md\",\n                contentLayout: \"icon\",\n                className: \"p-[calc(var(--padding-sm)-(var(--border-width-sm)))]\"\n            }\n        ],\n        defaultVariants: {\n            variant: \"primary\",\n            size: \"md\"\n        }\n    }\n);\n\n/**\n * Toggle Group Container\n */\n\nconst toggleGroupVariants = cva(\"inline-flex items-center\", {\n    variants: {\n        bordered: {\n            true: \"rounded-md border-sm border-neutral-dimmed-darker p-[calc(var(--padding-xs)-(var(--border-width-sm)))]\",\n            false: \"\"\n        },\n        variant: {\n            primary: \"gap-xs\",\n            outline: \"gap-xs\",\n            ghost: \"\",\n            \"ghost-negative\": \"\"\n        }\n    },\n    defaultVariants: {\n        bordered: false,\n        variant: \"primary\"\n    }\n});\n\ntype ToggleGroupVariant = VariantProps<typeof toggleGroupItemVariants>[\"variant\"];\ntype ToggleGroupSize = VariantProps<typeof toggleGroupItemVariants>[\"size\"];\n\ntype ToggleGroupSingleProps = {\n    type?: \"single\";\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\ntype ToggleGroupMultipleProps = {\n    type: \"multiple\";\n    value?: string[];\n    onChange?: (value: string[]) => void;\n};\n\ntype ToggleGroupPrimitiveBaseProps = {\n    items: ToggleGroupItemParams[];\n    variant?: ToggleGroupVariant;\n    size?: ToggleGroupSize;\n    bordered?: boolean;\n    disabled?: boolean;\n    className?: string;\n};\n\ntype ToggleGroupPrimitiveProps = ToggleGroupPrimitiveBaseProps &\n    (ToggleGroupSingleProps | ToggleGroupMultipleProps);\n\ntype ToggleGroupVm = {\n    items: ToggleGroupItemFormatted[];\n};\n\n/**\n * Toggle Group Renderer\n */\n\ntype ToggleGroupRendererProps = ToggleGroupPrimitiveProps & {\n    items: ToggleGroupItemFormatted[];\n    changeValue: (value: string | string[]) => void;\n};\n\nconst ToggleGroupRenderer = ({\n    items,\n    changeValue,\n    value,\n    type = \"single\",\n    variant = \"primary\",\n    size = \"md\",\n    bordered = false,\n    disabled,\n    className\n}: ToggleGroupRendererProps) => {\n    const containerClass = cn(toggleGroupVariants({ bordered, variant }), className);\n\n    const radixProps = useMemo(() => {\n        if (type === \"multiple\") {\n            return {\n                type: \"multiple\" as const,\n                value: (value as string[] | undefined) ?? [],\n                onValueChange: changeValue as (value: string[]) => void\n            };\n        }\n        return {\n            type: \"single\" as const,\n            value: (value as string | undefined) ?? \"\",\n            onValueChange: changeValue as (value: string) => void\n        };\n    }, [type, value, changeValue]);\n\n    return (\n        <ToggleGroupPrimitives.Root {...radixProps} disabled={disabled} className={containerClass}>\n            {items.map(item => {\n                const contentLayout = !item.label && item.icon ? \"icon\" : \"text\";\n                const trigger = (\n                    <ToggleGroupPrimitives.Item\n                        value={item.value}\n                        disabled={item.disabled}\n                        className={cn(toggleGroupItemVariants({ variant, size, contentLayout }))}\n                    >\n                        {item.iconPosition !== \"end\" && item.icon}\n                        {item.label}\n                        {item.iconPosition === \"end\" && item.icon}\n                    </ToggleGroupPrimitives.Item>\n                );\n                if (item.tooltip) {\n                    return (\n                        <Tooltip\n                            key={item.id}\n                            content={item.tooltip}\n                            side=\"bottom\"\n                            trigger={trigger}\n                        />\n                    );\n                }\n                return <React.Fragment key={item.id}>{trigger}</React.Fragment>;\n            })}\n        </ToggleGroupPrimitives.Root>\n    );\n};\n\n/**\n * Toggle Group Primitive\n */\n\nconst DecoratableToggleGroupPrimitive = (props: ToggleGroupPrimitiveProps) => {\n    const { vm, changeValue } = useToggleGroup(props);\n    return <ToggleGroupRenderer {...props} items={vm.items} changeValue={changeValue} />;\n};\n\nconst ToggleGroupPrimitive = makeDecoratable(\n    \"ToggleGroupPrimitive\",\n    DecoratableToggleGroupPrimitive\n);\n\nexport {\n    ToggleGroupPrimitive,\n    type ToggleGroupPrimitiveProps,\n    type ToggleGroupVm,\n    type ToggleGroupVariant,\n    type ToggleGroupSize\n};\n"],"names":["toggleGroupItemVariants","cva","toggleGroupVariants","ToggleGroupRenderer","items","changeValue","value","type","variant","size","bordered","disabled","className","containerClass","cn","radixProps","useMemo","ToggleGroupPrimitives","item","contentLayout","trigger","Tooltip","React","DecoratableToggleGroupPrimitive","props","vm","useToggleGroup","ToggleGroupPrimitive","makeDecoratable"],"mappings":";;;;;AAYA,MAAMA,0BAA0BC,IAC5B;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;aACH;YACD,SAAS;gBACL;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;aACH;QACL;QACA,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,eAAe;YACX,MAAM;YACN,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;QACA;YACI,MAAM;YACN,eAAe;YACf,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;QACT,MAAM;IACV;AACJ;AAOJ,MAAMC,sBAAsBD,IAAI,4BAA4B;IACxD,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,SAAS;YACL,SAAS;YACT,SAAS;YACT,OAAO;YACP,kBAAkB;QACtB;IACJ;IACA,iBAAiB;QACb,UAAU;QACV,SAAS;IACb;AACJ;AA0CA,MAAME,sBAAsB,CAAC,EACzBC,KAAK,EACLC,WAAW,EACXC,KAAK,EACLC,OAAO,QAAQ,EACfC,UAAU,SAAS,EACnBC,OAAO,IAAI,EACXC,WAAW,KAAK,EAChBC,QAAQ,EACRC,SAAS,EACc;IACvB,MAAMC,iBAAiBC,GAAGZ,oBAAoB;QAAEQ;QAAUF;IAAQ,IAAII;IAEtE,MAAMG,aAAaC,AAAAA,IAAAA,wBAAAA,OAAAA,AAAAA,EAAQ;QACvB,IAAIT,AAAS,eAATA,MACA,OAAO;YACH,MAAM;YACN,OAAQD,SAAkC,EAAE;YAC5C,eAAeD;QACnB;QAEJ,OAAO;YACH,MAAM;YACN,OAAQC,SAAgC;YACxC,eAAeD;QACnB;IACJ,GAAG;QAACE;QAAMD;QAAOD;KAAY;IAE7B,OAAO,WAAP,GACI,sCAACY,YAAAA,IAA0B;QAAE,GAAGF,UAAU;QAAE,UAAUJ;QAAU,WAAWE;OACtET,MAAM,GAAG,CAACc,CAAAA;QACP,MAAMC,gBAAgB,CAACD,KAAK,KAAK,IAAIA,KAAK,IAAI,GAAG,SAAS;QAC1D,MAAME,UAAU,WAAVA,GACF,sCAACH,YAAAA,IAA0B;YACvB,OAAOC,KAAK,KAAK;YACjB,UAAUA,KAAK,QAAQ;YACvB,WAAWJ,GAAGd,wBAAwB;gBAAEQ;gBAASC;gBAAMU;YAAc;WAEpED,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI,EACxCA,KAAK,KAAK,EACVA,AAAsB,UAAtBA,KAAK,YAAY,IAAcA,KAAK,IAAI;QAGjD,IAAIA,KAAK,OAAO,EACZ,OAAO,WAAP,GACI,sCAACG,SAAOA;YACJ,KAAKH,KAAK,EAAE;YACZ,SAASA,KAAK,OAAO;YACrB,MAAK;YACL,SAASE;;QAIrB,OAAO,WAAP,GAAO,sCAACE,wBAAAA,QAAc;YAAC,KAAKJ,KAAK,EAAE;WAAGE;IAC1C;AAGZ;AAMA,MAAMG,kCAAkC,CAACC;IACrC,MAAM,EAAEC,EAAE,EAAEpB,WAAW,EAAE,GAAGqB,eAAeF;IAC3C,OAAO,WAAP,GAAO,sCAACrB,qBAAmBA;QAAE,GAAGqB,KAAK;QAAE,OAAOC,GAAG,KAAK;QAAE,aAAapB;;AACzE;AAEA,MAAMsB,uBAAuBC,gBACzB,wBACAL"}

package/ToggleGroup/primitives/ToggleGroupPrimitive.stories.d.ts

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

package/ToggleGroup/primitives/ToggleGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.stories.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ToggleGroupPrimitive } from \"./ToggleGroupPrimitive.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroupPrimitive> = {\n    title: \"Components/Form Primitives/ToggleGroup\",\n    component: ToggleGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroupPrimitive>;\n\nexport const Default: Story = {\n    args: { items: textItems }\n};\n\nexport const Bordered: Story = {\n    args: { items: textItems, bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const WithIconAndTextOutline: Story = {\n    args: { items: iconTextItems, variant: \"outline\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, variant: \"ghost\", bordered: true }\n};\n\nexport const SizeSmall: Story = {\n    args: { items: iconItems, size: \"sm\", bordered: true }\n};\n\nexport const SizeMedium: Story = {\n    args: { items: iconItems, size: \"md\", bordered: true }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, bordered: true, disabled: true }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroupPrimitive","args","value","setValue","useState","v","Default","Bordered","IconOnly","IconOnlyGhost","WithIconAndText","WithIconAndTextOutline","Outline","Ghost","SizeSmall","SizeMedium","Multiple","Disabled"],"mappings":";;;;;;;;AAUA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,qCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QAAE,OAAOhB;IAAU;AAC7B;AAEO,MAAMiB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,gBAAuB;IAChC,MAAM;QAAE,OAAOlB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMmB,kBAAyB;IAClC,MAAM;QAAE,OAAOf;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMgB,yBAAgC;IACzC,MAAM;QAAE,OAAOhB;QAAe,SAAS;QAAW,UAAU;IAAK;AACrE;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,SAAS;QAAW,UAAU;IAAK;AACjE;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMwB,YAAmB;IAC5B,MAAM;QAAE,OAAOvB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMwB,aAAoB;IAC7B,MAAM;QAAE,OAAOxB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMyB,WAAkB;IAC3B,QAAQf,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOV;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMsB,WAAkB;IAC3B,MAAM;QAAE,OAAO1B;QAAW,UAAU;QAAM,UAAU;IAAK;AAC7D"}
+{"version":3,"file":"ToggleGroup/primitives/ToggleGroupPrimitive.stories.js","sources":["../../../src/ToggleGroup/primitives/ToggleGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as BoldIcon } from \"@webiny/icons/format_bold.svg\";\nimport { ReactComponent as ItalicIcon } from \"@webiny/icons/format_italic.svg\";\nimport { ReactComponent as UnderlineIcon } from \"@webiny/icons/format_underlined.svg\";\nimport { ReactComponent as AlignLeftIcon } from \"@webiny/icons/format_align_left.svg\";\nimport { ReactComponent as AlignCenterIcon } from \"@webiny/icons/format_align_center.svg\";\nimport { ReactComponent as AlignRightIcon } from \"@webiny/icons/format_align_right.svg\";\nimport { ToggleGroupPrimitive } from \"./ToggleGroupPrimitive.js\";\n\nconst textItems = [\n    { value: \"bold\", label: \"Bold\" },\n    { value: \"italic\", label: \"Italic\" },\n    { value: \"underline\", label: \"Underline\" }\n];\n\nconst iconItems = [\n    { value: \"left\", icon: <AlignLeftIcon /> },\n    { value: \"center\", icon: <AlignCenterIcon /> },\n    { value: \"right\", icon: <AlignRightIcon /> }\n];\n\nconst iconTextItems = [\n    { value: \"bold\", label: \"Bold\", icon: <BoldIcon /> },\n    { value: \"italic\", label: \"Italic\", icon: <ItalicIcon /> },\n    { value: \"underline\", label: \"Underline\", icon: <UnderlineIcon /> }\n];\n\nconst meta: Meta<typeof ToggleGroupPrimitive> = {\n    title: \"Components/Form Primitives/ToggleGroup\",\n    component: ToggleGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState<string>(\"\");\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"single\"\n                value={value}\n                onChange={v => setValue(v as string)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof ToggleGroupPrimitive>;\n\nexport const Default: Story = {\n    args: { items: textItems }\n};\n\nexport const Bordered: Story = {\n    args: { items: textItems, bordered: true }\n};\n\nexport const IconOnly: Story = {\n    args: { items: iconItems, bordered: true }\n};\n\nexport const IconOnlyGhost: Story = {\n    args: { items: iconItems, variant: \"ghost\", bordered: true }\n};\n\nexport const WithIconAndText: Story = {\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const WithIconAndTextOutline: Story = {\n    args: { items: iconTextItems, variant: \"outline\", bordered: true }\n};\n\nexport const Outline: Story = {\n    args: { items: textItems, variant: \"outline\", bordered: true }\n};\n\nexport const Ghost: Story = {\n    args: { items: textItems, variant: \"ghost\", bordered: true }\n};\n\nexport const SizeSmall: Story = {\n    args: { items: iconItems, size: \"sm\", bordered: true }\n};\n\nexport const SizeMedium: Story = {\n    args: { items: iconItems, size: \"md\", bordered: true }\n};\n\nexport const Multiple: Story = {\n    render: args => {\n        const [value, setValue] = useState<string[]>([]);\n        return (\n            <ToggleGroupPrimitive\n                {...args}\n                type=\"multiple\"\n                value={value}\n                onChange={v => setValue(v as string[])}\n            />\n        );\n    },\n    args: { items: iconTextItems, bordered: true }\n};\n\nexport const Disabled: Story = {\n    args: { items: iconItems, bordered: true, disabled: true }\n};\n"],"names":["textItems","iconItems","AlignLeftIcon","AlignCenterIcon","AlignRightIcon","iconTextItems","BoldIcon","ItalicIcon","UnderlineIcon","meta","ToggleGroupPrimitive","args","value","setValue","useState","v","Default","Bordered","IconOnly","IconOnlyGhost","WithIconAndText","WithIconAndTextOutline","Outline","Ghost","SizeSmall","SizeMedium","Multiple","Disabled"],"mappings":";;;;;;;;AAUA,MAAMA,YAAY;IACd;QAAE,OAAO;QAAQ,OAAO;IAAO;IAC/B;QAAE,OAAO;QAAU,OAAO;IAAS;IACnC;QAAE,OAAO;QAAa,OAAO;IAAY;CAC5C;AAED,MAAMC,YAAY;IACd;QAAE,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;IACzC;QAAE,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,wCAAeA;IAAI;IAC7C;QAAE,OAAO;QAAS,MAAM,WAAN,GAAM,oBAACC,uCAAcA;IAAI;CAC9C;AAED,MAAMC,gBAAgB;IAClB;QAAE,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IACnD;QAAE,OAAO;QAAU,OAAO;QAAU,MAAM,WAAN,GAAM,oBAACC,kCAAUA;IAAI;IACzD;QAAE,OAAO;QAAa,OAAO;QAAa,MAAM,WAAN,GAAM,oBAACC,sCAAaA;IAAI;CACrE;AAED,MAAMC,OAA0C;IAC5C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAiB;QAC3C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;AACJ;AAEA,qCAAeN;AAGR,MAAMO,UAAiB;IAC1B,MAAM;QAAE,OAAOhB;IAAU;AAC7B;AAEO,MAAMiB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,WAAkB;IAC3B,MAAM;QAAE,OAAOjB;QAAW,UAAU;IAAK;AAC7C;AAEO,MAAMkB,gBAAuB;IAChC,MAAM;QAAE,OAAOlB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMmB,kBAAyB;IAClC,MAAM;QAAE,OAAOf;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMgB,yBAAgC;IACzC,MAAM;QAAE,OAAOhB;QAAe,SAAS;QAAW,UAAU;IAAK;AACrE;AAEO,MAAMiB,UAAiB;IAC1B,MAAM;QAAE,OAAOtB;QAAW,SAAS;QAAW,UAAU;IAAK;AACjE;AAEO,MAAMuB,QAAe;IACxB,MAAM;QAAE,OAAOvB;QAAW,SAAS;QAAS,UAAU;IAAK;AAC/D;AAEO,MAAMwB,YAAmB;IAC5B,MAAM;QAAE,OAAOvB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMwB,aAAoB;IAC7B,MAAM;QAAE,OAAOxB;QAAW,MAAM;QAAM,UAAU;IAAK;AACzD;AAEO,MAAMyB,WAAkB;IAC3B,QAAQf,CAAAA;QACJ,MAAM,CAACC,OAAOC,SAAS,GAAGC,SAAmB,EAAE;QAC/C,OAAO,WAAP,GACI,oBAACJ,sBAAoBA;YAChB,GAAGC,IAAI;YACR,MAAK;YACL,OAAOC;YACP,UAAUG,CAAAA,IAAKF,SAASE;;IAGpC;IACA,MAAM;QAAE,OAAOV;QAAe,UAAU;IAAK;AACjD;AAEO,MAAMsB,WAAkB;IAC3B,MAAM;QAAE,OAAO1B;QAAW,UAAU;QAAM,UAAU;IAAK;AAC7D"}

package/Tooltip/Tooltip.stories.d.ts

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

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":";;;;;;;AAUA,MAAMA,OAA6B;IAC/B,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,UAAU;QACN,SAAS;YACL,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,OAAO;YACH,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,MAAM;YACF,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,WAAW;YACP,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAACD,QAAQ,QAAQ,sBACb,oBAAC;gBAAI,WAAU;6BACX,oBAACC,OAAAA;KAIhB;AACL;AAEA,wBAAeF;AAIR,MAAMG,UAAiB;IAC1B,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,wDACI,oBAAC,gBAAO,+BAAmC;IAIvD;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,SAAS;IACb;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,SAAS;IACb;IACA,YAAY;QACRD,CAAAA,QAAAA,WAAAA,GACI,oBAACD,QAAQ,QAAQ,sBACb,oBAAC;gBAAI,WAAU;6BACX,oBAACC,OAAAA;KAIhB;AACL;AAEO,MAAMI,eAAsB;IAC/B,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,WAAW;IACf;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,SAAS,WAAT,GAAS,oBAACC,MAAIA;YAAC,oBAAM,oBAACC,gBAAQA;YAAK,OAAM;;QACzC,SAAS;IACb;AACJ;AAEO,MAAMC,gBAAuB;IAChC,MAAM;QACF,OAAO;QACP,MAAM;QACN,SAAS;QACT,WAAW;QACX,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,wDACI,oBAAC,gBAAO,+BAAmC;IAIvD;IACA,UAAU;QACN,SAAS;YACL,aACI;QACR;QACA,SAAS;YACL,aACI;QACR;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAO;gBAAS;gBAAU;aAAO;QAC/C;QACA,OAAO;YACH,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAS;gBAAU;aAAM;QACvC;QACA,SAAS;YACL,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAU;aAAS;QACjC;QACA,WAAW;YACP,aAAa;YACb,SAAS;QACb;IACJ;AACJ;AAEO,MAAMC,cAAqB;IAC9B,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAACV,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAS,uBAAS,oBAAC,aAAI;YAAsB,MAAK;0BACvE,oBAACA,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAW,uBAAS,oBAAC,aAAI;YAAwB,MAAK;0BAC3E,oBAACA,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAY,uBAAS,oBAAC,aAAI;YAAyB,MAAK;0BAC7E,oBAACA,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAU,uBAAS,oBAAC,aAAI;YAAuB,MAAK;;AAGrF;AAEO,MAAMW,YAAmB;IAC5B,QAAQ,kBACJ,oBAAC;YAAI,WAAU;yBACX,oBAACX,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAW,uBAAS,oBAAC,aAAI;YAAwB,OAAM;0BAC5E,oBAACA,SAAOA;YACJ,uBAAS,oBAAC,WAAE;YACZ,uBAAS,oBAAC,aAAI;YACd,OAAM;0BAEV,oBAACA,SAAOA;YAAC,uBAAS,oBAAC,WAAE;YAAS,uBAAS,oBAAC,aAAI;YAAsB,OAAM;;AAGpF;AAEO,MAAMY,oBAA2B;IACpC,MAAM;QACF,SAAS,WAAT,GAAS,oBAACC,QAAMA;YAAC,MAAK;;QACtB,SAAS;IACb;AACJ;AAEO,MAAMC,uBAA8B;IACvC,MAAM;QACF,SAAS,WAAT,GAAS,oBAAC,WAAE;QACZ,SAAS,WAAT,GACI,oBAAC;YAAI,WAAU;yBACX,oBAACC,MAAIA;YAAC,MAAK;YAAK,WAAU;WAAY,wCAGtC,oBAACA,MAAIA;YAAC,MAAK;WAAK,oFAGhB,oBAACA,MAAIA;YAAC,MAAK;WAAK;IAG5B;AACJ;AAEO,MAAMC,eAAsB;IAC/B,MAAM;QACF,SAAS,WAAT,GAAS,oBAACT,MAAIA;YAAC,oBAAM,oBAACU,yBAAQA;YAAK,OAAM;;QACzC,SAAS;IACb;AACJ"}
+{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":"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"}

package/Tree/Tree.stories.d.ts

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

package/Tree/Tree.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":";;;;AAOA,MAAMA,OAA0B;IAC5B,OAAO;IACP,WAAWC;IACX,UAAU,CAAC;IACX,YAAY;QACR,QAAQ;IACZ;AACJ;AAEA,qBAAeD;AAGR,MAAME,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,aAAoB;IAC7B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,QAAQ;IACZ;AACJ;AAEO,MAAME,0BAAiC;IAC1C,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,oBAAoB;YAAC;SAAI;IAC7B;AACJ;AAEO,MAAMG,kBAAyB;IAClC,MAAM;QACF,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,QAAQ;YACZ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;SACH;IACL;AACJ;AAEO,MAAMC,mBAA0B;IACnC,MAAM;QACF,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,SAAS;YACb;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;SACH;IACL;AACJ;AAUO,MAAMC,iBAAsC;IAC/C,MAAM;QACF,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,KAAK;oBAAO,KAAK;gBAAG;YAChC;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,KAAK;oBAAO,KAAK;gBAAG;YAChC;SACH;QACD,QAAQ,OAAOC,SAASC;YAEpBC,QAAQ,GAAG,CAAC,qBAAqBF;YACjCE,QAAQ,GAAG,CAAC,6BAA6BD;QAC7C;IACJ;AACJ;AAEO,MAAME,qBAA4B;IACrC,MAAM;QACF,GAAGT,QAAQ,IAAI;QACf,QAAQ,OAAOM,SAASC;YACpBC,QAAQ,GAAG,CAAC,uBAAuBF;YACnCE,QAAQ,GAAG,CAAC,iBAAiBD;QACjC;IACJ;AACJ;AAEO,MAAMG,2BAAkC;IAC3C,MAAM;QACF,GAAGV,QAAQ,IAAI;QACf,cAAcW,CAAAA;YACVH,QAAQ,GAAG,CAAC,mBAAmBG;QACnC;IACJ;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGZ,QAAQ,IAAI;QACf,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;SACH;QACD,SAASa,CAAAA,OAAQA,MAAM,OAAO;IAClC;AACJ;AAEO,MAAMC,cAAqB;IAC9B,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;YACX;SACH;QACD,SAAS,CAACe,GAAGR;YACT,MAAM,EAAES,YAAY,EAAE,GAAGT;YAEzB,IAAIS,AAAiB,QAAjBA,cACA,OAAO;YAGX,OAAO;QACX;IACJ;AACJ;AASO,MAAMC,yBAAsD;IAC/D,MAAM;QACF,GAAGjB,QAAQ,IAAI;QACf,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,MAAM,WAAN,GAAM,oBAACkB,gBAAUA;gBAAI;YACjC;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,MAAM,WAAN,GAAM,oBAACA,gBAAUA;gBAAI;YACjC;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,MAAM,WAAN,GAAM,oBAACA,gBAAUA;gBAAI;YACjC;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBAAE,MAAM,WAAN,GAAM,oBAACC,4BAAWA;gBAAI;YAClC;SACH;QACD,UAAUN,CAAAA,OAAAA,WAAAA,GACN,oBAACd,KAAK,IAAI,CAAC,OAAO,sBACd,oBAACA,KAAK,IAAI,CAAC,IAAI;gBAAC,OAAOc,KAAK,KAAK;gBAAE,SAASA,KAAK,IAAI;gBACpDA,KAAK,KAAK;IAGvB;AACJ;AASO,MAAMO,yBAAyD;IAClE,MAAM;QACF,GAAGpB,QAAQ,IAAI;QACf,OAAO;YACH;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;YACA;gBACI,IAAI;gBACJ,UAAU;gBACV,OAAO;gBACP,MAAM;oBACF,OAAO;gBACX;YACJ;SACH;QACD,MAAM,CAACqB,GAAGC,IAAOD,AAAAA,CAAAA,EAAE,IAAI,EAAE,SAAS,KAAMC,CAAAA,EAAE,IAAI,EAAE,SAAS;IAC7D;AACJ"}
+{"version":3,"file":"Tree/Tree.stories.js","sources":["../../src/Tree/Tree.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as FolderIcon } from \"@webiny/icons/folder.svg\";\nimport { ReactComponent as ArticleIcon } from \"@webiny/icons/article.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Tree } from \"./Tree.js\";\n\nconst meta: Meta<typeof Tree> = {\n    title: \"Components/Tree\",\n    component: Tree,\n    argTypes: {},\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tree>;\n\nexport const Default: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithRootId: Story = {\n    args: {\n        ...Default.args,\n        rootId: \"1\"\n    }\n};\n\nexport const WithDefaultOpenNodesIds: Story = {\n    args: {\n        ...Default.args,\n        defaultOpenNodeIds: [\"1\"]\n    }\n};\n\nexport const WithActiveNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                active: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\nexport const WithLoadingNodes: Story = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                loading: true\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"1-1\",\n                parentId: \"1\",\n                label: \"Child Node 1-1\"\n            },\n            {\n                id: \"1-1-1\",\n                parentId: \"1-1\",\n                label: \"Grandchild Node 1-1-1\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"2\",\n                label: \"Child Node 2-1\"\n            }\n        ]\n    }\n};\n\n// Example custom data type\ninterface CustomData {\n    foo: string;\n    bar: number;\n}\n\ntype StoryWithCustomData = StoryObj<typeof Tree<CustomData>>;\n\nexport const WithCustomData: StoryWithCustomData = {\n    args: {\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { foo: \"bar\", bar: 42 }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { foo: \"baz\", bar: 99 }\n            }\n        ],\n        onDrop: async (newTree, options) => {\n            // newTree and options are fully typed with CustomData\n            console.log(\"Custom data tree:\", newTree);\n            console.log(\"Custom data drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnDropCallback: Story = {\n    args: {\n        ...Default.args,\n        onDrop: async (newTree, options) => {\n            console.log(\"New tree structure:\", newTree);\n            console.log(\"Drop options:\", options);\n        }\n    }\n};\n\nexport const WithOnChangeOpenCallback: Story = {\n    args: {\n        ...Default.args,\n        onChangeOpen: newOpenNodes => {\n            console.log(\"New open nodes:\", newOpenNodes);\n        }\n    }\n};\n\nexport const WithCanDrag: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drag this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrag: node => node?.id !== \"1\"\n    }\n};\n\nexport const WithCanDrop: Story = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1 - You cannot drop on this node\"\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\"\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\"\n            },\n            {\n                id: \"2-1\",\n                parentId: \"1\",\n                label: \"Child Node 2-1\"\n            },\n            {\n                id: \"2-1-1\",\n                parentId: \"2\",\n                label: \"Grandchild Node 2-1-1\"\n            }\n        ],\n        canDrop: (_, options) => {\n            const { dropTargetId } = options;\n\n            if (dropTargetId === \"1\") {\n                return false; // Prevent dropping on Node 1\n            }\n\n            return true;\n        }\n    }\n};\n\n// Example custom data type\ninterface CustomRenderData {\n    icon: React.ReactElement;\n}\n\ntype StoryWithCustomNodeRenderer = StoryObj<typeof Tree<CustomRenderData>>;\n\nexport const WithCustomNodeRenderer: StoryWithCustomNodeRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: { icon: <FolderIcon /> }\n            },\n            {\n                id: \"4\",\n                parentId: \"0\",\n                label: \"Node 4\",\n                data: { icon: <ArticleIcon /> }\n            }\n        ],\n        renderer: node => (\n            <Tree.Item.Content>\n                <Tree.Item.Icon label={node.label} element={node.icon} />\n                {node.label}\n            </Tree.Item.Content>\n        )\n    }\n};\n\n// Example custom sorting by `order` property\ninterface CustomSortCallbackData {\n    order: number;\n}\n\ntype WithCustomSortCallbackRenderer = StoryObj<typeof Tree<CustomSortCallbackData>>;\n\nexport const WithCustomSortCallback: WithCustomSortCallbackRenderer = {\n    args: {\n        ...Default.args,\n        nodes: [\n            {\n                id: \"3\",\n                parentId: \"0\",\n                label: \"Node 3\",\n                data: {\n                    order: 3\n                }\n            },\n            {\n                id: \"1\",\n                parentId: \"0\",\n                label: \"Node 1\",\n                data: {\n                    order: 1\n                }\n            },\n            {\n                id: \"2\",\n                parentId: \"0\",\n                label: \"Node 2\",\n                data: {\n                    order: 2\n                }\n            },\n            {\n                id: \"5\",\n                parentId: \"1\",\n                label: \"Node 5\",\n                data: {\n                    order: 5\n                }\n            },\n            {\n                id: \"4\",\n                parentId: \"1\",\n                label: \"Node 4\",\n                data: {\n                    order: 4\n                }\n            },\n            {\n                id: \"6\",\n                parentId: \"1\",\n                label: \"Node 6\",\n                data: {\n                    order: 6\n                }\n            }\n        ],\n        sort: (a, b) => (a.data?.order ?? 0) - (b.data?.order ?? 0)\n    }\n};\n"],"names":["meta","Tree","Default","WithRootId","WithDefaultOpenNodesIds","WithActiveNodes","WithLoadingNodes","WithCustomData","newTree","options","console","WithOnDropCallback","WithOnChangeOpenCallback","newOpenNodes","WithCanDrag","node","WithCanDrop","_","dropTargetId","WithCustomNodeRenderer","FolderIcon","ArticleIcon","WithCustomSortCallback","a","b"],"mappings":"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"}

package/Widget/Widget.stories.d.ts

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

package/Widget/Widget.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Widget/Widget.stories.js","sources":["../../src/Widget/Widget.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Widget } from \"./Widget.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { List } from \"~/List/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { ReactComponent as ArrowForwardIcon } from \"@webiny/icons/arrow_forward.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as HistoryIcon } from \"@webiny/icons/history.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as ManageSearchIcon } from \"@webiny/icons/manage_search.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\n\nconst meta: Meta<typeof Widget> = {\n    title: \"Components/Widget\",\n    component: Widget,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Widget>;\n\nexport const Default: Story = {\n    args: {\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        title: \"Widget Title\",\n        variant: \"accent\",\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const WithOutline: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true\n    }\n};\n\nexport const WithFooterStartActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const WithFooterEndActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: undefined,\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const WithBothFooterActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        ),\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        className: \"w-[406px]\",\n        variant: \"accent\",\n        title: \"Pages\",\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        description: null,\n        children: <>Build stunning landing pages with an easy-to-use drag and drop editor.</>,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const LightVariant: Story = {\n    args: {\n        variant: \"light\",\n        className: \"w-[406px]\",\n        title: \"Need some assistance?\",\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Help icon\"} />,\n        padding: \"md\",\n        children: (\n            <List variant=\"container\" background={\"base\"} className=\"flex flex-col gap-y-sm\">\n                <List.Item\n                    title=\"Start Webiny tour\"\n                    description=\"Let us show you around. You pick what you...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Documentation\"\n                    description=\"Explore the Webiny documentation, learn a...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Contact us\"\n                    description=\"Contact Sales, Explore Partnerships or Sla...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n            </List>\n        )\n    }\n};\n\nexport const BaseVariant: Story = {\n    args: {\n        variant: \"base\",\n        className: \"w-[657px]\",\n        title: \"Review Requests\",\n        icon: <Widget.Icon icon={<ManageSearchIcon />} label={\"Review icon\"} />,\n        headerActions: <Widget.Action>View All</Widget.Action>,\n        padding: \"md\",\n        bodyPadding: false,\n        outline: true,\n        children: (\n            <Tabs\n                separator={true}\n                spacing={\"lg\"}\n                tabs={[\n                    <Tabs.Tab\n                        key={\"inReview\"}\n                        value={\"inReview\"}\n                        trigger={\"In Review (8)\"}\n                        content={\n                            <>\n                                <List\n                                    variant=\"container\"\n                                    background={\"light\"}\n                                    className=\"flex flex-col gap-y-sm\"\n                                >\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Region\"\n                                        description=\"Legal review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Organization\"\n                                        description=\"Specialist review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#3b82f6\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Product Group: Products\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                </List>\n                            </>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"approved\"}\n                        value={\"approved\"}\n                        trigger={\"Approved\"}\n                        content={<>No review requests approved yet.</>}\n                    />\n                ]}\n            />\n        )\n    }\n};\n\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"sm\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"md\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"lg\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithoutIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: undefined\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Widget {...args} />;\n    },\n    args: {\n        title: \"Widget title goes here\",\n        description: \"Widget description goes here\",\n        children: <>This is widget content. Anything can go in here.</>,\n        footerStartActions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"sm\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the widget\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the widget. Please refer to the example code for details on usage.\"\n        },\n        footerEndActions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the widget. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the widget\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the widget\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Widget","Story","Default","HistoryIcon","PaddingSmall","PaddingMedium","WithOutline","WithFooterStartActions","PlusIcon","WithFooterEndActions","undefined","WithBothFooterActions","AccentVariant","LightVariant","NotificationIcon","List","ArrowForwardIcon","BaseVariant","ManageSearchIcon","Tabs","MoreIcon","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","WithoutIcon","Documentation","args","Button"],"mappings":"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"}
+{"version":3,"file":"Widget/Widget.stories.js","sources":["../../src/Widget/Widget.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Widget } from \"./Widget.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { List } from \"~/List/index.js\";\nimport { ReactComponent as NotificationIcon } from \"@webiny/icons/notifications_active.svg\";\nimport { ReactComponent as ArrowForwardIcon } from \"@webiny/icons/arrow_forward.svg\";\nimport { Tabs } from \"~/Tabs/index.js\";\nimport { ReactComponent as HistoryIcon } from \"@webiny/icons/history.svg\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add.svg\";\nimport { ReactComponent as ManageSearchIcon } from \"@webiny/icons/manage_search.svg\";\nimport { ReactComponent as MoreIcon } from \"@webiny/icons/more_vert.svg\";\n\nconst meta: Meta<typeof Widget> = {\n    title: \"Components/Widget\",\n    component: Widget,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"bg-[#f9fafa] p-[50px] rounded-[5px] max-w-[800px] text-neutral-dimmed\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Widget>;\n\nexport const Default: Story = {\n    args: {\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        title: \"Widget Title\",\n        variant: \"accent\",\n        children: (\n            <>\n                The amazing, splendid, and most useful umbrella, resistant to rain and friendly to\n                winds, is something that deserves all admiration. Crafted with perfect textures, it\n                bravely withstands storms and gently shades the rays of the sun. A remarkable\n                innovation, with an ergonomically designed grip most suited to the hand, it remains\n                stable even in the fiercest weather.\n            </>\n        )\n    },\n    argTypes: {}\n};\n\nexport const PaddingSmall: Story = {\n    args: {\n        ...Default.args,\n        padding: \"sm\"\n    }\n};\n\nexport const PaddingMedium: Story = {\n    args: {\n        ...Default.args,\n        padding: \"md\"\n    }\n};\n\nexport const WithOutline: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true\n    }\n};\n\nexport const WithFooterStartActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const WithFooterEndActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: undefined,\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const WithBothFooterActions: Story = {\n    args: {\n        ...Default.args,\n        variant: \"base\",\n        outline: true,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        ),\n        footerEndActions: <Widget.Action>View All</Widget.Action>\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        className: \"w-[406px]\",\n        variant: \"accent\",\n        title: \"Pages\",\n        icon: <Widget.Icon icon={<HistoryIcon />} label={\"Pages icon\"} />,\n        description: null,\n        children: <>Build stunning landing pages with an easy-to-use drag and drop editor.</>,\n        footerStartActions: (\n            <>\n                <Widget.Action icon={<PlusIcon />}>New Page</Widget.Action>\n                <Widget.Action icon={<PlusIcon />}>New Template</Widget.Action>\n            </>\n        )\n    }\n};\n\nexport const LightVariant: Story = {\n    args: {\n        variant: \"light\",\n        className: \"w-[406px]\",\n        title: \"Need some assistance?\",\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Help icon\"} />,\n        padding: \"md\",\n        children: (\n            <List variant=\"container\" background={\"base\"} className=\"flex flex-col gap-y-sm\">\n                <List.Item\n                    title=\"Start Webiny tour\"\n                    description=\"Let us show you around. You pick what you...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Documentation\"\n                    description=\"Explore the Webiny documentation, learn a...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n                <List.Item\n                    title=\"Contact us\"\n                    description=\"Contact Sales, Explore Partnerships or Sla...\"\n                    actions={<List.Item.Action icon={<ArrowForwardIcon />} />}\n                />\n            </List>\n        )\n    }\n};\n\nexport const BaseVariant: Story = {\n    args: {\n        variant: \"base\",\n        className: \"w-[657px]\",\n        title: \"Review Requests\",\n        icon: <Widget.Icon icon={<ManageSearchIcon />} label={\"Review icon\"} />,\n        headerActions: <Widget.Action>View All</Widget.Action>,\n        padding: \"md\",\n        bodyPadding: false,\n        outline: true,\n        children: (\n            <Tabs\n                separator={true}\n                spacing={\"lg\"}\n                tabs={[\n                    <Tabs.Tab\n                        key={\"inReview\"}\n                        value={\"inReview\"}\n                        trigger={\"In Review (8)\"}\n                        content={\n                            <>\n                                <List\n                                    variant=\"container\"\n                                    background={\"light\"}\n                                    className=\"flex flex-col gap-y-sm\"\n                                >\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Region\"\n                                        description=\"Legal review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#ef4444\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Article: Organization\"\n                                        description=\"Specialist review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#3b82f6\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Product Group: Products\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                    <List.Item\n                                        title=\"Page: Product Group\"\n                                        description=\"Marketing review Sven Al Hamad, 2 days ago\"\n                                        colorMark=\"#eab308\"\n                                        actions={\n                                            <>\n                                                <List.Item.Action icon={<MoreIcon />} />\n                                            </>\n                                        }\n                                    />\n                                </List>\n                            </>\n                        }\n                    />,\n                    <Tabs.Tab\n                        key={\"approved\"}\n                        value={\"approved\"}\n                        trigger={\"Approved\"}\n                        content={<>No review requests approved yet.</>}\n                    />\n                ]}\n            />\n        )\n    }\n};\n\nexport const WithSmallElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"sm\"\n    }\n};\n\nexport const WithMediumElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"md\"\n    }\n};\n\nexport const WithLargeElevation: Story = {\n    args: {\n        ...Default.args,\n        elevation: \"lg\"\n    }\n};\n\nexport const WithIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: <Widget.Icon icon={<NotificationIcon />} label={\"Title icon\"} />\n    }\n};\n\nexport const WithoutIcon: Story = {\n    args: {\n        ...Default.args,\n        icon: undefined\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        return <Widget {...args} />;\n    },\n    args: {\n        title: \"Widget title goes here\",\n        description: \"Widget description goes here\",\n        children: <>This is widget content. Anything can go in here.</>,\n        footerStartActions: (\n            <>\n                <Button variant={\"secondary\"} text={\"Cancel\"} />\n                <Button variant={\"primary\"} text={\"Confirm\"} />\n            </>\n        ),\n        padding: \"sm\",\n        elevation: \"sm\"\n    },\n    argTypes: {\n        title: {\n            description: \"The title displayed at the top of the widget\",\n            control: \"text\"\n        },\n        description: {\n            description: \"A description displayed below the title\",\n            control: \"text\"\n        },\n        children: {\n            description:\n                \"The main content of the widget. Please refer to the example code for details on usage.\"\n        },\n        footerEndActions: {\n            description:\n                \"Buttons or other interactive elements displayed at the bottom of the widget. Please refer to the example code for details on usage.\"\n        },\n        padding: {\n            description: \"Controls the amount of padding inside the widget\",\n            control: \"select\",\n            options: [\"none\", \"standard\", \"comfortable\"]\n        },\n        elevation: {\n            description: \"Controls the shadow depth of the widget\",\n            control: \"select\",\n            options: [\"none\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"]\n        }\n    }\n};\n"],"names":["meta","Widget","Story","Default","HistoryIcon","PaddingSmall","PaddingMedium","WithOutline","WithFooterStartActions","PlusIcon","WithFooterEndActions","undefined","WithBothFooterActions","AccentVariant","LightVariant","NotificationIcon","List","ArrowForwardIcon","BaseVariant","ManageSearchIcon","Tabs","MoreIcon","WithSmallElevation","WithMediumElevation","WithLargeElevation","WithIcon","WithoutIcon","Documentation","args","Button"],"mappings":"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"}

package/exports/admin/ui.d.ts

@@ -17,6 +17,7 @@ export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewportHeight, FillViewportWidth, FillViewport } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/exports/admin/ui.js

@@ -17,6 +17,7 @@ export { Drawer } from "../../Drawer/index.js";
 export { DropdownMenu } from "../../DropdownMenu/index.js";
 export { DynamicFieldset } from "../../DynamicFieldset/index.js";
 export { FilePicker } from "../../FilePicker/index.js";
+export { FillViewport, FillViewportHeight, FillViewportWidth } from "../../FillViewport/index.js";
 export { Grid } from "../../Grid/index.js";
 export { HeaderBar } from "../../HeaderBar/index.js";
 export { Heading } from "../../Heading/index.js";

package/index.d.ts

@@ -10,6 +10,7 @@ export * from "./CodeEditor/index.js";
 export * from "./ColorPicker/index.js";
 export * from "./Calendar/index.js";
 export * from "./DataList/index.js";
+export * from "./DragCursor/index.js";
 export * from "./DataTable/index.js";
 export * from "./DatePicker/index.js";
 export * from "./DelayedOnChange/index.js";
@@ -18,6 +19,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";