===============
LIBRARY RULES
===============
From library maintainers:
- Use named imports: import { Button, Card } from '@wix/design-system'
- Icons are separate: import { Edit } from '@wix/wix-ui-icons-common'
- Check *Props.md for prop types and available example IDs
- Check *Examples.md for implementation patterns
- Prefer WDS layout primitives (Box, Card, Layout, Cell) over custom containers

### Wix Page Component Examples

Source: https://context7.com/vltansky/wix-design-system-docs/llms.txt

Illustrates the usage of the Wix Page component for structuring application layouts. Examples include basic page setup, adding action buttons to the header, utilizing background images, implementing sticky toolbars for tables, and incorporating a tail element for persistent information.

```jsx
import { Page, Card, Button, Table, TableToolbar, Layout, Cell, Text } from '@wix/design-system';

// Basic page structure
<Page height="100vh">
  <Page.Header title="Dashboard" />
  <Page.Content>
    <Card>
      <Card.Content>
        <Text>Page content goes here</Text>
      </Card.Content>
    </Card>
  </Page.Content>
</Page>

// Page with action buttons
<Page>
  <Page.Header
    title="Products"
    subtitle="Manage your product catalog"
    actionsBar={
      <Box gap="12px">
        <Button priority="secondary">Import</Button>
        <Button>Add Product</Button>
      </Box>
    }
  />
  <Page.Content>
    {/* Content */}
  </Page.Content>
</Page>

// Page with background image
<Page backgroundImageUrl="header-background.jpg">
  <Page.Header title="Welcome to Your Store" />
  <Page.Content>
    <Card>
      <Card.Content>
        {/* Content */}
      </Card.Content>
    </Card>
  </Page.Content>
</Page>

// Page with sticky toolbar (for infinite scroll tables)
<Page height="calc(100vh - 48px)">
  <Page.Header title="Orders" />
  <Page.Content>
    <Table data={orders} columns={columns}>
      <Page.Sticky>
        <Card>
          <TableToolbar>
            <TableToolbar.ItemGroup position="start">
              <TableToolbar.Item>
                <Text size="small">{orders.length} orders</Text>
              </TableToolbar.Item>
            </TableToolbar.ItemGroup>
          </TableToolbar>
          <Table.Titlebar />
        </Card>
      </Page.Sticky>
      <Card>
        <Table.Content titleBarVisible={false} />
      </Card>
    </Table>
  </Page.Content>
</Page>

// Page with tail element
<Page height="100vh">
  <Page.Header title="Analytics" />
  <Page.Tail>
    <Card>
      <Box padding="12px">
        <Text>Summary metrics that stay visible on scroll</Text>
      </Box>
    </Card>
  </Page.Tail>
  <Page.Content>
    {/* Charts and detailed content */}
  </Page.Content>
</Page>
```

--------------------------------

### Dropdown Component Examples

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/DropdownExamples.md

Examples demonstrating the usage of the Dropdown component with different props.

```APIDOC
## Dropdown Component Features

### Size

#### Description
Adjust the component size using the `size` prop.
- `large`: Emphasize fields in onboarding flows.
- `medium`: The default size used in most cases.
- `small`: Should be used in dense layouts.

### Border

#### Description
Style the component using the `border` prop which supports four styles:
- `standard`: For forms.
- `round`: When the component is used to filter.
- `bottomLine`: For titles that can be edited on click.
- `none`: In the Content Manager’s spreadsheet.

### Status

#### Description
Use the `status` prop to control component status.
- `error`: Highlights an invalid selection.
- `warning`: Highlights a value that can’t be validated or impacts a user’s business.
- `loading`: Shows that the value is loading.

Hide the status suffix and indicate the state with a border color by setting `hideStatusSuffix` to true.

### Status Message

#### Description
Add text that explains the status or what action the user should take with the `statusMessage` prop.
Showing the status message inline, directly below the dropdown is preferred in all default cases.
- To add an accessible inline message, wrap the component in a `<FormField/>` and add the `statusMessage`.
- To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. Control tooltip placement with `tooltipPlacement` prop.

### Disabled

#### Description
Disable all input interactions with the `disabled` prop. Use it to highlight unavailable functions.
```

--------------------------------

### Image Gallery Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/MediaOverlayExamples.md

Example of using Media Overlay for image galleries to display static data like counters.

```APIDOC
## Image Gallery Example

### Description
Use media overlay to place static data on top of an image, e.g. to place a counter indicating how many more images there are.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
<MediaOverlay>
  <MediaOverlay.Content>
    {/* Image gallery specific content */}
  </MediaOverlay.Content>
</MediaOverlay>
```

### Response
N/A
```

--------------------------------

### Product List Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/ImageExamples.md

This example demonstrates how to create a product list table using Wix Design System components. It includes product images, names, SKUs, stock availability, prices, and action buttons.

```APIDOC
## Product List Component

### Description
This component displays a list of products with their thumbnails, names, SKUs, stock status, prices, and actions. It utilizes various components from the Wix Design System for a consistent UI.

### Method
N/A (Component Example)

### Endpoint
N/A (Component Example)

