@bolio-ui/core 1.1.8 → 2.0.0-alpha.0

package/esm/Page/Page.d.ts

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

package/esm/Page/Page.js

@@ -2,7 +2,7 @@ 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 _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo, useState } from 'react';
 import { tuple } from '../utils/prop-types';
 import useTheme from '../use-theme';
@@ -10,10 +10,9 @@ 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;
+    dotSize = _ref.dotSize;
   var background = useMemo(function () {
     return {
       position: "calc(".concat(dotSpace, " * 25px)"),
@@ -27,62 +26,55 @@ var DotStyles = function DotStyles(_ref) {
     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 PageComponent = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   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);
-
+    _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;
-
+    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];
-
+    _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"
+      className: "jsx-1746763067" + " " + "hidden"
     }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "3942095687"
-    }, ".hidden.jsx-3942095687{opacity:0;display:none;}"));
+      id: "1746763067"
+    }, ".hidden.jsx-1746763067{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 || "")
+  return /*#__PURE__*/React.createElement("section", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["891651194", [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",
+    id: "891651194",
     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

@@ -2,7 +2,9 @@ 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<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageContentProps = Props & NativeAttrs;
+declare const PageContent: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default PageContent;

package/esm/Page/PageContent.js

@@ -1,18 +1,15 @@
 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 _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-
 function PageContentComponent(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    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, {
@@ -20,7 +17,6 @@ function PageContentComponent(_ref) {
     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/PageFooter.d.ts

@@ -2,7 +2,9 @@ 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<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageFooterProps = Props & NativeAttrs;
+declare const PageFooter: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default PageFooter;

package/esm/Page/PageFooter.js

@@ -1,17 +1,14 @@
 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 _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-
 function PageFooterComponent(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    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, {
@@ -19,7 +16,6 @@ function PageFooterComponent(_ref) {
     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/PageHeader.d.ts

@@ -3,7 +3,9 @@ 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<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageHeaderProps = Props & NativeAttrs;
+declare const PageHeader: import("../use-scale/with-scale").ScaleComponent<unknown, Props & NativeAttrs & {
+    children?: React.ReactNode;
+}>;
 export default PageHeader;

package/esm/Page/PageHeader.js

@@ -1,22 +1,19 @@
 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 _JSXStyle from "styled-jsx/style";
 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);
-
+    _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;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses({
     center: center
   }, className);
@@ -27,7 +24,6 @@ function PageHeaderComponent(_ref) {
     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/index.d.ts

@@ -1,16 +1,16 @@
-import Page from "./Page";
-import PageHeader from "./PageHeader";
-import PageContent from "./PageContent";
-import PageFooter from "./PageFooter";
-export declare type PageComponentType = typeof Page & {
+import Page from './Page';
+import PageHeader from './PageHeader';
+import PageContent from './PageContent';
+import PageFooter from './PageFooter';
+export 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";
+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

@@ -1,3 +1,4 @@
+'use client';
 import Page from './Page';
 import PageHeader from './PageHeader';
 import PageContent from './PageContent';

package/esm/Pagination/Pagination.d.ts

@@ -7,7 +7,9 @@ interface Props {
     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<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PaginationProps = Props & NativeAttrs;
+declare const Pagination: import("../use-scale/with-scale").ScaleComponent<HTMLElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>>;
 export default Pagination;

package/esm/Pagination/Pagination.js

@@ -2,7 +2,7 @@ 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 _JSXStyle from "styled-jsx/style";
 import React, { useEffect, useMemo } from 'react';
 import PaginationPrevious from './PaginationPrevious';
 import PaginationNext from './PaginationNext';
@@ -11,65 +11,55 @@ 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 PaginationComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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);
-
+    _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;
-
+    SCALES = _useScale.SCALES;
   var _useCurrentState = useCurrentState(initialPage),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      page = _useCurrentState2[0],
-      setPage = _useCurrentState2[1],
-      pageRef = _useCurrentState2[2];
-
+    _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];
-
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    prevChildren = _pickChild2[1];
   var _pickChild3 = pickChild(children, PaginationNext),
-      _pickChild4 = _slicedToArray(_pickChild3, 2),
-      nextChildren = _pickChild4[1];
-
+    _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 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,
@@ -87,19 +77,23 @@ function PaginationComponent(_ref) {
   }, [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, {
+  }, /*#__PURE__*/React.createElement("nav", _extends({
+    ref: ref,
+    "aria-label": "Pagination"
+  }, props, {
+    className: _JSXStyle.dynamic([["2367140580", [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 || "")
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: _JSXStyle.dynamic([["2367140580", [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)]]])
+  }, prevItem, /*#__PURE__*/React.createElement(PaginationPages, {
     count: count,
     current: page,
     limit: limit,
     setPage: setPage
-  }), nextItem), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "77524905",
+  }), nextItem)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2367140580",
     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;}")));
-}
-
+  }, "ul.__jsx-style-dynamic-selector{margin:0;padding:0;list-style:none;}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

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const paginationUpdateTypes: ["prev", "next", "click"];
-export declare type PaginationUpdateType = typeof paginationUpdateTypes[number];
+export type PaginationUpdateType = typeof paginationUpdateTypes[number];
 export interface PaginationConfig {
     isFirst?: boolean;
     isLast?: boolean;

package/esm/Pagination/PaginationEllipsis.d.ts

@@ -3,7 +3,7 @@ interface Props {
     isBefore?: boolean;
     onClick?: (e: React.MouseEvent) => void;
 }
-declare function PaginationEllipsis({ isBefore, onClick }: Props): JSX.Element;
+declare function PaginationEllipsis({ isBefore, onClick }: Props): React.JSX.Element;
 declare namespace PaginationEllipsis {
     var displayName: string;
 }

package/esm/Pagination/PaginationEllipsis.js

@@ -1,17 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useState } from 'react';
 import PaginationItem from './PaginationItem';
-
 function PaginationEllipsis(_ref) {
   var isBefore = _ref.isBefore,
-      _onClick = _ref.onClick;
-
+    _onClick = _ref.onClick;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showMore = _useState2[0],
-      setShowMore = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1];
   return /*#__PURE__*/React.createElement(PaginationItem, {
     onClick: function onClick(e) {
       return _onClick && _onClick(e);
@@ -68,6 +65,5 @@ function PaginationEllipsis(_ref) {
     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/PaginationItem.d.ts

@@ -4,9 +4,9 @@ interface Props {
     disabled?: boolean;
     onClick?: (e: React.MouseEvent) => void;
 }
-declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
-export declare type PaginationItemProps = Props & NativeAttrs;
-declare function PaginationItem({ active, children, disabled, onClick, ...props }: PaginationItemProps): JSX.Element;
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export type PaginationItemProps = Props & NativeAttrs;
+declare function PaginationItem({ active, children, disabled, onClick, ...props }: PaginationItemProps): React.JSX.Element;
 declare namespace PaginationItem {
     var displayName: string;
 }

package/esm/Pagination/PaginationItem.js

@@ -2,41 +2,36 @@ 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 _JSXStyle from "styled-jsx/style";
 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);
-
+    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];
-
+      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({
+    "aria-current": active ? 'page' : undefined,
     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 || "")
@@ -45,6 +40,5 @@ function PaginationItem(_ref) {
     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/PaginationNext.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-export declare type PaginationNextProps = React.ButtonHTMLAttributes<any>;
-declare function PaginationNext({ children, ...props }: PaginationNextProps): JSX.Element;
+export type PaginationNextProps = React.ButtonHTMLAttributes<any>;
+declare function PaginationNext({ children, ...props }: PaginationNextProps): React.JSX.Element;
 declare namespace PaginationNext {
     var displayName: string;
 }

package/esm/Pagination/PaginationNext.js

@@ -4,15 +4,12 @@ var _excluded = ["children"];
 import React from 'react';
 import PaginationItem from './PaginationItem';
 import { usePaginationContext } from './PaginationContext';
-
 function PaginationNext(_ref) {
   var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    props = _objectWithoutProperties(_ref, _excluded);
   var _usePaginationContext = usePaginationContext(),
-      update = _usePaginationContext.update,
-      isLast = _usePaginationContext.isLast;
-
+    update = _usePaginationContext.update,
+    isLast = _usePaginationContext.isLast;
   return /*#__PURE__*/React.createElement(PaginationItem, _extends({
     onClick: function onClick() {
       return update && update('next');
@@ -20,6 +17,5 @@ function PaginationNext(_ref) {
     disabled: isLast
   }, props), children);
 }
-
 PaginationNext.displayName = 'BolioUIPaginationNext';
 export default PaginationNext;