import * as React from 'react';
import { twMerge } from '../../twMerge';
import { Box, Flex } from '../Flex';
import clsx from 'clsx';
export const Tag = React.forwardRef((props, ref) => (React.createElement(Flex, { ...props, ref: ref, className: twMerge(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
export const TagBox = (props) => {
    return (React.createElement(Box, { className: clsx('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className) }, props.children));
};
export const TagList = (props) => {
    return (React.createElement(TagBox, { className: props.className }, props.tags.map((tag, index) => (React.createElement(Tag, { key: index }, tag)))));
};
