@bolio-ui/core 2.0.0-alpha.1 → 2.0.0-alpha.2

package/esm/chunk-JM3DV57W.js

@@ -0,0 +1,44 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+
+// core/Keyboard/Keyboard.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeyboardComponent = React.forwardRef(({
+  command = false,
+  shift = false,
+  option = false,
+  ctrl = false,
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs("kbd", { ref, ...props, className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    command && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]), children: "\u2318" }),
+    shift && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]), children: "\u21E7" }),
+    option && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]), children: "\u2325" }),
+    ctrl && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]), children: "\u2303" }),
+    children && /* @__PURE__ */ jsx("span", { className: _JSXStyle.dynamic([["4198515491", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]), children }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "4198515491", dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.layout.radius, theme.palette.accents_2, SCALES.font(0.875), SCALES.width(1, "fit-content"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0.34), SCALES.pb(0), SCALES.pl(0.34), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `kbd.__jsx-style-dynamic-selector{line-height:2em;text-align:center;display:inline-block;color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};font-family:${theme.font.sans};border-radius:${theme.layout.radius};border:1px solid ${theme.palette.accents_2};font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "fit-content")};height:${SCALES.height(1, "auto")};min-width:2em;min-height:2em;padding:${SCALES.pt(0)} ${SCALES.pr(0.34)} ${SCALES.pb(0)} ${SCALES.pl(0.34)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}span.__jsx-style-dynamic-selector{line-height:2em;font-size:1em;text-align:center;}span.__jsx-style-dynamic-selector+span.__jsx-style-dynamic-selector{margin-left:0.3em;}` })
+  ] });
+});
+KeyboardComponent.displayName = "BolioUIKeyboard";
+var Keyboard = with_scale_default(KeyboardComponent);
+var Keyboard_default = Keyboard;
+
+// core/Keyboard/index.ts
+var Keyboard_default2 = Keyboard_default;
+
+export {
+  Keyboard_default2 as Keyboard_default
+};

package/esm/chunk-K53ERLS7.js

