import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { createComponent } from '@meta-ui/core';
import { css } from '@emotion/react';
import { Type } from '@sinclair/typebox';
import { VStack as BaseVStack } from '@chakra-ui/react';
import Slot from '../_internal/Slot';
import { DirectionSchema, FlexWrapSchema, AlignItemsSchema, JustifyContentSchema, SpacingSchema, } from './Stack';
const VStack = ({ direction, wrap, align, justify, spacing, slotsMap, customStyle, }) => {
    return (_jsx(BaseVStack, Object.assign({ width: "full", height: "full", padding: "4", background: "white", border: "1px solid", borderColor: "gray.200", borderRadius: "4", css: css `
        ${customStyle === null || customStyle === void 0 ? void 0 : customStyle.content}
      ` }, { direction, wrap, align, justify, spacing }, { children: _jsx(Slot, { slotsMap: slotsMap, slot: "content" }, void 0) }), void 0));
};
const PropsSchema = Type.Object({
    direction: DirectionSchema,
    wrap: FlexWrapSchema,
    align: AlignItemsSchema,
    justify: JustifyContentSchema,
    spacing: SpacingSchema,
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'vstack',
        displayName: 'VStack',
        description: 'chakra-ui vstack',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            spacing: 4,
            align: 'stretch',
        },
        exampleSize: [6, 6],
    },
    spec: {
        properties: PropsSchema,
        state: {},
        methods: [],
        slots: ['content'],
        styleSlots: [],
        events: [],
    },
})), { impl: VStack });
//# sourceMappingURL=VStack.js.map