@webiny/admin-ui 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a85ef555b2

package/Tabs/Tabs.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tabs } from "./Tabs";
+import { Tabs } from "./Tabs.js";
 declare const meta: Meta<typeof Tabs>;
 export default meta;
 type Story = StoryObj<typeof Tabs>;
@@ -17,6 +17,7 @@ export declare const SpacingDoubleExtraLarge: Story;
 export declare const WithSeparator: Story;
 export declare const WithDefaultValue: Story;
 export declare const WithControlledValue: Story;
+export declare const WithActions: Story;
 export declare const WithIcons: Story;
 export declare const WithDisabledTab: Story;
 export declare const WithHiddenTab: Story;

package/Tabs/Tabs.stories.js

@@ -1,248 +1,294 @@
-import React, { useState } from "react";
-import { ReactComponent as PersonIcon } from "@webiny/icons/person.svg";
-import { ReactComponent as LockIcon } from "@webiny/icons/lock.svg";
-import { Tabs } from "./Tabs";
+import react, { useState } from "react";
+import { ReactComponent } from "@webiny/icons/person.svg";
+import { ReactComponent as lock_svg_ReactComponent } from "@webiny/icons/lock.svg";
+import { Checkbox } from "../Checkbox/index.js";
+import { Tabs } from "./Tabs.js";
 const meta = {
-  title: "Components/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "padded"
-  }
-};
-export default meta;
-export const Default = {
-  args: {
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "password",
-      value: "password",
-      trigger: "Password",
-      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
-    })]
-  }
-};
-export const SizeSmall = {
-  args: {
-    ...Default.args,
-    size: "sm"
-  }
-};
-export const SizeMedium = {
-  args: {
-    ...Default.args,
-    size: "md"
-  }
-};
-export const SizeLarge = {
-  args: {
-    ...Default.args,
-    size: "lg"
-  }
-};
-export const SizeExtraLarge = {
-  args: {
-    ...Default.args,
-    size: "xl"
-  }
-};
-export const SpacingExtraSmall = {
-  args: {
-    ...Default.args,
-    spacing: "xs"
-  }
-};
-export const SpacingSmall = {
-  args: {
-    ...Default.args,
-    spacing: "sm"
-  }
-};
-export const SpacingMedium = {
-  args: {
-    ...Default.args,
-    spacing: "md"
-  }
-};
-export const SpacingLarge = {
-  args: {
-    ...Default.args,
-    spacing: "lg"
-  }
-};
-export const SpacingExtraLarge = {
-  args: {
-    ...Default.args,
-    spacing: "xl"
-  }
-};
-export const SpacingDoubleExtraLarge = {
-  args: {
-    ...Default.args,
-    spacing: "xxl"
-  }
-};
-export const WithSeparator = {
-  args: {
-    ...Default.args,
-    separator: true
-  }
-};
-export const WithDefaultValue = {
-  args: {
-    ...Default.args,
-    defaultValue: "password"
-  }
-};
-export const WithControlledValue = {
-  args: {
-    ...Default.args,
-    value: "password"
-  },
-  render: args => {
-    const [value, setValue] = useState(args.value);
-    return /*#__PURE__*/React.createElement(Tabs, Object.assign({}, args, {
-      value: value,
-      onValueChange: setValue
-    }));
-  }
-};
-export const WithIcons = {
-  args: {
-    ...Default.args,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
-      icon: /*#__PURE__*/React.createElement(PersonIcon, null)
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "password",
-      value: "password",
-      trigger: "Password",
-      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. ",
-      icon: /*#__PURE__*/React.createElement(LockIcon, null)
-    })]
-  }
-};
-export const WithDisabledTab = {
-  args: {
-    ...Default.args,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
-      disabled: true
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "password",
-      value: "password",
-      trigger: "Password",
-      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
-    })]
-  }
-};
-export const WithHiddenTab = {
-  args: {
-    ...Default.args,
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
-      visible: false
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "password",
-      value: "password",
-      trigger: "Password",
-      content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
-    })]
-  }
-};
-export const WithCustomTabSpacing = {
-  args: {
-    ...Default.args,
-    spacing: "sm",
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
-      spacing: "xxl"
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "password",
-      value: "password",
-      trigger: "Password",
-      content: "Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
-    })]
-  }
+    title: "Components/Tabs",
+    component: Tabs,
+    parameters: {
+        layout: "padded"
+    }
 };
