import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled, { ThemeProvider } from "styled-components";
import T from "../typography";
import genshiroTheme from "../theme/genshiro.theme";
import Pagination from ".";
import { usePagination } from "./use-pagination";
export default {
    component: Pagination,
    title: "New/Pagination",
};
const Row = styled.div `
  display: flex;
  align-items: center;

  .header {
    width: 200px;
    text-align: right;
  }
`;
const Container = styled.div `
  margin: 20px;
  padding: 20px;
  border: 2px dashed #7b61ff;
  border-radius: 4px;
  width: 100%;
`;
export const Genshiro = () => {
    const pagination = usePagination(10);
    return (_jsxs(ThemeProvider, { theme: genshiroTheme, children: [_jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Standard" }), _jsx(Container, { children: _jsx(Pagination, { ...pagination }) })] }), _jsxs(Row, { children: [_jsx(T.H2, { className: "header", children: "Disabled" }), _jsx(Container, { children: _jsx(Pagination, { ...pagination, disabled: true }) })] })] }));
};
//# sourceMappingURL=pagination.stories.js.map