"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.marker = exports.spacing = exports.defaultState = void 0;
const react_1 = __importDefault(require("react"));
const InlineStack_1 = require("../InlineStack");
const BlockStack_1 = require("../BlockStack");
const List_1 = require("./List");
const meta = {
    component: List_1.List,
    title: 'checkout-web-ui/List',
    decorators: [
        (story) => (<div style={{
            padding: '1em',
        }}>
        {story()}
      </div>),
    ],
};
exports.default = meta;
exports.defaultState = () => (<List_1.List>
    <List_1.ListItem>English</List_1.ListItem>
    <List_1.ListItem>Français</List_1.ListItem>
    <List_1.ListItem>Deutsch</List_1.ListItem>
  </List_1.List>);
exports.spacing = () => (<InlineStack_1.InlineStack spacing="extraLoose">
    <List_1.List spacing="none">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List spacing="extraTight">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List spacing="tight">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List spacing="base">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List spacing="loose">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List spacing="extraLoose">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
  </InlineStack_1.InlineStack>);
exports.marker = () => (<BlockStack_1.BlockStack spacing="extraLoose">
    <List_1.List marker="none">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List marker="bullet">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
    <List_1.List marker="number">
      <List_1.ListItem>English</List_1.ListItem>
      <List_1.ListItem>Français</List_1.ListItem>
      <List_1.ListItem>Deutsch</List_1.ListItem>
    </List_1.List>
  </BlockStack_1.BlockStack>);