@bolio-ui/core 2.0.0-alpha.1 → 3.0.0-alpha.0

package/esm/Modal/ModalAction.js

@@ -1,67 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "onClick", "passive", "disabled"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useImperativeHandle, useMemo, useRef } from 'react';
-import useTheme from '../use-theme';
-import { useModalContext } from './ModalContext';
-import Button from '../Button';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-var ModalActionComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    onClick = _ref.onClick,
-    _ref$passive = _ref.passive,
-    passive = _ref$passive === void 0 ? false : _ref$passive,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var btnRef = useRef(null);
-  var _useModalContext = useModalContext(),
-    _close = _useModalContext.close;
-  useImperativeHandle(ref, function () {
-    return btnRef.current;
-  });
-  var clickHandler = function clickHandler(event) {
-    if (disabled) return;
-    var actionEvent = Object.assign({}, event, {
-      close: function close() {
-        return _close && _close();
-      }
-    });
-    onClick && onClick(actionEvent);
-  };
-  var color = useMemo(function () {
-    return passive ? theme.palette.accents_5 : theme.palette.foreground;
-  }, [theme.palette, passive]);
-  var bgColor = useMemo(function () {
-    return disabled ? theme.palette.accents_1 : theme.palette.background;
-  }, [theme.palette, disabled]);
-  var _styles$className = {
-      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-        id: "1003252629",
-        dynamic: [SCALES.font(0.75), color, theme.palette.background, SCALES.height(3.5625), disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1]
-      }, "button.btn.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(0.75), ";border:none;color:").concat(color, ";background-color:").concat(theme.palette.background, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:1;-ms-flex:1;flex:1;height:").concat(SCALES.height(3.5625), ";border-radius:0;min-width:0;}button.btn.__jsx-style-dynamic-selector:hover,button.btn.__jsx-style-dynamic-selector:focus{color:").concat(disabled ? color : theme.palette.foreground, ";background-color:").concat(disabled ? bgColor : theme.palette.accents_1, ";}")),
-      className: _JSXStyle.dynamic([["1003252629", [SCALES.font(0.75), color, theme.palette.background, SCALES.height(3.5625), disabled ? color : theme.palette.foreground, disabled ? bgColor : theme.palette.accents_1]]])
-    },
-    resolveClassName = _styles$className.className,
-    styles = _styles$className.styles;
-  var classes = useClasses(resolveClassName, className);
-  var overrideProps = _extends({}, props, {
-    effect: false,
-    ref: btnRef
-  });
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    className: classes,
-    onClick: clickHandler,
-    disabled: disabled
-  }, overrideProps), children, styles);
-});
-ModalActionComponent.displayName = 'BolioUIModalAction';
-var ModalAction = withScale(ModalActionComponent);
-export default ModalAction;

package/esm/Modal/ModalActions.js

@@ -1,34 +0,0 @@
-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"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useRef, useState } from 'react';
-import useTheme from '../use-theme';
-var ModalActionsComponent = function ModalActionsComponent(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var ref = useRef(null);
-  var _useState = useState('auto'),
-    _useState2 = _slicedToArray(_useState, 2),
-    height = _useState2[0],
-    setHeight = _useState2[1];
-  useEffect(function () {
-    if (!ref.current) return;
-    setHeight("".concat(ref.current.clientHeight, "px"));
-  }, [ref]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]])
-  }), /*#__PURE__*/React.createElement("footer", _extends({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]]) + " " + (props && props.className != null && props.className || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2914444644",
-    dynamic: [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]
-  }, "footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;width:100%;height:auto;position:absolute;bottom:0;left:0;right:0;border-top:1px solid ".concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}footer.__jsx-style-dynamic-selector>button.btn + button.btn{border-left:1px solid ").concat(theme.palette.border, ";}div.__jsx-style-dynamic-selector{height:").concat(height, ";-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}")));
-};
-ModalActionsComponent.displayName = 'BolioUIModalActions';
-var ModalActions = /*#__PURE__*/React.memo(ModalActionsComponent);
-export default ModalActions;