@@ -0,0 +1,150 @@
+import {
+  use_body_scroll_default
+} from "./chunk-O3RTRCY5.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_current_state_default
+} from "./chunk-33BUV2RX.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Modal/ModalTitle.tsx
+import _JSXStyle from "styled-jsx/style";
+
+// core/Modal/ModalContext.ts
+import React from "react";
+var defaultContext = {};
+var ModalContext = React.createContext(defaultContext);
+var useModalContext = () => React.useContext(ModalContext);
+
+// core/Modal/ModalTitle.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ModalTitleComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    titleId
+  } = useModalContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("h2", { 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__ */ jsx(_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)], children: `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:${SCALES.font(1.5)};color:${theme.palette.foreground};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}` })
+  ] });
+}
+ModalTitleComponent.displayName = "BolioUIModalTitle";
+var ModalTitle = with_scale_default(ModalTitleComponent);
+var ModalTitle_default = ModalTitle;
+
+// core/Modal/ModalSubtitle.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ModalSubtitleComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    descriptionId
+  } = useModalContext();
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("p", { id: descriptionId, ...props, className: _JSXStyle2.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__ */ jsx2(_JSXStyle2, { 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)], children: `p.__jsx-style-dynamic-selector{font-weight:normal;display:inline-block;text-align:center;word-break:break-word;text-transform:uppercase;color:${theme.palette.accents_5};font-size:${SCALES.font(0.875)};line-height:1.5em;width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "1.5em")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}` })
+  ] });
+}
+ModalSubtitleComponent.displayName = "BolioUIModalSubtitle";
+var ModalSubtitle = with_scale_default(ModalSubtitleComponent);
+var ModalSubtitle_default = ModalSubtitle;
+
+// core/Modal/ModalContent.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ModalContentComponent({
+  className = "",
+  children,
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsx3("div", { ...props, className: _JSXStyle3.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 || use_classes_default("content", className) || ""), children }),
+    /* @__PURE__ */ jsx3(_JSXStyle3, { 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)")], children: `.content.__jsx-style-dynamic-selector{position:relative;text-align:left;font-size:${SCALES.font(1)};width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(1.3125)} ${SCALES.pr(1.3125)} ${SCALES.pb(0.6625)} ${SCALES.pl(1.3125)};margin:${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>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}` })
+  ] });
+}
+ModalContentComponent.displayName = "BolioUIModalContent";
+var ModalContent = with_scale_default(ModalContentComponent);
+var ModalContent_default = ModalContent;
+
+// core/utils/use-body-scroll.ts
+var use_body_scroll_default2 = use_body_scroll_default;
+
+// core/Shared/backdrop.tsx
+import _JSXStyle4 from "styled-jsx/style";
+import React2, { useRef } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function BackdropComponent({
+  children,
+  onClick = () => {
+  },
+  visible = false,
+  width,
+  onContentClick,
+  backdropClassName = "",
+  positionClassName = "",
+  layerClassName = "",
+  ...props
+}) {
+  const theme = use_theme_default();
+  const [, setIsContentMouseDown, IsContentMouseDownRef] = use_current_state_default(false);
+  const contentRef = useRef(null);
+  const clickHandler = (event) => {
+    var _a;
+    if (IsContentMouseDownRef.current) return;
+    if ((_a = contentRef.current) == null ? void 0 : _a.contains(event.target)) return;
+    if (onClick) onClick(event);
+  };
+  const mouseUpHandler = () => {
+    if (!IsContentMouseDownRef.current) return;
+    const timer = setTimeout(() => {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+  return /* @__PURE__ */ jsx4(css_transition_default, { name: "backdrop-wrapper", visible, clearTime: 300, children: /* @__PURE__ */ jsxs4("div", { onClick: clickHandler, onMouseUp: mouseUpHandler, ...props, className: _JSXStyle4.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || use_classes_default("backdrop", backdropClassName) || ""), children: [
+    /* @__PURE__ */ jsx4("div", { className: _JSXStyle4.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (use_classes_default("layer", layerClassName) || "") }),
+    /* @__PURE__ */ jsx4("div", { ref: contentRef, onClick: onContentClick, onMouseDown: () => setIsContentMouseDown(true), className: _JSXStyle4.dynamic([["1944751280", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (use_classes_default("position", positionClassName) || ""), children }),
+    /* @__PURE__ */ jsx4(_JSXStyle4, { id: "1944751280", dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity], children: `.backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:${width};margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:${theme.expressiveness.portalOpacity};background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}` })
+  ] }) });
+}
+BackdropComponent.displayName = "BolioUIBackdrop";
+var Backdrop = React2.memo(BackdropComponent);
+var backdrop_default = Backdrop;
+
+export {
+  use_body_scroll_default2 as use_body_scroll_default,
+  backdrop_default,
+  ModalContext,
+  useModalContext,
+  ModalTitle_default,
+  ModalSubtitle_default,
+  ModalContent_default
+};

package/esm/chunk-KBCAV5FR.js

@@ -0,0 +1,22 @@
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+
+// core/CssBaseline/CssBaseline.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CssBaseline = ({
+  children
+}) => {
+  const theme = use_theme_default();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2108354201", dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.accents_4, theme.palette.code, theme.font.mono, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.palette.accents_2, theme.layout.radius, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.border, theme.palette.selection, theme.palette.foreground], children: `html,body{background-color:${theme.palette.background};color:${theme.palette.foreground};}html{font-size:16px;--bolioui-icons-background:${theme.palette.background};}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:clip;font-family:${theme.font.sans};}#__next{overflow-x:clip;}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;font-family:${theme.font.sans};}p{margin:1em 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875em;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.link};-webkit-text-decoration:${theme.expressiveness.linkStyle};text-decoration:${theme.expressiveness.linkStyle};}a:hover{-webkit-text-decoration:${theme.expressiveness.linkHoverStyle};text-decoration:${theme.expressiveness.linkHoverStyle};}ul,ol{padding:0;list-style-type:none;margin:${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gap};color:${theme.palette.foreground};}ol{list-style-type:decimal;}li{margin-bottom:0.625em;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.7rem 0;line-height:1;}h1{font-size:3rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.02em;-moz-letter-spacing:-0.02em;-ms-letter-spacing:-0.02em;letter-spacing:-0.02em;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005em;-moz-letter-spacing:-0.005em;-ms-letter-spacing:-0.005em;letter-spacing:-0.005em;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:${theme.palette.code};font-family:${theme.font.mono};font-size:0.9em;white-space:pre-wrap;}code:before,code:after{content:'\`';}pre{padding:calc(${theme.layout.gap} * 0.9) ${theme.layout.gap};margin:${theme.layout.gap} 0;border:1px solid ${theme.palette.accents_2};border-radius:${theme.layout.radius};font-family:${theme.font.mono};white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:14px;-webkit-overflow-scrolling:touch;}pre code{font-size:1em;line-height:1.25em;white-space:pre;}pre code:before,pre code:after{display:none;}pre p{margin:0;}pre::-webkit-scrollbar{display:none;width:0;height:0;background:transparent;}hr{border-color:${theme.palette.accents_2};}details{background-color:${theme.palette.accents_1};border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::marker,summary::before,summary::-webkit-details-marker{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};border-radius:${theme.layout.radius};margin:1.5em 0;border:1px solid ${theme.palette.border};}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:${theme.palette.selection};color:${theme.palette.foreground};}` })
+  ] });
+};
+var CssBaseline_default = React.memo(CssBaseline);
+
+export {
+  CssBaseline_default
+};