### Parameters
N/A (Component Example)

### Request Example
N/A (Component Example)

### Response
N/A (Component Example)

### Code Example
```jsx
() => {
  const records = [
    {
      name: 'Hoodie',
      sku: 25232564,
      inStock: true,
      price: '$14.00',
      image: <Image src="ProductExample1.jpg" />,
    },
    {
      name: 'Watch',
      sku: 35246432,
      inStock: true,
      price: '$29.00',
      image: <Image src="ProductExample2.jpg" />,
    },
    {
      name: 'Glasses',
      sku: 4864310,
      inStock: false,
      price: '$69.00',
      image: <Image src="ProductExample3.jpg" />,
    },
    {
      name: 'Leather shoes',
      sku: 125156422,
      inStock: true,
      price: '$7.00',
      image: <Image src="ProductExample4.jpg" />,
    },
  ];

  const Status = ({ isInStock }) => (
    <Text size="small" secondary>
      {isInStock ? 'In Stock' : 'Out Of Stock'}
    </Text>
  );

  const secondaryAction = [
    {
      icon: <Icons.Duplicate />,
      text: 'Duplicate',
      onClick: () => {},
    },
    {
      icon: <Icons.Delete />,
      text: 'Delete',
      onClick: () => {},
    },
  ];

  const columns = [
    {
      title: '',
      render: row => row.image,
      width: '60px',
    },
    {
      title: 'Name',
      render: row => row.name,
      width: '30%',
    },
    {
      title: 'SKU',
      render: row => row.sku,
      width: '20%',
      align: 'start',
    },
    {
      title: 'Stock',
      render: row => <Status isInStock={row.inStock} />,
      width: '20%',
      align: 'start',
    },
    {
      title: 'Price',
      render: row => row.price,
      width: '10%',
      align: 'start',
    },
    {
      render: row => <TableActionCell secondaryActions={secondaryAction} />,
      width: '10%',
    },
  ];

  return (
    <Card>
      <Table data={records} columns={columns}>
        <TableToolbar>
          <TableToolbar.ItemGroup position="start">
            <TableToolbar.Item>
              <TableToolbar.Title>Products</TableToolbar.Title>
            </TableToolbar.Item>
          </TableToolbar.ItemGroup>
        </TableToolbar>
        <Table.Content />
      </Table>
    </Card>
  );
};
```
```

--------------------------------

### Setup Sidebar Selection Management

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/SidebarItemNextExamples.md

Provides an example of controlling item selection within a Sidebar component by managing the 'selectedKey' state. It also demonstrates truncating child item text with the 'isInQuickNavigation' prop.

```jsx
() => {
  const [selectedKey, setSelectedKey] = React.useState('1-1');

  return (
    <Box height="200px">
      <SidebarNext isLoading={false} selectedKey={selectedKey}>
        <SidebarSubMenuNext
          title="Parent item"
          itemKey="1"
          onClick={() => setSelectedKey('1-1')}
        >
          <SidebarItemNext
            itemKey="1-1"
            onClick={() => {
              setSelectedKey('1-1');
            }}
          >
            Child item that's setup incorrectly, it allows text wrapping{' '}
          </SidebarItemNext>
          <SidebarItemNext
            itemKey="1-2"
            onClick={() => setSelectedKey('1-2')}
            isInQuickNavigation
          >
            Child item using isInQuickNavigation property preveting from text
            being wrapped
          </SidebarItemNext>
        </SidebarSubMenuNext>
      </SidebarNext>
    </Box>
  );
}
```

--------------------------------

### Item Lists Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/MediaOverlayExamples.md

Example of using Media Overlay for item lists, such as dishes, that can be interacted with.

```APIDOC
## Item Lists Example

### Description
Use media overlay to list down visual items, such as dishes, that can be edited, marked as favourite or interacted with in any other way.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
<MediaOverlay>
  <MediaOverlay.Content>
    {/* Item list specific content */}
  </MediaOverlay.Content>
</MediaOverlay>
```

### Response
N/A
```

--------------------------------

### Reorderable List Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/MediaOverlayExamples.md

Example of using Media Overlay with middle placement and a Drag Handle for reorderable lists.

```APIDOC
## Reorderable List Example

### Description
Use middle placement at the center to position recordable element indication. This function should use a compound `<MediaOverlay.DragHandle/>` component.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
<MediaOverlay placement="middle">
  <MediaOverlay.DragHandle />
  <MediaOverlay.Content>
    {/* Reorderable list content */}
  </MediaOverlay.Content>
</MediaOverlay>
```

### Response
N/A
```

--------------------------------

### Marketing Layout Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/CardExamples.md

Demonstrates the usage of the MarketingLayout component, which should always be wrapped within a Card. This example includes title, description, actions, size, badge, and image props, utilizing Card, MarketingLayout, Button, Badge, Box, and Image components.

```jsx
<Card>
  <MarketingLayout
    title="Get found on Google"
    description="Boost your site's SEO with the SEO Wiz. Follow your step-by-step plan."
    actions={<Button size="small">Start Now</Button>}
    size="tiny"
    badge={<Badge size="small">Essential</Badge>}
    image={
      <Box width="100%" align="right">
        <Image
          width="120px"
          src="PromotionalPromoteMarketingHomeSEO.svg"
          transparent
        />
      </Box>
    }
  />
