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

package/dist/chunk-YFQOB5OC.js

@@ -0,0 +1,204 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkNCUSKYUEjs = require('./chunk-NCUSKYUE.js');
+
+
+var _chunkC3ZZPIUOjs = require('./chunk-C3ZZPIUO.js');
+
+
+
+var _chunkGJZT47MPjs = require('./chunk-GJZT47MP.js');
+
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Snippet/Snippet.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Snippet/styles.ts
+var getStyles = (type, palette, { fill, light, ghost, subtle } = {}) => {
+  if (_chunkGJZT47MPjs.isSemanticColorType.call(void 0, type)) {
+    if (subtle) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "subtle");
+      return { color, border, bgColor: bg };
+    }
+    if (light) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "light");
+      return { color, border, bgColor: bg };
+    }
+    if (ghost) {
+      const { bg, border, color } = _chunkGJZT47MPjs.getVariantColors.call(void 0, palette, type, "outline");
+      return { color, border, bgColor: bg };
+    }
+  }
+  const styles = {
+    default: {
+      color: palette.foreground,
+      border: palette.accents_2,
+      bgColor: palette.accents_2
+    },
+    primary: {
+      color: palette.primary,
+      border: palette.primary,
+      bgColor: palette.accents_1
+    },
+    secondary: {
+      color: palette.secondary,
+      border: palette.secondary,
+      bgColor: palette.accents_1
+    },
+    success: {
+      color: palette.success,
+      border: palette.success,
+      bgColor: palette.accents_1
+    },
+    warning: {
+      color: palette.warning,
+      border: palette.warning,
+      bgColor: palette.accents_1
+    },
+    error: {
+      color: palette.error,
+      border: palette.error,
+      bgColor: palette.accents_1
+    },
+    info: {
+      color: palette.info,
+      border: palette.info,
+      bgColor: palette.accents_1
+    },
+    lite: {
+      color: palette.foreground,
+      border: palette.border,
+      bgColor: palette.accents_1
+    },
+    dark: {
+      color: palette.background,
+      border: palette.foreground,
+      bgColor: palette.foreground
+    }
+  };
+  const filledTypes = [
+    "primary",
+    "secondary",
+    "success",
+    "warning",
+    "error",
+    "info"
+  ];
+  const style = styles[type];
+  const shouldFilled = filledTypes.includes(type);
+  if (!fill || !shouldFilled) return style;
+  return {
+    ...style,
+    color: style.bgColor,
+    bgColor: style.color
+  };
+};
+
+// core/Snippet/SnippetIcon.tsx
+
+
+var _jsxruntime = require('react/jsx-runtime');
+function SnippetIconComponent() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", style: {
+    color: "currentcolor"
+  }, className: "jsx-418323402", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z", className: "jsx-418323402" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "418323402", children: "svg.jsx-418323402{width:calc(var(--snippet-font-size) * 1.69);height:calc(var(--snippet-font-size) * 1.69);}" })
+  ] });
+}
+SnippetIconComponent.displayName = "BolioUISnippetIcon";
+var SnippetIcon = _react2.default.memo(SnippetIconComponent);
+var SnippetIcon_default = SnippetIcon;
+
+// core/utils/use-clipboard.ts
+var use_clipboard_default2 = _chunkC3ZZPIUOjs.use_clipboard_default;
+
+// core/Snippet/Snippet.tsx
+
+var textArrayToString = (text) => {
+  return text.reduce((pre, current) => {
+    if (!current) return pre;
+    return pre ? `${pre}
+${current}` : current;
+  }, "");
+};
+var SnippetComponent = _react2.default.forwardRef(({
+  type = "default",
+  filled = false,
+  light = false,
+  ghost = false,
+  subtle = false,
+  rounded = false,
+  children,
+  symbol = "$",
+  toastText = "Copied!",
+  toastType = "primary",
+  text,
+  copy: copyType,
+  className = "",
+  ...props
+}, ref) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const {
+    copy
+  } = use_clipboard_default2();
+  const {
+    setToast
+  } = _chunkNCUSKYUEjs.use_toasts_default.call(void 0, );
+  const preRef = _react.useRef.call(void 0, null);
+  const isMultiLine = text && Array.isArray(text);
+  const style = _react.useMemo.call(void 0, () => getStyles(type, theme.palette, {
+    fill: filled,
+    light,
+    ghost,
+    subtle
+  }), [type, theme.palette, filled, light, ghost, subtle]);
+  const showCopyIcon = _react.useMemo.call(void 0, () => copyType !== "prevent", [copyType]);
+  const childText = _react.useMemo.call(void 0, () => {
+    if (isMultiLine) return textArrayToString(text);
+    if (!children) return text;
+    if (!preRef.current) return "";
+    return preRef.current.textContent;
+  }, [isMultiLine, text, children]);
+  const symbolBefore = _react.useMemo.call(void 0, () => {
+    const str = symbol.trim();
+    return str ? `${str} ` : "";
+  }, [symbol]);
+  const clickHandler = () => {
+    if (!childText || !showCopyIcon) return;
+    copy(childText);
+    if (copyType === "silent") return;
+    setToast({
+      text: toastText,
+      type: toastType
+    });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref, ...props, className: _style2.default.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]) + " " + (props && props.className != null && props.className || _chunk5KUROAEPjs.use_classes_default.call(void 0, "snippet", className) || ""), children: [
+    isMultiLine ? text.map((t, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { className: _style2.default.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]), children: t }, `snippet-${index}-${t}`)) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "pre", { ref: preRef, className: _style2.default.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]), children: children || text }),
+    showCopyIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { onClick: clickHandler, className: _style2.default.dynamic([["3243552610", [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0]]]) + " copy", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SnippetIcon_default, {}) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "3243552610", dynamic: [style.color, style.bgColor, style.border, rounded ? "25px" : theme.layout.radius, SCALES.font(0.8125), SCALES.pt(0.667), SCALES.width(1, "initial"), SCALES.height(1, "auto"), SCALES.pt(0.667), SCALES.pr(2.667), SCALES.pb(0.667), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), style.color, symbolBefore, style.bgColor, isMultiLine ? "flex-start" : "center", rounded ? "25px" : theme.layout.radius, isMultiLine ? "var(--snippet-padding-top)" : 0], children: `.snippet.__jsx-style-dynamic-selector{position:relative;max-width:100%;color:${style.color};background-color:${style.bgColor};border:1px solid ${style.border};border-radius:${rounded ? "25px" : theme.layout.radius};--snippet-font-size:${SCALES.font(0.8125)};--snippet-padding-top:${SCALES.pt(0.667)};font-size:var(--snippet-font-size);width:${SCALES.width(1, "initial")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0.667)} ${SCALES.pr(2.667)} ${SCALES.pb(0.667)} ${SCALES.pl(0.667)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}pre.__jsx-style-dynamic-selector{margin:0;padding:0;border:none;background-color:transparent;color:${style.color};font-size:inherit;}pre.__jsx-style-dynamic-selector::before{content:'${symbolBefore}';-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}pre.__jsx-style-dynamic-selector *{margin:0;padding:0;font-size:inherit;color:inherit;}.copy.__jsx-style-dynamic-selector{position:absolute;right:0;top:0;bottom:0;background-color:${style.bgColor};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:${isMultiLine ? "flex-start" : "center"};-webkit-box-align:${isMultiLine ? "flex-start" : "center"};-ms-flex-align:${isMultiLine ? "flex-start" : "center"};align-items:${isMultiLine ? "flex-start" : "center"};width:calc(3.281 * var(--snippet-font-size));color:inherit;-webkit-transition:opacity 150ms ease 0s;transition:opacity 150ms ease 0s;border-radius:${rounded ? "25px" : theme.layout.radius};cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:${isMultiLine ? "var(--snippet-padding-top)" : 0};opacity:0.65;}.copy.__jsx-style-dynamic-selector:hover{opacity:1;}` })
+  ] });
+});
+SnippetComponent.displayName = "BolioUISnippet";
+var Snippet = _chunkS62PPQHNjs.with_scale_default.call(void 0, SnippetComponent);
+var Snippet_default = Snippet;
+
+// core/Snippet/index.ts
+var Snippet_default2 = Snippet_default;
+
+
+
+exports.Snippet_default = Snippet_default2;

