Merge pull request 'Hero Banner' (#7) from adilallo/HeroBanner into main
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
an.di committed
commit
5f06b31428
137 files changed
+93776
-241
No files matched your search
@@ -0,0 +1,28 @@
|
||||
# [PR Title]
|
||||
|
||||
## Overview
|
||||
|
||||
Brief description of what this PR does and why.
|
||||
Mention any context, background, or goals.
|
||||
|
||||
## Changes
|
||||
|
||||
- High-level summary of key changes
|
||||
- List of components, features, or files added/modified
|
||||
- Reference design tokens, breakpoints, or accessibility improvements if relevant
|
||||
|
||||
## Screenshots
|
||||
|
||||
<!-- Add image tags if visual changes exist, otherwise leave this section empty -->
|
||||
|
||||
## How to Test
|
||||
|
||||
1. Steps to run locally or in Storybook
|
||||
2. List what to verify (e.g., responsive layout, accessibility, functional links)
|
||||
3. Include breakpoints, browsers, or devices if relevant
|
||||
|
||||
## Notes
|
||||
|
||||
- Any future follow-ups, TODOs, or known limitations
|
||||
- Temporary setups or workarounds (e.g., personal deployments, placeholder assets)
|
||||
- External dependencies (e.g., design tokens, API connections)
|
||||
@@ -42,3 +42,7 @@ next-env.d.ts
|
||||
|
||||
*storybook.log
|
||||
storybook-static
|
||||
|
||||
# storybook config files (to avoid git changes when switching between local and production)
|
||||
.storybook/main.js
|
||||
.storybook/preview.js
|
||||
@@ -0,0 +1,35 @@
|
||||
/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
|
||||
const config = {
|
||||
stories: [
|
||||
"../stories/**/*.mdx",
|
||||
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
|
||||
],
|
||||
addons: [
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-a11y",
|
||||
"@storybook/addon-vitest",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/nextjs-vite",
|
||||
options: {},
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
|
||||
previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
|
||||
async viteFinal(cfg) {
|
||||
// IMPORTANT: Set base path for GitHub Pages sub-path hosting
|
||||
cfg.base = "/communityrulestorybook/";
|
||||
// Ensure esbuild treats .js as JSX during dep pre-bundling
|
||||
cfg.optimizeDeps ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions.loader = {
|
||||
...(cfg.optimizeDeps.esbuildOptions.loader || {}),
|
||||
".js": "jsx",
|
||||
".ts": "tsx",
|
||||
};
|
||||
return cfg;
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -16,7 +16,11 @@ const config = {
|
||||
options: {},
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
managerHead: (head) => `${head}<base href="/communityrulestorybook/">`,
|
||||
previewHead: (head) => `${head}<base href="/communityrulestorybook/">`,
|
||||
async viteFinal(cfg) {
|
||||
// IMPORTANT: Set base path for GitHub Pages sub-path hosting
|
||||
cfg.base = "/communityrulestorybook/";
|
||||
// Ensure esbuild treats .js as JSX during dep pre-bundling
|
||||
cfg.optimizeDeps ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions ??= {};
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/** @type { import('@storybook/nextjs-vite').StorybookConfig } */
|
||||
const config = {
|
||||
stories: [
|
||||
"../stories/**/*.mdx",
|
||||
"../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
|
||||
],
|
||||
addons: [
|
||||
"@chromatic-com/storybook",
|
||||
"@storybook/addon-docs",
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-a11y",
|
||||
"@storybook/addon-vitest",
|
||||
],
|
||||
framework: {
|
||||
name: "@storybook/nextjs-vite",
|
||||
options: {},
|
||||
},
|
||||
staticDirs: ["../public"],
|
||||
async viteFinal(cfg) {
|
||||
// Ensure esbuild treats .js as JSX during dep pre-bundling
|
||||
cfg.optimizeDeps ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions ??= {};
|
||||
cfg.optimizeDeps.esbuildOptions.loader = {
|
||||
...(cfg.optimizeDeps.esbuildOptions.loader || {}),
|
||||
".js": "jsx",
|
||||
".ts": "tsx",
|
||||
};
|
||||
return cfg;
|
||||
},
|
||||
};
|
||||
export default config;
|
||||
@@ -0,0 +1,16 @@
|
||||
import "../app/globals.css";
|
||||
|
||||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
+2
-49
@@ -1,62 +1,15 @@
|
||||
import "../app/globals.css";
|
||||
|
||||
/** @type { import('@storybook/nextjs-vite').Preview } */
|
||||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
nextjs: { appDirectory: true },
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
|
||||
a11y: {
|
||||
// 'todo' - show a11y violations in the test UI only
|
||||
// 'error' - fail CI on a11y violations
|
||||
// 'off' - skip a11y checks entirely
|
||||
test: "todo",
|
||||
},
|
||||
|
||||
backgrounds: {
|
||||
default: "dark",
|
||||
values: [
|
||||
{
|
||||
name: "dark",
|
||||
value: "#000000",
|
||||
},
|
||||
{
|
||||
name: "light",
|
||||
value: "#ffffff",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
viewport: {
|
||||
defaultViewport: "md",
|
||||
viewports: {
|
||||
xsm: {
|
||||
name: "XSmall (≤429px)",
|
||||
styles: { width: "429px", height: "800px" },
|
||||
},
|
||||
sm: {
|
||||
name: "Small (≥430px)",
|
||||
styles: { width: "430px", height: "800px" },
|
||||
},
|
||||
md: {
|
||||
name: "Medium (≥640px)",
|
||||
styles: { width: "640px", height: "800px" },
|
||||
},
|
||||
lg: {
|
||||
name: "Large (≥1024px)",
|
||||
styles: { width: "1024px", height: "800px" },
|
||||
},
|
||||
xl: {
|
||||
name: "XLarge (≥1440px)",
|
||||
styles: { width: "1440px", height: "900px" },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import "../app/globals.css";
|
||||
|
||||
/** @type { import('@storybook/react').Preview } */
|
||||
const preview = {
|
||||
parameters: {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
@@ -1,36 +1,79 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
# Community Rule
|
||||
|
||||
A Next.js application for community decision-making and governance documentation.
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
|
||||
## Storybook Development
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
This project includes Storybook for component development and documentation. The setup supports both local development and GitHub Pages deployment.
|
||||
|
||||
## Learn More
|
||||
### Local Development
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
For local Storybook development (no base path):
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
```bash
|
||||
npm run storybook:local
|
||||
```
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
This will:
|
||||
|
||||
## Deploy on Vercel
|
||||
- Copy local configuration files (without GitHub Pages base path)
|
||||
- Start Storybook at `http://localhost:6006`
|
||||
- Ignore configuration changes in git
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
### Production Deployment
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
When ready to deploy to GitHub Pages:
|
||||
|
||||
1. **Restore GitHub Pages configuration:**
|
||||
|
||||
```bash
|
||||
npm run storybook:restore
|
||||
```
|
||||
|
||||
2. **Build Storybook:**
|
||||
|
||||
```bash
|
||||
npm run build-storybook
|
||||
```
|
||||
|
||||
3. **Deploy to GitHub Pages repository:**
|
||||
|
||||
```bash
|
||||
# Copy the build to your GitHub Pages repository
|
||||
cp -r storybook-static/* /path/to/communityrulestorybook/
|
||||
|
||||
# Or if you have it as a git submodule:
|
||||
cp -r storybook-static/* communityrulestorybook/
|
||||
cd communityrulestorybook
|
||||
git add .
|
||||
git commit -m "Update Storybook build"
|
||||
git push origin main
|
||||
```
|
||||
|
||||
### Switching Between Configurations
|
||||
|
||||
- **Local Development:** `npm run storybook:local`
|
||||
- **Production Build:** `npm run storybook:restore` then `npm run build-storybook`
|
||||
- **Back to Local:** `npm run storybook:local`
|
||||
|
||||
The gitignore is configured to prevent configuration file changes from triggering git changes during local development.
|
||||
|
||||
### Available Scripts
|
||||
|
||||
- `npm run dev` - Start Next.js development server
|
||||
- `npm run build` - Build Next.js application for production
|
||||
- `npm run start` - Start Next.js production server
|
||||
- `npm run storybook:local` - Start Storybook with local configuration
|
||||
- `npm run storybook:restore` - Restore GitHub Pages configuration
|
||||
- `npm run build-storybook` - Build Storybook for production
|
||||
- `npm run storybook` - Start Storybook with current configuration
|
||||
@@ -25,16 +25,11 @@ export default function Button({
|
||||
};
|
||||
|
||||
const fontStyles = {
|
||||
xsmall:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
small:
|
||||
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
|
||||
medium:
|
||||
"font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
|
||||
large:
|
||||
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
xlarge:
|
||||
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
|
||||
xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]",
|
||||
medium: "font-inter text-[14px] leading-[16px] font-medium tracking-[0%]",
|
||||
large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
xlarge: "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]",
|
||||
};
|
||||
|
||||
const variantStyles = {
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import Button from "./Button";
|
||||
|
||||
const ContentLockup = ({
|
||||
title,
|
||||
subtitle,
|
||||
description,
|
||||
ctaText,
|
||||
ctaHref,
|
||||
buttonClassName = "",
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10">
|
||||
{/* Text content container */}
|
||||
<div className="flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]">
|
||||
{/* Title and subtitle group - no gap between them at xl */}
|
||||
<div className="flex flex-col xl:gap-0">
|
||||
{/* Title container */}
|
||||
<div className="flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center">
|
||||
<h1 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
|
||||
{title}
|
||||
</h1>
|
||||
<img
|
||||
src="assets/Shapes_1.svg"
|
||||
alt="Decorative shapes"
|
||||
className="w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<h2 className="font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]">
|
||||
{subtitle}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* Description - 20px gap from subtitle at xl */}
|
||||
<p className="font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="flex justify-start">
|
||||
{/* Small button for xsm and sm breakpoints */}
|
||||
<div className="block md:hidden">
|
||||
<Button variant="primary" size="small">
|
||||
{ctaText}
|
||||
</Button>
|
||||
</div>
|
||||
{/* Large button for md and lg breakpoints */}
|
||||
<div className="hidden md:block xl:hidden">
|
||||
<Button variant="primary" size="large" className={buttonClassName}>
|
||||
{ctaText}
|
||||
</Button>
|
||||
</div>
|
||||
{/* XLarge button for xl breakpoint */}
|
||||
<div className="hidden xl:block">
|
||||
<Button variant="primary" size="xlarge">
|
||||
{ctaText}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentLockup;
|
||||
+14
-14
@@ -23,7 +23,7 @@ export default function Footer() {
|
||||
/>
|
||||
<footer className="bg-[var(--color-surface-default-primary)] w-full">
|
||||
<div
|
||||
className="flex flex-col items-start mx-auto max-w-[1920px]
|
||||
className="flex flex-col items-start mx-auto
|
||||
px-[var(--spacing-measures-spacing-016)]
|
||||
py-[var(--spacing-measures-spacing-040)]
|
||||
gap-[var(--spacing-measures-spacing-040)]
|
||||
@@ -51,12 +51,12 @@ export default function Footer() {
|
||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
|
||||
{/* Contact info */}
|
||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
|
||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
<div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
Media Economies Design Lab
|
||||
</div>
|
||||
<a
|
||||
href="mailto:medlab@colorado.edu"
|
||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
medlab@colorado.edu
|
||||
</a>
|
||||
@@ -70,13 +70,13 @@ export default function Footer() {
|
||||
aria-label="Follow us on Bluesky"
|
||||
>
|
||||
<img
|
||||
src="/assets/Bluesky_Logo.svg"
|
||||
src="assets/Bluesky_Logo.svg"
|
||||
alt="Bluesky"
|
||||
width={24}
|
||||
height={22}
|
||||
className="flex-shrink-0 group-hover:scale-110 transition-transform"
|
||||
/>
|
||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
<div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
medlabboulder
|
||||
</div>
|
||||
</a>
|
||||
@@ -86,13 +86,13 @@ export default function Footer() {
|
||||
aria-label="Follow us on GitLab"
|
||||
>
|
||||
<img
|
||||
src="/assets/GitLab_Icon.png"
|
||||
src="assets/GitLab_Icon.png"
|
||||
alt="GitLab"
|
||||
width={22}
|
||||
height={22}
|
||||
className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
|
||||
/>
|
||||
<div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
<div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
|
||||
medlabboulder
|
||||
</div>
|
||||
</a>
|
||||
@@ -103,19 +103,19 @@ export default function Footer() {
|
||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
Use cases
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
@@ -126,25 +126,25 @@ export default function Footer() {
|
||||
|
||||
{/* Bottom section */}
|
||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
|
||||
<div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
|
||||
<div className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
|
||||
© All right reserved
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
|
||||
>
|
||||
Cookies Settings
|
||||
</a>
|
||||
|
||||
@@ -25,10 +25,10 @@ export default function Header({ onToggle }) {
|
||||
];
|
||||
|
||||
const avatarImages = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
];
|
||||
{ src: "assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
];
|
||||
|
||||
const logoConfig = [
|
||||
{ breakpoint: "block sm:hidden", size: "header", showText: false },
|
||||
@@ -111,7 +111,7 @@ export default function Header({ onToggle }) {
|
||||
aria-label="Main navigation header"
|
||||
>
|
||||
<nav
|
||||
className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
||||
className="flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
|
||||
role="navigation"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
|
||||
@@ -15,17 +15,17 @@ export default function HeaderTab({
|
||||
>
|
||||
{children}
|
||||
<img
|
||||
src="/assets/Union_xsm.svg"
|
||||
src="assets/Union_xsm.svg"
|
||||
alt="Union"
|
||||
className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
|
||||
/>
|
||||
<img
|
||||
src="/assets/Union_sm_md_lg.svg"
|
||||
src="assets/Union_sm_md_lg.svg"
|
||||
alt="Union"
|
||||
className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
|
||||
/>
|
||||
<img
|
||||
src="/assets/Union_xlg.svg"
|
||||
src="assets/Union_xlg.svg"
|
||||
alt="Union"
|
||||
className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import ContentLockup from "./ContentLockup";
|
||||
import HeroDecor from "./HeroDecor";
|
||||
|
||||
const HeroBanner = ({ title, subtitle, description, ctaText, ctaHref }) => {
|
||||
return (
|
||||
<section className="bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]">
|
||||
<div className="flex flex-col gap-[var(--spacing-scale-010)]">
|
||||
{/* Frame container for content */}
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden">
|
||||
{/* DECORATIONS (behind content) */}
|
||||
<HeroDecor
|
||||
className="pointer-events-none absolute z-0
|
||||
left-0 top-0
|
||||
translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px]
|
||||
w-[1540px] h-[645px] scale-[1.04]"
|
||||
/>
|
||||
|
||||
{/* Content lockup - Large variant */}
|
||||
<div className="md:flex-1">
|
||||
<ContentLockup
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
description={description}
|
||||
ctaText={ctaText}
|
||||
ctaHref={ctaHref}
|
||||
buttonClassName="shrink-0 whitespace-nowrap min-w-[280px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hero Image Container */}
|
||||
<div className="w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center">
|
||||
<img
|
||||
src="assets/HeroImage.png"
|
||||
alt="Hero illustration"
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroBanner;
|
||||
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
const HeroDecor = ({ className = "" }) => {
|
||||
return (
|
||||
<svg
|
||||
className={`text-[#FDFAA8] opacity-50 ${className}`}
|
||||
viewBox="0 0 1540 645"
|
||||
aria-hidden="true"
|
||||
overflow="visible"
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
>
|
||||
<g fill="currentColor">
|
||||
<defs>
|
||||
<filter
|
||||
id="grain"
|
||||
filterUnits="objectBoundingBox"
|
||||
x="0"
|
||||
y="0"
|
||||
width="1"
|
||||
height="1"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
{/* 1) make noise */}
|
||||
<feTurbulence
|
||||
type="fractalNoise"
|
||||
baseFrequency="0.8"
|
||||
numOctaves="2"
|
||||
seed="3"
|
||||
stitchTiles="stitch"
|
||||
result="noise"
|
||||
/>
|
||||
{/* 2) attenuate */}
|
||||
<feColorMatrix
|
||||
in="noise"
|
||||
result="softNoise"
|
||||
type="matrix"
|
||||
values="
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0 0
|
||||
0 0 0 0.15 0"
|
||||
/>
|
||||
{/* 3) MASK noise to the element's alpha only */}
|
||||
<feComposite
|
||||
in="softNoise"
|
||||
in2="SourceAlpha"
|
||||
operator="in"
|
||||
result="maskedNoise"
|
||||
/>
|
||||
{/* 4) blend masked noise over the shapes */}
|
||||
<feBlend in="SourceGraphic" in2="maskedNoise" mode="multiply" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* apply filter only to the decoration paths */}
|
||||
<g fill="currentColor" filter="url(#grain)">
|
||||
<path d="M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z" />
|
||||
<path d="M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z" />
|
||||
<path d="M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z" />
|
||||
<path d="M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z" />
|
||||
<path d="M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z" />
|
||||
<path d="M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z" />
|
||||
<path d="M1057.8 0C1112.18 0 1156.26 93.6267 1156.26 209.121C1156.26 211.519 1156.24 213.907 1156.2 216.285C1169.2 133.082 1206.14 73.0664 1249.67 73.0664C1304.05 73.0664 1348.13 166.693 1348.13 282.188C1348.13 397.682 1304.05 491.309 1249.67 491.309C1195.29 491.309 1151.21 397.682 1151.21 282.188C1151.21 279.79 1151.23 277.401 1151.27 275.023C1138.27 358.226 1101.34 418.242 1057.8 418.242C1014.27 418.242 977.332 358.226 964.334 275.023C964.372 277.401 964.393 279.79 964.393 282.188C964.393 397.682 920.312 491.309 865.934 491.309C811.557 491.309 767.475 397.682 767.475 282.188C767.475 166.693 811.557 73.0664 865.934 73.0664C909.47 73.0664 946.405 133.082 959.402 216.285C959.365 213.907 959.344 211.519 959.344 209.121C959.344 93.6267 1003.43 0 1057.8 0Z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeroDecor;
|
||||
@@ -34,10 +34,10 @@ export default function HomeHeader() {
|
||||
];
|
||||
|
||||
const avatarImages = [
|
||||
{ src: "/assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "/assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "/assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
];
|
||||
{ src: "assets/Avatar_1.png", alt: "Avatar 1" },
|
||||
{ src: "assets/Avatar_2.png", alt: "Avatar 2" },
|
||||
{ src: "assets/Avatar_3.png", alt: "Avatar 3" },
|
||||
];
|
||||
|
||||
const logoConfig = [
|
||||
{
|
||||
@@ -164,7 +164,7 @@ export default function HomeHeader() {
|
||||
aria-label="Home page navigation header"
|
||||
>
|
||||
<nav
|
||||
className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
|
||||
className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
|
||||
role="navigation"
|
||||
aria-label="Main navigation"
|
||||
>
|
||||
|
||||
@@ -123,7 +123,7 @@ export default function Logo({ size = "default", showText = true }) {
|
||||
{/* Logo Text - only show if showText is true */}
|
||||
{showText && (
|
||||
<div
|
||||
className={`font-['Bricolage_Grotesque'] ${
|
||||
className={`font-bricolage-grotesque ${
|
||||
size === "homeHeaderXsmall" ||
|
||||
size === "homeHeaderSm" ||
|
||||
size === "homeHeaderMd" ||
|
||||
@@ -142,7 +142,7 @@ export default function Logo({ size = "default", showText = true }) {
|
||||
|
||||
{/* Vector Icon */}
|
||||
<img
|
||||
src="/assets/Logo.svg"
|
||||
src="assets/Logo.svg"
|
||||
alt="CommunityRule Logo Icon"
|
||||
width={27.05}
|
||||
height={27.05}
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const LogoWall = ({ logos = [] }) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
// Default logos if none provided - ordered for mobile (3 rows × 2 columns)
|
||||
const defaultLogos = [
|
||||
{
|
||||
src: "assets/Section/Logo_FoodNotBombs.png",
|
||||
alt: "Food Not Bombs",
|
||||
size: "h-11 lg:h-14 xl:h-[70px]",
|
||||
order: "order-1 sm:order-4", // Mobile: row 1 col 1, SM: row 2 col 1 (bottom left)
|
||||
},
|
||||
{
|
||||
src: "assets/Section/Logo_StartCOOP.png",
|
||||
alt: "Start COOP",
|
||||
size: "h-[42px] lg:h-[53px] xl:h-[66px]",
|
||||
order: "order-2 sm:order-2", // Mobile: row 1 col 2, SM: row 1 col 2 (top middle)
|
||||
},
|
||||
{
|
||||
src: "assets/Section/Logo_Metagov.png",
|
||||
alt: "Metagov",
|
||||
size: "h-6 lg:h-8 xl:h-[41px]",
|
||||
order: "order-3 sm:order-1", // Mobile: row 2 col 1, SM: row 1 col 1 (top left)
|
||||
},
|
||||
{
|
||||
src: "assets/Section/Logo_OpenCivics.png",
|
||||
alt: "Open Civics",
|
||||
size: "h-8 lg:h-10 xl:h-[50px]",
|
||||
order: "order-4 sm:order-5 md:order-6", // Mobile: row 2 col 2, SM: row 2 col 2, MD: swapped with Mutual Aid CO
|
||||
},
|
||||
{
|
||||
src: "assets/Section/Logo_MutualAidCO.png",
|
||||
alt: "Mutual Aid CO",
|
||||
size: "h-11 lg:h-14 xl:h-[70px]",
|
||||
order: "order-5 sm:order-6 md:order-5", // Mobile: row 3 col 1, SM: row 2 col 3, MD: swapped with OpenCivics
|
||||
},
|
||||
{
|
||||
src: "assets/Section/Logo_CUBoulder.png",
|
||||
alt: "CU Boulder",
|
||||
size: "h-10 lg:h-12 xl:h-[60px]",
|
||||
order: "order-6 sm:order-3", // Mobile: row 3 col 2, SM: row 1 col 3 (top right)
|
||||
},
|
||||
];
|
||||
|
||||
const displayLogos = logos.length > 0 ? logos : defaultLogos;
|
||||
|
||||
// Simple fade-in effect after component mounts
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(true);
|
||||
}, 100);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="p-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-024)] md:py-[var(--spacing-scale-032)] lg:px-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-048)] xl:px-[160px] xl:py-[var(--spacing-scale-064)]">
|
||||
<div className="flex flex-col gap-[var(--spacing-scale-032)] md:gap-[var(--spacing-scale-024)] xl:gap-[var(--spacing-scale-032)]">
|
||||
{/* Label */}
|
||||
<p className="font-inter font-medium text-[10px] leading-[12px] xl:text-[14px] xl:leading-[12px] uppercase text-[var(--color-content-default-secondary)] text-center">
|
||||
Trusted by leading cooperators
|
||||
</p>
|
||||
|
||||
{/* Logo Grid Container */}
|
||||
<div
|
||||
className={`transition-opacity duration-500 ${
|
||||
isVisible ? "opacity-60" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<div className="grid grid-cols-2 grid-rows-3 sm:grid-cols-3 sm:grid-rows-2 md:flex md:justify-between md:items-center gap-x-[var(--spacing-scale-032)] gap-y-[var(--spacing-scale-032)] sm:gap-y-[var(--spacing-scale-048)]">
|
||||
{displayLogos.map((logo, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-center transition-opacity duration-500 hover:opacity-100 ${
|
||||
logo.order || ""
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
className={`${
|
||||
logo.size || "h-8"
|
||||
} w-auto object-contain transition-transform duration-500 hover:scale-105`}
|
||||
priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
|
||||
unoptimized // Skip optimization for local images
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoWall;
|
||||
@@ -78,13 +78,13 @@ export default function MenuBarItem({
|
||||
};
|
||||
|
||||
const smallTextStyle =
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
|
||||
"font-inter text-[10px] leading-[12px] font-medium tracking-[0%]";
|
||||
const mediumTextStyle =
|
||||
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]";
|
||||
"font-inter text-[12px] leading-[14px] font-medium tracking-[0%]";
|
||||
const largeTextStyle =
|
||||
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
|
||||
"font-inter text-[16px] leading-[20px] font-medium tracking-[0%]";
|
||||
const xlargeTextStyle =
|
||||
"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]";
|
||||
"font-inter text-[24px] leading-[28px] font-normal tracking-[0%]";
|
||||
|
||||
const textStyles = {
|
||||
default: smallTextStyle,
|
||||
|
||||
@@ -23,10 +23,8 @@ export default function NavigationItem({
|
||||
|
||||
// Text styles based on size
|
||||
const textStyles = {
|
||||
default:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
xsmall:
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
default: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
};
|
||||
|
||||
const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
|
||||
|
||||
@@ -4,13 +4,13 @@ const SectionNumber = ({ number }) => {
|
||||
const getImageSrc = (num) => {
|
||||
switch (num) {
|
||||
case 1:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
return "assets/SectionNumber_1.png";
|
||||
case 2:
|
||||
return "/assets/SectionNumber_2.png";
|
||||
return "assets/SectionNumber_2.png";
|
||||
case 3:
|
||||
return "/assets/SectionNumber_3.png";
|
||||
return "assets/SectionNumber_3.png";
|
||||
default:
|
||||
return "/assets/SectionNumber_1.png";
|
||||
return "assets/SectionNumber_1.png";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,24 @@
|
||||
@import "./tailwind.css";
|
||||
|
||||
/* Map next/font CSS variables to handy classes */
|
||||
.font-inter {
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
|
||||
.font-bricolage-grotesque {
|
||||
font-family: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
|
||||
-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||
}
|
||||
|
||||
/* Set default body text face */
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
|
||||
"Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
min-height: 100vh;
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ const inter = Inter({
|
||||
|
||||
const bricolageGrotesque = Bricolage_Grotesque({
|
||||
subsets: ["latin"],
|
||||
weight: ["400"],
|
||||
weight: ["400", "500"],
|
||||
variable: "--font-bricolage-grotesque",
|
||||
});
|
||||
|
||||
|
||||
+13
@@ -1,6 +1,17 @@
|
||||
import NumberedCards from "./components/NumberedCards";
|
||||
import HeroBanner from "./components/HeroBanner";
|
||||
import LogoWall from "./components/LogoWall";
|
||||
|
||||
export default function Page() {
|
||||
const heroBannerData = {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description:
|
||||
"Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how CommunityRule works",
|
||||
ctaHref: "#",
|
||||
};
|
||||
|
||||
const numberedCardsData = {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
@@ -25,6 +36,8 @@ export default function Page() {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeroBanner {...heroBannerData} />
|
||||
<LogoWall />
|
||||
<NumberedCards {...numberedCardsData} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Whitespace-only changes.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
import{j as u}from"./jsx-runtime-C_nHp4yK.js";function o({src:e,alt:s,size:a="small",className:l="",...r}){const t=`rounded-[var(--radius-measures-radius-full)] object-cover ${{small:"w-[16px] h-[16px]",medium:"w-[18px] h-[18px]",large:"w-[24px] h-[24px]",xlarge:"w-[32px] h-[32px]"}[a]} ${l}`;return u.jsx("img",{src:e,alt:s,className:t,...r})}o.__docgenInfo={description:"",methods:[],displayName:"Avatar",props:{size:{defaultValue:{value:'"small"',computed:!1},required:!1},className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{o as A};
|
||||
@@ -0,0 +1,91 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as a}from"./Avatar-C4Vb3oYl.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/Avatar",component:a,parameters:{layout:"centered",docs:{description:{component:"A simple avatar component that displays user profile images with multiple size variants. Supports custom images and alt text for accessibility."}}},argTypes:{src:{control:{type:"text"},description:"The source URL of the avatar image"},alt:{control:{type:"text"},description:"Alt text for accessibility"},size:{control:{type:"select"},options:["small","medium","large","xlarge"],description:"The size of the avatar"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},r={args:{src:"/assets/Avatar_1.png",alt:"User Avatar",size:"medium"}},t={args:{src:"/assets/Avatar_1.png",alt:"User Avatar"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,size:"small"}),s.jsx(a,{...e,size:"medium"}),s.jsx(a,{...e,size:"large"}),s.jsx(a,{...e,size:"xlarge"})]})}),parameters:{docs:{description:{story:"Different size variants available for the avatar component."}}}},i={args:{size:"large"},render:e=>s.jsx("div",{className:"space-y-4",children:s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{...e,src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{...e,src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{...e,src:"assets/Avatar_3.png",alt:"User 3"})]})}),parameters:{docs:{description:{story:"Different avatar images available in the project."}}}},n={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Small Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"small",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"small",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"small",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"XLarge Size"}),s.jsxs("div",{className:"space-x-4",children:[s.jsx(a,{size:"xlarge",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_3.png",alt:"User 3"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all avatar sizes with different user images."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar",
|
||||
size: "medium"
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
src: "/assets/Avatar_1.png",
|
||||
alt: "User Avatar"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} size="small" />
|
||||
<Avatar {...args} size="medium" />
|
||||
<Avatar {...args} size="large" />
|
||||
<Avatar {...args} size="xlarge" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the avatar component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Avatar {...args} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar {...args} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar {...args} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different avatar images available in the project."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<div className="space-x-4">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all avatar sizes with different user images."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const v=["Default","Sizes","DifferentAvatars","AllSizesWithDifferentAvatars"];export{n as AllSizesWithDifferentAvatars,r as Default,i as DifferentAvatars,t as Sizes,v as __namedExportsOrder,d as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as r}from"./jsx-runtime-C_nHp4yK.js";function i({children:e,size:a="small",className:s="",...l}){const t=`items-center ${{small:"flex -space-x-2",medium:"flex -space-x-[9px]",large:"flex -space-x-[10px]",xlarge:"flex -space-x-[13px]"}[a]} ${s}`;return r.jsx("div",{className:t,...l,children:e})}i.__docgenInfo={description:"",methods:[],displayName:"AvatarContainer",props:{size:{defaultValue:{value:'"small"',computed:!1},required:!1},className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{i as A};
|
||||
@@ -0,0 +1,160 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";import{A as e}from"./AvatarContainer-Bt0G0TWZ.js";import{A as a}from"./Avatar-C4Vb3oYl.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const g={title:"Components/AvatarContainer",component:e,parameters:{layout:"centered",docs:{description:{component:"A container component that groups multiple avatars together with overlapping spacing. Useful for displaying multiple users or team members in a compact format."}}},argTypes:{size:{control:{type:"select"},options:["small","medium","large","xlarge"],description:"The size of the avatar container and its children"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},t={args:{size:"medium"},render:r=>s.jsxs(e,{...r,children:[s.jsx(a,{size:r.size,src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:r.size,src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:r.size,src:"assets/Avatar_3.png",alt:"User 3"})]})},n={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Small Size"}),s.jsxs(e,{size:"small",children:[s.jsx(a,{size:"small",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"small",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"small",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),s.jsxs(e,{size:"medium",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),s.jsxs(e,{size:"large",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"XLarge Size"}),s.jsxs(e,{size:"xlarge",children:[s.jsx(a,{size:"xlarge",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"xlarge",src:"assets/Avatar_3.png",alt:"User 3"})]})]})]}),parameters:{docs:{description:{story:"Different size variants of the avatar container with overlapping spacing."}}}},i={args:{},render:()=>s.jsxs("div",{className:"space-y-6",children:[s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"2 Users"}),s.jsxs(e,{size:"large",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"3 Users"}),s.jsxs(e,{size:"large",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"4 Users"}),s.jsxs(e,{size:"large",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"}),s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 4"})]})]}),s.jsxs("div",{children:[s.jsx("h3",{className:"text-white font-semibold mb-3",children:"5 Users"}),s.jsxs(e,{size:"large",children:[s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"large",src:"assets/Avatar_3.png",alt:"User 3"}),s.jsx(a,{size:"large",src:"assets/Avatar_1.png",alt:"User 4"}),s.jsx(a,{size:"large",src:"assets/Avatar_2.png",alt:"User 5"})]})]})]}),parameters:{docs:{description:{story:"Avatar containers with different numbers of users to show the overlapping effect."}}}},l={args:{},render:()=>s.jsx("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)] p-8",children:s.jsxs("div",{className:"max-w-4xl mx-auto",children:[s.jsx("h2",{className:"text-white font-semibold mb-6",children:"Avatar Container in Context"}),s.jsxs("div",{className:"space-y-8",children:[s.jsxs("div",{className:"bg-[var(--color-surface-default-secondary)] p-6 rounded-lg",children:[s.jsx("h3",{className:"text-white font-semibold mb-4",children:"Team Members"}),s.jsxs("div",{className:"flex items-center space-x-4",children:[s.jsxs(e,{size:"medium",children:[s.jsx(a,{size:"medium",src:"assets/Avatar_1.png",alt:"User 1"}),s.jsx(a,{size:"medium",src:"assets/Avatar_2.png",alt:"User 2"}),s.jsx(a,{size:"medium",src:"assets/Avatar_3.png",alt:"User 3"})]}),s.jsx("span",{className:"text-white",children:"3 team members"})]})]}),s.jsxs("div",{className:"bg-[vLine truncated
|
||||
args: {
|
||||
size: "medium"
|
||||
},
|
||||
render: args => <AvatarContainer {...args}>
|
||||
<Avatar size={args.size} src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size={args.size} src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size={args.size} src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
}`,...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Small Size</h3>
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="small" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XLarge Size</h3>
|
||||
<AvatarContainer size="xlarge">
|
||||
<Avatar size="xlarge" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="xlarge" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants of the avatar container with overlapping spacing."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">2 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">3 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">4 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">5 Users</h3>
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 5" />
|
||||
</AvatarContainer>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Avatar containers with different numbers of users to show the overlapping effect."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Avatar Container in Context
|
||||
</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Team Members</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="medium">
|
||||
<Avatar size="medium" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="medium" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="medium" src="assets/Avatar_3.png" alt="User 3" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">3 team members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">
|
||||
Project Contributors
|
||||
</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="large">
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="large" src="assets/Avatar_2.png" alt="User 2" />
|
||||
<Avatar size="large" src="assets/Avatar_3.png" alt="User 3" />
|
||||
<Avatar size="large" src="assets/Avatar_1.png" alt="User 4" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">4 contributors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-4">Small Team</h3>
|
||||
<div className="flex items-center space-x-4">
|
||||
<AvatarContainer size="small">
|
||||
<Avatar size="small" src="assets/Avatar_1.png" alt="User 1" />
|
||||
<Avatar size="small" src="assets/Avatar_2.png" alt="User 2" />
|
||||
</AvatarContainer>
|
||||
<span className="text-white">2 members</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Avatar containers used in realistic contexts to show how they integrate with other UI elements."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...l.parameters?.docs?.source}}};const p=["Default","Sizes","DifferentGroupSizes","InContext"];export{t as Default,i as DifferentGroupSizes,l as InContext,n as Sizes,p as __namedExportsOrder,g as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18411_62931)">
|
||||
<path d="M5.42835 2.2446C8.08819 4.2226 10.9492 8.23317 11.9996 10.3855C13.05 8.23333 15.9108 4.22256 18.5708 2.2446C20.49 0.817353 23.5996 -0.28697 23.5996 3.22704C23.5996 3.92884 23.1934 9.1225 22.9551 9.96567C22.127 12.8971 19.1094 13.6448 16.4251 13.1923C21.1171 13.9833 22.3107 16.6034 19.733 19.2236C14.8374 24.1998 12.6966 17.9751 12.1478 16.3801C12.0472 16.0877 12.0002 15.9509 11.9995 16.0672C11.9988 15.9509 11.9517 16.0877 11.8512 16.3801C11.3026 17.9751 9.16185 24.2 4.26597 19.2236C1.68821 16.6034 2.88177 13.9831 7.57385 13.1923C4.88953 13.6448 1.87185 12.8971 1.04385 9.96567C0.805606 9.12242 0.399414 3.92876 0.399414 3.22704C0.399414 -0.28697 3.50909 0.817353 5.42821 2.2446H5.42835Z" fill="#949494"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18411_62931">
|
||||
<rect width="24" height="21" fill="white" transform="translate(0 0.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1001 B |
@@ -0,0 +1 @@
|
||||
import{j as u}from"./jsx-runtime-C_nHp4yK.js";function g({children:o,variant:e="default",size:a="xsmall",className:v="",disabled:r=!1,type:p="button",onClick:t,href:l,target:s,rel:c,ariaLabel:n,...f}){const b={xsmall:"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",small:"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",medium:"p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",large:"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",xlarge:"px-[var(--spacing-scale-020)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-008)]"},m={xsmall:"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",small:"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",medium:"font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",large:"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",xlarge:"font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]"},y={default:"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",secondary:"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",primary:"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",outlined:"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",dark:"bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outliLine truncated
|
||||
@@ -0,0 +1,241 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{B as n}from"./Button-Z4hbXct5.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/Button",component:n,parameters:{layout:"centered",docs:{description:{component:"A versatile button component with multiple variants, sizes, and states. Can render as a button or link with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators."}}},argTypes:{variant:{control:{type:"select"},options:["default","secondary","primary","outlined","dark","inverse"],description:"The visual style variant of the button"},size:{control:{type:"select"},options:["xsmall","small","medium","large","xlarge"],description:"The size of the button"},disabled:{control:{type:"boolean"},description:"Whether the button is disabled"},href:{control:{type:"text"},description:"If provided, renders as a link instead of a button"},onClick:{action:"clicked"}},tags:["autodocs"]},t={args:{children:"Button"}},s={args:{children:"Button",size:"large"},render:a=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{...a,variant:"default",children:"Default"}),e.jsx(n,{...a,variant:"secondary",children:"Secondary"}),e.jsx(n,{...a,variant:"primary",children:"Primary"}),e.jsx(n,{...a,variant:"outlined",children:"Outlined"}),e.jsx(n,{...a,variant:"dark",children:"Dark"}),e.jsx(n,{...a,variant:"inverse",children:"Inverse"})]})}),parameters:{docs:{description:{story:"Different visual variants of the button component."}}}},i={args:{children:"Button",variant:"default"},render:a=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{...a,size:"xsmall",children:"XSmall"}),e.jsx(n,{...a,size:"small",children:"Small"}),e.jsx(n,{...a,size:"medium",children:"Medium"}),e.jsx(n,{...a,size:"large",children:"Large"}),e.jsx(n,{...a,size:"xlarge",children:"XLarge"})]})}),parameters:{docs:{description:{story:"Different sizes available for the button component."}}}},r={args:{children:"Button",size:"large",variant:"default"},render:a=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{...a,children:"Normal"}),e.jsx(n,{...a,disabled:!0,children:"Disabled"})]})}),parameters:{docs:{description:{story:"Different states of the button component."}}}},l={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{size:"xsmall",children:"XSmall"}),e.jsx(n,{size:"small",children:"Small"}),e.jsx(n,{size:"medium",children:"Medium"}),e.jsx(n,{size:"large",children:"Large"}),e.jsx(n,{size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Secondary Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{variant:"secondary",size:"xsmall",children:"XSmall"}),e.jsx(n,{variant:"secondary",size:"small",children:"Small"}),e.jsx(n,{variant:"secondary",size:"medium",children:"Medium"}),e.jsx(n,{variant:"secondary",size:"large",children:"Large"}),e.jsx(n,{variant:"secondary",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Primary Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{variant:"primary",size:"xsmall",children:"XSmall"}),e.jsx(n,{variant:"primary",size:"small",children:"Small"}),e.jsx(n,{variant:"primary",size:"medium",children:"Medium"}),e.jsx(n,{variant:"primary",size:"large",children:"Large"}),e.jsx(n,{variant:"primary",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Outlined Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{variant:"outlined",size:"xsmall",children:"XSmall"}),e.jsx(n,{variant:"outlined",size:"small",children:"Small"}),e.jsx(n,{variant:"outlined",size:"medium",children:"Medium"}),e.jsx(n,{variant:"outlined",size:"large",children:"Large"}),e.jsx(n,{variant:"outlined",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Dark Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{variant:"dark",size:"xsmall",children:"XSmall"}),e.jsx(n,{variant:"dark",size:"small",children:"Small"}),e.jsx(n,{variant:"dark",size:"medium",children:"Medium"}),e.jsx(n,{variant:"dark",size:"large",children:"Large"}),e.jsx(n,{variant:"dark",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Inverse Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(n,{variant:"inverse",size:"xsmall",children:"XSmall"}),e.jsx(n,{variant:"inverse",size:"small",children:"Small"}),e.jsx(n,{variant:"inverse",size:"medium",children:"Line truncated
|
||||
args: {
|
||||
children: "Button"
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args} variant="default">
|
||||
Default
|
||||
</Button>
|
||||
<Button {...args} variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button {...args} variant="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Button {...args} variant="outlined">
|
||||
Outlined
|
||||
</Button>
|
||||
<Button {...args} variant="dark">
|
||||
Dark
|
||||
</Button>
|
||||
<Button {...args} variant="inverse">
|
||||
Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Button",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args} size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button {...args} size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button {...args} size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button {...args} size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button {...args} size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {...args}>Normal</Button>
|
||||
<Button {...args} disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the button component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button size="xsmall">XSmall</Button>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
<Button size="xlarge">XLarge</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Secondary Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="secondary" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="secondary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="secondary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="secondary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="secondary" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Primary Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="primary" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="primary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="primary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="primary" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outlined" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outlined" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outlined" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outlined" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outlined" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Dark Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="dark" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="dark" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="dark" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="dark" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="dark" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<Button size="large" disabled>
|
||||
Default Disabled
|
||||
</Button>
|
||||
<Button variant="secondary" size="large" disabled>
|
||||
Secondary Disabled
|
||||
</Button>
|
||||
<Button variant="primary" size="large" disabled>
|
||||
Primary Disabled
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" disabled>
|
||||
Outlined Disabled
|
||||
</Button>
|
||||
<Button variant="dark" size="large" disabled>
|
||||
Dark Disabled
|
||||
</Button>
|
||||
<Button variant="inverse" size="large" disabled>
|
||||
Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all button variants, sizes, and states."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...l.parameters?.docs?.source}}};const v=["Default","Variants","Sizes","States","AllVariants"];export{l as AllVariants,t as Default,i as Sizes,r as States,s as Variants,v as __namedExportsOrder,u as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{d as ce,x as E,Y as A,g as he,i as fe,Z as de,M as ge,_ as be,a as I}from"./DocsRenderer-PQXLIZUC-CZs-lgH4.js";import{r as p,R as v}from"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./react-18-TXN0K6I-.js";import"./jsx-runtime-C_nHp4yK.js";var ve=I({"../../node_modules/color-name/index.js"(r,l){l.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),U=I({"../../node_modules/color-convert/conversions.js"(r,l){var s=ve(),h={};for(let e of Object.keys(s))h[s[e]]=e;var u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};l.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:n,labels:t}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:n}),Object.defineProperty(u[e],"labels",{value:t})}u.rgb.hsl=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,o=Math.min(n,t,a),i=Math.max(n,t,a),c=i-o,f,g;i===o?f=0:n===i?f=(t-a)/c:t===i?f=2+(a-n)/c:a===i&&(f=4+(n-t)/c),f=Math.min(fLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{B as s}from"./Button-Z4hbXct5.js";const n=({title:l,subtitle:i,description:x,ctaText:a,ctaHref:t,buttonClassName:r=""})=>e.jsxs("div",{className:"flex flex-col gap-[var(--spacing-scale-006)] sm:gap-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-020)] lg:gap-[var(--spacing-scale-020)] relative z-10",children:[e.jsxs("div",{className:"flex flex-col md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-020)]",children:[e.jsxs("div",{className:"flex flex-col xl:gap-0",children:[e.jsxs("div",{className:"flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",children:[e.jsx("h1",{className:"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",children:l}),e.jsx("img",{src:"assets/Shapes_1.svg",alt:"Decorative shapes",className:"w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]"})]}),e.jsx("h2",{className:"font-bricolage-grotesque font-medium text-[32px] leading-[32px] sm:text-[52px] sm:leading-[52px] md:text-[44px] md:leading-[44px] lg:text-[64px] lg:leading-[64px] xl:text-[96px] xl:leading-[110%] text-[var(--color-content-inverse-primary)]",children:i})]}),e.jsx("p",{className:"font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]",children:x})]}),e.jsxs("div",{className:"flex justify-start",children:[e.jsx("div",{className:"block md:hidden",children:e.jsx(s,{variant:"primary",size:"small",children:a})}),e.jsx("div",{className:"hidden md:block xl:hidden",children:e.jsx(s,{variant:"primary",size:"large",className:r,children:a})}),e.jsx("div",{className:"hidden xl:block",children:e.jsx(s,{variant:"primary",size:"xlarge",children:a})})]})]});n.__docgenInfo={description:"",methods:[],displayName:"ContentLockup",props:{buttonClassName:{defaultValue:{value:'""',computed:!1},required:!1}}};export{n as C};
|
||||
@@ -0,0 +1,62 @@
|
||||
import{C as s}from"./ContentLockup-DbWiPA4N.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Button-Z4hbXct5.js";const p={title:"Components/ContentLockup",component:s,parameters:{layout:"centered",docs:{description:{component:"A content lockup component that groups title, subtitle, description, and CTA button. Features responsive typography and spacing that adapts across breakpoints. Used within the HeroBanner component."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"},buttonClassName:{control:{type:"text"},description:"Additional CSS classes to apply to the large button (md/lg breakpoints)"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default content lockup with standard Community Rule messaging."}}}},e={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with longer description text to test text wrapping."}}}},o={args:{title:"Simple",subtitle:"solution",description:"Easy community decision making.",ctaText:"Try it",ctaHref:"#"},parameters:{docs:{description:{story:"Content lockup with minimal content to test compact layouts."}}}},n={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#",buttonClassName:"shrink-0 whitespace-nowrap min-w-[280px]"},parameters:{docs:{description:{story:"Content lockup with custom button styling applied to the large button (md/lg breakpoints)."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default content lockup with standard Community Rule messaging."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with longer description text to test text wrapping."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...e.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Simple",
|
||||
subtitle: "solution",
|
||||
description: "Easy community decision making.",
|
||||
ctaText: "Try it",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with minimal content to test compact layouts."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#",
|
||||
buttonClassName: "shrink-0 whitespace-nowrap min-w-[280px]"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Content lockup with custom button styling applied to the large button (md/lg breakpoints)."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const u=["Default","LongDescription","ShortContent","CustomButtonStyling"];export{n as CustomButtonStyling,t as Default,e as LongDescription,o as ShortContent,u as __namedExportsOrder,p as default};
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,45 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as o}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";function n(){return e.jsx("div",{className:"flex flex-col items-center self-stretch",children:e.jsx("div",{className:"flex items-start self-stretch h-px w-full bg-[var(--border-color-default-secondary)]"})})}n.__docgenInfo={description:"",methods:[],displayName:"Separator"};function r(){const a={"@context":"https://schema.org","@type":"Organization",name:"Media Economies Design Lab",email:"medlab@colorado.edu",url:"https://communityrule.com",sameAs:["https://bsky.app/profile/medlabboulder","https://gitlab.com/medlabboulder"]};return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(a)}}),e.jsx("footer",{className:"bg-[var(--color-surface-default-primary)] w-full",children:e.jsxs("div",{className:"flex flex-col items-start mx-auto px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-040)] gap-[var(--spacing-measures-spacing-040)] sm:px-[var(--spacing-measures-spacing-032)] sm:py-[var(--spacing-measures-spacing-024)] sm:gap-[var(--spacing-measures-spacing-024)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-096,96px)] lg:gap-[var(--spacing-measures-spacing-060,60px)]",children:[e.jsx("div",{className:"block sm:hidden",children:e.jsx(o,{})}),e.jsx("div",{className:"hidden sm:block lg:hidden",children:e.jsx(o,{size:"footer"})}),e.jsx("div",{className:"hidden lg:block",children:e.jsx(o,{size:"footerLg"})}),e.jsxs("div",{className:"flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0",children:[e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1",children:[e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",children:[e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"Media Economies Design Lab"}),e.jsx("a",{href:"mailto:medlab@colorado.edu",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"medlab@colorado.edu"})]}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",children:[e.jsxs("a",{href:"#",className:"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group","aria-label":"Follow us on Bluesky",children:[e.jsx("img",{src:"assets/Bluesky_Logo.svg",alt:"Bluesky",width:24,height:22,className:"flex-shrink-0 group-hover:scale-110 transition-transform"}),e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"medlabboulder"})]}),e.jsxs("a",{href:"#",className:"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group","aria-label":"Follow us on GitLab",children:[e.jsx("img",{src:"assets/GitLab_Icon.png",alt:"GitLab",width:22,height:22,className:"flex-shrink-0 grayscale group-hover:scale-110 transition-transform"}),e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"medlabboulder"})]})]})]}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end",children:[e.jsx("a",{href:"#",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Use cases"}),e.jsx("a",{href:"#",className:"text-[var(--color-content-default-primary)] font-['Line truncated
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the footer looks in a realistic page context.
|
||||
The footer maintains its responsive behavior while providing
|
||||
navigation and branding information.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the footer integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The footer integrated into a full page layout to show how it works in context."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{s as Default,t as InPageContext,f as __namedExportsOrder,d as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as v}from"./Logo-DM7O8ATg.js";import{M as t}from"./MenuBar-anMCqtJv.js";import{M as d}from"./MenuBarItem-Dp8NM2fx.js";import{B as j}from"./Button-Z4hbXct5.js";import{A as b}from"./AvatarContainer-Bt0G0TWZ.js";import{A as f}from"./Avatar-C4Vb3oYl.js";function N({onToggle:c}){const m={"@context":"https://schema.org","@type":"WebSite",name:"CommunityRule",url:"https://communityrule.com",potentialAction:{"@type":"SearchAction",target:"https://communityrule.com/search?q={search_term_string}","query-input":"required name=search_term_string"}},o=[{href:"#",text:"Use cases",extraPadding:!0},{href:"#",text:"Learn"},{href:"#",text:"About"}],x=[{src:"/assets/Avatar_1.png",alt:"Avatar 1"},{src:"/assets/Avatar_2.png",alt:"Avatar 2"},{src:"/assets/Avatar_3.png",alt:"Avatar 3"}],h=[{breakpoint:"block sm:hidden",size:"header",showText:!1},{breakpoint:"hidden sm:block md:hidden",size:"header",showText:!0},{breakpoint:"hidden md:block lg:hidden",size:"headerMd",showText:!0},{breakpoint:"hidden lg:block xl:hidden",size:"headerLg",showText:!0},{breakpoint:"hidden xl:block",size:"headerXl",showText:!0}],i=a=>o.map((s,r)=>e.jsx(d,{href:s.href,size:s.extraPadding&&a==="xsmall"?"xsmallUseCases":a,onClick:c,ariaLabel:`Navigate to ${s.text} page`,children:s.text},r)),g=(a,s)=>e.jsx(b,{size:a,children:x.map((r,u)=>e.jsx(f,{src:r.src,alt:r.alt,size:s},u))}),l=a=>e.jsx(d,{href:"#",size:a,ariaLabel:"Log in to your account",children:"Log in"}),n=(a,s,r)=>e.jsxs(j,{size:a,ariaLabel:"Create a new rule with avatar decoration",children:[g(s,r),e.jsx("span",{children:"Create rule"})]}),p=(a,s)=>e.jsx(v,{size:a,showText:s});return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(m)}}),e.jsx("header",{className:"bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]",role:"banner","aria-label":"Main navigation header",children:e.jsxs("nav",{className:"flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]",role:"navigation","aria-label":"Main navigation",children:[e.jsx("div",{className:"flex items-center",children:h.map((a,s)=>e.jsx("div",{className:a.breakpoint,children:p(a.size,a.showText)},s))}),e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"block sm:hidden"}),e.jsx("div",{className:"hidden sm:block md:hidden",children:e.jsxs(t,{size:"default",children:[i("xsmall"),l("xsmall")]})}),e.jsx("div",{className:"hidden md:block lg:hidden",children:e.jsx(t,{size:"default",children:i("xsmall")})}),e.jsx("div",{className:"hidden lg:block xl:hidden",children:e.jsx(t,{size:"large",children:i("large")})}),e.jsx("div",{className:"hidden xl:block",children:e.jsx(t,{size:"large",children:i("xlarge")})})]}),e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"block sm:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-scale-001)]",children:[i("xsmall"),l("xsmall"),n("xsmall","small","small")]})}),e.jsx("div",{className:"hidden sm:block md:hidden",children:e.jsx("div",{className:"flex items-center gap-[var(--spacing-scale-004)]",children:n("xsmall","small","small")})}),e.jsx("div",{className:"hidden md:block lg:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-010)]",children:[l("xsmall"),n("xsmall","medium","medium")]})}),e.jsx("div",{className:"hidden lg:block xl:hidden",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-004)]",children:[l("large"),n("large","xlarge","xlarge")]})}),e.jsx("div",{className:"hidden xl:block",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-measures-spacing-004)]",children:[l("xlarge"),n("xlarge","xlarge","xlarge")]})})]})]})})]})}N.__docgenInfo={description:"",methods:[],displayName:"Header"};export{N as H};
|
||||
@@ -0,0 +1,45 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./Header-Bz-bT1Sq.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Logo-DM7O8ATg.js";import"./MenuBar-anMCqtJv.js";import"./MenuBarItem-Dp8NM2fx.js";import"./Button-Z4hbXct5.js";import"./AvatarContainer-Bt0G0TWZ.js";import"./Avatar-C4Vb3oYl.js";const x={title:"Components/Header",component:o,parameters:{layout:"fullscreen",docs:{description:{component:"The main navigation header with responsive behavior across different breakpoints."}}},argTypes:{onToggle:{action:"toggled"}},tags:["autodocs"]},t={args:{},parameters:{docs:{description:{story:"Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."}}}},a={args:{},render:()=>e.jsxs("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)]",children:[e.jsx(o,{}),e.jsx("main",{className:"p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h1",{className:"text-2xl font-bold text-white mb-4",children:"Example Page Content"}),e.jsx("p",{className:"text-white mb-4",children:"This demonstrates how the header looks in a realistic page context. The header maintains its responsive behavior while providing navigation for the page content."}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[1,2,3,4,5,6].map(s=>e.jsxs("div",{className:"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",children:[e.jsxs("h3",{className:"text-white font-semibold mb-2",children:["Content Block ",s]}),e.jsx("p",{className:"text-[var(--color-content-default-secondary)] text-sm",children:"This is example content to show how the header integrates with page content."})]},s))})]})})]}),parameters:{docs:{description:{story:"The header integrated into a full page layout to show how it works in context."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to change the iframe width and see how the header adapts to different screen sizes. The header shows different layouts for mobile, tablet, and desktop breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
|
||||
<Header />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-4">
|
||||
Example Page Content
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
This demonstrates how the header looks in a realistic page context.
|
||||
The header maintains its responsive behavior while providing
|
||||
navigation for the page content.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
|
||||
<h3 className="text-white font-semibold mb-2">
|
||||
Content Block {i}
|
||||
</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)] text-sm">
|
||||
This is example content to show how the header integrates with
|
||||
page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The header integrated into a full page layout to show how it works in context."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{t as Default,a as InPageContext,f as __namedExportsOrder,x as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as s}from"./jsx-runtime-C_nHp4yK.js";function n({children:a,className:e="",stretch:l=!1,...p}){const r=l?"flex-1 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)]":"";return s.jsxs("div",{className:`HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[32px] sm:rounded-t-[32px] md:rounded-t-[32px] lg:rounded-t-[32px] xl:rounded-t-[32px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] xl:h-[64px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] xl:pl-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] ${r} ${e}`,...p,children:[a,s.jsx("img",{src:"assets/Union_xsm.svg",alt:"Union",className:"absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"}),s.jsx("img",{src:"assets/Union_sm_md_lg.svg",alt:"Union",className:"absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"}),s.jsx("img",{src:"assets/Union_xlg.svg",alt:"Union",className:"absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"})]})}n.__docgenInfo={description:"",methods:[],displayName:"HeaderTab",props:{className:{defaultValue:{value:'""',computed:!1},required:!1},stretch:{defaultValue:{value:"false",computed:!1},required:!1}}};export{n as H};
|
||||
@@ -0,0 +1,8 @@
|
||||
import{j as t}from"./jsx-runtime-C_nHp4yK.js";import{H as r}from"./HeaderTab-D9jUrYUx.js";import{L as s}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/HeaderTab",component:r,parameters:{layout:"centered",docs:{description:{component:"A header tab container with decorative Union images and responsive behavior. Used to wrap content in the header with consistent styling and responsive breakpoint transitions."}}},argTypes:{stretch:{control:{type:"boolean"},description:"Whether the tab should stretch to fill available space"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},e={args:{stretch:!1},render:a=>t.jsx(r,{...a,children:t.jsx(s,{size:"homeHeaderMd"})})};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
stretch: false
|
||||
},
|
||||
render: args => <HeaderTab {...args}>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</HeaderTab>
|
||||
}`,...e.parameters?.docs?.source}}};const m=["Default"];export{e as Default,m as __namedExportsOrder,p as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as a}from"./jsx-runtime-C_nHp4yK.js";import{C as t}from"./ContentLockup-DbWiPA4N.js";import{H as p}from"./HeroDecor-Csfoi-N_.js";const c=({title:e,subtitle:s,description:r,ctaText:l,ctaHref:n})=>a.jsx("section",{className:"bg-transparent px-[var(--spacing-scale-008)] sm:px-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] lg:px-[var(--spacing-scale-024)] xl:px-[var(--spacing-scale-048)]",children:a.jsx("div",{className:"flex flex-col gap-[var(--spacing-scale-010)]",children:a.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-[var(--spacing-scale-012)] sm:p-[var(--spacing-scale-016)] md:p-[var(--spacing-scale-064)] lg:py-[var(--spacing-scale-096)] lg:px-[var(--spacing-scale-064)] rounded-tl-none rounded-tr-[16px] rounded-br-[16px] rounded-bl-[16px] flex flex-col gap-[var(--spacing-scale-024)] sm:gap-[var(--spacing-scale-024)] md:flex-row md:gap-[var(--spacing-scale-048)] relative overflow-hidden",children:[a.jsx(p,{className:"pointer-events-none absolute z-0 left-0 top-0 translate-x-[-72px] translate-y-[26px] sm:translate-x-[-78px] sm:translate-y-[24px] md:translate-x-[-86px] md:translate-y-[16px] lg:translate-x-[-88px] lg:translate-y-[16px] w-[1540px] h-[645px] scale-[1.04]"}),a.jsx("div",{className:"md:flex-1",children:a.jsx(t,{title:e,subtitle:s,description:r,ctaText:l,ctaHref:n,buttonClassName:"shrink-0 whitespace-nowrap min-w-[280px]"})}),a.jsx("div",{className:"w-full md:flex-1 rounded-[8px] overflow-hidden relative z-10 flex items-center justify-center",children:a.jsx("img",{src:"assets/HeroImage.png",alt:"Hero illustration",className:"w-full h-auto"})})]})})});c.__docgenInfo={description:"",methods:[],displayName:"HeroBanner"};export{c as H};
|
||||
@@ -0,0 +1,16 @@
|
||||
import{H as e}from"./HeroBanner-D2qHR4vw.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./ContentLockup-DbWiPA4N.js";import"./Button-Z4hbXct5.js";import"./HeroDecor-Csfoi-N_.js";const p={title:"Components/HeroBanner",component:e,parameters:{layout:"fullscreen",docs:{description:{component:"A responsive hero banner component that showcases the Community Rule branding and messaging. Adapts across multiple breakpoints with proper spacing, typography, and interactive elements. Includes background decorations and product demo integration."}}},argTypes:{title:{control:{type:"text"},description:"The main title text"},subtitle:{control:{type:"text"},description:"The subtitle text"},description:{control:{type:"text"},description:"The description text"},ctaText:{control:{type:"text"},description:"The call-to-action button text"},ctaHref:{control:{type:"text"},description:"The call-to-action button link"}},tags:["autodocs"]},t={args:{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"},parameters:{docs:{description:{story:"Default hero banner with standard Community Rule messaging and branding."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Collaborate",
|
||||
subtitle: "with clarity",
|
||||
description: "Help your community make important decisions in a way that reflects its unique values.",
|
||||
ctaText: "Learn how Community Rule works",
|
||||
ctaHref: "#"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default hero banner with standard Community Rule messaging and branding."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const l=["Default"];export{t as Default,l as __namedExportsOrder,p as default};
|
||||
@@ -0,0 +1,141 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as t}from"./HeroBanner-D2qHR4vw.js";import{C as r}from"./ContentLockup-DbWiPA4N.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./Button-Z4hbXct5.js";const y={title:"Systems/HeroBanner System",parameters:{layout:"fullscreen",docs:{description:{component:"Complete HeroBanner system showcasing all nested components working together. This demonstrates the full responsive behavior and component integration."}}},tags:["autodocs"]},n={render:()=>e.jsx("div",{className:"min-h-screen bg-gray-50",children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})}),parameters:{docs:{description:{story:"Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints."}}}},a={render:()=>e.jsx("div",{className:"space-y-12 p-8",children:e.jsxs("div",{children:[e.jsx("h2",{className:"text-2xl font-bold mb-6",children:"HeroBanner Components"}),e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"1. ContentLockup Component"}),e.jsx("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg",children:e.jsx(r,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"2. HeroDecor Component"}),e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64",children:[e.jsx(o,{className:"w-full h-full"}),e.jsx("div",{className:"relative z-10 text-white mt-4",children:e.jsx("p",{children:"Decoration appears behind content"})})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-4",children:"3. Complete HeroBanner"}),e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})]})]})]})}),parameters:{docs:{description:{story:"Breakdown of individual components that make up the HeroBanner system, showing how they work together."}}}},s={render:()=>e.jsxs("div",{className:"space-y-8 p-8",children:[e.jsx("h2",{className:"text-2xl font-bold",children:"Responsive Breakpoints"}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"XSmall (≤429px)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"400px"},children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Small (430px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"600px"},children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Medium (768px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"900px"},children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"Large (1024px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"1200px"},children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-lg font-semibold mb-2",children:"XLarge (1440px+)"}),e.jsx("div",{className:"border-2 border-gray-300 rounded-lg overflow-hidden",style:{width:"1600px"},children:e.jsx(t,{title:"Collaborate",subtitle:"with clarity",description:"Help your community make important decisions in a way that reflects its unique values.",ctaText:"Learn how Community Rule works",ctaHref:"#"})})]})]})]}),parameters:{docs:{description:{story:"HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulLine truncated
|
||||
render: () => <div className="min-h-screen bg-gray-50">
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete HeroBanner system with all components integrated. Resize your browser to see responsive behavior across all breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="space-y-12 p-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-6">HeroBanner Components</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
1. ContentLockup Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg">
|
||||
<ContentLockup title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
2. HeroDecor Component
|
||||
</h3>
|
||||
<div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden h-64">
|
||||
<HeroDecor className="w-full h-full" />
|
||||
<div className="relative z-10 text-white mt-4">
|
||||
<p>Decoration appears behind content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-4">
|
||||
3. Complete HeroBanner
|
||||
</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Breakdown of individual components that make up the HeroBanner system, showing how they work together."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Responsive Breakpoints</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XSmall (≤429px)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "400px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Small (430px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "600px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Medium (768px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "900px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Large (1024px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "1200px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">XLarge (1440px+)</h3>
|
||||
<div className="border-2 border-gray-300 rounded-lg overflow-hidden" style={{
|
||||
width: "1600px"
|
||||
}}>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "HeroBanner system demonstrating responsive behavior at each breakpoint. Each container simulates a different screen size."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="space-y-8 p-8">
|
||||
<h2 className="text-2xl font-bold">Content Variations</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Standard Content</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Alternative Content</h3>
|
||||
<HeroBanner title="Build" subtitle="better communities" description="Create operating manuals that help your community thrive and make decisions together." ctaText="Get started today" ctaHref="/signup" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold mb-2">Long Description</h3>
|
||||
<HeroBanner title="Collaborate" subtitle="with clarity" description="Help your community make important decisions in a way that reflects its unique values. Our platform provides the tools and frameworks needed to build successful, sustainable communities that can navigate complex challenges together." ctaText="Learn how Community Rule works" ctaHref="#" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "HeroBanner system with different content variations to demonstrate flexibility and content handling."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};const v=["CompleteSystem","ComponentBreakdown","ResponsiveBreakpoints","ContentVariations"];export{n as CompleteSystem,a as ComponentBreakdown,i as ContentVariations,s as ResponsiveBreakpoints,v as __namedExportsOrder,y as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const s=({className:C=""})=>e.jsx("svg",{className:`text-[#FDFAA8] opacity-50 ${C}`,viewBox:"0 0 1540 645","aria-hidden":"true",overflow:"visible",preserveAspectRatio:"xMidYMid slice",children:e.jsxs("g",{fill:"currentColor",children:[e.jsx("defs",{children:e.jsxs("filter",{id:"grain",filterUnits:"objectBoundingBox",x:"0",y:"0",width:"1",height:"1",colorInterpolationFilters:"sRGB",children:[e.jsx("feTurbulence",{type:"fractalNoise",baseFrequency:"0.8",numOctaves:"2",seed:"3",stitchTiles:"stitch",result:"noise"}),e.jsx("feColorMatrix",{in:"noise",result:"softNoise",type:"matrix",values:" 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"}),e.jsx("feComposite",{in:"softNoise",in2:"SourceAlpha",operator:"in",result:"maskedNoise"}),e.jsx("feBlend",{in:"SourceGraphic",in2:"maskedNoise",mode:"multiply"})]})}),e.jsxs("g",{fill:"currentColor",filter:"url(#grain)",children:[e.jsx("path",{d:"M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z"}),e.jsx("path",{d:"M1441.54 226.758C1495.92 226.758 1540 320.385 1540 435.879C1540 551.373 1495.92 645 1441.54 645C1387.16 645 1343.08 551.373 1343.08 435.879C1343.08 320.385 1387.16 226.758 1441.54 226.758Z"}),e.jsx("path",{d:"M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z"}),e.jsx("path",{d:"M674.066 209.121C728.443 209.121 772.525 302.748 772.525 418.242C772.525 533.737 728.443 627.363 674.066 627.363C619.688 627.363 575.607 533.737 575.607 418.242C575.607 302.748 619.688 209.121 674.066 209.121Z"}),e.jsx("path",{d:"M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z"}),e.jsx("path",{d:"M290.328 0C344.705 0 388.787 93.6267 388.787 209.121C388.787 211.519 388.765 213.907 388.728 216.285C401.725 133.082 438.661 73.0664 482.197 73.0664C536.574 73.0664 580.656 166.693 580.656 282.188C580.656 397.682 536.574 491.309 482.197 491.309C427.819 491.309 383.738 397.682 383.738 282.188C383.738 279.79 383.758 277.401 383.796 275.023C370.798 358.226 333.864 418.242 290.328 418.242C246.792 418.242 209.856 358.226 196.859 275.023C196.897 277.401 196.918 279.79 196.918 282.188C196.918 397.682 152.836 491.309 98.459 491.309C44.0816 491.309 0 397.682 0 282.188C0 166.693 44.0816 73.0664 98.459 73.0664C141.995 73.0664 178.929 133.082 191.927 216.285C191.889 213.907 191.869 211.519 191.869 209.121C191.869 93.6267 235.95 0 290.328 0Z"}),e.jsx("path",{d:"M1057.8 0C1112.18 0 1156.26 93.6267 1156.26 209.121C1156.26 211.519 1156.24 213.907 1156.2 216.285C1169.2 133.082 1206.14 73.0664 1249.67 73.0664C1304.05 73.0664 1348.13 166.693 1348.13 282.188C1348.13 397.682 1304.05 491.309 1249.67 491.309C1195.29 491.309 1151.21 397.682 1151.21 282.188C1151.21 279.79 1151.23 277.401 1151.27 275.023C1138.27 358.226 1101.34 418.242 1057.8 418.242C1014.27 418.242 977.332 358.226 964.334 275.023C964.372 277.401 964.393 279.79 964.393 282.188C964.393 397.682 920.312 491.309 865.934 491.309C811.557 491.309 767.475 397.682 767.475 282.188C767.475 166.693 811.557 73.0664 865.934 73.0664C909.47 73.0664 946.405 133.082 959.402 216.285C959.365 213.907 959.344 211.519 959.344 209.121C959.344 93.6267 1003.43 0 1057.8 0Z"})]})]})});s.__docgenInfo={description:"",methods:[],displayName:"HeroDecor",props:{className:{defaultValue:{value:'""',computed:!1},required:!1}}};export{s as H};
|
||||
@@ -0,0 +1,30 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{H as o}from"./HeroDecor-Csfoi-N_.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/HeroDecor",component:o,parameters:{layout:"centered",docs:{description:{component:"A decorative SVG component that provides background visual elements for the HeroBanner. Features grain effects and organic shapes that enhance the visual appeal without interfering with content readability."}}},argTypes:{className:{control:{type:"text"},description:"Additional CSS classes for positioning and styling"}},tags:["autodocs"]},r={args:{className:"w-[400px] h-[200px]"},parameters:{docs:{description:{story:"Default hero decoration with standard sizing and positioning."}}}},t={args:{className:"w-[600px] h-[300px]"},render:a=>e.jsxs("div",{className:"bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden",children:[e.jsx(o,{...a}),e.jsxs("div",{className:"relative z-10 text-white mt-4",children:[e.jsx("h3",{children:"Content Overlay"}),e.jsx("p",{children:"This demonstrates how the decoration appears behind content."})]})]}),parameters:{docs:{description:{story:"Hero decoration with background color to show how it integrates with content."}}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
className: "w-[400px] h-[200px]"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Default hero decoration with standard sizing and positioning."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
className: "w-[600px] h-[300px]"
|
||||
},
|
||||
render: args => <div className="bg-[var(--color-surface-default-brand-primary)] p-8 rounded-lg relative overflow-hidden">
|
||||
<HeroDecor {...args} />
|
||||
<div className="relative z-10 text-white mt-4">
|
||||
<h3>Content Overlay</h3>
|
||||
<p>This demonstrates how the decoration appears behind content.</p>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Hero decoration with background color to show how it integrates with content."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const p=["Default","WithBackground"];export{r as Default,t as WithBackground,p as __namedExportsOrder,d as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -0,0 +1,43 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{r as w}from"./iframe-D_aMTKb2.js";import{L as N}from"./Logo-DM7O8ATg.js";import{M as l}from"./MenuBar-anMCqtJv.js";import{M as p}from"./MenuBarItem-Dp8NM2fx.js";import{B as y}from"./Button-Z4hbXct5.js";import{A as k}from"./AvatarContainer-Bt0G0TWZ.js";import{A as H}from"./Avatar-C4Vb3oYl.js";import{H as T}from"./HeaderTab-D9jUrYUx.js";import{H as A}from"./Header-Bz-bT1Sq.js";import"./preload-helper-DIZFD4sK.js";function m(){const[t,h]=w.useState(!1),g={"@context":"https://schema.org","@type":"WebSite",name:"CommunityRule",url:"https://communityrule.com",description:"Build operating manuals for successful communities",potentialAction:{"@type":"SearchAction",target:"https://communityrule.com/search?q={search_term_string}","query-input":"required name=search_term_string"}},x=[{href:"#",text:"Use cases",extraPadding:!0},{href:"#",text:"Learn"},{href:"#",text:"About"}],u=[{src:"/assets/Avatar_1.png",alt:"Avatar 1"},{src:"/assets/Avatar_2.png",alt:"Avatar 2"},{src:"/assets/Avatar_3.png",alt:"Avatar 3"}],f=[{breakpoint:"block sm:hidden",size:"homeHeaderXsmall",showText:!1},{breakpoint:"hidden sm:block md:hidden",size:"homeHeaderSm",showText:!0},{breakpoint:"hidden md:block lg:hidden",size:"homeHeaderMd",showText:!0},{breakpoint:"hidden lg:block xl:hidden",size:"homeHeaderLg",showText:!0},{breakpoint:"hidden xl:block",size:"homeHeaderXl",showText:!0}],n=a=>x.map((r,s)=>e.jsx(p,{href:r.href,size:r.extraPadding&&(a==="xsmall"||a==="default"||a==="home"||a==="homeMd"||a==="large"||a==="homeXlarge")?a==="home"||a==="homeMd"?"homeMd":a==="large"?"large":a==="homeXlarge"?"homeXlarge":"xsmallUseCases":a,variant:a==="xsmall"||a==="default"||a==="home"||a==="homeMd"||a==="large"||a==="homeXlarge"?"home":"default",onClick:()=>h(!t),ariaLabel:`Navigate to ${r.text} page`,children:r.text},s)),v=(a,r)=>e.jsx(k,{size:a,children:u.map((s,j)=>e.jsx(H,{src:s.src,alt:s.alt,size:r},j))}),o=a=>e.jsx(p,{href:"#",size:a,variant:a==="xsmall"||a==="default"?"home":"default",ariaLabel:"Log in to your account",children:"Log in"}),d=(a,r,s)=>e.jsxs(y,{size:a,variant:"secondary",ariaLabel:"Create a new rule with avatar decoration",children:[v(r,s),e.jsx("span",{children:"Create rule"})]}),b=(a,r)=>e.jsx(N,{size:a,showText:r});return t?e.jsx(A,{onToggle:()=>h(!1)}):e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(g)}}),e.jsx("header",{className:"w-full bg-transparent overflow-hidden",role:"banner","aria-label":"Home page navigation header",children:e.jsxs("nav",{className:"relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]",role:"navigation","aria-label":"Main navigation",children:[e.jsxs(T,{className:"flex items-center self-end",stretch:!0,children:[e.jsx("div",{children:f.map((a,r)=>e.jsx("div",{className:a.breakpoint,children:b(a.size,a.showText)},r))}),e.jsx("div",{className:"block sm:hidden -me-[2px]",children:e.jsxs(l,{size:"default",children:[n("xsmall"),o("xsmall")]})})]}),e.jsxs("div",{className:"absolute left-1/2 transform -translate-x-1/2 hidden sm:block",children:[e.jsx("div",{className:"hidden sm:block md:hidden",children:e.jsxs(l,{size:"default",children:[n("xsmall"),o("xsmall")]})}),e.jsx("div",{className:"hidden md:block lg:hidden",children:e.jsx(l,{size:"medium",children:n("homeMd")})}),e.jsx("div",{className:"hidden lg:block xl:hidden",children:e.jsx(l,{size:"large",children:n("large")})}),e.jsx("div",{className:"hidden xl:block",children:e.jsx(l,{size:"large",children:n("homeXlarge")})})]}),e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:"block md:hidden",children:d("xsmall","small","small")}),e.jsx("div",{className:"hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-scale-010)]",children:[o("homeMd"),d("small","medium","medium")]})}),e.jsx("div",{className:"hidden lg:flex xl:hidden items-center",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-scale-004)]",children:[o("large"),d("large","large","large")]})}),e.jsx("div",{className:"hidden xl:flex items-center",children:e.jsxs("div",{className:"flex items-center gap-[var(--spacing-scale-004)]",children:[o("homeXlarge"),d("xlarge","xlarge","xlarge")]})})]})]})})]})}m.__docgenInfo={description:"",methods:[],displayName:"HomeHeader"};const U={title:"Components/HomeHeader",comLine truncated
|
||||
args: {},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Use the Viewport toolbar to see how the home header adapts to different screen sizes. The header has a transparent background and uses HeaderTab for the left section."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)]">
|
||||
<HomeHeader />
|
||||
<main className="p-8">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl font-bold text-white mb-4">
|
||||
Welcome to CommunityRule
|
||||
</h1>
|
||||
<p className="text-xl text-[var(--color-content-default-secondary)] mb-8">
|
||||
This demonstrates how the home header looks in a realistic home page
|
||||
context. The header maintains its transparent background and
|
||||
responsive behavior.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg border border-[var(--border-color-default-tertiary)]">
|
||||
<h3 className="text-white font-semibold mb-3">Feature {i}</h3>
|
||||
<p className="text-[var(--color-content-default-secondary)]">
|
||||
This is example content to show how the home header integrates
|
||||
with home page content.
|
||||
</p>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "The home header integrated into a full home page layout with gradient background to show the transparent header effect."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...c.parameters?.docs?.source}}};const q=["Default","InHomePageContext"];export{i as Default,c as InHomePageContext,q as __namedExportsOrder,U as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as i}from"./jsx-runtime-C_nHp4yK.js";function p({size:e="default",showText:o=!0}){const a={default:{containerHeight:"h-[41px]",gap:"gap-[8.28px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},homeHeaderXsmall:{containerHeight:"h-[14.11px]",gap:"gap-[4.21px]",textSize:"text-[11.57px]",lineHeight:"leading-[14.24px]",iconSize:"w-[14.11px] h-[14.11px]"},homeHeaderSm:{containerHeight:"h-[21.06px]",gap:"gap-[3.19px]",textSize:"text-[11.69px]",lineHeight:"leading-[14.39px]",iconSize:"w-[14.39px] h-[14.39px]"},homeHeaderMd:{containerHeight:"h-[32.24px]",gap:"gap-[4.89px]",textSize:"text-[17.89px]",lineHeight:"leading-[22.02px]",iconSize:"w-[22.02px] h-[22.02px]"},homeHeaderLg:{containerHeight:"h-[28px]",gap:"gap-[6.55px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},homeHeaderXl:{containerHeight:"h-[36px]",gap:"gap-[8.64px]",textSize:"text-[29.01px]",lineHeight:"leading-[35.7px]",iconSize:"w-[35.7px] h-[35.7px]"},header:{containerHeight:"h-[20.85px]",gap:"gap-[4.21px]",textSize:"text-[11.57px]",lineHeight:"leading-[14.24px]",iconSize:"w-[14.24px] h-[14.24px]"},headerMd:{containerHeight:"h-[17.91px]",gap:"gap-[6.51px]",textSize:"text-[17.89px]",lineHeight:"leading-[22.02px]",iconSize:"w-[22.02px] h-[22.02px]"},headerLg:{containerHeight:"h-[28px]",gap:"gap-[6.55px]",textSize:"text-[21.97px]",lineHeight:"leading-[27.05px]",iconSize:"w-[27.05px] h-[27.05px]"},headerXl:{containerHeight:"h-[34px]",gap:"gap-[8.19px]",textSize:"text-[27.47px]",lineHeight:"leading-[33.81px]",iconSize:"w-[33.81px] h-[33.81px]"},footer:{containerHeight:"h-[calc(40px*1.37)]",gap:"gap-[calc(8px*1.37)]",textSize:"text-[calc(21.97px*1.37)]",lineHeight:"leading-[calc(27.05px*1.37)]",iconSize:"w-[calc(27.05px*1.37)] h-[calc(27.05px*1.37)]"},footerLg:{containerHeight:"h-[calc(40px*2.05)]",gap:"gap-[calc(8px*2.05)]",textSize:"text-[calc(21.97px*2.05)]",lineHeight:"leading-[calc(27.05px*2.05)]",iconSize:"w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]"}},t=e==="homeHeaderXsmall"?a.homeHeaderXsmall:e==="homeHeaderSm"?a.homeHeaderSm:e==="homeHeaderMd"?a.homeHeaderMd:e==="homeHeaderLg"?a.homeHeaderLg:e==="homeHeaderXl"?a.homeHeaderXl:e==="header"?a.header:e==="headerMd"?a.headerMd:e==="headerLg"?a.headerLg:e==="headerXl"?a.headerXl:e==="footer"?a.footer:e==="footerLg"?a.footerLg:a.default;return i.jsxs("div",{className:`flex items-center ${t.containerHeight} ${o?t.gap:""} transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`,role:"banner","aria-label":"CommunityRule Logo",children:[o&&i.jsx("div",{className:`font-['Bricolage_Grotesque'] ${e==="homeHeaderXsmall"||e==="homeHeaderSm"||e==="homeHeaderMd"||e==="homeHeaderLg"||e==="homeHeaderXl"?"text-[var(--color-content-inverse-primary)]":"text-[var(--color-content-default-primary)]"} ${t.textSize} ${t.lineHeight} font-normal tracking-[0px] transition-colors duration-200`,"aria-label":"CommunityRule",children:"CommunityRule"}),i.jsx("img",{src:"assets/Logo.svg",alt:"CommunityRule Logo Icon",width:27.05,height:27.05,className:`flex-shrink-0 ${t.iconSize} transition-all duration-200 ${e==="homeHeaderXsmall"||e==="homeHeaderSm"||e==="homeHeaderMd"||e==="homeHeaderLg"||e==="homeHeaderXl"?"filter brightness-0":""}`,"aria-hidden":"true"})]})}p.__docgenInfo={description:"",methods:[],displayName:"Logo",props:{size:{defaultValue:{value:'"default"',computed:!1},required:!1},showText:{defaultValue:{value:"true",computed:!1},required:!1}}};export{p as L};
|
||||
@@ -0,0 +1,203 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as s}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const h={title:"Components/Logo",component:s,parameters:{layout:"centered",docs:{description:{component:"The CommunityRule logo component with multiple size variants for different contexts (header, footer, home header). Can display with or without text and adapts colors based on context."}}},argTypes:{size:{control:{type:"select"},options:["default","homeHeaderXsmall","homeHeaderSm","homeHeaderMd","homeHeaderLg","homeHeaderXl","header","headerMd","headerLg","headerXl","footer","footerLg"],description:"The size variant of the logo"},showText:{control:{type:"boolean"},description:"Whether to show the text portion of the logo"}},tags:["autodocs"]},t={args:{size:"default",showText:!0}},n={args:{showText:!0},render:a=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"default"}),e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"footer"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"headerMd"}),e.jsx(s,{...a,size:"headerLg"}),e.jsx(s,{...a,size:"headerXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Home Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"homeHeaderXsmall"}),e.jsx(s,{...a,size:"homeHeaderSm"}),e.jsx(s,{...a,size:"homeHeaderMd"}),e.jsx(s,{...a,size:"homeHeaderLg"}),e.jsx(s,{...a,size:"homeHeaderXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Footer Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"footer"}),e.jsx(s,{...a,size:"footerLg"})]})]})]}),parameters:{docs:{description:{story:"Different size variants available for the logo component across different contexts."}}}},r={args:{size:"default",showText:!1},render:a=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Default Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"default"}),e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"footer"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"header"}),e.jsx(s,{...a,size:"headerMd"}),e.jsx(s,{...a,size:"headerLg"}),e.jsx(s,{...a,size:"headerXl"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Icon Only - Home Header Sizes"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(s,{...a,size:"homeHeaderXsmall"}),e.jsx(s,{...a,size:"homeHeaderSm"}),e.jsx(s,{...a,size:"homeHeaderMd"}),e.jsx(s,{...a,size:"homeHeaderLg"}),e.jsx(s,{...a,size:"homeHeaderXl"})]})]})]}),parameters:{docs:{description:{story:"Logo variants with only the icon, no text. Useful for compact spaces."}}}},i={args:{},render:()=>e.jsx("div",{className:"min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h2",{className:"text-white font-semibold mb-6",children:"Home Header Context (White Text)"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"XSmall:"}),e.jsx(s,{size:"homeHeaderXsmall"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Small:"}),e.jsx(s,{size:"homeHeaderSm"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Medium:"}),e.jsx(s,{size:"homeHeaderMd"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"Large:"}),e.jsx(s,{size:"homeHeaderLg"})]}),e.jsxs("div",{className:"flex items-center space-x-4",children:[e.jsx("span",{className:"text-white text-sm w-24",children:"XLarge:"}),e.jsx(s,{size:"homeHeaderXl"})]})]})]})}),parameters:{docs:{description:{story:"Home header context showing white text variants. These are used on dark/transparent backgrounds."}}}},o={args:{},render:()=>e.jsx("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)] p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h2",{className:"text-white font-semibold mb-6",children:"Header Context (Dark Text)"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center space-x-4",Line truncated
|
||||
args: {
|
||||
size: "default",
|
||||
showText: true
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
showText: true
|
||||
},
|
||||
render: args => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Header Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Header Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Footer Sizes</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="footer" />
|
||||
<Logo {...args} size="footerLg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants available for the logo component across different contexts."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
size: "default",
|
||||
showText: false
|
||||
},
|
||||
render: args => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Default Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="default" />
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="footer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Header Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="header" />
|
||||
<Logo {...args} size="headerMd" />
|
||||
<Logo {...args} size="headerLg" />
|
||||
<Logo {...args} size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">
|
||||
Icon Only - Home Header Sizes
|
||||
</h3>
|
||||
<div className="space-x-4">
|
||||
<Logo {...args} size="homeHeaderXsmall" />
|
||||
<Logo {...args} size="homeHeaderSm" />
|
||||
<Logo {...args} size="homeHeaderMd" />
|
||||
<Logo {...args} size="homeHeaderLg" />
|
||||
<Logo {...args} size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Logo variants with only the icon, no text. Useful for compact spaces."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-gradient-to-b from-[var(--color-surface-default-primary)] to-[var(--color-surface-default-secondary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Home Header Context (White Text)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XSmall:</span>
|
||||
<Logo size="homeHeaderXsmall" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Small:</span>
|
||||
<Logo size="homeHeaderSm" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="homeHeaderMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="homeHeaderLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="homeHeaderXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Home header context showing white text variants. These are used on dark/transparent backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Header Context (Dark Text)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="header" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Medium:</span>
|
||||
<Logo size="headerMd" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="headerLg" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">XLarge:</span>
|
||||
<Logo size="headerXl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Header context showing dark text variants. These are used on light backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)] p-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-white font-semibold mb-6">
|
||||
Footer Context (Larger Sizes)
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Default:</span>
|
||||
<Logo size="footer" />
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-white text-sm w-24">Large:</span>
|
||||
<Logo size="footerLg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Footer context showing larger size variants for footer placement."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...d.parameters?.docs?.source}}};const p=["Default","Sizes","IconOnly","HomeHeaderContext","HeaderContext","FooterContext"];export{t as Default,d as FooterContext,o as HeaderContext,i as HomeHeaderContext,r as IconOnly,n as Sizes,p as __namedExportsOrder,h as default};
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M27.5948 13.9998L0.549194 0.477051L7.31736 13.9998L0.549194 27.5226L27.5948 13.9998ZM14.0855 11.1905C14.6377 11.1938 15.1766 11.3603 15.6343 11.6689C16.092 11.9776 16.4481 12.4146 16.6577 12.925C16.8673 13.4353 16.9211 13.9962 16.8123 14.5371C16.7036 15.0779 16.437 15.5746 16.0463 15.9644C15.6556 16.3543 15.1582 16.6199 14.6166 16.728C14.0751 16.836 13.5137 16.7816 13.0031 16.5715C12.4924 16.3615 12.0554 16.0053 11.747 15.5477C11.4386 15.09 11.2726 14.5515 11.27 13.9998C11.2682 13.6301 11.3398 13.2637 11.4807 12.9218C11.6216 12.58 11.829 12.2694 12.0908 12.0081C12.3527 11.7468 12.6638 11.54 13.0062 11.3997C13.3486 11.2594 13.7154 11.1882 14.0855 11.1905Z" fill="#FFFDD2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
@@ -0,0 +1 @@
|
||||
import{j as p}from"./jsx-runtime-C_nHp4yK.js";function r({children:a,className:e="",size:s="default",...l}){const c=`flex items-center ${{xsmall:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",default:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",medium:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",large:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]"}[s]} ${e}`;return p.jsx("nav",{className:c,role:"menubar","aria-label":"Main navigation menu",...l,children:a})}r.__docgenInfo={description:"",methods:[],displayName:"MenuBar",props:{className:{defaultValue:{value:'""',computed:!1},required:!1},size:{defaultValue:{value:'"default"',computed:!1},required:!1}}};export{r as M};
|
||||
@@ -0,0 +1,56 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as s}from"./MenuBar-anMCqtJv.js";import{M as n}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const d={title:"Components/MenuBar",component:s,parameters:{layout:"centered",docs:{description:{component:"A navigation menu bar container that groups MenuBarItem components together. Provides consistent spacing and layout for navigation menus with multiple size variants."}}},argTypes:{size:{control:{type:"select"},options:["xsmall","default","medium","large"],description:"The size of the menu bar and its children"},className:{control:{type:"text"},description:"Additional CSS classes"}},tags:["autodocs"]},a={args:{size:"default"},render:t=>e.jsxs(s,{...t,children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})},r={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"XSmall Size"}),e.jsxs(s,{size:"xsmall",children:[e.jsx(n,{size:"xsmall",children:"Home"}),e.jsx(n,{size:"xsmall",children:"About"}),e.jsx(n,{size:"xsmall",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Size"}),e.jsxs(s,{size:"default",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Medium Size"}),e.jsxs(s,{size:"medium",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Large Size"}),e.jsxs(s,{size:"large",children:[e.jsx(n,{size:"large",children:"Home"}),e.jsx(n,{size:"large",children:"About"}),e.jsx(n,{size:"large",children:"Contact"})]})]})]}),parameters:{docs:{description:{story:"Different size variants of the menu bar with consistent spacing and layout."}}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
size: "default"
|
||||
},
|
||||
render: args => <MenuBar {...args}>
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">XSmall Size</h3>
|
||||
<MenuBar size="xsmall">
|
||||
<MenuBarItem size="xsmall">Home</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">About</MenuBarItem>
|
||||
<MenuBarItem size="xsmall">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Size</h3>
|
||||
<MenuBar size="default">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Medium Size</h3>
|
||||
<MenuBar size="medium">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Large Size</h3>
|
||||
<MenuBar size="large">
|
||||
<MenuBarItem size="large">Home</MenuBarItem>
|
||||
<MenuBarItem size="large">About</MenuBarItem>
|
||||
<MenuBarItem size="large">Contact</MenuBarItem>
|
||||
</MenuBar>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different size variants of the menu bar with consistent spacing and layout."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const u=["Default","Sizes"];export{a as Default,r as Sizes,u as __namedExportsOrder,d as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as p}from"./jsx-runtime-C_nHp4yK.js";function U({href:v="#",children:o,variant:d="default",size:e="default",className:f="",disabled:a=!1,ariaLabel:l,...m}){const x={default:"bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100",home:"bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] hover:scale-[1.02] active:bg-transparent active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100"},g={xsmall:"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",xsmallUseCases:"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",default:"active:outline-1 active:outline-[var(--color-content-default-brand-primary)] focus:outline-1 focus:outline-[var(--color-content-default-brand-primary)]",homeMd:"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",homeUseCases:"active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-brand-primary)]",large:"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",largeUseCases:"active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-brand-primary)]",homeXlarge:"active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-brand-primary)]",xlarge:"active:outline-2 active:outline-[var(--color-content-default-brand-primary)] focus:outline-2 focus:outline-[var(--color-content-default-brand-primary)]"},y={xsmall:"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",xsmallUseCases:"active:outline-1 active:outline-[var(--color-content-default-primary)] focus:outline-1 focus:outline-[var(--color-content-default-primary)]",default:"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",homeMd:"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",homeUseCases:"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.5px] focus:outline-[var(--color-content-default-primary)]",largeUseCases:"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",large:"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)] focus:outline-[1.75px] focus:outline-[var(--color-content-default-primary)]",homeXlarge:"active:outline-[2px] active:outline-[var(--color-content-default-primary)] focus:outline-[2px] focus:outline-[var(--color-content-default-primary)]",xlarge:"active:outline-2 active:outline-[var(--color-content-default-primary)] focus:outline-2 focus:outline-[var(--color-content-default-primary)]"},b={default:"px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",xsmall:"px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",xsmallUseCases:"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",homeMd:"px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",homeUseCases:"px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",large:"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",largeUseCases:"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",homeXlarge:"px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",xlLine truncated
|
||||
@@ -0,0 +1,120 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{M as a}from"./MenuBarItem-Dp8NM2fx.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/MenuBarItem",component:a,parameters:{layout:"centered",docs:{description:{component:"A navigation menu item component with multiple variants, sizes, and states. Can render as a link or disabled span with full accessibility support. Includes focus states with keyboard navigation - use Tab key to test focus indicators."}}},argTypes:{variant:{control:{type:"select"},options:["default","home"],description:"The visual style variant of the menu item"},size:{control:{type:"select"},options:["xsmall","xsmallUseCases","homeMd","homeUseCases","large","largeUseCases","homeXlarge","xlarge"],description:"The size of the menu item"},disabled:{control:{type:"boolean"},description:"Whether the menu item is disabled"},href:{control:{type:"text"},description:"The link destination"},onClick:{action:"clicked"}},tags:["autodocs"]},n={args:{children:"Menu Item",size:"large"}},r={args:{children:"Menu Item",size:"large"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,variant:"default",children:"Default"}),e.jsx(a,{...s,variant:"home",children:"Home"})]})}),parameters:{docs:{description:{story:"Different visual variants of the menu item component."}}}},t={args:{children:"Menu Item",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,size:"xsmall",children:"XSmall"}),e.jsx(a,{...s,size:"large",children:"Large"}),e.jsx(a,{...s,size:"xlarge",children:"XLarge"})]})}),parameters:{docs:{description:{story:"Different sizes available for the menu item component."}}}},i={args:{children:"Menu Item",size:"large",variant:"default"},render:s=>e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{...s,children:"Normal"}),e.jsx(a,{...s,disabled:!0,children:"Disabled"})]})}),parameters:{docs:{description:{story:"Different states of the menu item component."}}}},l={args:{},render:()=>e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Default Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"xsmall",children:"XSmall"}),e.jsx(a,{size:"large",children:"Large"}),e.jsx(a,{size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Home Variant"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{variant:"home",size:"xsmall",children:"XSmall"}),e.jsx(a,{variant:"home",size:"large",children:"Large"}),e.jsx(a,{variant:"home",size:"xlarge",children:"XLarge"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-white font-semibold mb-3",children:"Disabled States"}),e.jsxs("div",{className:"space-x-4",children:[e.jsx(a,{size:"large",disabled:!0,children:"Default Disabled"}),e.jsx(a,{variant:"home",size:"large",disabled:!0,children:"Home Disabled"})]})]})]}),parameters:{docs:{description:{story:"Complete overview of all menu item variants, sizes, and states."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} variant="default">
|
||||
Default
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} variant="home">
|
||||
Home
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different visual variants of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args} size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem {...args} size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different sizes available for the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
children: "Menu Item",
|
||||
size: "large",
|
||||
variant: "default"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem {...args}>Normal</MenuBarItem>
|
||||
<MenuBarItem {...args} disabled>
|
||||
Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Different states of the menu item component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
||||
args: {},
|
||||
render: () => <div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Default Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="xsmall">XSmall</MenuBarItem>
|
||||
<MenuBarItem size="large">Large</MenuBarItem>
|
||||
<MenuBarItem size="xlarge">XLarge</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Home Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem variant="home" size="xsmall">
|
||||
XSmall
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large">
|
||||
Large
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="xlarge">
|
||||
XLarge
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<MenuBarItem size="large" disabled>
|
||||
Default Disabled
|
||||
</MenuBarItem>
|
||||
<MenuBarItem variant="home" size="large" disabled>
|
||||
Home Disabled
|
||||
</MenuBarItem>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Complete overview of all menu item variants, sizes, and states."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...l.parameters?.docs?.source}}};const p=["Default","Variants","Sizes","States","AllVariants"];export{l as AllVariants,n as Default,t as Sizes,i as States,r as Variants,p as __namedExportsOrder,u as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as t}from"./SectionNumber-Cptefv18.js";const r=({number:l,text:s,iconShape:o,iconColor:a})=>e.jsxs("div",{className:"bg-[var(--color-surface-inverse-primary)] rounded-[12px] p-5 shadow-lg flex flex-col gap-4 sm:p-8 sm:gap-8 sm:flex-row sm:items-center lg:p-8 lg:gap-0 lg:flex-row lg:items-stretch lg:relative lg:h-[238px]",children:[e.jsx("div",{className:"flex justify-end sm:justify-start sm:flex-shrink-0 lg:absolute lg:top-8 lg:right-8",children:e.jsx(t,{number:l})}),e.jsx("div",{className:"sm:flex-1 lg:absolute lg:bottom-8 lg:left-8 lg:right-16",children:e.jsx("p",{className:"font-bricolage-grotesque font-medium text-[24px] leading-[32px] sm:font-normal sm:leading-[24px] sm:text-[24px] lg:text-[24px] lg:leading-[24px] xl:text-[32px] xl:leading-[32px] text-[#141414]",children:s})})]});r.__docgenInfo={description:"",methods:[],displayName:"NumberedCard"};export{r as N};
|
||||
@@ -0,0 +1,41 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as o}from"./NumberedCard-ClCynPua.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const m={title:"Components/NumberedCard",component:o,parameters:{layout:"centered",docs:{description:{component:"Individual numbered card component that displays a step in a process with a numbered icon and descriptive text. Supports responsive layouts across different breakpoints."}}},argTypes:{number:{control:{type:"number",min:1,max:9},description:"The number to display on the card"},text:{control:{type:"text"},description:"The descriptive text for this step"},iconShape:{control:{type:"select"},options:["blob","gear","star"],description:"The shape of the icon background (currently not used, uses PNG images)"},iconColor:{control:{type:"select"},options:["green","purple","orange","blue"],description:"The color theme for the icon (currently not used, uses PNG images)"}},tags:["autodocs"]},t={args:{number:1,text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"}},r={args:{number:1,text:"Example card text",iconShape:"blob",iconColor:"green"},render:s=>e.jsxs("div",{className:"space-y-4",children:[e.jsx(o,{...s,number:1,text:"First step in the process"}),e.jsx(o,{...s,number:2,text:"Second step with different content"}),e.jsx(o,{...s,number:3,text:"Third and final step of the workflow"})]}),parameters:{docs:{description:{story:"Shows all three numbered cards with different content to demonstrate the visual hierarchy."}}}},n={args:{number:1,text:"This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",iconShape:"blob",iconColor:"green"},parameters:{docs:{description:{story:"Demonstrates how the card handles longer text content across different breakpoints."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "Example card text",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
render: args => <div className="space-y-4">
|
||||
<NumberedCard {...args} number={1} text="First step in the process" />
|
||||
<NumberedCard {...args} number={2} text="Second step with different content" />
|
||||
<NumberedCard {...args} number={3} text="Third and final step of the workflow" />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered cards with different content to demonstrate the visual hierarchy."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1,
|
||||
text: "This is a much longer piece of text that demonstrates how the card handles content that spans multiple lines and requires more space to display properly",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the card handles longer text content across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};const l=["Default","AllNumbers","LongText"];export{r as AllNumbers,t as Default,n as LongText,l as __namedExportsOrder,m as default};
|
||||
@@ -0,0 +1,48 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{N as m}from"./NumberedCard-ClCynPua.js";import{S as u}from"./SectionHeader-CadpOP1T.js";import{B as c}from"./Button-Z4hbXct5.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";import"./SectionNumber-Cptefv18.js";const l=({title:r,subtitle:a,cards:i})=>{const p={"@context":"https://schema.org","@type":"HowTo",name:r,description:a,step:i.map((o,t)=>({"@type":"HowToStep",position:t+1,name:o.text,text:o.text}))};return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(p)}}),e.jsx("section",{className:"bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]",children:e.jsx("div",{className:"max-w-[var(--spacing-measures-max-width-lg)] mx-auto",children:e.jsxs("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]",children:[e.jsx("div",{children:e.jsx(u,{title:r,subtitle:a,titleLg:"How CommunityRule helps"})}),e.jsx("div",{className:"grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]",children:i.map((o,t)=>e.jsx(m,{number:t+1,text:o.text,iconShape:o.iconShape,iconColor:o.iconColor},t))}),e.jsxs("div",{className:"text-center sm:text-left lg:text-center",children:[e.jsx("div",{className:"block lg:hidden",children:e.jsx(c,{variant:"default",size:"large",children:"Create CommunityRule"})}),e.jsx("div",{className:"hidden lg:block",children:e.jsx(c,{variant:"outlined",size:"large",children:"See how it works"})})]})]})})})]})};l.__docgenInfo={description:"",methods:[],displayName:"NumberedCards"};const C={title:"Components/NumberedCards",component:l,parameters:{layout:"fullscreen",docs:{description:{component:"A component system for visually communicating multi-step workflows, processes, or value propositions. The component's modular design with NumberedCard and SectionNumber sub-components makes it ideal for explaining any sequential process while maintaining brand consistency and accessibility standards across the design system."}}},argTypes:{title:{control:{type:"text"},description:"The main title for the section"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},cards:{control:{type:"object"},description:"Array of card objects with text, iconShape, and iconColor properties"}},tags:["autodocs"]},n={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",cards:[{text:"Document how your community makes decisions",iconShape:"blob",iconColor:"green"},{text:"Build an operating manual for a successful community",iconShape:"gear",iconColor:"purple"},{text:"Get a link to your manual for your group to review and evolve",iconShape:"star",iconColor:"orange"}]}},s={args:{title:"Our Process",subtitle:"Follow these simple steps to get started with your project.",cards:[{text:"Define your project requirements and goals",iconShape:"blob",iconColor:"green"},{text:"Collaborate with our team to create the perfect solution",iconShape:"gear",iconColor:"purple"},{text:"Launch and iterate based on user feedback",iconShape:"star",iconColor:"orange"},{text:"Scale and optimize for continued success",iconShape:"blob",iconColor:"blue"}]},parameters:{docs:{description:{story:"Example with custom content and four cards to show flexibility."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
cards: [{
|
||||
text: "Document how your community makes decisions",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Build an operating manual for a successful community",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Get a link to your manual for your group to review and evolve",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}]
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Our Process",
|
||||
subtitle: "Follow these simple steps to get started with your project.",
|
||||
cards: [{
|
||||
text: "Define your project requirements and goals",
|
||||
iconShape: "blob",
|
||||
iconColor: "green"
|
||||
}, {
|
||||
text: "Collaborate with our team to create the perfect solution",
|
||||
iconShape: "gear",
|
||||
iconColor: "purple"
|
||||
}, {
|
||||
text: "Launch and iterate based on user feedback",
|
||||
iconShape: "star",
|
||||
iconColor: "orange"
|
||||
}, {
|
||||
text: "Scale and optimize for continued success",
|
||||
iconShape: "blob",
|
||||
iconColor: "blue"
|
||||
}]
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content and four cards to show flexibility."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};const v=["Default","CustomContent"];export{s as CustomContent,n as Default,v as __namedExportsOrder,C as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const a=({title:l,subtitle:t,titleLg:x})=>e.jsxs("div",{className:"flex flex-col gap-1 w-full lg:flex-row lg:justify-between lg:items-start xl:gap-[var(--spacing-scale-024)]",children:[e.jsx("div",{className:"lg:w-[369px] lg:h-[120px] lg:flex lg:items-center xl:w-[452px] xl:h-[156px] xl:flex xl:items-center",children:e.jsxs("h2",{className:"font-bricolage-grotesque font-bold text-[28px] leading-[36px] sm:text-[32px] sm:leading-[40px] lg:text-[32px] lg:leading-[40px] lg:w-[369px] lg:pr-24 xl:text-[40px] xl:leading-[52px] xl:w-[452px] xl:pr-24 text-[var(--color-content-default-primary)]",children:[e.jsx("span",{className:"block lg:hidden",children:l}),e.jsx("span",{className:"hidden lg:block",children:x||l})]})}),e.jsx("div",{className:"lg:w-[928px] lg:h-[120px] lg:flex lg:items-center lg:justify-end xl:w-[763px] xl:h-[156px] xl:flex xl:items-center xl:justify-end",children:e.jsx("p",{className:"font-inter font-normal text-[18px] leading-[130%] sm:text-[18px] sm:leading-[32px] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] xl:text-right text-[#484848] sm:text-[var(--color-content-default-tertiary)] lg:text-[var(--color-content-default-tertiary)] xl:text-[var(--color-content-default-tertiary)] tracking-[0px]",children:t})})]});a.__docgenInfo={description:"",methods:[],displayName:"SectionHeader"};export{a as S};
|
||||
@@ -0,0 +1,58 @@
|
||||
import{S as n}from"./SectionHeader-CadpOP1T.js";import"./jsx-runtime-C_nHp4yK.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const p={title:"Components/SectionHeader",component:n,parameters:{layout:"centered",docs:{description:{component:"A section header component that displays a title and subtitle with responsive typography and layout. Supports different title text for large breakpoints and maintains consistent spacing across all screen sizes."}}},argTypes:{title:{control:{type:"text"},description:"The main title text (used for xsm and sm breakpoints)"},subtitle:{control:{type:"text"},description:"The subtitle text below the main title"},titleLg:{control:{type:"text"},description:"The title text for lg and xl breakpoints (optional, falls back to title)"}},tags:["autodocs"]},e={args:{title:"How CommunityRule works",subtitle:"Here's a quick overview of the process, from start to finish.",titleLg:"How CommunityRule helps"}},t={args:{title:"Our Mission",subtitle:"We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",titleLg:"Building Better Communities"},parameters:{docs:{description:{story:"Example with custom content to show the flexibility of the component."}}}},s={args:{title:"Complex Process",subtitle:"This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",titleLg:"Complex Process Simplified"},parameters:{docs:{description:{story:"Demonstrates how the component handles longer subtitle text across different breakpoints."}}}},o={args:{title:"Responsive Design",subtitle:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",titleLg:"Responsive Design Test"},parameters:{docs:{description:{story:"Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."}}}},r={args:{title:"Simple Header",subtitle:"This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."},parameters:{docs:{description:{story:"Shows the component without a titleLg prop, demonstrating the fallback behavior."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "How CommunityRule works",
|
||||
subtitle: "Here's a quick overview of the process, from start to finish.",
|
||||
titleLg: "How CommunityRule helps"
|
||||
}
|
||||
}`,...e.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Our Mission",
|
||||
subtitle: "We're dedicated to helping communities thrive through better decision-making processes and transparent governance structures.",
|
||||
titleLg: "Building Better Communities"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Example with custom content to show the flexibility of the component."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Complex Process",
|
||||
subtitle: "This is a much longer subtitle that demonstrates how the component handles extended text content across different breakpoints and layout configurations.",
|
||||
titleLg: "Complex Process Simplified"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Demonstrates how the component handles longer subtitle text across different breakpoints."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Responsive Design",
|
||||
subtitle: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook.",
|
||||
titleLg: "Responsive Design Test"
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Test the responsive behavior by resizing your browser window or using the viewport controls in Storybook."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
title: "Simple Header",
|
||||
subtitle: "This example doesn't specify a titleLg prop, so it will use the same title text across all breakpoints."
|
||||
},
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the component without a titleLg prop, demonstrating the fallback behavior."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...r.parameters?.docs?.source}}};const m=["Default","CustomContent","LongSubtitle","ResponsiveTest","WithoutTitleLg"];export{t as CustomContent,e as Default,s as LongSubtitle,o as ResponsiveTest,r as WithoutTitleLg,m as __namedExportsOrder,p as default};
|
||||
@@ -0,0 +1 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";const a=({number:t})=>{const s=r=>{switch(r){case 1:return"/assets/SectionNumber_1.png";case 2:return"/assets/SectionNumber_2.png";case 3:return"/assets/SectionNumber_3.png";default:return"/assets/SectionNumber_1.png"}};return e.jsxs("div",{className:"relative size-[40px] overflow-visible -rotate-[15deg]",children:[e.jsx("img",{src:s(t),alt:`Section ${t}`,className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 size-[47.37px] max-w-none"}),e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx("span",{className:"text-[var(--font-size-body-small)] font-[var(--font-weight-bold)] text-[var(--color-content-inverse-primary)]",children:t})})]})};a.__docgenInfo={description:"",methods:[],displayName:"SectionNumber"};export{a as S};
|
||||
@@ -0,0 +1,41 @@
|
||||
import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{S as r}from"./SectionNumber-Cptefv18.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const u={title:"Components/SectionNumber",component:r,parameters:{layout:"centered",docs:{description:{component:"A numbered icon component that displays a number overlaid on a PNG background image. The component uses different PNG images for numbers 1, 2, and 3, with the image extending beyond the 40px container size."}}},argTypes:{number:{control:{type:"number",min:1,max:3},description:"The number to display (1, 2, or 3)"}},tags:["autodocs"]},n={args:{number:1}},s={args:{number:2}},o={args:{number:3}},a={render:()=>e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]}),parameters:{docs:{description:{story:"Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."}}}},t={render:()=>e.jsx("div",{className:"bg-gray-100 p-8 rounded-lg",children:e.jsxs("div",{className:"flex space-x-4",children:[e.jsx(r,{number:1}),e.jsx(r,{number:2}),e.jsx(r,{number:3})]})}),parameters:{docs:{description:{story:"Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."}}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 1
|
||||
}
|
||||
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 2
|
||||
}
|
||||
}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
||||
args: {
|
||||
number: 3
|
||||
}
|
||||
}`,...o.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows all three numbered icons side by side to demonstrate the different PNG backgrounds."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...a.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
|
||||
render: () => <div className="bg-gray-100 p-8 rounded-lg">
|
||||
<div className="flex space-x-4">
|
||||
<SectionNumber number={1} />
|
||||
<SectionNumber number={2} />
|
||||
<SectionNumber number={3} />
|
||||
</div>
|
||||
</div>,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the numbered icons on a background to demonstrate how the PNG images extend beyond the container."
|
||||
}
|
||||
}
|
||||
}
|
||||
}`,...t.parameters?.docs?.source}}};const b=["NumberOne","NumberTwo","NumberThree","AllNumbers","WithBackground"];export{a as AllNumbers,n as NumberOne,o as NumberThree,s as NumberTwo,t as WithBackground,b as __namedExportsOrder,u as default};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,15 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_18586_27811)">
|
||||
<mask id="mask0_18586_27811" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
|
||||
<path d="M27.2 0.399994L0 0.399994L0 27.6H27.2V0.399994Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_18586_27811)">
|
||||
<path d="M13.6 24.0284C3.31356 32.6244 -5.02436 24.2865 3.57164 14C-5.02436 3.71355 3.31356 -4.62436 13.6 3.97164C23.8845 -4.62436 32.2244 3.71355 23.6284 14C32.2244 24.2786 23.8845 32.6244 13.6 24.0284Z" fill="black"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_18586_27811">
|
||||
<rect width="27.2" height="27.2" fill="white" transform="translate(0 0.399994)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="61" height="25" viewBox="0 0 61 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V31.5H61V25H31C17.7452 25 7 14.2548 7 1V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 179 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="61" height="19" viewBox="0 0 61 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 0H0V24H61V19.0476H23C14.1634 19.0476 7 11.8842 7 3.04761V0Z" fill="#FEFCC9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 193 B |
@@ -0,0 +1,30 @@
|
||||
import{g as MT}from"./iframe-D_aMTKb2.js";var mi={exports:{}};/*! axe v4.10.3
|
||||
* Copyright (c) 2015 - 2025 Deque Systems, Inc.
|
||||
*
|
||||
* Your use of this Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*
|
||||
* This entire copyright notice must appear in every copy of this file you
|
||||
* distribute or in any file that contains substantial portions of this source
|
||||
* code.
|
||||
*/var IT=mi.exports,xp;function PT(){return xp||(xp=1,function(hi){(function Qu(E){var jt=E,L=E.document,x=x||{};x.version="4.10.3",O(hi)==="object"&&hi.exports&&typeof Qu.toString=="function"&&(x.source="("+Qu.toString()+')(typeof window === "object" ? window : this);',hi.exports=x),typeof E.getComputedStyle=="function"&&(E.axe=x);function Jr(C){this.name="SupportError",this.cause=C.cause,this.message="`".concat(C.cause,"` - feature unsupported in your environment."),C.ruleId&&(this.ruleId=C.ruleId,this.message+=" Skipping ".concat(this.ruleId," rule.")),this.stack=new Error().stack}Jr.prototype=Object.create(Error.prototype),Jr.prototype.constructor=Jr;var Ep=["node"],Ap=["relatedNodes"],Cp=["node"],Fp=["variant"],Tp=["matches"],Rp=["chromium"],Sp=["noImplicit"],kp=["noPresentational"],Op=["precision","format","inGamut"],Mp=["space"],Ip=["algorithm"],Pp=["method"],Np=["maxDeltaE","deltaEMethod","steps","maxSteps"],Lp=["node"],Bp=["environmentData"],qp=["environmentData"],jp=["environmentData"],zp=["environmentData"],Vp=["environmentData"];function Hp(C){return ns(C)||rs(C)||Va(C)||as()}function $p(C,k,j){return(k=os(k))in C?Object.defineProperty(C,k,{value:j,enumerable:!0,configurable:!0,writable:!0}):C[k]=j,C}function Up(C,k,j){if(gi())return Reflect.construct.apply(null,arguments);var J=[null];J.push.apply(J,k);var Te=new(C.bind.apply(C,J));return Te}function vi(C,k,j){return k=za(k),Gp(C,gi()?Reflect.construct(k,j||[],za(C).constructor):k.apply(C,j))}function Gp(C,k){if(k&&(O(k)=="object"||typeof k=="function"))return k;if(k!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return Wp(C)}function Wp(C){if(C===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return C}function gi(){try{var C=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(gi=function(){return!!C})()}function za(C){return za=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(k){return k.__proto__||Object.getPrototypeOf(k)},za(C)}function bi(C,k){if(typeof k!="function"&&k!==null)throw new TypeError("Super expression must either be null or a function");C.prototype=Object.create(k&&k.prototype,{constructor:{value:C,writable:!0,configurable:!0}}),Object.defineProperty(C,"prototype",{writable:!1}),k&&yi(C,k)}function yi(C,k){return yi=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(j,J){return j.__proto__=J,j},yi(C,k)}function Xt(C,k,j){ts(C,k),k.set(C,j)}function es(C,k){ts(C,k),k.add(C)}function ts(C,k){if(k.has(C))throw new TypeError("Cannot initialize the same private elements twice on an object")}function wt(C,k){return C.get(Tr(C,k))}function at(C,k,j){return C.set(Tr(C,k),j),j}function Tr(C,k,j){if(typeof C=="function"?C===k:C.has(k))return arguments.length<3?k:j;throw new TypeError("Private element is not present on this object")}function qe(C,k){if(C==null)return{};var j,J,Te=Yp(C,k);if(Object.getOwnPropertySymbols){var Pe=Object.getOwnPropertySymbols(C);for(J=0;J<Pe.length;J++)j=Pe[J],k.includes(j)||{}.propertyIsEnumerable.call(C,j)&&(Te[j]=C[j])}return Te}function Yp(C,k){if(C==null)return{};var j={};for(var J in C)if({}.hasOwnProperty.call(C,J)){if(k.includes(J))continue;j[J]=C[J]}return j}function ne(C){return Xp(C)||rs(C)||Va(C)||Kp()}function Kp(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
|
||||
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function rs(C){if(typeof Symbol<"u"&&C[Symbol.iterator]!=null||C["@@iterator"]!=null)return Array.from(C)}function Xp(C){if(Array.isArray(C))return wi(C)}function de(){return de=Object.assign?Object.assign.bind():function(C){for(var k=1;k<arguments.length;k++){var j=arguments[k];for(var J in j)({}).hasOwnProperty.call(j,J)&&(C[J]=j[J])}return C},de.apply(null,arguments)}function $(C,k){return ns(C)||Zp(C,k)||Va(C,k)||as()}function as(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
|
||||
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function Zp(C,k){var j=C==null?null:typeof Symbol<"u"&&C[Symbol.iterator]||C["@@iterator"];if(j!=null){var J,Te,Pe,Ke,pt=[],He=!0,tt=!1;try{if(Pe=(j=j.call(C)).next,k===0){if(Object(j)!==j)return;He=!1}else for(;!(He=(J=Pe.call(j)).done)&&(pt.push(J.value),pt.length!==k);He=!0);}catch(Qr){tt=!0,Te=Qr}finally{try{if(!He&&j.return!=null&&(Ke=j.return(),Object(Ke)!==Ke))return}finally{if(tt)throw Te}}return pt}}function ns(C){if(Array.isArray(C))return C}function Tt(C,k){if(!(C instanceof k))throw new TypeError("Cannot call a class as a function")}function is(C,k){for(var j=0;j<k.length;j++){var J=k[j];J.enumerable=J.enumerable||!1,J.configurable=!0,"value"in J&&(J.writable=!0),Object.defineProperty(C,os(J.key),J)}}function Rt(C,k,j){return k&&is(C.prototype,k),j&&is(C,j),Object.defineProperty(C,"prototype",{writable:!1}),C}function os(C){var k=Jp(C,"string");return O(k)=="symbol"?k:k+""}function Jp(C,k){if(O(C)!="object"||!C)return C;var j=C[Symbol.toPrimitive];if(j!==void 0){var J=j.call(C,k);if(O(J)!="object")return J;throw new TypeError("@@toPrimitive must return a primitive value.")}return(k==="string"?String:Number)(C)}function Ce(C,k){var j=typeof Symbol<"u"&&C[Symbol.iterator]||C["@@iterator"];if(!j){if(Array.isArray(C)||(j=Va(C))||k){j&&(C=j);var J=0,Te=function(){};return{s:Te,n:function(){return J>=C.length?{done:!0}:{done:!1,value:C[J++]}},e:function(tt){throw tt},f:Te}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
|
||||
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var Pe,Ke=!0,pt=!1;return{s:function(){j=j.call(C)},n:function(){var tt=j.next();return Ke=tt.done,tt},e:function(tt){pt=!0,Pe=tt},f:function(){try{Ke||j.return==null||j.return()}finally{if(pt)throw Pe}}}}function Va(C,k){if(C){if(typeof C=="string")return wi(C,k);var j={}.toString.call(C).slice(8,-1);return j==="Object"&&C.constructor&&(j=C.constructor.name),j==="Map"||j==="Set"?Array.from(C):j==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(j)?wi(C,k):void 0}}function wi(C,k){(k==null||k>C.length)&&(k=C.length);for(var j=0,J=Array(k);j<k;j++)J[j]=C[j];return J}function O(C){"@babel/helpers - typeof";return O=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(k){return typeof k}:function(k){return k&&typeof Symbol=="function"&&k.constructor===Symbol&&k!==Symbol.prototype?"symbol":typeof k},O(C)}(function(C,k,j,J,Te,Pe,Ke,pt,He,tt,Qr){var Qp=Object.create,ea=Object.defineProperty,em=Object.getPrototypeOf,tm=Object.prototype.hasOwnProperty,rm=Object.getOwnPropertyNames,am=Object.getOwnPropertyDescriptor,nm=function(t,r,a){return r in t?ea(t,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[r]=a},im=function(t){return ea(t,"__esModule",{value:!0})},y=function(t,r){return function(){return r||t((r={exports:{}}).exports,r),r.exports}},Dt=function(t,r){for(var a in r)ea(t,a,{get:r[a],enumerable:!0})},om=function(t,r,a){if(r&&O(r)==="object"||typeof r=="function"){var n=Ce(rm(r)),i;try{var o=function(){var s=i.value;!tm.call(t,s)&&s!=="default"&&ea(t,s,{get:function(){return r[s]},enumerable:!(a=am(r,s))||a.enumerable})};for(n.s();!(i=n.n()).done;)o()}catch(u){n.e(u)}finally{n.f()}}return t},ot=function(t){return om(im(ea(t!=null?Qp(em(t)):{},"default",t&&t.__esModule&&"default"in t?{get:function(){return t.default},enumerable:!0}:{value:t,enumerable:!0})),t)},us=function(t,r,a){return nm(t,O(r)!=="symbol"?r+"":r,a),a},um=y(function(e,t){t.exports=function(){}}),cr=y(function(e,t){var r=um()();t.exports=function(a){return a!==r&&a!==null}}),ss=y(function(e,t){var r=cr(),a=Array.prototype.forEach,n=Object.create,i=function(u,s){var l;for(l in u)s[l]=u[l]};t.exports=function(o){var u=n(null);return a.call(arguments,function(s){r(s)&&i(Object(s),u)}),u}}),sm=y(function(e,t){t.exports=function(){var r=Math.sign;return typeof r!="function"?!1:r(10)===1&&r(-20)===-1}}),lm=y(function(e,t){t.exports=function(r){return r=Number(r),isNaN(r)||r===0?r:r>0?1:-1}}),cm=y(function(e,t){t.exports=sm()()?Math.sign:lm()}),dm=y(function(e,t){var r=cm(),a=Math.abs,n=Math.floor;t.exports=function(i){return isNaN(i)?0:(i=Number(i),i===0||!isFinite(i)?i:r(i)*n(a(i)))}}),dr=y(function(e,t){var r=dm(),a=Math.max;t.exports=function(n){return a(0,r(n))}}),ls=y(function(e,t){var r=dr();t.exports=function(a,n,i){var o;return isNaN(a)?(o=n,o>=0?i&&o?o-1:o:1):a===!1?!1:r(a)}}),Zt=y(function(e,t){t.exports=function(r){if(typeof r!="function")throw new TypeError(r+" is not a function");return r}}),Rr=y(function(e,t){var r=cr();t.exports=function(a){if(!r(a))throw new TypeError("Cannot use null or undefined");return a}}),fm=y(function(e,t){var r=Zt(),a=Rr(),n=Function.prototype.bind,i=Function.prototype.call,o=Object.keys,u=Object.prototype.propertyIsEnumerable;t.exports=function(s,l){return function(c,d){var f,p=arguments[2],m=arguments[3];return c=Object(a(c)),r(d),f=o(c),m&&f.sort(typeof m=="function"?n.call(m,c):void 0),typeof s!="function"&&(s=f[s]),i.call(s,f,function(h,v){return u.call(c,h)?i.call(d,p,c[h],h,c,v):l})}}}),Ha=y(function(e,t){t.exports=fm()("forEach")}),fr=y(function(){}),pm=y(function(e,t){t.exports=function(){var r=Object.assign,a;return typeof r!="function"?!1:(a={foo:"raz"},r(a,{bar:"dwa"},{trzy:"trzy"}),a.foo+a.bar+a.trzy==="razdwatrzy")}}),mm=y(function(e,t){t.exports=function(){try{return Object.keys("primitive"),!0}catch{return!1}}}),hm=y(function(e,t){var r=cr(),a=Object.keys;t.exports=function(n){return a(r(n)?Object(n):n)}}),vm=y(function(e,t){t.exports=mm()()?Object.keys:hm()}),gm=y(function(e,t){var r=vm(),a=Rr(),n=Math.max;t.exports=function(i,o){var u,s,l=n(arguments.length,2),c;for(i=Object(a(i)),c=function(f){try{i[f]=o[f]}catch(p){u||(u=p)}},s=1;s<l;++s)o=arguments[s],r(o).forEach(c);if(u!==void 0)throw u;return i}}),cs=y(function(e,t){t.exports=pm()()?Object.assign:gm()}),bm=y(function(e,t){var r=cr(),a={function:!0,object:!0};t.exports=function(n){return r(n)&&a[O(n)]||!1}}),ym=y(function(e,t){var r=cs(),a=bm(),n=cr(),i=Error.captureStackTrace;t.exports=function(o){var u=new Error(o),s=arguments[1],l=arguments[2];return n(l)||a(s)&&(l=s,s=null),n(l)&&r(u,l),n(s)&&(u.code=s),i&&i(u,t.exports),u}}),ds=y(function(e,t){var r=Rr(),a=Object.defineProperty,n=Object.getOwnPropertyDescriptor,i=Object.getOwnPropertyNames,o=Object.getOwnPropertySymbols;t.exports=function(u,s){var l,c=Object(r(s));if(u=Object(r(u)),i(c).forEach(function(d){try{a(u,d,n(s,d))}catch(f){l=f}}),typeof o=="function"&&
Line truncated
|
||||
Consider to rely on 'then' or 'done' mode instead.`);R&&(delete c[p],d[p]=F,l.emit("setasync",p,R))},b=function(){v=!0,c[p]&&(delete c[p],delete f[p],l.delete(p))},D=s;if(D||(D="then"),D==="then"){var w=function(){i(b)};h=h.then(function(_){i(g.bind(this,_))},w),typeof h.finally=="function"&&h.finally(w)}else if(D==="done"){if(typeof h.done!="function")throw new Error("Memoizee error: Retrieved promise does not implement 'done' in 'done' mode");h.done(g,b)}else if(D==="done:finally"){if(typeof h.done!="function")throw new Error("Memoizee error: Retrieved promise does not implement 'done' in 'done:finally' mode");if(typeof h.finally!="function")throw new Error("Memoizee error: Retrieved promise does not implement 'finally' in 'done:finally' mode");h.done(g),h.finally(b)}}),l.on("get",function(p,m,h){var v;if(c[p]){++c[p];return}v=f[p];var g=function(){l.emit("getasync",p,m,h)};n(v)?typeof v.done=="function"?v.done(g):v.then(function(){i(g)}):g()}),l.on("delete",function(p){if(delete f[p],c[p]){delete c[p];return}if(hasOwnProperty.call(d,p)){var m=d[p];delete d[p],l.emit("deleteasync",p,[m])}}),l.on("clear",function(){var p=d;d=o(null),c=o(null),f=o(null),l.emit("clearasync",e(p,function(m){return[m]}))})}}),sh=y(function(){var e=Zt(),t=Ha(),r=fr(),a=Function.prototype.apply;r.dispose=function(n,i,o){var u;if(e(n),o.async&&r.async||o.promise&&r.promise){i.on("deleteasync",u=function(l,c){a.call(n,null,c)}),i.on("clearasync",function(s){t(s,function(l,c){u(c,l)})});return}i.on("delete",u=function(l,c){n(c)}),i.on("clear",function(s){t(s,function(l,c){u(c,l)})})}}),lh=y(function(e,t){t.exports=2147483647}),ch=y(function(e,t){var r=dr(),a=lh();t.exports=function(n){if(n=r(n),n>a)throw new TypeError(n+" exceeds maximum possible timeout");return n}}),dh=y(function(){var e=Di(),t=Ha(),r=xi(),a=gs(),n=ch(),i=fr(),o=Function.prototype,u=Math.max,s=Math.min,l=Object.create;i.maxAge=function(c,d,f){var p,m,h,v;c=n(c),c&&(p=l(null),m=f.async&&i.async||f.promise&&i.promise?"async":"",d.on("set"+m,function(g){p[g]=setTimeout(function(){d.delete(g)},c),typeof p[g].unref=="function"&&p[g].unref(),v&&(v[g]&&v[g]!=="nextTick"&&clearTimeout(v[g]),v[g]=setTimeout(function(){delete v[g]},h),typeof v[g].unref=="function"&&v[g].unref())}),d.on("delete"+m,function(g){clearTimeout(p[g]),delete p[g],v&&(v[g]!=="nextTick"&&clearTimeout(v[g]),delete v[g])}),f.preFetch&&(f.preFetch===!0||isNaN(f.preFetch)?h=.333:h=u(s(Number(f.preFetch),1),0),h&&(v={},h=(1-h)*c,d.on("get"+m,function(g,b,D){v[g]||(v[g]="nextTick",r(function(){var w;v[g]==="nextTick"&&(delete v[g],d.delete(g),f.async&&(b=e(b),b.push(o)),w=d.memoized.apply(D,b),f.promise&&a(w)&&(typeof w.done=="function"?w.done(o,o):w.then(o,o)))}))}))),d.on("clear"+m,function(){t(p,function(g){clearTimeout(g)}),p={},v&&(t(v,function(g){g!=="nextTick"&&clearTimeout(g)}),v={})}))}}),fh=y(function(e,t){var r=dr(),a=Object.create,n=Object.prototype.hasOwnProperty;t.exports=function(i){var o=0,u=1,s=a(null),l=a(null),c=0,d;return i=r(i),{hit:function(p){var m=l[p],h=++c;if(s[h]=p,l[p]=h,!m)return++o,o<=i?void 0:(p=s[u],d(p),p);if(delete s[m],u===m)for(;!n.call(s,++u););},delete:d=function(p){var m=l[p];if(m&&(delete s[m],delete l[p],--o,u===m)){if(!o){c=0,u=1;return}for(;!n.call(s,++u););}},clear:function(){o=0,u=1,s=a(null),l=a(null),c=0}}}}),ph=y(function(){var e=dr(),t=fh(),r=fr();r.max=function(a,n,i){var o,u,s;a=e(a),a&&(u=t(a),o=i.async&&r.async||i.promise&&r.promise?"async":"",n.on("set"+o,s=function(c){c=u.hit(c),c!==void 0&&n.delete(c)}),n.on("get"+o,s),n.on("delete"+o,u.delete),n.on("clear"+o,u.clear))}}),mh=y(function(){var e=pr(),t=fr(),r=Object.create,a=Object.defineProperties;t.refCounter=function(n,i,o){var u,s;u=r(null),s=o.async&&t.async||o.promise&&t.promise?"async":"",i.on("set"+s,function(l,c){u[l]=c||1}),i.on("get"+s,function(l){++u[l]}),i.on("delete"+s,function(l){delete u[l]}),i.on("clear"+s,function(){u={}}),a(i.memoized,{deleteRef:e(function(){var l=i.get(arguments);return l===null||!u[l]?null:--u[l]?!1:(i.delete(l),!0)}),getRefCount:e(function(){var l=i.get(arguments);return l===null||!u[l]?0:u[l]})})}}),bs=y(function(e,t){var r=ss(),a=ls(),n=Gm();t.exports=function(i){var o=r(arguments[1]),u;return o.normalizer||(u=o.length=a(o.length,i.length,o.async),u!==0&&(o.primitive?u===!1?o.normalizer=Wm():u>1&&(o.normalizer=Ym()(u)):u===!1?o.normalizer=Jm()():u===1?o.normalizer=Qm()():o.normalizer=eh()(u))),o.async&&th(),o.promise&&uh(),o.dispose&&sh(),o.maxAge&&dh(),o.max&&ph(),o.refCounter&&mh(),n(i,o)}}),ys=y(function(e){Object.defineProperty(e,"__esModule",{value:!0});function t(o){return o>="a"&&o<="z"||o>="A"&&o<="Z"||o==="-"||o==="_"}e.isIdentStart=t;function r(o){return o>="a"&&o<="z"||o>="A"&&o<="Z"||o>="0"&&o<="9"||o==="-"||o==="_"}e.isIdent=r;function a(o){return o>="a"&&o<="f"||o>="A"&&o<="F"||o>="0"&&o<="9"}e.isHex=a;function n(o){for(var u=o.length,s="",l=0;l<u;){var c=o.charAt(l);if(e.identSpecialChars[c])s+="\\"+c;else if(c==="_"||c==="-"||c>="A"&&c<="Z"||c>=
Line truncated
|
||||
`,r:"\r",t:" ",f:"\f","\\":"\\","'":"'"},e.doubleQuotesEscapeChars={n:`
|
||||
`,r:"\r",t:" ",f:"\f","\\":"\\",'"':'"'}}),hh=y(function(e){Object.defineProperty(e,"__esModule",{value:!0});var t=ys();function r(a,n,i,o,u,s){var l=a.length,c="";function d(b,D){var w="";for(n++,c=a.charAt(n);n<l;){if(c===b)return n++,w;if(c==="\\"){n++,c=a.charAt(n);var _=void 0;if(c===b)w+=b;else if((_=D[c])!==void 0)w+=_;else if(t.isHex(c)){var F=c;for(n++,c=a.charAt(n);t.isHex(c);)F+=c,n++,c=a.charAt(n);c===" "&&(n++,c=a.charAt(n)),w+=String.fromCharCode(parseInt(F,16));continue}else w+=c}else w+=c;n++,c=a.charAt(n)}return w}function f(){var b="";for(c=a.charAt(n);n<l;){if(t.isIdent(c))b+=c;else if(c==="\\"){if(n++,n>=l)throw Error("Expected symbol but end of file reached.");if(c=a.charAt(n),t.identSpecialChars[c])b+=c;else if(t.isHex(c)){var D=c;for(n++,c=a.charAt(n);t.isHex(c);)D+=c,n++,c=a.charAt(n);c===" "&&(n++,c=a.charAt(n)),b+=String.fromCharCode(parseInt(D,16));continue}else b+=c}else return b;n++,c=a.charAt(n)}return b}function p(){c=a.charAt(n);for(var b=!1;c===" "||c===" "||c===`
|
||||
`||c==="\r"||c==="\f";)b=!0,n++,c=a.charAt(n);return b}function m(){var b=h();if(n<l)throw Error('Rule expected but "'+a.charAt(n)+'" found.');return b}function h(){var b=v();if(!b)return null;var D=b;for(c=a.charAt(n);c===",";){if(n++,p(),D.type!=="selectors"&&(D={type:"selectors",selectors:[b]}),b=v(),!b)throw Error('Rule expected after ",".');D.selectors.push(b)}return D}function v(){p();var b={type:"ruleSet"},D=g();if(!D)return null;for(var w=b;D&&(D.type="rule",w.rule=D,w=D,p(),c=a.charAt(n),!(n>=l||c===","||c===")"));)if(u[c]){var _=c;if(n++,p(),D=g(),!D)throw Error('Rule expected after "'+_+'".');D.nestingOperator=_}else D=g(),D&&(D.nestingOperator=null);return b}function g(){for(var b=null;n<l;)if(c=a.charAt(n),c==="*")n++,(b=b||{}).tagName="*";else if(t.isIdentStart(c)||c==="\\")(b=b||{}).tagName=f();else if(c===".")n++,b=b||{},(b.classNames=b.classNames||[]).push(f());else if(c==="#")n++,(b=b||{}).id=f();else if(c==="["){n++,p();var D={name:f()};if(p(),c==="]")n++;else{var w="";if(o[c]&&(w=c,n++,c=a.charAt(n)),n>=l)throw Error('Expected "=" but end of file reached.');if(c!=="=")throw Error('Expected "=" but "'+c+'" found.');D.operator=w+"=",n++,p();var _="";if(D.valueType="string",c==='"')_=d('"',t.doubleQuotesEscapeChars);else if(c==="'")_=d("'",t.singleQuoteEscapeChars);else if(s&&c==="$")n++,_=f(),D.valueType="substitute";else{for(;n<l&&c!=="]";)_+=c,n++,c=a.charAt(n);_=_.trim()}if(p(),n>=l)throw Error('Expected "]" but end of file reached.');if(c!=="]")throw Error('Expected "]" but "'+c+'" found.');n++,D.value=_}b=b||{},(b.attrs=b.attrs||[]).push(D)}else if(c===":"){n++;var F=f(),R={name:F};if(c==="("){n++;var I="";if(p(),i[F]==="selector")R.valueType="selector",I=h();else{if(R.valueType=i[F]||"string",c==='"')I=d('"',t.doubleQuotesEscapeChars);else if(c==="'")I=d("'",t.singleQuoteEscapeChars);else if(s&&c==="$")n++,I=f(),R.valueType="substitute";else{for(;n<l&&c!==")";)I+=c,n++,c=a.charAt(n);I=I.trim()}p()}if(n>=l)throw Error('Expected ")" but end of file reached.');if(c!==")")throw Error('Expected ")" but "'+c+'" found.');n++,R.value=I}b=b||{},(b.pseudos=b.pseudos||[]).push(R)}else break;return b}return m()}e.parseCssSelector=r}),vh=y(function(e){Object.defineProperty(e,"__esModule",{value:!0});var t=ys();function r(a){var n="";switch(a.type){case"ruleSet":for(var i=a.rule,o=[];i;)i.nestingOperator&&o.push(i.nestingOperator),o.push(r(i)),i=i.rule;n=o.join(" ");break;case"selectors":n=a.selectors.map(r).join(", ");break;case"rule":a.tagName&&(a.tagName==="*"?n="*":n=t.escapeIdentifier(a.tagName)),a.id&&(n+="#"+t.escapeIdentifier(a.id)),a.classNames&&(n+=a.classNames.map(function(u){return"."+t.escapeIdentifier(u)}).join("")),a.attrs&&(n+=a.attrs.map(function(u){return"operator"in u?u.valueType==="substitute"?"["+t.escapeIdentifier(u.name)+u.operator+"$"+u.value+"]":"["+t.escapeIdentifier(u.name)+u.operator+t.escapeStr(u.value)+"]":"["+t.escapeIdentifier(u.name)+"]"}).join("")),a.pseudos&&(n+=a.pseudos.map(function(u){return u.valueType?u.valueType==="selector"?":"+t.escapeIdentifier(u.name)+"("+r(u.value)+")":u.valueType==="substitute"?":"+t.escapeIdentifier(u.name)+"($"+u.value+")":u.valueType==="numeric"?":"+t.escapeIdentifier(u.name)+"("+u.value+")":":"+t.escapeIdentifier(u.name)+"("+t.escapeIdentifier(u.value)+")":":"+t.escapeIdentifier(u.name)}).join(""));break;default:throw Error('Unknown entity type: "'+a.type+'".')}return n}e.renderEntity=r}),ws=y(function(e){Object.defineProperty(e,"__esModule",{value:!0});var t=hh(),r=vh(),a=function(){function n(){this.pseudos={},this.attrEqualityMods={},this.ruleNestingOperators={},this.substitutesEnabled=!1}return n.prototype.registerSelectorPseudos=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];this.pseudos[l]="selector"}return this},n.prototype.unregisterSelectorPseudos=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];delete this.pseudos[l]}return this},n.prototype.registerNumericPseudos=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];this.pseudos[l]="numeric"}return this},n.prototype.unregisterNumericPseudos=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];delete this.pseudos[l]}return this},n.prototype.registerNestingOperators=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];this.ruleNestingOperators[l]=!0}return this},n.prototype.unregisterNestingOperators=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];delete this.ruleNestingOperators[l]}return this},n.prototype.registerAttrEqualityMods=function(){for(var i=[],o=0;o<arguments.length;o++)i[o]=arguments[o];for(var u=0,s=i;u<s.length;u++){var l=s[u];this.attrEqualityMods[l]=!0}return this},n.prototype.unregisterAttrEq
Line truncated
|
||||
`+e.stack.replace(e.message,"")),new a(t)}function vl(){var e="axeAPI",t="";return typeof x<"u"&&x._audit&&x._audit.application&&(e=x._audit.application),typeof x<"u"&&(t=x.version),e+"."+t}function eo(e){bl(e),me(E.parent===e,"Source of the response must be the parent window.")}function gl(e){bl(e),me(e.parent===E,"Respondable target must be a frame in the current window")}function bl(e){me(E!==e,"Messages can not be sent to the same window.")}var un={};function Ag(e,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0;me(!un[e],"A replyHandler already exists for this message channel."),un[e]={replyHandler:t,sendToParent:r}}function Cg(e){return un[e]}function Fg(e){delete un[e]}var sn=[];function to(){var e="".concat(br(),":").concat(br());return sn.includes(e)?to():(sn.push(e),e)}function Tg(e){return sn.includes(e)?!1:(sn.push(e),!0)}function ro(e,t,r,a){if(r?eo(e):gl(e),t.message instanceof Error&&!r)return x.log(t.message),!1;var n=Dg(de({messageId:to()},t)),i=x._audit.allowedOrigins;return!i||!i.length?!1:(typeof a=="function"&&Ag(t.channelId,a,r),i.forEach(function(o){try{e.postMessage(n,o)}catch(u){throw u instanceof e.DOMException?new Error('allowedOrigins value "'.concat(o,'" is not a valid origin')):u}}),!0)}function Rg(e,t,r){if(!e.parent!==E)return x.log(t);try{ro(e,{topic:null,channelId:r,message:t,messageId:to(),keepalive:!0},!0)}catch(a){return x.log(a)}}function yl(e,t){var r=arguments.length>2&&arguments[2]!==void 0?arguments[2]:!0;return function(n,i,o){var u={channelId:t,message:n,keepalive:i};ro(e,u,r,o)}}function Sg(e){var t=x._audit.allowedOrigins;return t&&t.includes("*")||t.includes(e)}function kg(e,t){var r=e.origin,a=e.data,n=e.source;try{var i=_g(a)||{},o=i.channelId,u=i.message,s=i.messageId;if(!Sg(r)||!Tg(s))return;if(u instanceof Error&&n.parent!==E)return x.log(u),!1;try{if(i.topic){var l=yl(n,o);eo(n),t(i,l)}else Og(n,i)}catch(c){Rg(n,c,o)}}catch(c){return x.log(c),!1}}function Og(e,t){var r=t.channelId,a=t.message,n=t.keepalive,i=Cg(r)||{},o=i.replyHandler,u=i.sendToParent;if(o){u?eo(e):gl(e);var s=yl(e,r,u);!n&&r&&Fg(r);try{o(a,n,s)}catch(l){x.log(l),s(l,n)}}}var Mg={open:function(t){if(typeof E.addEventListener=="function"){var r=function(n){kg(n,t)};return E.addEventListener("message",r,!1),function(){E.removeEventListener("message",r,!1)}}},post:function(t,r,a){return typeof E.addEventListener!="function"?!1:ro(t,r,!1,a)}};function wl(e){e.updateMessenger(Mg)}var ln,Dl,ao={};function Et(e,t,r,a,n){var i={topic:t,message:r,channelId:"".concat(br(),":").concat(br()),keepalive:a};return Dl(e,i,n)}function Ig(e,t){var r=e.topic,a=e.message,n=e.keepalive,i=ao[r];if(i)try{i(a,n,t)}catch(o){x.log(o),t(o,n)}}Et.updateMessenger=function(t){var r=t.open,a=t.post;me(typeof r=="function","open callback must be a function"),me(typeof a=="function","post callback must be a function"),ln&&ln();var n=r(Ig);n?(me(typeof n=="function","open callback must return a cleanup function"),ln=n):ln=null,Dl=a},Et.subscribe=function(t,r){me(typeof r=="function","Subscriber callback must be a function"),me(!ao[t],"Topic ".concat(t," is already registered to.")),ao[t]=r},Et.isInFrame=function(){var t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:E;return!!t.frameElement},wl(Et);function _l(e,t,r,a){var n,i,o=e.contentWindow,u=(n=(i=t.options)===null||i===void 0?void 0:i.pingWaitTime)!==null&&n!==void 0?n:500;if(!o){vr("Frame does not have a content window",e),r(null);return}if(u===0){xl(e,t,r,a);return}var s=setTimeout(function(){s=setTimeout(function(){t.debug?a(El("No response from frame",e)):r(null)},0)},u);Et(o,"axe.ping",null,void 0,function(){clearTimeout(s),xl(e,t,r,a)})}function xl(e,t,r,a){var n,i,o=(n=(i=t.options)===null||i===void 0?void 0:i.frameWaitTime)!==null&&n!==void 0?n:6e4,u=e.contentWindow,s=setTimeout(function(){a(El("Axe in frame timed out",e))},o);Et(u,"axe.start",t,void 0,function(l){clearTimeout(s),l instanceof Error?a(l):r(l)})}function El(e,t){var r;return x._tree&&(r=Hi(t)),new Error(e+": "+(r||t))}var ca=null,da={update:function(t){me(O(t)==="object","serializer must be an object"),ca=t},toSpec:function(t){return da.dqElmToSpec(new Ht(t))},dqElmToSpec:function(t,r){var a;return t instanceof Ht?(r&&(t=Pg(t,r)),typeof((a=ca)===null||a===void 0?void 0:a.toSpec)=="function"?ca.toSpec(t):t.toJSON()):t},mergeSpecs:function(t,r){var a;return typeof((a=ca)===null||a===void 0?void 0:a.mergeSpecs)=="function"?ca.mergeSpecs(t,r):Ht.mergeSpecs(t,r)},mapRawResults:function(t){return t.map(function(r){return de({},r,{nodes:da.mapRawNodeResults(r.nodes)})})},mapRawNodeResults:function(t){return t?.map(function(r){var a=r.node,n=qe(r,Ep);n.node=da.dqElmToSpec(a);for(var i=0,o=["any","all","none"];i<o.length;i++){var u=o[i];n[u]=n[u].map(function(s){var l=s.relatedNodes,c=qe(s,Ap);return c.relatedNodes=l.map(da.dqElmToSpec),c})}return n})}},ht=da;function Pg(e,t){var r=e.fromFrame,a=t.ancestry,n=t.xpath,i=t.selectors!==!1||r;return e=new Ht(e.element,t,{source:e.
Line truncated
|
||||
`).replace(/\u00A0/g," ").replace(/[\s]{2,}/g," ").trim():""}var re=ey,pc=function(){return ue.get("sectioningContentSelector",function(){return Eo("sectioning").map(function(t){return"".concat(t,":not([role])")}).join(", ")+" , [role=article], [role=complementary], [role=navigation], [role=region]"})},mc=function(){return ue.get("sectioningContentPlusMainSelector",function(){return pc()+" , main:not([role]), [role=main]"})};function Co(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.checkTitle,a=r===void 0?!1:r;return!!(re(ga(e))||re(ba(e))||a&&e?.props.nodeType===1&&re(e.attr("title")))}var ty={a:function(t){return t.hasAttr("href")?"link":null},area:function(t){return t.hasAttr("href")?"link":null},article:"article",aside:function(t){return ut(t.parent,pc())&&!Co(t,{checkTitle:!0})?null:"complementary"},body:"document",button:"button",datalist:"listbox",dd:"definition",dfn:"term",details:"group",dialog:"dialog",dt:"term",fieldset:"group",figure:"figure",footer:function(t){var r=ut(t,mc());return r?null:"contentinfo"},form:function(t){return Co(t)?"form":null},h1:"heading",h2:"heading",h3:"heading",h4:"heading",h5:"heading",h6:"heading",header:function(t){var r=ut(t,mc());return r?null:"banner"},hr:"separator",img:function(t){var r=t.hasAttr("alt")&&!t.attr("alt"),a=Dr().find(function(n){return t.hasAttr(n)});return r&&!a&&!Ne(t)?"presentation":"img"},input:function(t){var r;if(t.hasAttr("list")){var a=Ot(t.actualNode,"list").filter(function(n){return!!n})[0];r=a&&a.nodeName.toLowerCase()==="datalist"}switch(t.props.type){case"checkbox":return"checkbox";case"number":return"spinbutton";case"radio":return"radio";case"range":return"slider";case"search":return r?"combobox":"searchbox";case"button":case"image":case"reset":case"submit":return"button";case"text":case"tel":case"url":case"email":case"":return r?"combobox":"textbox";default:return"textbox"}},li:"listitem",main:"main",math:"math",menu:"list",meter:"meter",nav:"navigation",ol:"list",optgroup:"group",option:"option",output:"status",progress:"progressbar",search:"search",section:function(t){return Co(t)?"region":null},select:function(t){return t.hasAttr("multiple")||parseInt(t.attr("size"))>1?"listbox":"combobox"},summary:"button",table:"table",tbody:"rowgroup",td:function(t){var r=ut(t,"table"),a=De(r);return["grid","treegrid"].includes(a)?"gridcell":"cell"},textarea:"textbox",tfoot:"rowgroup",th:function(t){if(jr(t))return"columnheader";if(zr(t))return"rowheader"},thead:"rowgroup",tr:"row",ul:"list"},Fo=ty;function ry(e,t){var r=O(t);if(Array.isArray(t)&&typeof e<"u")return t.includes(e);if(r==="function")return!!t(e);if(e!=null){if(t instanceof RegExp)return t.test(e);if(/^\/.*\/$/.test(t)){var a=t.substring(1,t.length-1);return new RegExp(a).test(e)}}return t===e}var _r=ry;function ay(e,t){return _r(!!Ge(e),t)}var hc=ay;function ny(e,t){var r=O(t);if(r!=="object"||Array.isArray(t)||t instanceof RegExp)throw new Error("Expect matcher to be an object");return Object.keys(t).every(function(a){return _r(e(a),t[a])})}var To=ny;function iy(e,t){return e=we(e).vNode,To(function(r){return e.attr(r)},t)}var vc=iy;function gc(e,t){return!!t(e)}function oy(e,t){return _r(De(e),t)}var bc=oy;function uy(e,t){return _r(Mt(e),t)}var yc=uy;function sy(e,t){return e=we(e).vNode,_r(e.props.nodeName,t)}var wc=sy;function ly(e,t){return e=we(e).vNode,To(function(r){return e.props[r]},t)}var Dc=ly;function cy(e,t){return _r(ce(e),t)}var _c=cy,xc={hasAccessibleName:hc,attributes:vc,condition:gc,explicitRole:bc,implicitRole:yc,nodeName:wc,properties:Dc,semanticRole:_c};function Ec(e,t){return e=we(e).vNode,Array.isArray(t)?t.some(function(r){return Ec(e,r)}):typeof t=="string"?Gi(e,t):Object.keys(t).every(function(r){if(!xc[r])throw new Error('Unknown matcher type "'.concat(r,'"'));var a=xc[r],n=t[r];return a(e,n)})}var Ac=Ec;function dy(e,t){return Ac(e,t)}var lt=dy;lt.hasAccessibleName=hc,lt.attributes=vc,lt.condition=gc,lt.explicitRole=bc,lt.fromDefinition=Ac,lt.fromFunction=To,lt.fromPrimative=_r,lt.implicitRole=yc,lt.nodeName=wc,lt.properties=Dc,lt.semanticRole=_c;var ya=lt;function fy(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.noMatchAccessibleName,a=r===void 0?!1:r,n=he.htmlElms[e.props.nodeName];if(!n)return{};if(!n.variant)return n;var i=n.variant,o=qe(n,Fp);for(var u in i)if(!(!i.hasOwnProperty(u)||u==="default")){for(var s=i[u],l=s.matches,c=qe(s,Tp),d=Array.isArray(l)?l:[l],f=0;f<d.length&&a;f++)if(d[f].hasOwnProperty("hasAccessibleName"))return n;if(ya(e,l))for(var p in c)c.hasOwnProperty(p)&&(o[p]=c[p])}for(var m in i.default)i.default.hasOwnProperty(m)&&typeof o[m]>"u"&&(o[m]=i.default[m]);return o}var xr=fy;function py(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},r=t.chromium,a=e instanceof $e?e:le(e);if(e=a.actualNode,!a)throw new ReferenceError("Cannot get implicit role of a node outside the current scope.");var n=a.props.nodeName,i=Fo[n];if(!i&&r){var o=xr(a),u=o.chromiumRole;ret
Line truncated
|
||||
|
||||
`)}var gu=$w;function bu(){var e=x._audit.data.incompleteFallbackMessage;return typeof e=="function"&&(e=e()),typeof e!="string"?"":e}var E1=se.resultGroups;function Ma(e,t){var r=x.utils.aggregateResult(e);return E1.forEach(function(a){t.resultTypes&&!t.resultTypes.includes(a)&&(r[a]||[]).forEach(function(n){Array.isArray(n.nodes)&&n.nodes.length>0&&(n.nodes=[n.nodes[0]])}),r[a]=(r[a]||[]).map(function(n){return n=Object.assign({},n),Array.isArray(n.nodes)&&n.nodes.length>0&&(n.nodes=n.nodes.map(function(i){if(O(i.node)==="object"){var o=A1(i.node,t);Object.assign(i,o)}return delete i.result,delete i.node,Uw(i,t),i})),E1.forEach(function(i){return delete n[i]}),delete n.pageLevel,delete n.result,n})}),r}function Uw(e,t){["any","all","none"].forEach(function(r){Array.isArray(e[r])&&e[r].filter(function(a){return Array.isArray(a.relatedNodes)}).forEach(function(a){a.relatedNodes=a.relatedNodes.map(function(n){return A1(n,t)})})})}function A1(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},t=arguments.length>1?arguments[1]:void 0;e=ht.dqElmToSpec(e,t);var r={};if(x._audit.noHtml)r.html=null;else{var a;r.html=(a=e.source)!==null&&a!==void 0?a:"Undefined"}if(t.elementRef&&!e.fromFrame){var n;r.element=(n=e.element)!==null&&n!==void 0?n:null}if(t.selectors!==!1||e.fromFrame){var i;r.target=(i=e.selector)!==null&&i!==void 0?i:[":root"]}if(t.ancestry){var o;r.ancestry=(o=e.ancestry)!==null&&o!==void 0?o:[":root"]}if(t.xpath){var u;r.xpath=(u=e.xpath)!==null&&u!==void 0?u:["/"]}return r}var Gw=/\$\{\s?data\s?\}/g;function Kn(e,t){if(typeof t=="string")return e.replace(Gw,t);for(var r in t)if(t.hasOwnProperty(r)){var a=new RegExp("\\${\\s?data\\."+r+"\\s?}","g"),n=typeof t[r]>"u"?"":String(t[r]);e=e.replace(a,n)}return e}function C1(e,t){if(e){if(Array.isArray(t)){if(t.values=t.join(", "),typeof e.singular=="string"&&typeof e.plural=="string"){var r=t.length===1?e.singular:e.plural;return Kn(r,t)}return Kn(e,t)}if(typeof e=="string")return Kn(e,t);if(typeof t=="string"){var a=e[t];return Kn(a,t)}var n=e.default||bu();return t&&t.messageKey&&e[t.messageKey]&&(n=e[t.messageKey]),C1(n,t)}}var yu=C1;function Ww(e,t,r){var a=x._audit.data.checks[e];if(!a)throw new Error("Cannot get message for unknown check: ".concat(e,"."));if(!a.messages[t])throw new Error('Check "'.concat(e,'"" does not have a "').concat(t,'" message.'));return yu(a.messages[t],r)}var Yw=Ww;function Kw(e,t,r){var a=((r.rules&&r.rules[t]||{}).checks||{})[e.id],n=(r.checks||{})[e.id],i=e.enabled,o=e.options;return n&&(n.hasOwnProperty("enabled")&&(i=n.enabled),n.hasOwnProperty("options")&&(o=n.options)),a&&(a.hasOwnProperty("enabled")&&(i=a.enabled),a.hasOwnProperty("options")&&(o=a.options)),{enabled:i,options:o,absolutePaths:r.absolutePaths}}var Xn=Kw;function ur(){var e,t=arguments.length>0&&arguments[0]!==void 0?arguments[0]:null,r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:E;return t&&O(t)==="object"?t:O(r)!=="object"?{}:{testEngine:{name:"axe-core",version:x.version},testRunner:{name:x._audit.brand},testEnvironment:Xw(r),timestamp:new Date().toISOString(),url:(e=r.location)===null||e===void 0?void 0:e.href}}function Xw(e){if(!e.navigator||O(e.navigator)!=="object")return{};var t=e.navigator,r=e.innerHeight,a=e.innerWidth,n=Zw(e)||{},i=n.angle,o=n.type;return{userAgent:t.userAgent,windowWidth:a,windowHeight:r,orientationAngle:i,orientationType:o}}function Zw(e){var t=e.screen;return t.orientation||t.msOrientation||t.mozOrientation}function F1(e,t){var r=t.focusable,a=t.page;return{node:e,include:[],exclude:[],initiator:!1,focusable:r&&Jw(e),size:Qw(e),page:a}}function Jw(e){var t=Lt(e.getAttribute("tabindex"));return t===null||t>=0}function Qw(e){var t=parseInt(e.getAttribute("width"),10),r=parseInt(e.getAttribute("height"),10);if(isNaN(t)||isNaN(r)){var a=e.getBoundingClientRect();t=isNaN(t)?a.width:t,r=isNaN(r)?a.height:r}return{width:t,height:r}}function eD(e){if(Du(e)){var t=" must be used inside include or exclude. It should not be on the same object.";sr(!Nt(e,"fromFrames"),"fromFrames"+t),sr(!Nt(e,"fromShadowDom"),"fromShadowDom"+t)}else if(Jn(e))e={include:e,exclude:[]};else return{include:[L],exclude:[]};var r=T1(e.include);r.length===0&&r.push(L);var a=T1(e.exclude);return{include:r,exclude:a}}function T1(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:[],t=[];wu(e)||(e=[e]);for(var r=0;r<e.length;r++){var a=tD(e[r]);a&&t.push(a)}return t}function tD(e){return e instanceof E.Node?e:typeof e=="string"?[e]:(_u(e)?(aD(e),e=e.fromFrames):Qn(e)&&(e=[e]),rD(e))}function rD(e){if(Array.isArray(e)){var t=[],r=Ce(e),a;try{for(r.s();!(a=r.n()).done;){var n=a.value;if(Qn(n)&&(nD(n),n=n.fromShadowDom),typeof n!="string"&&!iD(n))return;t.push(n)}}catch(i){r.e(i)}finally{r.f()}return t}}function aD(e){sr(Array.isArray(e.fromFrames),"fromFrames property must be an array"),sr(e.fromFrames.every(function(t){return!Nt(t,"fromFrames")}),"Invalid context; fromFrames selector must be appended, rather than nested")
Line truncated
|
||||
See: https://github.com/dequelabs/axe-core/blob/master/doc/context.md`))}function R1(e,t){for(var r=[],a=0,n=e[t].length;a<n;a++){var i=e[t][a];if(i instanceof E.Node)i.documentElement instanceof E.Node?r.push(e.flatTree[0]):r.push(le(i));else if(i&&i.length)if(i.length>1)oD(e,t,i);else{var o=Su(i[0]);r.push.apply(r,ne(o.map(function(u){return le(u)})))}}return r.filter(function(u){return u})}function oD(e,t,r){e.frames=e.frames||[];var a=r.shift(),n=Su(a);n.forEach(function(i){var o=e.frames.find(function(u){return u.node===i});o||(o=F1(i,e),e.frames.push(o)),o[t].push(r)})}function Zn(e,t){var r,a,n,i,o=this;e=$t(e),this.frames=[],this.page=typeof((r=e)===null||r===void 0?void 0:r.page)=="boolean"?e.page:void 0,this.initiator=typeof((a=e)===null||a===void 0?void 0:a.initiator)=="boolean"?e.initiator:!0,this.focusable=typeof((n=e)===null||n===void 0?void 0:n.focusable)=="boolean"?e.focusable:!0,this.size=O((i=e)===null||i===void 0?void 0:i.size)==="object"?e.size:{},e=eD(e),this.flatTree=t??hu(cD(e)),this.exclude=e.exclude,this.include=e.include,this.include=R1(this,"include"),this.exclude=R1(this,"exclude"),Ru("frame, iframe",this).forEach(function(u){Eu(u,o)&&uD(o,u.actualNode)}),typeof this.page>"u"&&(this.page=sD(this),this.frames.forEach(function(u){u.page=o.page})),lD(this),Array.isArray(this.include)||(this.include=Array.from(this.include)),this.include.sort(Cu)}function uD(e,t){!Re(t)||fa(e.frames,"node",t)||e.frames.push(F1(t,e))}function sD(e){var t=e.include;return t.length===1&&t[0].actualNode===L.documentElement}function lD(e){if(e.include.length===0&&e.frames.length===0){var t=Et.isInFrame()?"frame":"page";throw new Error("No elements found for include in "+t+" Context")}}function cD(e){for(var t=e.include,r=e.exclude,a=Array.from(t).concat(Array.from(r)),n=0;n<a.length;n++){var i=a[n];if(i instanceof E.Element)return i.ownerDocument.documentElement;if(i instanceof E.Document)return i.documentElement}return L.documentElement}function dD(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{};if(t.iframes===!1)return[];var r=new Zn(e),a=r.frames;return a.map(function(n){var i=n.node,o=qe(n,Lp);o.initiator=!1;var u=an(i);return{frameSelector:u,frameContext:o}})}function S1(e){var t=x._audit.rules.find(function(r){var a=r.id;return a===e});if(!t)throw new Error("Cannot find rule by id: ".concat(e));return t}function fD(e){var t=arguments.length>1&&arguments[1]!==void 0?arguments[1]:0,r=e.scrollWidth>e.clientWidth+t,a=e.scrollHeight>e.clientHeight+t;if(r||a){var n=E.getComputedStyle(e),i=k1(n,"overflow-x"),o=k1(n,"overflow-y");if(r&&i||a&&o)return{elm:e,top:e.scrollTop,left:e.scrollLeft}}}function k1(e,t){var r=e.getPropertyValue(t);return["scroll","auto"].includes(r)}var Yt=Fe(fD);function O1(e){return Array.from(e.children||e.childNodes||[]).reduce(function(t,r){var a=Yt(r);return a&&t.push(a),t.concat(O1(r))},[])}function pD(){var e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:E,t=e.document.documentElement,r=[e.pageXOffset!==void 0?{elm:e,top:e.pageYOffset,left:e.pageXOffset}:{elm:t,top:t.scrollTop,left:t.scrollLeft}];return r.concat(O1(L.body))}var mD=pD;function hD(){return $t(he)}function vD(e){if(!e)throw new Error("axe.utils.getStyleSheetFactory should be invoked with an argument");return function(t){var r=t.data,a=t.isCrossOrigin,n=a===void 0?!1:a,i=t.shadowId,o=t.root,u=t.priority,s=t.isLink,l=s===void 0?!1:s,c=e.createElement("style");if(l){var d=e.createTextNode('@import "'.concat(r.href,'"'));c.appendChild(d)}else c.appendChild(e.createTextNode(r));return e.head.appendChild(c),{sheet:c.sheet,isCrossOrigin:n,shadowId:i,root:o,priority:u}}}var M1=vD,dt;function gD(e){if(dt&&dt.parentNode)return dt.styleSheet===void 0?dt.appendChild(L.createTextNode(e)):dt.styleSheet.cssText+=e,dt;if(e){var t=L.head||L.getElementsByTagName("head")[0];return dt=L.createElement("style"),dt.type="text/css",dt.styleSheet===void 0?dt.appendChild(L.createTextNode(e)):dt.styleSheet.cssText=e,t.appendChild(dt),dt}}var bD=gD;function wu(e){return!!e&&O(e)==="object"&&typeof e.length=="number"&&!(e instanceof E.Node)}function Nt(e,t){return!e||O(e)!=="object"?!1:Object.prototype.hasOwnProperty.call(e,t)}function I1(e){return Du(e)||Jn(e)}function Du(e){return["include","exclude"].some(function(t){return Nt(e,t)&&Jn(e[t])})}function Jn(e){return typeof e=="string"||e instanceof E.Node||_u(e)||Qn(e)||wu(e)}function _u(e){return Nt(e,"fromFrames")}function Qn(e){return Nt(e,"fromShadowDom")}function P1(e,t){var r=le(e);if(e.nodeType===9)return!1;if(e.nodeType===11&&(e=e.host),r&&r._isHidden!==null)return r._isHidden;var a=E.getComputedStyle(e,null);if(!a||!e.parentNode||a.getPropertyValue("display")==="none"||!t&&a.getPropertyValue("visibility")==="hidden"||e.getAttribute("aria-hidden")==="true")return!0;var n=e.assignedSlot?e.assignedSlot:e.parentNode,i=P1(n,!0);return r&&(r._isHidden=i),i}var yD=P1;function wD(e){var t,r,a=(t=(r=e.props)===null||r===void 0?void 0:r.nodeName)!==null&&t!==void
Line truncated
|
||||
[aria-controls~="`).concat(o,'"][role~="combobox"]:not(select)'));return Array.from(s).some(yf)}var yf=function(t){return t&&ce(t)==="combobox"};function V_(e){for(;e=e.parent;)if(ce(e,{noPresentational:!0})!==null)return e;return null}function H_(e){return e=le(e),An(e)}var wf=H_;function $_(e){var t=he.ariaRoles[e];return!t||!Array.isArray(t.requiredAttrs)?[]:ne(t.requiredAttrs)}var Df=$_;function U_(e){var t=he.ariaRoles[e];return!t||!Array.isArray(t.requiredContext)?null:ne(t.requiredContext)}var Bu=U_;function G_(e){var t=he.ariaRoles[e];return!t||!Array.isArray(t.requiredOwned)?null:ne(t.requiredOwned)}var qu=G_;function W_(e,t){e=e instanceof $e?e:le(e);var r,a,n=e.attr(t),i=he.ariaAttrs[t];if(!i||i.allowEmpty&&(!n||n.trim()===""))return!0;switch(i.type){case"boolean":return["true","false"].includes(n.toLowerCase());case"nmtoken":return typeof n=="string"&&i.values.includes(n.toLowerCase());case"nmtokens":return a=Ze(n),a.reduce(function(s,l){return s&&i.values.includes(l)},a.length!==0);case"idref":try{var o=Xe(e.actualNode);return!!(n&&o.getElementById(n))}catch{throw new TypeError("Cannot resolve id references for partial DOM")}case"idrefs":return Ot(e,t).some(function(s){return!!s});case"string":return n.trim()!=="";case"decimal":return r=n.match(/^[-+]?([0-9]*)\.?([0-9]*)$/),!!(r&&(r[1]||r[2]));case"int":var u=typeof i.minValue<"u"?i.minValue:-1/0;return/^[-+]?[0-9]+$/.test(n)&&parseInt(n)>=u}}var _f=W_;function Y_(e){var t=he.ariaAttrs[e];return!!t}var oi=Y_;function K_(e){var t=[],r=Mu(e),a=Wt(e);return r.forEach(function(n){if(Fn(n)&&cf(n)&&!wf(n)){var i=ai(n,a).some(function(o){return o!==null&&!!Fn(o)});i||t.push(n)}}),t.length?(this.relatedNodes(t),!1):!0}var X_=K_;function Z_(e,t){var r=e.getAttribute("scope").toLowerCase();return t.values.indexOf(r)!==-1}var J_=Z_,Q_=ex;function ex(e,t,r){if(r.children!==void 0){var a=r.attr("summary"),n=r.children.find(tx),i=n?re(tr(n)):!1;return!i||!a?!1:re(a).toLowerCase()===re(i).toLowerCase()}}function tx(e){return e.props.nodeName==="caption"}function rx(e){return td(L)?e.nodeName.toUpperCase()==="TH":!0}var ax=rx;function nx(e){var t=Wt(e),r=t[0];return t.length<=1||r.length<=1||e.rows.length<=1?!0:r.reduce(function(a,n,i){return a||n!==r[i+1]&&r[i+1]!==void 0},!1)}var ix=nx;function ox(e,t,r){if(r.children){var a=r.children.find(function(i){var o=i.props;return o.nodeName==="title"});if(!a)return this.data({messageKey:"noTitle"}),!1;try{var n=tr(a,{includeHidden:!0}).trim();if(n==="")return this.data({messageKey:"emptyTitle"}),!1}catch{return}return!0}}var ux=ox,xf={};Dt(xf,{getAriaRolesByType:function(){return Ur},getAriaRolesSupportingNameFromContent:function(){return Nu},getElementSpec:function(){return xr},getElementsByContentType:function(){return Eo},getGlobalAriaAttrs:function(){return Dr},implicitHtmlRoles:function(){return Fo}});function sx(e,t,r){var a=De(r);if(["presentation","none"].includes(a)&&["iframe","frame"].includes(r.props.nodeName)&&r.hasAttr("title"))return this.data({messageKey:"iframe",nodeName:r.props.nodeName}),!1;var n=ce(r);if(["presentation","none"].includes(n))return this.data({role:n}),!0;if(!["presentation","none"].includes(a))return!1;var i=Dr().some(function(s){return r.hasAttr(s)}),o=Ne(r),u;return i&&!o?u="globalAria":!i&&o?u="focusable":u="both",this.data({messageKey:u,role:n}),!1}function lx(e,t,r){var a=r.props.nodeName,n=(r.attr("type")||"").toLowerCase(),i=r.attr("value");return i&&this.data({messageKey:"has-label"}),a==="input"&&["submit","reset"].includes(n)?i===null:!1}var cx=lx;function dx(e){return st(e)}var fx=dx;function px(e,t){var r=t.cssProperty,a=t.absoluteValues,n=t.minValue,i=t.maxValue,o=t.normalValue,u=o===void 0?0:o,s=t.noImportant,l=t.multiLineOnly;if(!s&&e.style.getPropertyPriority(r)!=="important"||l&&!nd(e))return!0;var c={};typeof n=="number"&&(c.minValue=n),typeof i=="number"&&(c.maxValue=i);var d=e.style.getPropertyValue(r);if(["inherit","unset","revert","revert-layer"].includes(d))return this.data(de({value:d},c)),!0;var f=mx(e,{absoluteValues:a,cssProperty:r,normalValue:u});if(this.data(de({value:f},c)),typeof f=="number")return(typeof n!="number"||f>=n)&&(typeof i!="number"||f<=i)}function mx(e,t){var r=t.cssProperty,a=t.absoluteValues,n=t.normalValue,i=E.getComputedStyle(e),o=i.getPropertyValue(r);if(o==="normal")return n;var u=parseFloat(o);if(a)return u;var s=parseFloat(i.getPropertyValue("font-size")),l=Math.round(u/s*100)/100;return isNaN(l)?o:l}function hx(e,t,r){var a=r.props.nodeName;return["img","input","area"].includes(a)?r.hasAttr("alt"):!1}var vx=hx;function gx(){}var bx=gx;function yx(){var e=L.title;return!!re(e)}var wx=yx;function Dx(e,t){var r=t.cssProperties.filter(function(a){if(e.style.getPropertyPriority(a)==="important")return a});return r.length>0?(this.data(r),!1):!0}var _x=Dx;function xx(e,t,r){try{return!!re(ga(r))}catch{return}}var Ex=xx;function Ax(e,t,r){return!!re(ba(r))}var Cx=Ax;function Fx(e){var t=e.getAttribute("id").trim();if(!t)return!0;vaLine truncated
|
||||
`+Te.split(`
|
||||
`).join(`
|
||||
`);return j}},none:{failureMessage:function(k){var j="Fix all of the following:",J=k;if(J)for(var Te,Pe=-1,Ke=J.length-1;Pe<Ke;)Te=J[Pe+=1],j+=`
|
||||
`+Te.split(`
|
||||
`).join(`
|
||||
`);return j}}},incompleteFallbackMessage:"axe couldn't tell the reason. Time to break out the element inspector!"},rules:[{id:"accesskeys",impact:"serious",selector:"[accesskey]",excludeHidden:!1,tags:["cat.keyboard","best-practice"],all:[],any:[],none:["accesskeys"]},{id:"area-alt",impact:"critical",selector:"map area[href]",excludeHidden:!1,tags:["cat.text-alternatives","wcag2a","wcag244","wcag412","section508","section508.22.a","TTv5","TT6.a","EN-301-549","EN-9.2.4.4","EN-9.4.1.2","ACT"],actIds:["c487ae"],all:[],any:[{options:{attribute:"alt"},id:"non-empty-alt"},"aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:[]},{id:"aria-allowed-attr",impact:"critical",matches:"aria-allowed-attr-matches",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],actIds:["5c01ea"],all:[{options:{validTreeRowAttrs:["aria-posinset","aria-setsize","aria-expanded","aria-level"]},id:"aria-allowed-attr"}],any:[],none:["aria-unsupported-attr"]},{id:"aria-allowed-role",impact:"minor",excludeHidden:!1,selector:"[role]",matches:"aria-allowed-role-matches",tags:["cat.aria","best-practice"],all:[],any:[{options:{allowImplicit:!0,ignoredTags:[]},id:"aria-allowed-role"}],none:[]},{id:"aria-braille-equivalent",reviewOnFail:!0,impact:"serious",selector:"[aria-brailleroledescription], [aria-braillelabel]",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],all:["braille-roledescription-equivalent","braille-label-equivalent"],any:[],none:[]},{id:"aria-command-name",impact:"serious",selector:'[role="link"], [role="button"], [role="menuitem"]',matches:"no-naming-method-matches",tags:["cat.aria","wcag2a","wcag412","TTv5","TT6.a","EN-301-549","EN-9.4.1.2","ACT"],actIds:["97a4e1"],all:[],any:["has-visible-text","aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:[]},{id:"aria-conditional-attr",impact:"serious",matches:"aria-allowed-attr-matches",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],actIds:["5c01ea"],all:[{options:{invalidTableRowAttrs:["aria-posinset","aria-setsize","aria-expanded","aria-level"]},id:"aria-conditional-attr"}],any:[],none:[]},{id:"aria-deprecated-role",impact:"minor",selector:"[role]",matches:"no-empty-role-matches",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],actIds:["674b10"],all:[],any:[],none:["deprecatedrole"]},{id:"aria-dialog-name",impact:"serious",selector:'[role="dialog"], [role="alertdialog"]',matches:"no-naming-method-matches",tags:["cat.aria","best-practice"],all:[],any:["aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:[]},{id:"aria-hidden-body",impact:"critical",selector:"body",excludeHidden:!1,matches:"is-initiator-matches",tags:["cat.aria","wcag2a","wcag131","wcag412","EN-301-549","EN-9.1.3.1","EN-9.4.1.2"],all:[],any:["aria-hidden-body"],none:[]},{id:"aria-hidden-focus",impact:"serious",selector:'[aria-hidden="true"]',matches:"aria-hidden-focus-matches",excludeHidden:!1,tags:["cat.name-role-value","wcag2a","wcag412","TTv5","TT6.a","EN-301-549","EN-9.4.1.2"],actIds:["6cfa84"],all:["focusable-modal-open","focusable-disabled","focusable-not-tabbable"],any:[],none:[]},{id:"aria-input-field-name",impact:"serious",selector:'[role="combobox"], [role="listbox"], [role="searchbox"], [role="slider"], [role="spinbutton"], [role="textbox"]',matches:"no-naming-method-matches",tags:["cat.aria","wcag2a","wcag412","TTv5","TT5.c","EN-301-549","EN-9.4.1.2","ACT"],actIds:["e086e5"],all:[],any:["aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:["no-implicit-explicit-label"]},{id:"aria-meter-name",impact:"serious",selector:'[role="meter"]',matches:"no-naming-method-matches",tags:["cat.aria","wcag2a","wcag111","EN-301-549","EN-9.1.1.1"],all:[],any:["aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:[]},{id:"aria-progressbar-name",impact:"serious",selector:'[role="progressbar"]',matches:"no-naming-method-matches",tags:["cat.aria","wcag2a","wcag111","EN-301-549","EN-9.1.1.1"],all:[],any:["aria-label","aria-labelledby",{options:{attribute:"title"},id:"non-empty-title"}],none:[]},{id:"aria-prohibited-attr",impact:"serious",matches:"aria-allowed-attr-matches",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],actIds:["5c01ea"],all:[],any:[],none:[{options:{elementsAllowedAriaLabel:["applet","input"]},id:"aria-prohibited-attr"}]},{id:"aria-required-attr",impact:"critical",selector:"[role]",tags:["cat.aria","wcag2a","wcag412","EN-301-549","EN-9.4.1.2"],actIds:["4e8ab6"],all:[],any:["aria-required-attr"],none:[]},{id:"aria-required-children",impact:"critical",selector:"[role]",matches:"aria-required-children-matches",tags:["cat.aria","wcag2a","wcag131","EN-301-549","EN-9.1.3.1"],actIds:["bc4a75","ff89c9"],all:[],any:[{options:{reviewEmpty:["doc-bibliography","doc-endnotes","grid","list","listbox","menu","menubar","table","tablist","tree","treegrid","rowgroup"]},id:"aria-required-ch
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--spacing:.25rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--spacing-scale-000:0px;--spacing-scale-001:1px;--spacing-scale-002:2px;--spacing-scale-003:3px;--spacing-scale-004:4px;--spacing-scale-006:6px;--spacing-scale-008:8px;--spacing-scale-010:10px;--spacing-scale-012:12px;--spacing-scale-016:16px;--spacing-scale-020:20px;--spacing-scale-024:24px;--spacing-scale-032:32px;--spacing-scale-040:40px;--spacing-scale-048:48px;--spacing-scale-056:56px;--spacing-scale-060:60px;--spacing-scale-064:64px;--spacing-scale-076:76px;--spacing-scale-096:96px;--spacing-scale-120:120px;--spacing-measures-spacing-004:var(--spacing-scale-004);--spacing-measures-spacing-008:var(--spacing-scale-008);--spacing-measures-spacing-010:var(--spacing-scale-010);--spacing-measures-spacing-012:var(--spacing-scale-012);--spacing-measures-spacing-016:var(--spacing-scale-016);--spacing-measures-spacing-024:var(--spacing-scale-024);--spacing-measures-spacing-032:var(--spacing-scale-032);--spacing-measures-spacing-040:var(--spacing-scale-040);--spacing-measures-spacing-048:var(--spacing-scale-048);--spacing-measures-spacing-060:var(--spacing-scale-060);--spacing-measures-spacing-064:var(--spacing-scale-064);--spacing-measures-spacing-096:var(--spacing-scale-096);--spacing-measures-spacing-120:var(--spacing-scale-120);--radius-measures-radius-full:var(--spacing-scale-120);--color-community-yellow-100:oklch(98.48% .055 105.21);--color-community-yellow-400:oklch(84.34% .097 101.09);--color-community-yellow-500:oklch(76.71% .094 100.01);--color-community-yellow-800:oklch(42.89% .054 98.59);--color-community-yellow-900:oklch(30.32% .036 99.23);--color-community-orange-300:oklch(69.29% .124 217.83);--color-community-orange-400:oklch(50.04% .102 233.41);--color-yellow-opacity-100:oklch(30.32% .036 99.23/.1);--color-yellow-opacity-300:oklch(55.29% .069 98.1/.3);--color-yellow-opacity-400:oklch(66.85% .083 99.46/.4);--color-yellow-opacity-700:oklch(90.22% .095 102.92/.7);--color-opacity-000:oklch(97.31% 0 263.28/0);--color-opacity-200:oklch(91.28% 0 263.28/.5);--color-opacity-300:oklch(84.21% 0 263.28/.5);--color-gray-000:oklch(100% 0 263.28);--color-gray-100:oklch(92.19% 0 263.28);--color-gray-200:oklch(86.38% 0 263.28);--color-gray-300:oklch(76.99% 0 263.28);--color-gray-60Line truncated
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1 @@
|
||||
import{R as e}from"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";const o={},c=e.createContext(o);function u(n){const t=e.useContext(c);return e.useMemo(function(){return typeof n=="function"?n(t):{...t,...n}},[t,n])}function r(n){let t;return n.disableParentContext?t=typeof n.components=="function"?n.components(o):n.components||o:t=u(n.components),e.createElement(c.Provider,{value:t},n.children)}export{r as MDXProvider,u as useMDXComponents};
|
||||
@@ -0,0 +1 @@
|
||||
import{b as r}from"./iframe-D_aMTKb2.js";var s=r();export{s as j};
|
||||
@@ -0,0 +1,14 @@
|
||||
var _e=(e=0)=>t=>`\x1B[${t+e}m`,Ee=(e=0)=>t=>`\x1B[${38+e};5;${t}m`,he=(e=0)=>(t,n,i)=>`\x1B[${38+e};2;${t};${n};${i}m`,P={modifier:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],overline:[53,55],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},color:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],blackBright:[90,39],gray:[90,39],grey:[90,39],redBright:[91,39],greenBright:[92,39],yellowBright:[93,39],blueBright:[94,39],magentaBright:[95,39],cyanBright:[96,39],whiteBright:[97,39]},bgColor:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49],bgBlackBright:[100,49],bgGray:[100,49],bgGrey:[100,49],bgRedBright:[101,49],bgGreenBright:[102,49],bgYellowBright:[103,49],bgBlueBright:[104,49],bgMagentaBright:[105,49],bgCyanBright:[106,49],bgWhiteBright:[107,49]}};Object.keys(P.modifier);var Ie=Object.keys(P.color),we=Object.keys(P.bgColor);[...Ie,...we];function je(){let e=new Map;for(let[t,n]of Object.entries(P)){for(let[i,c]of Object.entries(n))P[i]={open:`\x1B[${c[0]}m`,close:`\x1B[${c[1]}m`},n[i]=P[i],e.set(c[0],c[1]);Object.defineProperty(P,t,{value:n,enumerable:!1})}return Object.defineProperty(P,"codes",{value:e,enumerable:!1}),P.color.close="\x1B[39m",P.bgColor.close="\x1B[49m",P.color.ansi=_e(),P.color.ansi256=Ee(),P.color.ansi16m=he(),P.bgColor.ansi=_e(10),P.bgColor.ansi256=Ee(10),P.bgColor.ansi16m=he(10),Object.defineProperties(P,{rgbToAnsi256:{value(t,n,i){return t===n&&n===i?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(i/255*5)},enumerable:!1},hexToRgb:{value(t){let n=/[a-f\d]{6}|[a-f\d]{3}/i.exec(t.toString(16));if(!n)return[0,0,0];let[i]=n;i.length===3&&(i=[...i].map(_=>_+_).join(""));let c=Number.parseInt(i,16);return[c>>16&255,c>>8&255,c&255]},enumerable:!1},hexToAnsi256:{value:t=>P.rgbToAnsi256(...P.hexToRgb(t)),enumerable:!1},ansi256ToAnsi:{value(t){if(t<8)return 30+t;if(t<16)return 90+(t-8);let n,i,c;if(t>=232)n=((t-232)*10+8)/255,i=n,c=n;else{t-=16;let u=t%36;n=Math.floor(t/36)/5,i=Math.floor(u/6)/5,c=u%6/5}let _=Math.max(n,i,c)*2;if(_===0)return 30;let p=30+(Math.round(c)<<2|Math.round(i)<<1|Math.round(n));return _===2&&(p+=60),p},enumerable:!1},rgbToAnsi:{value:(t,n,i)=>P.ansi256ToAnsi(P.rgbToAnsi256(t,n,i)),enumerable:!1},hexToAnsi:{value:t=>P.ansi256ToAnsi(P.hexToAnsi256(t)),enumerable:!1}}),P}var Be=je(),x=Be,Oe=(()=>{if(!("navigator"in globalThis))return 0;if(globalThis.navigator.userAgentData){let e=navigator.userAgentData.brands.find(({brand:t})=>t==="Chromium");if(e&&e.version>93)return 3}return/\b(Chrome|Chromium)\//.test(globalThis.navigator.userAgent)?1:0})(),Te=Oe!==0&&{level:Oe},Le={stdout:Te,stderr:Te},De=Le;function Fe(e,t,n){let i=e.indexOf(t);if(i===-1)return e;let c=t.length,_=0,p="";do p+=e.slice(_,i)+t+n,_=i+c,i=e.indexOf(t,_);while(i!==-1);return p+=e.slice(_),p}function ke(e,t,n,i){let c=0,_="";do{let p=e[i-1]==="\r";_+=e.slice(c,p?i-1:i)+t+(p?`\r
|
||||
`:`
|
||||
`)+n,c=i+1,i=e.indexOf(`
|
||||
`,c)}while(i!==-1);return _+=e.slice(c),_}var{stdout:Se,stderr:Me}=De,de=Symbol("GENERATOR"),V=Symbol("STYLER"),J=Symbol("IS_EMPTY"),Ae=["ansi","ansi","ansi256","ansi16m"],H=Object.create(null),Ye=(e,t={})=>{if(t.level&&!(Number.isInteger(t.level)&&t.level>=0&&t.level<=3))throw new Error("The `level` option should be an integer from 0 to 3");let n=Se?Se.level:0;e.level=t.level===void 0?n:t.level},ze=e=>{let t=(...n)=>n.join(" ");return Ye(t,e),Object.setPrototypeOf(t,X.prototype),t};function X(e){return ze(e)}Object.setPrototypeOf(X.prototype,Function.prototype);for(let[e,t]of Object.entries(x))H[e]={get(){let n=ie(this,pe(t.open,t.close,this[V]),this[J]);return Object.defineProperty(this,e,{value:n}),n}};H.visible={get(){let e=ie(this,this[V],!0);return Object.defineProperty(this,"visible",{value:e}),e}};var fe=(e,t,n,...i)=>e==="rgb"?t==="ansi16m"?x[n].ansi16m(...i):t==="ansi256"?x[n].ansi256(x.rgbToAnsi256(...i)):x[n].ansi(x.rgbToAnsi(...i)):e==="hex"?fe("rgb",t,n,...x.hexToRgb(...i)):x[n][e](...i),Ue=["rgb","hex","ansi256"];for(let e of Ue){H[e]={get(){let{level:n}=this;return function(...i){let c=pe(fe(e,Ae[n],"color",...i),x.color.close,this[V]);return ie(this,c,this[J])}}};let t="bg"+e[0].toUpperCase()+e.slice(1);H[t]={get(){let{level:n}=this;return function(...i){let c=pe(fe(e,Ae[n],"bgColor",...i),x.bgColor.close,this[V]);return ie(this,c,this[J])}}}}var xe=Object.defineProperties(()=>{},{...H,level:{enumerable:!0,get(){return this[de].level},set(e){this[de].level=e}}}),pe=(e,t,n)=>{let i,c;return n===void 0?(i=e,c=t):(i=n.openAll+e,c=t+n.closeAll),{open:e,close:t,openAll:i,closeAll:c,parent:n}},ie=(e,t,n)=>{let i=(...c)=>Ge(i,c.length===1?""+c[0]:c.join(" "));return Object.setPrototypeOf(i,xe),i[de]=e,i[V]=t,i[J]=n,i},Ge=(e,t)=>{if(e.level<=0||!t)return e[J]?"":t;let n=e[V];if(n===void 0)return t;let{openAll:i,closeAll:c}=n;if(t.includes("\x1B"))for(;n!==void 0;)t=Fe(t,n.close,n.open),n=n.parent;let _=t.indexOf(`
|
||||
`);return _!==-1&&(t=ke(t,c,i,_)),i+t+c};Object.defineProperties(X.prototype,H);var qe=X();X({level:Me?Me.level:0});var W=qe,We=Object.create,Pe=Object.defineProperty,Ve=Object.getOwnPropertyDescriptor,Re=Object.getOwnPropertyNames,He=Object.getPrototypeOf,Ke=Object.prototype.hasOwnProperty,F=(e,t)=>function(){return t||(0,e[Re(e)[0]])((t={exports:{}}).exports,t),t.exports},Je=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of Re(t))!Ke.call(e,c)&&c!==n&&Pe(e,c,{get:()=>t[c],enumerable:!(i=Ve(t,c))||i.enumerable});return e},Xe=(e,t,n)=>(n=e!=null?We(He(e)):{},Je(Pe(n,"default",{value:e,enumerable:!0}),e)),Ne=F({"node_modules/pretty-format/node_modules/ansi-styles/index.js"(e,t){var n=10,i=(p=0)=>u=>`\x1B[${38+p};5;${u}m`,c=(p=0)=>(u,y,o)=>`\x1B[${38+p};2;${u};${y};${o}m`;function _(){let p=new Map,u={modifier:{reset:[0,0],bold:[1,22],dim:[2,22],italic:[3,23],underline:[4,24],overline:[53,55],inverse:[7,27],hidden:[8,28],strikethrough:[9,29]},color:{black:[30,39],red:[31,39],green:[32,39],yellow:[33,39],blue:[34,39],magenta:[35,39],cyan:[36,39],white:[37,39],blackBright:[90,39],redBright:[91,39],greenBright:[92,39],yellowBright:[93,39],blueBright:[94,39],magentaBright:[95,39],cyanBright:[96,39],whiteBright:[97,39]},bgColor:{bgBlack:[40,49],bgRed:[41,49],bgGreen:[42,49],bgYellow:[43,49],bgBlue:[44,49],bgMagenta:[45,49],bgCyan:[46,49],bgWhite:[47,49],bgBlackBright:[100,49],bgRedBright:[101,49],bgGreenBright:[102,49],bgYellowBright:[103,49],bgBlueBright:[104,49],bgMagentaBright:[105,49],bgCyanBright:[106,49],bgWhiteBright:[107,49]}};u.color.gray=u.color.blackBright,u.bgColor.bgGray=u.bgColor.bgBlackBright,u.color.grey=u.color.blackBright,u.bgColor.bgGrey=u.bgColor.bgBlackBright;for(let[y,o]of Object.entries(u)){for(let[m,s]of Object.entries(o))u[m]={open:`\x1B[${s[0]}m`,close:`\x1B[${s[1]}m`},o[m]=u[m],p.set(s[0],s[1]);Object.defineProperty(u,y,{value:o,enumerable:!1})}return Object.defineProperty(u,"codes",{value:p,enumerable:!1}),u.color.close="\x1B[39m",u.bgColor.close="\x1B[49m",u.color.ansi256=i(),u.color.ansi16m=c(),u.bgColor.ansi256=i(n),u.bgColor.ansi16m=c(n),Object.defineProperties(u,{rgbToAnsi256:{value:(y,o,m)=>y===o&&o===m?y<8?16:y>248?231:Math.round((y-8)/247*24)+232:16+36*Math.round(y/255*5)+6*Math.round(o/255*5)+Math.round(m/255*5),enumerable:!1},hexToRgb:{value:y=>{let o=/(?<colorString>[a-f\d]{6}|[a-f\d]{3})/i.exec(y.toString(16));if(!o)return[0,0,0];let{colorString:m}=o.groups;m.length===3&&(m=m.split("").map(l=>l+l).join(""));let s=Number.parseInt(m,16);return[s>>16&255,s>>8&255,s&255]},enumerable:!1},hexToAnsi256:{value:y=>u.rgbToAnsi256(...u.hexToRgb(y)),enumerable:!1}}),u}Object.defineProperty(t,"exports",{enumerable:!0,get:_})}}),oe=F({"node_modules/pretty-format/build/collections.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.printIteratorEntries=n,e.printIteratorValues=i,e.printListItems=c,e.printObjectProperties=_;var t=(p,u)=>{let y=Object.keys(p).sort(u);return Object.getOwnPropertySymbols&&Object.getOwnPropertySymbols(p).forEach(o=>{Object.getOwnPropertyDescriptor(p,o).enumerable&&y.push(o)}),y};function n(p,u,y,o,m,s,l=": "){let a="",d=0,g=p.next();if(!g.done){a+=u.spacingOuter;let E=y+u.indent;for(;!g.done;){if(a+=E,d++===u.maxWidth){a+="…";break}let O=s(g.value[0],u,E,o,m),A=s(g.value[1],u,E,o,m);a+=O+l+A,g=p.next(),g.done?u.min||(a+=","):a+=`,${u.spacingInner}`}a+=u.spacingOuter+y}return a}function i(p,u,y,o,m,s){let l="",a=0,d=p.next();if(!d.done){l+=u.spacingOuter;let g=y+u.indent;for(;!d.done;){if(l+=g,a++===u.maxWidth){l+="…";break}l+=s(d.value,u,g,o,m),d=p.next(),d.done?u.min||(l+=","):l+=`,${u.spacingInner}`}l+=u.spacingOuter+y}return l}function c(p,u,y,o,m,s){let l="";if(p.length){l+=u.spacingOuter;let a=y+u.indent;for(let d=0;d<p.length;d++){if(l+=a,d===u.maxWidth){l+="…";break}d in p&&(l+=s(p[d],u,a,o,m)),d<p.length-1?l+=`,${u.spacingInner}`:u.min||(l+=",")}l+=u.spacingOuter+y}return l}function _(p,u,y,o,m,s){let l="",a=t(p,u.compareKeys);if(a.length){l+=u.spacingOuter;let d=y+u.indent;for(let g=0;g<a.length;g++){let E=a[g],O=s(E,u,d,o,m),A=s(p[E],u,d,o,m);l+=`${d+O}: ${A}`,g<a.length-1?l+=`,${u.spacingInner}`:u.min||(l+=",")}l+=u.spacingOuter+y}return l}}}),Ze=F({"node_modules/pretty-format/build/plugins/AsymmetricMatcher.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.test=e.serialize=e.default=void 0;var t=oe(),n=globalThis["jest-symbol-do-not-touch"]||globalThis.Symbol,i=typeof n=="function"&&n.for?n.for("jest.asymmetricMatcher"):1267621,c=" ",_=(o,m,s,l,a,d)=>{let g=o.toString();if(g==="ArrayContaining"||g==="ArrayNotContaining")return++l>m.maxDepth?`[${g}]`:`${g+c}[${(0,t.printListItems)(o.sample,m,s,l,a,d)}]`;if(g==="ObjectContaining"||g==="ObjectNotContaining")return++l>m.maxDepth?`[${g}]`:`${g+c}{${(0,t.printObjectProperties)(o.sample,m,s,l,a,d)}}`;if(g==="StringMatching"||g==="StringNotMatching"||g==="StringContaining"||g==="StringNotContaining")return g+c+d(o.sample,m,s,l,a);if(typeof o.toAsymmetricMatcher!="fu
Line truncated
|
||||
`)!==-1&&(j=s.spacingOuter+E+j+s.spacingOuter+l),j=`{${j}}`),`${s.spacingInner+l+O.prop.open+A+O.prop.close}=${O.value.open}${j}${O.value.close}`}).join("")};e.printProps=i;var c=(o,m,s,l,a,d)=>o.map(g=>m.spacingOuter+s+(typeof g=="string"?_(g,m):d(g,m,s,l,a))).join("");e.printChildren=c;var _=(o,m)=>{let s=m.colors.content;return s.open+(0,t.default)(o)+s.close};e.printText=_;var p=(o,m)=>{let s=m.colors.comment;return`${s.open}<!--${(0,t.default)(o)}-->${s.close}`};e.printComment=p;var u=(o,m,s,l,a)=>{let d=l.colors.tag;return`${d.open}<${o}${m&&d.close+m+l.spacingOuter+a+d.open}${s?`>${d.close}${s}${l.spacingOuter}${a}${d.open}</${o}`:`${m&&!l.min?"":" "}/`}>${d.close}`};e.printElement=u;var y=(o,m)=>{let s=m.colors.tag;return`${s.open}<${o}${s.close} …${s.open} />${s.close}`};e.printElementAsLeaf=y}}),nt=F({"node_modules/pretty-format/build/plugins/DOMElement.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.test=e.serialize=e.default=void 0;var t=ge(),n=1,i=3,c=8,_=11,p=/^((HTML|SVG)\w*)?Element$/,u=E=>{try{return typeof E.hasAttribute=="function"&&E.hasAttribute("is")}catch{return!1}},y=E=>{let O=E.constructor.name,{nodeType:A,tagName:I}=E,j=typeof I=="string"&&I.includes("-")||u(E);return A===n&&(p.test(O)||j)||A===i&&O==="Text"||A===c&&O==="Comment"||A===_&&O==="DocumentFragment"},o=E=>{var O;return(E==null||(O=E.constructor)===null||O===void 0?void 0:O.name)&&y(E)};e.test=o;function m(E){return E.nodeType===i}function s(E){return E.nodeType===c}function l(E){return E.nodeType===_}var a=(E,O,A,I,j,G)=>{if(m(E))return(0,t.printText)(E.data,O);if(s(E))return(0,t.printComment)(E.data,O);let B=l(E)?"DocumentFragment":E.tagName.toLowerCase();return++I>O.maxDepth?(0,t.printElementAsLeaf)(B,O):(0,t.printElement)(B,(0,t.printProps)(l(E)?[]:Array.from(E.attributes).map(Y=>Y.name).sort(),l(E)?{}:Array.from(E.attributes).reduce((Y,h)=>(Y[h.name]=h.value,Y),{}),O,A+O.indent,I,j,G),(0,t.printChildren)(Array.prototype.slice.call(E.childNodes||E.children),O,A+O.indent,I,j,G),O,A)};e.serialize=a;var d={serialize:a,test:o},g=d;e.default=g}}),lt=F({"node_modules/pretty-format/build/plugins/Immutable.js"(e){Object.defineProperty(e,"__esModule",{value:!0}),e.test=e.serialize=e.default=void 0;var t=oe(),n="@@__IMMUTABLE_ITERABLE__@@",i="@@__IMMUTABLE_LIST__@@",c="@@__IMMUTABLE_KEYED__@@",_="@@__IMMUTABLE_MAP__@@",p="@@__IMMUTABLE_ORDERED__@@",u="@@__IMMUTABLE_RECORD__@@",y="@@__IMMUTABLE_SEQ__@@",o="@@__IMMUTABLE_SET__@@",m="@@__IMMUTABLE_STACK__@@",s=h=>`Immutable.${h}`,l=h=>`[${h}]`,a=" ",d="…",g=(h,$,R,C,L,w,D)=>++C>$.maxDepth?l(s(D)):`${s(D)+a}{${(0,t.printIteratorEntries)(h.entries(),$,R,C,L,w)}}`;function E(h){let $=0;return{next(){if($<h._keys.length){let R=h._keys[$++];return{done:!1,value:[R,h.get(R)]}}return{done:!0,value:void 0}}}}var O=(h,$,R,C,L,w)=>{let D=s(h._name||"Record");return++C>$.maxDepth?l(D):`${D+a}{${(0,t.printIteratorEntries)(E(h),$,R,C,L,w)}}`},A=(h,$,R,C,L,w)=>{let D=s("Seq");return++C>$.maxDepth?l(D):h[c]?`${D+a}{${h._iter||h._object?(0,t.printIteratorEntries)(h.entries(),$,R,C,L,w):d}}`:`${D+a}[${h._iter||h._array||h._collection||h._iterable?(0,t.printIteratorValues)(h.values(),$,R,C,L,w):d}]`},I=(h,$,R,C,L,w,D)=>++C>$.maxDepth?l(s(D)):`${s(D)+a}[${(0,t.printIteratorValues)(h.values(),$,R,C,L,w)}]`,j=(h,$,R,C,L,w)=>h[_]?g(h,$,R,C,L,w,h[p]?"OrderedMap":"Map"):h[i]?I(h,$,R,C,L,w,"List"):h[o]?I(h,$,R,C,L,w,h[p]?"OrderedSet":"Set"):h[m]?I(h,$,R,C,L,w,"Stack"):h[y]?A(h,$,R,C,L,w):O(h,$,R,C,L,w);e.serialize=j;var G=h=>h&&(h[n]===!0||h[u]===!0);e.test=G;var B={serialize:j,test:G},Y=B;e.default=Y}}),at=F({"node_modules/react-is/cjs/react-is.development.js"(e){(function(){var t=Symbol.for("react.element"),n=Symbol.for("react.portal"),i=Symbol.for("react.fragment"),c=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),p=Symbol.for("react.provider"),u=Symbol.for("react.context"),y=Symbol.for("react.server_context"),o=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),s=Symbol.for("react.suspense_list"),l=Symbol.for("react.memo"),a=Symbol.for("react.lazy"),d=Symbol.for("react.offscreen"),g=!1,E=!1,O=!1,A=!1,I=!1,j;j=Symbol.for("react.module.reference");function G(f){return!!(typeof f=="string"||typeof f=="function"||f===i||f===_||I||f===c||f===m||f===s||A||f===d||g||E||O||typeof f=="object"&&f!==null&&(f.$$typeof===a||f.$$typeof===l||f.$$typeof===p||f.$$typeof===u||f.$$typeof===o||f.$$typeof===j||f.getModuleId!==void 0))}function B(f){if(typeof f=="object"&&f!==null){var N=f.$$typeof;switch(N){case t:var v=f.type;switch(v){case i:case _:case c:case m:case s:return v;default:var U=v&&v.$$typeof;switch(U){case y:case u:case o:case a:case l:case p:return U;default:return N}}case n:return N}}}var Y=u,h=p,$=t,R=o,C=i,L=a,w=l,D=n,z=_,K=c,Z=m,k=s,Q=!1,ee=!1;function ue(f){return Q||(Q=!0,console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")),!1}function te(f){return ee||(ee=!0,console.warn("The ReactIs.isConcurrentMode() alia
Line truncated
|
||||
${U}`)},{edgeSpacing:T.spacingOuter,min:T.min,spacing:T.spacingInner},T.colors)}catch(v){throw new I(v.message,v.stack)}if(typeof N!="string")throw new Error(`pretty-format: Plugin must return type "string" but instead returned "${typeof N}".`);return N}function D(r,b){for(let T=0;T<r.length;T++)try{if(r[T].test(b))return r[T]}catch(M){throw new I(M.message,M.stack)}return null}function z(r,b,T,M,S,f){let N=D(b.plugins,r);if(N!==null)return w(N,r,b,T,M,S);let v=R(r,b.printFunctionName,b.escapeRegex,b.escapeString);return v!==null?v:C(r,b,T,M,S,f)}var K={comment:"gray",content:"reset",prop:"yellow",tag:"cyan",value:"green"},Z=Object.keys(K),k={callToJSON:!0,compareKeys:void 0,escapeRegex:!1,escapeString:!0,highlight:!1,indent:2,maxDepth:1/0,maxWidth:1/0,min:!1,plugins:[],printBasicPrototype:!0,printFunctionName:!0,theme:K};e.DEFAULT_OPTIONS=k;function Q(r){if(Object.keys(r).forEach(b=>{if(!Object.prototype.hasOwnProperty.call(k,b))throw new Error(`pretty-format: Unknown option "${b}".`)}),r.min&&r.indent!==void 0&&r.indent!==0)throw new Error('pretty-format: Options "min" and "indent" cannot be used together.');if(r.theme!==void 0){if(r.theme===null)throw new Error('pretty-format: Option "theme" must not be null.');if(typeof r.theme!="object")throw new Error(`pretty-format: Option "theme" must be of type "object" but instead received "${typeof r.theme}".`)}}var ee=r=>Z.reduce((b,T)=>{let M=r.theme&&r.theme[T]!==void 0?r.theme[T]:K[T],S=M&&t.default[M];if(S&&typeof S.close=="string"&&typeof S.open=="string")b[T]=S;else throw new Error(`pretty-format: Option "theme" has a key "${T}" whose value "${M}" is undefined in ansi-styles.`);return b},Object.create(null)),ue=()=>Z.reduce((r,b)=>(r[b]={close:"",open:""},r),Object.create(null)),te=r=>{var b;return(b=r?.printFunctionName)!==null&&b!==void 0?b:k.printFunctionName},re=r=>{var b;return(b=r?.escapeRegex)!==null&&b!==void 0?b:k.escapeRegex},ne=r=>{var b;return(b=r?.escapeString)!==null&&b!==void 0?b:k.escapeString},le=r=>{var b,T,M,S,f,N,v;return{callToJSON:(b=r?.callToJSON)!==null&&b!==void 0?b:k.callToJSON,colors:r!=null&&r.highlight?ee(r):ue(),compareKeys:typeof r?.compareKeys=="function"?r.compareKeys:k.compareKeys,escapeRegex:re(r),escapeString:ne(r),indent:r!=null&&r.min?"":se((T=r?.indent)!==null&&T!==void 0?T:k.indent),maxDepth:(M=r?.maxDepth)!==null&&M!==void 0?M:k.maxDepth,maxWidth:(S=r?.maxWidth)!==null&&S!==void 0?S:k.maxWidth,min:(f=r?.min)!==null&&f!==void 0?f:k.min,plugins:(N=r?.plugins)!==null&&N!==void 0?N:k.plugins,printBasicPrototype:(v=r?.printBasicPrototype)!==null&&v!==void 0?v:!0,printFunctionName:te(r),spacingInner:r!=null&&r.min?" ":`
|
||||
`,spacingOuter:r!=null&&r.min?"":`
|
||||
`}};function se(r){return new Array(r+1).join(" ")}function ae(r,b){if(b&&(Q(b),b.plugins)){let M=D(b.plugins,r);if(M!==null)return w(M,r,le(b),"",0,[])}let T=R(r,te(b),re(b),ne(b));return T!==null?T:C(r,le(b),"",0,[])}var ce={AsymmetricMatcher:i.default,ConvertAnsi:c.default,DOMCollection:_.default,DOMElement:p.default,Immutable:u.default,ReactElement:y.default,ReactTestComponent:o.default};e.plugins=ce;var me=ae;e.default=me}}),be=Xe(st()),{AsymmetricMatcher:ct,DOMCollection:mt,DOMElement:dt,Immutable:ft,ReactElement:pt,ReactTestComponent:bt}=be.plugins,$e=[bt,pt,dt,mt,ft,ct],q=W.dim,Ce=W.green,ve=W.red,yt="·";function ye(e,t=10,n=10){let i=1e4,c;try{c=(0,be.format)(e,{maxDepth:t,maxWidth:n,min:!0,plugins:$e})}catch{c=(0,be.format)(e,{callToJSON:!1,maxDepth:t,maxWidth:n,min:!0,plugins:$e})}return c.length>=i&&t>1?ye(e,Math.floor(t/2),n):c.length>=i&&n>1?ye(e,t,Math.floor(n/2)):c}function gt(e){return e.replace(/\s+$/gm,t=>yt.repeat(t.length))}function _t(e){return ve(gt(ye(e)))}function Et(e,t="received",n="expected",i={}){let{comment:c="",expectedColor:_=Ce,isDirectExpectCall:p=!1,isNot:u=!1,promise:y="",receivedColor:o=ve,secondArgument:m="",secondArgumentColor:s=Ce}=i,l="",a="expect";return!p&&t!==""&&(l+=q(`${a}(`)+o(t),a=")"),y!==""&&(l+=q(`${a}.`)+y,a=""),u&&(l+=`${q(`${a}.`)}not`,a=""),e.includes(".")?a+=e:(l+=q(`${a}.`)+e,a=""),n===""?a+="()":(l+=q(`${a}(`)+_(n),m&&(l+=q(", ")+s(m)),a=")"),c!==""&&(a+=` // ${c}`),a!==""&&(l+=q(a)),l}function Ot(e){if(typeof e.violations>"u")throw new Error("No violations found in aXe results object");let t=ht(e.violations,e.toolOptions?e.toolOptions.impactLevels:[]);function n(p){if(p.length===0)return[];let u=`
|
||||
|
||||
`;return p.map(y=>y.nodes.map(o=>`Expected the HTML found at $('${o.target.join(", ")}') to have no violations:`+u+W.grey(o.html)+u+"Received:"+u+_t(`${y.help} (${y.id})`)+u+W.yellow(o.failureSummary)+u+(y.helpUrl?`You can find more information on this issue here:
|
||||
${W.blue(y.helpUrl)}`:"")).join(u)).join(u+"────────"+u)}let i=n(t),c=i.length===0;function _(){if(!c)return Et(".toHaveNoViolations")+`
|
||||
|
||||
${i}`}return{actual:t,message:_,pass:c}}function ht(e,t){return t&&t.length>0?e.filter(n=>t.includes(n.impact)):e}export{Ot as toHaveNoViolations};
|
||||
@@ -0,0 +1 @@
|
||||
const p="modulepreload",v=function(l){return"/CommunityRuleStorybook/"+l},u={},E=function(d,c,y){let i=Promise.resolve();if(c&&c.length>0){let m=function(e){return Promise.all(e.map(o=>Promise.resolve(o).then(s=>({status:"fulfilled",value:s}),s=>({status:"rejected",reason:s}))))};document.getElementsByTagName("link");const r=document.querySelector("meta[property=csp-nonce]"),t=r?.nonce||r?.getAttribute("nonce");i=m(c.map(e=>{if(e=v(e),e in u)return;u[e]=!0;const o=e.endsWith(".css"),s=o?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${e}"]${s}`))return;const n=document.createElement("link");if(n.rel=o?"stylesheet":p,o||(n.as="script"),n.crossOrigin="",n.href=e,t&&n.setAttribute("nonce",t),document.head.appendChild(n),o)return new Promise((f,h)=>{n.addEventListener("load",f),n.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${e}`)))})}))}function a(r){const t=new Event("vite:preloadError",{cancelable:!0});if(t.payload=r,window.dispatchEvent(t),!t.defaultPrevented)throw r}return i.then(r=>{for(const t of r||[])t.status==="rejected"&&a(t.reason);return d().catch(a)})};export{E as _};
|
||||
Vendored
+25
@@ -0,0 +1,25 @@
|
||||
import{c as bd,a as gd,r as $c}from"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";var Jc={exports:{}},ce={},wc={exports:{}},Wc={};/**
|
||||
* @license React
|
||||
* scheduler.production.js
|
||||
*
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/var rv;function zd(){return rv||(rv=1,function(o){function fl(g,A){var N=g.length;g.push(A);l:for(;0<N;){var p=N-1>>>1,J=g[p];if(0<fa(J,A))g[p]=A,g[N]=J,N=p;else break l}}function K(g){return g.length===0?null:g[0]}function S(g){if(g.length===0)return null;var A=g[0],N=g.pop();if(N!==A){g[0]=N;l:for(var p=0,J=g.length,bl=J>>>1;p<bl;){var W=2*(p+1)-1,Z=g[W],cl=W+1,aa=g[cl];if(0>fa(Z,N))cl<J&&0>fa(aa,Z)?(g[p]=aa,g[cl]=N,p=cl):(g[p]=Z,g[W]=N,p=W);else if(cl<J&&0>fa(aa,N))g[p]=aa,g[cl]=N,p=cl;else break l}}return A}function fa(g,A){var N=g.sortIndex-A.sortIndex;return N!==0?N:g.id-A.id}if(o.unstable_now=void 0,typeof performance=="object"&&typeof performance.now=="function"){var ca=performance;o.unstable_now=function(){return ca.now()}}else{var nt=Date,ie=nt.now();o.unstable_now=function(){return nt.now()-ie}}var Jl=[],wl=[],C=1,Tl=null,ll=3,ia=!1,Yl=!1,Oa=!1,Pa=!1,ve=typeof setTimeout=="function"?setTimeout:null,ft=typeof clearTimeout=="function"?clearTimeout:null,Gl=typeof setImmediate<"u"?setImmediate:null;function Ua(g){for(var A=K(wl);A!==null;){if(A.callback===null)S(wl);else if(A.startTime<=g)S(wl),A.sortIndex=A.expirationTime,fl(Jl,A);else break;A=K(wl)}}function lu(g){if(Oa=!1,Ua(g),!Yl)if(K(Jl)!==null)Yl=!0,la||(la=!0,Xl());else{var A=K(wl);A!==null&&ya(lu,A.startTime-g)}}var la=!1,va=-1,Wl=5,ct=-1;function ye(){return Pa?!0:!(o.unstable_now()-ct<Wl)}function Au(){if(Pa=!1,la){var g=o.unstable_now();ct=g;var A=!0;try{l:{Yl=!1,Oa&&(Oa=!1,ft(va),va=-1),ia=!0;var N=ll;try{a:{for(Ua(g),Tl=K(Jl);Tl!==null&&!(Tl.expirationTime>g&&ye());){var p=Tl.callback;if(typeof p=="function"){Tl.callback=null,ll=Tl.priorityLevel;var J=p(Tl.expirationTime<=g);if(g=o.unstable_now(),typeof J=="function"){Tl.callback=J,Ua(g),A=!0;break a}Tl===K(Jl)&&S(Jl),Ua(g)}else S(Jl);Tl=K(Jl)}if(Tl!==null)A=!0;else{var bl=K(wl);bl!==null&&ya(lu,bl.startTime-g),A=!1}}break l}finally{Tl=null,ll=N,ia=!1}A=void 0}}finally{A?Xl():la=!1}}}var Xl;if(typeof Gl=="function")Xl=function(){Gl(Au)};else if(typeof MessageChannel<"u"){var he=new MessageChannel,it=he.port2;he.port1.onmessage=Au,Xl=function(){it.postMessage(null)}}else Xl=function(){ve(Au,0)};function ya(g,A){va=ve(function(){g(o.unstable_now())},A)}o.unstable_IdlePriority=5,o.unstable_ImmediatePriority=1,o.unstable_LowPriority=4,o.unstable_NormalPriority=3,o.unstable_Profiling=null,o.unstable_UserBlockingPriority=2,o.unstable_cancelCallback=function(g){g.callback=null},o.unstable_forceFrameRate=function(g){0>g||125<g?console.error("forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"):Wl=0<g?Math.floor(1e3/g):5},o.unstable_getCurrentPriorityLevel=function(){return ll},o.unstable_next=function(g){switch(ll){case 1:case 2:case 3:var A=3;break;default:A=ll}var N=ll;ll=A;try{return g()}finally{ll=N}},o.unstable_requestPaint=function(){Pa=!0},o.unstable_runWithPriority=function(g,A){switch(g){case 1:case 2:case 3:case 4:case 5:break;default:g=3}var N=ll;ll=g;try{return A()}finally{ll=N}},o.unstable_scheduleCallback=function(g,A,N){var p=o.unstable_now();switch(typeof N=="object"&&N!==null?(N=N.delay,N=typeof N=="number"&&0<N?p+N:p):N=p,g){case 1:var J=-1;break;case 2:J=250;break;case 5:J=1073741823;break;case 4:J=1e4;break;default:J=5e3}return J=N+J,g={id:C++,callback:A,priorityLevel:g,startTime:N,expirationTime:J,sortIndex:-1},N>p?(g.sortIndex=N,fl(wl,g),K(Jl)===null&&g===K(wl)&&(Oa?(ft(va),va=-1):Oa=!0,ya(lu,N-p))):(g.sortIndex=J,fl(Jl,g),Yl||ia||(Yl=!0,la||(la=!0,Xl()))),g},o.unstable_shouldYield=ye,o.unstable_wrapCallback=function(g){var A=ll;return function(){var N=ll;ll=A;try{return g.apply(this,arguments)}finally{ll=N}}}}(Wc)),Wc}var pv;function Td(){return pv||(pv=1,wc.exports=zd()),wc.exports}/**
|
||||
* @license React
|
||||
* react-dom-client.production.js
|
||||
*
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/var Jv;function Ad(){if(Jv)return ce;Jv=1;var o=Td(),fl=bd(),K=gd();function S(l){var a="https://react.dev/errors/"+l;if(1<arguments.length){a+="?args[]="+encodeURIComponent(arguments[1]);for(var u=2;u<arguments.length;u++)a+="&args[]="+encodeURIComponent(arguments[u])}return"Minified React error #"+l+"; visit "+a+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}function fa(l){return!(!l||l.nodeType!==1&&l.nodeType!==9&&l.nodeType!==11)}function ca(l){var a=l,u=l;if(l.alternate)for(;a.return;)a=a.return;else{l=a;do a=l,(a.flags&4098)!==0&&(u=a.return),l=a.return;while(l)}return a.tag===3?u:null}function nt(l){if(l.tag===13){var a=l.memoizedState;if(a===null&&(l=l.alternate,l!==null&&(a=l.memoizedState)),a!==null)return a.dehydrated}return null}function ie(l){if(ca(l)!==l)throw Error(S(188))}function Jl(l){var a=l.alternate;if(!a){if(a=ca(l),a===null)throw Error(S(188));return a!==l?null:l}for(var u=l,t=a;;){var e=u.return;if(e===null)break;var n=e.alternate;if(n===null){if(t=e.return,t!==null){u=t;continue}break}if(e.child===n.child){for(n=e.child;n;){if(n===u)return ie(e),l;if(n===t)return ie(e),a;n=n.sibling}throw Error(S(188))}if(u.return!==t.return)u=e,t=n;else{for(var f=!1,c=e.child;c;){if(c===u){f=!0,u=e,t=n;break}if(c===t){f=!0,t=e,u=n;break}c=c.sibling}if(!f){for(c=n.child;c;){if(c===u){f=!0,u=n,t=e;break}if(c===t){f=!0,t=n,u=e;break}c=c.sibling}if(!f)throw Error(S(189))}}if(u.alternate!==t)throw Error(S(190))}if(u.tag!==3)throw Error(S(188));return u.stateNode.current===u?l:a}function wl(l){var a=l.tag;if(a===5||a===26||a===27||a===6)return l;for(l=l.child;l!==null;){if(a=wl(l),a!==null)return a;l=l.sibling}return null}var C=Object.assign,Tl=Symbol.for("react.element"),ll=Symbol.for("react.transitional.element"),ia=Symbol.for("react.portal"),Yl=Symbol.for("react.fragment"),Oa=Symbol.for("react.strict_mode"),Pa=Symbol.for("react.profiler"),ve=Symbol.for("react.provider"),ft=Symbol.for("react.consumer"),Gl=Symbol.for("react.context"),Ua=Symbol.for("react.forward_ref"),lu=Symbol.for("react.suspense"),la=Symbol.for("react.suspense_list"),va=Symbol.for("react.memo"),Wl=Symbol.for("react.lazy"),ct=Symbol.for("react.offscreen"),ye=Symbol.for("react.memo_cache_sentinel"),Au=Symbol.iterator;function Xl(l){return l===null||typeof l!="object"?null:(l=Au&&l[Au]||l["@@iterator"],typeof l=="function"?l:null)}var he=Symbol.for("react.client.reference");function it(l){if(l==null)return null;if(typeof l=="function")return l.$$typeof===he?null:l.displayName||l.name||null;if(typeof l=="string")return l;switch(l){case Yl:return"Fragment";case ia:return"Portal";case Pa:return"Profiler";case Oa:return"StrictMode";case lu:return"Suspense";case la:return"SuspenseList"}if(typeof l=="object")switch(l.$$typeof){case Gl:return(l.displayName||"Context")+".Provider";case ft:return(l._context.displayName||"Context")+".Consumer";case Ua:var a=l.render;return l=l.displayName,l||(l=a.displayName||a.name||"",l=l!==""?"ForwardRef("+l+")":"ForwardRef"),l;case va:return a=l.displayName||null,a!==null?a:it(l.type)||"Memo";case Wl:a=l._payload,l=l._init;try{return it(l(a))}catch{}}return null}var ya=Array.isArray,g=fl.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=K.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N={pending:!1,data:null,method:null,action:null},p=[],J=-1;function bl(l){return{current:l}}function W(l){0>J||(l.current=p[J],p[J]=null,J--)}function Z(l,a){J++,p[J]=l.current,l.current=a}var cl=bl(null),aa=bl(null),Na=bl(null),de=bl(null);function se(l,a){switch(Z(Na,a),Z(aa,l),Z(cl,null),a.nodeType){case 9:case 11:l=(l=a.documentElement)&&(l=l.namespaceURI)?zv(l):0;break;default:if(l=a.tagName,a=a.namespaceURI)a=zv(a),l=Tv(a,l);else switch(l){case"svg":l=1;break;case"math":l=2;break;default:l=0}}W(cl),Z(cl,l)}function ou(){W(cl),W(aa),W(Na)}function _n(l){l.memoizedState!==null&&Z(de,l);var a=cl.current,u=Tv(a,l.type);a!==u&&(Z(aa,l),Z(cl,u))}function me(l){aa.current===l&&(W(cl),W(aa)),de.current===l&&(W(de),ue._currentValue=N)}var Rn=Object.prototype.hasOwnProperty,qn=o.unstable_scheduleCallback,Bn=o.unstable_cancelCallback,Wv=o.unstable_shouldYield,$v=o.unstable_requestPaint,ua=o.unstable_now,Fv=o.unstable_getCurrentPriorityLevel,Fc=o.unstable_ImmediatePriority,kc=o.unstable_UserBlockingPriority,Se=o.unstable_NormalPriority,kv=o.unstable_LowPriority,Ic=o.unstable_IdlePriority,Iv=o.log,Pv=o.unstable_setDisableYieldValue,vt=null,Ul=null;function Ha(l){if(typeof Iv=="function"&&Pv(l),Ul&&typeof Ul.setStrictMode=="function")try{Ul.setStrictMode(vt,l)}catch{}}var Nl=Math.clz32?Math.clz32:uy,ly=Math.log,ay=Math.LN2;function uy(l){return l>>>=0,l===0?32:31-(ly(l)/ay|0)|0}var be=256,ge=4194304;function au(l){var a=l&42;if(a!==0)return a;switch(l&-l){case 1:return 1;case 2:return 2;case 4:return 4;case 8:return 8;case 16:return 16;case 32:return 32;case 64:return 64;case 128:return 128;case 256:case 512:case 1024:case 2048:case 4096:Line truncated
|
||||
at`)?" (<anonymous>)":-1<u.stack.indexOf("@")?"@unknown:0:0":""}return`
|
||||
`+Vn+l+vi}var xn=!1;function jn(l,a){if(!l||xn)return"";xn=!0;var u=Error.prepareStackTrace;Error.prepareStackTrace=void 0;try{var t={DetermineComponentFrameRoot:function(){try{if(a){var T=function(){throw Error()};if(Object.defineProperty(T.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(T,[])}catch(m){var s=m}Reflect.construct(l,[],T)}else{try{T.call()}catch(m){s=m}l.call(T.prototype)}}else{try{throw Error()}catch(m){s=m}(T=l())&&typeof T.catch=="function"&&T.catch(function(){})}}catch(m){if(m&&s&&typeof m.stack=="string")return[m.stack,s.stack]}return[null,null]}};t.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var e=Object.getOwnPropertyDescriptor(t.DetermineComponentFrameRoot,"name");e&&e.configurable&&Object.defineProperty(t.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var n=t.DetermineComponentFrameRoot(),f=n[0],c=n[1];if(f&&c){var i=f.split(`
|
||||
`),d=c.split(`
|
||||
`);for(e=t=0;t<i.length&&!i[t].includes("DetermineComponentFrameRoot");)t++;for(;e<d.length&&!d[e].includes("DetermineComponentFrameRoot");)e++;if(t===i.length||e===d.length)for(t=i.length-1,e=d.length-1;1<=t&&0<=e&&i[t]!==d[e];)e--;for(;1<=t&&0<=e;t--,e--)if(i[t]!==d[e]){if(t!==1||e!==1)do if(t--,e--,0>e||i[t]!==d[e]){var b=`
|
||||
`+i[t].replace(" at new "," at ");return l.displayName&&b.includes("<anonymous>")&&(b=b.replace("<anonymous>",l.displayName)),b}while(1<=t&&0<=e);break}}}finally{xn=!1,Error.prepareStackTrace=u}return(u=l?l.displayName||l.name:"")?mt(u):""}function yy(l){switch(l.tag){case 26:case 27:case 5:return mt(l.type);case 16:return mt("Lazy");case 13:return mt("Suspense");case 19:return mt("SuspenseList");case 0:case 15:return jn(l.type,!1);case 11:return jn(l.type.render,!1);case 1:return jn(l.type,!0);default:return""}}function yi(l){try{var a="";do a+=yy(l),l=l.return;while(l);return a}catch(u){return`
|
||||
Error generating stack: `+u.message+`
|
||||
`+u.stack}}function Ql(l){switch(typeof l){case"bigint":case"boolean":case"number":case"string":case"undefined":return l;case"object":return l;default:return""}}function hi(l){var a=l.type;return(l=l.nodeName)&&l.toLowerCase()==="input"&&(a==="checkbox"||a==="radio")}function hy(l){var a=hi(l)?"checked":"value",u=Object.getOwnPropertyDescriptor(l.constructor.prototype,a),t=""+l[a];if(!l.hasOwnProperty(a)&&typeof u<"u"&&typeof u.get=="function"&&typeof u.set=="function"){var e=u.get,n=u.set;return Object.defineProperty(l,a,{configurable:!0,get:function(){return e.call(this)},set:function(f){t=""+f,n.call(this,f)}}),Object.defineProperty(l,a,{enumerable:u.enumerable}),{getValue:function(){return t},setValue:function(f){t=""+f},stopTracking:function(){l._valueTracker=null,delete l[a]}}}}function oe(l){l._valueTracker||(l._valueTracker=hy(l))}function di(l){if(!l)return!1;var a=l._valueTracker;if(!a)return!0;var u=a.getValue(),t="";return l&&(t=hi(l)?l.checked?"true":"false":l.value),l=t,l!==u?(a.setValue(l),!0):!1}function Ee(l){if(l=l||(typeof document<"u"?document:void 0),typeof l>"u")return null;try{return l.activeElement||l.body}catch{return l.body}}var dy=/[\n"\\]/g;function Zl(l){return l.replace(dy,function(a){return"\\"+a.charCodeAt(0).toString(16)+" "})}function Kn(l,a,u,t,e,n,f,c){l.name="",f!=null&&typeof f!="function"&&typeof f!="symbol"&&typeof f!="boolean"?l.type=f:l.removeAttribute("type"),a!=null?f==="number"?(a===0&&l.value===""||l.value!=a)&&(l.value=""+Ql(a)):l.value!==""+Ql(a)&&(l.value=""+Ql(a)):f!=="submit"&&f!=="reset"||l.removeAttribute("value"),a!=null?Cn(l,f,Ql(a)):u!=null?Cn(l,f,Ql(u)):t!=null&&l.removeAttribute("value"),e==null&&n!=null&&(l.defaultChecked=!!n),e!=null&&(l.checked=e&&typeof e!="function"&&typeof e!="symbol"),c!=null&&typeof c!="function"&&typeof c!="symbol"&&typeof c!="boolean"?l.name=""+Ql(c):l.removeAttribute("name")}function si(l,a,u,t,e,n,f,c){if(n!=null&&typeof n!="function"&&typeof n!="symbol"&&typeof n!="boolean"&&(l.type=n),a!=null||u!=null){if(!(n!=="submit"&&n!=="reset"||a!=null))return;u=u!=null?""+Ql(u):"",a=a!=null?""+Ql(a):u,c||a===l.value||(l.value=a),l.defaultValue=a}t=t??e,t=typeof t!="function"&&typeof t!="symbol"&&!!t,l.checked=c?l.checked:!!t,l.defaultChecked=!!t,f!=null&&typeof f!="function"&&typeof f!="symbol"&&typeof f!="boolean"&&(l.name=f)}function Cn(l,a,u){a==="number"&&Ee(l.ownerDocument)===l||l.defaultValue===""+u||(l.defaultValue=""+u)}function Nu(l,a,u,t){if(l=l.options,a){a={};for(var e=0;e<u.length;e++)a["$"+u[e]]=!0;for(u=0;u<l.length;u++)e=a.hasOwnProperty("$"+l[u].value),l[u].selected!==e&&(l[u].selected=e),e&&t&&(l[u].defaultSelected=!0)}else{for(u=""+Ql(u),a=null,e=0;e<l.length;e++){if(l[e].value===u){l[e].selected=!0,t&&(l[e].defaultSelected=!0);return}a!==null||l[e].disabled||(a=l[e])}a!==null&&(a.selected=!0)}}function mi(l,a,u){if(a!=null&&(a=""+Ql(a),a!==l.value&&(l.value=a),u==null)){l.defaultValue!==a&&(l.defaultValue=a);return}l.defaultValue=u!=null?""+Ql(u):""}function Si(l,a,u,t){if(a==null){if(t!=null){if(u!=null)throw Error(S(92));if(ya(t)){if(1<t.length)throw Error(S(93));t=t[0]}u=t}u==null&&(u=""),a=u}u=Ql(a),l.defaultValue=u,t=l.textContent,t===u&&t!==""&&t!==null&&(l.value=t)}function Hu(l,a){if(a){var u=l.firstChild;if(u&&u===l.lastChild&&u.nodeType===3){u.nodeValue=a;return}}l.textContent=a}var sy=new Set("animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth boxFlex boxFlexGroup boxOrdinalGroup columnCount columns flex flexGrow flexPositive flexShrink flexNegative flexOrder gridArea gridRow gridRowEnd gridRowSpan gridRowStart gridColumn gridColumnEnd gridColumnSpan gridColumnStart fontWeight lineClamp lineHeight opacity order orphans scale tabSize widows zIndex zoom fillOpacity floodOpacity stopOpacity strokeDasharray strokeDashoffset strokeMiterlimit strokeOpacity strokeWidth MozAnimationIterationCount MozBoxFlex MozBoxFlexGroup MozLineClamp msAnimationIterationCount msFlex msZoom msFlexGrow msFlexNegative msFlexOrder msFlexPositive msFlexShrink msGridColumn msGridColumnSpan msGridRow msGridRowSpan WebkitAnimationIterationCount WebkitBoxFlex WebKitBoxFlexGroup WebkitBoxOrdinalGroup WebkitColumnCount WebkitColumns WebkitFlex WebkitFlexGrow WebkitFlexPositive WebkitFlexShrink WebkitLineClamp".split(" "));function bi(l,a,u){var t=a.indexOf("--")===0;u==null||typeof u=="boolean"||u===""?t?l.setProperty(a,""):a==="float"?l.cssFloat="":l[a]="":t?l.setProperty(a,u):typeof u!="number"||u===0||sy.has(a)?a==="float"?l.cssFloat=u:l[a]=(""+u).trim():l[a]=u+"px"}function gi(l,a,u){if(a!=null&&typeof a!="object")throw Error(S(62));if(l=l.style,u!=null){for(var t in u)!u.hasOwnProperty(t)||a!=null&&a.hasOwnProperty(t)||(t.indexOf("--")===0?l.setProperty(t,""):t==="float"?l.cssFloat="":l[t]="");for(var e in a)t=a[e],a.hasOwnProperty(e)&&u[e]!==t&&bi(l,e,t)}else for(var n in a)a.hasOwnProperty(n)&&bi(l,n,a[n])}function Ln(l){if(l.indexOf("-")===-1)return!1;switch(l){case"annotation-xml":case"
Line truncated
|
||||
`).replace(Vh,"")}function gv(l,a){return a=bv(a),bv(l)===a}function mn(){}function x(l,a,u,t,e,n){switch(u){case"children":typeof t=="string"?a==="body"||a==="textarea"&&t===""||Hu(l,t):(typeof t=="number"||typeof t=="bigint")&&a!=="body"&&Hu(l,""+t);break;case"className":Ae(l,"class",t);break;case"tabIndex":Ae(l,"tabindex",t);break;case"dir":case"role":case"viewBox":case"width":case"height":Ae(l,u,t);break;case"style":gi(l,t,n);break;case"data":if(a!=="object"){Ae(l,"data",t);break}case"src":case"href":if(t===""&&(a!=="a"||u!=="href")){l.removeAttribute(u);break}if(t==null||typeof t=="function"||typeof t=="symbol"||typeof t=="boolean"){l.removeAttribute(u);break}t=Me(""+t),l.setAttribute(u,t);break;case"action":case"formAction":if(typeof t=="function"){l.setAttribute(u,"javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')");break}else typeof n=="function"&&(u==="formAction"?(a!=="input"&&x(l,a,"name",e.name,e,null),x(l,a,"formEncType",e.formEncType,e,null),x(l,a,"formMethod",e.formMethod,e,null),x(l,a,"formTarget",e.formTarget,e,null)):(x(l,a,"encType",e.encType,e,null),x(l,a,"method",e.method,e,null),x(l,a,"target",e.target,e,null)));if(t==null||typeof t=="symbol"||typeof t=="boolean"){l.removeAttribute(u);break}t=Me(""+t),l.setAttribute(u,t);break;case"onClick":t!=null&&(l.onclick=mn);break;case"onScroll":t!=null&&q("scroll",l);break;case"onScrollEnd":t!=null&&q("scrollend",l);break;case"dangerouslySetInnerHTML":if(t!=null){if(typeof t!="object"||!("__html"in t))throw Error(S(61));if(u=t.__html,u!=null){if(e.children!=null)throw Error(S(60));l.innerHTML=u}}break;case"multiple":l.multiple=t&&typeof t!="function"&&typeof t!="symbol";break;case"muted":l.muted=t&&typeof t!="function"&&typeof t!="symbol";break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"defaultValue":case"defaultChecked":case"innerHTML":case"ref":break;case"autoFocus":break;case"xlinkHref":if(t==null||typeof t=="function"||typeof t=="boolean"||typeof t=="symbol"){l.removeAttribute("xlink:href");break}u=Me(""+t),l.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",u);break;case"contentEditable":case"spellCheck":case"draggable":case"value":case"autoReverse":case"externalResourcesRequired":case"focusable":case"preserveAlpha":t!=null&&typeof t!="function"&&typeof t!="symbol"?l.setAttribute(u,""+t):l.removeAttribute(u);break;case"inert":case"allowFullScreen":case"async":case"autoPlay":case"controls":case"default":case"defer":case"disabled":case"disablePictureInPicture":case"disableRemotePlayback":case"formNoValidate":case"hidden":case"loop":case"noModule":case"noValidate":case"open":case"playsInline":case"readOnly":case"required":case"reversed":case"scoped":case"seamless":case"itemScope":t&&typeof t!="function"&&typeof t!="symbol"?l.setAttribute(u,""):l.removeAttribute(u);break;case"capture":case"download":t===!0?l.setAttribute(u,""):t!==!1&&t!=null&&typeof t!="function"&&typeof t!="symbol"?l.setAttribute(u,t):l.removeAttribute(u);break;case"cols":case"rows":case"size":case"span":t!=null&&typeof t!="function"&&typeof t!="symbol"&&!isNaN(t)&&1<=t?l.setAttribute(u,t):l.removeAttribute(u);break;case"rowSpan":case"start":t==null||typeof t=="function"||typeof t=="symbol"||isNaN(t)?l.removeAttribute(u):l.setAttribute(u,t);break;case"popover":q("beforetoggle",l),q("toggle",l),Te(l,"popover",t);break;case"xlinkActuate":ha(l,"http://www.w3.org/1999/xlink","xlink:actuate",t);break;case"xlinkArcrole":ha(l,"http://www.w3.org/1999/xlink","xlink:arcrole",t);break;case"xlinkRole":ha(l,"http://www.w3.org/1999/xlink","xlink:role",t);break;case"xlinkShow":ha(l,"http://www.w3.org/1999/xlink","xlink:show",t);break;case"xlinkTitle":ha(l,"http://www.w3.org/1999/xlink","xlink:title",t);break;case"xlinkType":ha(l,"http://www.w3.org/1999/xlink","xlink:type",t);break;case"xmlBase":ha(l,"http://www.w3.org/XML/1998/namespace","xml:base",t);break;case"xmlLang":ha(l,"http://www.w3.org/XML/1998/namespace","xml:lang",t);break;case"xmlSpace":ha(l,"http://www.w3.org/XML/1998/namespace","xml:space",t);break;case"is":Te(l,"is",t);break;case"innerText":case"textContent":break;default:(!(2<u.length)||u[0]!=="o"&&u[0]!=="O"||u[1]!=="n"&&u[1]!=="N")&&(u=my.get(u)||u,Te(l,u,t))}}function _c(l,a,u,t,e,n){switch(u){case"style":gi(l,t,n);break;case"dangerouslySetInnerHTML":if(t!=null){if(typeof t!="object"||!("__html"in t))throw Error(S(61));if(u=t.__html,u!=null){if(e.children!=null)throw Error(S(60));l.innerHTML=u}}break;case"children":typeof t=="string"?Hu(l,t):(typeof t=="number"||typeof t=="bigint")&&Hu(l,""+t);break;case"onScroll":t!=null&&q("scroll",l);break;case"onScrollEnd":t!=null&&q("scrollend",l);break;case"onClick":t!=null&&(l.onclick=mn);break;case"suppressContentEditableWarning":case"suppressHydrationWarning":case"inn
Line truncated
|
||||
@@ -0,0 +1,46 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<mask id="active-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M25,15.3 C26.8630998,15.3 28.7261995,16.2284418 29.795607,18.0853254 L29.795607,18.0853254 L34.7484772,26.6853254 C35.2679728,27.5873604 35.5068948,28.5446245 35.509009,29.4780654 C35.5112408,30.4762222 35.243212,31.4466974 34.7610935,32.2926531 C34.2789749,33.1386087 33.5826171,33.8603071 32.7267084,34.3600412 C31.9262928,34.8273748 30.9864445,35.1 29.9528702,35.1 L29.9528702,35.1 L20.0471298,35.1 C19.0135555,35.1 18.0737072,34.8273748 17.2732916,34.3600412 C16.4173829,33.8603071 15.7210251,33.1386087 15.2389065,32.2926531 C14.756788,31.4466974 14.4887592,30.4762222 14.490991,29.4780654 C14.4931052,28.5446245 14.7320272,27.5873604 15.2515228,26.6853254 L15.2515228,26.6853254 L20.204393,18.0853254 C21.2738005,16.2284418 23.1369002,15.3 25,15.3 Z"
|
||||
transform="rotate(90 25 25.2)" />
|
||||
</mask>
|
||||
<mask id="critical-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.9,14.6 C26.7442665,14.6 29.3192665,15.7528668 31.1831998,17.6168002 C33.0471332,19.4807335 34.2,22.0557335 34.2,24.9 C34.2,27.7442665 33.0471332,30.3192665 31.1831998,32.1831998 C29.3192665,34.0471332 26.7442665,35.2 23.9,35.2 C21.0557335,35.2 18.4807335,34.0471332 16.6168002,32.1831998 C14.7528668,30.3192665 13.6,27.7442665 13.6,24.9 C13.6,22.0557335 14.7528668,19.4807335 16.6168002,17.6168002 C18.4807335,15.7528668 21.0557335,14.6 23.9,14.6 Z" />
|
||||
</mask>
|
||||
<mask id="negative-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M28.2,14.8 C29.633165,14.8 31.06633,15.346734 32.159798,16.440202 C33.2414078,17.5218119 33.7880833,18.9357904 33.8,20.353376 C33.811544,21.7725108 33.2872104,23.1952877 32.2266806,24.2917914 L32.2266806,24.2917914 L31.7206,24.8006729 L32.159798,25.240202 C33.253266,26.33367 33.8,27.766835 33.8,29.2 C33.8,30.633165 33.253266,32.06633 32.159798,33.159798 C31.0781881,34.2414078 29.6642096,34.7880833 28.246624,34.8 C26.8274892,34.811544 25.4047123,34.2872104 24.3082086,33.2266806 L24.3082086,33.2266806 L23.7993271,32.7206 L23.359798,33.159798 C22.26633,34.253266 20.833165,34.8 19.4,34.8 C17.966835,34.8 16.53367,34.253266 15.440202,33.159798 C14.3585922,32.0781881 13.8119167,30.6642096 13.8,29.246624 C13.788456,27.8274892 14.3127896,26.4047123 15.3733194,25.3082086 L15.3733194,25.3082086 L15.8794,24.7993271 L15.440202,24.359798 C14.346734,23.26633 13.8,21.833165 13.8,20.4 C13.8,18.966835 14.346734,17.53367 15.440202,16.440202 C16.5218119,15.3585922 17.9357904,14.8119167 19.353376,14.8 C20.7725108,14.788456 22.1952877,15.3127896 23.2917914,16.3733194 L23.2917914,16.3733194 L23.8006729,16.8794 L24.240202,16.440202 C25.33367,15.346734 26.766835,14.8 28.2,14.8 Z" />
|
||||
</mask>
|
||||
<mask id="positive-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M29.7294207,16.9922805 C31.1625744,16.9866282 32.5979013,17.5276612 33.6957071,18.6167741 C34.7816077,19.6940761 35.3338993,21.1058704 35.351258,22.5233982 C35.3686336,23.9423122 34.8500808,25.3669976 33.7941627,26.4676563 L33.7941627,26.4676563 L27.1794488,33.1363075 C26.0960963,34.2283069 24.675298,34.7802389 23.2508341,34.7920857 C21.8249459,34.8039445 20.3953569,34.27469 19.296927,33.2041927 L19.296927,33.2041927 L15.7761737,29.656491 C14.6870608,28.5586851 14.1460279,27.1233582 14.1516801,25.6902046 C14.1574213,24.2570509 14.7098478,22.8260705 15.8076536,21.7369576 C16.7544861,20.7976225 17.9523748,20.2659173 19.1834383,20.1411672 C20.4372495,20.0141119 21.7255226,20.3088158 22.8178242,21.0249737 L22.8178242,21.0249737 L23.1781395,21.2667759 L25.7761737,18.648254 C26.8652867,17.5504481 28.2962671,16.9980217 29.7294207,16.9922805 Z" />
|
||||
</mask>
|
||||
<mask id="warning-mask">
|
||||
<rect x="0" y="0" width="32" height="32" fill="#FFF" />
|
||||
<path fill="#000" fill-rule="nonzero"
|
||||
d="M23.8,14.8 C25.6808284,14.8 27.5616567,15.7284418 28.6412402,17.5853254 L28.6412402,17.5853254 L33.6412402,26.1853254 C34.1656792,27.0873604 34.4068747,28.0446245 34.409009,28.9780654 C34.4112621,29.9762222 34.1406828,30.9466974 33.6539766,31.7926531 C33.1672704,32.6386087 32.4642862,33.3603071 31.600233,33.8600412 C30.7922009,34.3273748 29.8434094,34.6 28.8,34.6 L28.8,34.6 L18.8,34.6 C17.7565906,34.6 16.8077991,34.3273748 15.999767,33.8600412 C15.1357138,33.3603071 14.4327296,32.6386087 13.9460234,31.7926531 C13.4593172,30.9466974 13.1887379,29.9762222 13.190991,28.9780654 C13.1931253,28.0446245 13.4343208,27.0873604 13.9587598,26.1853254 L13.9587598,26.1853254 L18.9587598,17.5853254 C20.0383433,15.7284418 21.9191716,14.8 23.8,14.8 Z" />
|
||||
</mask>
|
||||
|
||||
<polygon id="active" fill="none" stroke="#029CFD" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="25 21 30 29.6 20 29.6" transform="rotate(90 25 25.3)" />
|
||||
<circle id="critical" fill="none" cx="23.9" cy="24.9" r="4.7" stroke="#000" stroke-linejoin="round"
|
||||
stroke-width="2.8" />
|
||||
<path id="negative" fill="none" stroke="#F40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8"
|
||||
d="M19.4,20.4 L28.2,29.2 M28.2,20.4 L19.4,29.2" />
|
||||
<polyline id="positive" fill="none" stroke="#66BF3C" stroke-linecap="round" stroke-linejoin="round"
|
||||
stroke-width="2.8" points="19.752 25.712 23.204 29.192 29.752 22.592" />
|
||||
<polygon id="warning" fill="none" stroke="#FFAE00" stroke-linejoin="round" stroke-width="2.8"
|
||||
points="23.8 20.4 28.8 29 18.8 29" />
|
||||
</defs>
|
||||
|
||||
<g id="mask">
|
||||
<use id="icon" />
|
||||
</g>
|
||||
<use id="status" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><path fill="#FF4785" fill-rule="nonzero" d="M3.19456517,29.5523576 L2.20116517,3.08035756 C2.16820317,2.206041 2.83853396,1.46497625 3.71176517,1.41035756 L26.2285652,0.00315756388 C26.6728415,-0.0246745074 27.1088544,0.132425741 27.4332785,0.437229126 C27.7577026,0.74203251 27.9415652,1.16741027 27.9415652,1.61255756 L27.9415652,30.4585576 C27.9415652,30.8987416 27.7615266,31.3197739 27.4433606,31.6239653 C27.1251947,31.9281568 26.6965078,32.0890657 26.2567652,32.0693576 L4.73376517,31.1027576 C3.89549138,31.0651477 3.22618762,30.3908861 3.19476517,29.5523576 L3.19456517,29.5523576 Z"/><path fill="#FFF" d="M24.4581652,0.113957564 L21.3591652,0.307557564 L21.2081652,3.94195756 C21.2043927,4.0349625 21.2546048,4.1217998 21.3370927,4.16492627 C21.4195807,4.20805273 21.5195442,4.19973049 21.5937652,4.14355756 L23.0057652,3.07275756 L24.1981652,4.01215756 C24.2717133,4.07021898 24.3722957,4.08025391 24.4558654,4.03786787 C24.539435,3.99548183 24.5907604,3.90840015 24.5873652,3.81475756 L24.4581652,0.113757564 L24.4581652,0.113957564 Z M22.0463652,12.2851576 C21.4791652,12.7257576 17.2533652,13.0265576 17.2533652,12.3991576 C17.3427652,10.0053576 16.2709652,9.90035756 15.6755652,9.90035756 C15.1099652,9.90035756 14.1575652,10.0713576 14.1575652,11.3537576 C14.1575652,12.6605576 15.5495652,13.3983576 17.1835652,14.2643576 C19.5049652,15.4943576 22.3143652,16.9831576 22.3143652,20.7295576 C22.3143652,24.3201576 19.3967652,26.3037576 15.6755652,26.3037576 C11.8353652,26.3037576 8.47936517,24.7499576 8.85836517,19.3633576 C9.00716517,18.7307576 13.8895652,18.8811576 13.8895652,19.3633576 C13.8299652,21.5861576 14.3359652,22.2399576 15.6161652,22.2399576 C16.5985652,22.2399576 17.0449652,21.6983576 17.0449652,20.7865576 C17.0449652,19.4065576 15.5945652,18.5919576 13.9259652,17.6551576 C11.6665652,16.3865576 9.00716517,14.8935576 9.00716517,11.4679576 C9.00716517,8.04835756 11.3591652,5.76855756 15.5565652,5.76855756 C19.7541652,5.76855756 22.0463652,8.01335756 22.0463652,12.2853576 L22.0463652,12.2851576 Z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,687 @@
|
||||
<!doctype html>
|
||||
<!--suppress HtmlUnknownTarget -->
|
||||
<html lang="en">
|
||||
<head><script type="module" src="/vite-inject-mocker-entry.js"></script>
|
||||
<meta charset="utf-8" />
|
||||
<title>Storybook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.CONFIG_TYPE = 'PRODUCTION';
|
||||
window.LOGLEVEL = 'info';
|
||||
window.FRAMEWORK_OPTIONS = {};
|
||||
window.CHANNEL_OPTIONS = {};
|
||||
window.FEATURES = {"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false,"disallowImplicitActionsInRenderV8":true,"viewport":true,"highlight":true,"controls":true,"interactions":true,"actions":true,"backgrounds":true,"outline":true,"measure":true};
|
||||
window.STORIES = [{"titlePrefix":"","directory":"./stories","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./stories","files":"**/*.stories.@(js|jsx|mjs|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|mjs|ts|tsx))$"}];
|
||||
window.DOCS_OPTIONS = {"defaultName":"Docs"};
|
||||
window.TAGS_OPTIONS = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};
|
||||
|
||||
|
||||
|
||||
// We do this so that "module && module.hot" etc. in Storybook source code
|
||||
// doesn't fail (it will simply be disabled)
|
||||
window.module = undefined;
|
||||
window.global = window;
|
||||
</script>
|
||||
<base target="_parent" />
|
||||
|
||||
<style>
|
||||
/* While we aren't showing the main block yet, but still preparing, we want everything the user has rendered, which may or may not be in #storybook-root, to be display none */
|
||||
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide our own blocks when we aren't supposed to be showing them */
|
||||
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
||||
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
||||
:not(.sb-show-nopreview) > .sb-nopreview,
|
||||
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-centered #storybook-root {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
max-height: 100%;
|
||||
/* Hack for centering correctly in IE11 */
|
||||
}
|
||||
|
||||
/* Vertical centering fix for IE11 */
|
||||
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.sb-show-main.sb-main-centered:after {
|
||||
content: '';
|
||||
min-height: inherit;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-fullscreen {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sb-show-main.sb-main-padded {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sb-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 40px;
|
||||
font-family:
|
||||
'Nunito Sans',
|
||||
-apple-system,
|
||||
'.SFNSText-Regular',
|
||||
'San Francisco',
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Helvetica Neue',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.sb-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.sb-wrapper {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-heading {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
margin: 10px 0;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.sb-nopreview {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sb-nopreview_main {
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.sb-nopreview_heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sb-errordisplay {
|
||||
background: #f6f9fc;
|
||||
color: black;
|
||||
z-index: 999999;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
& ol {
|
||||
padding-left: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-family: Nunito Sans;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #ff4400;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
& p,
|
||||
& ol {
|
||||
font-family: Nunito Sans;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& li + li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.sb-errordisplay_main {
|
||||
margin: auto;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
border: 1px solid #ff0000;
|
||||
box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.sb-errordisplay_code {
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
background: #242424;
|
||||
color: #c6c6c6;
|
||||
box-sizing: border-box;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
border-radius: 4px;
|
||||
|
||||
font-family:
|
||||
'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
||||
'Lucida Console', Consolas, Monaco, monospace;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sb-errordisplay pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: revert;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sb-rotate360 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sb-glow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* We display the preparing loaders *over* the rendering story */
|
||||
.sb-preparing-story,
|
||||
.sb-preparing-docs {
|
||||
background-color: white;
|
||||
/* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
|
||||
on top, but this isn't possible as it would require making CSS changes that could affect user code */
|
||||
z-index: 2147483647;
|
||||
}
|
||||
|
||||
.sb-loader {
|
||||
-webkit-animation: sb-rotate360 0.7s linear infinite;
|
||||
animation: sb-rotate360 0.7s linear infinite;
|
||||
border-color: rgba(97, 97, 97, 0.29);
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-top-color: #646464;
|
||||
border-width: 2px;
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
mix-blend-mode: difference;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transition: all 200ms ease-out;
|
||||
vertical-align: top;
|
||||
width: 32px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.sb-previewBlock {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_header {
|
||||
align-items: center;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_icon {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background: #e6e6e6;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.sb-previewBlock_icon:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sb-previewBlock_body {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
height: 182px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sb-argstableBlock {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin: 25px auto 40px;
|
||||
max-width: 600px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:first-of-type,
|
||||
.sb-argstableBlock td:first-of-type {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:nth-of-type(2),
|
||||
.sb-argstableBlock td:nth-of-type(2) {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:nth-of-type(3),
|
||||
.sb-argstableBlock td:nth-of-type(3) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th:last-of-type,
|
||||
.sb-argstableBlock td:last-of-type {
|
||||
width: 25%;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th span,
|
||||
.sb-argstableBlock td span {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.sb-argstableBlock th {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body {
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
|
||||
rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:not(:first-child) {
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:first-child td:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:first-child td:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:last-child td:first-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body tr:last-child td:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body td {
|
||||
background: #fff;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body td:not(:first-of-type) {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-body button {
|
||||
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
||||
animation: sb-glow 1.5s ease-in-out infinite;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: transparent;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-summary {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sb-argstableBlock-code {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.sb-sr-only,
|
||||
.sb-hidden-until-focus:not(:focus) {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sb-hidden-until-focus {
|
||||
opacity: 0;
|
||||
transition: opacity 150ms ease-out;
|
||||
}
|
||||
|
||||
.sb-hidden-until-focus:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* globals window */
|
||||
try {
|
||||
if (window.top !== window) {
|
||||
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
|
||||
}
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn('unable to connect to top frame for connecting dev tools');
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module" crossorigin src="/CommunityRuleStorybook/assets/iframe-D_aMTKb2.js"></script>
|
||||
<link rel="modulepreload" crossorigin href="/CommunityRuleStorybook/assets/preload-helper-DIZFD4sK.js">
|
||||
<link rel="stylesheet" crossorigin href="/CommunityRuleStorybook/assets/iframe-7VPDhVZ9.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="sb-preparing-story sb-wrapper">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
|
||||
<div class="sb-preparing-docs sb-wrapper">
|
||||
<div class="sb-previewBlock">
|
||||
<div class="sb-previewBlock_header">
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
<div class="sb-previewBlock_icon"></div>
|
||||
</div>
|
||||
<div class="sb-previewBlock_body">
|
||||
<div class="sb-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<table aria-hidden="true" class="sb-argstableBlock">
|
||||
<thead class="sb-argstableBlock-head">
|
||||
<tr>
|
||||
<th><span>Name</span></th>
|
||||
<th><span>Description</span></th>
|
||||
<th><span>Default</span></th>
|
||||
<th><span>Control </span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="sb-argstableBlock-body">
|
||||
<tr>
|
||||
<td><span>propertyName</span><span title="Required">*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span>propertyName</span><span>*</span></td>
|
||||
<td>
|
||||
<div><span>This is a short description</span></div>
|
||||
<div class="sb-argstableBlock-summary">
|
||||
<div><span class="sb-argstableBlock-code">summary</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div><span class="sb-argstableBlock-code">defaultValue</span></div>
|
||||
</td>
|
||||
<td><button>Set string</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sb-nopreview sb-wrapper">
|
||||
<div class="sb-nopreview_main">
|
||||
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
|
||||
<p>Sorry, but you either have no stories or none are selected somehow.</p>
|
||||
<ul>
|
||||
<li>Please check the Storybook config.</li>
|
||||
<li>Try reloading the page.</li>
|
||||
</ul>
|
||||
<p>
|
||||
If the problem persists, check the browser console, or the terminal you've run Storybook from.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sb-errordisplay sb-wrapper">
|
||||
<div class="sb-errordisplay_main">
|
||||
<h1 id="error-message"></h1>
|
||||
<p>
|
||||
The component failed to render properly, likely due to a configuration issue in Storybook.
|
||||
Here are some common causes and how you can address them:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Missing Context/Providers</strong>: You can use decorators to supply specific
|
||||
contexts or providers, which are sometimes necessary for components to render correctly. For
|
||||
detailed instructions on using decorators, please visit the
|
||||
<a href="https://storybook.js.org/docs/writing-stories/decorators"
|
||||
>Decorators documentation</a
|
||||
>.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Misconfigured Webpack or Vite</strong>: Verify that Storybook picks up all necessary
|
||||
settings for loaders, plugins, and other relevant parameters. You can find step-by-step
|
||||
guides for configuring
|
||||
<a href="https://storybook.js.org/docs/builders/webpack">Webpack</a> or
|
||||
<a href="https://storybook.js.org/docs/builders/vite">Vite</a>
|
||||
with Storybook.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Missing Environment Variables</strong>: Your Storybook may require specific
|
||||
environment variables to function as intended. You can set up custom environment variables
|
||||
as outlined in the
|
||||
<a href="https://storybook.js.org/docs/configure/environment-variables"
|
||||
>Environment Variables documentation</a
|
||||
>.
|
||||
</li>
|
||||
</ol>
|
||||
<pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="storybook-root"></div>
|
||||
<div id="storybook-docs"></div>
|
||||
<script>
|
||||
function __onViteAppLoadingError(event) {
|
||||
const hostname = globalThis.location.hostname;
|
||||
if (hostname !== 'localhost' && globalThis.CONFIG_TYPE === 'DEVELOPMENT') {
|
||||
const message = `Failed to load the Storybook preview file 'vite-app.js':
|
||||
|
||||
It looks like you're visiting the Storybook development server on another hostname than localhost: '${hostname}', but you haven't configured the necessary security features to support this.
|
||||
Please re-run your Storybook development server with the '--host ${hostname}' flag, or manually configure your Vite allowedHosts configuration with viteFinal.
|
||||
|
||||
See:`;
|
||||
const docs = [
|
||||
'https://storybook.js.org/docs/api/cli-options#dev',
|
||||
'https://storybook.js.org/docs/api/main-config/main-config-vite-final',
|
||||
'https://vite.dev/config/server-options.html#server-allowedhosts',
|
||||
];
|
||||
console.error(`${message}\n${docs.map((doc) => `- ${doc}`).join('\n')}`);
|
||||
|
||||
document.getElementById('storybook-root').innerHTML =
|
||||
`<p style="color: red; max-width: 70ch">${message.replaceAll(
|
||||
'\n',
|
||||
'<br/>'
|
||||
)}<ul>${docs.map((doc) => `<li><a href='${doc}' target='_blank'>${doc}</a></li>`).join('')}<ul></p>`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<title>storybook - Storybook</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
|
||||
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nunito Sans';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
|
||||
}
|
||||
</style>
|
||||
|
||||
<link href="./sb-manager/runtime.js" rel="modulepreload" />
|
||||
|
||||
|
||||
<link href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/chromatic-com-storybook-1/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/docs-2/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/onboarding-3/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/a11y-4/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
<link href="./sb-addons/vitest-5/manager-bundle.js" rel="modulepreload" />
|
||||
|
||||
|
||||
<style>
|
||||
#storybook-root[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
window['FEATURES'] = {
|
||||
"argTypeTargetsV7": true,
|
||||
"legacyDecoratorFileOrder": false,
|
||||
"disallowImplicitActionsInRenderV8": true,
|
||||
"viewport": true,
|
||||
"highlight": true,
|
||||
"controls": true,
|
||||
"interactions": true,
|
||||
"actions": true,
|
||||
"backgrounds": true,
|
||||
"outline": true,
|
||||
"measure": true
|
||||
};
|
||||
|
||||
|
||||
|
||||
window['REFS'] = {};
|
||||
|
||||
|
||||
|
||||
window['LOGLEVEL'] = "info";
|
||||
|
||||
|
||||
|
||||
window['DOCS_OPTIONS'] = {
|
||||
"defaultName": "Docs"
|
||||
};
|
||||
|
||||
|
||||
|
||||
window['CONFIG_TYPE'] = "PRODUCTION";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
window['TAGS_OPTIONS'] = {
|
||||
"dev-only": {
|
||||
"excludeFromDocsStories": true
|
||||
},
|
||||
"docs-only": {
|
||||
"excludeFromSidebar": true
|
||||
},
|
||||
"test-only": {
|
||||
"excludeFromSidebar": true,
|
||||
"excludeFromDocsStories": true
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
window['STORYBOOK_RENDERER'] = "react";
|
||||
|
||||
|
||||
|
||||
window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
|
||||
|
||||
|
||||
|
||||
window['STORYBOOK_FRAMEWORK'] = "@storybook/nextjs-vite";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script type="module">
|
||||
import './sb-manager/globals-runtime.js';
|
||||
|
||||
|
||||
import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
|
||||
|
||||
import './sb-addons/chromatic-com-storybook-1/manager-bundle.js';
|
||||
|
||||
import './sb-addons/docs-2/manager-bundle.js';
|
||||
|
||||
import './sb-addons/onboarding-3/manager-bundle.js';
|
||||
|
||||
import './sb-addons/a11y-4/manager-bundle.js';
|
||||
|
||||
import './sb-addons/vitest-5/manager-bundle.js';
|
||||
|
||||
|
||||
import './sb-manager/runtime.js';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
{"v":5,"entries":{"components-avatar--docs":{"id":"components-avatar--docs","title":"Components/Avatar","name":"Docs","importPath":"./stories/Avatar.stories.js","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"components-avatar--default":{"type":"story","id":"components-avatar--default","name":"Default","title":"Components/Avatar","importPath":"./stories/Avatar.stories.js","componentPath":"./app/components/Avatar.js","tags":["dev","test","autodocs"]},"components-avatar--sizes":{"type":"story","id":"components-avatar--sizes","name":"Sizes","title":"Components/Avatar","importPath":"./stories/Avatar.stories.js","componentPath":"./app/components/Avatar.js","tags":["dev","test","autodocs"]},"components-avatar--different-avatars":{"type":"story","id":"components-avatar--different-avatars","name":"Different Avatars","title":"Components/Avatar","importPath":"./stories/Avatar.stories.js","componentPath":"./app/components/Avatar.js","tags":["dev","test","autodocs"]},"components-avatar--all-sizes-with-different-avatars":{"type":"story","id":"components-avatar--all-sizes-with-different-avatars","name":"All Sizes With Different Avatars","title":"Components/Avatar","importPath":"./stories/Avatar.stories.js","componentPath":"./app/components/Avatar.js","tags":["dev","test","autodocs"]},"components-avatarcontainer--docs":{"id":"components-avatarcontainer--docs","title":"Components/AvatarContainer","name":"Docs","importPath":"./stories/AvatarContainer.stories.js","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"components-avatarcontainer--default":{"type":"story","id":"components-avatarcontainer--default","name":"Default","title":"Components/AvatarContainer","importPath":"./stories/AvatarContainer.stories.js","componentPath":"./app/components/AvatarContainer.js","tags":["dev","test","autodocs"]},"components-avatarcontainer--sizes":{"type":"story","id":"components-avatarcontainer--sizes","name":"Sizes","title":"Components/AvatarContainer","importPath":"./stories/AvatarContainer.stories.js","componentPath":"./app/components/AvatarContainer.js","tags":["dev","test","autodocs"]},"components-avatarcontainer--different-group-sizes":{"type":"story","id":"components-avatarcontainer--different-group-sizes","name":"Different Group Sizes","title":"Components/AvatarContainer","importPath":"./stories/AvatarContainer.stories.js","componentPath":"./app/components/AvatarContainer.js","tags":["dev","test","autodocs"]},"components-avatarcontainer--in-context":{"type":"story","id":"components-avatarcontainer--in-context","name":"In Context","title":"Components/AvatarContainer","importPath":"./stories/AvatarContainer.stories.js","componentPath":"./app/components/AvatarContainer.js","tags":["dev","test","autodocs"]},"components-button--docs":{"id":"components-button--docs","title":"Components/Button","name":"Docs","importPath":"./stories/Button.stories.js","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"components-button--default":{"type":"story","id":"components-button--default","name":"Default","title":"Components/Button","importPath":"./stories/Button.stories.js","componentPath":"./app/components/Button.js","tags":["dev","test","autodocs"]},"components-button--variants":{"type":"story","id":"components-button--variants","name":"Variants","title":"Components/Button","importPath":"./stories/Button.stories.js","componentPath":"./app/components/Button.js","tags":["dev","test","autodocs"]},"components-button--sizes":{"type":"story","id":"components-button--sizes","name":"Sizes","title":"Components/Button","importPath":"./stories/Button.stories.js","componentPath":"./app/components/Button.js","tags":["dev","test","autodocs"]},"components-button--states":{"type":"story","id":"components-button--states","name":"States","title":"Components/Button","importPath":"./stories/Button.stories.js","componentPath":"./app/components/Button.js","tags":["dev","test","autodocs"]},"components-button--all-variants":{"type":"story","id":"components-button--all-variants","name":"All Variants","title":"Components/Button","importPath":"./stories/Button.stories.js","componentPath":"./app/components/Button.js","tags":["dev","test","autodocs"]},"components-contentlockup--docs":{"id":"components-contentlockup--docs","title":"Components/ContentLockup","name":"Docs","importPath":"./stories/ContentLockup.stories.js","type":"docs","tags":["dev","test","autodocs"],"storiesImports":[]},"components-contentlockup--default":{"type":"story","id":"components-contentlockup--default","name":"Default","title":"Components/ContentLockup","importPath":"./stories/ContentLockup.stories.js","componentPath":"./app/components/ContentLockup.js","tags":["dev","test","autodocs"]},"components-contentlockup--long-description":{"type":"story","id":"components-contentlockup--long-description","name":"Long Description","title":"Components/ContentLockup","importPath":"./stories/ContentLockup.stories.js","componentPath":"./app/components/ConteLine truncated
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
{"generatedAt":1755714532484,"userSince":1754920905774,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"metaFramework":{"name":"Next","packageName":"next","version":"15.2.4"},"testPackages":{"@chromatic-com/storybook":"4.1.0","@storybook/addon-vitest":"9.1.2","@vitest/browser":"3.2.4","@vitest/coverage-v8":"3.2.4","playwright":"1.54.2","vitest":"3.2.4"},"hasRouterPackage":true,"packageManager":{"type":"npm","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/nextjs-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":0,"applicationFileCount":1,"storybookVersion":"9.1.2","language":"javascript","storybookPackages":{"@storybook/addon-styling-webpack":{"version":"2.0.0"},"@storybook/addon-viewport":{"version":"9.0.8"},"@storybook/nextjs-vite":{"version":"9.1.2"},"eslint-plugin-storybook":{"version":"9.1.2"},"storybook":{"version":"9.1.2"}},"addons":{"@chromatic-com/storybook":{"version":"4.1.0"},"@storybook/addon-docs":{"version":"9.1.2"},"@storybook/addon-onboarding":{"version":"9.1.2"},"@storybook/addon-a11y":{"version":"9.1.2"},"@storybook/addon-vitest":{"version":"9.1.2"}}}
|
||||
@@ -0,0 +1,5 @@
|
||||
try{
|
||||
(()=>{var kn=Object.defineProperty;var Se=(e,t)=>()=>(e&&(t=e(e=0)),t);var Nn=(e,t)=>{for(var a in t)kn(e,a,{get:t[a],enumerable:!0})};var O=Se(()=>{});var w=Se(()=>{});var k=Se(()=>{});var mt={};Nn(mt,{A:()=>Mn,ActionBar:()=>Ln,AddonPanel:()=>Fn,Badge:()=>le,Bar:()=>Hn,Blockquote:()=>Un,Button:()=>re,ClipboardCode:()=>Gn,Code:()=>Bn,DL:()=>zn,Div:()=>Wn,DocumentWrapper:()=>jn,EmptyTabContent:()=>Ce,ErrorFormatter:()=>Yn,FlexBar:()=>Vn,Form:()=>qn,H1:()=>Kn,H2:()=>Qn,H3:()=>Xn,H4:()=>Zn,H5:()=>Jn,H6:()=>ea,HR:()=>ta,IconButton:()=>ie,Img:()=>na,LI:()=>aa,Link:()=>Ie,ListItem:()=>ra,Loader:()=>oa,Modal:()=>la,OL:()=>ia,P:()=>ca,Placeholder:()=>sa,Pre:()=>ua,ProgressSpinner:()=>da,ResetWrapper:()=>ma,ScrollArea:()=>Oe,Separator:()=>fa,Spaced:()=>pa,Span:()=>ha,StorybookIcon:()=>ya,StorybookLogo:()=>ba,SyntaxHighlighter:()=>we,TT:()=>ga,TabBar:()=>Sa,TabButton:()=>va,TabWrapper:()=>Ea,Table:()=>Ia,Tabs:()=>xa,TabsState:()=>Ra,TooltipLinkList:()=>ke,TooltipMessage:()=>Aa,TooltipNote:()=>pe,UL:()=>$a,WithTooltip:()=>de,WithTooltipPure:()=>Ta,Zoom:()=>_a,codeCommon:()=>Ca,components:()=>Oa,createCopyToClipboardFunction:()=>wa,default:()=>Dn,getStoryHref:()=>ka,interleaveSeparators:()=>Na,nameSpaceClassNames:()=>Pa,resetComponents:()=>Da,withReset:()=>Ma});var Dn,Mn,Ln,Fn,le,Hn,Un,re,Gn,Bn,zn,Wn,jn,Ce,Yn,Vn,qn,Kn,Qn,Xn,Zn,Jn,ea,ta,ie,na,aa,Ie,ra,oa,la,ia,ca,sa,ua,da,ma,Oe,fa,pa,ha,ya,ba,we,ga,Sa,va,Ea,Ia,xa,Ra,ke,Aa,pe,$a,de,Ta,_a,Ca,Oa,wa,ka,Na,Pa,Da,Ma,Ne=Se(()=>{O();w();k();Dn=__STORYBOOK_COMPONENTS__,{A:Mn,ActionBar:Ln,AddonPanel:Fn,Badge:le,Bar:Hn,Blockquote:Un,Button:re,ClipboardCode:Gn,Code:Bn,DL:zn,Div:Wn,DocumentWrapper:jn,EmptyTabContent:Ce,ErrorFormatter:Yn,FlexBar:Vn,Form:qn,H1:Kn,H2:Qn,H3:Xn,H4:Zn,H5:Jn,H6:ea,HR:ta,IconButton:ie,Img:na,LI:aa,Link:Ie,ListItem:ra,Loader:oa,Modal:la,OL:ia,P:ca,Placeholder:sa,Pre:ua,ProgressSpinner:da,ResetWrapper:ma,ScrollArea:Oe,Separator:fa,Spaced:pa,Span:ha,StorybookIcon:ya,StorybookLogo:ba,SyntaxHighlighter:we,TT:ga,TabBar:Sa,TabButton:va,TabWrapper:Ea,Table:Ia,Tabs:xa,TabsState:Ra,TooltipLinkList:ke,TooltipMessage:Aa,TooltipNote:pe,UL:$a,WithTooltip:de,WithTooltipPure:Ta,Zoom:_a,codeCommon:Ca,components:Oa,createCopyToClipboardFunction:wa,getStoryHref:ka,interleaveSeparators:Na,nameSpaceClassNames:Pa,resetComponents:Da,withReset:Ma}=__STORYBOOK_COMPONENTS__});O();w();k();O();w();k();O();w();k();var o=__REACT__,{Children:P,Component:ri,Fragment:me,Profiler:oi,PureComponent:ct,StrictMode:li,Suspense:ii,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:ci,act:si,cloneElement:V,createContext:fe,createElement:m,createFactory:ui,createRef:st,forwardRef:L,isValidElement:U,lazy:di,memo:mi,startTransition:fi,unstable_act:pi,useCallback:R,useContext:ve,useDebugValue:hi,useDeferredValue:yi,useEffect:G,useId:ut,useImperativeHandle:bi,useInsertionEffect:gi,useLayoutEffect:Ee,useMemo:j,useReducer:dt,useRef:z,useState:H,useSyncExternalStore:Si,useTransition:vi,version:Ei}=__REACT__;Ne();O();w();k();var _i=__STORYBOOK_API__,{ActiveTabs:Ci,Consumer:Oi,ManagerContext:wi,Provider:ki,RequestResponseError:Ni,addons:xe,combineParameters:Pi,controlOrMetaKey:Di,controlOrMetaSymbol:Mi,eventMatchesShortcut:Li,eventToShortcut:Fi,experimental_MockUniversalStore:Hi,experimental_UniversalStore:Ui,experimental_getStatusStore:ft,experimental_getTestProviderStore:Gi,experimental_requestResponse:Bi,experimental_useStatusStore:pt,experimental_useTestProviderStore:zi,experimental_useUniversalStore:Wi,internal_fullStatusStore:ji,internal_fullTestProviderStore:Yi,internal_universalStatusStore:Vi,internal_universalTestProviderStore:qi,isMacLike:Ki,isShortcutTaken:Qi,keyToSymbol:Xi,merge:Zi,mockChannel:Ji,optionOrAltSymbol:ec,shortcutMatchesShortcut:tc,shortcutToHumanString:nc,types:Pe,useAddonState:De,useArgTypes:ac,useArgs:rc,useChannel:ht,useGlobalTypes:oc,useGlobals:yt,useParameter:bt,useSharedState:lc,useStoryPrepared:ic,useStorybookApi:Re,useStorybookState:gt}=__STORYBOOK_API__;O();w();k();var mc=__STORYBOOK_ICONS__,{AccessibilityAltIcon:fc,AccessibilityIcon:St,AccessibilityIgnoredIcon:pc,AddIcon:hc,AdminIcon:yc,AlertAltIcon:bc,AlertIcon:gc,AlignLeftIcon:Sc,AlignRightIcon:vc,AppleIcon:Ec,ArrowBottomLeftIcon:Ic,ArrowBottomRightIcon:xc,ArrowDownIcon:Rc,ArrowLeftIcon:Ac,ArrowRightIcon:$c,ArrowSolidDownIcon:Tc,ArrowSolidLeftIcon:_c,ArrowSolidRightIcon:Cc,ArrowSolidUpIcon:Oc,ArrowTopLeftIcon:wc,ArrowTopRightIcon:kc,ArrowUpIcon:Nc,AzureDevOpsIcon:Pc,BackIcon:Dc,BasketIcon:Mc,BatchAcceptIcon:Lc,BatchDenyIcon:Fc,BeakerIcon:Hc,BellIcon:Uc,BitbucketIcon:Gc,BoldIcon:Bc,BookIcon:zc,BookmarkHollowIcon:Wc,BookmarkIcon:jc,BottomBarIcon:Yc,BottomBarToggleIcon:Vc,BoxIcon:qc,BranchIcon:Kc,BrowserIcon:Qc,ButtonIcon:Xc,CPUIcon:Zc,CalendarIcon:Jc,CameraIcon:es,CameraStabilizeIcon:ts,CategoryIcon:ns,CertificateIcon:as,ChangedIcon:rs,ChatIcon:os,CheckIcon:vt,ChevronDownIcon:ls,ChevronLeftIcon:is,ChevronRightIcon:cs,ChevronSmallDownIcon:Et,ChevronSmallLeftIcon:ss,ChevronSmallRightIcon:us,ChevronSmallUpIcon:ds,ChevronUpIcLine truncated
|
||||
${l}`),o.createElement(Bt,{language:"css",wrapLongLines:!0},`/* selector */
|
||||
${c} {}`))}var ho={minor:"neutral",moderate:"warning",serious:"negative",critical:"critical"},yo={minor:"Minor",moderate:"Moderate",serious:"Serious",critical:"Critical"},bo=E.div(({theme:e})=>({display:"flex",flexDirection:"column",width:"100%",borderBottom:`1px solid ${e.appBorderColor}`,containerType:"inline-size",fontSize:e.typography.size.s2})),go=E(Et)({transition:"transform 0.1s ease-in-out"}),So=E.div(({theme:e})=>({display:"flex",justifyContent:"space-between",alignItems:"center",gap:6,padding:"6px 10px 6px 15px",minHeight:40,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",width:"100%","&:hover":{color:e.color.secondary}})),vo=E.div(({theme:e})=>({display:"flex",alignItems:"baseline",flexGrow:1,fontSize:e.typography.size.s2,gap:8})),Eo=E.div(({theme:e})=>({display:"none",color:e.textMutedColor,fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,"@container (min-width: 800px)":{display:"block"}})),Io=E.div(({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"center",color:e.textMutedColor,width:28,height:28})),Be=({items:e,empty:t,type:a,handleSelectionChange:n,selectedItems:r,toggleOpen:i})=>o.createElement(o.Fragment,null,e&&e.length?e.map(l=>{let c=`${a}.${l.id}`,d=`details:${c}`,s=r.get(c),f=je(l);return o.createElement(bo,{key:c},o.createElement(So,{onClick:u=>i(u,a,l),"data-active":!!s},o.createElement(vo,null,o.createElement("strong",null,f),o.createElement(Eo,null,l.id)),l.impact&&o.createElement(le,{status:a===W.PASS?"neutral":ho[l.impact]},yo[l.impact]),o.createElement(Io,null,l.nodes.length),o.createElement(ie,{onClick:u=>i(u,a,l),"aria-label":`${s?"Collapse":"Expand"} details for ${f}`,"aria-expanded":!!s,"aria-controls":d},o.createElement(go,{style:{transform:`rotate(${s?-180:0}deg)`}}))),s?o.createElement(po,{id:d,item:l,type:a,selection:s,handleSelectionChange:n}):o.createElement("div",{id:d}))}):o.createElement(Ce,{title:t})),Je=function(e,t){return Je=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(a,n){a.__proto__=n}||function(a,n){for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(a[r]=n[r])},Je(e,t)};function xo(e,t){if(typeof t!="function"&&t!==null)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");Je(e,t);function a(){this.constructor=e}e.prototype=t===null?Object.create(t):(a.prototype=t.prototype,new a)}var et=function(){return et=Object.assign||function(e){for(var t,a=1,n=arguments.length;a<n;a++){t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},et.apply(this,arguments)};function Ro(e,t){var a={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var r=0,n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(a[n[r]]=e[n[r]]);return a}var Te=typeof globalThis<"u"?globalThis:typeof window<"u"||typeof window<"u"?window:typeof self<"u"?self:{};function Ao(e){var t=typeof e;return e!=null&&(t=="object"||t=="function")}var lt=Ao,$o=typeof Te=="object"&&Te&&Te.Object===Object&&Te,To=$o,_o=To,Co=typeof self=="object"&&self&&self.Object===Object&&self,Oo=_o||Co||Function("return this")(),vn=Oo,wo=vn,ko=function(){return wo.Date.now()},No=ko,Po=/\s/;function Do(e){for(var t=e.length;t--&&Po.test(e.charAt(t)););return t}var Mo=Do,Lo=Mo,Fo=/^\s+/;function Ho(e){return e&&e.slice(0,Lo(e)+1).replace(Fo,"")}var Uo=Ho,Go=vn,Bo=Go.Symbol,En=Bo,jt=En,In=Object.prototype,zo=In.hasOwnProperty,Wo=In.toString,he=jt?jt.toStringTag:void 0;function jo(e){var t=zo.call(e,he),a=e[he];try{e[he]=void 0;var n=!0}catch{}var r=Wo.call(e);return n&&(t?e[he]=a:delete e[he]),r}var Yo=jo,Vo=Object.prototype,qo=Vo.toString;function Ko(e){return qo.call(e)}var Qo=Ko,Yt=En,Xo=Yo,Zo=Qo,Jo="[object Null]",el="[object Undefined]",Vt=Yt?Yt.toStringTag:void 0;function tl(e){return e==null?e===void 0?el:Jo:Vt&&Vt in Object(e)?Xo(e):Zo(e)}var nl=tl;function al(e){return e!=null&&typeof e=="object"}var rl=al,ol=nl,ll=rl,il="[object Symbol]";function cl(e){return typeof e=="symbol"||ll(e)&&ol(e)==il}var sl=cl,ul=Uo,qt=lt,dl=sl,Kt=NaN,ml=/^[-+]0x[0-9a-f]+$/i,fl=/^0b[01]+$/i,pl=/^0o[0-7]+$/i,hl=parseInt;function yl(e){if(typeof e=="number")return e;if(dl(e))return Kt;if(qt(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=qt(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=ul(e);var a=fl.test(e);return a||pl.test(e)?hl(e.slice(2),a?2:8):ml.test(e)?Kt:+e}var bl=yl,gl=lt,ze=No,Qt=bl,Sl="Expected a function",vl=Math.max,El=Math.min;function Il(e,t,a){var n,r,i,l,c,d,s=0,f=!1,u=!1,p=!0;if(typeof e!="function")throw new TypeError(Sl);t=Qt(t)||0,gl(a)&&(f=!!a.leading,u="maxWait"in a,i=u?vl(Qt(a.maxWait)||0,t):i,p="trailing"in a?!!a.trailing:p);function b($){var x=n,F=r;return n=r=void 0,s=$,l=e.apply(F,x),l}function h($){return s=$,c=setTimeout(g,t),f?b($):l}function I($){var x=$-d,F=$-s,q=t-x;return u?El(q,i-
Line truncated
|
||||
}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
|
||||
@@ -0,0 +1,356 @@
|
||||
try{
|
||||
(()=>{var Lt=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var _e={NODE_ENV:"production",NODE_PATH:[],STORYBOOK:"true",PUBLIC_URL:"."};var a=__REACT__,{Children:_6,Component:Tt,Fragment:I6,Profiler:R6,PureComponent:B6,StrictMode:P6,Suspense:V6,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:H6,act:j6,cloneElement:D6,createContext:He,createElement:S,createFactory:z6,createRef:U6,forwardRef:W,isValidElement:wl,lazy:$6,memo:W6,startTransition:q6,unstable_act:G6,useCallback:K,useContext:Gt,useDebugValue:Y6,useDeferredValue:K6,useEffect:te,useId:J6,useImperativeHandle:Q6,useInsertionEffect:X6,useLayoutEffect:ef,useMemo:ft,useReducer:Cl,useRef:Ee,useState:Le,useSyncExternalStore:tf,useTransition:nf,version:af}=__REACT__;var sf=__STORYBOOK_TYPES__,{Addon_TypesEnum:Tr}=__STORYBOOK_TYPES__;var pf=__STORYBOOK_API__,{ActiveTabs:hf,Consumer:ff,ManagerContext:gf,Provider:vf,RequestResponseError:yf,addons:ga,combineParameters:bf,controlOrMetaKey:Ef,controlOrMetaSymbol:kf,eventMatchesShortcut:wf,eventToShortcut:Cf,experimental_MockUniversalStore:Sf,experimental_UniversalStore:xf,experimental_getStatusStore:va,experimental_getTestProviderStore:Sl,experimental_requestResponse:Nf,experimental_useStatusStore:xl,experimental_useTestProviderStore:Nl,experimental_useUniversalStore:Mf,internal_fullStatusStore:Ff,internal_fullTestProviderStore:Af,internal_universalStatusStore:Lf,internal_universalTestProviderStore:Tf,isMacLike:Zf,isShortcutTaken:Of,keyToSymbol:_f,merge:If,mockChannel:Rf,optionOrAltSymbol:Bf,shortcutMatchesShortcut:Pf,shortcutToHumanString:Vf,types:Hf,useAddonState:Ml,useArgTypes:jf,useArgs:Df,useChannel:ya,useGlobalTypes:Fl,useGlobals:Al,useParameter:Ll,useSharedState:zf,useStoryPrepared:Uf,useStorybookApi:Zt,useStorybookState:wn}=__STORYBOOK_API__;var Yf=__STORYBOOK_THEMING__,{CacheProvider:Kf,ClassNames:Jf,Global:Qf,ThemeProvider:Xf,background:e8,color:Cn,convert:t8,create:n8,createCache:a8,createGlobal:r8,createReset:i8,css:se,darken:l8,ensure:o8,ignoreSsrWarning:s8,isPropValid:d8,jsx:c8,keyframes:Ct,lighten:u8,styled:k,themes:m8,typography:p8,useTheme:Sn,withTheme:h8}=__STORYBOOK_THEMING__;var b8=__STORYBOOK_COMPONENTS__,{A:E8,ActionBar:k8,AddonPanel:w8,Badge:Tl,Bar:C8,Blockquote:S8,Button:xn,ClipboardCode:x8,Code:Zl,DL:N8,Div:M8,DocumentWrapper:F8,EmptyTabContent:A8,ErrorFormatter:L8,FlexBar:T8,Form:Z8,H1:O8,H2:_8,H3:I8,H4:R8,H5:B8,H6:P8,HR:V8,IconButton:Ol,Img:H8,LI:j8,Link:Ot,ListItem:D8,Loader:Zr,Modal:z8,OL:U8,P:$8,Placeholder:W8,Pre:q8,ProgressSpinner:_l,ResetWrapper:G8,ScrollArea:Y8,Separator:K8,Spaced:J8,Span:Q8,StorybookIcon:X8,StorybookLogo:e9,SyntaxHighlighter:t9,TT:n9,TabBar:a9,TabButton:r9,TabWrapper:i9,Table:l9,Tabs:o9,TabsState:s9,TooltipLinkList:Il,TooltipMessage:Rl,TooltipNote:ba,UL:d9,WithTooltip:ke,WithTooltipPure:c9,Zoom:u9,codeCommon:m9,components:p9,createCopyToClipboardFunction:h9,getStoryHref:f9,interleaveSeparators:g9,nameSpaceClassNames:v9,resetComponents:y9,withReset:b9}=__STORYBOOK_COMPONENTS__;var Nn=__REACT_DOM__,{__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:S9,createPortal:Ea,createRoot:x9,findDOMNode:N9,flushSync:M9,hydrate:F9,hydrateRoot:A9,render:L9,unmountComponentAtNode:Bl,unstable_batchedUpdates:T9,unstable_renderSubtreeIntoContainer:Pl,version:Z9}=__REACT_DOM__;var od='@keyframes Bc2PgW_ya{to{translate:0 var(--sh)}}@keyframes Bc2PgW_xa{to{translate:var(--xlp)0}}@keyframes Bc2PgW_r{50%{rotate:var(--hr)180deg}to{rotate:var(--r)360deg}}.Bc2PgW_c{z-index:1200;width:0;height:0;position:relative;overflow:visible}.Bc2PgW_p{animation:xa var(--dc)forwards cubic-bezier(var(--x1),var(--x2),var(--x3),var(--x4));animation-name:Bc2PgW_xa}.Bc2PgW_p>div{animation:ya var(--dc)forwards cubic-bezier(var(--y1),var(--y2),var(--y3),var(--y4));width:var(--w);height:var(--h);animation-name:Bc2PgW_ya;position:absolute;top:0;left:0}.Bc2PgW_p>div:before{content:"";background-color:var(--bgc);animation:r var(--rd)infinite linear;border-radius:var(--br);width:100%;height:100%;animation-name:Bc2PgW_r;display:block}',Vl="Bc2PgW_p",sd="Bc2PgW_c",Hl=["#FFC700","#FF0000","#2E3191","#41BBC7"],jl=3500,Dl=.5,zl=150,Ul="mix",$l=12,Wl="",ql=!0,Gl=800,Yl=1600;function dd(e,t={}){let{colors:n=Hl,duration:r=jl,force:i=Dl,particleCount:l=zl,particleShape:o=Ul,particleSize:s=$l,particleClass:d=Wl,destroyAfterDone:c=ql,stageHeight:u=Gl,stageWidth:m=Yl}=t;(function(f){if(document.querySelector("style[data-neoconfetti]"))return;let E=Or("style");E.dataset.neoconfetti="",E.textContent=f,_r(document.head,E)})(od),e.classList.add(sd),e.style.setProperty("--sh",u+"px");let p=[],v=[],g=()=>Mn(nt()*(hd-1)),y=(f,E)=>o!=="rectangles"&&(f==="circles"||fd(E));function w(f,E){let C=g(),Z=y(o,C),M=(X,oe)=>f.style.setProperty(X,oe+"");M("--xlp",Ir(ka(Xl(E,90)-180),0,180,-m/2,m/2)+"px"),M("--dc",r-Mn(1e3*nt())+"ms");let V=nt()<udLine truncated
|
||||
`),n="",r=0,i=0,l=t.length-1,o=0;o<t.length;o++)xa.lastIndex=0,xa.test(t[o])&&(o&&(!r||xa.lastIndex<r)&&(r=xa.lastIndex),i=i||o,l=o);for(var s=i;s<=l;s++)s!==i&&(n+=`
|
||||
`),n+=t[s].slice(r).replace(/\\"""/g,'"""');return n}function Q(){for(var e=0|ue.charCodeAt(G++);e===9||e===10||e===13||e===32||e===35||e===44||e===65279;e=0|ue.charCodeAt(G++))if(e===35)for(;(e=ue.charCodeAt(G++))!==10&&e!==13;);G--}var xs=/[_A-Za-z]\w*/y;function ut(){var e;if(e=Re(xs))return{kind:"Name",value:e}}var xu=/(?:null|true|false)/y,Ns=/\$[_A-Za-z]\w*/y,Nu=/-?\d+/y,Mu=/(?:\.\d+)?[eE][+-]?\d+|\.\d+/y,Fu=/\\/g,Au=/"""(?:"""|(?:[\s\S]*?[^\\])""")/y,Lu=/"(?:"|[^\r\n]*?[^\\]")/y;function ja(e){var t,n;if(n=Re(xu))t=n==="null"?{kind:"NullValue"}:{kind:"BooleanValue",value:n==="true"};else if(!e&&(n=Re(Ns)))t={kind:"Variable",name:{kind:"Name",value:n.slice(1)}};else if(n=Re(Nu)){var r=n;(n=Re(Mu))?t={kind:"FloatValue",value:r+n}:t={kind:"IntValue",value:r}}else if(n=Re(xs))t={kind:"EnumValue",value:n};else if(n=Re(Au))t={kind:"StringValue",value:Su(n.slice(3,-3)),block:!0};else if(n=Re(Lu))t={kind:"StringValue",value:Fu.test(n)?JSON.parse(n):n.slice(1,-1),block:!1};else if(t=function(i){var l;if(ue.charCodeAt(G)===91){G++,Q();for(var o=[];l=ja(i);)o.push(l);if(ue.charCodeAt(G++)!==93)throw ye("ListValue");return Q(),{kind:"ListValue",values:o}}}(e)||function(i){if(ue.charCodeAt(G)===123){G++,Q();for(var l=[],o;o=ut();){if(Q(),ue.charCodeAt(G++)!==58)throw ye("ObjectField");Q();var s=ja(i);if(!s)throw ye("ObjectField");l.push({kind:"ObjectField",name:o,value:s})}if(ue.charCodeAt(G++)!==125)throw ye("ObjectValue");return Q(),{kind:"ObjectValue",fields:l}}}(e))return t;return Q(),t}function Ms(e){var t=[];if(Q(),ue.charCodeAt(G)===40){G++,Q();for(var n;n=ut();){if(Q(),ue.charCodeAt(G++)!==58)throw ye("Argument");Q();var r=ja(e);if(!r)throw ye("Argument");t.push({kind:"Argument",name:n,value:r})}if(!t.length||ue.charCodeAt(G++)!==41)throw ye("Argument");Q()}return t}function on(e){var t=[];for(Q();ue.charCodeAt(G)===64;){G++;var n=ut();if(!n)throw ye("Directive");Q(),t.push({kind:"Directive",name:n,arguments:Ms(e)})}return t}function Tu(){var e=ut();if(e){Q();var t;if(ue.charCodeAt(G)===58){if(G++,Q(),t=e,!(e=ut()))throw ye("Field");Q()}return{kind:"Field",alias:t,name:e,arguments:Ms(!1),directives:on(!1),selectionSet:Er()}}}function Fs(){var e;if(Q(),ue.charCodeAt(G)===91){G++,Q();var t=Fs();if(!t||ue.charCodeAt(G++)!==93)throw ye("ListType");e={kind:"ListType",type:t}}else if(e=ut())e={kind:"NamedType",name:e};else throw ye("NamedType");return Q(),ue.charCodeAt(G)===33?(G++,Q(),{kind:"NonNullType",type:e}):e}var Zu=/on/y;function As(){if(Re(Zu)){Q();var e=ut();if(!e)throw ye("NamedType");return Q(),{kind:"NamedType",name:e}}}var Ou=/\.\.\./y;function _u(){if(Re(Ou)){Q();var e=G,t;if((t=ut())&&t.value!=="on")return{kind:"FragmentSpread",name:t,directives:on(!1)};G=e;var n=As(),r=on(!1),i=Er();if(!i)throw ye("InlineFragment");return{kind:"InlineFragment",typeCondition:n,directives:r,selectionSet:i}}}function Er(){var e;if(Q(),ue.charCodeAt(G)===123){G++,Q();for(var t=[];e=_u()||Tu();)t.push(e);if(!t.length||ue.charCodeAt(G++)!==125)throw ye("SelectionSet");return Q(),{kind:"SelectionSet",selections:t}}}var Iu=/fragment/y;function Ru(){if(Re(Iu)){Q();var e=ut();if(!e)throw ye("FragmentDefinition");Q();var t=As();if(!t)throw ye("FragmentDefinition");var n=on(!1),r=Er();if(!r)throw ye("FragmentDefinition");return{kind:"FragmentDefinition",name:e,typeCondition:t,directives:n,selectionSet:r}}}var Bu=/(?:query|mutation|subscription)/y;function Pu(){var e,t,n=[],r=[];(e=Re(Bu))&&(Q(),t=ut(),n=function(){var l,o=[];if(Q(),ue.charCodeAt(G)===40){for(G++,Q();l=Re(Ns);){if(Q(),ue.charCodeAt(G++)!==58)throw ye("VariableDefinition");var s=Fs(),d=void 0;if(ue.charCodeAt(G)===61&&(G++,Q(),!(d=ja(!0))))throw ye("VariableDefinition");Q(),o.push({kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:l.slice(1)}},type:s,defaultValue:d,directives:on(!0)})}if(ue.charCodeAt(G++)!==41)throw ye("VariableDefinition");Q()}return o}(),r=on(!1));var i=Er();if(i)return{kind:"OperationDefinition",operation:e||"query",name:t,variableDefinitions:n,directives:r,selectionSet:i}}function Vu(e,t){return ue=typeof e.body=="string"?e.body:e,G=0,function(){var n;Q();for(var r=[];n=Ru()||Pu();)r.push(n);return{kind:"Document",definitions:r}}()}function Hu(e){return JSON.stringify(e)}function ju(e){return`"""
|
||||
`+e.replace(/"""/g,'\\"""')+`
|
||||
"""`}var je=e=>!(!e||!e.length),Se={OperationDefinition(e){if(e.operation==="query"&&!e.name&&!je(e.variableDefinitions)&&!je(e.directives))return Se.SelectionSet(e.selectionSet);var t=e.operation;return e.name&&(t+=" "+e.name.value),je(e.variableDefinitions)&&(e.name||(t+=" "),t+="("+e.variableDefinitions.map(Se.VariableDefinition).join(", ")+")"),je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),t+" "+Se.SelectionSet(e.selectionSet)},VariableDefinition(e){var t=Se.Variable(e.variable)+": "+De(e.type);return e.defaultValue&&(t+=" = "+De(e.defaultValue)),je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),t},Field(e){var t=(e.alias?e.alias.value+": ":"")+e.name.value;if(je(e.arguments)){var n=e.arguments.map(Se.Argument),r=t+"("+n.join(", ")+")";t=r.length>80?t+`(
|
||||
`+n.join(`
|
||||
`).replace(/\n/g,`
|
||||
`)+`
|
||||
)`:r}return je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),e.selectionSet?t+" "+Se.SelectionSet(e.selectionSet):t},StringValue:e=>e.block?ju(e.value):Hu(e.value),BooleanValue:e=>""+e.value,NullValue:e=>"null",IntValue:e=>e.value,FloatValue:e=>e.value,EnumValue:e=>e.value,Name:e=>e.value,Variable:e=>"$"+e.name.value,ListValue:e=>"["+e.values.map(De).join(", ")+"]",ObjectValue:e=>"{"+e.fields.map(Se.ObjectField).join(", ")+"}",ObjectField:e=>e.name.value+": "+De(e.value),Document:e=>je(e.definitions)?e.definitions.map(De).join(`
|
||||
|
||||
`):"",SelectionSet:e=>`{
|
||||
`+e.selections.map(De).join(`
|
||||
`).replace(/\n/g,`
|
||||
`)+`
|
||||
}`,Argument:e=>e.name.value+": "+De(e.value),FragmentSpread(e){var t="..."+e.name.value;return je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),t},InlineFragment(e){var t="...";return e.typeCondition&&(t+=" on "+e.typeCondition.name.value),je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),t+" "+De(e.selectionSet)},FragmentDefinition(e){var t="fragment "+e.name.value;return t+=" on "+e.typeCondition.name.value,je(e.directives)&&(t+=" "+e.directives.map(Se.Directive).join(" ")),t+" "+De(e.selectionSet)},Directive(e){var t="@"+e.name.value;return je(e.arguments)&&(t+="("+e.arguments.map(Se.Argument).join(", ")+")"),t},NamedType:e=>e.name.value,ListType:e=>"["+De(e.type)+"]",NonNullType:e=>De(e.type)+"!"};function De(e){return Se[e.kind]?Se[e.kind](e):""}var al=()=>{},Pe=al;function Je(e){return{tag:0,0:e}}function oa(e){return{tag:1,0:e}}var xo=()=>typeof Symbol=="function"&&Symbol.asyncIterator||"@@asyncIterator",Du=e=>e;function Ze(e){return t=>n=>{var r=Pe;t(i=>{i===0?n(0):i.tag===0?(r=i[0],n(i)):e(i[0])?n(i):r(0)})}}function wi(e){return t=>n=>t(r=>{r===0||r.tag===0?n(r):n(oa(e(r[0])))})}function Da(e){return t=>n=>{var r=[],i=Pe,l=!1,o=!1;t(s=>{o||(s===0?(o=!0,r.length||n(0)):s.tag===0?i=s[0]:(l=!1,function(d){var c=Pe;d(u=>{if(u===0){if(r.length){var m=r.indexOf(c);m>-1&&(r=r.slice()).splice(m,1),r.length||(o?n(0):l||(l=!0,i(0)))}}else u.tag===0?(r.push(c=u[0]),c(0)):r.length&&(n(u),c(0))})}(e(s[0])),l||(l=!0,i(0))))}),n(Je(s=>{if(s===1){o||(o=!0,i(1));for(var d=0,c=r,u=r.length;d<u;d++)c[d](1);r.length=0}else{!o&&!l?(l=!0,i(0)):l=!1;for(var m=0,p=r,v=r.length;m<v;m++)p[m](0)}}))}}function zu(e){return Da(Du)(e)}function qn(e){return zu(Wu(e))}function rl(e){return t=>n=>{var r=!1;t(i=>{if(!r)if(i===0)r=!0,n(0),e();else if(i.tag===0){var l=i[0];n(Je(o=>{o===1?(r=!0,l(1),e()):l(o)}))}else n(i)})}}function za(e){return t=>n=>{var r=!1;t(i=>{if(!r)if(i===0)r=!0,n(0);else if(i.tag===0){var l=i[0];n(Je(o=>{o===1&&(r=!0),l(o)}))}else e(i[0]),n(i)})}}function Ci(e){return t=>n=>t(r=>{r===0?n(0):r.tag===0?(n(r),e()):n(r)})}function Gn(e){var t=[],n=Pe,r=!1;return i=>{t.push(i),t.length===1&&e(l=>{if(l===0){for(var o=0,s=t,d=t.length;o<d;o++)s[o](0);t.length=0}else if(l.tag===0)n=l[0];else{r=!1;for(var c=0,u=t,m=t.length;c<m;c++)u[c](l)}}),i(Je(l=>{if(l===1){var o=t.indexOf(i);o>-1&&(t=t.slice()).splice(o,1),t.length||n(1)}else r||(r=!0,n(0))}))}}function No(e){return t=>n=>{var r=Pe,i=Pe,l=!1,o=!1,s=!1,d=!1;t(c=>{d||(c===0?(d=!0,s||n(0)):c.tag===0?r=c[0]:(s&&(i(1),i=Pe),l?l=!1:(l=!0,r(0)),function(u){s=!0,u(m=>{s&&(m===0?(s=!1,d?n(0):l||(l=!0,r(0))):m.tag===0?(o=!1,(i=m[0])(0)):(n(m),o?o=!1:i(0)))})}(e(c[0]))))}),n(Je(c=>{c===1?(d||(d=!0,r(1)),s&&(s=!1,i(1))):(!d&&!l&&(l=!0,r(0)),s&&!o&&(o=!0,i(0)))}))}}function kr(e){return t=>n=>{var r=Pe,i=!1,l=0;t(o=>{i||(o===0?(i=!0,n(0)):o.tag===0?e<=0?(i=!0,n(0),o[0](1)):r=o[0]:l++<e?(n(o),!i&&l>=e&&(i=!0,n(0),r(1))):n(o))}),n(Je(o=>{o===1&&!i?(i=!0,r(1)):o===0&&!i&&l<e&&r(0)}))}}function Ls(e){return t=>n=>{var r=Pe,i=Pe,l=!1;t(o=>{l||(o===0?(l=!0,i(1),n(0)):o.tag===0?(r=o[0],e(s=>{s===0||(s.tag===0?(i=s[0])(0):(l=!0,i(1),r(1),n(0)))})):n(o))}),n(Je(o=>{o===1&&!l?(l=!0,r(1),i(1)):l||r(0)}))}}function Ts(e,t){return n=>r=>{var i=Pe,l=!1;n(o=>{l||(o===0?(l=!0,r(0)):o.tag===0?(i=o[0],r(o)):e(o[0])?r(o):(l=!0,t&&r(o),r(0),i(1)))})}}function Uu(e){return t=>e()(t)}function Zs(e){return t=>{var n=e[xo()]&&e[xo()]()||e,r=!1,i=!1,l=!1,o;t(Je(async s=>{if(s===1)r=!0,n.return&&n.return();else if(i)l=!0;else{for(l=i=!0;l&&!r;)if((o=await n.next()).done)r=!0,n.return&&await n.return(),t(0);else try{l=!1,t(oa(o.value))}catch(d){if(n.throw)(r=!!(await n.throw(d)).done)&&t(0);else throw d}i=!1}}))}}function $u(e){return e[Symbol.asyncIterator]?Zs(e):t=>{var n=e[Symbol.iterator](),r=!1,i=!1,l=!1,o;t(Je(s=>{if(s===1)r=!0,n.return&&n.return();else if(i)l=!0;else{for(l=i=!0;l&&!r;)if((o=n.next()).done)r=!0,n.return&&n.return(),t(0);else try{l=!1,t(oa(o.value))}catch(d){if(n.throw)(r=!!n.throw(d).done)&&t(0);else throw d}i=!1}}))}}var Wu=$u;function jn(e){return t=>{var n=!1;t(Je(r=>{r===1?n=!0:n||(n=!0,t(oa(e)),t(0))}))}}function Os(e){return t=>{var n=!1,r=e({next(i){n||t(oa(i))},complete(){n||(n=!0,t(0))}});t(Je(i=>{i===1&&!n&&(n=!0,r())}))}}function Si(){var e,t;return{source:Gn(Os(n=>(e=n.next,t=n.complete,al))),next(n){e&&e(n)},complete(){t&&t()}}}function Mo(e){return Os(t=>(e.then(n=>{Promise.resolve(n).then(()=>{t.next(n),t.complete()})}),al))}function sn(e){return t=>{var n=Pe,r=!1;return t(i=>{i===0?r=!0:i.tag===0?(n=i[0])(0):r||(e(i[0]),n(0))}),{unsubscribe(){r||(r=!0,n(1))}}}}function qu(e){sn(t=>{})(e)}function il(e){return new Promise(t=>{var n=Pe,r;e(i=>{i===0?Promise.resolve(r).then(t):i.tag===0?(n=i[0])(0):(r=i[0],n(0))})})}var Gu=e=>e&&e.message&&(e.extensions||e.name==="GraphQLError")?e:typeof e=="object"&&e.message?new ki(e.message,e.nodes,e.source,e.positions,e.path,e,e.extensions||{}):new ki(e),ll=class extends Error{constructor(e
Line truncated
|
||||
`),l+=`[GraphQL] ${o.message}`;return l})(e.networkError,t);super(n),this.name="CombinedError",this.message=n,this.graphQLErrors=t,this.networkError=e.networkError,this.response=e.response}toString(){return this.message}},xi=(e,t)=>{for(var n=0|(t||5381),r=0,i=0|e.length;r<i;r++)n=(n<<5)+n+e.charCodeAt(r);return n},Pt=new Set,Fo=new WeakMap,Qt=e=>{if(e===null||Pt.has(e))return"null";if(typeof e!="object")return JSON.stringify(e)||"";if(e.toJSON)return Qt(e.toJSON());if(Array.isArray(e)){var t="[";for(var n of e)t.length>1&&(t+=","),t+=Qt(n)||"null";return t+="]"}else if($a!==dn&&e instanceof $a||Wa!==dn&&e instanceof Wa)return"null";var r=Object.keys(e).sort();if(!r.length&&e.constructor&&Object.getPrototypeOf(e).constructor!==Object.prototype.constructor){var i=Fo.get(e)||Math.random().toString(36).slice(2);return Fo.set(e,i),Qt({__key:i})}Pt.add(e);var l="{";for(var o of r){var s=Qt(e[o]);s&&(l.length>1&&(l+=","),l+=Qt(o)+":"+s)}return Pt.delete(e),l+="}"},Ni=(e,t,n)=>{if(!(n==null||typeof n!="object"||n.toJSON||Pt.has(n)))if(Array.isArray(n))for(var r=0,i=n.length;r<i;r++)Ni(e,`${t}.${r}`,n[r]);else if(n instanceof $a||n instanceof Wa)e.set(t,n);else{Pt.add(n);for(var l of Object.keys(n))Ni(e,`${t}.${l}`,n[l])}},Ua=e=>(Pt.clear(),Qt(e)),dn=class{},$a=typeof File<"u"?File:dn,Wa=typeof Blob<"u"?Blob:dn,Yu=/("{3}[\s\S]*"{3}|"(?:\\.|[^"])*")/g,Ku=/(?:#[^\n\r]+)?(?:[\r\n]+|$)/g,Ju=(e,t)=>t%2==0?e.replace(Ku,`
|
||||
`):e,Ao=e=>e.split(Yu).map(Ju).join("").trim(),Lo=new Map,Ra=new Map,ol=e=>{var t;return typeof e=="string"?t=Ao(e):e.loc&&Ra.get(e.__key)===e?t=e.loc.source.body:(t=Lo.get(e)||Ao(De(e)),Lo.set(e,t)),typeof e!="string"&&!e.loc&&(e.loc={start:0,end:t.length,source:{body:t,name:"gql",locationOffset:{line:1,column:1}}}),t},To=e=>{var t=xi(ol(e));if(e.definitions){var n=_s(e);n&&(t=xi(`
|
||||
# ${n}`,t))}return t},Qu=e=>{var t,n;return typeof e=="string"?(t=To(e),n=Ra.get(t)||Vu(e)):(t=e.__key||To(e),n=Ra.get(t)||e),n.loc||ol(n),n.__key=t,Ra.set(t,n),n},nn=(e,t,n)=>{var r=t||{},i=Qu(e),l=Ua(r),o=i.__key;return l!=="{}"&&(o=xi(l,o)),{key:o,query:i,variables:r,extensions:n}},_s=e=>{for(var t of e.definitions)if(t.kind===Cu.OPERATION_DEFINITION)return t.name?t.name.value:void 0},Zo=(e,t,n)=>{if(!("data"in t||"errors"in t&&Array.isArray(t.errors)))throw new Error("No Content");var r=e.kind==="subscription";return{operation:e,data:t.data,error:Array.isArray(t.errors)?new ll({graphQLErrors:t.errors,response:n}):void 0,extensions:t.extensions?{...t.extensions}:void 0,hasNext:t.hasNext==null?r:t.hasNext,stale:!1}},Mi=(e,t)=>{if(typeof e=="object"&&e!=null&&(!e.constructor||e.constructor===Object||Array.isArray(e))){e=Array.isArray(e)?[...e]:{...e};for(var n of Object.keys(t))e[n]=Mi(e[n],t[n]);return e}return t},Xu=(e,t,n,r)=>{var i=e.error?e.error.graphQLErrors:[],l=!!e.extensions||!!t.extensions,o={...e.extensions,...t.extensions},s=t.incremental;"path"in t&&(s=[t]);var d={data:e.data};if(s){var c=function(m){Array.isArray(m.errors)&&i.push(...m.errors),m.extensions&&(Object.assign(o,m.extensions),l=!0);var p="data",v=d,g=[];if(m.path)g=m.path;else if(r){var y=r.find(C=>C.id===m.id);m.subPath?g=[...y.path,...m.subPath]:g=y.path}for(var w=0,b=g.length;w<b;p=g[w++])v=v[p]=Array.isArray(v[p])?[...v[p]]:{...v[p]};if(m.items)for(var h=+p>=0?p:0,f=0,E=m.items.length;f<E;f++)v[h+f]=Mi(v[h+f],m.items[f]);else m.data!==void 0&&(v[p]=Mi(v[p],m.data))};for(var u of s)c(u)}else d.data=t.data||e.data,i=t.errors||i;return{operation:e.operation,data:d.data,error:i.length?new ll({graphQLErrors:i,response:n}):void 0,extensions:l?o:void 0,hasNext:t.hasNext!=null?t.hasNext:e.hasNext,stale:!1}},Is=(e,t,n)=>({operation:e,data:void 0,error:new ll({networkError:t,response:n}),extensions:void 0,hasNext:!1,stale:!1});function e2(e){return{query:e.extensions&&e.extensions.persistedQuery&&!e.extensions.persistedQuery.miss?void 0:ol(e.query),operationName:_s(e.query),variables:e.variables||void 0,extensions:e.extensions}}var t2=(e,t)=>{var n=e.kind==="query"&&e.context.preferGetMethod;if(!n||!t)return e.context.url;var r=new URL(e.context.url);for(var i in t){var l=t[i];l&&r.searchParams.set(i,typeof l=="object"?Ua(l):l)}var o=r.toString();return o.length>2047&&n!=="force"?(e.context.preferGetMethod=!1,e.context.url):o},n2=(e,t)=>{if(t&&!(e.kind==="query"&&e.context.preferGetMethod)){var n=Ua(t),r=(s=>{var d=new Map;return($a!==dn||Wa!==dn)&&(Pt.clear(),Ni(d,"variables",s)),d})(t.variables);if(r.size){var i=new FormData;i.append("operations",n),i.append("map",Ua({...[...r.keys()].map(s=>[s])}));var l=0;for(var o of r.values())i.append(""+l++,o);return i}return n}},a2=(e,t)=>{var n={accept:e.kind==="subscription"?"text/event-stream, multipart/mixed":"application/graphql-response+json, application/graphql+json, application/json, text/event-stream, multipart/mixed"},r=(typeof e.context.fetchOptions=="function"?e.context.fetchOptions():e.context.fetchOptions)||{};if(r.headers)for(var i in r.headers)n[i.toLowerCase()]=r.headers[i];var l=n2(e,t);return typeof l=="string"&&!n["content-type"]&&(n["content-type"]="application/json"),{...r,method:l?"POST":"GET",body:l,headers:n}},r2=typeof TextDecoder<"u"?new TextDecoder:null,i2=/boundary="?([^=";]+)"?/i,l2=/data: ?([^\n]+)/,Oo=e=>e.constructor.name==="Buffer"?e.toString():r2.decode(e);async function*_o(e){if(e.body[Symbol.asyncIterator])for await(var t of e.body)yield Oo(t);else{var n=e.body.getReader(),r;try{for(;!(r=await n.read()).done;)yield Oo(r.value)}finally{n.cancel()}}}async function*Io(e,t){var n="",r;for await(var i of e)for(n+=i;(r=n.indexOf(t))>-1;)yield n.slice(0,r),n=n.slice(r+t.length)}async function*o2(e,t,n){var r=!0,i=null,l;try{yield await Promise.resolve();var o=(l=await(e.context.fetch||fetch)(t,n)).headers.get("Content-Type")||"",s;/multipart\/mixed/i.test(o)?s=async function*(u,m){var p=u.match(i2),v="--"+(p?p[1]:"-"),g=!0,y;for await(var w of Io(_o(m),`\r
|
||||
`+v)){if(g){g=!1;var b=w.indexOf(v);if(b>-1)w=w.slice(b+v.length);else continue}try{yield y=JSON.parse(w.slice(w.indexOf(`\r
|
||||
\r
|
||||
`)+4))}catch(h){if(!y)throw h}if(y&&y.hasNext===!1)break}y&&y.hasNext!==!1&&(yield{hasNext:!1})}(o,l):/text\/event-stream/i.test(o)?s=async function*(u){var m;for await(var p of Io(_o(u),`
|
||||
|
||||
`)){var v=p.match(l2);if(v){var g=v[1];try{yield m=JSON.parse(g)}catch(y){if(!m)throw y}if(m&&m.hasNext===!1)break}}m&&m.hasNext!==!1&&(yield{hasNext:!1})}(l):/text\//i.test(o)?s=async function*(u){var m=await u.text();try{var p=JSON.parse(m);yield p}catch{throw new Error(m)}}(l):s=async function*(u){yield JSON.parse(await u.text())}(l);var d;for await(var c of s)c.pending&&!i?d=c.pending:c.pending&&(d=[...d,...c.pending]),i=i?Xu(i,c,l,d):Zo(e,c,l),r=!1,yield i,r=!0;i||(yield i=Zo(e,{},l))}catch(u){if(!r)throw u;yield Is(e,l&&(l.status<200||l.status>=300)&&l.statusText?new Error(l.statusText):u,l)}}function s2(e,t,n){var r;return typeof AbortController<"u"&&(n.signal=(r=new AbortController).signal),rl(()=>{r&&r.abort()})(Ze(i=>!!i)(Zs(o2(e,t,n))))}var Fi=(e,t)=>{if(!e||typeof e!="object")return e;if(Array.isArray(e))return e.map(i=>Fi(i));if(e&&typeof e=="object"&&(t||"__typename"in e)){var n={};for(var r in e)r==="__typename"?Object.defineProperty(n,"__typename",{enumerable:!1,value:e.__typename}):n[r]=Fi(e[r]);return n}else return e};function Ro(e){var t=n=>e(n);return t.toPromise=()=>il(kr(1)(Ze(n=>!n.stale&&!n.hasNext)(t))),t.then=(n,r)=>t.toPromise().then(n,r),t.subscribe=n=>sn(n)(t),t}function qa(e,t,n){return{...t,kind:e,context:t.context?{...t.context,...n}:n||t.context}}var d2=()=>{},c2=({forward:e,dispatchDebug:t})=>n=>{var r=Da(l=>{var o=e2(l),s=t2(l,o),d=a2(l,o),c=Ls(Ze(u=>u.kind==="teardown"&&u.key===l.key)(n))(s2(l,s,d));return c})(Ze(l=>l.kind!=="teardown"&&(l.kind!=="subscription"||!!l.context.fetchSubscriptions))(n)),i=e(Ze(l=>l.kind==="teardown"||l.kind==="subscription"&&!l.context.fetchSubscriptions)(n));return qn([r,i])},u2=e=>({client:t,forward:n,dispatchDebug:r})=>e.reduceRight((i,l)=>l({client:t,forward(o){return Gn(i(Gn(o)))},dispatchDebug(o){}}),n),m2=({onOperation:e,onResult:t,onError:n})=>({forward:r})=>i=>Da(l=>{n&&l.error&&n(l.error,l.operation);var o=t&&t(l)||l;return"then"in o?Mo(o):jn(o)})(r(Da(l=>{var o=e&&e(l)||l;return"then"in o?Mo(o):jn(o)})(i))),p2=({dispatchDebug:e})=>t=>Ze(n=>!1)(t),h2=function e(t){var n=0,r=new Map,i=new Map,l=new Set,o=[],s={url:t.url,fetchSubscriptions:t.fetchSubscriptions,fetchOptions:t.fetchOptions,fetch:t.fetch,preferGetMethod:t.preferGetMethod,requestPolicy:t.requestPolicy||"cache-first"},d=Si();function c(h){(h.kind==="mutation"||h.kind==="teardown"||!l.has(h.key))&&(h.kind==="teardown"?l.delete(h.key):h.kind!=="mutation"&&l.add(h.key),d.next(h))}var u=!1;function m(h){if(h&&c(h),!u){for(u=!0;u&&(h=o.shift());)c(h);u=!1}}var p=h=>{var f=Ls(Ze(E=>E.kind==="teardown"&&E.key===h.key)(d.source))(Ze(E=>E.operation.kind===h.kind&&E.operation.key===h.key&&(!E.operation.context._instance||E.operation.context._instance===h.context._instance))(b));return t.maskTypename&&(f=wi(E=>({...E,data:Fi(E.data,!0)}))(f)),h.kind!=="query"?f=Ts(E=>!!E.hasNext,!0)(f):f=No(E=>{var C=jn(E);return E.stale||E.hasNext?C:qn([C,wi(()=>(E.stale=!0,E))(kr(1)(Ze(Z=>Z.key===h.key)(d.source)))])})(f),h.kind!=="mutation"?f=rl(()=>{l.delete(h.key),r.delete(h.key),i.delete(h.key),u=!1;for(var E=o.length-1;E>=0;E--)o[E].key===h.key&&o.splice(E,1);c(qa("teardown",h,h.context))})(za(E=>{if(E.stale){for(var C of o)if(C.key===E.operation.key){l.delete(C.key);break}}else E.hasNext||l.delete(h.key);r.set(h.key,E)})(f)):f=Ci(()=>{c(h)})(f),Gn(f)},v=this instanceof e?this:Object.create(e.prototype),g=Object.assign(v,{suspense:!!t.suspense,operations$:d.source,reexecuteOperation(h){if(h.kind==="teardown")m(h);else if(h.kind==="mutation"||i.has(h.key)){for(var f=!1,E=0;E<o.length;E++)f=f||o[E].key===h.key;f||l.delete(h.key),o.push(h),Promise.resolve().then(m)}},createRequestOperation(h,f,E){return E||(E={}),qa(h,f,{_instance:h==="mutation"?n=n+1|0:void 0,...s,...E,requestPolicy:E.requestPolicy||s.requestPolicy,suspense:E.suspense||E.suspense!==!1&&g.suspense})},executeRequestOperation(h){return h.kind==="mutation"?Ro(p(h)):Ro(Uu(()=>{var f=i.get(h.key);f||i.set(h.key,f=p(h)),f=Ci(()=>{m(h)})(f);var E=r.get(h.key);return h.kind==="query"&&E&&(E.stale||E.hasNext)?No(jn)(qn([f,Ze(C=>C===r.get(h.key))(jn(E))])):f}))},executeQuery(h,f){var E=g.createRequestOperation("query",h,f);return g.executeRequestOperation(E)},executeSubscription(h,f){var E=g.createRequestOperation("subscription",h,f);return g.executeRequestOperation(E)},executeMutation(h,f){var E=g.createRequestOperation("mutation",h,f);return g.executeRequestOperation(E)},readQuery(h,f,E){var C=null;return sn(Z=>{C=Z})(g.query(h,f,E)).unsubscribe(),C},query:(h,f,E)=>g.executeQuery(nn(h,f),E),subscription:(h,f,E)=>g.executeSubscription(nn(h,f),E),mutation:(h,f,E)=>g.executeMutation(nn(h,f),E)}),y=d2,w=u2(t.exchanges),b=Gn(w({client:g,dispatchDebug:y,forward:p2({dispatchDebug:y})})(d.source));return qu(b),g},f2={},wr=He(f2),g2=wr.Provider;wr.Consumer;wr.displayName="UrqlContext";var sl=()=>{var e=Gt(wr);return e},Ai={fetching:!1,stale:!1,error:void 0,data:void 0,extensions:void 0,operation:void 0},v2=(e,t)=>e===t||!(!e||!t||e.key!==t.key),$Line truncated
|
||||
query VisualTestsProjectCountQuery {
|
||||
viewer {
|
||||
projectCount
|
||||
accounts {
|
||||
newProjectUrl
|
||||
}
|
||||
}
|
||||
}
|
||||
`),Um=({onBack:e,hasProjectId:t,setAccessToken:n,setCreatedProjectId:r,exchangeParameters:i})=>{let l=sl(),o=hs(),{user_code:s,verificationUrl:d}=i,c=Ee(),u=Ee(),m=Ee(),p=K(async y=>{if(y.message==="login"&&u.current?.(d),y.message==="grant")try{let w=await cc(i);if(!w)throw new Error("Failed to fetch an access token");c.current=w;let b=Ps(w),{data:h}=await l.query(zm,{},{fetchOptions:b});if(!h?.viewer)throw new Error("Failed to fetch initial project list");if(h.viewer.projectCount>0||t)n(c.current),m.current?.();else{if(!h.viewer.accounts[0])throw new Error("User has no accounts!");if(!h.viewer.accounts[0].newProjectUrl)throw new Error("Unexpected missing project URL");u.current?.(h.viewer.accounts[0].newProjectUrl)}}catch(w){o("Login Error",w)}y.message==="createdProject"&&(c.current?(n(c.current),r(`Project:${y.projectId}`),m.current?.()):o("Unexpected missing access token",new Error))},[d,i,l,t,n,o,r]),[v,g]=Gs(p);return u.current=v,m.current=g,a.createElement(pe,{footer:null,ignoreConfig:!0},a.createElement(nl,{onBack:e}),a.createElement(de,null,a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Verify your account"),a.createElement("div",null,a.createElement(j,{center:!0,muted:!0},"Check this verification code on Chromatic to grant access to your published Storybooks.")),a.createElement(Dm,null,s?.split("").map((y,w)=>a.createElement("li",{key:`${w}-${y}`},y.replace(/[^A-Z0-9]/,""))))),a.createElement(re,{variant:"solid",size:"medium",onClick:()=>v(d)},"Go to Chromatic"))))},Ys=e=>a.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z",fill:"#DB4437"}),a.createElement("path",{d:"M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z",fill:"#0F9D58"}),a.createElement("path",{d:"M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z",fill:"#FFCD40"}),a.createElement("path",{d:"M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z",fill:"url(#paint0_radial_466_21161)"}),a.createElement("path",{d:"M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z",fill:"url(#paint1_radial_466_21161)"}),a.createElement("path",{d:"M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z",fill:"url(#paint2_radial_466_21161)"}),a.createElement("ellipse",{cx:"8.01347",cy:"8.00358",rx:"3.36699",ry:"3.36699",fill:"#F1F1F1"}),a.createElement("ellipse",{cx:"8.01367",cy:"8.00354",rx:"2.69361",ry:"2.6936",fill:"#4285F4"}),a.createElement("defs",null,a.createElement("radialGradient",{id:"paint0_radial_466_21161",cx:"0",cy:"0",r:"1",gradientUnits:"userSpaceOnUse",gradientTransform:"translate(7.69229 4.63226) scale(7.07721 1.89116)"},a.createElement("stop",{stopColor:"#3E2723",stopOpacity:"0.2"}),a.createElement("stop",{offset:"1",stopColor:"#3E2723",stopOpacity:"0.01"})),a.createElement("radialGradient",{id:"paint1_radial_466_21161",cx:"0",cy:"0",r:"1",gradientUnits:"userSpaceOnUse",gradientTransform:"translate(1.77445 4.00677) scale(6.56938 7.75127)"},a.createElement("stop",{stopColor:"#3E2723",stopOpacity:"0.2"}),a.createElement("stop",{offset:"1",stopColor:"#3E2723",stopOpacity:"0.01"})),a.createElement("radialGradient",{id:"paint2_radial_466_21161",cx:"0",cy:"0",r:"1",gradientUnits:"userSpaceOnUse",gradientTransform:"translate(8.00025 8.01489) scale(7.39644 14.8995)"},a.createElement("stop",{stopColor:"#263238",stopOpacity:"0.2"}),a.createElement("stop",{offset:"1",stopColor:"#263238",stopOpacity:"0.01"})))),Ks=e=>a.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},a.createElement("path",{d:"M14.9596 5.19849C14.6332 4.41337 13.9721 3.56574 13.453 3.29783C13.8755 4.12612 14.12 4.95699 14.2134 5.57708C14.2134 5.5783 14.2139 5.58133 14.2149 5.58958C13.3657 3.47293 11.9257 2.61943 10.7499 0.761053C10.6905 0.667084 10.631 0.572865 10.573 0.473553C10.5434 0.422834 10.5159 0.371004 10.4903 0.318178C10.4414 0.223861 10.4038 0.124166 10.378 0.0211155C10.3782 0.0162369 10.3765 0.0114673 10.3734 0.00774353C10.3702 0.0040198 10.3658 0.00161108 10.3609 0.000990505C10.3563 -0.000330168 10.3515 -0.000330168 10.3468 0.000990505C10.3458 0.0013655 10.3442 0.00258425 10.3431 0.00302175C10.3414 0.003678 10.3393 0.005178 10.3376 0.00614675C10.3384 0.00502175 10.3402 0.0024905 10.3407 0.00189675C8.45416 1.10677 7.81416 3.15068 7.75535 4.17327C7.00199 4.22506 6.28171 4.50262 5.68841 4.96977C5.62629 4.9173 5.56135 4.86827 5.49388 4.8229C5.3227 4.2240
Line truncated
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
4.41177% {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
8.82353% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
13.23529% {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
17.64706% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
22.05882% {
|
||||
transform: translate(3px, 0);
|
||||
}
|
||||
26.47059% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
`,Yr=k(e4)(({theme:e})=>({background:e.base==="dark"?`color-mix(in srgb, ${e.color.positive}, transparent 50%)`:e.color.positive,color:"white",width:20,height:20,padding:4,borderRadius:"50%"})),Kr=k(t4)(({theme:e})=>({background:e.background.hoverable,color:e.color.secondary,width:20,height:20,padding:4,borderRadius:"50%",animation:`${n4} 3.72s ease infinite`,transformOrigin:"50% 50%"})),a4=k.ul({textAlign:"left",listStyleType:"none",margin:0,padding:0,li:{display:"flex",gap:10,padding:10,lineHeight:"20px"}}),Jr=k.div({width:"100%",display:"flex",flexDirection:"column",gap:8}),Na=k.pre(({theme:e})=>({margin:0,padding:"10px 12px",fontSize:"12px",background:e.background.content,border:`1px solid ${e.appBorderColor}`,borderRadius:4})),r4=({gitInfoError:e})=>{let t=e?.message.includes("git init"),n=t||e?.message.includes("one commit"),r=e?.message.includes("user.email");return Ve("Errors",t?"GitNotFound":"GitError"),a.createElement(pe,{footer:null},a.createElement(de,null,r?a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Configure your Git email"),a.createElement(j,{center:!0,muted:!0},"Chromatic requires Git to be configured with an email address to connect local builds to CI builds and link builds to user accounts.")),a.createElement(j,{center:!0,muted:!0},"Run this command to set an email address:"),a.createElement(Na,null,'git config user.email "you@example.com"'),a.createElement(j,{muted:!0,small:!0},a.createElement(Ne,{target:"_blank",href:"https://www.chromatic.com/docs/privacy-policy/",withArrow:!0,secondary:!0},"Privacy policy"))):a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Set up a Git repository"),a.createElement(j,{center:!0,muted:!0},"Chromatic requires Git to associate test results with commits and branches. Run these steps to get started:")),a.createElement(a4,null,a.createElement("li",null,t?a.createElement(Kr,null):a.createElement(Yr,null),a.createElement(Jr,null,a.createElement("span",null,"Initialize a Git repository"),t&&a.createElement(Na,null,"git init"))),a.createElement("li",null,n?a.createElement(Kr,null):a.createElement(Yr,null),a.createElement(Jr,null,a.createElement("span",null,"Stage all files"),n&&a.createElement(Na,null,"git add ."))),a.createElement("li",null,n?a.createElement(Kr,null):a.createElement(Yr,null),a.createElement(Jr,null,a.createElement("span",null,"Commit the changes"),n&&a.createElement(Na,null,'git commit -m "Initial commit"')))),a.createElement(Ne,{target:"_blank",href:"https://www.chromatic.com/docs/visual-tests-addon#git-addon",withArrow:!0,secondary:!0},"Visual tests requirements"))))},i4=k(Ji)(({theme:e})=>({width:40,height:40,padding:10,background:e.color.positive,borderRadius:"100%",color:"white"})),l4=k(Ne)(()=>({marginTop:5})),o4=Qe(`
|
||||
query ProjectQuery($projectId: ID!) {
|
||||
project(id: $projectId) {
|
||||
id
|
||||
name
|
||||
webUrl
|
||||
lastBuild {
|
||||
branch
|
||||
number
|
||||
}
|
||||
}
|
||||
}
|
||||
`),s4=({projectId:e,configFile:t,goToNext:n})=>{Ve("LinkProject","LinkedProject");let[{data:r,fetching:i,error:l}]=dl({query:o4,variables:{projectId:e}});return a.createElement(pe,{footer:a.createElement(br,null,a.createElement(Ue,null,r?.project?.lastBuild&&a.createElement(j,{style:{marginLeft:5}},"Last build: ",r.project.lastBuild.number," on branch"," ",r.project.lastBuild.branch)),a.createElement(Ue,{push:!0},a.createElement(yr,null)))},a.createElement(de,null,a.createElement(ne,null,i&&a.createElement("p",null,"Loading..."),l&&a.createElement("p",null,l.message),r?.project&&a.createElement(a.Fragment,null,a.createElement(i4,null),a.createElement("div",null,a.createElement(le,null,"Project linked!"),a.createElement(j,{center:!0,muted:!0,style:{maxWidth:500}},"The ",a.createElement(Te,null,"projectId")," for ",a.createElement("strong",null,r.project.name)," was added in"," ",a.createElement(Te,null,t)," to sync tests with Chromatic. Please commit this change to continue using this addon.")),a.createElement(bt,null,a.createElement(re,{variant:"solid",size:"medium",onClick:()=>n()},"Catch a UI change"),a.createElement(l4,{href:"https://www.chromatic.com/docs/cli",target:"_blank",withArrow:!0,secondary:!0},"What's a project ID?"))))))};function d4(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];var r=Array.from(typeof e=="string"?[e]:e);r[r.length-1]=r[r.length-1].replace(/\r?\n([\t ]*)$/,"");var i=r.reduce(function(s,d){var c=d.match(/\n([\t ]+|(?!\s).)/g);return c?s.concat(c.map(function(u){var m,p;return(p=(m=u.match(/[\t ]/g))===null||m===void 0?void 0:m.length)!==null&&p!==void 0?p:0})):s},[]);if(i.length){var l=new RegExp(`
|
||||
[ ]{`+Math.min.apply(Math,i)+"}","g");r=r.map(function(s){return s.replace(l,`
|
||||
`)})}r[0]=r[0].replace(/^\r?\n/,"");var o=r[0];return t.forEach(function(s,d){var c=o.match(/(?:^|\n)( *)$/),u=c?c[1]:"",m=s;typeof s=="string"&&s.includes(`
|
||||
`)&&(m=String(s).split(`
|
||||
`).map(function(p,v){return v===0?p:""+u+p}).join(`
|
||||
`)),o+=m+r[d+1]}),o}var c4=k.div(({theme:e})=>({"&& > *":{margin:0},"&& pre":{color:e.base==="light"?e.color.darker:e.color.lighter,background:e.base==="light"?e.color.lightest:e.color.darkest,fontSize:"12px",lineHeight:"16px",textAlign:"left",padding:"15px !important"}})),u4="https://www.chromatic.com/docs/visual-tests-addon/#configure";function m4({projectId:e,configFile:t}){return Ve("LinkProject","LinkingProjectFailed"),a.createElement(pe,null,a.createElement(de,null,a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Add the project ID to your Chromatic config"),a.createElement(j,{center:!0,muted:!0},"The ",a.createElement(Te,null,"projectId")," will be used to sync tests with Chromatic. Please commit this change to continue using the addon. The file should be saved at"," ",a.createElement(Te,null,t),".")),a.createElement(c4,null,a.createElement(Te,null,d4`
|
||||
{
|
||||
"projectId": "${e}",
|
||||
}
|
||||
`)),a.createElement(Ne,{secondary:!0,withArrow:!0,target:"_blank",href:u4},"What's this for?"))))}var p4=Qe(`
|
||||
query SelectProjectsQuery {
|
||||
viewer {
|
||||
accounts {
|
||||
id
|
||||
name
|
||||
avatarUrl
|
||||
newProjectUrl
|
||||
projects {
|
||||
id
|
||||
name
|
||||
webUrl
|
||||
lastBuild {
|
||||
branch
|
||||
number
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`),h4=({createdProjectId:e,setCreatedProjectId:t,onUpdateProject:n})=>{let r=a.useCallback(async i=>{await n(i)},[n]);return a.createElement(v4,{createdProjectId:e,setCreatedProjectId:t,onSelectProjectId:r})},Ma=k.div(({theme:e})=>({fontSize:`${e.typography.size.s1-1}px`,fontWeight:e.typography.weight.bold,color:e.base==="light"?e.color.dark:e.color.light,backgroundColor:"inherit",padding:"7px 15px",borderBottom:`1px solid ${e.appBorderColor}`,lineHeight:"18px",letterSpacing:"0.38em",textTransform:"uppercase"})),Ho=k.div({}),jo=k.div(({theme:e})=>({background:e.base==="light"?e.color.lighter:e.color.darker})),Do=k.div(({theme:e})=>({background:e.base==="light"?e.color.lightest:e.color.darkest,borderRadius:5,border:`1px solid ${e.appBorderColor}`,height:260,maxWidth:420,minWidth:260,width:"100%",overflow:"hidden",textAlign:"left",position:"relative",display:"flex","> *":{flex:1,display:"flex",flexDirection:"column",width:"50%"}})),Fa=k.div({height:"100%",overflowY:"auto"}),f4=k(ne)({width:"100%"}),g4=k(O5)({marginRight:10});function v4({createdProjectId:e,setCreatedProjectId:t,onSelectProjectId:n}){let[{data:r,fetching:i,error:l},o]=dl({query:p4});te(()=>{let h=setInterval(o,5e3);return()=>clearInterval(h)},[o]);let[s,d]=Be("selectedAccountId"),c=r?.viewer?.accounts.find(h=>h.id===s),u=K(h=>d(h.id),[d]);te(()=>{!s&&r?.viewer?.accounts&&u(r.viewer.accounts[0])},[r,s,u]);let[m,p]=Be("isSelectingProject",!1),v=K(h=>{p(!0),n(h.id);let f=setTimeout(()=>{p(!1)},1e3);return()=>clearTimeout(f)},[n,p]),g=K(async h=>{h.message==="createdProject"&&(o(),t(h.projectId))},[o,t]),[y,w]=Gs(g),b=e&&c?.projects?.find(h=>h?.id.endsWith(e));return te(()=>{b&&(w(),v(b))},[b,v,w]),Ve("LinkProject","LinkProject"),a.createElement(pe,null,a.createElement(de,null,a.createElement(f4,null,a.createElement("div",null,a.createElement(le,null,"Select a project"),a.createElement(j,{muted:!0},"Your tests will sync with this project.")),l&&a.createElement("p",null,l.message),!r&&i&&a.createElement(Do,null,a.createElement(Ho,null,a.createElement(Ma,null,"Accounts"),a.createElement(Fa,null,a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0}))),a.createElement(jo,null,a.createElement(Ma,null,"Projects"),a.createElement(Fa,{"data-testid":"right-list"},a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0}),a.createElement(qe,{appearance:"secondary",isLoading:!0})))),r?.viewer?.accounts&&a.createElement(Do,null,a.createElement(Ho,null,a.createElement(Ma,null,"Accounts"),a.createElement(Fa,{"data-testid":"left-list"},r.viewer.accounts?.map(h=>a.createElement(qe,{key:h.id,title:h.name,appearance:"secondary",left:a.createElement(g4,{src:h.avatarUrl??void 0,size:"tiny"}),onClick:()=>u(h),active:s===h.id})))),a.createElement(jo,null,a.createElement(Ma,null,"Projects"),a.createElement(Fa,{"data-testid":"right-list"},c&&a.createElement(qe,{isLink:!1,onClick:()=>{if(!c?.newProjectUrl)throw new Error("Unexpected missing `newProjectUrl` on account");y(c.newProjectUrl)},title:a.createElement(Ne,{isButton:!0,withArrow:!0},"Create new project")}),c?.projects?.map(h=>h&&a.createElement(qe,{appearance:"secondary",key:h.id,title:h.name,right:a.createElement(Ec,{"aria-label":h.name}),onClick:()=>v(h),disabled:m}))))))))}var y4=()=>a.createElement(pe,{footer:null},a.createElement(de,null,a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Visual tests"),a.createElement(j,{center:!0,muted:!0},"Visual tests only runs locally. To test this Storybook, clone it to your machine and run ",a.createElement(Te,null,"npx storybook dev"),"."))))),b4=({offline:e=!1})=>a.createElement(pe,{footer:null},a.createElement(de,null,a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Can't connect to Chromatic"),a.createElement(j,{center:!0,muted:!0},e?"You're offline. Double check your internet connection.":"We're having trouble connecting to the Chromatic API.")),!e&&a.createElement(Ne,{href:"https://status.chromatic.com",target:"_blank",rel:"noreferrer",withArrow:!0},"Chromatic API status")))),E4=()=>(Ve("Uninstalled","uninstalled"),a.createElement(pe,{footer:!1},a.createElement(de,null,a.createElement(ne,null,a.createElement("div",null,a.createElement(le,null,"Uninstall complete"),a.createElement(j,{center:!0,muted:!0},"Visual tests will vanish the next time you restart your Storybook.")))))),Qs={isRunning:!1,startBuild:()=>{},stopBuild:()=>{}},Xs=He(Qs),sa=()=>ht(Xs,"RunBuild"),k4=({children:e,watchState:t=Qs})=>a.createElement(Xs.Provider,{value:t},e),_i={PENDING:"status-value:warning",FAILED:"status-value:error",DENIED:"status-value:error",BROKEN:"status-value:error",IN_PROGRESS:"status-value:pending",ACCEPTED:"status-value:success",PASSED:
Line truncated
|
||||
@keyframes joyride-beacon-inner {
|
||||
20% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
90% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes joyride-beacon-outer {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
45% {
|
||||
opacity: 0.7;
|
||||
transform: scale(0.75);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.9;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
`)),t.appendChild(n)}componentDidMount(){let{shouldFocus:e}=this.props;setTimeout(()=>{O.domElement(this.beacon)&&e&&this.beacon.focus()},0)}componentWillUnmount(){let e=document.getElementById("joyride-beacon-animation");e?.parentNode&&e.parentNode.removeChild(e)}render(){let{beaconComponent:e,continuous:t,index:n,isLastStep:r,locale:i,onClickOrHover:l,size:o,step:s,styles:d}=this.props,c=O.string(i.open)?i.open:(0,s3.default)(i.open),u={"aria-label":c,onClick:l,onMouseEnter:l,ref:this.setBeaconRef,title:c},m;return e?m=S(e,{continuous:t,index:n,isLastStep:r,size:o,step:s,...u}):m=S("button",{key:"JoyrideBeacon",className:"react-joyride__beacon","data-test-id":"button-beacon",style:d.beacon,type:"button",...u},S("span",{style:d.beaconInner}),S("span",{style:d.beaconOuter})),m}};function Z3({styles:e}){return S("div",{key:"JoyrideSpotlight",className:"react-joyride__spotlight","data-test-id":"spotlight",style:e})}var O3=Z3,_3=class extends Tt{constructor(){super(...arguments),_(this,"isActive",!1),_(this,"resizeTimeout"),_(this,"scrollTimeout"),_(this,"scrollParent"),_(this,"state",{isScrolling:!1,mouseOverSpotlight:!1,showSpotlight:!0}),_(this,"handleMouseMove",e=>{let{mouseOverSpotlight:t}=this.state,{height:n,left:r,position:i,top:l,width:o}=this.spotlightStyles,s=i==="fixed"?e.clientY:e.pageY,d=i==="fixed"?e.clientX:e.pageX,c=s>=l&&s<=l+n,u=d>=r&&d<=r+o&&c;u!==t&&this.updateState({mouseOverSpotlight:u})}),_(this,"handleScroll",()=>{let{target:e}=this.props,t=Mt(e);if(this.scrollParent!==document){let{isScrolling:n}=this.state;n||this.updateState({isScrolling:!0,showSpotlight:!1}),clearTimeout(this.scrollTimeout),this.scrollTimeout=window.setTimeout(()=>{this.updateState({isScrolling:!1,showSpotlight:!0})},50)}else la(t,"sticky")&&this.updateState({})}),_(this,"handleResize",()=>{clearTimeout(this.resizeTimeout),this.resizeTimeout=window.setTimeout(()=>{this.isActive&&this.forceUpdate()},100)})}componentDidMount(){let{debug:e,disableScrolling:t,disableScrollParentFix:n=!1,target:r}=this.props,i=Mt(r);this.scrollParent=Mr(i??document.body,n,!0),this.isActive=!0,window.addEventListener("resize",this.handleResize)}componentDidUpdate(e){var t;let{lifecycle:n,spotlightClicks:r}=this.props,{changed:i}=lr(e,this.props);i("lifecycle",q.TOOLTIP)&&((t=this.scrollParent)==null||t.addEventListener("scroll",this.handleScroll,{passive:!0}),setTimeout(()=>{let{isScrolling:l}=this.state;l||this.updateState({showSpotlight:!0})},100)),(i("spotlightClicks")||i("disableOverlay")||i("lifecycle"))&&(r&&n===q.TOOLTIP?window.addEventListener("mousemove",this.handleMouseMove,!1):n!==q.TOOLTIP&&window.removeEventListener("mousemove",this.handleMouseMove))}componentWillUnmount(){var e;this.isActive=!1,window.removeEventListener("mousemove",this.handleMouseMove),window.removeEventListener("resize",this.handleResize),clearTimeout(this.resizeTimeout),clearTimeout(this.scrollTimeout),(e=this.scrollParent)==null||e.removeEventListener("scroll",this.handleScroll)}get spotlightStyles(){var e,t,n;let{showSpotlight:r}=this.state,{disableScrollParentFix:i=!1,spotlightClicks:l,spotlightPadding:o=0,styles:s,target:d}=this.props,c=Mt(d),u=A0(c),m=la(c),p=f3(c,o,i);return{...f1()?s.spotlightLegacy:s.spotlight,height:Math.round(((e=u?.height)!=null?e:0)+o*2),left:Math.round(((t=u?.left)!=null?t:0)-o),opacity:r?1:0,pointerEvents:l?"none":"auto",position:m?"fixed":"absolute",top:p,transition:"opacity 0.2s",width:Math.round(((n=u?.width)!=null?n:0)+o*2)}}updateState(e){this.isActive&&this.setState(t=>({...t,...e}))}render(){let{mouseOverSpotlight:e,showSpotlight:t}=this.state,{disableOverlay:n,disableOverlayClose:r,lifecycle:i,onClickOverlay:l,placement:o,styles:s}=this.props;if(n||i!==q.TOOLTIP)return null;let d=s.overlay;f1()&&(d=o==="center"?s.overlayLegacyCenter:s.overlayLegacy);let c={cursor:r?"default":"pointer",height:u3(),pointerEvents:e?"none":"auto",...d},u=o!=="center"&&t&&S(O3,{styles:this.spotlightStyles});if(L0()==="safari"){let{mixBlendMode:m,zIndex:p,...v}=c;u=S("div",{style:{...v}},u),delete c.backgroundColor}return S("div",{className:"react-joyride__overlay","data-test-id":"overlay",onClick:l,role:"presentation",style:c},u)}},I3=class extends Tt{constructor(){super(...arguments),_(this,"node",null)}componentDidMount(){let{id:e}=this.props;xt()&&(this.node=document.createElement("div"),this.node.id=e,document.body.appendChild(this.node),Zn||this.renderReact15())}componentDidUpdate(){xt()&&(Zn||this.renderReact15())}componentWillUnmount(){!xt()||!this.node||(Zn||Bl(this.node),this.node.parentNode===document.body&&(document.body.removeChild(this.node),this.node=null))}renderReact15(){if(!xt())return;let{children:e}=this.props;this.node&&Pl(this,e,this.node)}renderReact16(){if(!xt()||!Zn)return null;let{children:e}=this.props;return this.node?Ea(e,this.node):null}render(){return Zn?this.renderReact16():null}};function R3({styles:e,...t}){let{color:n,height:r,width:i,...l}=e;return a.createElement("button",{style:l,type:"button"
Line truncated
|
||||
query AddonVisualTestsBuild(
|
||||
$projectId: ID!
|
||||
$branch: String!
|
||||
$gitUserEmailHash: String!
|
||||
$repositoryOwnerName: String
|
||||
$storyId: String!
|
||||
$testStatuses: [TestStatus!]!
|
||||
$selectedBuildId: ID!
|
||||
$hasSelectedBuildId: Boolean!
|
||||
) {
|
||||
project(id: $projectId) {
|
||||
name
|
||||
manageUrl
|
||||
account {
|
||||
billingUrl
|
||||
suspensionReason
|
||||
}
|
||||
features {
|
||||
uiTests
|
||||
}
|
||||
lastBuildOnBranch: lastBuild(
|
||||
branches: [$branch]
|
||||
repositoryOwnerName: $repositoryOwnerName
|
||||
localBuilds: { localBuildEmailHash: $gitUserEmailHash }
|
||||
) {
|
||||
...LastBuildOnBranchBuildFields
|
||||
...SelectedBuildFields @skip(if: $hasSelectedBuildId)
|
||||
}
|
||||
lastBuild {
|
||||
id
|
||||
slug
|
||||
branch
|
||||
}
|
||||
}
|
||||
selectedBuild: build(id: $selectedBuildId) @include(if: $hasSelectedBuildId) {
|
||||
...SelectedBuildFields
|
||||
}
|
||||
viewer {
|
||||
preferences {
|
||||
vtaOnboarding
|
||||
}
|
||||
projectMembership(projectId: $projectId) {
|
||||
userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)
|
||||
}
|
||||
}
|
||||
}
|
||||
`),Y3=Qe(`
|
||||
fragment LastBuildOnBranchBuildFields on Build {
|
||||
__typename
|
||||
id
|
||||
status
|
||||
committedAt
|
||||
... on StartedBuild {
|
||||
testsForStatus: tests(first: 1000, statuses: $testStatuses) {
|
||||
nodes {
|
||||
...StatusTestFields
|
||||
}
|
||||
}
|
||||
testsForStory: tests(storyId: $storyId) {
|
||||
nodes {
|
||||
...LastBuildOnBranchTestFields
|
||||
}
|
||||
}
|
||||
}
|
||||
... on CompletedBuild {
|
||||
result
|
||||
testsForStatus: tests(first: 1000, statuses: $testStatuses) {
|
||||
nodes {
|
||||
...StatusTestFields
|
||||
}
|
||||
}
|
||||
testsForStory: tests(storyId: $storyId) {
|
||||
nodes {
|
||||
...LastBuildOnBranchTestFields
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`),K3=Qe(`
|
||||
fragment SelectedBuildFields on Build {
|
||||
__typename
|
||||
id
|
||||
number
|
||||
branch
|
||||
commit
|
||||
committedAt
|
||||
uncommittedHash
|
||||
status
|
||||
... on StartedBuild {
|
||||
startedAt
|
||||
testsForStory: tests(storyId: $storyId) {
|
||||
nodes {
|
||||
...StoryTestFields
|
||||
}
|
||||
}
|
||||
}
|
||||
... on CompletedBuild {
|
||||
startedAt
|
||||
testsForStory: tests(storyId: $storyId) {
|
||||
nodes {
|
||||
...StoryTestFields
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`),I0=Qe(`
|
||||
fragment StatusTestFields on Test {
|
||||
id
|
||||
status
|
||||
result
|
||||
story {
|
||||
storyId
|
||||
}
|
||||
}
|
||||
`),J3=Qe(`
|
||||
fragment LastBuildOnBranchTestFields on Test {
|
||||
status
|
||||
result
|
||||
}
|
||||
`),Q3=Qe(`
|
||||
fragment StoryTestFields on Test {
|
||||
id
|
||||
status
|
||||
result
|
||||
webUrl
|
||||
comparisons {
|
||||
id
|
||||
result
|
||||
browser {
|
||||
id
|
||||
key
|
||||
name
|
||||
version
|
||||
}
|
||||
captureDiff {
|
||||
diffImage(signed: true) {
|
||||
imageUrl
|
||||
imageWidth
|
||||
}
|
||||
focusImage(signed: true) {
|
||||
imageUrl
|
||||
imageWidth
|
||||
}
|
||||
}
|
||||
headCapture {
|
||||
captureImage(signed: true) {
|
||||
backgroundColor
|
||||
imageUrl
|
||||
imageWidth
|
||||
imageHeight
|
||||
thumbnailUrl
|
||||
}
|
||||
captureError {
|
||||
kind
|
||||
... on CaptureErrorInteractionFailure {
|
||||
error
|
||||
}
|
||||
... on CaptureErrorJSError {
|
||||
error
|
||||
}
|
||||
... on CaptureErrorFailedJS {
|
||||
error
|
||||
}
|
||||
}
|
||||
}
|
||||
baseCapture {
|
||||
captureImage(signed: true) {
|
||||
imageUrl
|
||||
imageWidth
|
||||
imageHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
mode {
|
||||
name
|
||||
globals
|
||||
}
|
||||
story {
|
||||
storyId
|
||||
name
|
||||
component {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
`),X3=Qe(`
|
||||
mutation ReviewTest($input: ReviewTestInput!) {
|
||||
reviewTest(input: $input) {
|
||||
updatedTests {
|
||||
id
|
||||
status
|
||||
}
|
||||
userErrors {
|
||||
... on UserError {
|
||||
__typename
|
||||
message
|
||||
}
|
||||
... on BuildSupersededError {
|
||||
build {
|
||||
id
|
||||
}
|
||||
}
|
||||
... on TestUnreviewableError {
|
||||
test {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`),e7=({projectId:e,storyId:t,gitInfo:n,selectedBuildInfo:r})=>{let[{data:i,error:l,operation:o},s]=dl({query:G3,variables:{projectId:e,storyId:t,testStatuses:Object.keys(_i),branch:n.branch||"",...n.slug?{repositoryOwnerName:n.slug.split("/",1)[0]}:{},gitUserEmailHash:n.userEmailHash,selectedBuildId:r?.buildId||"",hasSelectedBuildId:!!r}});te(()=>{let y=setInterval(s,5e3);return()=>clearInterval(y)},[s]);let d=o&&t&&o.variables.storyId!==t,c=an(Y3,i?.project?.lastBuildOnBranch),u=[...an(J3,c&&"testsForStory"in c&&c.testsForStory?c.testsForStory.nodes:[])],m=c?.committedAt>n.committedAt,p=!!c&&!m,v=!!c&&u.every(y=>y.status!=="IN_PROGRESS"),g=an(K3,i?.selectedBuild??(v?i?.project?.lastBuildOnBranch:void 0));return{account:i?.project?.account,features:i?.project?.features,manageUrl:i?.project?.manageUrl,hasData:!!i&&!d,hasProject:!!i?.project,hasSelectedBuild:g?.branch.split(":").at(-1)===n.branch,lastBuildOnBranch:c,lastBuildOnBranchIsNewer:m,lastBuildOnBranchIsReady:v,lastBuildOnBranchIsSelectable:p,selectedBuild:g,selectedBuildMatchesGit:g?.branch.split(":").at(-1)===n.branch&&g?.commit===n.commit&&g?.uncommittedHash===n.uncommittedHash,rerunQuery:s,queryError:l,userCanReview:!!i?.viewer?.projectMembership?.userCanReview,vtaOnboarding:i?.viewer?.preferences?.vtaOnboarding}},El=He(null),R0=He(null),t7=()=>ht(El,"Build"),B0=()=>{let{selectedBuild:e}=ht(El,"Build");if(!e)throw new Error("No selectedBuild on Build context");return e},Wt=()=>ht(R0,"Story"),ai=({children:e,watchState:t})=>{let n=!!t?.selectedBuild&&"testsForStory"in t.selectedBuild,r=t?.selectedBuild&&"testsForStory"in t.selectedBuild&&t.selectedBuild.testsForStory?.nodes,i=[...an(Q3,r||[])],l=bl(i),{toggleDiff:o}=vn();return te(()=>o(l.changeCount>0),[o,l.changeCount]),a.createElement(El.Provider,{value:ft(()=>t,[JSON.stringify(t?.selectedBuild)])},a.createElement(R0.Provider,{value:{hasTests:n,tests:i,summary:l,...q3(i)}},e))},n7=k.div({zIndex:9999,position:"fixed",top:0,left:"50%",width:"50%",height:"100%"}),a7=a.memo(function({timeToFade:e=5e3,colors:t=["#CA90FF","#FC521F","#66BF3C","#FF4785","#FFAE00","#1EA7FD"],...n}){return a.createElement(n7,null,a.createElement(no,{colors:t,particleCount:200,duration:e,stageHeight:window.innerHeight,stageWidth:window.innerWidth,destroyAfterDone:!0,...n}))}),r7=k.div(({theme:e})=>({background:e.base==="light"?e.color.lightest:"#292A2C",width:260,padding:15,borderRadius:5,boxShadow:"0px 0px 32px 0px #00000029"})),i7=k.div({display:"flex",flexDirection:"column",alignItems:"flex-start"}),l7=k.div(({theme:e})=>({fontSize:13,lineHeight:"18px",fontWeight:700,color:e.color.defaultText})),o7=k.div(({theme:e})=>({fontSize:13,lineHeight:"18px",textAlign:"start",color:e.color.defaultText,margin:0,marginTop:5})),s7=k.div({display:"flex",justifyContent:"flex-end",marginTop:15}),d7=({isLastStep:e,step:t,primaryProps:n,tooltipProps:r})=>a.createElement(r7,{...r},a.createElement(i7,null,t.title&&a.createElement(l7,null,t.title),a.createElement(o7,null,t.content)),(t.hideNextButton||t.hideBackButton)&&a.createElement(s7,{id:"buttonSkip"},!t.hideSkipButton&&!e&&a.createElement(re,{size:"medium",onClick:t.onSkipWalkthroughButtonClick,link:!0,style:{paddingRight:12,paddingLeft:12,marginRight:8}},"Skip"),!t.hideNextButton&&a.createElement(re,{...n,onClick:n.onClick,variant:"solid",...t.onNextButtonClick?{onClick:t.onNextButtonClick}:{}},t.nextButtonText||"Next"))),E1="setFilter",c7=({managerApi:e,skipWalkthrough:t,startWalkthrough:n,completeWalkthrough:r})=>{let i=Sn(),l=Wt(),o=l?.selectedTest?.result==="CHANGED",s=l?.selectedTest?.status!=="ACCEPTED",d=JSON.stringify(wn().layout),c=Ee(d);c.current!==d&&(window.dispatchEvent(new Event("resize")),c.current=d),te(()=>{n()}),te(()=>{e.getCurrentStoryData()?.type!=="story"&&e.jumpToStory(1),e.togglePanel(!0),e.togglePanelPosition("right"),e.setSelectedPanel(rn)},[e]);let[u,m]=Be("showConfetti",!1),[p,v]=Be("stepIndex",0),g=()=>v((y=0)=>y+1);return te(()=>{let y=document.getElementById("storybook-explorer-tree"),w=Array.from(y instanceof HTMLElement?y.children:[]).filter(b=>b instanceof HTMLElement).slice(1);return w.forEach(b=>b.style.display="none"),()=>w.forEach(b=>b.style.display="")},[]),te(()=>{let y=()=>{v(1),setTimeout(()=>{window.dispatchEvent(new Event("resize"))},100)};return e.on(lo,y),e.on(E1,y),()=>{e.off(lo,y),e.off(E1,y)}},[e,v]),te(()=>{l?.selectedTest?.status==="ACCEPTED"&&p===5&&(m(!0),v(6))},[l?.selectedTest?.status,u,m,p,v]),a.createElement(a.Fragment,null,u&&a.createElement(a7,null),a.createElement(D3,{steps:[{target:"#sidebar-bottom-wrapper",title:"Changes found",content:a.createElement(a.Fragment,null,"The visual tests addon will detect changes in all of your stories and allow you to review them before opening a pull request.",a.createElement("br",null),a.createElement("br",null),"Click the number at the bottom-right to only show stories with visual changes."),floaterProps:{target:"#warnings-found-filter",options:{preventOverflow:{boundariesElement:"windo
Line truncated
|
||||
"info info"
|
||||
"actions actions"
|
||||
"label controls"
|
||||
`,gridTemplateColumns:"1fr fit-content(50%)",gridTemplateRows:"auto auto auto",borderBottom:`1px solid ${e.appBorderColor}`,"@container (min-width: 300px)":{gridTemplateAreas:`
|
||||
"info actions"
|
||||
"label controls"
|
||||
`,gridTemplateColumns:"1fr auto",gridTemplateRows:"auto auto"},"@container (min-width: 800px)":{gridTemplateAreas:'"info label controls actions"',gridTemplateColumns:"auto 1fr auto auto",gridTemplateRows:"39px"}})),P1=k.div({display:"grid",gridTemplateAreas:`
|
||||
"header"
|
||||
"main"
|
||||
"footer"
|
||||
`,gridTemplateColumns:"1fr",gridTemplateRows:"auto 1fr auto",height:"100%","&[hidden]":{display:"none"}}),V1=k.div(({theme:e})=>({gridArea:"header",position:"sticky",zIndex:1,top:0,background:e.background.content,"@container (min-width: 800px)":{background:e.background.app}})),i6=k.div(({theme:e})=>({gridArea:"main",overflowY:"auto",maxHeight:"100%",background:e.background.content})),H1=k.div({gridArea:"footer",position:"sticky",zIndex:1,bottom:0}),l6=k.div(({children:e,theme:t})=>({display:"flex",alignItems:"center",border:`0px solid ${t.appBorderColor}`,borderTopWidth:1,borderBottomWidth:e?1:0,height:e?40:0,padding:e?"0 15px":0})),o6=k.div(({theme:e})=>({fontFamily:e.typography.fonts.mono,fontSize:e.typography.size.s1,color:e.color.defaultText,lineHeight:"18px",padding:15,whiteSpace:"pre-wrap",wordBreak:"break-word"})),oi=k.div(({theme:e})=>({background:e.background.hoverable,padding:"10px 15px",lineHeight:"18px",position:"relative",borderBottom:`1px solid ${e.appBorderColor}`})),s6=({isOutdated:e,isStarting:t,isBuildFailed:n,shouldSwitchToLastBuildOnBranch:r,switchToLastBuildOnBranch:i,hidden:l,storyId:o})=>{let{baselineImageVisible:s,diffVisible:d,focusVisible:c}=vr(),{toggleBaselineImage:u,toggleSettings:m,toggleWarnings:p}=vn(),v=B0(),g="startedAt"in v&&v.startedAt,y=Wt(),{tests:w}=y,b=a.useRef(o),h=a.useRef(y.selectedComparison?.id),f=a.useRef(v.id),{selectedTest:E,selectedComparison:C}=y,Z=w.every(({result:fe,status:ce})=>fe==="ADDED"&&ce!=="ACCEPTED"),M=!Z&&E?.result==="ADDED"&&E?.status!=="ACCEPTED",V=!Z&&C?.result==="ADDED"&&E?.result!=="ADDED"&&E?.status!=="ACCEPTED";te(()=>{(b.current!==o||h.current!==y.selectedComparison?.id||f.current!==v.id||Z||M||V)&&(u(!1),m(!1),p(!1)),h.current=y.selectedComparison?.id,b.current=o,f.current=v.id},[v.id,o,y,u,m,p,Z,M,V]);let D=a.createElement(r6,{tests:w,startedAt:g,isStarting:t,isBuildFailed:n,isOutdated:e,shouldSwitchToLastBuildOnBranch:r,switchToLastBuildOnBranch:i});if(t||!w.length)return a.createElement(P1,{hidden:l},a.createElement(V1,null,a.createElement(B1,null,D)),a.createElement(H1,null,a.createElement(L1,null)));let X=bl(w),{isInProgress:oe}=X,ve=C?.headCapture?.captureError&&"error"in C?.headCapture?.captureError&&C?.headCapture?.captureError?.error;return a.createElement(P1,{hidden:l},a.createElement(V1,null,a.createElement(B1,null,D,a.createElement(lh,{isOutdated:e}))),a.createElement(i6,null,oe&&a.createElement(Zr,null),!oe&&Z&&a.createElement(oi,null,a.createElement(j,null,"New story found. Accept this snapshot as a test baseline."," ",a.createElement(Ne,{withArrow:!0,href:"https://www.chromatic.com/docs/branching-and-baselines",target:"_blank"},"Learn more"))),!oe&&M&&a.createElement(oi,null,a.createElement(j,null,"New mode found. Accept this snapshot as a test baseline."," ",a.createElement(Ne,{withArrow:!0,href:"https://www.chromatic.com/docs/branching-and-baselines",target:"_blank"},"Learn more"))),!oe&&V&&a.createElement(oi,null,a.createElement(j,null,"New browser found. Accept this snapshot as a test baseline."," ",a.createElement(Ne,{withArrow:!0,href:"https://www.chromatic.com/docs/branching-and-baselines",target:"_blank"},"Learn more"))),!oe&&C&&a.createElement(G7,{key:C.id,componentName:E?.story?.component?.name,storyName:E?.story?.name,testUrl:E?.webUrl,comparisonResult:C.result??void 0,latestImage:C.headCapture?.captureImage??void 0,baselineImage:C.baseCapture?.captureImage??void 0,baselineImageVisible:s,diffImage:C.captureDiff?.diffImage??void 0,focusImage:C.captureDiff?.focusImage??void 0,diffVisible:d,focusVisible:c}),!oe&&ve&&a.createElement(a.Fragment,null,a.createElement(l6,null,a.createElement("b",null,"Error stack trace")),a.createElement(o6,null,ve.stack||ve.message))),a.createElement(H1,null,a.createElement(L1,null)))},d6=k(Tl)({padding:"4px 8px",margin:"0 6px"}),c6=({onClose:e})=>a.createElement(ys,null,a.createElement(Ei,null,a.createElement(Ha,null,"Warnings",a.createElement(d6,{status:"warning"},"2"),a.createElement(tl,{onClick:e},a.createElement(el,{"aria-label":"Close"}))),a.createElement("p",null,"It's essential that your components and stories render in a consistent fashion to prevent false positives. Two issues detected in this story may cause false positives."),a.createElement("p",null,a.createElement(re,{variant:"outline"},a.createElement(cs,null),"Docs"),a.createElement(re,{variant:"outline"},a.createElement(xc,null),"Get support"))));k.div(({theme:e})=>({color:e.color.warning,background:e.background.warning,padding:10,lineHeight:"18px",position:"relative"}));var u6=({branch:e,dismissBuildError:t,isOutdated:n,localBuildProgress:r,switchToLastBuildOnBranch:i,storyId:l})=>{let{settingsVisible:o,warningsVisible:s}=vr(),{toggleSettings:d,toggleWarnings:c}=vn(),{isRunning:u,startBuild:m,stopBuild:p}=sa(),{lastBuildOnBranch:v,lastBuildOnBranchIsReady:g,lastBuildOnBranchIsSelectable:y}=t7(),w=B0(),b=Wt(),{buildIsReviewable:h,userCanReview:f}=z0(),E=!!(!h&&g&&y&&i),C=v?.status==="IN_PROGRESS",Z=u||!h&&!E,M=r&&r?
Line truncated
|
||||
mutation UpdateUserPreferences($input: UserPreferencesInput!) {
|
||||
updateUserPreferences(input: $input) {
|
||||
updatedPreferences {
|
||||
vtaOnboarding
|
||||
}
|
||||
}
|
||||
}
|
||||
`),f6=({lastBuildOnBranch:e,vtaOnboarding:t})=>{let n=Zt(),{notifications:r,storyId:i}=wn(),[l,o]=a.useState(!1),s=a.useCallback(()=>{o(!0),r.forEach(({id:h})=>n.clearNotification(h))},[n,r]),[d,c]=a.useState(!1),u=a.useCallback(()=>c(!0),[]),[m,p]=a.useState(!0);a.useEffect(()=>{if(n?.getUrlState?.().queryParams.vtaOnboarding==="true"){p(!1);return}t&&p(t==="COMPLETED"||t==="DISMISSED")},[n,t]);let[{fetching:v},g]=Rs(h6),y=a.useCallback(async h=>{await g({input:{vtaOnboarding:h?"COMPLETED":"DISMISSED"}}),p(!0),c(!1);let E=new URL(window.location.href);E.searchParams.has("vtaOnboarding")&&(E.searchParams.delete("vtaOnboarding"),window.history.replaceState({},"",E.href))},[g]),w=a.useMemo(()=>(e&&"testsForStatus"in e&&e.testsForStatus?.nodes&&an(I0,e.testsForStatus.nodes)||[]).some(h=>h?.status==="PENDING"&&h?.result==="CHANGED"&&h?.story?.storyId===i),[e,i]),b=!l&&!m&&!d;return{showOnboarding:b,showGuidedTour:!b&&!m,completeOnboarding:s,skipOnboarding:a.useCallback(()=>y(!1),[y]),completeWalkthrough:a.useCallback(()=>y(!0),[y]),skipWalkthrough:a.useCallback(()=>y(!1),[y]),startWalkthrough:u,lastBuildHasChangesForStory:w,isUpdating:v}},g6=({isOutdated:e,selectedBuildInfo:t,setSelectedBuildInfo:n,dismissBuildError:r,localBuildProgress:i,setOutdated:l,updateBuildStatus:o,projectId:s,gitInfo:d,storyId:c})=>{let u=Zt(),{addNotification:m,setOptions:p,togglePanel:v}=u,g=e7({projectId:s,storyId:c,gitInfo:d,selectedBuildInfo:t}),{account:y,features:w,manageUrl:b,hasData:h,hasProject:f,hasSelectedBuild:E,lastBuildOnBranch:C,lastBuildOnBranchIsReady:Z,lastBuildOnBranchIsSelectable:M,selectedBuild:V,selectedBuildMatchesGit:D,queryError:X,rerunQuery:oe,userCanReview:ve}=g,fe=K(({onDismiss:qt})=>{qt(),p({selectedPanel:rn}),v(!0)},[p,v]),ce=p6({buildIsReviewable:!!V&&V.id===C?.id,userCanReview:ve,onReviewSuccess:oe,onReviewError:(qt,ad)=>{qt instanceof Error&&m({id:`${U}/errorAccepting/${Date.now()}`,content:{headline:`Failed to ${ad.status==="ACCEPTED"?"accept":"unaccept"} changes`,subHeadline:qt.message},icon:a.createElement(ln,{color:Cn.negative}),duration:8e3,onClick:fe})}});te(()=>l(!D),[D,l]);let be=C&&"testsForStatus"in C&&C.testsForStatus?.nodes&&an(I0,C.testsForStatus.nodes),wt=M?C4(be||[]):[];te(()=>{o(wt)},[JSON.stringify(wt),o]),te(()=>{n(qt=>S4(qt,{shouldSwitchToLastBuildOnBranch:M&&Z,lastBuildOnBranchId:C?.id,storyId:c}))},[M,Z,C?.id,n,c]);let ge=K(()=>C?.id&&M&&n({buildId:C.id,storyId:c}),[n,M,C?.id,c]),{showOnboarding:kn,showGuidedTour:tt,completeOnboarding:J0,completeWalkthrough:Q0,skipOnboarding:X0,skipWalkthrough:ed,startWalkthrough:td,lastBuildHasChangesForStory:nd}=f6(g);return w&&!w.uiTests?a.createElement(x4,{manageUrl:b}):y?.suspensionReason?a.createElement(e0,{billingUrl:y.billingUrl,suspensionReason:y.suspensionReason}):kn&&f?a.createElement(a.Fragment,null,!h||X?a.createElement(a.Fragment,null):a.createElement(ai,{watchState:g},a.createElement(O7,{gitInfo:d,projectId:s,updateBuildStatus:o,dismissBuildError:r,localBuildProgress:i,showInitialBuildScreen:!V,onComplete:J0,onSkip:X0,lastBuildHasChangesForStory:nd}))):a.createElement(a.Fragment,null,!V||!E||!h||X?a.createElement(m6,{queryError:X,hasData:h,hasProject:f,hasSelectedBuild:E,branch:d.branch,dismissBuildError:r,localBuildProgress:i,...M&&{switchToLastBuildOnBranch:ge}}):a.createElement(U7,{watchState:ce},a.createElement(ai,{watchState:g},a.createElement(u6,{branch:d.branch,dismissBuildError:r,isOutdated:e,localBuildProgress:i,...C&&{lastBuildOnBranch:C},...M&&{switchToLastBuildOnBranch:ge},userCanReview:ve,storyId:c}))),tt&&a.createElement(ai,{watchState:{selectedBuild:V}},a.createElement(c7,{managerApi:u,skipWalkthrough:ed,startWalkthrough:td,completeWalkthrough:Q0})))},v6=e=>{let[t,n]=Be("selectedBuildInfo");return a.createElement(g6,{selectedBuildInfo:t,setSelectedBuildInfo:n,...e})},Y0=({localBuildProgress:e,accessToken:t})=>{let n=ya({}),r=Gt(hr),[i,l]=Le(!1),[o,s]=Le(!1),d=e?["initialize","build","upload"].includes(e?.currentStep):!1,c=e?!["aborted","complete","error","limited"].includes(e.currentStep):i,u=ft(()=>bi("startBuild",()=>{s(!1),l(!0),n(zd,{accessToken:t}),r?.({action:"startBuild"})},1e3,!1),[t,n,r]),m=ft(()=>bi("startBuild",()=>{d?(l(!1),n(Ud),r?.({action:"stopBuild"})):s(!0)},1e3,!1),[d,n,r]);return te(()=>{let p=i&&setTimeout(()=>l(!1),5e3);return()=>{p&&clearTimeout(p)}},[i]),{isDisallowed:o,isRunning:c,startBuild:u,stopBuild:m}},Jt=new Map,y6=()=>{let e=ya({[Jd]:t=>{let n=Jt.get(t.requestId);if(n)if(Jt.delete(t.requestId),"error"in t)n.reject(new Error(t.error));else{let{body:r,headers:i,status:l,statusText:o}=t.response,s=new Response(r,{headers:i,status:l,statusText:o});n.resolve(s)}}});return async(t,{signal:n,...r}={})=>{if(n?.aborted)return Promise.reject(n.reason);let i=Math.random().toString(36).slice(2);return n?.addEventListener("abort",()=>{e(Yd,{requestId:i}),Jt.get(i)?.reject(n.reason),Jt.delete(i)}),e(Kd,{requestId:i,input:t,init:r}),new Promise((l,o)=>{Jt.set(i,{resolve:l,reject:o}),setTimeout(()=>{o(ne
Line truncated
|
||||
}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }
|
||||
@@ -0,0 +1,40 @@
|
||||
Bundled license information:
|
||||
|
||||
filesize/dist/filesize.esm.js:
|
||||
/**
|
||||
* filesize
|
||||
*
|
||||
* @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
|
||||
* @license BSD-3-Clause
|
||||
* @version 10.1.6
|
||||
*/
|
||||
|
||||
@chromatic-com/storybook/dist/manager.mjs:
|
||||
/*! Bundled license information:
|
||||
|
||||
popper.js/dist/esm/popper.js:
|
||||
(**!
|
||||
* @fileOverview Kickass library to create and place poppers near their reference elements.
|
||||
* @version 1.16.1
|
||||
* @license
|
||||
* Copyright (c) 2016 Federico Zivolo and contributors
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*)
|
||||
*/
|
||||
Loaded 100 of 137 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user