@bolio-ui/core 1.0.4 → 1.0.5

package/esm/Modal/stories.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Modal from '.';
+import Button from '../Button';
+import Grid from '../Grid';
+import useModal from '../use-modal';
+export default {
+  title: 'Feedback/Modal',
+  component: Modal
+};
+export var Default = function Default() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var handler = function handler() {
+    return setState(true);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: handler
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    }
+  }, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
+    passive: true,
+    onClick: function onClick() {
+      return setState(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
+};
+export var UseModal = function UseModal() {
+  var _useModal = useModal(),
+      setVisible = _useModal.setVisible,
+      bindings = _useModal.bindings;
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
+    passive: true,
+    onClick: function onClick() {
+      return setVisible(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
+};
+export var WithoutActions = function WithoutActions() {
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      state = _useState4[0],
+      setState = _useState4[1];
+
+  var handler = function handler() {
+    return setState(true);
+  };
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: handler
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
+    visible: state,
+    onClose: function onClose() {
+      return setState(false);
+    }
+  }, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")))));
+};
+export var DisabledAction = function DisabledAction() {
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      state = _useState6[0],
+      setState = _useState6[1];
+
+  var handler = function handler() {
+    return setState(true);
+  };
+
+  var closeHandler = function closeHandler() {
+    setState(false);
+    console.log('closed');
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: handler
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, {
+    visible: state,
+    onClose: closeHandler
+  }, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
+    passive: true,
+    onClick: function onClick() {
+      return setState(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, {
+    disabled: true
+  }, "Submit")));
+};
+export var Customized = function Customized() {
+  var _useModal2 = useModal(),
+      setVisible = _useModal2.setVisible,
+      bindings = _useModal2.bindings;
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, _extends({
+    width: "35rem"
+  }, bindings), /*#__PURE__*/React.createElement(Modal.Title, null, "My Favorites"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "This is the width I want.")))));
+};
+export var Loading = function Loading() {
+  var _useModal3 = useModal(),
+      setVisible = _useModal3.setVisible,
+      bindings = _useModal3.bindings;
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Example of a modal"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "Demo content for the modal.")), /*#__PURE__*/React.createElement(Modal.Action, {
+    passive: true,
+    onClick: function onClick() {
+      return setVisible(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, {
+    loading: true
+  }, "Accepted"))));
+};
+export var Overlong = function Overlong() {
+  var _useModal4 = useModal(),
+      setVisible = _useModal4.setVisible,
+      bindings = _useModal4.bindings;
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    onClick: function onClick() {
+      return setVisible(true);
+    }
+  }, "Show Modal"), /*#__PURE__*/React.createElement(Modal, bindings, /*#__PURE__*/React.createElement(Modal.Title, null, "Modal"), /*#__PURE__*/React.createElement(Modal.Subtitle, null, "Modal with a very large content"), /*#__PURE__*/React.createElement(Modal.Content, null, /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started."), /*#__PURE__*/React.createElement("p", null, "React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.")), /*#__PURE__*/React.createElement(Modal.Action, {
+    passive: true,
+    onClick: function onClick() {
+      return setVisible(false);
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement(Modal.Action, null, "Accepted"))));
+};

package/esm/Note/Note.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export declare type NoteTypes = NormalTypes;
+interface Props {
+    type?: NoteTypes;
+    label?: string | boolean;
+    filled?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type NoteProps = Props & NativeAttrs;
+export declare function NoteComponent({ children, type, label, filled, className, ...props }: React.PropsWithChildren<NoteProps>): JSX.Element;
+export declare namespace NoteComponent {
+    var displayName: string;
+}
+declare const Note: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Note;

package/esm/Note/index.d.ts

@@ -0,0 +1,3 @@
+import Note from "./Note";
+export type { NoteProps, NoteTypes } from "./Note";
+export default Note;

package/esm/Note/index.js

@@ -0,0 +1,2 @@
+import Note from './Note';
+export default Note;

package/esm/Note/stories.js

@@ -0,0 +1,68 @@
+import Note from '.';
+import Grid from '../Grid';
+export default {
+  title: 'Feedback/Note',
+  component: Note
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, null, "Check payment pending.")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, null, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "primary"
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "secondary"
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "success"
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "warning"
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "error"
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "info"
+  }, "Check payment pending.")));
+};
+export var HiddenLabel = function HiddenLabel() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    label: false
+  }, "Demo note!")));
+};
+export var CustomLabel = function CustomLabel() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    label: "custom"
+  }, "Customize a note.")));
+};
+export var FilledVariant = function FilledVariant() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    label: "custom",
+    filled: true
+  }, "Customize a note.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    label: false,
+    filled: true
+  }, "Demo note!")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "success",
+    label: "success",
+    filled: true
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "warning",
+    label: "warning",
+    filled: true
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "error",
+    label: "error",
+    filled: true
+  }, "Check payment pending.")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Note, {
+    type: "secondary",
+    filled: true
+  }, "Check payment pending.")));
+};