</Card>;
```

--------------------------------

### Multi-step Form Flow Example (React)

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/StepperExamples.md

Demonstrates a multi-step form flow using the Stepper component to guide users through a process. Supports linear and nonlinear navigation logic, with options to disable future or past steps.

```jsx
() => {
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <CustomModalLayout
      title="Create your loyalty program"
      showFooterDivider
      showHeaderDivider
      primaryButtonText="Next"
      secondaryButtonText="Cancel"
    >
      <Layout>
        <Cell span={12}>
          <Stepper
            activeStep={0}
            onClick={(step) => setActiveStep(step)}
            steps={[ 
              { text: 'Brand your program' },
              { text: 'Set points' },
              { text: 'Set rewards', type: 'disabled' },
              { text: 'Add description', type: 'disabled' },
            ]} 
          />
        </Cell>
        <Cell span={12}>
          <Divider />
        </Cell>
        <Cell span={6}>
          <FormField labelSize="small" label="Program name">
            <Input placeholder="" />
          </FormField>
        </Cell>
        <Cell span={6}>
          <FormField labelSize="small" label="Points name">
            <Input placeholder="" />
          </FormField>
        </Cell>
        <Cell span={6}>
          <FormField labelSize="small" label="Short description">
            <InputArea
              placeholder="Add more details about your program"
              rows={3}
              hasCounter
              resizable
            />
          </FormField>
        </Cell>
        <Cell span={6}>
          <Box width="72px">
            <FormField labelSize="small" label="Points icon">
              <AddItem theme="image" tooltipContent="Pick points icon">
                Add Item
              </AddItem>
            </FormField>
          </Box>
        </Cell>
      </Layout>
    </CustomModalLayout>
  );
}
```

--------------------------------

### WDS Button Component Examples

Source: https://context7.com/vltansky/wix-design-system-docs/llms.txt

Demonstrates various configurations of the Wix Design System Button component. Includes examples for different sizes, skins, priorities, icons, full-width, disabled states, and anchor links. Requires '@wix/design-system' and '@wix/wix-ui-icons-common'.

```jsx
import { Button } from '@wix/design-system';
import { Add, ChevronDown } from '@wix/wix-ui-icons-common';

// Basic button variations
<Button size="large">Large Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="small">Small Button</Button>
<Button size="tiny">Tiny Button</Button>

// Button skins and priorities
<Button skin="standard">Primary Action</Button>
<Button skin="standard" priority="secondary">Secondary Action</Button>
<Button skin="destructive">Delete Item</Button>
<Button skin="premium">Upgrade to Premium</Button>
<Button skin="ai">AI Feature</Button>

// Buttons with icons
<Button prefixIcon={<Add />}>Add Item</Button>
<Button suffixIcon={<ChevronDown />}>Show Menu</Button>

// Full width and disabled states
<Button fullWidth>Full Width Button</Button>
<Button disabled>Disabled Button</Button>

// Button as anchor link
<Button as="a" href="https://www.wix.com" target="_blank">
  Visit Wix
</Button>
```

--------------------------------

### Social Media Gallery Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/MediaOverlayExamples.md

Example of using Media Overlay for social media galleries to display identifying data.

```APIDOC
## Social Media Gallery Example

### Description
Use media overlay to place identifying data, such as logo or video duration on top of a media item.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
```jsx
<MediaOverlay>
  <MediaOverlay.Content>
    {/* Social media specific content */}
  </MediaOverlay.Content>
</MediaOverlay>
```

### Response
N/A
```

--------------------------------

### Settings Panel Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/RadioGroupExamples.md

Demonstrates using small radio buttons within a settings panel for UI consistency.

```APIDOC
## Settings Panel Example

### Description
Only use small size radio buttons in settings panels to ensure consistency across all panels.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **size** (string) - Optional - Sets the size of the radio buttons to 'small'.
- **value** (any) - Required - The currently selected value.
- **onChange** (function) - Required - Callback function when the selection changes.

### Request Example
```jsx
() => {
  const [defaultStateselected, setDefaultStateSelected] = React.useState(1);
  const [homepageTypeSelected, setHomepageTypeSelected] = React.useState(1);

  return (
    <SidePanel maxHeight="576px" width="288px" skin="floating">
      <SidePanel.Header title="Breadcrumbs Settings" />
      <SidePanel.Content noPadding>
        <SidePanel.Field>
          <FormField label="Default state">
            <RadioGroup
              value={defaultStateselected}
              onChange={setDefaultStateSelected}
              size="small"
            >
              <RadioGroup.Radio value={1}>Full trail</RadioGroup.Radio>
              <RadioGroup.Radio value={2}>Hide homepage</RadioGroup.Radio>
              <RadioGroup.Radio value={3}>Hide current page</RadioGroup.Radio>
            </RadioGroup>
          </FormField>
        </SidePanel.Field>
        <SidePanel.Field>
          <FormField label="Display homepage as">
            <RadioGroup
              value={homepageTypeSelected}
              onChange={setHomepageTypeSelected}
              size="small"
            >
              <RadioGroup.Radio value={1}>Text</RadioGroup.Radio>
              <RadioGroup.Radio value={2}>Icon</RadioGroup.Radio>
            </RadioGroup>
          </FormField>
        </SidePanel.Field>
      </SidePanel.Content>
    </SidePanel>
  );
}
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

--------------------------------

### Checkout Form Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/InputWithLabelExamples.md

An example demonstrating the use of inputs with labels specifically for building a Premium Checkout form.

```APIDOC
## Checkout Form Example

