@helpdice/ui 1.0.1 → 1.0.2

package/esm/note/note.js

@@ -0,0 +1,62 @@
+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 = {
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    error: theme.palette.error
+  };
+  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 var NoteComponent = 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([["1082065680", [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([["1082065680", [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([["1082065680", [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: "1082065680",
+    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 = 'Note';
+var Note = withScale(NoteComponent);
+export default Note;

package/esm/page/index.d.ts

@@ -0,0 +1,16 @@
+import Page from "./page";
+import PageHeader from "./page-header";
+import PageContent from "./page-content";
+import PageFooter from "./page-footer";
+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 "./page-header";
+export type { PageContentProps } from "./page-content";
+export type { PageFooterProps } from "./page-footer";
+declare const _default: PageComponentType;
+export default _default;

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.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageContentProps = Props & NativeAttrs;
+declare const PageContent: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default PageContent;

package/esm/page/page-content.js

@@ -0,0 +1,23 @@
+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';
+var PageContentComponent = function PageContentComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _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([["3887979816", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(3.125), SCALES.pr(0), SCALES.pb(3.125), 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: "3887979816",
+    dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, '100%'), SCALES.pt(3.125), SCALES.pr(0), SCALES.pb(3.125), 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(3.125), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(3.125), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+PageContentComponent.displayName = 'PageContent';
+var PageContent = withScale(PageContentComponent);
+export default PageContent;

package/esm/page/page-footer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageFooterProps = Props & NativeAttrs;
+declare const PageFooter: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default PageFooter;

package/esm/page/page-footer.js

@@ -0,0 +1,21 @@
+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';
+var PageFooterComponent = 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([["3447440073", [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: "3447440073",
+    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{position:absolute;bottom:0;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 = 'PageFooter';
+var PageFooter = withScale(PageFooterComponent);
+export default PageFooter;

package/esm/page/page-header.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+interface Props {
+    center?: boolean;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageHeaderProps = Props & NativeAttrs;
+declare const PageHeader: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default PageHeader;

package/esm/page/page-header.js

@@ -0,0 +1,29 @@
+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';
+var PageHeaderComponent = 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([["3053482948", [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: "3053482948",
+    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 = 'PageHeader';
+var PageHeader = withScale(PageHeaderComponent);
+export default PageHeader;

package/esm/page/page.d.ts

@@ -0,0 +1,51 @@
+import React, { CSSProperties } from 'react';
+declare const renderMode: ["default", "effect", "effect-seo"];
+export type PageRenderMode = typeof renderMode[number];
+interface Props {
+    render?: PageRenderMode;
+    dotBackdrop?: boolean;
+    dotSize?: CSSProperties['fontSize'];
+    dotSpace?: number;
+}
+export type DotStylesProps = {
+    dotSize: CSSProperties['fontSize'];
+    dotSpace: number;
+};
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type PageProps = Props & NativeAttrs;
+declare const Page: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Page;

package/esm/page/page.js

@@ -0,0 +1,80 @@
+"use client";
+
+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([["934717826", [dotSize, dotSize, background.position, background.position, background.size, background.size]]])
+  }, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "934717826",
+    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, ";}")));
+};
+var PageComponent = 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([["1515698274", [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: "1515698274",
+    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), ";width:").concat(SCALES.width(1, 'calc(100% - 100pt)'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(1.34), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(1.34), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'auto'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'auto'), ";}")));
+};
+PageComponent.displayName = 'Page';
+var Page = withScale(PageComponent);
+export default Page;

package/esm/pagination/index.d.ts

@@ -0,0 +1,12 @@
+import Pagination from "./pagination";
+import PaginationPrevious from "./pagination-previous";
+import PaginationNext from "./pagination-next";
+export type PaginationComponentType = typeof Pagination & {
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+};
+export type { PaginationProps } from "./pagination";
+export type { PaginationPreviousProps } from "./pagination-previous";
+export type { PaginationNextProps } from "./pagination-next";
+declare const _default: PaginationComponentType;
+export default _default;

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.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare const paginationUpdateTypes: ["prev", "next", "click"];
+export 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/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.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    isBefore?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+declare const PaginationEllipsis: React.FC<Props>;
+export default PaginationEllipsis;

package/esm/pagination/pagination-ellipsis.js

@@ -0,0 +1,69 @@
+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';
+var PaginationEllipsis = 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 = 'GeistPaginationEllipsis';
+export default PaginationEllipsis;

package/esm/pagination/pagination-item.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    active?: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+}
+type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>;
+export type PaginationItemProps = Props & NativeAttrs;
+declare const PaginationItem: React.FC<React.PropsWithChildren<PaginationItemProps>>;
+export default PaginationItem;

package/esm/pagination/pagination-item.js

@@ -0,0 +1,43 @@
+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';
+var PaginationItem = 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.success, 0.1), addColorAlpha(theme.palette.success, 0.8)];
+    }, [theme.palette.success]),
+    _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([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, 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([["1657796974", [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, 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: "1657796974",
+    dynamic: [theme.palette.success, theme.layout.radius, theme.palette.background, hover, theme.palette.success, 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.success, ";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.success, ";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 = 'GeistPaginationItem';
+export default PaginationItem;

package/esm/pagination/pagination-next.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type PaginationNextProps = React.ButtonHTMLAttributes<any>;
+declare const PaginationNext: React.FC<React.PropsWithChildren<PaginationNextProps>>;
+export default PaginationNext;

package/esm/pagination/pagination-next.js

@@ -0,0 +1,21 @@
+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';
+var PaginationNext = 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 = 'GeistPaginationNext';
+export default PaginationNext;