package/esm/Page/Page.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from 'react';
+declare const renderMode: ["default", "effect", "effect-seo"];
+export declare type PageRenderMode = typeof renderMode[number];
+interface Props {
+    render?: PageRenderMode;
+    dotBackdrop?: boolean;
+    dotSize?: CSSProperties['fontSize'];
+    dotSpace?: number;
+}
+export declare type DotStylesProps = {
+    dotSize: CSSProperties['fontSize'];
+    dotSpace: number;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageProps = Props & NativeAttrs;
+declare const Page: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Page;

package/esm/Page/Page.js

@@ -0,0 +1,88 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "render", "dotBackdrop", "className", "dotSize", "dotSpace"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import { tuple } from '../utils/prop-types';
+import useTheme from '../use-theme';
+import PageContent from './PageContent';
+import { hasChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+var renderMode = tuple('default', 'effect', 'effect-seo');
+
+var DotStyles = function DotStyles(_ref) {
+  var dotSpace = _ref.dotSpace,
+      dotSize = _ref.dotSize;
+  var background = useMemo(function () {
+    return {
+      position: "calc(".concat(dotSpace, " * 25px)"),
+      size: "calc(".concat(dotSpace, " * 50px)")
+    };
+  }, [dotSpace]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["2593286177", [dotSize, dotSize, background.position, background.position, background.size, background.size]]])
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2593286177",
+    dynamic: [dotSize, dotSize, background.position, background.position, background.size, background.size]
+  }, "body{background-image:radial-gradient(#e3e3e3 ".concat(dotSize, ",transparent 0), radial-gradient(#e3e3e3 ").concat(dotSize, ",transparent 0);background-position:0 0, ").concat(background.position, " ").concat(background.position, ";background-attachment:fixed;background-size:").concat(background.size, " ").concat(background.size, ";}")));
+};
+
+function PageComponent(_ref2) {
+  var children = _ref2.children,
+      _ref2$render = _ref2.render,
+      render = _ref2$render === void 0 ? 'default' : _ref2$render,
+      _ref2$dotBackdrop = _ref2.dotBackdrop,
+      dotBackdrop = _ref2$dotBackdrop === void 0 ? false : _ref2$dotBackdrop,
+      className = _ref2.className,
+      _ref2$dotSize = _ref2.dotSize,
+      dotSize = _ref2$dotSize === void 0 ? '1px' : _ref2$dotSize,
+      _ref2$dotSpace = _ref2.dotSpace,
+      dotSpace = _ref2$dotSpace === void 0 ? 1 : _ref2$dotSpace,
+      props = _objectWithoutProperties(_ref2, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var showDot = useMemo(function () {
+    if (theme.type === 'dark') return false;
+    return dotBackdrop;
+  }, [dotBackdrop, theme.type]);
+
+  var _useState = useState(render !== 'default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      preventRender = _useState2[0],
+      setPreventRender = _useState2[1];
+
+  useEffect(function () {
+    setPreventRender(false);
+  }, []);
+
+  if (preventRender) {
+    var renderSEO = render === 'effect-seo';
+    if (!renderSEO) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": "true",
+      className: "jsx-3942095687" + " " + "hidden"
+    }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+      id: "3942095687"
+    }, ".hidden.jsx-3942095687{opacity:0;display:none;}"));
+  }
+
+  var hasContent = hasChild(children, PageContent);
+  return /*#__PURE__*/React.createElement("section", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2892125839", [SCALES.font(1), SCALES.width(1, 'calc(100% - 100pt)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto')]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), hasContent ? children : /*#__PURE__*/React.createElement(PageContent, null, children), showDot && /*#__PURE__*/React.createElement(DotStyles, {
+    dotSize: dotSize,
+    dotSpace: dotSpace
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2892125839",
+    dynamic: [SCALES.font(1), SCALES.width(1, 'calc(100% - 100pt)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(1.34), SCALES.pb(0), SCALES.pl(1.34), SCALES.mt(0), SCALES.mr(0, 'auto'), SCALES.mb(0), SCALES.ml(0, 'auto')]
+  }, "section.__jsx-style-dynamic-selector{max-width:100vw;min-height:100vh;box-sizing:border-box;position:relative;font-size:".concat(SCALES.font(1), ";height:").concat(SCALES.height(1, 'auto'), ";-webkit-align-content:space-between;-ms-flex-line-pack:space-between;align-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;min-height:100vh;}")));
+}
+
+PageComponent.displayName = 'BolioUIPage';
+var Page = withScale(PageComponent);
+export default Page;

