import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled, { ThemeProvider } from "styled-components";
import genshiroTheme from "../theme/genshiro.theme";
import { ICONS, Coin } from "./coin";
import T from "../typography";
export default {
    component: Coin,
    title: "New/Coin",
    decorators: [
        (Story) => (_jsx(ThemeProvider, { theme: genshiroTheme, children: _jsx(Story, {}) })),
    ],
};
const Root = styled.div `
  display: flex;
  flex-direction: column;
  row-gap: 20px;
`;
const CoinRoot = styled.div `
  display: flex;
  flex-wrap: nowrap;
  column-gap: 10px;
  align-items: flex-start;
  padding: 20px 10px;
  border: 2px dashed #7b61ff;
  border-radius: 5px;
`;
export const CoinsTemplate = () => {
    return (_jsx(Root, { children: Object.entries(ICONS).map(([token]) => {
            return (_jsxs(_Fragment, { children: [_jsx(T.B16, { children: token }), _jsxs(CoinRoot, { children: [_jsx(Coin, { size: 30, token: token, placeholder: false }), _jsx(Coin, { token: token }), _jsx(Coin, { size: 64, token: token }), _jsx(Coin, { size: 108, token: token }), _jsx(T.B16, { children: "Custom \"placeholderPadding\"" }), _jsx(Coin, { size: 20, token: token, placeholderPadding: "20px" }), _jsx(T.B16, { children: "Custom \"backgroundColor\"" }), _jsx(Coin, { size: 20, token: token, backgroundColor: "coral" })] })] }));
        }) }));
};
//# sourceMappingURL=coin.stories.js.map