-
-// Update the Documentation story to properly handle control changes
-export const Documentation = {
-  render: args => {
-    // Force re-render when args change by using a key
-    return /*#__PURE__*/React.createElement(Tabs, Object.assign({
-      key: JSON.stringify(args)
-    }, args));
-  },
-  args: {
-    size: "md",
-    spacing: "lg",
-    separator: true,
-    defaultValue: "account",
-    tabs: [/*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "account",
-      value: "account",
-      trigger: "Account",
-      content: "Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences."
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "security",
-      value: "security",
-      trigger: "Security",
-      content: "Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity."
-    }), /*#__PURE__*/React.createElement(Tabs.Tab, {
-      key: "preferences",
-      value: "preferences",
-      trigger: "Preferences",
-      content: "Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings."
-    })],
-    value: undefined
-  },
-  argTypes: {
-    size: {
-      description: "Size of the tabs",
-      control: "select",
-      options: ["sm", "md", "lg", "xl"],
-      defaultValue: "md"
-    },
-    spacing: {
-      description: "Spacing around the tabs and content",
-      control: "select",
-      options: ["xs", "sm", "md", "lg", "xl", "xxl"],
-      defaultValue: "lg"
-    },
-    separator: {
-      description: "Whether to show a separator line below the tabs, by default it's `false`.",
-      control: "boolean",
-      defaultValue: false
+const Tabs_stories = meta;
+const Default = {
+    args: {
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum."
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "password",
+                value: "password",
+                trigger: "Password",
+                content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+            })
+        ]
+    }
+};
+const SizeSmall = {
+    args: {
+        ...Default.args,
+        size: "sm"
+    }
+};
+const SizeMedium = {
+    args: {
+        ...Default.args,
+        size: "md"
+    }
+};
+const SizeLarge = {
+    args: {
+        ...Default.args,
+        size: "lg"
+    }
+};
+const SizeExtraLarge = {
+    args: {
+        ...Default.args,
+        size: "xl"
+    }
+};
+const SpacingExtraSmall = {
+    args: {
+        ...Default.args,
+        spacing: "xs"
+    }
+};
+const SpacingSmall = {
+    args: {
+        ...Default.args,
+        spacing: "sm"
+    }
+};
+const SpacingMedium = {
+    args: {
+        ...Default.args,
+        spacing: "md"
+    }
+};
+const SpacingLarge = {
+    args: {
+        ...Default.args,
+        spacing: "lg"
+    }
+};
+const SpacingExtraLarge = {
+    args: {
+        ...Default.args,
+        spacing: "xl"
+    }
+};
+const SpacingDoubleExtraLarge = {
+    args: {
+        ...Default.args,
+        spacing: "xxl"
+    }
+};
+const WithSeparator = {
+    args: {
+        ...Default.args,
+        separator: true
+    }
+};
+const WithDefaultValue = {
+    args: {
+        ...Default.args,
+        defaultValue: "password"
+    }
+};
+const WithControlledValue = {
+    args: {
+        ...Default.args,
+        value: "password"
     },
-    defaultValue: {
-      description: "The value of the tab that should be active by default",
-      control: "text"
+    render: (args)=>{
+        const [value, setValue] = useState(args.value);
+        return /*#__PURE__*/ react.createElement(Tabs, {
+            ...args,
+            value: value,
+            onValueChange: setValue
+        });
+    }
+};
+const WithActions = {
+    args: {
+        ...Default.args,
+        separator: true
     },
-    value: {
-      description: "The controlled value of the active tab, please refer to the example code for details.",
-      control: "none"
+    render: (args)=>{
+        const [unreadOnly, setUnreadOnly] = useState(false);
+        return /*#__PURE__*/ react.createElement(Tabs, {
+            ...args,
+            actions: /*#__PURE__*/ react.createElement(Checkbox, {
+                label: "Unread only",
+                checked: unreadOnly,
+                onChange: setUnreadOnly
+            })
+        });
+    }
+};
+const WithIcons = {
+    args: {
+        ...Default.args,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "password",
+                value: "password",
+                trigger: "Password",
+                content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. ",
+                icon: /*#__PURE__*/ react.createElement(lock_svg_ReactComponent, null)
+            })
+        ]
+    }
+};
+const WithDisabledTab = {
+    args: {
+        ...Default.args,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+                disabled: true
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "password",
+                value: "password",
+                trigger: "Password",
+                content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+            })
+        ]
+    }
+};
+const WithHiddenTab = {
+    args: {
+        ...Default.args,
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+                visible: false
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "password",
+                value: "password",
+                trigger: "Password",
+                content: "Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+            })
+        ]
+    }
+};
+const WithCustomTabSpacing = {
+    args: {
+        ...Default.args,
+        spacing: "sm",
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.",
+                spacing: "xxl"
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "password",
+                value: "password",
+                trigger: "Password",
+                content: "Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. "
+            })
+        ]
+    }
+};
+const Documentation = {
+    render: (args)=>/*#__PURE__*/ react.createElement(Tabs, {
+            key: JSON.stringify(args),
+            ...args
+        }),
+    args: {
+        size: "md",
+        spacing: "lg",
+        separator: true,
+        defaultValue: "account",
+        tabs: [
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "account",
+                value: "account",
+                trigger: "Account",
+                content: "Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences."
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "security",
+                value: "security",
+                trigger: "Security",
+                content: "Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity."
+            }),
+            /*#__PURE__*/ react.createElement(Tabs.Tab, {
+                key: "preferences",
+                value: "preferences",
+                trigger: "Preferences",
+                content: "Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings."
+            })
+        ],
+        value: void 0
     },