package/esm/Page/PageContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageContentProps = Props & NativeAttrs;
+declare const PageContent: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default PageContent;

package/esm/Page/PageFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageFooterProps = Props & NativeAttrs;
+declare const PageFooter: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default PageFooter;

package/esm/Page/PageHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    center?: boolean;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PageHeaderProps = Props & NativeAttrs;
+declare const PageHeader: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default PageHeader;

package/esm/Page/index.d.ts

@@ -0,0 +1,16 @@
+import Page from "./Page";
+import PageHeader from "./PageHeader";
+import PageContent from "./PageContent";
+import PageFooter from "./PageFooter";
+export declare type PageComponentType = typeof Page & {
+    Header: typeof PageHeader;
+    Content: typeof PageContent;
+    Body: typeof PageContent;
+    Footer: typeof PageFooter;
+};
+export type { PageProps, PageRenderMode } from "./Page";
+export type { PageHeaderProps } from "./PageHeader";
+export type { PageContentProps } from "./PageContent";
+export type { PageFooterProps } from "./PageFooter";
+declare const _default: PageComponentType;
+export default _default;

package/esm/Page/index.js

@@ -0,0 +1,9 @@
+import Page from './Page';
+import PageHeader from './PageHeader';
+import PageContent from './PageContent';
+import PageFooter from './PageFooter';
+Page.Header = PageHeader;
+Page.Content = PageContent;
+Page.Body = PageContent;
+Page.Footer = PageFooter;
+export default Page;

package/esm/Page/stories.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import Page from '.';
+import Button from '../Button';
+import Grid from '../Grid';
+import MockPage from '../MdxWidgets/MockPage';
+export default {
+  title: 'Layout/Page',
+  component: Page
+};
+export var Default = function Default() {
+  var Child = function Child() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page."));
+  };
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setVisible(true);
+    },
+    auto: true
+  }, "View Page"), /*#__PURE__*/React.createElement(MockPage, {
+    visible: visible,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Child, null)))));
+};
+export var Content = function Content() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      visible = _React$useState2[0],
+      setVisible = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      return setVisible(true);
+    },
+    auto: true
+  }, "Header, Body and Footer"), /*#__PURE__*/React.createElement(MockPage, {
+    visible: visible,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(Page, null, /*#__PURE__*/React.createElement(Page.Header, null, /*#__PURE__*/React.createElement("h2", null, "Header")), /*#__PURE__*/React.createElement(Page.Content, null, /*#__PURE__*/React.createElement("h2", null, "Hi my dear!"), /*#__PURE__*/React.createElement("p", null, "This is an example to show the body of a page.")), /*#__PURE__*/React.createElement(Page.Footer, null, /*#__PURE__*/React.createElement("h2", null, "Footer"))))));
+};