### Description
This input with labels can only be used to build a Premium Checkout form.

### Method
Not Applicable (Component Usage Example)

### Endpoint
Not Applicable (Component Usage Example)

### Parameters
Not Applicable (Component Usage Example)

### Request Example
```jsx
// Example for Premium Checkout form structure
<Input label="Card Number" type="text" />
<Input label="Expiry Date" type="text" />
<Input label="CVV" type="text" />
```

### Response
Not Applicable (Component Usage Example)

### Response Example
Not Applicable (Component Usage Example)
```

--------------------------------

### Basic Modal Implementation

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/AnnouncementModalLayoutProps.md

An example demonstrating how to implement a basic Modal component using the provided API properties.

```jsx
<Modal
  title="Modal Title"
  content="This is the modal content"
  primaryButtonText="Save"
  primaryButtonOnClick={() => console.log("Saved")}
  secondaryButtonText="Cancel"
  secondaryButtonOnClick={() => console.log("Cancelled")}
/>
```

--------------------------------

### Side Panel Custom Footer Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/SidePanelExamples.md

Shows how to implement custom footers for Side Panels to display confirmation or close actions. Includes examples with a placeholder, a single close button, and multiple action buttons.

```jsx
<StorybookComponents.Stack flexDirection="column">
  <SidePanel>
    <SidePanel.Footer>
      <StorybookComponents.Placeholder height="36px" />
    </SidePanel.Footer>
  </SidePanel>
  <SidePanel>
    <SidePanel.Footer>
      <Button priority="secondary" fullWidth>
        Close
      </Button>
    </SidePanel.Footer>
  </SidePanel>
  <SidePanel>
    <SidePanel.Footer>
      <StorybookComponents.Stack justifyContent="flex-end" gap="12px">
        <Button priority="secondary">Cancel</Button>
        <Button>Save</Button>
      </StorybookComponents.Stack>
    </SidePanel.Footer>
  </SidePanel>
</StorybookComponents.Stack>
```

--------------------------------

### Wix Side Panel Structure Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/SidePanelExamples.md

Demonstrates the basic structure of a Side Panel, composed of optional Header, Content, Divider, and Footer components. This example shows a typical usage with a header and content.

```jsx
<SidePanel onCloseButtonClick={() => {}}>
  <SidePanel.Header title="Header" />
  <SidePanel.Content>
    <StorybookComponents.Placeholder height="480px">
      Content
    </StorybookComponents.Placeholder>
  </SidePanel.Content>
  <SidePanel.Footer>
    <StorybookComponents.Placeholder height="36px" >
      Footer
    </StorybookComponents.Placeholder>
  </SidePanel.Footer>
</SidePanel>;
```

--------------------------------

### InputArea: Form Integration Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/InputAreaExamples.md

Shows how to integrate the InputArea component within a form layout using other Wix Design System components like FormField, Input, Layout, and Cell. This example demonstrates a common use case for multi-line text input in forms.

```jsx
() => {
  const [visibleChecked, setVisibleChecked] = React.useState(true);
  const [nameInputValue, setNameInputValue] = React.useState('My New Menu');
  const [value, setValue] = React.useState('');

  return (
    <CustomModalLayout
      primaryButtonText="Create Menu"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
      title="Create new menu"
    >
      <Layout gap="24px">
        <Cell span={12}>
          <FormField label="Name">
            <Input
              value={nameInputValue}
              onChange={e => setNameInputValue(e.target.value)}
            />
          </FormField>
        </Cell>
        <Cell span={12}>
          <FormField label="Description">
            <InputArea
              placeholder="Get people excited about your menu and your food."
              rows={4}
              maxLength={300}
              hasCounter
              resizable
              value={value}
              onChange={e => setValue(e.target.value)}
            />
          </FormField>
        </Cell>
        <Cell span={12}>
          <FormField
            label="Visible to customers"
            labelPlacement="right"
            stretchContent={false}
          >
            <ToggleSwitch
              checked={visibleChecked}
              onChange={() => setVisibleChecked(!visibleChecked)}
            />
          </FormField>
        </Cell>
      </Layout>
    </CustomModalLayout>
  );
}
```

--------------------------------

### Layout and Box Component Examples

Source: https://context7.com/vltansky/wix-design-system-docs/llms.txt

Showcases the Layout component for creating grid-based structures and the Box component for flexible container styling, spacing, and alignment. Includes examples for basic grids, responsive columns, and flexbox layouts.

```jsx
import { Layout, Cell, Box, Card, Text, Button } from '@wix/design-system';

