@bolio-ui/core 1.0.0

package/esm/note/note.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "type", "label", "filled", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+var getStatusColor = function getStatusColor(type, filled, theme) {
+  var colors = {
+    "default": theme.palette.accents_6,
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error,
+    info: theme.palette.info
+  };
+  var statusColor = colors[type];
+  if (!filled) return {
+    color: statusColor || theme.palette.foreground,
+    borderColor: statusColor || theme.palette.border,
+    bgColor: theme.palette.background
+  };
+  var filledColor = statusColor ? 'white' : theme.palette.background;
+  return {
+    color: filledColor,
+    borderColor: statusColor || theme.palette.foreground,
+    bgColor: statusColor || theme.palette.foreground
+  };
+};
+
+export function NoteComponent(_ref) {
+  var children = _ref.children,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'note' : _ref$label,
+      _ref$filled = _ref.filled,
+      filled = _ref$filled === void 0 ? false : _ref$filled,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useMemo = useMemo(function () {
+    return getStatusColor(type, filled, theme);
+  }, [type, filled, theme]),
+      color = _useMemo.color,
+      borderColor = _useMemo.borderColor,
+      bgColor = _useMemo.bgColor;
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["114493384", [borderColor, color, bgColor, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(1.32), SCALES.pb(0.667), SCALES.pl(1.32), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('note', className) || "")
+  }), label && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["114493384", [borderColor, color, bgColor, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(1.32), SCALES.pb(0.667), SCALES.pl(1.32), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "label"
+  }, /*#__PURE__*/React.createElement("b", {
+    className: _JSXStyle.dynamic([["114493384", [borderColor, color, bgColor, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(1.32), SCALES.pb(0.667), SCALES.pl(1.32), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, label, ":")), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "114493384",
+    dynamic: [borderColor, color, bgColor, theme.layout.radius, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.667), SCALES.pr(1.32), SCALES.pb(0.667), SCALES.pl(1.32), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".note.__jsx-style-dynamic-selector{line-height:1.8;border:1px solid ".concat(borderColor, ";color:").concat(color, ";background-color:").concat(bgColor, ";border-radius:").concat(theme.layout.radius, ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.667), " ").concat(SCALES.pr(1.32), " ").concat(SCALES.pb(0.667), " ").concat(SCALES.pl(1.32), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.note.__jsx-style-dynamic-selector p{margin:0;}.label.__jsx-style-dynamic-selector{text-transform:uppercase;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1.5;padding-right:0.38em;}")));
+}
+NoteComponent.displayName = 'BolioUINote';
+var Note = withScale(NoteComponent);
+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/index.js

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

package/esm/page/page-content.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+
+function PageContentComponent(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("main", _extends({}, props, {
+    className: _JSXStyle.dynamic([["1765662596", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), 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 || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1765662596",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "main.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, '100%'), ";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), ";}")));
+}
+
+PageContentComponent.displayName = 'BolioUIPageContent';
+var PageContent = withScale(PageContentComponent);
+export default PageContent;

package/esm/page/page-footer.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+
+function PageFooterComponent(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
+    className: _JSXStyle.dynamic([["4216345865", [SCALES.font(1), SCALES.width(1, '100%'), 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 || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4216345865",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), 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)]
+  }, "footer.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";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), ";}")));
+}
+
+PageFooterComponent.displayName = 'BolioUIPageFooter';
+var PageFooter = withScale(PageFooterComponent);
+export default PageFooter;

package/esm/page/page-header.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "center", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function PageHeaderComponent(_ref) {
+  var children = _ref.children,
+      _ref$center = _ref.center,
+      center = _ref$center === void 0 ? false : _ref$center,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var classes = useClasses({
+    center: center
+  }, className);
+  return /*#__PURE__*/React.createElement("header", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3497030820", [SCALES.font(1), SCALES.width(1, '100%'), 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 || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3497030820",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), 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)]
+  }, "header.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";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), ";}.center.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
+}
+
+PageHeaderComponent.displayName = 'BolioUIPageHeader';
+var PageHeader = withScale(PageHeaderComponent);
+export default PageHeader;

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 './page-content';
+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/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 '../mdx-widgets/mock-page';
+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/index.js

@@ -0,0 +1,6 @@
+import Pagination from './pagination';
+import PaginationPrevious from './pagination-previous';
+import PaginationNext from './pagination-next';
+Pagination.Previous = PaginationPrevious;
+Pagination.Next = PaginationNext;
+export default Pagination;

package/esm/pagination/pagination-context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { tuple } from '../utils/prop-types';
+var paginationUpdateTypes = tuple('prev', 'next', 'click');
+var defaultContext = {};
+export var PaginationContext = /*#__PURE__*/React.createContext(defaultContext);
+export var usePaginationContext = function usePaginationContext() {
+  return React.useContext(PaginationContext);
+};

package/esm/pagination/pagination-ellipsis.js

@@ -0,0 +1,73 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState } from 'react';
+import PaginationItem from './pagination-item';
+
+function PaginationEllipsis(_ref) {
+  var isBefore = _ref.isBefore,
+      _onClick = _ref.onClick;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showMore = _useState2[0],
+      setShowMore = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(PaginationItem, {
+    onClick: function onClick(e) {
+      return _onClick && _onClick(e);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setShowMore(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowMore(false);
+    }
+  }, showMore ? /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]]) + " " + "more"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M13 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 17l5-5-5-5",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })) : /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "19",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5",
+    cy: "12",
+    r: "1",
+    fill: "currentColor",
+    className: _JSXStyle.dynamic([["2928474255", [isBefore ? '180deg' : '0deg']]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2928474255",
+    dynamic: [isBefore ? '180deg' : '0deg']
+  }, "svg.__jsx-style-dynamic-selector{color:currentColor;stroke:currentColor;width:1em;height:1em;}.more.__jsx-style-dynamic-selector{-webkit-transform:rotate(".concat(isBefore ? '180deg' : '0deg', ");-ms-transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");transform:rotate(").concat(isBefore ? '180deg' : '0deg', ");}")));
+}
+
+PaginationEllipsis.displayName = 'BolioUIPaginationEllipsis';
+export default PaginationEllipsis;

