@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/Badge.stories-D3nfVAAW.js

@@ -0,0 +1,84 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{g as s}from"./Text-BAwif7rv-BYvLGGQV.js";import"./Update-DflVXGGQ-qVV03FlC.js";import"./index-CzKwSnp0.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const B={title:"Components/Writer/Badge",component:s,parameters:{docs:{description:{component:"Badge component is used to display small status indicators, labels, or tags."}}},argTypes:{children:{description:"The content to display inside the badge",control:"text"},size:{description:"The size of the badge",control:{type:"select"},options:["xs","sm"]},kind:{description:"The visual style variant of the badge",control:{type:"select"},options:["default","warning","info"]},className:{description:"Additional CSS classes to apply",control:"text"}}},n={args:{children:"Default Badge",kind:"default",size:"sm"}},a={args:{children:"Small Badge",size:"sm",kind:"default"}},r={args:{children:"XS Badge",size:"xs",kind:"default"}},i={args:{children:"Warning Badge",kind:"warning",size:"sm"}},t={args:{children:"Info Badge",kind:"info",size:"sm"}},d={render:()=>e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsx(s,{kind:"default",size:"sm",children:"Default"}),e.jsx(s,{kind:"warning",size:"sm",children:"Warning"}),e.jsx(s,{kind:"info",size:"sm",children:"Info"}),e.jsx(s,{kind:"default",size:"xs",children:"XS Default"}),e.jsx(s,{kind:"warning",size:"xs",children:"XS Warning"}),e.jsx(s,{kind:"info",size:"xs",children:"XS Info"})]})},o={render:()=>e.jsxs("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap",alignItems:"center"},children:[e.jsxs(s,{kind:"info",size:"sm",children:[e.jsx("span",{style:{marginRight:"4px"},children:"ℹ️"}),"Information"]}),e.jsxs(s,{kind:"warning",size:"sm",children:[e.jsx("span",{style:{marginRight:"4px"},children:"⚠️"}),"Warning"]}),e.jsxs(s,{kind:"default",size:"sm",children:[e.jsx("span",{style:{marginRight:"4px"},children:"🏷️"}),"Label"]})]})},l={args:{children:"Click me!",kind:"default",size:"sm"},parameters:{docs:{description:{story:"This badge can be used in interactive contexts. You can add onClick handlers or other event listeners."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Default Badge',
+    kind: 'default',
+    size: 'sm'
+  }
+}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Small Badge',
+    size: 'sm',
+    kind: 'default'
+  }
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'XS Badge',
+    size: 'xs',
+    kind: 'default'
+  }
+}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Warning Badge',
+    kind: 'warning',
+    size: 'sm'
+  }
+}`,...i.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Info Badge',
+    kind: 'info',
+    size: 'sm'
+  }
+}`,...t.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: 'flex',
+    gap: '12px',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  }}>
+            <Badge kind="default" size="sm">Default</Badge>
+            <Badge kind="warning" size="sm">Warning</Badge>
+            <Badge kind="info" size="sm">Info</Badge>
+            <Badge kind="default" size="xs">XS Default</Badge>
+            <Badge kind="warning" size="xs">XS Warning</Badge>
+            <Badge kind="info" size="xs">XS Info</Badge>
+        </div>
+}`,...d.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    display: 'flex',
+    gap: '12px',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  }}>
+            <Badge kind="info" size="sm">
+                <span style={{
+        marginRight: '4px'
+      }}>ℹ️</span>
+                Information
+            </Badge>
+            <Badge kind="warning" size="sm">
+                <span style={{
+        marginRight: '4px'
+      }}>⚠️</span>
+                Warning
+            </Badge>
+            <Badge kind="default" size="sm">
+                <span style={{
+        marginRight: '4px'
+      }}>🏷️</span>
+                Label
+            </Badge>
+        </div>
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Click me!',
+    kind: 'default',
+    size: 'sm'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'This badge can be used in interactive contexts. You can add onClick handlers or other event listeners.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const S=["Default","Small","ExtraSmall","Warning","Info","AllVariants","WithIcons","Interactive"];export{d as AllVariants,n as Default,r as ExtraSmall,t as Info,l as Interactive,a as Small,i as Warning,o as WithIcons,S as __namedExportsOrder,B as default};

package/storybook-static/assets/Banner.stories-BHLs2WlR.js

@@ -0,0 +1,394 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{I as a,a as s,b as i}from"./Icons-CjNNbMNR.js";import{p as n}from"./Text-BAwif7rv-BYvLGGQV.js";import"./Update-DflVXGGQ-qVV03FlC.js";import"./index-CzKwSnp0.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";import"./index-DUCcPMOf.js";import"./index-DgnBCu_c.js";import"./index-D_kTjGoR.js";const N={title:"Components/Writer/Banner",component:n,parameters:{docs:{description:{component:"Banner component displays promotional or informational messages with optional storage functionality to control visibility based on user interactions."}}},argTypes:{children:{description:"The content to display inside the banner",control:"text"},kind:{description:"The visual style variant of the banner",control:{type:"select"},options:["secondary"]},label:{description:"Optional label to display in the banner",control:"text"},href:{description:"URL to navigate to when banner is clicked",control:"text"},icon:{description:"Icon to display in the banner",control:!1},store:{description:"Seconds until banner can show again after being closed",control:"number"}}},o={args:{children:"New feature available! Check out our latest updates.",href:"#"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},t={args:{children:"Session replay is now available in beta",icon:e.jsx(a,{}),href:"/features/session-replay"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},l={args:{children:"Analytics dashboard has been updated",label:"NEW",href:"/analytics"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},d={args:{children:"Funnel analysis tool is now live",icon:e.jsx(s,{}),label:"BETA",href:"/tools/funnel-analysis"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},c={args:{children:"This is a secondary banner with different styling",kind:"secondary",label:"INFO"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},p={args:{children:"This banner will be hidden for 30 seconds after closing",label:"REMINDER",store:30},render:r=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx(n,{...r}),e.jsx("p",{style:{marginTop:"10px",fontSize:"14px",color:"#666"},children:"Try closing this banner and refreshing the page to see the storage functionality."})]}),parameters:{docs:{description:{story:"This banner demonstrates the storage functionality. When closed, it will be hidden for the specified number of seconds."}}}},h={args:{children:"This is a banner with much longer content to demonstrate how the component handles extended text and multiple lines of information.",icon:e.jsx(i,{}),label:"UPDATE",href:"/changelog"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},m={args:{children:"Visit our documentation for more information",icon:e.jsx(a,{}),label:"DOCS",href:"https://docs.example.com"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},x={args:{children:"This banner has no link and cannot be clicked",icon:e.jsx(s,{}),label:"NOTICE"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(n,{...r})})},g={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Default Banners"}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{href:"#",children:"Basic banner with link"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{icon:e.jsx(a,{}),href:"#",children:"Banner with icon"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{label:"NEW",href:"#",children:"Banner with label"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{icon:e.jsx(i,{}),label:"BETA",href:"#",children:"Banner with icon and label"})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Secondary Banners"}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{kind:"secondary",label:"INFO",children:"Secondary banner with label"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{kind:"secondary",icon:e.jsx(s,{}),label:"UPDATE",children:"Secondary banner with icon and label"})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Banners with Storage"}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{store:60,label:"REMINDER",children:"This banner will be hidden for 1 minute after closing"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{store:300,icon:e.jsx(a,{}),label:"TIP",children:"This banner will be hidden for 5 minutes after closing"})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"External Links"}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{href:"https://github.com",icon:e.jsx(i,{}),label:"GITHUB",children:"Visit our GitHub repository"})}),e.jsx("div",{style:{marginBottom:"20px"},children:e.jsx(n,{href:"https://docs.example.com",label:"DOCS",children:"Read our documentation"})})]})]})},y={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Product Announcements"}),e.jsx("p",{children:"Banners commonly used for product announcements and feature releases."}),e.jsx("div",{style:{marginTop:"16px"},children:e.jsx(n,{icon:e.jsx(a,{}),label:"NEW",href:"/features/session-replay",children:"Session replay is now available in beta! Record and analyze user interactions."})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"System Notifications"}),e.jsx("p",{children:"Banners used for system-wide notifications and updates."}),e.jsx("div",{style:{marginTop:"16px"},children:e.jsx(n,{kind:"secondary",label:"MAINTENANCE",store:3600,children:"Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM EST"})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Promotional Content"}),e.jsx("p",{children:"Banners for promotional content and marketing messages."}),e.jsx("div",{style:{marginTop:"16px"},children:e.jsx(n,{icon:e.jsx(i,{}),label:"SALE",href:"/pricing",children:"🎉 50% off annual plans! Limited time offer ends soon."})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Documentation Updates"}),e.jsx("p",{children:"Banners for documentation and help content."}),e.jsx("div",{style:{marginTop:"16px"},children:e.jsx(n,{icon:e.jsx(s,{}),label:"GUIDE",href:"/docs/getting-started",children:"New getting started guide available with step-by-step instructions"})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h2",{children:"Beta Features"}),e.jsx("p",{children:"Banners for beta features and experimental functionality."}),e.jsx("div",{style:{marginTop:"16px"},children:e.jsx(n,{kind:"secondary",icon:e.jsx(a,{}),label:"BETA",store:86400,children:"Try our new analytics dashboard in beta! Feedback welcome."})})]})]}),parameters:{docs:{description:{story:"This example shows how banners are typically used in real-world applications, demonstrating common patterns and use cases."}}}},u={args:{children:"This banner demonstrates interactive behavior. Try clicking it or closing it!",icon:e.jsx(a,{}),label:"DEMO",href:"#",store:10},render:r=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsx(n,{...r}),e.jsx("p",{style:{marginTop:"10px",fontSize:"14px",color:"#666"},children:"This banner has a 10-second storage delay. Try closing it and refreshing the page to see the behavior."})]}),parameters:{docs:{description:{story:"This banner demonstrates the interactive behavior including clicking and closing functionality."}}}},b={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Short Duration (30 seconds)"}),e.jsx(n,{store:30,label:"QUICK",children:"This banner will reappear after 30 seconds"})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Medium Duration (5 minutes)"}),e.jsx(n,{store:300,icon:e.jsx(i,{}),label:"INFO",children:"This banner will reappear after 5 minutes"})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Long Duration (1 hour)"}),e.jsx(n,{store:3600,icon:e.jsx(s,{}),label:"REMINDER",children:"This banner will reappear after 1 hour"})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Very Long Duration (1 day)"}),e.jsx(n,{store:86400,kind:"secondary",label:"UPDATE",children:"This banner will reappear after 1 day"})]})]}),parameters:{docs:{description:{story:"This example shows different storage durations and how they affect banner visibility."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'New feature available! Check out our latest updates.',
+    href: '#'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...o.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Session replay is now available in beta',
+    icon: <IconSessionReplay />,
+    href: '/features/session-replay'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Analytics dashboard has been updated',
+    label: 'NEW',
+    href: '/analytics'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Funnel analysis tool is now live',
+    icon: <IconFunnels />,
+    label: 'BETA',
+    href: '/tools/funnel-analysis'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...d.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'This is a secondary banner with different styling',
+    kind: 'secondary',
+    label: 'INFO'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...c.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'This banner will be hidden for 30 seconds after closing',
+    label: 'REMINDER',
+    store: 30
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+            <p style={{
+      marginTop: '10px',
+      fontSize: '14px',
+      color: '#666'
+    }}>
+                Try closing this banner and refreshing the page to see the storage functionality.
+            </p>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This banner demonstrates the storage functionality. When closed, it will be hidden for the specified number of seconds.'
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'This is a banner with much longer content to demonstrate how the component handles extended text and multiple lines of information.',
+    icon: <IconMetrics />,
+    label: 'UPDATE',
+    href: '/changelog'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'Visit our documentation for more information',
+    icon: <IconSessionReplay />,
+    label: 'DOCS',
+    href: 'https://docs.example.com'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...m.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'This banner has no link and cannot be clicked',
+    icon: <IconFunnels />,
+    label: 'NOTICE'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+        </div>
+}`,...x.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Default Banners</h3>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner href="#">
+                        Basic banner with link
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner icon={<IconSessionReplay />} href="#">
+                        Banner with icon
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner label="NEW" href="#">
+                        Banner with label
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner icon={<IconMetrics />} label="BETA" href="#">
+                        Banner with icon and label
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Secondary Banners</h3>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner kind="secondary" label="INFO">
+                        Secondary banner with label
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner kind="secondary" icon={<IconFunnels />} label="UPDATE">
+                        Secondary banner with icon and label
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Banners with Storage</h3>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner store={60} label="REMINDER">
+                        This banner will be hidden for 1 minute after closing
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner store={300} icon={<IconSessionReplay />} label="TIP">
+                        This banner will be hidden for 5 minutes after closing
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>External Links</h3>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner href="https://github.com" icon={<IconMetrics />} label="GITHUB">
+                        Visit our GitHub repository
+                    </Banner>
+                </div>
+                <div style={{
+        marginBottom: '20px'
+      }}>
+                    <Banner href="https://docs.example.com" label="DOCS">
+                        Read our documentation
+                    </Banner>
+                </div>
+            </div>
+        </div>
+}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '800px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h2>Product Announcements</h2>
+                <p>Banners commonly used for product announcements and feature releases.</p>
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <Banner icon={<IconSessionReplay />} label="NEW" href="/features/session-replay">
+                        Session replay is now available in beta! Record and analyze user interactions.
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h2>System Notifications</h2>
+                <p>Banners used for system-wide notifications and updates.</p>
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <Banner kind="secondary" label="MAINTENANCE" store={3600}>
+                        Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM EST
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h2>Promotional Content</h2>
+                <p>Banners for promotional content and marketing messages.</p>
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <Banner icon={<IconMetrics />} label="SALE" href="/pricing">
+                        🎉 50% off annual plans! Limited time offer ends soon.
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h2>Documentation Updates</h2>
+                <p>Banners for documentation and help content.</p>
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <Banner icon={<IconFunnels />} label="GUIDE" href="/docs/getting-started">
+                        New getting started guide available with step-by-step instructions
+                    </Banner>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h2>Beta Features</h2>
+                <p>Banners for beta features and experimental functionality.</p>
+                <div style={{
+        marginTop: '16px'
+      }}>
+                    <Banner kind="secondary" icon={<IconSessionReplay />} label="BETA" store={86400}>
+                        Try our new analytics dashboard in beta! Feedback welcome.
+                    </Banner>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how banners are typically used in real-world applications, demonstrating common patterns and use cases.'
+      }
+    }
+  }
+}`,...y.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    children: 'This banner demonstrates interactive behavior. Try clicking it or closing it!',
+    icon: <IconSessionReplay />,
+    label: 'DEMO',
+    href: '#',
+    store: 10
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Banner {...args} />
+            <p style={{
+      marginTop: '10px',
+      fontSize: '14px',
+      color: '#666'
+    }}>
+                This banner has a 10-second storage delay. Try closing it and refreshing the page to see the behavior.
+            </p>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This banner demonstrates the interactive behavior including clicking and closing functionality.'
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Short Duration (30 seconds)</h3>
+                <Banner store={30} label="QUICK">
+                    This banner will reappear after 30 seconds
+                </Banner>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Medium Duration (5 minutes)</h3>
+                <Banner store={300} icon={<IconMetrics />} label="INFO">
+                    This banner will reappear after 5 minutes
+                </Banner>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Long Duration (1 hour)</h3>
+                <Banner store={3600} icon={<IconFunnels />} label="REMINDER">
+                    This banner will reappear after 1 hour
+                </Banner>
+            </div>
+
+            <div style={{
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Very Long Duration (1 day)</h3>
+                <Banner store={86400} kind="secondary" label="UPDATE">
+                    This banner will reappear after 1 day
+                </Banner>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows different storage durations and how they affect banner visibility.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};const A=["Default","WithIcon","WithLabel","WithIconAndLabel","Secondary","WithStorage","LongContent","ExternalLink","NoLink","AllVariants","RealWorldExamples","Interactive","StorageDurations"];export{g as AllVariants,o as Default,m as ExternalLink,u as Interactive,h as LongContent,x as NoLink,y as RealWorldExamples,c as Secondary,b as StorageDurations,t as WithIcon,d as WithIconAndLabel,l as WithLabel,p as WithStorage,A as __namedExportsOrder,N as default};

package/storybook-static/assets/Baseline.stories-Bwx2zF_U.js

@@ -0,0 +1,103 @@
+import{j as S}from"./jsx-runtime-D_zvdyIk.js";import{g as ue,r as fe,e as pe}from"./index-CzKwSnp0.js";import{i as H}from"./system-CcsYyfSK.js";import"./Button-Cj99tk5U-Cn0Wrqkw.js";import"./_rollupPluginBabelHelpers-DuYa1R0C-CyXpXONY.js";function de(e,t){if(e.match(/^[a-z]+:\/\//i))return e;if(e.match(/^\/\//))return window.location.protocol+e;if(e.match(/^[a-z]+:/i))return e;const r=document.implementation.createHTMLDocument(),n=r.createElement("base"),s=r.createElement("a");return r.head.appendChild(n),r.body.appendChild(s),t&&(n.href=t),s.href=e,s.href}const me=(()=>{let e=0;const t=()=>`0000${(Math.random()*36**4<<0).toString(36)}`.slice(-4);return()=>(e+=1,`u${t()}${e}`)})();function g(e){const t=[];for(let r=0,n=e.length;r<n;r++)t.push(e[r]);return t}let b=null;function ee(e={}){return b||(e.includeStyleProperties?(b=e.includeStyleProperties,b):(b=g(window.getComputedStyle(document.documentElement)),b))}function k(e,t){const n=(e.ownerDocument.defaultView||window).getComputedStyle(e).getPropertyValue(t);return n?parseFloat(n.replace("px","")):0}function he(e){const t=k(e,"border-left-width"),r=k(e,"border-right-width");return e.clientWidth+t+r}function ge(e){const t=k(e,"border-top-width"),r=k(e,"border-bottom-width");return e.clientHeight+t+r}function ye(e,t={}){const r=t.width||he(e),n=t.height||ge(e);return{width:r,height:n}}function V(e){return new Promise((t,r)=>{const n=new Image;n.onload=()=>{n.decode().then(()=>{requestAnimationFrame(()=>t(n))})},n.onerror=r,n.crossOrigin="anonymous",n.decoding="async",n.src=e})}async function be(e){return Promise.resolve().then(()=>new XMLSerializer().serializeToString(e)).then(encodeURIComponent).then(t=>`data:image/svg+xml;charset=utf-8,${t}`)}async function we(e,t,r){const n="http://www.w3.org/2000/svg",s=document.createElementNS(n,"svg"),o=document.createElementNS(n,"foreignObject");return s.setAttribute("width",`${t}`),s.setAttribute("height",`${r}`),s.setAttribute("viewBox",`0 0 ${t} ${r}`),o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("x","0"),o.setAttribute("y","0"),o.setAttribute("externalResourcesRequired","true"),s.appendChild(o),o.appendChild(e),be(s)}const p=(e,t)=>{if(e instanceof t)return!0;const r=Object.getPrototypeOf(e);return r===null?!1:r.constructor.name===t.name||p(r,t)};function Se(e){const t=e.getPropertyValue("content");return`${e.cssText} content: '${t.replace(/'|"/g,"")}';`}function xe(e,t){return ee(t).map(r=>{const n=e.getPropertyValue(r),s=e.getPropertyPriority(r);return`${r}: ${n}${s?" !important":""};`}).join(" ")}function Ee(e,t,r,n){const s=`.${e}:${t}`,o=r.cssText?Se(r):xe(r,n);return document.createTextNode(`${s}{${o}}`)}function z(e,t,r,n){const s=window.getComputedStyle(e,r),o=s.getPropertyValue("content");if(o===""||o==="none")return;const a=me();try{t.className=`${t.className} ${a}`}catch{return}const l=document.createElement("style");l.appendChild(Ee(a,r,s,n)),t.appendChild(l)}function Re(e,t,r){z(e,t,":before",r),z(e,t,":after",r)}const X="application/font-woff",K="image/jpeg",Ce={woff:X,woff2:X,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:K,jpeg:K,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml",webp:"image/webp"};function ve(e){const t=/\.([^./]*?)$/g.exec(e);return t?t[1]:""}function M(e){const t=ve(e).toLowerCase();return Ce[t]||""}function Te(e){return e.split(/,/)[1]}function j(e){return e.search(/^(data:)/)!==-1}function Pe(e,t){return`data:${t};base64,${e}`}async function te(e,t,r){const n=await fetch(e,t);if(n.status===404)throw new Error(`Resource "${n.url}" not found`);const s=await n.blob();return new Promise((o,a)=>{const l=new FileReader;l.onerror=a,l.onloadend=()=>{try{o(r({res:n,result:l.result}))}catch(i){a(i)}},l.readAsDataURL(s)})}const B={};function Le(e,t,r){let n=e.replace(/\?.*/,"");return r&&(n=e),/ttf|otf|eot|woff2?/i.test(n)&&(n=n.replace(/.*\//,"")),t?`[${t}]${n}`:n}async function O(e,t,r){const n=Le(e,t,r.includeQueryParams);if(B[n]!=null)return B[n];r.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+new Date().getTime());let s;try{const o=await te(e,r.fetchRequestInit,({res:a,result:l})=>(t||(t=a.headers.get("Content-Type")||""),Te(l)));s=Pe(o,t)}catch(o){s=r.imagePlaceholder||"";let a=`Failed to fetch resource: ${e}`;o&&(a=typeof o=="string"?o:o.message),a&&console.warn(a)}return B[n]=s,s}async function $e(e){const t=e.toDataURL();return t==="data:,"?e.cloneNode(!1):V(t)}async function Fe(e,t){if(e.currentSrc){const o=document.createElement("canvas"),a=o.getContext("2d");o.width=e.clientWidth,o.height=e.clientHeight,a?.drawImage(e,0,0,o.width,o.height);const l=o.toDataURL();return V(l)}const r=e.poster,n=M(r),s=await O(r,n,t);return V(s)}async function Ae(e,t){var r;try{if(!((r=e?.contentDocument)===null||r===void 0)&&r.body)return await D(e.contentDocument.body,t,!0)}catch{}return e.cloneNode(!1)}async function ke(e,t){return p(e,HTMLCanvasElement)?$e(e):p(e,HTMLVideoElement)?Fe(e,t):p(e,HTMLIFrameElement)?Ae(e,t):e.cloneNode(ne(e))}const De=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SLOT",ne=e=>e.tagName!=null&&e.tagName.toUpperCase()==="SVG";async function Ue(e,t,r){var n,s;if(ne(t))return t;let o=[];return De(e)&&e.assignedNodes?o=g(e.assignedNodes()):p(e,HTMLIFrameElement)&&(!((n=e.contentDocument)===null||n===void 0)&&n.body)?o=g(e.contentDocument.body.childNodes):o=g(((s=e.shadowRoot)!==null&&s!==void 0?s:e).childNodes),o.length===0||p(e,HTMLVideoElement)||await o.reduce((a,l)=>a.then(()=>D(l,r)).then(i=>{i&&t.appendChild(i)}),Promise.resolve()),t}function Ie(e,t,r){const n=t.style;if(!n)return;const s=window.getComputedStyle(e);s.cssText?(n.cssText=s.cssText,n.transformOrigin=s.transformOrigin):ee(r).forEach(o=>{let a=s.getPropertyValue(o);o==="font-size"&&a.endsWith("px")&&(a=`${Math.floor(parseFloat(a.substring(0,a.length-2)))-.1}px`),p(e,HTMLIFrameElement)&&o==="display"&&a==="inline"&&(a="block"),o==="d"&&t.getAttribute("d")&&(a=`path(${t.getAttribute("d")})`),n.setProperty(o,a,s.getPropertyPriority(o))})}function Be(e,t){p(e,HTMLTextAreaElement)&&(t.innerHTML=e.value),p(e,HTMLInputElement)&&t.setAttribute("value",e.value)}function Ve(e,t){if(p(e,HTMLSelectElement)){const r=t,n=Array.from(r.children).find(s=>e.value===s.getAttribute("value"));n&&n.setAttribute("selected","")}}function je(e,t,r){return p(t,Element)&&(Ie(e,t,r),Re(e,t,r),Be(e,t),Ve(e,t)),t}async function He(e,t){const r=e.querySelectorAll?e.querySelectorAll("use"):[];if(r.length===0)return e;const n={};for(let o=0;o<r.length;o++){const l=r[o].getAttribute("xlink:href");if(l){const i=e.querySelector(l),c=document.querySelector(l);!i&&c&&!n[l]&&(n[l]=await D(c,t,!0))}}const s=Object.values(n);if(s.length){const o="http://www.w3.org/1999/xhtml",a=document.createElementNS(o,"svg");a.setAttribute("xmlns",o),a.style.position="absolute",a.style.width="0",a.style.height="0",a.style.overflow="hidden",a.style.display="none";const l=document.createElementNS(o,"defs");a.appendChild(l);for(let i=0;i<s.length;i++)l.appendChild(s[i]);e.appendChild(a)}return e}async function D(e,t,r){return!r&&t.filter&&!t.filter(e)?null:Promise.resolve(e).then(n=>ke(n,t)).then(n=>Ue(e,n,t)).then(n=>je(e,n,t)).then(n=>He(n,t))}const re=/url\((['"]?)([^'"]+?)\1\)/g,Me=/url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g,Oe=/src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;function We(e){const t=e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1");return new RegExp(`(url\\(['"]?)(${t})(['"]?\\))`,"g")}function Ge(e){const t=[];return e.replace(re,(r,n,s)=>(t.push(s),r)),t.filter(r=>!j(r))}async function _e(e,t,r,n,s){try{const o=r?de(t,r):t,a=M(t);let l;return s||(l=await O(o,a,n)),e.replace(We(t),`$1${l}$3`)}catch{}return e}function qe(e,{preferredFontFormat:t}){return t?e.replace(Oe,r=>{for(;;){const[n,,s]=Me.exec(r)||[];if(!s)return"";if(s===t)return`src: ${n};`}}):e}function oe(e){return e.search(re)!==-1}async function se(e,t,r){if(!oe(e))return e;const n=qe(e,r);return Ge(n).reduce((o,a)=>o.then(l=>_e(l,a,t,r)),Promise.resolve(n))}async function w(e,t,r){var n;const s=(n=t.style)===null||n===void 0?void 0:n.getPropertyValue(e);if(s){const o=await se(s,null,r);return t.style.setProperty(e,o,t.style.getPropertyPriority(e)),!0}return!1}async function ze(e,t){await w("background",e,t)||await w("background-image",e,t),await w("mask",e,t)||await w("-webkit-mask",e,t)||await w("mask-image",e,t)||await w("-webkit-mask-image",e,t)}async function Xe(e,t){const r=p(e,HTMLImageElement);if(!(r&&!j(e.src))&&!(p(e,SVGImageElement)&&!j(e.href.baseVal)))return;const n=r?e.src:e.href.baseVal,s=await O(n,M(n),t);await new Promise((o,a)=>{e.onload=o,e.onerror=t.onImageErrorHandler?(...i)=>{try{o(t.onImageErrorHandler(...i))}catch(c){a(c)}}:a;const l=e;l.decode&&(l.decode=o),l.loading==="lazy"&&(l.loading="eager"),r?(e.srcset="",e.src=s):e.href.baseVal=s})}async function Ke(e,t){const n=g(e.childNodes).map(s=>ae(s,t));await Promise.all(n).then(()=>e)}async function ae(e,t){p(e,Element)&&(await ze(e,t),await Xe(e,t),await Ke(e,t))}function Je(e,t){const{style:r}=e;t.backgroundColor&&(r.backgroundColor=t.backgroundColor),t.width&&(r.width=`${t.width}px`),t.height&&(r.height=`${t.height}px`);const n=t.style;return n!=null&&Object.keys(n).forEach(s=>{r[s]=n[s]}),e}const J={};async function Q(e){let t=J[e];if(t!=null)return t;const n=await(await fetch(e)).text();return t={url:e,cssText:n},J[e]=t,t}async function Y(e,t){let r=e.cssText;const n=/url\(["']?([^"')]+)["']?\)/g,o=(r.match(/url\([^)]+\)/g)||[]).map(async a=>{let l=a.replace(n,"$1");return l.startsWith("https://")||(l=new URL(l,e.url).href),te(l,t.fetchRequestInit,({result:i})=>(r=r.replace(a,`url(${i})`),[a,i]))});return Promise.all(o).then(()=>r)}function Z(e){if(e==null)return[];const t=[],r=/(\/\*[\s\S]*?\*\/)/gi;let n=e.replace(r,"");const s=new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})","gi");for(;;){const i=s.exec(n);if(i===null)break;t.push(i[0])}n=n.replace(s,"");const o=/@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi,a="((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",l=new RegExp(a,"gi");for(;;){let i=o.exec(n);if(i===null){if(i=l.exec(n),i===null)break;o.lastIndex=l.lastIndex}else l.lastIndex=o.lastIndex;t.push(i[0])}return t}async function Qe(e,t){const r=[],n=[];return e.forEach(s=>{if("cssRules"in s)try{g(s.cssRules||[]).forEach((o,a)=>{if(o.type===CSSRule.IMPORT_RULE){let l=a+1;const i=o.href,c=Q(i).then(d=>Y(d,t)).then(d=>Z(d).forEach(f=>{try{s.insertRule(f,f.startsWith("@import")?l+=1:s.cssRules.length)}catch(x){console.error("Error inserting rule from remote css",{rule:f,error:x})}})).catch(d=>{console.error("Error loading remote css",d.toString())});n.push(c)}})}catch(o){const a=e.find(l=>l.href==null)||document.styleSheets[0];s.href!=null&&n.push(Q(s.href).then(l=>Y(l,t)).then(l=>Z(l).forEach(i=>{a.insertRule(i,a.cssRules.length)})).catch(l=>{console.error("Error loading remote stylesheet",l)})),console.error("Error inlining remote css file",o)}}),Promise.all(n).then(()=>(e.forEach(s=>{if("cssRules"in s)try{g(s.cssRules||[]).forEach(o=>{r.push(o)})}catch(o){console.error(`Error while reading CSS rules from ${s.href}`,o)}}),r))}function Ye(e){return e.filter(t=>t.type===CSSRule.FONT_FACE_RULE).filter(t=>oe(t.style.getPropertyValue("src")))}async function Ze(e,t){if(e.ownerDocument==null)throw new Error("Provided element is not within a Document");const r=g(e.ownerDocument.styleSheets),n=await Qe(r,t);return Ye(n)}function le(e){return e.trim().replace(/["']/g,"")}function Ne(e){const t=new Set;function r(n){(n.style.fontFamily||getComputedStyle(n).fontFamily).split(",").forEach(o=>{t.add(le(o))}),Array.from(n.children).forEach(o=>{o instanceof HTMLElement&&r(o)})}return r(e),t}async function et(e,t){const r=await Ze(e,t),n=Ne(e);return(await Promise.all(r.filter(o=>n.has(le(o.style.fontFamily))).map(o=>{const a=o.parentStyleSheet?o.parentStyleSheet.href:null;return se(o.cssText,a,t)}))).join(`
+`)}async function tt(e,t){const r=t.fontEmbedCSS!=null?t.fontEmbedCSS:t.skipFonts?null:await et(e,t);if(r){const n=document.createElement("style"),s=document.createTextNode(r);n.appendChild(s),e.firstChild?e.insertBefore(n,e.firstChild):e.appendChild(n)}}async function nt(e,t={}){const{width:r,height:n}=ye(e,t),s=await D(e,t,!0);return await tt(s,t),await ae(s,t),Je(s,t),await we(s,r,n)}var A={exports:{}},rt=A.exports,N;function ot(){return N||(N=1,function(e,t){(function(r,n){e.exports=n()})(rt,function(){return function r(n,s,o){var a=window,l="application/octet-stream",i=o||l,c=n,d=!s&&!o&&c,f=document.createElement("a"),x=function(u){return String(u)},m=a.Blob||a.MozBlob||a.WebKitBlob||x,E=s||"download",h,U;if(m=m.call?m.bind(a):Blob,String(this)==="true"&&(c=[c,i],i=c[0],c=c[1]),d&&d.length<2048&&(E=d.split("/").pop().split("?")[0],f.href=d,f.href.indexOf(d)!==-1)){var R=new XMLHttpRequest;return R.open("GET",d,!0),R.responseType="blob",R.onload=function(u){r(u.target.response,E,l)},setTimeout(function(){R.send()},0),R}if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(c))if(c.length>1024*1024*1.999&&m!==x)c=W(c),i=c.type||l;else return navigator.msSaveBlob?navigator.msSaveBlob(W(c),E):v(c);else if(/([\x80-\xff])/.test(c)){var C=0,I=new Uint8Array(c.length),ie=I.length;for(C;C<ie;++C)I[C]=c.charCodeAt(C);c=new m([I],{type:i})}h=c instanceof m?c:new m([c],{type:i});function W(u){var y=u.split(/[:;,]/),T=y[1],ce=y[2]=="base64"?atob:decodeURIComponent,G=ce(y.pop()),_=G.length,P=0,q=new Uint8Array(_);for(P;P<_;++P)q[P]=G.charCodeAt(P);return new m([q],{type:T})}function v(u,y){if("download"in f)return f.href=u,f.setAttribute("download",E),f.className="download-js-link",f.innerHTML="downloading...",f.style.display="none",document.body.appendChild(f),setTimeout(function(){f.click(),document.body.removeChild(f),y===!0&&setTimeout(function(){a.URL.revokeObjectURL(f.href)},250)},66),!0;if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent))return/^data:/.test(u)&&(u="data:"+u.replace(/^data:([\w\/\-\+]+)/,l)),window.open(u)||confirm(`Displaying New Document
+
+Use Save As... to download, then click back to return to this page.`)&&(location.href=u),!0;var T=document.createElement("iframe");document.body.appendChild(T),!y&&/^data:/.test(u)&&(u="data:"+u.replace(/^data:([\w\/\-\+]+)/,l)),T.src=u,setTimeout(function(){document.body.removeChild(T)},333)}if(navigator.msSaveBlob)return navigator.msSaveBlob(h,E);if(a.URL)v(a.URL.createObjectURL(h),!0);else{if(typeof h=="string"||h.constructor===x)try{return v("data:"+i+";base64,"+a.btoa(h))}catch{return v("data:"+i+","+encodeURIComponent(h))}U=new FileReader,U.onload=function(u){v(this.result)},U.readAsDataURL(h)}return!0}})}(A)),A.exports}var st=ot();const at=ue(st);function lt({children:e}){const t=pe.useRef(null),r=()=>{t.current&&nt(t.current).then(n=>{at(n,"exported-component.svg","image/svg+xml")}).catch(n=>{console.error("Failed to export as SVG:",n)})};return S.jsxs("div",{children:[S.jsx("div",{ref:t,children:e}),S.jsx("button",{onClick:r,children:"Download as SVG"})]})}const dt={title:"Components/System/Baseline",component:H,parameters:{docs:{description:{component:"Baseline component is used to display a baseline for the design system."}}},argTypes:{}},L={args:{title:"Node.js Support",toolGroups:[[{tool:"bun",supported:!0},{tool:"node",supported:!0,label:"22"},{tool:"node",supported:!0,label:"23"},{tool:"node",supported:!0,label:"24"}],[{tool:"npm",supported:!0},{tool:"node",supported:!0,label:"22"}],[{tool:"pnpm",supported:!1}]]}},$={render:e=>{const t=fe.useRef(null);return S.jsx(H,{...e,ref:t,onClick:()=>{console.log("Baseline clicked!",t.current)}})},args:{title:"Node.js Support",toolGroups:[[{tool:"bun",supported:!0},{tool:"node",supported:!0,label:"22"},{tool:"node",supported:!0,label:"23"},{tool:"node",supported:!0,label:"24"}],[{tool:"npm",supported:!0},{tool:"node",supported:!0,label:"22"}],[{tool:"pnpm",supported:!1}]]}},F={render:e=>S.jsx(lt,{children:S.jsx(H,{...e})}),args:{title:"Node.js Support",toolGroups:[[{tool:"bun",supported:!0},{tool:"node",supported:!0,label:"22"},{tool:"node",supported:!0,label:"23"},{tool:"node",supported:!0,label:"24"}],[{tool:"npm",supported:!0},{tool:"node",supported:!0,label:"22"}],[{tool:"pnpm",supported:!1}]]}};L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Node.js Support',
+    toolGroups: [[{
+      tool: 'bun',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '23'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '24'
+    }], [{
+      tool: 'npm',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }], [{
+      tool: 'pnpm',
+      supported: false
+    }]]
+  }
+}`,...L.parameters?.docs?.source}}};$.parameters={...$.parameters,docs:{...$.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const ref = useRef<HTMLDetailsElement>(null);
+    return <Baseline {...args} ref={ref} onClick={() => {
+      console.log('Baseline clicked!', ref.current);
+    }} />;
+  },
+  args: {
+    title: 'Node.js Support',
+    toolGroups: [[{
+      tool: 'bun',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '23'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '24'
+    }], [{
+      tool: 'npm',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }], [{
+      tool: 'pnpm',
+      supported: false
+    }]]
+  }
+}`,...$.parameters?.docs?.source}}};F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
+  render: args => <ExportableWrapper>
+            <Baseline {...args} />
+        </ExportableWrapper>,
+  args: {
+    title: 'Node.js Support',
+    toolGroups: [[{
+      tool: 'bun',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '23'
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '24'
+    }], [{
+      tool: 'npm',
+      supported: true
+    }, {
+      tool: 'node',
+      supported: true,
+      label: '22'
+    }], [{
+      tool: 'pnpm',
+      supported: false
+    }]]
+  }
+}`,...F.parameters?.docs?.source}}};const mt=["Default","WithRefAndClick","ExportableBaseline"];export{L as Default,F as ExportableBaseline,$ as WithRefAndClick,mt as __namedExportsOrder,dt as default};