import React from 'react';
import { Box, Flexbox, Icon, Card } from '../..';
import { TagChip } from './TagChip';
var meta = {
  component: TagChip,
  title: 'Molecules / TagChip'
};
export default meta;
var Template = function Template(args) {
  return React.createElement("div", {
    style: {
      padding: '10px',
      backgroundColor: 'white'
    }
  }, React.createElement(TagChip, args));
};
export var OnlyLabel = {
  render: Template,
  args: {
    label: 'Default'
  }
};
export var BothIconAndLabel = {
  render: Template,
  args: {
    icon: React.createElement(Icon.MonthlySavings16, null),
    label: 'Default'
  }
};
export var Emoji = function Emoji() {
  return React.createElement(Card, null, React.createElement(Box, {
    p: 3
  }, React.createElement(TagChip, {
    label: "Title",
    icon: "\uD83D\uDE0D"
  })));
};
export var WithFourTagChips = function WithFourTagChips() {
  return React.createElement(Card, null, React.createElement(Box, {
    p: 2
  }, React.createElement(Flexbox, {
    container: true,
    gap: 1
  }, React.createElement(TagChip, {
    label: "label"
  }), React.createElement(TagChip, {
    label: "\uD83C\uDF3B label"
  }), " ", React.createElement(TagChip, {
    icon: React.createElement(Icon.MonthlySavings16, null),
    label: "label"
  }), ' ', React.createElement(TagChip, {
    label: "emoji as an icon",
    icon: "\uD83D\uDE0D"
  }))));
};