import { j as e } from "./jsx-runtime-C_nHp4yK.js";
import { S as r } from "./SectionNumber-Cptefv18.js";
import "./iframe-D_aMTKb2.js";
import "./preload-helper-DIZFD4sK.js";
const u = {
    title: "Components/SectionNumber",
    component: r,
    parameters: {
      layout: "centered",
      docs: {
        description: {
          component:
            "A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size.",
        },
      },
    },
    argTypes: {
      number: {
        control: { type: "number", min: 1, max: 3 },
        description: "The number to display (1, 2, or 3)",
      },
    },
    tags: ["autodocs"],
  },
  n = { args: { number: 1 } },
  s = { args: { number: 2 } },
  o = { args: { number: 3 } },
  a = {
    render: () =>
      e.jsxs("div", {
        className: "flex space-x-4",
        children: [
          e.jsx(r, { number: 1 }),
          e.jsx(r, { number: 2 }),
          e.jsx(r, { number: 3 }),
        ],
      }),
    parameters: {
      docs: {
        description: {
          story:
            "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds.",
        },
      },
    },
  },
  t = {
    render: () =>
      e.jsx("div", {
        className: "bg-gray-100 p-8 rounded-lg",
        children: e.jsxs("div", {
          className: "flex space-x-4",
          children: [
            e.jsx(r, { number: 1 }),
            e.jsx(r, { number: 2 }),
            e.jsx(r, { number: 3 }),
          ],
        }),
      }),
    parameters: {
      docs: {
        description: {
          story:
            "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container.",
        },
      },
    },
  };
n.parameters = {
  ...n.parameters,
  docs: {
    ...n.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 1
  }
}`,
      ...n.parameters?.docs?.source,
    },
  },
};
s.parameters = {
  ...s.parameters,
  docs: {
    ...s.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 2
  }
}`,
      ...s.parameters?.docs?.source,
    },
  },
};
o.parameters = {
  ...o.parameters,
  docs: {
    ...o.parameters?.docs,
    source: {
      originalSource: `{
  args: {
    number: 3
  }
}`,
      ...o.parameters?.docs?.source,
    },
  },
};
a.parameters = {
  ...a.parameters,
  docs: {
    ...a.parameters?.docs,
    source: {
      originalSource: `{
  render: () => <div className="flex space-x-4">
      <SectionNumber number={1} />
      <SectionNumber number={2} />
      <SectionNumber number={3} />
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."
      }
    }
  }
}`,
      ...a.parameters?.docs?.source,
    },
  },
};
t.parameters = {
  ...t.parameters,
  docs: {
    ...t.parameters?.docs,
    source: {
      originalSource: `{
  render: () => <div className="bg-gray-100 p-8 rounded-lg">
      <div className="flex space-x-4">
        <SectionNumber number={1} />
        <SectionNumber number={2} />
        <SectionNumber number={3} />
      </div>
    </div>,
  parameters: {
    docs: {
      description: {
        story: "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."
      }
    }
  }
}`,
      ...t.parameters?.docs?.source,
    },
  },
};
const b = [
  "NumberOne",
  "NumberTwo",
  "NumberThree",
  "AllNumbers",
  "WithBackground",
];
export {
  a as AllNumbers,
  n as NumberOne,
  o as NumberThree,
  s as NumberTwo,
  t as WithBackground,
  b as __namedExportsOrder,
  u as default,
};