// Basic grid layout
<Layout>
  <Cell span={6}>
    <Card><Card.Content>Left column</Card.Content></Card>
  </Cell>
  <Cell span={6}>
    <Card><Card.Content>Right column</Card.Content></Card>
  </Cell>
</Layout>

// Responsive columns
<Layout>
  <Cell span={4}>
    <Card><Card.Content>Column 1</Card.Content></Card>
  </Cell>
  <Cell span={4}>
    <Card><Card.Content>Column 2</Card.Content></Card>
  </Cell>
  <Cell span={4}>
    <Card><Card.Content>Column 3</Card.Content></Card>
  </Cell>
</Layout>

// Layout with gap
<Layout gap="24px">
  <Cell span={12}>
    <FormField label="Full width field">
      <Input />
    </FormField>
  </Cell>
  <Cell span={6}>
    <FormField label="Half width">
      <Input />
    </FormField>
  </Cell>
  <Cell span={6}>
    <FormField label="Half width">
      <Input />
    </FormField>
  </Cell>
</Layout>

// Box for flexbox layouts
<Box direction="horizontal" gap="12px" align="center">
  <Button>Action 1</Button>
  <Button priority="secondary">Action 2</Button>
</Box>

// Box with vertical alignment
<Box direction="vertical" gap="SP2" padding="SP4">
  <Text weight="bold">Title</Text>
  <Text secondary>Description text</Text>
</Box>

// Box for centering content
<Box align="center" verticalAlign="middle" height="200px">
  <Text>Centered content</Text>
</Box>

// Box with background and border
<Box
  backgroundColor="D10"
  padding="24px"
  borderRadius="8px"
  direction="vertical"
  gap="12px"
>
  <Text>Styled container</Text>
</Box>
```

--------------------------------

### Default Selection Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/RadioGroupExamples.md

Illustrates how to set a default selected option, preferably a neutral choice.

```APIDOC
## Default Selection Example

### Description
Have a default option selected whenever possible, ideally a neutral choice such as "None" or "All". 

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **value** (any) - Required - The currently selected value, initialized to the default option.
- **onChange** (function) - Required - Callback function when the selection changes.

### Request Example
```jsx
() => {
  const [selected, setSelected] = React.useState(1);

  return (
    <RadioGroup value={selected} onChange={setSelected}>
      <RadioGroup.Radio value={1}>All</RadioGroup.Radio>
      <RadioGroup.Radio value={2}>In stock</RadioGroup.Radio>
      <RadioGroup.Radio value={3}>Out of stock</RadioGroup.Radio>
    </RadioGroup>
  );
}
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

--------------------------------

### Widget Card Layout Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/CardExamples.md

Shows how to use Card components as widgets within grids or custom layouts. The `showShadow` property can be used to highlight a card, and these cards typically do not include headers. This example uses Layout, Cell, Box, Badge, Heading, and Button components.

```jsx
() => {
  const CustomCard = ({ title, suggested = false }) => {
    const [hovered, setHovered] = React.useState(false);
    return (
      <div
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        <Card showShadow={hovered}>
          <Layout gap={0}>
            <Cell span={12}>
              <Box height="18px" marginTop={2} marginLeft={-1}>
                {suggested && (
                  <Badge size="small" skin="standard">
                    SUGGESTED FOR YOU
                  </Badge>
                )}
              </Box>
            </Cell>
            <Cell>
              <Box height="72px" padding="12px 24px 0 24px">
                <Heading size="small">{title}</Heading>
              </Box>
            </Cell>
            <Cell>
              <Box padding="24px">
                <Button priority="secondary" size="small">
                  Set Up Automation
                </Button>
              </Box>
            </Cell>
          </Layout>
        </Card>
      </div>
    );
  };
  return (
    <Layout>
      <Cell span={4}>
        <CustomCard
          suggested
          title="Email customers when a product is back in stock "
        />
      </Cell>
      <Cell span={4}>
        <CustomCard title="Send a coupon to visitors who abandon a cart" />
      </Cell>
      <Cell span={4}>
        <CustomCard title="Ask customers for feedback via email" />
      </Cell>
    </Layout>
  );
};
```

--------------------------------

### Common Use Case: No data on a page

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/EmptyStateExamples.md

Use the 'page' or 'page-no-border' skin for empty states on a page to inform users about what content will appear and guide them on how to get started.

```APIDOC
## Common Use Case: No data on a page

### Description
Use the `page` or `page-no-border` skin to tell users what will appear on the page once there’s data to display, and if relevant, what they can do to get started.