package/esm/pagination/pagination-item.js

@@ -0,0 +1,50 @@
+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 = ["active", "children", "disabled", "onClick"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { addColorAlpha } from '../utils/color';
+import useClasses from '../use-classes';
+
+function PaginationItem(_ref) {
+  var active = _ref.active,
+      children = _ref.children,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useMemo = useMemo(function () {
+    return [addColorAlpha(theme.palette.primary, 0.1), addColorAlpha(theme.palette.primary, 0.8)];
+  }, [theme.palette.primary]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      hover = _useMemo2[0],
+      activeHover = _useMemo2[1];
+
+  var classes = useClasses({
+    active: active,
+    disabled: disabled
+  });
+
+  var clickHandler = function clickHandler(event) {
+    if (disabled) return;
+    onClick && onClick(event);
+  };
+
+  return /*#__PURE__*/React.createElement("li", {
+    className: _JSXStyle.dynamic([["32129165", [theme.palette.primary, theme.layout.radius, theme.palette.background, hover, theme.palette.primary, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]])
+  }, /*#__PURE__*/React.createElement("button", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["32129165", [theme.palette.primary, theme.layout.radius, theme.palette.background, hover, theme.palette.primary, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "32129165",
+    dynamic: [theme.palette.primary, theme.layout.radius, theme.palette.background, hover, theme.palette.primary, theme.palette.background, theme.expressiveness.shadowSmall, activeHover, theme.expressiveness.shadowMedium, theme.palette.accents_4, theme.palette.accents_2]
+  }, "li.__jsx-style-dynamic-selector{margin-right:0.428em;display:inline-block;}button.__jsx-style-dynamic-selector{border:none;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;box-sizing:border-box;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;text-align:center;vertical-align:middle;box-shadow:none;outline:none;height:var(--pagination-size);min-width:var(--pagination-size);font-size:inherit;cursor:pointer;color:".concat(theme.palette.primary, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(theme.palette.background, ";-webkit-transition:all linear 200ms 0ms;transition:all linear 200ms 0ms;}button.__jsx-style-dynamic-selector:hover{background-color:").concat(hover, ";}.active.__jsx-style-dynamic-selector{font-weight:bold;background-color:").concat(theme.palette.primary, ";color:").concat(theme.palette.background, ";box-shadow:").concat(theme.expressiveness.shadowSmall, ";}.active.__jsx-style-dynamic-selector:hover{background-color:").concat(activeHover, ";box-shadow:").concat(theme.expressiveness.shadowMedium, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}.disabled.__jsx-style-dynamic-selector:hover{background-color:").concat(theme.palette.accents_2, ";}button.__jsx-style-dynamic-selector svg{width:1.3em;height:1.3em;}")));
+}
+
+PaginationItem.displayName = 'BolioUIPaginationItem';
+export default PaginationItem;

package/esm/pagination/pagination-next.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import PaginationItem from './pagination-item';
+import { usePaginationContext } from './pagination-context';
+
+function PaginationNext(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _usePaginationContext = usePaginationContext(),
+      update = _usePaginationContext.update,
+      isLast = _usePaginationContext.isLast;
+
+  return /*#__PURE__*/React.createElement(PaginationItem, _extends({
+    onClick: function onClick() {
+      return update && update('next');
+    },
+    disabled: isLast
+  }, props), children);
+}
+
+PaginationNext.displayName = 'BolioUIPaginationNext';
+export default PaginationNext;

package/esm/pagination/pagination-pages.js

@@ -0,0 +1,90 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useMemo } from 'react';
+import PaginationItem from './pagination-item';
+import PaginationEllipsis from './pagination-ellipsis';
+
+function PaginationPages(_ref) {
+  var limit = _ref.limit,
+      count = _ref.count,
+      current = _ref.current,
+      setPage = _ref.setPage;
+  var showPages = useMemo(function () {
+    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
+    return oddLimit - 2;
+  }, [limit]);
+  var middleNumber = (showPages + 1) / 2;
+
+  var _useMemo = useMemo(function () {
+    var showEllipsis = count > limit;
+    return [showEllipsis && current > middleNumber + 1, showEllipsis && current < count - middleNumber];
+  }, [current, middleNumber, count, limit]),
+      _useMemo2 = _slicedToArray(_useMemo, 2),
+      showBeforeEllipsis = _useMemo2[0],
+      showAfterEllipsis = _useMemo2[1];
+
+  var pagesArray = useMemo(function () {
+    return _toConsumableArray(new Array(showPages));
+  }, [showPages]);
+  var renderItem = useCallback(function (value, active) {
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-item-".concat(value),
+      active: value === active,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  }, [setPage]);
+  var startPages = pagesArray.map(function (_, index) {
+    var value = index + 2;
+    return renderItem(value, current);
+  });
+  var middlePages = pagesArray.map(function (_, index) {
+    var middleIndexNumber = middleNumber - (index + 1);
+    var value = current - middleIndexNumber;
+    return /*#__PURE__*/React.createElement(PaginationItem, {
+      key: "pagination-middle-".concat(index),
+      active: index + 1 === middleNumber,
+      onClick: function onClick() {
+        return setPage(value);
+      }
+    }, value);
+  });
+  var endPages = pagesArray.map(function (_, index) {
+    var value = count - (showPages - index);
+    return renderItem(value, current);
+  });
+
+  if (count <= limit) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
+      var value = index + 1;
+      return /*#__PURE__*/React.createElement(PaginationItem, {
+        key: "pagination-item-".concat(value),
+        active: value === current,
+        onClick: function onClick() {
+          return setPage(value);
+        }
+      }, value);
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, current), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-before",
+    isBefore: true,
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last - 5 >= 1 ? last - 5 : 1;
+      });
+    }
+  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
+    key: "pagination-ellipsis-after",
+    onClick: function onClick() {
+      return setPage(function (last) {
+        return last + 5 <= count ? last + 5 : count;
+      });
+    }
+  }), renderItem(count, current));
+}
+
+PaginationPages.displayName = 'BolioUIPaginationPages';
+export default PaginationPages;