Chromatic

{
  name: "AccordionV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = AccordionV1Stories as ImportedStories<typeof AccordionV1Stories>;
    return html`
      <h1 class="oc-mb-100">AccordionV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ActionSignifierV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ActionSignifierV1Stories as ImportedStories<typeof ActionSignifierV1Stories>;
    return html`
      <h1 class="oc-mb-100">ActionSignifierV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "AllIcons",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = AllIconsStories as ImportedStories<typeof AllIconsStories>;
    return html`
      <h1 class="oc-mb-100">AllIcons</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "AsyncFragmentV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = AsyncFragmentV1Stories as ImportedStories<typeof AsyncFragmentV1Stories>;
    return html`
      <h1 class="oc-mb-100">AsyncFragmentV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "AuthFieldV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = AuthFieldV1Stories as ImportedStories<typeof AuthFieldV1Stories>;
    return html`
      <h1 class="oc-mb-100">AuthFieldV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BackToTopButtonV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BackToTopButtonV1Stories as ImportedStories<typeof BackToTopButtonV1Stories>;
    return html`
      <h1 class="oc-mb-100">BackToTopButtonV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BadgeV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BadgeV1Stories as ImportedStories<typeof BadgeV1Stories>;
    return html`
      <h1 class="oc-mb-100">BadgeV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BadgeV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BadgeV2Stories as ImportedStories<typeof BadgeV2Stories>;
    return html`
      <h1 class="oc-mb-100">BadgeV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BannerV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BannerV1Stories as ImportedStories<typeof BannerV1Stories>;
    return html`
      <h1 class="oc-mb-100">BannerV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BlockV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BlockV1Stories as ImportedStories<typeof BlockV1Stories>;
    return html`
      <h1 class="oc-mb-100">BlockV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "BlockV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = BlockV2Stories as ImportedStories<typeof BlockV2Stories>;
    return html`
      <h1 class="oc-mb-100">BlockV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ButtonV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ButtonV1Stories as ImportedStories<typeof ButtonV1Stories>;
    return html`
      <h1 class="oc-mb-100">ButtonV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CardV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CardV2Stories as ImportedStories<typeof CardV2Stories>;
    return html`
      <h1 class="oc-mb-100">CardV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CardV3",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CardV3Stories as ImportedStories<typeof CardV3Stories>;
    return html`
      <h1 class="oc-mb-100">CardV3</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CarouselV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CarouselV1Stories as ImportedStories<typeof CarouselV1Stories>;
    return html`
      <h1 class="oc-mb-100">CarouselV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ChatBubbleV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ChatBubbleV1Stories as ImportedStories<typeof ChatBubbleV1Stories>;
    return html`
      <h1 class="oc-mb-100">ChatBubbleV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CheckboxV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CheckboxV1Stories as ImportedStories<typeof CheckboxV1Stories>;
    return html`
      <h1 class="oc-mb-100">CheckboxV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CheckboxV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CheckboxV2Stories as ImportedStories<typeof CheckboxV2Stories>;
    return html`
      <h1 class="oc-mb-100">CheckboxV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ChipV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ChipV2Stories as ImportedStories<typeof ChipV2Stories>;
    return html`
      <h1 class="oc-mb-100">ChipV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ChipV3",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ChipV3Stories as ImportedStories<typeof ChipV3Stories>;
    return html`
      <h1 class="oc-mb-100">ChipV3</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "CinemaV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = CinemaV1Stories as ImportedStories<typeof CinemaV1Stories>;
    return html`
      <h1 class="oc-mb-100">CinemaV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "Color",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ColorStories as ImportedStories<typeof ColorStories>;
    return html`
      <h1 class="oc-mb-100">Color</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "DividerV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = DividerV1Stories as ImportedStories<typeof DividerV1Stories>;
    return html`
      <h1 class="oc-mb-100">DividerV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "DropdownV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = DropdownV1Stories as ImportedStories<typeof DropdownV1Stories>;
    return html`
      <h1 class="oc-mb-100">DropdownV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ExpanderV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ExpanderV1Stories as ImportedStories<typeof ExpanderV1Stories>;
    return html`
      <h1 class="oc-mb-100">ExpanderV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "FloatingFocusV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = FloatingFocusV1Stories as ImportedStories<typeof FloatingFocusV1Stories>;
    return html`
      <h1 class="oc-mb-100">FloatingFocusV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "FocusedDialogV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = FocusedDialogV1Stories as ImportedStories<typeof FocusedDialogV1Stories>;
    return html`
      <h1 class="oc-mb-100">FocusedDialogV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "FormGroupV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = FormGroupV1Stories as ImportedStories<typeof FormGroupV1Stories>;
    return html`
      <h1 class="oc-mb-100">FormGroupV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "Gap",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = GapStories as ImportedStories<typeof GapStories>;
    return html`
      <h1 class="oc-mb-100">Gap</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "Grid",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = GridStories as ImportedStories<typeof GridStories>;
    return html`
      <h1 class="oc-mb-100">Grid</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "IconButtonV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = IconButtonV1Stories as ImportedStories<typeof IconButtonV1Stories>;
    return html`
      <h1 class="oc-mb-100">IconButtonV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "IconButtonV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = IconButtonV2Stories as ImportedStories<typeof IconButtonV2Stories>;
    return html`
      <h1 class="oc-mb-100">IconButtonV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "IconButtonV3",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = IconButtonV3Stories as ImportedStories<typeof IconButtonV3Stories>;
    return html`
      <h1 class="oc-mb-100">IconButtonV3</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "IconV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = IconV1Stories as ImportedStories<typeof IconV1Stories>;
    return html`
      <h1 class="oc-mb-100">IconV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "InteractiveOverlayV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = InteractiveOverlayV1Stories as ImportedStories<typeof InteractiveOverlayV1Stories>;
    return html`
      <h1 class="oc-mb-100">InteractiveOverlayV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "InteractiveOverlayV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = InteractiveOverlayV2Stories as ImportedStories<typeof InteractiveOverlayV2Stories>;
    return html`
      <h1 class="oc-mb-100">InteractiveOverlayV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "LinkV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = LinkV1Stories as ImportedStories<typeof LinkV1Stories>;
    return html`
      <h1 class="oc-mb-100">LinkV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "LinkV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = LinkV2Stories as ImportedStories<typeof LinkV2Stories>;
    return html`
      <h1 class="oc-mb-100">LinkV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ListV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ListV1Stories as ImportedStories<typeof ListV1Stories>;
    return html`
      <h1 class="oc-mb-100">ListV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "LogoV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = LogoV1Stories as ImportedStories<typeof LogoV1Stories>;
    return html`
      <h1 class="oc-mb-100">LogoV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "MediaObjectCardV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = MediaObjectCardV1Stories as ImportedStories<typeof MediaObjectCardV1Stories>;
    return html`
      <h1 class="oc-mb-100">MediaObjectCardV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "MediaObjectCardV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = MediaObjectCardV2Stories as ImportedStories<typeof MediaObjectCardV2Stories>;
    return html`
      <h1 class="oc-mb-100">MediaObjectCardV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "Modifier",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ModifierStories as ImportedStories<typeof ModifierStories>;
    return html`
      <h1 class="oc-mb-100">Modifier</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCBackgroundColor",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCBackgroundColorStories as ImportedStories<typeof OCBackgroundColorStories>;
    return html`
      <h1 class="oc-mb-100">OCBackgroundColor</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCBorderRadiusV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCBorderRadiusV1Stories as ImportedStories<typeof OCBorderRadiusV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCBorderRadiusV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCBreakpointsV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCBreakpointsV1Stories as ImportedStories<typeof OCBreakpointsV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCBreakpointsV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCCopyV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCCopyV1Stories as ImportedStories<typeof OCCopyV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCCopyV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCDisplayV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCDisplayV1Stories as ImportedStories<typeof OCDisplayV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCDisplayV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCHeadlineV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCHeadlineV1Stories as ImportedStories<typeof OCHeadlineV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCHeadlineV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCShadowV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCShadowV1Stories as ImportedStories<typeof OCShadowV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCShadowV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "OCSpacingV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = OCSpacingV1Stories as ImportedStories<typeof OCSpacingV1Stories>;
    return html`
      <h1 class="oc-mb-100">OCSpacingV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "PaperCardV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = PaperCardV1Stories as ImportedStories<typeof PaperCardV1Stories>;
    return html`
      <h1 class="oc-mb-100">PaperCardV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "PopoverV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = PopoverV1Stories as ImportedStories<typeof PopoverV1Stories>;
    return html`
      <h1 class="oc-mb-100">PopoverV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ProgressBarV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ProgressBarV1Stories as ImportedStories<typeof ProgressBarV1Stories>;
    return html`
      <h1 class="oc-mb-100">ProgressBarV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "PromoCardV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = PromoCardV1Stories as ImportedStories<typeof PromoCardV1Stories>;
    return html`
      <h1 class="oc-mb-100">PromoCardV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "PromoCardV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = PromoCardV2Stories as ImportedStories<typeof PromoCardV2Stories>;
    return html`
      <h1 class="oc-mb-100">PromoCardV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "RadioButtonV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = RadioButtonV1Stories as ImportedStories<typeof RadioButtonV1Stories>;
    return html`
      <h1 class="oc-mb-100">RadioButtonV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "RadioButtonV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = RadioButtonV2Stories as ImportedStories<typeof RadioButtonV2Stories>;
    return html`
      <h1 class="oc-mb-100">RadioButtonV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "RowV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = RowV1Stories as ImportedStories<typeof RowV1Stories>;
    return html`
      <h1 class="oc-mb-100">RowV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SearchFieldV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SearchFieldV1Stories as ImportedStories<typeof SearchFieldV1Stories>;
    return html`
      <h1 class="oc-mb-100">SearchFieldV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SelectionSignifier",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SelectionSignifierStories as ImportedStories<typeof SelectionSignifierStories>;
    return html`
      <h1 class="oc-mb-100">SelectionSignifier</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SelectionTileV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SelectionTileV1Stories as ImportedStories<typeof SelectionTileV1Stories>;
    return html`
      <h1 class="oc-mb-100">SelectionTileV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SelectionTileV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SelectionTileV2Stories as ImportedStories<typeof SelectionTileV2Stories>;
    return html`
      <h1 class="oc-mb-100">SelectionTileV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SheetV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SheetV1Stories as ImportedStories<typeof SheetV1Stories>;
    return html`
      <h1 class="oc-mb-100">SheetV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SkeletonV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SkeletonV1Stories as ImportedStories<typeof SkeletonV1Stories>;
    return html`
      <h1 class="oc-mb-100">SkeletonV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SkipLinkV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SkipLinkV1Stories as ImportedStories<typeof SkipLinkV1Stories>;
    return html`
      <h1 class="oc-mb-100">SkipLinkV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SnackbarV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SnackbarV1Stories as ImportedStories<typeof SnackbarV1Stories>;
    return html`
      <h1 class="oc-mb-100">SnackbarV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SpinnerV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SpinnerV1Stories as ImportedStories<typeof SpinnerV1Stories>;
    return html`
      <h1 class="oc-mb-100">SpinnerV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SwitchV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SwitchV2Stories as ImportedStories<typeof SwitchV2Stories>;
    return html`
      <h1 class="oc-mb-100">SwitchV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "SwitchV3",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = SwitchV3Stories as ImportedStories<typeof SwitchV3Stories>;
    return html`
      <h1 class="oc-mb-100">SwitchV3</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TabBarV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TabBarV1Stories as ImportedStories<typeof TabBarV1Stories>;
    return html`
      <h1 class="oc-mb-100">TabBarV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TagV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TagV1Stories as ImportedStories<typeof TagV1Stories>;
    return html`
      <h1 class="oc-mb-100">TagV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TextAreaV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TextAreaV1Stories as ImportedStories<typeof TextAreaV1Stories>;
    return html`
      <h1 class="oc-mb-100">TextAreaV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TextFieldV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TextFieldV1Stories as ImportedStories<typeof TextFieldV1Stories>;
    return html`
      <h1 class="oc-mb-100">TextFieldV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "ToggletipV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = ToggletipV1Stories as ImportedStories<typeof ToggletipV1Stories>;
    return html`
      <h1 class="oc-mb-100">ToggletipV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TooltipV1",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TooltipV1Stories as ImportedStories<typeof TooltipV1Stories>;
    return html`
      <h1 class="oc-mb-100">TooltipV1</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "TooltipV2",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = TooltipV2Stories as ImportedStories<typeof TooltipV2Stories>;
    return html`
      <h1 class="oc-mb-100">TooltipV2</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj

{
  name: "VisuallyHidden",
  parameters: {
    backgrounds: {
      value: "frame"
    }
  },
  render: (_, context) => {
    const {
      default: {
        args,
        render,
        parameters
      },
      __namedExportsOrder,
      ...stories
    } = VisuallyHiddenStories as ImportedStories<typeof VisuallyHiddenStories>;
    return html`
      <h1 class="oc-mb-100">VisuallyHidden</h1>

      <p>
       ${parameters?.chromatic?.hideInChromatic ? "This story doesn't need to be snapshotted by chromatic." : ""}      </p>

      ${__namedExportsOrder.map(key => {
      const story = stories[key] as any;
      const storyRender = story.render ?? render;
      if (!storyRender) return html``;
      const storyArgs = {
        ...args,
        ...story.args
      };
      const storyParameters = {
        ...story.parameters
      };
      if (!storyParameters?.chromatic?.hideInChromatic) {
        return html`<h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div>`;
      } else {
        return html`
          <div style="display: none"><h2 class="oc-my-100">${key}</h2>
            <div>${storyRender(storyArgs, context)}</div></div>`;
      }
    })}
          
    `;
  }
} satisfies StoryObj