package/esm/Modal/ModalContent.js

@@ -1,24 +0,0 @@
-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/style";
-import React from 'react';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-function ModalContentComponent(_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(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["588605445", [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.3125), SCALES.pr(1.3125), SCALES.pb(0.6625), SCALES.pl(1.3125), SCALES.mt(0), SCALES.mr(0, 'calc(var(--modal-wrapper-padding-right) * -1)'), SCALES.mb(0), SCALES.ml(0, 'calc(var(--modal-wrapper-padding-left) * -1)')]]]) + " " + (props && props.className != null && props.className || useClasses('content', className) || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "588605445",
-    dynamic: [SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(1.3125), SCALES.pr(1.3125), SCALES.pb(0.6625), SCALES.pl(1.3125), SCALES.mt(0), SCALES.mr(0, 'calc(var(--modal-wrapper-padding-right) * -1)'), SCALES.mb(0), SCALES.ml(0, 'calc(var(--modal-wrapper-padding-left) * -1)')]
-  }, ".content.__jsx-style-dynamic-selector{position:relative;text-align:left;font-size:".concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3125), " ").concat(SCALES.pr(1.3125), " ").concat(SCALES.pb(0.6625), " ").concat(SCALES.pl(1.3125), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0, 'calc(var(--modal-wrapper-padding-right) * -1)'), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0, 'calc(var(--modal-wrapper-padding-left) * -1)'), ";}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}")));
-}
-ModalContentComponent.displayName = 'BolioUIModalContent';
-var ModalContent = withScale(ModalContentComponent);
-export default ModalContent;

package/esm/Modal/ModalContext.js

@@ -1,6 +0,0 @@
-import React from 'react';
-var defaultContext = {};
-export var ModalContext = /*#__PURE__*/React.createContext(defaultContext);
-export var useModalContext = function useModalContext() {
-  return React.useContext(ModalContext);
-};

package/esm/Modal/ModalSubtitle.js

@@ -1,30 +0,0 @@
-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/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import { useModalContext } from './ModalContext';
-function ModalSubtitleComponent(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useModalContext = useModalContext(),
-    descriptionId = _useModalContext.descriptionId;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", _extends({
-    id: descriptionId
-  }, props, {
-    className: _JSXStyle.dynamic([["1585744472", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, '1.5em'), 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: "1585744472",
-    dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, '1.5em'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "p.__jsx-style-dynamic-selector{font-weight:normal;display:inline-block;text-align:center;word-break:break-word;text-transform:uppercase;color:".concat(theme.palette.accents_5, ";font-size:").concat(SCALES.font(0.875), ";line-height:1.5em;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, '1.5em'), ";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), ";}")));
-}
-ModalSubtitleComponent.displayName = 'BolioUIModalSubtitle';
-var ModalSubtitle = withScale(ModalSubtitleComponent);
-export default ModalSubtitle;

package/esm/Modal/ModalTitle.js