package/esm/chunk-KHB3EKRQ.js

@@ -0,0 +1,36 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Section/Section.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SectionComponent = React.forwardRef(({
+  children,
+  bg = "transparent",
+  className = "",
+  ...props
+}, ref) => {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs("section", { ref, ...props, className: _JSXStyle.dynamic([["1871933825", [bg, 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 || use_classes_default("section", className) || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1871933825", dynamic: [bg, SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)], children: `section.__jsx-style-dynamic-selector{background-color:${bg};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}` })
+  ] });
+});
+SectionComponent.displayName = "BolioUISection";
+var Section = with_scale_default(SectionComponent);
+var Section_default = Section;
+
+// core/Section/index.ts
+var Section_default2 = Section_default;
+
+export {
+  Section_default2 as Section_default
+};

package/esm/chunk-KVIIL2O6.js

@@ -0,0 +1,192 @@
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Checkbox/Checkbox.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React3, { useCallback, useEffect, useMemo, useState } from "react";
+
+// core/Checkbox/CheckboxContext.ts
+import React from "react";
+var defaultContext = {
+  disabledAll: false,
+  inGroup: false,
+  values: []
+};
+var CheckboxContext = React.createContext(defaultContext);
+var useCheckbox = () => React.useContext(CheckboxContext);
+
+// core/Checkbox/CheckboxIcon.tsx
+import _JSXStyle from "styled-jsx/style";
+import React2 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function CheckboxIconComponent({
+  fill: propsFill,
+  disabled,
+  checked
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    checked ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: {
+      height: SCALES.font(1),
+      width: SCALES.font(1)
+    }, className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("g", { stroke: propsFill, strokeWidth: "0.5", fill: "none", fillRule: "evenodd", className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("g", { fill: propsFill, className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("path", { d: "M18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 L18.25,3 Z M18.25,4.5 L5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 Z M10,14.4393398 L16.4696699,7.96966991 C16.7625631,7.6767767 17.2374369,7.6767767 17.5303301,7.96966991 C17.7965966,8.23593648 17.8208027,8.65260016 17.6029482,8.94621165 L17.5303301,9.03033009 L10.5303301,16.0303301 C10.2640635,16.2965966 9.84739984,16.3208027 9.55378835,16.1029482 L9.46966991,16.0303301 L6.46966991,13.0303301 C6.1767767,12.7374369 6.1767767,12.2625631 6.46966991,11.9696699 C6.73593648,11.7034034 7.15260016,11.6791973 7.44621165,11.8970518 L7.53033009,11.9696699 L10,14.4393398 L16.4696699,7.96966991 L10,14.4393398 Z", className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]) }) }) }) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", style: {
+      height: SCALES.font(1),
+      width: SCALES.font(1)
+    }, className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("g", { stroke: propsFill, strokeWidth: "0.5", fill: "none", fillRule: "evenodd", className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("g", { fill: propsFill, className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]), children: /* @__PURE__ */ jsx("path", { d: "M5.75,3 L18.25,3 C19.7687831,3 21,4.23121694 21,5.75 L21,18.25 C21,19.7687831 19.7687831,21 18.25,21 L5.75,21 C4.23121694,21 3,19.7687831 3,18.25 L3,5.75 C3,4.23121694 4.23121694,3 5.75,3 Z M5.75,4.5 C5.05964406,4.5 4.5,5.05964406 4.5,5.75 L4.5,18.25 C4.5,18.9403559 5.05964406,19.5 5.75,19.5 L18.25,19.5 C18.9403559,19.5 19.5,18.9403559 19.5,18.25 L19.5,5.75 C19.5,5.05964406 18.9403559,4.5 18.25,4.5 L5.75,4.5 Z", className: _JSXStyle.dynamic([["996181129", [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"]]]) }) }) }) }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "996181129", dynamic: [disabled ? 0.4 : 1, disabled ? "not-allowed" : "pointer"], children: `svg.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:calc(0.86 * var(--checkbox-size));height:calc(0.86 * var(--checkbox-size));-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:${disabled ? 0.4 : 1};cursor:${disabled ? "not-allowed" : "pointer"};}` })
+  ] });
+}
+CheckboxIconComponent.displayName = "BolioUICheckboxIcon";
+var CheckboxIcon = React2.memo(CheckboxIconComponent);
+var CheckboxIcon_default = CheckboxIcon;
+
+// core/Checkbox/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: palette.foreground,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Checkbox/Checkbox.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CheckboxComponent = React3.forwardRef(({
+  checked,
+  initialChecked = false,
+  disabled = false,
+  onChange,
+  className = "",
+  children,
+  type = "default",
+  value = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const [selfChecked, setSelfChecked] = useState(initialChecked);
+  const {
+    updateState,
+    inGroup,
+    disabledAll,
+    values
+  } = useCheckbox();
+  const isDisabled = inGroup ? disabledAll || disabled : disabled;
+  const classes = use_classes_default("checkbox", className);
+  if (inGroup && checked) {
+    log_warning_default('Remove props "checked" when [Checkbox] component is in the group.', "Checkbox");
+  }
+  useEffect(() => {
+    if (!inGroup) return;
+    const next = values.includes(value);
+    if (next === selfChecked) return;
+    setSelfChecked(next);
+  }, [inGroup, selfChecked, value, values]);
+  const fill = useMemo(() => getColors(theme.palette, type), [theme.palette, type]);
+  const changeHandle = useCallback((ev) => {
+    if (isDisabled) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    if (inGroup && updateState) {
+      if (updateState) updateState(value, !selfChecked);
+    }
+    setSelfChecked(!selfChecked);
+    if (onChange) onChange(selfEvent);
+  }, [isDisabled, selfChecked, inGroup, updateState, onChange, value]);
+  useEffect(() => {
+    if (checked === void 0) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /* @__PURE__ */ jsxs2("label", { className: _JSXStyle2.dynamic([["1454958681", [SCALES.font(1), isDisabled ? "not-allowed" : "pointer", isDisabled ? 0.75 : 1, SCALES.width(1, "auto"), SCALES.height(1, "var(--checkbox-size)"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? "not-allowed" : "pointer", theme.palette.primary]]]) + " " + (classes || ""), children: [
+    /* @__PURE__ */ jsx2(CheckboxIcon_default, { fill, disabled: isDisabled, checked: selfChecked }),
+    /* @__PURE__ */ jsx2("input", { ref, type: "checkbox", disabled: isDisabled, checked: selfChecked, onChange: changeHandle, ...props, className: _JSXStyle2.dynamic([["1454958681", [SCALES.font(1), isDisabled ? "not-allowed" : "pointer", isDisabled ? 0.75 : 1, SCALES.width(1, "auto"), SCALES.height(1, "var(--checkbox-size)"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? "not-allowed" : "pointer", theme.palette.primary]]]) + " " + (props && props.className != null && props.className || "") }),
+    /* @__PURE__ */ jsx2("span", { className: _JSXStyle2.dynamic([["1454958681", [SCALES.font(1), isDisabled ? "not-allowed" : "pointer", isDisabled ? 0.75 : 1, SCALES.width(1, "auto"), SCALES.height(1, "var(--checkbox-size)"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? "not-allowed" : "pointer", theme.palette.primary]]]) + " text", children }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1454958681", dynamic: [SCALES.font(1), isDisabled ? "not-allowed" : "pointer", isDisabled ? 0.75 : 1, SCALES.width(1, "auto"), SCALES.height(1, "var(--checkbox-size)"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), isDisabled ? "not-allowed" : "pointer", theme.palette.primary], children: `.checkbox.__jsx-style-dynamic-selector{--checkbox-size:${SCALES.font(1)};display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-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;cursor:${isDisabled ? "not-allowed" : "pointer"};opacity:${isDisabled ? 0.75 : 1};line-height:var(--checkbox-size);width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "var(--checkbox-size)")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.text.__jsx-style-dynamic-selector{font-size:var(--checkbox-size);line-height:var(--checkbox-size);padding-left:calc(var(--checkbox-size) * 0.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:${isDisabled ? "not-allowed" : "pointer"};}.checkbox.__jsx-style-dynamic-selector:focus-within{border-radius:4px;outline:2px solid ${theme.palette.primary};outline-offset:2px;}input.__jsx-style-dynamic-selector{opacity:0;outline:none;position:absolute;width:0;height:0;margin:0;padding:0;z-index:-1;font-size:0;background-color:transparent;}` })
+  ] });
+});
+CheckboxComponent.displayName = "BolioUICheckbox";
+var Checkbox = with_scale_default(CheckboxComponent);
+var Checkbox_default = Checkbox;
+
+// core/Checkbox/CheckboxGroup.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var noValue = [];
+function CheckboxGroupComponent({
+  disabled = false,
+  onChange,
+  value,
+  children,
+  className = "",
+  ...props
+}) {
+  const {
+    SCALES
+  } = use_scale_default();
+  const [selfVal, setSelfVal] = useState2([]);
+  const classes = use_classes_default("group", className);
+  if (!value) {
+    value = noValue;
+    log_warning_default('Props "value" is required.', "Checkbox Group");
+  }
+  const updateState = useCallback2((val, checked) => {
+    const removed = selfVal.filter((v) => v !== val);
+    const next = checked ? [...removed, val] : removed;
+    setSelfVal(next);
+    if (onChange) onChange(next);
+  }, [selfVal, onChange]);
+  const providerValue = useMemo2(() => {
+    return {
+      updateState,
+      disabledAll: disabled,
+      inGroup: true,
+      values: selfVal
+    };
+  }, [updateState, disabled, selfVal]);
+  useEffect2(() => {
+    setSelfVal(value);
+  }, [value]);
+  return /* @__PURE__ */ jsx3(CheckboxContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsxs3("div", { ...props, className: _JSXStyle3.dynamic([["2254703651", [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), SCALES.font(1), SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx3(_JSXStyle3, { id: "2254703651", dynamic: [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), SCALES.font(1), SCALES.font(1)], children: `.group.__jsx-style-dynamic-selector{width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.group.__jsx-style-dynamic-selector label{margin-right:calc(${SCALES.font(1)} * 2);--checkbox-size:${SCALES.font(1)};}.group.__jsx-style-dynamic-selector label:last-of-type{margin-right:0;}` })
+  ] }) });
+}
+CheckboxGroupComponent.displayName = "BolioUICheckboxGroup";
+var CheckboxGroup = with_scale_default(CheckboxGroupComponent);
+var CheckboxGroup_default = CheckboxGroup;
+
+// core/Checkbox/index.ts
+Checkbox_default.Group = CheckboxGroup_default;
+var Checkbox_default2 = Checkbox_default;
+
+export {
+  Checkbox_default2 as Checkbox_default
+};

package/esm/chunk-KZXX7IEN.js

@@ -0,0 +1,44 @@
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Display/Display.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DisplayComponent = React.forwardRef(({
+  children,
+  caption = "",
+  shadow = false,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = use_classes_default("display", className);
+  const showShadow = useMemo(() => shadow && theme.type !== "dark", [theme.type, shadow]);
+  return /* @__PURE__ */ jsxs("div", { ref, ...props, className: _JSXStyle.dynamic([["961858914", [SCALES.font(0.875), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, "auto"), SCALES.mb(2.5), SCALES.ml(0, "auto"), SCALES.width(1, "max-content"), showShadow ? theme.expressiveness.shadowLarge : "none", theme.palette.accents_5, shadow ? "2.5em" : "1.3em"]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["961858914", [SCALES.font(0.875), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, "auto"), SCALES.mb(2.5), SCALES.ml(0, "auto"), SCALES.width(1, "max-content"), showShadow ? theme.expressiveness.shadowLarge : "none", theme.palette.accents_5, shadow ? "2.5em" : "1.3em"]]]) + " content", children }),
+    /* @__PURE__ */ jsx("div", { className: _JSXStyle.dynamic([["961858914", [SCALES.font(0.875), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, "auto"), SCALES.mb(2.5), SCALES.ml(0, "auto"), SCALES.width(1, "max-content"), showShadow ? theme.expressiveness.shadowLarge : "none", theme.palette.accents_5, shadow ? "2.5em" : "1.3em"]]]) + " caption", children: caption }),
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "961858914", dynamic: [SCALES.font(0.875), SCALES.width(1, "100%"), SCALES.height(1, "auto"), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(2.5), SCALES.mr(0, "auto"), SCALES.mb(2.5), SCALES.ml(0, "auto"), SCALES.width(1, "max-content"), showShadow ? theme.expressiveness.shadowLarge : "none", theme.palette.accents_5, shadow ? "2.5em" : "1.3em"], children: `.display.__jsx-style-dynamic-selector{display:block;max-width:100%;font-size:${SCALES.font(0.875)};width:${SCALES.width(1, "100%")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0)} ${SCALES.pr(0)} ${SCALES.pb(0)} ${SCALES.pl(0)};margin:${SCALES.mt(2.5)} ${SCALES.mr(0, "auto")} ${SCALES.mb(2.5)} ${SCALES.ml(0, "auto")};}.content.__jsx-style-dynamic-selector{display:block;margin:0 auto;border-radius:4px;overflow:hidden;width:${SCALES.width(1, "max-content")};box-shadow:${showShadow ? theme.expressiveness.shadowLarge : "none"};max-width:100%;}.content.__jsx-style-dynamic-selector pre{margin:0;-webkit-transition:min-width ease 0.2s;transition:min-width ease 0.2s;}.content.__jsx-style-dynamic-selector img{display:block;}.caption.__jsx-style-dynamic-selector{font-size:inherit;line-height:1.5em;color:${theme.palette.accents_5};margin:${shadow ? "2.5em" : "1.3em"} auto 0;text-align:center;max-width:85%;}` })
+  ] });
+});
+DisplayComponent.displayName = "BolioUIDisplay";
+var Display = with_scale_default(DisplayComponent);
+var Display_default = Display;
+
+// core/Display/index.ts
+var Display_default2 = Display_default;
+
+export {
+  Display_default2 as Display_default
+};

package/esm/chunk-LDTDMDE6.js

@@ -0,0 +1,51 @@
+// core/Shared/css-transition.tsx
+import React, { useEffect, useState } from "react";
+function CssTransition({
+  children,
+  className = "",
+  visible = false,
+  enterTime = 60,
+  leaveTime = 60,
+  clearTime = 60,
+  name = "transition",
+  ...props
+}) {
+  const [classes, setClasses] = useState("");
+  const [renderable, setRenderable] = useState(visible);
+  useEffect(() => {
+    const statusClassName = visible ? "enter" : "leave";
+    const time = visible ? enterTime : leaveTime;
+    if (visible && !renderable) {
+      setRenderable(true);
+    }
+    setClasses(`${name}-${statusClassName}`);
+    const timer = setTimeout(() => {
+      setClasses(`${name}-${statusClassName} ${name}-${statusClassName}-active`);
+      clearTimeout(timer);
+    }, time);
+    const clearClassesTimer = setTimeout(() => {
+      if (!visible) {
+        setClasses("");
+        setRenderable(false);
+      }
+      clearTimeout(clearClassesTimer);
+    }, time + clearTime);
+    return () => {
+      clearTimeout(timer);
+      clearTimeout(clearClassesTimer);
+    };
+  }, [visible, renderable, enterTime, leaveTime, clearTime, name]);
+  if (!React.isValidElement(children) || !renderable)
+    return null;
+  const element = children;
+  return React.cloneElement(element, {
+    ...props,
+    className: `${element.props.className} ${className} ${classes}`
+  });
+}
+CssTransition.displayName = "BolioUICssTransition";
+var css_transition_default = CssTransition;
+
+export {
+  css_transition_default
+};