### Request Example
```jsx
<Page>
  <Page.Header
    title="Tasks and Reminders"
    actionsBar={<Button prefixIcon={<Icons.Add />}>Add Task</Button>}
  />
  <Page.Content>
    <EmptyState
      skin="page"
      image={
        <Image
          width="120px"
          height="120px"
          src="no_categories.png"
          transparent
        />
      }
      title="Add your first task"
      subtitle="Manage tasks and reminders for your site to get more done."
    >
      {<TextButton prefixIcon={<Icons.Add />}>Add Task</TextButton>}
    </EmptyState>
  </Page.Content>
</Page>
```
```

--------------------------------

### Implement App Introduction with Wix SidePanel and EmptyState

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/EmptyStateExamples.md

This snippet shows how to use the SidePanel and EmptyState components to create an app introduction. It includes an app icon, description, and primary actions to guide users. The SidePanel provides navigation via VerticalTabs, and the EmptyState is configured with a theme, skin, title, subtitle, and action buttons.

```jsx
<SidePanel skin="floating" width="420px" onCloseButtonClick onHelpButtonClick>
  <SidePanel.Header title="Blog" />
  <Box height="480px">
    <VerticalTabs size="small" activeTabId={0} onChange={() => {}}>
      <VerticalTabs.TabItem id={0}>Main</VerticalTabs.TabItem>
      <VerticalTabs.TabItem id={1}>Display</VerticalTabs.TabItem>
      <VerticalTabs.TabItem id={2}>Layout</VerticalTabs.TabItem>
      <VerticalTabs.TabItem id={3}>Design</VerticalTabs.TabItem>
      <VerticalTabs.TabItem id={4}>Support</VerticalTabs.TabItem>
    </VerticalTabs>
    <Divider direction="vertical" />
    <SidePanel.Content>
      <EmptyState
        theme="section"
        skin={
          <Image
            width="120px"
            height="120px"
            src="onboarding_community.svg"
            transparent
          />
        }
        title="Blog feed"
        subtitle="Customize the layout and design of your blog feed, or create a post."
      >
        <Box gap="SP2" direction="vertical">
          <Button size="small">Create Post</Button>
          <Button size="small" priority="secondary">
            Manage Posts
          </Button>
        </Box>
      </EmptyState>
    </SidePanel.Content>
  </Box>
</SidePanel>
```

--------------------------------

### Implement progress bar in setup cards

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/CircularProgressBarExamples.md

Example of using the CircularProgressBar within a Card component to indicate progress in a setup process or checklist.

```jsx
<Layout>
  <Cell span={5}>
    <Card>
      <Card.Header title="SEO assistant" />
      <Card.Divider />
      <Card.Content>
        <Box direction="vertical" gap="SP2" paddingBottom="SP4">
          <CircularProgressBar
            size="medium"
            value="20"
            label="1/5"
            labelPlacement="center"
          />
          <Text weight="normal">SEO setup checklist</Text>
          <Text size="small" secondary>
            Fix current issues and follow recommendations to improve this site’s
            performance in search results.
          </Text>
        </Box>
        <Button priority="secondary" size="small">
          Continue Setup
        </Button>
      </Card.Content>
    </Card>
  </Cell>
</Layout>;
```

--------------------------------

### Empty State Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/CardExamples.md

Illustrates how to use the EmptyState component to guide users when there is no content to display. This example includes a Card with a header and content, featuring an EmptyState component with title, subtitle, theme, and a TextButton for a call to action. It uses Card, Button, Icons, EmptyState, and TextButton components.

```jsx
<Card>
  <Card.Header
    title="New Arrivals collection"
    suffix={
      <Button size="small" prefixIcon={<Icons.Add />}>
        Add Product
      </Button>
    }
  />
  <Card.Divider />
  <Card.Content>
    <EmptyState
      title="Add your first product"
      subtitle="Bring more attention to new products."
      theme="section"
    >
      <TextButton size="small" prefixIcon={<Icons.Add />}>
        Add Product
      </TextButton>
    </EmptyState>
  </Card.Content>
</Card>;
```

--------------------------------

### Wix Modal Structure Example

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/ModalExamples.md

Demonstrates the basic structure of a Wix Modal, showing how to open and close it with custom content. It utilizes React state management for modal visibility and includes a placeholder for modal content.

```jsx
() => {
  const [isModalOpened, setModalOpened] = React.useState(false);

  const openModal = () => setModalOpened(true);
  const closeModal = () => setModalOpened(false);

  const renderModalContent = () => (
    <StorybookComponents.Placeholder skin="light" width="600px" height="600px">
      <StorybookComponents.Stack
        flexDirection="column"
        alignItems="center"
        padding="30px"
      >
        <Text light>Modal content goes here.</Text>
        <TextButton onClick={closeModal} underline="always" skin="light">
          Close Modal
        </TextButton>
      </StorybookComponents.Stack>
    </StorybookComponents.Placeholder>
  );

  return (
    <StorybookComponents.Stack>
      <Button onClick={openModal} prefixIcon={<Icons.OpenModal />}>
        Open Modal
      </Button>
      <Modal isOpen={isModalOpened} onRequestClose={closeModal}>
        {renderModalContent()}
      </Modal>
    </StorybookComponents.Stack>
  );
};
```

--------------------------------

### Enter Animation Examples

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/TransitionExamples.md

Demonstrates the usage of different enter animations: Fade In, Move In, Expand, and ScaleUp. Each animation can be controlled with properties like direction, distance, duration, and easing.

```APIDOC
## Enter Animation

### Description

This section showcases how to implement various enter animations for components, providing a dynamic and engaging user experience. The available animations are:

