@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/IconSocial.stories-Bv3u90GB.js

@@ -0,0 +1,715 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{j as i}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 D={title:"Components/Writer/IconSocial",component:i,parameters:{docs:{description:{component:"IconSocial component provides social media icons for various platforms. Each icon is optimized for consistent styling and accessibility."}}},argTypes:{kind:{description:"The social media platform for the icon",control:{type:"select"},options:["x","facebook","youtube","discord","slack","github","linkedin","instagram","hackernews","medium","telegram","bluesky","reddit"]},width:{description:"Width of the icon",control:"number"},height:{description:"Height of the icon",control:"number"},style:{description:"Additional CSS styles",control:"object"}}},d={args:{kind:"x"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},o={args:{kind:"facebook"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},n={args:{kind:"youtube"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},t={args:{kind:"discord"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},s={args:{kind:"slack"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},a={args:{kind:"github"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},l={args:{kind:"linkedin"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},c={args:{kind:"instagram"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},x={args:{kind:"hackernews"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},p={args:{kind:"medium"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},g={args:{kind:"telegram"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},y={args:{kind:"bluesky"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},h={args:{kind:"reddit"},render:r=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(i,{...r})})},m={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(120px, 1fr))",gap:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"x"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Twitter/X"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"facebook"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Facebook"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"youtube"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"YouTube"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"discord"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Discord"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"slack"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Slack"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"github"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"GitHub"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"linkedin"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"LinkedIn"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"instagram"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Instagram"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"hackernews"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Hacker News"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"medium"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Medium"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"telegram"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Telegram"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"bluesky"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Bluesky"})]}),e.jsxs("div",{style:{textAlign:"center"},children:[e.jsx(i,{kind:"reddit"}),e.jsx("div",{style:{marginTop:"8px",fontSize:"12px"},children:"Reddit"})]})]})})},v={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Small Icons (16px)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(i,{kind:"github",width:16,height:16}),e.jsx(i,{kind:"x",width:16,height:16}),e.jsx(i,{kind:"linkedin",width:16,height:16}),e.jsx(i,{kind:"discord",width:16,height:16})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Medium Icons (24px)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(i,{kind:"github",width:24,height:24}),e.jsx(i,{kind:"x",width:24,height:24}),e.jsx(i,{kind:"linkedin",width:24,height:24}),e.jsx(i,{kind:"discord",width:24,height:24})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Large Icons (32px)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(i,{kind:"github",width:32,height:32}),e.jsx(i,{kind:"x",width:32,height:32}),e.jsx(i,{kind:"linkedin",width:32,height:32}),e.jsx(i,{kind:"discord",width:32,height:32})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Extra Large Icons (48px)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(i,{kind:"github",width:48,height:48}),e.jsx(i,{kind:"x",width:48,height:48}),e.jsx(i,{kind:"linkedin",width:48,height:48}),e.jsx(i,{kind:"discord",width:48,height:48})]})]})]})},u={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Footer Social Links"}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[e.jsx("span",{children:"© 2024 Documentation"}),e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"github"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"x"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"discord"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"linkedin"})})]})]})})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Share Buttons"}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h4",{style:{marginBottom:"16px"},children:"Share this page"}),e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsx("button",{style:{background:"none",border:"none",cursor:"pointer",padding:"8px",borderRadius:"4px",color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"x"})}),e.jsx("button",{style:{background:"none",border:"none",cursor:"pointer",padding:"8px",borderRadius:"4px",color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"facebook"})}),e.jsx("button",{style:{background:"none",border:"none",cursor:"pointer",padding:"8px",borderRadius:"4px",color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"linkedin"})}),e.jsx("button",{style:{background:"none",border:"none",cursor:"pointer",padding:"8px",borderRadius:"4px",color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"reddit"})})]})]})]})]})},k={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Documentation Footer"}),e.jsx("p",{children:"Social media icons are commonly used in documentation site footers."}),e.jsx("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"16px"},children:[e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:"bold",marginBottom:"4px"},children:"Documentation"}),e.jsx("div",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"Built with ❤️ by the community"})]}),e.jsxs("div",{style:{display:"flex",gap:"12px"},children:[e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"github"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"discord"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"x"})}),e.jsx("a",{href:"#",style:{color:"var(--xyd-text-color)"},children:e.jsx(i,{kind:"youtube"})})]})]})})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Community Links"}),e.jsx("p",{children:"Social icons for community engagement and support."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Join Our Community"}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsxs("a",{href:"#",style:{display:"flex",alignItems:"center",gap:"8px",color:"var(--xyd-text-color)",textDecoration:"none",padding:"8px",borderRadius:"4px",border:"1px solid var(--xyd-border-color)"},children:[e.jsx(i,{kind:"discord"}),e.jsx("span",{children:"Discord"})]}),e.jsxs("a",{href:"#",style:{display:"flex",alignItems:"center",gap:"8px",color:"var(--xyd-text-color)",textDecoration:"none",padding:"8px",borderRadius:"4px",border:"1px solid var(--xyd-border-color)"},children:[e.jsx(i,{kind:"slack"}),e.jsx("span",{children:"Slack"})]}),e.jsxs("a",{href:"#",style:{display:"flex",alignItems:"center",gap:"8px",color:"var(--xyd-text-color)",textDecoration:"none",padding:"8px",borderRadius:"4px",border:"1px solid var(--xyd-border-color)"},children:[e.jsx(i,{kind:"github"}),e.jsx("span",{children:"GitHub"})]})]})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Social Media Feed"}),e.jsx("p",{children:"Social icons in a content feed or news section."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Latest Updates"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(i,{kind:"x"}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:"bold"},children:"New feature released!"}),e.jsx("div",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"Check out our latest updates on Twitter"})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(i,{kind:"youtube"}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:"bold"},children:"Video tutorial available"}),e.jsx("div",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"Watch our latest tutorial on YouTube"})]})]}),e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(i,{kind:"medium"}),e.jsxs("div",{children:[e.jsx("div",{style:{fontWeight:"bold"},children:"Blog post published"}),e.jsx("div",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"Read our latest insights on Medium"})]})]})]})]})]})]}),parameters:{docs:{description:{story:"This example shows how social media icons are typically used in real applications."}}}},b={args:{kind:"github"},render:r=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px",marginBottom:"20px"},children:[e.jsx("h3",{style:{marginBottom:"16px"},children:"Social Icon Demo"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"This example demonstrates the IconSocial component with different platforms and sizes."}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(i,{...r}),e.jsx(i,{kind:"x"}),e.jsx(i,{kind:"linkedin"}),e.jsx(i,{kind:"discord"})]})]}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h4",{style:{marginBottom:"12px"},children:"Features"}),e.jsxs("ul",{style:{color:"var(--xyd-text-color)"},children:[e.jsx("li",{children:"Consistent styling across all platforms"}),e.jsx("li",{children:"Scalable vector graphics"}),e.jsx("li",{children:"Accessible design"}),e.jsx("li",{children:"Theme-aware colors"}),e.jsx("li",{children:"Customizable size and styling"})]})]})]}),parameters:{docs:{description:{story:"This interactive example demonstrates the IconSocial component functionality and styling."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'x'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...d.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'facebook'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'youtube'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...n.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'discord'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'slack'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...s.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'github'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...a.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'linkedin'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'instagram'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...c.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'hackernews'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...x.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'medium'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...p.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'telegram'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...g.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'bluesky'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...y.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'reddit'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <IconSocial {...args} />
+        </div>
+}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
+      gap: '20px',
+      maxWidth: '800px'
+    }}>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="x" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Twitter/X</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="facebook" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Facebook</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="youtube" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>YouTube</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="discord" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Discord</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="slack" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Slack</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="github" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>GitHub</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="linkedin" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>LinkedIn</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="instagram" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Instagram</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="hackernews" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Hacker News</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="medium" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Medium</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="telegram" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Telegram</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="bluesky" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Bluesky</div>
+                </div>
+                <div style={{
+        textAlign: 'center'
+      }}>
+                    <IconSocial kind="reddit" />
+                    <div style={{
+          marginTop: '8px',
+          fontSize: '12px'
+        }}>Reddit</div>
+                </div>
+            </div>
+        </div>
+}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Small Icons (16px)</h3>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+                    <IconSocial kind="github" width={16} height={16} />
+                    <IconSocial kind="x" width={16} height={16} />
+                    <IconSocial kind="linkedin" width={16} height={16} />
+                    <IconSocial kind="discord" width={16} height={16} />
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Medium Icons (24px)</h3>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+                    <IconSocial kind="github" width={24} height={24} />
+                    <IconSocial kind="x" width={24} height={24} />
+                    <IconSocial kind="linkedin" width={24} height={24} />
+                    <IconSocial kind="discord" width={24} height={24} />
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Large Icons (32px)</h3>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+                    <IconSocial kind="github" width={32} height={32} />
+                    <IconSocial kind="x" width={32} height={32} />
+                    <IconSocial kind="linkedin" width={32} height={32} />
+                    <IconSocial kind="discord" width={32} height={32} />
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Extra Large Icons (48px)</h3>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+                    <IconSocial kind="github" width={48} height={48} />
+                    <IconSocial kind="x" width={48} height={48} />
+                    <IconSocial kind="linkedin" width={48} height={48} />
+                    <IconSocial kind="discord" width={48} height={48} />
+                </div>
+            </div>
+        </div>
+}`,...v.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Footer Social Links</h3>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+                        <span>© 2024 Documentation</span>
+                        <div style={{
+            display: 'flex',
+            gap: '12px'
+          }}>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="github" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="x" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="discord" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="linkedin" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Share Buttons</h3>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h4 style={{
+          marginBottom: '16px'
+        }}>Share this page</h4>
+                    <div style={{
+          display: 'flex',
+          gap: '12px'
+        }}>
+                        <button style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '8px',
+            borderRadius: '4px',
+            color: 'var(--xyd-text-color)'
+          }}>
+                            <IconSocial kind="x" />
+                        </button>
+                        <button style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '8px',
+            borderRadius: '4px',
+            color: 'var(--xyd-text-color)'
+          }}>
+                            <IconSocial kind="facebook" />
+                        </button>
+                        <button style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '8px',
+            borderRadius: '4px',
+            color: 'var(--xyd-text-color)'
+          }}>
+                            <IconSocial kind="linkedin" />
+                        </button>
+                        <button style={{
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: '8px',
+            borderRadius: '4px',
+            color: 'var(--xyd-text-color)'
+          }}>
+                            <IconSocial kind="reddit" />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+}`,...u.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '800px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Documentation Footer</h2>
+                <p>Social media icons are commonly used in documentation site footers.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          gap: '16px'
+        }}>
+                        <div>
+                            <div style={{
+              fontWeight: 'bold',
+              marginBottom: '4px'
+            }}>Documentation</div>
+                            <div style={{
+              fontSize: '14px',
+              color: 'var(--xyd-text-color-secondary)'
+            }}>
+                                Built with ❤️ by the community
+                            </div>
+                        </div>
+                        <div style={{
+            display: 'flex',
+            gap: '12px'
+          }}>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="github" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="discord" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="x" />
+                            </a>
+                            <a href="#" style={{
+              color: 'var(--xyd-text-color)'
+            }}>
+                                <IconSocial kind="youtube" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Community Links</h2>
+                <p>Social icons for community engagement and support.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3 style={{
+          marginBottom: '16px'
+        }}>Join Our Community</h3>
+                    <div style={{
+          display: 'flex',
+          gap: '16px',
+          flexWrap: 'wrap'
+        }}>
+                        <a href="#" style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none',
+            padding: '8px',
+            borderRadius: '4px',
+            border: '1px solid var(--xyd-border-color)'
+          }}>
+                            <IconSocial kind="discord" />
+                            <span>Discord</span>
+                        </a>
+                        <a href="#" style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none',
+            padding: '8px',
+            borderRadius: '4px',
+            border: '1px solid var(--xyd-border-color)'
+          }}>
+                            <IconSocial kind="slack" />
+                            <span>Slack</span>
+                        </a>
+                        <a href="#" style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            color: 'var(--xyd-text-color)',
+            textDecoration: 'none',
+            padding: '8px',
+            borderRadius: '4px',
+            border: '1px solid var(--xyd-border-color)'
+          }}>
+                            <IconSocial kind="github" />
+                            <span>GitHub</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Social Media Feed</h2>
+                <p>Social icons in a content feed or news section.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3 style={{
+          marginBottom: '16px'
+        }}>Latest Updates</h3>
+                    <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '12px'
+        }}>
+                        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px'
+          }}>
+                            <IconSocial kind="x" />
+                            <div>
+                                <div style={{
+                fontWeight: 'bold'
+              }}>New feature released!</div>
+                                <div style={{
+                fontSize: '14px',
+                color: 'var(--xyd-text-color-secondary)'
+              }}>
+                                    Check out our latest updates on Twitter
+                                </div>
+                            </div>
+                        </div>
+                        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px'
+          }}>
+                            <IconSocial kind="youtube" />
+                            <div>
+                                <div style={{
+                fontWeight: 'bold'
+              }}>Video tutorial available</div>
+                                <div style={{
+                fontSize: '14px',
+                color: 'var(--xyd-text-color-secondary)'
+              }}>
+                                    Watch our latest tutorial on YouTube
+                                </div>
+                            </div>
+                        </div>
+                        <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '12px'
+          }}>
+                            <IconSocial kind="medium" />
+                            <div>
+                                <div style={{
+                fontWeight: 'bold'
+              }}>Blog post published</div>
+                                <div style={{
+                fontSize: '14px',
+                color: 'var(--xyd-text-color-secondary)'
+              }}>
+                                    Read our latest insights on Medium
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how social media icons are typically used in real applications.'
+      }
+    }
+  }
+}`,...k.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    kind: 'github'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px',
+      marginBottom: '20px'
+    }}>
+                <h3 style={{
+        marginBottom: '16px'
+      }}>Social Icon Demo</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    This example demonstrates the IconSocial component with different platforms and sizes.
+                </p>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+                    <IconSocial {...args} />
+                    <IconSocial kind="x" />
+                    <IconSocial kind="linkedin" />
+                    <IconSocial kind="discord" />
+                </div>
+            </div>
+
+            <div style={{
+      background: 'var(--xyd-bgcolor)',
+      border: '1px solid var(--xyd-border-color)',
+      borderRadius: '8px',
+      padding: '20px'
+    }}>
+                <h4 style={{
+        marginBottom: '12px'
+      }}>Features</h4>
+                <ul style={{
+        color: 'var(--xyd-text-color)'
+      }}>
+                    <li>Consistent styling across all platforms</li>
+                    <li>Scalable vector graphics</li>
+                    <li>Accessible design</li>
+                    <li>Theme-aware colors</li>
+                    <li>Customizable size and styling</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This interactive example demonstrates the IconSocial component functionality and styling.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};const W=["Twitter","Facebook","YouTube","Discord","Slack","GitHub","LinkedIn","Instagram","HackerNews","Medium","Telegram","Bluesky","Reddit","AllSocialIcons","DifferentSizes","SocialMediaLinks","RealWorldExamples","Interactive"];export{m as AllSocialIcons,y as Bluesky,v as DifferentSizes,t as Discord,o as Facebook,a as GitHub,x as HackerNews,c as Instagram,b as Interactive,l as LinkedIn,p as Medium,k as RealWorldExamples,h as Reddit,s as Slack,u as SocialMediaLinks,g as Telegram,d as Twitter,n as YouTube,W as __namedExportsOrder,D as default};