-    tabs: {
-      description: "The tabs to render, please refer to the example code for details.",
-      control: "none"
+    argTypes: {
+        size: {
+            description: "Size of the tabs",
+            control: "select",
+            options: [
+                "sm",
+                "md",
+                "lg",
+                "xl"
+            ],
+            defaultValue: "md"
+        },
+        spacing: {
+            description: "Spacing around the tabs and content",
+            control: "select",
+            options: [
+                "xs",
+                "sm",
+                "md",
+                "lg",
+                "xl",
+                "xxl"
+            ],
+            defaultValue: "lg"
+        },
+        separator: {
+            description: "Whether to show a separator line below the tabs, by default it's `false`.",
+            control: "boolean",
+            defaultValue: false
+        },
+        defaultValue: {
+            description: "The value of the tab that should be active by default",
+            control: "text"
+        },
+        value: {
+            description: "The controlled value of the active tab, please refer to the example code for details."
+        },
+        tabs: {
+            description: "The tabs to render, please refer to the example code for details."
+        }
     }
-  }
 };
+export default Tabs_stories;
+export { Default, Documentation, SizeExtraLarge, SizeLarge, SizeMedium, SizeSmall, SpacingDoubleExtraLarge, SpacingExtraLarge, SpacingExtraSmall, SpacingLarge, SpacingMedium, SpacingSmall, WithActions, WithControlledValue, WithCustomTabSpacing, WithDefaultValue, WithDisabledTab, WithHiddenTab, WithIcons, WithSeparator };
 
 //# sourceMappingURL=Tabs.stories.js.map