*   **Fade In**: Ideal for sudden appearances or state changes.
*   **Move In**: Emphasizes the direction of appearance, supporting four directional options.
*   **Expand**: Suitable for objects appearing within content, supporting four directional options.
*   **ScaleUp**: Used to indicate an object appearing from a specific point, supporting nine directional options.

Refer to the API for all possible direction options.

### Method

N/A (Component usage example)

### Endpoint

N/A (Component usage example)

### Parameters

N/A (Component usage example)

### Request Example

```jsx
() => {
  const [showFade, setShowFade] = React.useState(false)
  const [showMove, setShowMove] = React.useState(false)
  const [showExpand, setShowExpand] = React.useState(false)
  const [showScaleUp, setShowScaleUp] = React.useState(false)

  return (
    <StorybookComponents.Stack height={200}>
      <StorybookComponents.Stack flexDirection="column" width="25%">
        <StorybookComponents.Stack
          flexDirection="column"
          width="80px"
          gap="6px"
        >
          fadeIn
          <Button onClick={() => setShowFade(!showFade)}>
            {showFade ? 'Reset' : 'Play'}
          </Button>
        </StorybookComponents.Stack>
        <Transition
          show={showFade}
          enterAnimation={{
            fadeIn: {
              duration: 'slow02',
              easing: 'enterEasing',
            },
          }}
        >
          <StorybookComponents.Placeholder height="100px" width="100px" />
        </Transition>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack flexDirection="column" width="25%">
        <StorybookComponents.Stack
          flexDirection="column"
          width="80px"
          gap="6px"
        >
          moveIn
          <Button onClick={() => setShowMove(!showMove)}>
            {showMove ? 'Reset' : 'Play'}
          </Button>
        </StorybookComponents.Stack>
        <Transition
          show={showMove}
          enterAnimation={{
            moveIn: {
              direction: 'bottomToTop',
              distance: '20px',
              duration: 'slow02',
              easing: 'enterEasing',
            },
          }}
        >
          <StorybookComponents.Placeholder height="100px" width="100px" />
        </Transition>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack flexDirection="column" width="25%">
        <StorybookComponents.Stack
          flexDirection="column"
          width="80px"
          gap="6px"
        >
          expand
          <Button onClick={() => setShowExpand(!showExpand)}>
            {showExpand ? 'Reset' : 'Play'}
          </Button>
        </StorybookComponents.Stack>
        <Transition
          show={showExpand}
          enterAnimation={{
            expand: {
              direction: 'bottomToTop',
              duration: 'slow02',
              easing: 'enterEasing',
              size: '100%',
            },
          }}
        >
          <StorybookComponents.Placeholder height="100px" width="100px" />
        </Transition>
      </StorybookComponents.Stack>
      <StorybookComponents.Stack flexDirection="column">
        <StorybookComponents.Stack
          flexDirection="column"
          width="80px"
          gap="6px"
        >
          scaleUp
          <Button onClick={() => setShowScaleUp(!showScaleUp)}>
            {showScaleUp ? 'Reset' : 'Play'}
          </Button>
        </StorybookComponents.Stack>
        <Transition
          show={showScaleUp}
          enterAnimation={{
            scaleUp: {
              direction: 'bottom',
              duration: 'slow02',
              easing: 'enterEasing',
              scale: '100%',
            },
          }}
        >
          <StorybookComponents.Placeholder height="100px" width="100px" />
        </Transition>
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  )
}

```

### Response

N/A (Component usage example)

### Response Example

N/A (Component usage example)
```

--------------------------------

### Wix Card Component Examples

Source: https://context7.com/vltansky/wix-design-system-docs/llms.txt

Demonstrates various ways to use the Wix Card component, including basic structure, adding headers with actions, using section headers, incorporating close buttons, and creating multi-content sections within a card.

```jsx
import { Card, SectionHeader, Box, Layout, Cell, TextButton, CloseButton, Text } from '@wix/design-system';

// Basic card structure
<Card>
  <Card.Header title="Card Title" subtitle="Card subtitle" />
  <Card.Divider />
  <Card.Content>
    <Text>Card content goes here</Text>
  </Card.Content>
</Card>

// Card with header suffix action
<Card>
  <Card.Header
    title="Products"
    subtitle="Manage your product catalog"
    suffix={<TextButton>View All</TextButton>}
  />
  <Card.Divider />
  <Card.Content>
    {/* Content */}
  </Card.Content>
</Card>

// Card with section headers
<Card>
  <Card.Header title="Settings" />
  <SectionHeader
    title="General Settings"
    suffix={<TextButton size="small">Edit</TextButton>}
  />
  <Card.Content>
    {/* General settings content */}
  </Card.Content>
  <SectionHeader title="Advanced Settings" />
  <Card.Content>
    {/* Advanced settings content */}
  </Card.Content>
</Card>

// Card with close button
<Card controls={<CloseButton size="large" skin="dark" />}>
  <Card.Header title="Notification" />
  <Card.Divider />
  <Card.Content>
    <Text>This card can be dismissed</Text>
  </Card.Content>
