import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/HeroDecor",component:o,parameters:{layout:"centered",docs:{description:{component:"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability."}}},argTypes:{className:{control:{type:"text"},description:"Additional CSS classes for positioning and styling"}},tags:["autodocs"]},r={args:{className:"w-[400px] h-[200px]"},parameters:{docs:{description:{story:"Default hero decoration with standard sizing and positioning."}}}},t={args:{className:"w-[600px] h-[300px]"},render:a=>e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",children:[e.jsx(o,{...a}),e.jsxs("div",{className:"relative z-10 text-white mt-4",children:[e.jsx("h3",{children:"Content Overlay"}),e.jsx("p",{children:"This demonstrates how the decoration appears behind content."})]})]}),parameters:{docs:{description:{story:"Hero decoration with background color to show how it integrates with content."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  args: {
    className: "w-[400px] h-[200px]"
  },
  parameters: {
    docs: {
      description: {
        story: "Default hero decoration with standard sizing and positioning."
      }
    }
  }
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  args: {
    className: "w-[600px] h-[300px]"
  },
  render: args => <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
      <HeroDecor {...args} />
      <div className="relative z-10 text-white mt-4">
        <h3>Content Overlay</h3>
        <p>This demonstrates how the decoration appears behind content.</p>
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Hero decoration with background color to show how it integrates with content."
      }
    }
  }
}`,...t.parameters?.docs?.source}}};const p=["Default","WithBackground"];export{r as Default,t as WithBackground,p as __namedExportsOrder,d as default};