package/dist/chunk-YHEIC6EK.js

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Toggle/Toggle.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Toggle/styles.ts
+var getColors = (palette, status) => {
+  const colors = {
+    default: {
+      bg: palette.success
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors.default;
+  return colors[status];
+};
+
+// core/Toggle/Toggle.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ToggleComponent = _react2.default.forwardRef(({
+  initialChecked = false,
+  checked,
+  disabled = false,
+  onChange,
+  type = "default",
+  className = "",
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}, ref) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const [selfChecked, setSelfChecked] = _react.useState.call(void 0, initialChecked);
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, "toggle", {
+    checked: selfChecked,
+    disabled
+  });
+  const changeHandle = _react.useCallback.call(void 0, (ev) => {
+    if (disabled) return;
+    const selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    setSelfChecked(!selfChecked);
+    if (onChange) onChange(selfEvent);
+  }, [disabled, selfChecked, onChange]);
+  const {
+    bg
+  } = _react.useMemo.call(void 0, () => getColors(theme.palette, type), [theme.palette, type]);
+  _react.useEffect.call(void 0, () => {
+    if (checked === void 0) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { ...props, className: _style2.default.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || ""), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { ref, type: "checkbox", role: "switch", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled, checked: selfChecked, onChange: changeHandle, className: _style2.default.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _style2.default.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || ""), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _style2.default.dynamic([["951079252", [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " inner" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "951079252", dynamic: [disabled ? "not-allowed" : "pointer", SCALES.font(1), SCALES.height(1), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.primary, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg], children: `label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:${disabled ? "not-allowed" : "pointer"};--toggle-font-size:${SCALES.font(1)};--toggle-height:${SCALES.height(1)};width:${SCALES.width(1.75)};height:var(--toggle-height);padding:${SCALES.pt(0.1875)} ${SCALES.pr(0)} ${SCALES.pb(0.1875)} ${SCALES.pl(0)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}input.__jsx-style-dynamic-selector{overflow:hidden;height:0;margin:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}input.__jsx-style-dynamic-selector:focus-visible+.toggle.__jsx-style-dynamic-selector{outline:2px solid ${theme.palette.primary};outline-offset:2px;}.toggle.__jsx-style-dynamic-selector{height:calc(var(--toggle-height) + 2px);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:${theme.palette.accents_2};padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow: rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:${theme.palette.accents_1};}.disabled.__jsx-style-dynamic-selector{border-color:${theme.palette.accents_2};background-color:${theme.palette.accents_1};}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:${theme.palette.accents_2};}.disabled.checked.__jsx-style-dynamic-selector{border-color:${theme.palette.accents_4};background-color:${theme.palette.accents_4};}.checked.__jsx-style-dynamic-selector{background-color:${bg};}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 1px));box-shadow:none;}` })
+  ] });
+});
+ToggleComponent.displayName = "BolioUIToggle";
+var Toggle = _chunkS62PPQHNjs.with_scale_default.call(void 0, ToggleComponent);
+var Toggle_default = Toggle;
+
+// core/Toggle/index.ts
+var Toggle_default2 = Toggle_default;
+
+
+
+exports.Toggle_default = Toggle_default2;