</Card>

// Card with multiple content sections
<Card>
  <Card.Header title="Order Details" />
  <Card.Divider />
  <Card.Content>
    <Layout>
      <Cell span={12}>
        <Box padding="12px 0">
          <Text>Customer: John Doe</Text>
        </Box>
      </Cell>
      <Cell span={12}>
        <Card.Divider />
      </Cell>
      <Cell span={12}>
        <Box padding="12px 0">
          <Text>Total: $150.00</Text>
        </Box>
      </Cell>
    </Layout>
  </Card.Content>
</Card>
```

--------------------------------

### Align Column Content with 'align' Prop

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/TableExamples.md

Control the alignment of content within a table column using the 'align' prop. Supported options are 'start' (default), 'center', and 'end'. This example demonstrates each alignment option.

```jsx
() => {
  const data = [
    {
      column1: 'Start aligned column',
      column2: 'Center',
      column3: 'End',
    },
    {
      column1: 'Start',
      column2: 'Center aligned column',
      column3: 'End',
    },
    {
      column1: 'Start',
      column2: 'Center',
      column3: 'End aligned column',
    },
  ];

  const columns = [
    { title: 'Align', align: 'start', render: row => row.column1 },
    { title: 'Align', align: 'center', render: row => row.column2 },
    { title: 'Align', align: 'end', render: row => row.column3 },
  ];

  return (
    <Card>
      <Table data={data} columns={columns} rowVerticalPadding="medium">
        <Table.Content />
      </Table>
    </Card>
  );
};
```

--------------------------------

### Create Dashboard Layout with Page and Grid Components

Source: https://github.com/vltansky/wix-design-system-docs/blob/main/components/PageExamples.md

This example shows how to build a responsive dashboard using the Page component, Page.Section for grouping, and Layout/Cell components for grid-based content organization. It includes interactive elements like PopoverMenu and DropdownBase.

```jsx
() => {
  const renderCard = ({ title, height, stretchVertically = false }) => (
    <Card stretchVertically={stretchVertically}>
      <Card.Header title={title} />
      <Card.Divider />
      <Card.Content>
        <Box height={height} />
      </Card.Content>
    </Card>
  );

  const renderToolsCard = () => (
    <Card>
      <Card.Content>
        <Box height="90px" />
      </Card.Content>
    </Card>
  );

  return (
    <Page height="60vh">
      <Page.Header
        title="Facebook Ads"
        actionsBar={
          <PopoverMenu
            triggerElement={
              <Button skin="inverted" suffixIcon={<Icons.ChevronDown />}>
                More Actions
              </Button>
            }
          >
            <PopoverMenu.MenuItem
              text="Edit campaign"
              prefixIcon={<Icons.Edit />}
            />
            <PopoverMenu.MenuItem
              text="Change budget"
              prefixIcon={<Icons.Payment />}
            />
            <PopoverMenu.MenuItem
              text="End campaign"
              prefixIcon={<Icons.Dismiss />}
              skin="destructive"
            />
          </PopoverMenu>
        }
      />
      <Page.Content>
        <Layout>
          <Cell>
            <Card>
              <Box height="120px" />
            </Card>
          </Cell>
          <Cell>
            <Page.Section
              title="Overview"
              showDivider
              actionsBar={
                <Box gap="SP2">
                  <Text>Time Period:</Text>
                  <DropdownBase
                    selectedId={4}
                    options={[
                      { id: 0, value: 'Last hour' },
                      { id: 1, value: 'Last 24 hours' },
                      { id: 2, value: 'Last 7 days' },
                      { id: 3, value: 'Last 30 days' },
                      { id: 4, value: 'Lifetime' },
                    ]}
                  >
                    {({ toggle, selectedOption = {} }) => (
                      <TextButton
                        onClick={toggle}
                        suffixIcon={<Icons.ChevronDown />}
                      >
                        {selectedOption.value}
                      </TextButton>
                    )}
                  </DropdownBase>
                </Box>
              }
            />
          </Cell>
          <Cell span={6}>
            {renderCard({
              title: 'Ad engagement',
              height: '240px',
              stretchVertically: true,
            })}
          </Cell>
          <Cell span={6}>
            {renderCard({
              title: 'Ad impact',
              height: '240px',
            })}
          </Cell>
          <Cell>
            {renderCard({
              title: 'Statistics',
              height: '180px',
            })}
          </Cell>
          <Cell span={4}>
            {renderCard({
              title: 'Audience',
              height: '240px',
            })}
          </Cell>
          <Cell span={4}>
            {renderCard({
              title: 'Performance over time',
              height: '240px',
            })}
          </Cell>
          <Cell span={4}>
            {renderCard({
              title: 'Customer funnel',
              height: '240px',
            })}
          </Cell>
          <Cell>
            <Page.Section
              title="Tools"
              showDivider
              actionsBar={
                <TextButton suffixIcon={<Icons.ChevronRight />}>
                  View All
                </TextButton>
              }
            />
          </Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
          <Cell span={3}>{renderToolsCard()}</Cell>
        </Layout>
      </Page.Content>
    </Page>
  );
};
```