@@ -1,30 +0,0 @@
-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/style";
-import React from 'react';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import { useModalContext } from './ModalContext';
-function ModalTitleComponent(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var _useModalContext = useModalContext(),
-    titleId = _useModalContext.titleId;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", _extends({
-    id: titleId
-  }, props, {
-    className: _JSXStyle.dynamic([["4121803681", [SCALES.font(1.5), theme.palette.foreground, 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 || "")
-  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4121803681",
-    dynamic: [SCALES.font(1.5), theme.palette.foreground, 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)]
-  }, "h2.__jsx-style-dynamic-selector{line-height:1.6;font-weight:normal;text-align:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-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;word-break:break-word;text-transform:capitalize;font-size:".concat(SCALES.font(1.5), ";color:").concat(theme.palette.foreground, ";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), ";}")));
-}
-ModalTitleComponent.displayName = 'BolioUIModalTitle';
-var ModalTitle = withScale(ModalTitleComponent);
-export default ModalTitle;

package/esm/Modal/ModalWrapper.js

@@ -1,76 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "children", "visible"];
-import _JSXStyle from "styled-jsx/style";
-import React, { useEffect, useImperativeHandle, useRef } from 'react';
-import useTheme from '../use-theme';
-import CssTransition from '../Shared/css-transition';
-import { isChildElement } from '../utils/collections';
-import useScale from '../use-scale';
-import useClasses from '../use-classes';
-var ModalWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
-    children = _ref.children,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? false : _ref$visible,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var modalContent = useRef(null);
-  useImperativeHandle(ref, function () {
-    return modalContent.current;
-  });
-  var tabStart = useRef(null);
-  var tabEnd = useRef(null);
-  useEffect(function () {
-    if (!visible) return;
-    var activeElement = document.activeElement;
-    var isChild = isChildElement(modalContent.current, activeElement);
-    if (isChild) return;
-    tabStart.current && tabStart.current.focus();
-  }, [visible]);
-  var onKeyDown = function onKeyDown(event) {
-    var isTabDown = event.keyCode === 9;
-    if (!visible || !isTabDown) return;
-    var activeElement = document.activeElement;
-    if (event.shiftKey) {
-      if (activeElement === tabStart.current) {
-        tabEnd.current && tabEnd.current.focus();
-      }
-    } else {
-      if (activeElement === tabEnd.current) {
-        tabStart.current && tabStart.current.focus();
-      }
-    }
-  };
-  return /*#__PURE__*/React.createElement(CssTransition, {
-    name: "wrapper",
-    visible: visible,
-    clearTime: 300
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    role: "dialog",
-    "aria-modal": "true",
-    tabIndex: -1,
-    onKeyDown: onKeyDown,
-    ref: modalContent
-  }, props, {
-    className: _JSXStyle.dynamic([["212284330", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, 'auto'), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('wrapper', className) || "")
-  }), /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    "aria-hidden": "true",
-    ref: tabStart,
-    className: _JSXStyle.dynamic([["212284330", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, 'auto'), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "hide-tab"
-  }), children, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0,
-    "aria-hidden": "true",
-    ref: tabEnd,
-    className: _JSXStyle.dynamic([["212284330", [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, 'auto'), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "hide-tab"
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "212284330",
-    dynamic: [theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.expressiveness.shadowLarge, SCALES.font(1), SCALES.height(1, 'auto'), SCALES.pl(1.3125), SCALES.pr(1.3125), SCALES.pt(1.3125), SCALES.pb(1.3125), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, ".wrapper.__jsx-style-dynamic-selector{max-width:100%;vertical-align:middle;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;box-sizing:border-box;background-color:".concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";border-radius:").concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";opacity:0;outline:none;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, -webkit-transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1) 0s, transform 0.35s cubic-bezier(0.4,0,0.2,1) 0s;width:100%;font-size:").concat(SCALES.font(1), ";height:").concat(SCALES.height(1, 'auto'), ";--modal-wrapper-padding-left:").concat(SCALES.pl(1.3125), ";--modal-wrapper-padding-right:").concat(SCALES.pr(1.3125), ";padding:").concat(SCALES.pt(1.3125), " var(--modal-wrapper-padding-right) ").concat(SCALES.pb(1.3125), " var(--modal-wrapper-padding-left);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper-enter.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}.wrapper-enter-active.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.wrapper-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:translate3d(0px,-30px,0px);-ms-transform:translate3d(0px,-30px,0px);transform:translate3d(0px,-30px,0px);}.hide-tab.__jsx-style-dynamic-selector{outline:none;overflow:hidden;width:0;height:0;opacity:0;}"))));
-});
-ModalWrapper.displayName = 'BolioUIModalWrapper';
-export default ModalWrapper;