package/esm/Pagination/Pagination.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Props {
+    page?: number;
+    initialPage?: number;
+    count?: number;
+    limit?: number;
+    onChange?: (val: number) => void;
+    className?: string;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export declare type PaginationProps = Props & NativeAttrs;
+declare const Pagination: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & import("../use-scale").ScaleProps, string | number> & React.RefAttributes<unknown>>;
+export default Pagination;

package/esm/Pagination/Pagination.js

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["page", "initialPage", "count", "limit", "children", "onChange", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo } from 'react';
+import PaginationPrevious from './PaginationPrevious';
+import PaginationNext from './PaginationNext';
+import PaginationPages from './PaginationPages';
+import { PaginationContext } from './PaginationContext';
+import useCurrentState from '../utils/use-current-state';
+import { pickChild } from '../utils/collections';
+import useScale, { withScale } from '../use-scale';
+
+function PaginationComponent(_ref) {
+  var customPage = _ref.page,
+      _ref$initialPage = _ref.initialPage,
+      initialPage = _ref$initialPage === void 0 ? 1 : _ref$initialPage,
+      _ref$count = _ref.count,
+      count = _ref$count === void 0 ? 1 : _ref$count,
+      _ref$limit = _ref.limit,
+      limit = _ref$limit === void 0 ? 7 : _ref$limit,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useCurrentState = useCurrentState(initialPage),
+      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+      page = _useCurrentState2[0],
+      setPage = _useCurrentState2[1],
+      pageRef = _useCurrentState2[2];
+
+  var _pickChild = pickChild(children, PaginationPrevious),
+      _pickChild2 = _slicedToArray(_pickChild, 2),
+      prevChildren = _pickChild2[1];
+
+  var _pickChild3 = pickChild(children, PaginationNext),
+      _pickChild4 = _slicedToArray(_pickChild3, 2),
+      nextChildren = _pickChild4[1];
+
+  var _useMemo = useMemo(function () {
+    var hasChildren = function hasChildren(c) {
+      return React.Children.count(c) > 0;
+    };
+
+    var prevDefault = /*#__PURE__*/React.createElement(PaginationPrevious, null, "prev");
+    var nextDefault = /*#__PURE__*/React.createElement(PaginationNext, null, "next");
+    return [hasChildren(prevChildren) ? prevChildren : prevDefault, hasChildren(nextChildren) ? nextChildren : nextDefault];
+  }, [prevChildren, nextChildren]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      prevItem = _useMemo2[0],
+      nextItem = _useMemo2[1];
+
+  var update = function update(type) {
+    if (type === 'prev' && pageRef.current > 1) {
+      setPage(function (last) {
+        return last - 1;
+      });
+    }
+
+    if (type === 'next' && pageRef.current < count) {
+      setPage(function (last) {
+        return last + 1;
+      });
+    }
+  };
+
+  var values = useMemo(function () {
+    return {
+      isFirst: page <= 1,
+      isLast: page >= count,
+      update: update
+    };
+  }, [page, count]);
+  useEffect(function () {
+    onChange && onChange(page);
+  }, [onChange, page]);
+  useEffect(function () {
+    if (customPage !== undefined) {
+      setPage(customPage);
+    }
+  }, [customPage, setPage]);
+  return /*#__PURE__*/React.createElement(PaginationContext.Provider, {
+    value: values
+  }, /*#__PURE__*/React.createElement("nav", _extends({}, props, {
+    className: _JSXStyle.dynamic([["77524905", [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
+    count: count,
+    current: page,
+    limit: limit,
+    setPage: setPage
+  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "77524905",
+    dynamic: [SCALES.font(2), SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "nav.__jsx-style-dynamic-selector{font-variant:tabular-nums;font-feature-settings:'tnum';--pagination-size:".concat(SCALES.font(2), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector button:last-of-type{margin-right:0;}")));
+}
+
+PaginationComponent.displayName = 'BolioUIPagination';
+var Pagination = withScale(PaginationComponent);
+export default Pagination;

package/esm/Pagination/PaginationContext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const paginationUpdateTypes: ["prev", "next", "click"];
+export declare type PaginationUpdateType = typeof paginationUpdateTypes[number];
+export interface PaginationConfig {
+    isFirst?: boolean;
+    isLast?: boolean;
+    update?: (type: PaginationUpdateType) => void;
+}
+export declare const PaginationContext: React.Context<PaginationConfig>;
+export declare const usePaginationContext: () => PaginationConfig;
+export {};

package/esm/Pagination/PaginationEllipsis.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    isBefore?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare function PaginationEllipsis({ isBefore, onClick }: Props): JSX.Element;
+declare namespace PaginationEllipsis {
+    var displayName: string;
+}
+export default PaginationEllipsis;