@xyd-js/storybook 0.0.1-build.167

package/storybook-static/assets/Icons-CjNNbMNR.js

@@ -0,0 +1 @@
+import{j as o}from"./jsx-runtime-D_zvdyIk.js";function e(){return o.jsxs("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[o.jsx("path",{d:"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.jsx("path",{d:"M10 8L16 12L10 16V8Z",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})]})}function n(){return o.jsxs("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[o.jsx("path",{d:"M21 7L13.2273 14.9167L9.13636 10.75L3 17",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.jsx("path",{d:"M16 7H21V12",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})]})}function s(){return o.jsxs("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[o.jsx("path",{d:"M12 20L12 10",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.jsx("path",{d:"M6 20L6 4",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"}),o.jsx("path",{d:"M18 20L18 16",stroke:"black",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"})]})}e.__docgenInfo={description:"",methods:[],displayName:"IconSessionReplay"};n.__docgenInfo={description:"",methods:[],displayName:"IconMetrics"};s.__docgenInfo={description:"",methods:[],displayName:"IconFunnels"};export{e as I,s as a,n as b};

package/storybook-static/assets/Image.stories-BlrJ8Th7.js

@@ -0,0 +1,349 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import"./writer-DkrWmB39.js";import{q as t}from"./Update-DflVXGGQ-qVV03FlC.js";import"./Text-BAwif7rv-BYvLGGQV.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 j={title:"Components/Writer/Image",component:t,parameters:{docs:{description:{component:"Image component provides a styled image element with consistent styling and accessibility features."}}},argTypes:{src:{description:"URL of the image to display",control:"text"},alt:{description:"Alt text for accessibility",control:"text"},width:{description:"Width of the image",control:"number"},height:{description:"Height of the image",control:"number"},style:{description:"Additional CSS styles",control:"object"}}},o={args:{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop",alt:"A beautiful landscape image"},render:s=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...s})})},i={args:{src:"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=300&fit=crop",alt:"Image with custom dimensions",width:300,height:200},render:s=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...s})})},a={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Landscape Image"}),e.jsx(t,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop",alt:"Mountain landscape",width:400,height:200})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Portrait Image"}),e.jsx(t,{src:"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=400&fit=crop",alt:"Portrait photo",width:200,height:400})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Square Image"}),e.jsx(t,{src:"https://images.unsplash.com/photo-1557683316-973673baf926?w=300&h=300&fit=crop",alt:"Abstract pattern",width:300,height:300})]})]})},r={args:{src:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop",alt:"Image with custom styling",style:{borderRadius:"12px",boxShadow:"0 4px 8px rgba(0, 0, 0, 0.1)",border:"2px solid #e0e0e0"}},render:s=>e.jsx("div",{style:{padding:"20px"},children:e.jsx(t,{...s})})},p={render:()=>e.jsx("div",{style:{padding:"20px"},children:e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(200px, 1fr))",gap:"20px",maxWidth:"800px"},children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=200&h=150&fit=crop",alt:"First image",width:200,height:150}),e.jsx(t,{src:"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=200&h=150&fit=crop",alt:"Second image",width:200,height:150}),e.jsx(t,{src:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=150&fit=crop",alt:"Third image",width:200,height:150}),e.jsx(t,{src:"https://images.unsplash.com/photo-1557683316-973673baf926?w=200&h=150&fit=crop",alt:"Fourth image",width:200,height:150})]})})},n={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"600px"},children:[e.jsx("h2",{children:"Article with Images"}),e.jsx("p",{children:"This is an example of how images can be used within content. The Image component provides consistent styling and proper accessibility features."}),e.jsx(t,{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=500&h=300&fit=crop",alt:"Beautiful landscape to illustrate the article",width:500,height:300,style:{margin:"20px 0"}}),e.jsx("p",{children:"The image above demonstrates how the Image component integrates seamlessly with surrounding content. It maintains proper spacing and responsive behavior."}),e.jsx("h3",{children:"Another Section"}),e.jsx("p",{children:"Here's another image that shows different styling options and how they work within the content flow."}),e.jsx(t,{src:"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=250&fit=crop",alt:"Another example image",width:400,height:250,style:{margin:"20px 0",borderRadius:"8px",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.1)"}})]})},d={render:()=>e.jsxs("div",{style:{padding:"20px"},children:[e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Responsive Grid"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(250px, 1fr))",gap:"16px"},children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=300&h=200&fit=crop",alt:"Responsive image 1",style:{width:"100%",height:"auto"}}),e.jsx(t,{src:"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=300&h=200&fit=crop",alt:"Responsive image 2",style:{width:"100%",height:"auto"}}),e.jsx(t,{src:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop",alt:"Responsive image 3",style:{width:"100%",height:"auto"}})]})]}),e.jsxs("div",{style:{marginBottom:"30px"},children:[e.jsx("h3",{style:{marginBottom:"10px",color:"#666"},children:"Flexible Layout"}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1557683316-973673baf926?w=200&h=150&fit=crop",alt:"Flexible image 1",style:{flex:"1",minWidth:"200px",maxWidth:"300px"}}),e.jsx(t,{src:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop",alt:"Flexible image 2",style:{flex:"1",minWidth:"200px",maxWidth:"300px"}}),e.jsx(t,{src:"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=150&fit=crop",alt:"Flexible image 3",style:{flex:"1",minWidth:"200px",maxWidth:"300px"}})]})]})]})},h={render:()=>e.jsxs("div",{style:{padding:"20px",maxWidth:"800px"},children:[e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Documentation Screenshots"}),e.jsx("p",{children:"Images are commonly used in documentation to show screenshots and examples."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{children:"API Dashboard"}),e.jsx("p",{children:"Here's how the API dashboard looks in action:"}),e.jsx(t,{src:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=300&fit=crop",alt:"API dashboard screenshot",width:600,height:300,style:{margin:"16px 0",borderRadius:"4px",border:"1px solid var(--xyd-border-color)"}}),e.jsx("p",{style:{fontSize:"14px",color:"var(--xyd-text-color-secondary)"},children:"The dashboard provides real-time metrics and analytics for your API usage."})]})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Product Gallery"}),e.jsx("p",{children:"Images can be used to showcase products or features."}),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:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(200px, 1fr))",gap:"16px"},children:[e.jsxs("div",{children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=200&h=150&fit=crop",alt:"Feature 1",width:200,height:150,style:{borderRadius:"4px"}}),e.jsx("p",{style:{marginTop:"8px",fontSize:"14px"},children:"Feature One"})]}),e.jsxs("div",{children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=200&h=150&fit=crop",alt:"Feature 2",width:200,height:150,style:{borderRadius:"4px"}}),e.jsx("p",{style:{marginTop:"8px",fontSize:"14px"},children:"Feature Two"})]}),e.jsxs("div",{children:[e.jsx(t,{src:"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=150&fit=crop",alt:"Feature 3",width:200,height:150,style:{borderRadius:"4px"}}),e.jsx("p",{style:{marginTop:"8px",fontSize:"14px"},children:"Feature Three"})]})]})})]}),e.jsxs("div",{style:{marginBottom:"40px"},children:[e.jsx("h2",{children:"Blog Post Images"}),e.jsx("p",{children:"Images enhance blog posts and articles with visual content."}),e.jsxs("div",{style:{background:"var(--xyd-bgcolor)",border:"1px solid var(--xyd-border-color)",borderRadius:"8px",padding:"20px"},children:[e.jsx("h3",{children:"Getting Started with Our Platform"}),e.jsx("p",{children:"Our platform provides powerful tools for developers. Here's a quick overview of the main interface and how to get started."}),e.jsx(t,{src:"https://images.unsplash.com/photo-1557683316-973673baf926?w=500&h=300&fit=crop",alt:"Platform interface overview",width:500,height:300,style:{margin:"20px 0",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)"}}),e.jsx("p",{children:"The interface is designed to be intuitive and user-friendly, with clear navigation and helpful tooltips throughout."})]})]})]}),parameters:{docs:{description:{story:"This example shows how images are typically used in real applications."}}}},l={args:{src:"https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop",alt:"Interactive image example"},render:s=>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:"Image Component Demo"}),e.jsx("p",{style:{marginBottom:"16px",color:"var(--xyd-text-color)"},children:"This example demonstrates the Image component with various styling options and responsive behavior."}),e.jsx(t,{...s})]}),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 with design system"}),e.jsx("li",{children:"Responsive behavior"}),e.jsx("li",{children:"Accessibility support"}),e.jsx("li",{children:"Customizable styling"}),e.jsx("li",{children:"Theme-aware colors"})]})]})]}),parameters:{docs:{description:{story:"This interactive example demonstrates the Image component functionality and styling."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    src: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop',
+    alt: 'A beautiful landscape image'
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Image {...args} />
+        </div>
+}`,...o.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    src: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=300&fit=crop',
+    alt: 'Image with custom dimensions',
+    width: 300,
+    height: 200
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Image {...args} />
+        </div>
+}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Landscape Image</h3>
+                <Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop" alt="Mountain landscape" width={400} height={200} />
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Portrait Image</h3>
+                <Image src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=400&fit=crop" alt="Portrait photo" width={200} height={400} />
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Square Image</h3>
+                <Image src="https://images.unsplash.com/photo-1557683316-973673baf926?w=300&h=300&fit=crop" alt="Abstract pattern" width={300} height={300} />
+            </div>
+        </div>
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  args: {
+    src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop',
+    alt: 'Image with custom styling',
+    style: {
+      borderRadius: '12px',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+      border: '2px solid #e0e0e0'
+    }
+  },
+  render: args => <div style={{
+    padding: '20px'
+  }}>
+            <Image {...args} />
+        </div>
+}`,...r.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+      gap: '20px',
+      maxWidth: '800px'
+    }}>
+                <Image src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=200&h=150&fit=crop" alt="First image" width={200} height={150} />
+                <Image src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=200&h=150&fit=crop" alt="Second image" width={200} height={150} />
+                <Image src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=150&fit=crop" alt="Third image" width={200} height={150} />
+                <Image src="https://images.unsplash.com/photo-1557683316-973673baf926?w=200&h=150&fit=crop" alt="Fourth image" width={200} height={150} />
+            </div>
+        </div>
+}`,...p.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '600px'
+  }}>
+            <h2>Article with Images</h2>
+            <p>
+                This is an example of how images can be used within content. The Image component 
+                provides consistent styling and proper accessibility features.
+            </p>
+            
+            <Image src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=500&h=300&fit=crop" alt="Beautiful landscape to illustrate the article" width={500} height={300} style={{
+      margin: '20px 0'
+    }} />
+            
+            <p>
+                The image above demonstrates how the Image component integrates seamlessly with 
+                surrounding content. It maintains proper spacing and responsive behavior.
+            </p>
+            
+            <h3>Another Section</h3>
+            <p>
+                Here's another image that shows different styling options and how they work 
+                within the content flow.
+            </p>
+            
+            <Image src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=400&h=250&fit=crop" alt="Another example image" width={400} height={250} style={{
+      margin: '20px 0',
+      borderRadius: '8px',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+    }} />
+        </div>
+}`,...n.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px'
+  }}>
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Responsive Grid</h3>
+                <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '16px'
+      }}>
+                    <Image src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=300&h=200&fit=crop" alt="Responsive image 1" style={{
+          width: '100%',
+          height: 'auto'
+        }} />
+                    <Image src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=300&h=200&fit=crop" alt="Responsive image 2" style={{
+          width: '100%',
+          height: 'auto'
+        }} />
+                    <Image src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop" alt="Responsive image 3" style={{
+          width: '100%',
+          height: 'auto'
+        }} />
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '30px'
+    }}>
+                <h3 style={{
+        marginBottom: '10px',
+        color: '#666'
+      }}>Flexible Layout</h3>
+                <div style={{
+        display: 'flex',
+        gap: '16px',
+        flexWrap: 'wrap'
+      }}>
+                    <Image src="https://images.unsplash.com/photo-1557683316-973673baf926?w=200&h=150&fit=crop" alt="Flexible image 1" style={{
+          flex: '1',
+          minWidth: '200px',
+          maxWidth: '300px'
+        }} />
+                    <Image src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=200&h=150&fit=crop" alt="Flexible image 2" style={{
+          flex: '1',
+          minWidth: '200px',
+          maxWidth: '300px'
+        }} />
+                    <Image src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=150&fit=crop" alt="Flexible image 3" style={{
+          flex: '1',
+          minWidth: '200px',
+          maxWidth: '300px'
+        }} />
+                </div>
+            </div>
+        </div>
+}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  render: () => <div style={{
+    padding: '20px',
+    maxWidth: '800px'
+  }}>
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Documentation Screenshots</h2>
+                <p>Images are commonly used in documentation to show screenshots and examples.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3>API Dashboard</h3>
+                    <p>Here's how the API dashboard looks in action:</p>
+                    <Image src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=300&fit=crop" alt="API dashboard screenshot" width={600} height={300} style={{
+          margin: '16px 0',
+          borderRadius: '4px',
+          border: '1px solid var(--xyd-border-color)'
+        }} />
+                    <p style={{
+          fontSize: '14px',
+          color: 'var(--xyd-text-color-secondary)'
+        }}>
+                        The dashboard provides real-time metrics and analytics for your API usage.
+                    </p>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Product Gallery</h2>
+                <p>Images can be used to showcase products or features.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: '16px'
+        }}>
+                        <div>
+                            <Image src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=200&h=150&fit=crop" alt="Feature 1" width={200} height={150} style={{
+              borderRadius: '4px'
+            }} />
+                            <p style={{
+              marginTop: '8px',
+              fontSize: '14px'
+            }}>Feature One</p>
+                        </div>
+                        <div>
+                            <Image src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=200&h=150&fit=crop" alt="Feature 2" width={200} height={150} style={{
+              borderRadius: '4px'
+            }} />
+                            <p style={{
+              marginTop: '8px',
+              fontSize: '14px'
+            }}>Feature Two</p>
+                        </div>
+                        <div>
+                            <Image src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=150&fit=crop" alt="Feature 3" width={200} height={150} style={{
+              borderRadius: '4px'
+            }} />
+                            <p style={{
+              marginTop: '8px',
+              fontSize: '14px'
+            }}>Feature Three</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div style={{
+      marginBottom: '40px'
+    }}>
+                <h2>Blog Post Images</h2>
+                <p>Images enhance blog posts and articles with visual content.</p>
+                <div style={{
+        background: 'var(--xyd-bgcolor)',
+        border: '1px solid var(--xyd-border-color)',
+        borderRadius: '8px',
+        padding: '20px'
+      }}>
+                    <h3>Getting Started with Our Platform</h3>
+                    <p>
+                        Our platform provides powerful tools for developers. Here's a quick overview 
+                        of the main interface and how to get started.
+                    </p>
+                    <Image src="https://images.unsplash.com/photo-1557683316-973673baf926?w=500&h=300&fit=crop" alt="Platform interface overview" width={500} height={300} style={{
+          margin: '20px 0',
+          borderRadius: '8px',
+          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+        }} />
+                    <p>
+                        The interface is designed to be intuitive and user-friendly, with clear 
+                        navigation and helpful tooltips throughout.
+                    </p>
+                </div>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This example shows how images are typically used in real applications.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    src: 'https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop',
+    alt: 'Interactive image example'
+  },
+  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'
+      }}>Image Component Demo</h3>
+                <p style={{
+        marginBottom: '16px',
+        color: 'var(--xyd-text-color)'
+      }}>
+                    This example demonstrates the Image component with various styling options and responsive behavior.
+                </p>
+                <Image {...args} />
+            </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 with design system</li>
+                    <li>Responsive behavior</li>
+                    <li>Accessibility support</li>
+                    <li>Customizable styling</li>
+                    <li>Theme-aware colors</li>
+                </ul>
+            </div>
+        </div>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'This interactive example demonstrates the Image component functionality and styling.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};const I=["Default","WithDimensions","DifferentImageTypes","WithCustomStyling","MultipleImages","InContentContext","ResponsiveImages","RealWorldExamples","Interactive"];export{o as Default,a as DifferentImageTypes,n as InContentContext,l as Interactive,p as MultipleImages,h as RealWorldExamples,d as ResponsiveImages,r as WithCustomStyling,i as WithDimensions,I as __namedExportsOrder,j as default};