package/dist/chunk-YS5PWRS7.js

@@ -0,0 +1,288 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+
+
+
+
+
+
+var _chunkK53ERLS7js = require('./chunk-K53ERLS7.js');
+
+
+var _chunkF3AL4TQZjs = require('./chunk-F3AL4TQZ.js');
+
+
+var _chunkLDTDMDE6js = require('./chunk-LDTDMDE6.js');
+
+
+var _chunkBXDUHMWSjs = require('./chunk-BXDUHMWS.js');
+
+
+var _chunk6XJS3KMWjs = require('./chunk-6XJS3KMW.js');
+
+
+
+var _chunkS62PPQHNjs = require('./chunk-S62PPQHN.js');
+
+
+
+
+var _chunkUX2B3G6Ujs = require('./chunk-UX2B3G6U.js');
+
+
+var _chunk45MVPPJNjs = require('./chunk-45MVPPJN.js');
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Modal/Modal.tsx
+
+
+
+
+
+
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactdom = require('react-dom');
+
+// core/Modal/ModalWrapper.tsx
+var _style = require('styled-jsx/style'); var _style2 = _interopRequireDefault(_style);
+
+var _jsxruntime = require('react/jsx-runtime');
+var ModalWrapper = _react2.default.forwardRef(({
+  className = "",
+  children,
+  visible = false,
+  ...props
+}, ref) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const modalContent = _react.useRef.call(void 0, null);
+  _react.useImperativeHandle.call(void 0, ref, () => modalContent.current);
+  const tabStart = _react.useRef.call(void 0, null);
+  const tabEnd = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!visible) return;
+    const activeElement = document.activeElement;
+    const isChild = _chunkUX2B3G6Ujs.isChildElement.call(void 0, modalContent.current, activeElement);
+    if (isChild) return;
+    if (tabStart.current) tabStart.current.focus();
+  }, [visible]);
+  const onKeyDown = (event) => {
+    const isTabDown = event.keyCode === 9;
+    if (!visible || !isTabDown) return;
+    const activeElement = document.activeElement;
+    if (event.shiftKey) {
+      if (activeElement === tabStart.current) {
+        if (tabEnd.current) tabEnd.current.focus();
+      }
+    } else {
+      if (activeElement === tabEnd.current) {
+        if (tabStart.current) tabStart.current.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLDTDMDE6js.css_transition_default, { name: "wrapper", visible, clearTime: 300, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "dialog", "aria-modal": "true", tabIndex: -1, onKeyDown, ref: modalContent, ...props, className: _style2.default.dynamic([["356685991", [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 || _chunk5KUROAEPjs.use_classes_default.call(void 0, "wrapper", className) || ""), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { tabIndex: 0, "aria-hidden": "true", ref: tabStart, className: _style2.default.dynamic([["356685991", [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__ */ _jsxruntime.jsx.call(void 0, "div", { tabIndex: 0, "aria-hidden": "true", ref: tabEnd, className: _style2.default.dynamic([["356685991", [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__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "356685991", 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)], children: `.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:${theme.palette.background};color:${theme.palette.foreground};border-radius:${theme.layout.radius};box-shadow:${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:${SCALES.font(1)};height:${SCALES.height(1, "auto")};--modal-wrapper-padding-left:${SCALES.pl(1.3125)};--modal-wrapper-padding-right:${SCALES.pr(1.3125)};padding:${SCALES.pt(1.3125)} var(--modal-wrapper-padding-right) ${SCALES.pb(1.3125)} var(--modal-wrapper-padding-left);margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${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";
+var ModalWrapper_default = ModalWrapper;
+
+// core/Modal/ModalAction.tsx
+
+
+
+var ModalActionComponent = _react2.default.forwardRef(function({
+  className = "",
+  children,
+  onClick,
+  passive = false,
+  disabled = false,
+  ...props
+}, ref) {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const {
+    SCALES
+  } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+  const btnRef = _react.useRef.call(void 0, null);
+  const {
+    close
+  } = _chunkK53ERLS7js.useModalContext.call(void 0, );
+  _react.useImperativeHandle.call(void 0, ref, () => btnRef.current);
+  const clickHandler = (event) => {
+    if (disabled) return;
+    const actionEvent = Object.assign({}, event, {
+      close: () => close && close()
+    });
+    if (onClick) onClick(actionEvent);
+  };
+  const color = _react.useMemo.call(void 0, () => {
+    return passive ? theme.palette.accents_5 : theme.palette.foreground;
+  }, [theme.palette, passive]);
+  const bgColor = _react.useMemo.call(void 0, () => {
+    return disabled ? theme.palette.accents_1 : theme.palette.background;
+  }, [theme.palette, disabled]);
+  const {
+    className: resolveClassName,
+    styles
+  } = {
+    styles: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { 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], children: `button.btn.__jsx-style-dynamic-selector{font-size:${SCALES.font(0.75)};border:none;color:${color};background-color:${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:${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:${disabled ? color : theme.palette.foreground};background-color:${disabled ? bgColor : theme.palette.accents_1};}` }),
+    className: _style2.default.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]]])
+  };
+  const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, resolveClassName, className);
+  const overrideProps = {
+    ...props,
+    effect: false,
+    ref: btnRef
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk6XJS3KMWjs.Button_default, { className: classes, onClick: clickHandler, disabled, ...overrideProps, children: [
+    children,
+    styles
+  ] });
+});
+ModalActionComponent.displayName = "BolioUIModalAction";
+var ModalAction = _chunkS62PPQHNjs.with_scale_default.call(void 0, ModalActionComponent);
+var ModalAction_default = ModalAction;
+
+// core/Modal/ModalActions.tsx
+
+
+
+var ModalActionsComponent = ({
+  children,
+  ...props
+}) => {
+  const theme = _chunk45MVPPJNjs.use_theme_default.call(void 0, );
+  const ref = _react.useRef.call(void 0, null);
+  const [height, setHeight] = _react.useState.call(void 0, "auto");
+  _react.useEffect.call(void 0, () => {
+    if (!ref.current) return;
+    setHeight(`${ref.current.clientHeight}px`);
+  }, [ref]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _style2.default.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]]) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "footer", { ref, ...props, className: _style2.default.dynamic([["2914444644", [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height]]]) + " " + (props && props.className != null && props.className || ""), children }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _style2.default, { id: "2914444644", dynamic: [theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, height], children: `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 ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}footer.__jsx-style-dynamic-selector>button.btn + button.btn{border-left:1px solid ${theme.palette.border};}div.__jsx-style-dynamic-selector{height:${height};-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}` })
+  ] });
+};
+ModalActionsComponent.displayName = "BolioUIModalActions";
+var ModalActions = _react2.default.memo(ModalActionsComponent);
+var ModalActions_default = ModalActions;
+
+// core/Modal/Modal.tsx
+
+var ModalComponent = _react2.default.forwardRef(
+  ({
+    visible: customVisible,
+    onClose,
+    children,
+    keyboard = true,
+    wrapClassName = "",
+    onContentClick,
+    disableBackdropClick = false,
+    positionClassName = "",
+    backdropClassName = "",
+    layerClassName = "",
+    role = "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby
+  }, ref) => {
+    const portal = _chunkBXDUHMWSjs.use_portal_default.call(void 0, "modal");
+    const baseId = _react.useId.call(void 0, );
+    const titleId = `${baseId}-title`;
+    const descriptionId = `${baseId}-description`;
+    const { SCALES } = _chunkS62PPQHNjs.use_scale_default.call(void 0, );
+    const [, setBodyHidden] = _chunkK53ERLS7js.use_body_scroll_default.call(void 0, null, { delayReset: 300 });
+    const [visible, setVisible] = _react.useState.call(void 0, false);
+    const [withoutActionsChildren, ActionsChildren] = _chunkUX2B3G6Ujs.pickChild.call(void 0, 
+      children,
+      ModalAction_default
+    );
+    const hasActions = ActionsChildren && _react2.default.Children.count(ActionsChildren) > 0;
+    const closeModal = _react.useCallback.call(void 0, () => {
+      if (onClose) onClose();
+      setVisible(false);
+      setBodyHidden(false);
+    }, [onClose, setBodyHidden]);
+    _react.useEffect.call(void 0, () => {
+      if (typeof customVisible === "undefined") return;
+      setVisible(customVisible);
+      setBodyHidden(customVisible);
+    }, [customVisible, setBodyHidden]);
+    const { bindings } = _chunkF3AL4TQZjs.use_keyboard_default.call(void 0, 
+      () => {
+        if (keyboard) closeModal();
+      },
+      27 /* Escape */,
+      {
+        disableGlobalEvent: true
+      }
+    );
+    const closeFromBackdrop = () => {
+      if (disableBackdropClick) return;
+      closeModal();
+    };
+    const modalConfig = _react.useMemo.call(void 0, 
+      () => ({
+        close: closeModal,
+        titleId,
+        descriptionId
+      }),
+      [closeModal, titleId, descriptionId]
+    );
+    if (!portal) return null;
+    return _reactdom.createPortal.call(void 0, 
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkK53ERLS7js.ModalContext.Provider, { value: modalConfig, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkK53ERLS7js.backdrop_default,
+        {
+          onClick: closeFromBackdrop,
+          onContentClick,
+          visible,
+          width: SCALES.width(26),
+          positionClassName,
+          backdropClassName,
+          layerClassName,
+          ...bindings,
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            ModalWrapper_default,
+            {
+              ref,
+              visible,
+              className: wrapClassName,
+              role,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkK53ERLS7js.ModalTitle_default) ? titleId : void 0),
+              "aria-describedby": ariaDescribedby || (_chunkUX2B3G6Ujs.hasChild.call(void 0, children, _chunkK53ERLS7js.ModalSubtitle_default) ? descriptionId : void 0),
+              children: [
+                withoutActionsChildren,
+                hasActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ModalActions_default, { children: ActionsChildren })
+              ]
+            }
+          )
+        }
+      ) }),
+      portal
+    );
+  }
+);
+ModalComponent.displayName = "BolioUIModal";
+var Modal = _chunkS62PPQHNjs.with_scale_default.call(void 0, ModalComponent);
+var Modal_default = Modal;
+
+// core/Modal/index.ts
+Modal_default.Title = _chunkK53ERLS7js.ModalTitle_default;
+Modal_default.Subtitle = _chunkK53ERLS7js.ModalSubtitle_default;
+Modal_default.Content = _chunkK53ERLS7js.ModalContent_default;
+Modal_default.Action = ModalAction_default;
+var Modal_default2 = Modal_default;
+
+
+
+exports.Modal_default = Modal_default2;