package/esm/Next/StyledJsxRegistry.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const StyledJsxRegistry: React.FC<React.PropsWithChildren<unknown>>;
-export default StyledJsxRegistry;

package/esm/Next/StyledJsxRegistry.js

@@ -1,26 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore next/navigation only exists in Next.js 13 and later
-import { useServerInsertedHTML } from 'next/navigation';
-import { StyleRegistry, createStyleRegistry } from 'styled-jsx';
-
-// Collects the styles rendered on the server and inserts them in the HTML,
-// which the App Router does not do for styled-jsx on its own.
-var StyledJsxRegistry = function StyledJsxRegistry(_ref) {
-  var children = _ref.children;
-  var _useState = useState(function () {
-      return createStyleRegistry();
-    }),
-    _useState2 = _slicedToArray(_useState, 1),
-    registry = _useState2[0];
-  useServerInsertedHTML(function () {
-    var styles = registry.styles();
-    registry.flush();
-    return /*#__PURE__*/React.createElement(React.Fragment, null, styles);
-  });
-  return /*#__PURE__*/React.createElement(StyleRegistry, {
-    registry: registry
-  }, children);
-};
-export default StyledJsxRegistry;

package/esm/Next/index.d.ts

@@ -1,3 +0,0 @@
-import StyledJsxRegistry from './StyledJsxRegistry';
-export { StyledJsxRegistry };
-export default StyledJsxRegistry;

package/esm/Next/index.js

@@ -1,4 +0,0 @@
-'use client';
-import StyledJsxRegistry from './StyledJsxRegistry';
-export { StyledJsxRegistry };
-export default StyledJsxRegistry;

package/esm/Note/Note.js

@@ -1,67 +0,0 @@
-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/style";
-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 var NoteComponent = /*#__PURE__*/React.forwardRef(function (_ref, 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({
-    ref: ref
-  }, props, {
-    className: _JSXStyle.dynamic([["3558170892", [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([["3558170892", [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([["3558170892", [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: "3558170892",
-    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/Page/Page.js

@@ -1,80 +0,0 @@
-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/style";
-import React, { useEffect, useMemo, useState } from 'react';
-import { tuple } from '../utils/prop-types';
-import useTheme from '../use-theme';
-import PageContent from './PageContent';
-import { hasChild } from '../utils/collections';
-import useScale, { withScale } from '../use-scale';
-var renderMode = tuple('default', 'effect', 'effect-seo');
-var DotStyles = function DotStyles(_ref) {
-  var dotSpace = _ref.dotSpace,
-    dotSize = _ref.dotSize;
-  var background = useMemo(function () {
-    return {
-      position: "calc(".concat(dotSpace, " * 25px)"),
-      size: "calc(".concat(dotSpace, " * 50px)")
-    };
-  }, [dotSpace]);
-  return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2593286177", [dotSize, dotSize, background.position, background.position, background.size, background.size]]])
-  }, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2593286177",
-    dynamic: [dotSize, dotSize, background.position, background.position, background.size, background.size]
-  }, "body{background-image:radial-gradient(#e3e3e3 ".concat(dotSize, ",transparent 0), radial-gradient(#e3e3e3 ").concat(dotSize, ",transparent 0);background-position:0 0, ").concat(background.position, " ").concat(background.position, ";background-attachment:fixed;background-size:").concat(background.size, " ").concat(background.size, ";}")));
-};
-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);
-  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-1746763067" + " " + "hidden"
-    }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "1746763067"
-    }, ".hidden.jsx-1746763067{opacity:0;display:none;}"));
-  }
-  var hasContent = hasChild(children, PageContent);
-  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: "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.js

@@ -1,22 +0,0 @@
-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/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);
-  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/PageFooter.js

@@ -1,21 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children"];
-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);
-  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/PageHeader.js

@@ -1,29 +0,0 @@
-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/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);
-  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;