"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.nested = exports.basic = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const BlockStack_1 = require("../BlockStack");
const Heading_1 = require("../Heading");
const View_1 = require("../View");
const storybook_utilities_1 = require("../../storybook-utilities");
const Section_1 = require("./Section");
const meta = {
    component: Section_1.Section,
    title: 'checkout-web-ui/Section',
    decorators: [addon_knobs_1.withKnobs, storybook_utilities_1.themeWithKnobs()],
};
exports.default = meta;
exports.basic = () => (<Section_1.Section>
    <BlockStack_1.BlockStack>
      <Heading_1.Heading>Contact information</Heading_1.Heading>
      <View_1.View>Section content</View_1.View>
    </BlockStack_1.BlockStack>
  </Section_1.Section>);
exports.nested = () => (<Section_1.Section border="base" padding="base">
    <BlockStack_1.BlockStack>
      <Heading_1.Heading>Section</Heading_1.Heading>
      <View_1.View>Section content</View_1.View>
      <Section_1.Section border="base" padding="base">
        <BlockStack_1.BlockStack>
          <Heading_1.Heading>Nested Section</Heading_1.Heading>
          <View_1.View>Nested Section content</View_1.View>
        </BlockStack_1.BlockStack>
      </Section_1.Section>
      <Section_1.Section accessibilityLabel="Label" border="base" padding="base">
        <View_1.View>With accessibilityLabel</View_1.View>
      </Section_1.Section>
    </BlockStack_1.BlockStack>
  </Section_1.Section>);