"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineStack = void 0;
const react_1 = __importDefault(require("react"));
const View_1 = require("../View");
const InlineStack_1 = require("./InlineStack");
const meta = {
    component: InlineStack_1.InlineStack,
    title: 'checkout-web-ui/InlineStack',
    argTypes: {
        demoWidth: { control: { type: 'range', min: 0, max: 100 } },
        spacing: {
            control: {
                type: 'select',
                options: [
                    undefined,
                    'none',
                    'extraTight',
                    'tight',
                    'base',
                    'loose',
                    'extraLoose',
                ],
            },
        },
        alignment: {
            control: {
                type: 'select',
                options: [undefined, 'leading', 'center', 'trailing', 'baseline'],
            },
        },
        blockAlignment: {
            control: {
                type: 'select',
                options: [undefined, 'center', 'trailing'],
            },
        },
    },
};
exports.default = meta;
function Content({ size = 1 }) {
    return (<div style={{
        backgroundColor: 'lightgrey',
        width: '5em',
        height: `${size}em`,
    }}/>);
}
exports.InlineStack = (_a) => {
    var { demoWidth } = _a, args = __rest(_a, ["demoWidth"]);
    return (<View_1.View maxInlineSize={Number(`0.${demoWidth}`)} border="dotted">
      <InlineStack_1.InlineStack {...args}>
        <Content />
        <Content size={3}/>
        <Content />
        <Content size={2}/>
        <Content />
        <Content />
        <Content size={3}/>
        <Content />
        <Content size={2}/>
      </InlineStack_1.InlineStack>
    </View_1.View>);
};
exports.InlineStack.args = {
    demoWidth: 25,
    spacing: undefined,
    alignment: undefined,
    blockAlignment: undefined,
    wrap: false,
};
exports.InlineStack.story = {
    name: 'InlineStack',
};