package/Tabs/Tabs.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","ReactComponent","PersonIcon","LockIcon","Tabs","meta","title","component","parameters","layout","Default","args","tabs","createElement","Tab","key","value","trigger","content","SizeSmall","size","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","spacing","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","separator","WithDefaultValue","defaultValue","WithControlledValue","render","setValue","Object","assign","onValueChange","WithIcons","icon","WithDisabledTab","disabled","WithHiddenTab","visible","WithCustomTabSpacing","Documentation","JSON","stringify","undefined","argTypes","description","control","options"],"sources":["Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Tabs } from \"./Tabs\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\",\n            control: \"none\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASD,cAAc,IAAIE,QAAQ,QAAQ,wBAAwB;AACnE,SAASC,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEH,IAAI;EACfI,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeJ,IAAI;AAGnB,OAAO,MAAMK,OAAc,GAAG;EAC1BC,IAAI,EAAE;IACFC,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH;IACH,CACJ,CAAC,eACFnB,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH;IACH,CACJ,CAAC;EAEV;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5BR,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfS,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BV,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfS,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAME,SAAgB,GAAG;EAC5BX,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfS,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMG,cAAqB,GAAG;EACjCZ,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfS,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMI,iBAAwB,GAAG;EACpCb,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,YAAmB,GAAG;EAC/Bf,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAME,aAAoB,GAAG;EAChChB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMG,YAAmB,GAAG;EAC/BjB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMI,iBAAwB,GAAG;EACpClB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMK,uBAA8B,GAAG;EAC1CnB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMM,aAAoB,GAAG;EAChCpB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfqB,SAAS,EAAE;EACf;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnCtB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfuB,YAAY,EAAE;EAClB;AACJ,CAAC;AAED,OAAO,MAAMC,mBAA0B,GAAG;EACtCxB,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfK,KAAK,EAAE;EACX,CAAC;EACDoB,MAAM,EAAEzB,IAAI,IAAI;IACZ,MAAM,CAACK,KAAK,EAAEqB,QAAQ,CAAC,GAAGrC,QAAQ,CAACW,IAAI,CAACK,KAAK,CAAC;IAC9C,oBAAOjB,KAAA,CAAAc,aAAA,CAACT,IAAI,EAAAkC,MAAA,CAAAC,MAAA,KAAK5B,IAAI;MAAEK,KAAK,EAAEA,KAAM;MAACwB,aAAa,EAAEH;IAAS,EAAE,CAAC;EACpE;AACJ,CAAC;AAED,OAAO,MAAMI,SAAgB,GAAG;EAC5B9B,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH,qQACH;MACDwB,IAAI,eAAE3C,KAAA,CAAAc,aAAA,CAACX,UAAU,MAAE;IAAE,CACxB,CAAC,eACFH,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH,2KACH;MACDwB,IAAI,eAAE3C,KAAA,CAAAc,aAAA,CAACV,QAAQ,MAAE;IAAE,CACtB,CAAC;EAEV;AACJ,CAAC;AAED,OAAO,MAAMwC,eAAsB,GAAG;EAClChC,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH,qQACH;MACD0B,QAAQ,EAAE;IAAK,CAClB,CAAC,eACF7C,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH;IACH,CACJ,CAAC;EAEV;AACJ,CAAC;AAED,OAAO,MAAM2B,aAAoB,GAAG;EAChClC,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfC,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH,qQACH;MACD4B,OAAO,EAAE;IAAM,CAClB,CAAC,eACF/C,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH;IACH,CACJ,CAAC;EAEV;AACJ,CAAC;AAED,OAAO,MAAM6B,oBAA2B,GAAG;EACvCpC,IAAI,EAAE;IACF,GAAGD,OAAO,CAACC,IAAI;IACfc,OAAO,EAAE,IAAI;IACbb,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH,qLACH;MACDO,OAAO,EAAE;IAAM,CAClB,CAAC,eACF1B,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH;IACH,CACJ,CAAC;EAEV;AACJ,CAAC;;AAED;AACA,OAAO,MAAM8B,aAAoB,GAAG;EAChCZ,MAAM,EAAEzB,IAAI,IAAI;IACZ;IACA,oBAAOZ,KAAA,CAAAc,aAAA,CAACT,IAAI,EAAAkC,MAAA,CAAAC,MAAA;MAACxB,GAAG,EAAEkC,IAAI,CAACC,SAAS,CAACvC,IAAI;IAAE,GAAKA,IAAI,CAAG,CAAC;EACxD,CAAC;EACDA,IAAI,EAAE;IACFS,IAAI,EAAE,IAAI;IACVK,OAAO,EAAE,IAAI;IACbO,SAAS,EAAE,IAAI;IACfE,YAAY,EAAE,SAAS;IACvBtB,IAAI,EAAE,cACFb,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,SAAU;MACfC,KAAK,EAAE,SAAU;MACjBC,OAAO,EAAE,SAAU;MACnBC,OAAO,EACH;IACH,CACJ,CAAC,eACFnB,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,UAAW;MAChBC,KAAK,EAAE,UAAW;MAClBC,OAAO,EAAE,UAAW;MACpBC,OAAO,EACH;IACH,CACJ,CAAC,eACFnB,KAAA,CAAAc,aAAA,CAACT,IAAI,CAACU,GAAG;MACLC,GAAG,EAAE,aAAc;MACnBC,KAAK,EAAE,aAAc;MACrBC,OAAO,EAAE,aAAc;MACvBC,OAAO,EACH;IACH,CACJ,CAAC,CACL;IACDF,KAAK,EAAEmC;EACX,CAAC;EACDC,QAAQ,EAAE;IACNhC,IAAI,EAAE;MACFiC,WAAW,EAAE,kBAAkB;MAC/BC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MACjCrB,YAAY,EAAE;IAClB,CAAC;IACDT,OAAO,EAAE;MACL4B,WAAW,EAAE,qCAAqC;MAClDC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;MAC9CrB,YAAY,EAAE;IAClB,CAAC;IACDF,SAAS,EAAE;MACPqB,WAAW,EACP,2EAA2E;MAC/EC,OAAO,EAAE,SAAS;MAClBpB,YAAY,EAAE;IAClB,CAAC;IACDA,YAAY,EAAE;MACVmB,WAAW,EAAE,uDAAuD;MACpEC,OAAO,EAAE;IACb,CAAC;IACDtC,KAAK,EAAE;MACHqC,WAAW,EACP,uFAAuF;MAC3FC,OAAO,EAAE;IACb,CAAC;IACD1C,IAAI,EAAE;MACFyC,WAAW,EAAE,mEAAmE;MAChFC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}
+{"version":3,"file":"Tabs/Tabs.stories.js","sources":["../../src/Tabs/Tabs.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as PersonIcon } from \"@webiny/icons/person.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { Tabs } from \"./Tabs.js\";\n\nconst meta: Meta<typeof Tabs> = {\n    title: \"Components/Tabs\",\n    component: Tabs,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tabs>;\n\nexport const Default: Story = {\n    args: {\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const SizeSmall: Story = {\n    args: {\n        ...Default.args,\n        size: \"sm\"\n    }\n};\n\nexport const SizeMedium: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const SizeLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const SizeExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const SpacingExtraSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xs\"\n    }\n};\n\nexport const SpacingSmall: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\"\n    }\n};\n\nexport const SpacingMedium: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"md\"\n    }\n};\n\nexport const SpacingLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"lg\"\n    }\n};\n\nexport const SpacingExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xl\"\n    }\n};\n\nexport const SpacingDoubleExtraLarge: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"xxl\"\n    }\n};\n\nexport const WithSeparator: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    }\n};\n\nexport const WithDefaultValue: Story = {\n    args: {\n        ...Default.args,\n        defaultValue: \"password\"\n    }\n};\n\nexport const WithControlledValue: Story = {\n    args: {\n        ...Default.args,\n        value: \"password\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <Tabs {...args} value={value} onValueChange={setValue} />;\n    }\n};\n\nexport const WithActions: Story = {\n    args: {\n        ...Default.args,\n        separator: true\n    },\n    render: args => {\n        const [unreadOnly, setUnreadOnly] = useState(false);\n        return (\n            <Tabs\n                {...args}\n                actions={\n                    <Checkbox label=\"Unread only\" checked={unreadOnly} onChange={setUnreadOnly} />\n                }\n            />\n        );\n    }\n};\n\nexport const WithIcons: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                icon={<PersonIcon />}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n                icon={<LockIcon />}\n            />\n        ]\n    }\n};\n\nexport const WithDisabledTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                disabled={true}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithHiddenTab: Story = {\n    args: {\n        ...Default.args,\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                visible={false}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Password content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\nexport const WithCustomTabSpacing: Story = {\n    args: {\n        ...Default.args,\n        spacing: \"sm\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Tab with custom spacing XXL - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum.\"\n                }\n                spacing={\"xxl\"}\n            />,\n            <Tabs.Tab\n                key={\"password\"}\n                value={\"password\"}\n                trigger={\"Password\"}\n                content={\n                    \"Tab with inherited spacing - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel libero nec libero lacinia fermentum. Nullam nec nunc nec libero lacinia fermentum. \"\n                }\n            />\n        ]\n    }\n};\n\n// Update the Documentation story to properly handle control changes\nexport const Documentation: Story = {\n    render: args => {\n        // Force re-render when args change by using a key\n        return <Tabs key={JSON.stringify(args)} {...args} />;\n    },\n    args: {\n        size: \"md\",\n        spacing: \"lg\",\n        separator: true,\n        defaultValue: \"account\",\n        tabs: [\n            <Tabs.Tab\n                key={\"account\"}\n                value={\"account\"}\n                trigger={\"Account\"}\n                content={\n                    \"Account content - This tab contains account settings and personal information. Users can update their profile details, change email address, and manage notification preferences.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"security\"}\n                value={\"security\"}\n                trigger={\"Security\"}\n                content={\n                    \"Security content - This tab contains security settings. Users can change their password, enable two-factor authentication, and review recent account activity.\"\n                }\n            />,\n            <Tabs.Tab\n                key={\"preferences\"}\n                value={\"preferences\"}\n                trigger={\"Preferences\"}\n                content={\n                    \"Preferences content - This tab contains user preferences. Users can customize the interface, set language preferences, and configure other application settings.\"\n                }\n            />\n        ],\n        value: undefined\n    },\n    argTypes: {\n        size: {\n            description: \"Size of the tabs\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"],\n            defaultValue: \"md\"\n        },\n        spacing: {\n            description: \"Spacing around the tabs and content\",\n            control: \"select\",\n            options: [\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"],\n            defaultValue: \"lg\"\n        },\n        separator: {\n            description:\n                \"Whether to show a separator line below the tabs, by default it's `false`.\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        defaultValue: {\n            description: \"The value of the tab that should be active by default\",\n            control: \"text\"\n        },\n        value: {\n            description:\n                \"The controlled value of the active tab, please refer to the example code for details.\"\n        },\n        tabs: {\n            description: \"The tabs to render, please refer to the example code for details.\"\n        }\n    }\n};\n"],"names":["meta","Tabs","Default","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","SpacingExtraSmall","SpacingSmall","SpacingMedium","SpacingLarge","SpacingExtraLarge","SpacingDoubleExtraLarge","WithSeparator","WithDefaultValue","WithControlledValue","args","value","setValue","useState","WithActions","unreadOnly","setUnreadOnly","Checkbox","WithIcons","PersonIcon","LockIcon","WithDisabledTab","WithHiddenTab","WithCustomTabSpacing","Documentation","JSON","undefined"],"mappings":"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"}

package/Tabs/components/Content.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { type VariantProps } from "../../utils";
+import { type VariantProps } from "../../utils.js";
 declare const tabContentVariants: (props?: ({
-    spacing?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    spacing?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ContentProps = Omit<TabsPrimitive.TabsContentProps, "children" | "content"> & VariantProps<typeof tabContentVariants> & {
     content: React.ReactNode;
 };