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

package/esm/chunk-MYAZEMZC.js

@@ -0,0 +1,134 @@
+import {
+  getVariantColors,
+  isSemanticColorType
+} from "./chunk-GJZT47MP.js";
+import {
+  use_scale_default,
+  with_scale_default
+} from "./chunk-S62PPQHN.js";
+import {
+  pickChild
+} from "./chunk-UX2B3G6U.js";
+import {
+  use_theme_default
+} from "./chunk-45MVPPJN.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Badge/Badge.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getColors = (type, palette, {
+  ghost,
+  light,
+  subtle
+}) => {
+  if (isSemanticColorType(type)) {
+    const variant = subtle ? "subtle" : light ? "light" : ghost ? "outline" : "filled";
+    return getVariantColors(palette, type, variant);
+  }
+  return {
+    bg: palette.accents_2,
+    border: palette.accents_2,
+    color: palette.foreground
+  };
+};
+var BadgeComponent = React.forwardRef(({
+  type = "default",
+  className = "",
+  children,
+  dot = false,
+  ghost = false,
+  light = false,
+  subtle = false,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const {
+    bg,
+    border,
+    color
+  } = useMemo(() => getColors(type, theme.palette, {
+    ghost,
+    light,
+    subtle
+  }), [type, theme.palette, ghost, light, subtle]);
+  const classes = use_classes_default("badge", {
+    dot
+  }, className);
+  return /* @__PURE__ */ jsxs("span", { ref, ...props, className: _JSXStyle.dynamic([["4007412933", [bg, color, border, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || ""), children: [
+    !dot && children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "4007412933", dynamic: [bg, color, border, SCALES.font(0.875), SCALES.width(1, "auto"), SCALES.height(1, "auto"), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)], children: `.badge.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:${bg};color:${color};border:1px solid ${border};font-size:${SCALES.font(0.875)};font-weight:bold;text-transform:none;width:${SCALES.width(1, "auto")};height:${SCALES.height(1, "auto")};padding:${SCALES.pt(0.5)};margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};}.dot.__jsx-style-dynamic-selector{padding:${SCALES.py(0.25)} ${SCALES.px(0.25)};border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}` })
+  ] });
+});
+BadgeComponent.displayName = "BolioUIBadge";
+var Badge = with_scale_default(BadgeComponent);
+var Badge_default = Badge;
+
+// core/Badge/BadgeAnchor.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var getTransform = (placement) => {
+  const styles = {
+    topLeft: {
+      top: "0",
+      left: "0",
+      value: "translate(-50%, -50%)",
+      origin: "0% 0%"
+    },
+    topRight: {
+      top: "0",
+      right: "0",
+      value: "translate(50%, -50%)",
+      origin: "100% 0%"
+    },
+    bottomLeft: {
+      left: "0",
+      bottom: "0",
+      value: "translate(-50%, 50%)",
+      origin: "0% 100%"
+    },
+    bottomRight: {
+      right: "0",
+      bottom: "0",
+      value: "translate(50%, 50%)",
+      origin: "100% 100%"
+    }
+  };
+  return styles[placement];
+};
+function BadgeAnchor({
+  children,
+  placement = "topRight"
+}) {
+  const [withoutBadgeChildren, badgeChldren] = pickChild(children, Badge_default);
+  const {
+    top,
+    bottom,
+    left,
+    right,
+    value,
+    origin
+  } = useMemo2(() => getTransform(placement), [placement]);
+  return /* @__PURE__ */ jsxs2("div", { className: _JSXStyle2.dynamic([["1121745930", [top || "auto", left || "auto", right || "auto", bottom || "auto", value, origin]]]) + " anchor", children: [
+    withoutBadgeChildren,
+    /* @__PURE__ */ jsx2("sup", { className: _JSXStyle2.dynamic([["1121745930", [top || "auto", left || "auto", right || "auto", bottom || "auto", value, origin]]]), children: badgeChldren }),
+    /* @__PURE__ */ jsx2(_JSXStyle2, { id: "1121745930", dynamic: [top || "auto", left || "auto", right || "auto", bottom || "auto", value, origin], children: `.anchor.__jsx-style-dynamic-selector{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;}sup.__jsx-style-dynamic-selector{position:absolute;top:${top || "auto"};left:${left || "auto"};right:${right || "auto"};bottom:${bottom || "auto"};-webkit-transform:${value};-ms-transform:${value};transform:${value};-webkit-transform-origin:${origin};-ms-transform-origin:${origin};transform-origin:${origin};z-index:1;}` })
+  ] });
+}
+BadgeAnchor.displayName = "BolioUIBadgeAnchor";
+var BadgeAnchor_default = BadgeAnchor;
+
+// core/Badge/index.ts
+Badge_default.Anchor = BadgeAnchor_default;
+var Badge_default2 = Badge_default;
+
+export {
+  Badge_default2 as Badge_default
+};

package/esm/chunk-NCUSKYUE.js

@@ -0,0 +1,95 @@
+import {
+  defaultToastLayout,
+  useBolioUIContext
+} from "./chunk-A3BIV2QM.js";
+import {
+  getId
+} from "./chunk-UX2B3G6U.js";
+
+// core/use-toasts/use-toast.tsx
+import { useEffect } from "react";
+var defaultToast = {
+  delay: 2e3,
+  type: "default"
+};
+var useToasts = (layout) => {
+  const { updateToasts, toasts, updateToastLayout, updateLastToastId } = useBolioUIContext();
+  useEffect(() => {
+    if (!layout) return;
+    updateToastLayout(
+      () => layout ? {
+        ...defaultToastLayout,
+        ...layout
+      } : defaultToastLayout
+    );
+  }, []);
+  const cancel = (internalId) => {
+    updateToasts(
+      (currentToasts) => currentToasts.map((item) => {
+        if (item._internalIdent !== internalId) return item;
+        return { ...item, visible: false };
+      })
+    );
+    updateLastToastId(() => internalId);
+  };
+  const removeAll = () => {
+    updateToasts((last) => last.map((toast) => ({ ...toast, visible: false })));
+  };
+  const findToastOneByID = (id) => toasts.find((t) => t.id === id);
+  const removeToastOneByID = (id) => {
+    updateToasts(
+      (last) => last.map((toast) => {
+        if (toast.id !== id) return toast;
+        return {
+          ...toast,
+          visible: false
+        };
+      })
+    );
+  };
+  const setToast = (toast) => {
+    const internalIdent = `toast-${getId()}`;
+    const delay = toast.delay || defaultToast.delay;
+    if (toast.id) {
+      const hasIdent = toasts.find((t) => t.id === toast.id);
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+    updateToasts((last) => {
+      const newToast = {
+        delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(() => {
+          cancel(internalIdent);
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: () => cancel(internalIdent)
+      };
+      return [...last, newToast];
+    });
+  };
+  return {
+    toasts,
+    setToast,
+    removeAll,
+    findToastOneByID,
+    removeToastOneByID
+  };
+};
+var use_toast_default = useToasts;
+
+// core/use-toasts/index.ts
+var use_toasts_default = use_toast_default;
+
+export {
+  use_toasts_default
+};

package/esm/chunk-NDERASK2.js

@@ -0,0 +1,13 @@
+// core/ButtonGroup/ButtonGroupContext.ts
+import React from "react";
+var defaultContext = {
+  isButtonGroup: false,
+  disabled: false
+};
+var ButtonGroupContext = React.createContext(defaultContext);
+var useButtonGroupContext = () => React.useContext(ButtonGroupContext);
+
+export {
+  ButtonGroupContext,
+  useButtonGroupContext
+};

package/esm/chunk-NRSWR3C4.js

@@ -0,0 +1,165 @@
+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/Grid/Grid.tsx
+import _JSXStyle2 from "styled-jsx/style";
+import React2 from "react";
+
+// core/Grid/BasicItem.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultProps = {
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  className: ""
+};
+var getItemLayout = (val) => {
+  const display = val === 0 ? "display: none;" : "display: block;";
+  if (typeof val === "number") {
+    const width = 100 / 12 * val;
+    const ratio = width > 100 ? "100%" : width < 0 ? "0" : `${width}%`;
+    return {
+      grow: 0,
+      display,
+      width: ratio,
+      basis: ratio
+    };
+  }
+  return {
+    grow: 1,
+    display,
+    width: "100%",
+    basis: "0"
+  };
+};
+var GridBasicItem = React.forwardRef(({
+  xs = defaultProps.xs,
+  sm = defaultProps.sm,
+  md = defaultProps.md,
+  lg = defaultProps.lg,
+  xl = defaultProps.xl,
+  justify,
+  direction,
+  alignItems,
+  alignContent,
+  children,
+  className = defaultProps.className,
+  ...props
+}, ref) => {
+  const theme = use_theme_default();
+  const {
+    SCALES
+  } = use_scale_default();
+  const classes = useMemo(() => {
+    const aligns = {
+      justify,
+      direction,
+      alignItems,
+      alignContent,
+      xs,
+      sm,
+      md,
+      lg,
+      xl
+    };
+    const classString = Object.keys(aligns).reduce((pre, name) => {
+      if (aligns[name] !== void 0 && aligns[name] !== false) return `${pre} ${name}`;
+      return pre;
+    }, "");
+    return classString.trim();
+  }, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl]);
+  const layout = useMemo(() => ({
+    xs: getItemLayout(xs),
+    sm: getItemLayout(sm),
+    md: getItemLayout(md),
+    lg: getItemLayout(lg),
+    xl: getItemLayout(xl)
+  }), [xs, sm, md, lg, xl]);
+  return /* @__PURE__ */ jsxs("div", { ref, ...props, className: _JSXStyle.dynamic([["2387327819", [SCALES.font(1, "inherit"), SCALES.height(1, "auto"), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || use_classes_default("item", classes, className) || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "2387327819", dynamic: [SCALES.font(1, "inherit"), SCALES.height(1, "auto"), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display], children: `.item.__jsx-style-dynamic-selector{font-size:${SCALES.font(1, "inherit")};height:${SCALES.height(1, "auto")};}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:${direction};-ms-flex-direction:${direction};flex-direction:${direction};}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:${alignContent};-ms-flex-line-pack:${alignContent};align-content:${alignContent};}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:${alignItems};-webkit-box-align:${alignItems};-ms-flex-align:${alignItems};align-items:${alignItems};}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:${layout.xs.grow};-webkit-flex-grow:${layout.xs.grow};-ms-flex-positive:${layout.xs.grow};flex-grow:${layout.xs.grow};max-width:${layout.xs.width};-webkit-flex-basis:${layout.xs.basis};-ms-flex-preferred-size:${layout.xs.basis};flex-basis:${layout.xs.basis};${layout.xs.display};}@media only screen and (min-width:${theme.breakpoints.sm.min}){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:${layout.sm.grow};-webkit-flex-grow:${layout.sm.grow};-ms-flex-positive:${layout.sm.grow};flex-grow:${layout.sm.grow};max-width:${layout.sm.width};-webkit-flex-basis:${layout.sm.basis};-ms-flex-preferred-size:${layout.sm.basis};flex-basis:${layout.sm.basis};${layout.sm.display};}}@media only screen and (min-width:${theme.breakpoints.md.min}){.md.__jsx-style-dynamic-selector{-webkit-box-flex:${layout.md.grow};-webkit-flex-grow:${layout.md.grow};-ms-flex-positive:${layout.md.grow};flex-grow:${layout.md.grow};max-width:${layout.md.width};-webkit-flex-basis:${layout.md.basis};-ms-flex-preferred-size:${layout.md.basis};flex-basis:${layout.md.basis};${layout.md.display};}}@media only screen and (min-width:${theme.breakpoints.lg.min}){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:${layout.lg.grow};-webkit-flex-grow:${layout.lg.grow};-ms-flex-positive:${layout.lg.grow};flex-grow:${layout.lg.grow};max-width:${layout.lg.width};-webkit-flex-basis:${layout.lg.basis};-ms-flex-preferred-size:${layout.lg.basis};flex-basis:${layout.lg.basis};${layout.lg.display};}}@media only screen and (min-width:${theme.breakpoints.xl.min}){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:${layout.xl.grow};-webkit-flex-grow:${layout.xl.grow};-ms-flex-positive:${layout.xl.grow};flex-grow:${layout.xl.grow};max-width:${layout.xl.width};-webkit-flex-basis:${layout.xl.basis};-ms-flex-preferred-size:${layout.xl.basis};flex-basis:${layout.xl.basis};${layout.xl.display};}}` })
+  ] });
+});
+GridBasicItem.displayName = "BolioUIGridBasicItem";
+var BasicItem_default = GridBasicItem;
+
+// core/Grid/Grid.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GridComponent = React2.forwardRef(({
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const {
+    SCALES
+  } = use_scale_default();
+  const gridGapUnit = "var(--grid-gap-unit)";
+  const {
+    className: resolveClassName,
+    styles
+  } = {
+    styles: /* @__PURE__ */ jsx2(_JSXStyle2, { id: "2935018504", dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)], children: `div.__jsx-style-dynamic-selector{margin:${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};box-sizing:border-box;padding:${SCALES.pt(0, gridGapUnit)} ${SCALES.pr(0, gridGapUnit)} ${SCALES.pb(0, gridGapUnit)} ${SCALES.pl(0, gridGapUnit)};}` }),
+    className: _JSXStyle2.dynamic([["2935018504", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]]])
+  };
+  const classes = use_classes_default(resolveClassName, className);
+  return /* @__PURE__ */ jsxs2(BasicItem_default, { ref, className: classes, ...props, children: [
+    children,
+    styles
+  ] });
+});
+GridComponent.displayName = "BolioUIGrid";
+var Grid = with_scale_default(GridComponent);
+var Grid_default = Grid;
+
+// core/Grid/GridContainer.tsx
+import _JSXStyle3 from "styled-jsx/style";
+import React3, { useMemo as useMemo2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var GridContainerComponent = React3.forwardRef(({
+  gap = 0,
+  wrap = "wrap",
+  children,
+  className = "",
+  ...props
+}, ref) => {
+  const {
+    unit,
+    SCALES
+  } = use_scale_default();
+  const gapUnit = useMemo2(() => `calc(${gap} * ${unit} * 1/3)`, [gap, unit]);
+  const {
+    className: resolveClassName,
+    styles
+  } = {
+    styles: /* @__PURE__ */ jsx3(_JSXStyle3, { id: "181637125", dynamic: [gapUnit, wrap, SCALES.width(1, "100%")], children: `div.__jsx-style-dynamic-selector{--grid-gap-unit:${gapUnit};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:${wrap};-ms-flex-wrap:${wrap};flex-wrap:${wrap};box-sizing:border-box;width:${SCALES.width(1, "100%")};}` }),
+    className: _JSXStyle3.dynamic([["181637125", [gapUnit, wrap, SCALES.width(1, "100%")]]])
+  };
+  const classes = use_classes_default(resolveClassName, className);
+  return /* @__PURE__ */ jsxs3(BasicItem_default, { ref, className: classes, ...props, children: [
+    children,
+    styles
+  ] });
+});
+GridContainerComponent.displayName = "BolioUIGridContainer";
+var GridContainer = with_scale_default(GridContainerComponent);
+var GridContainer_default = GridContainer;
+
+// core/Grid/index.ts
+Grid_default.Container = GridContainer_default;
+var Grid_default2 = Grid_default;
+
+export {
+  Grid_default2 as Grid_default
+};

package/esm/chunk-O3RTRCY5.js

@@ -0,0 +1,64 @@
+// core/use-body-scroll/use-body-scroll.ts
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+var defaultOptions = {
+  scrollLayer: false,
+  delayReset: 0
+};
+var elementStack = /* @__PURE__ */ new Map();
+var getOwnerPaddingRight = (element) => {
+  const owner = (element == null ? void 0 : element.ownerDocument) || document;
+  const view = owner.defaultView || window;
+  return Number.parseInt(view.getComputedStyle(element).paddingRight, 10) || 0;
+};
+var getOwnerScrollbarWidth = (element) => {
+  const doc = (element == null ? void 0 : element.ownerDocument) || document;
+  return Math.abs(window.innerWidth - doc.documentElement.clientWidth);
+};
+function useBodyScroll(elementRef, options) {
+  const bodyRef = useRef(null);
+  const elRef = elementRef || bodyRef;
+  const [hidden, setHidden] = useState(false);
+  const { delayReset } = { ...defaultOptions, ...options || {} };
+  useEffect(() => {
+    if (!elementRef && !bodyRef.current) bodyRef.current = document.body;
+    if (!elRef || !elRef.current) return;
+    const lastOverflow = elRef.current.style.overflow;
+    if (hidden) {
+      if (elementStack.has(elRef.current)) return;
+      const paddingRight = getOwnerPaddingRight(elRef.current);
+      const scrollbarWidth = getOwnerScrollbarWidth(elRef.current);
+      elementStack.set(elRef.current, {
+        overflow: lastOverflow,
+        paddingRight: elRef.current.style.paddingRight
+      });
+      elRef.current.style.overflow = "hidden";
+      elRef.current.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
+      return;
+    }
+    if (!elementStack.has(elRef.current)) return;
+    const reset = (el) => {
+      const store = elementStack.get(el);
+      if (!store) return;
+      el.style.overflow = store.overflow;
+      el.style.paddingRight = store.paddingRight;
+      elementStack.delete(el);
+    };
+    const timer = window.setTimeout(() => {
+      reset(elRef.current);
+      window.clearTimeout(timer);
+    }, delayReset);
+  }, [hidden, elRef, elementRef, delayReset]);
+  return [hidden, setHidden];
+}
+var use_body_scroll_default = useBodyScroll;
+
+// core/use-body-scroll/index.ts
+var use_body_scroll_default2 = use_body_scroll_default;
+
+export {
+  use_body_scroll_default2 as use_body_scroll_default
+};

package/esm/chunk-OEHIZKSM.js

@@ -0,0 +1,31 @@
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Col/Col.tsx
+import _JSXStyle from "styled-jsx/style";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Col = React.forwardRef(({
+  component = "div",
+  children,
+  span = 12,
+  offset = 0,
+  className = "",
+  ...props
+}, ref) => {
+  const Component = component;
+  return /* @__PURE__ */ jsxs(Component, { ref, ...props, className: _JSXStyle.dynamic([["3968359939", [100 / 12 * span, 100 / 12 * offset]]]) + " " + (props && props.className != null && props.className || use_classes_default("col", className) || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "3968359939", dynamic: [100 / 12 * span, 100 / 12 * offset], children: `.col.__jsx-style-dynamic-selector{box-sizing:border-box;padding-left:calc(var(--row-gap) / 2);padding-right:calc(var(--row-gap) / 2);width:${100 / 12 * span}%;margin-left:${100 / 12 * offset}%;}` })
+  ] });
+});
+Col.displayName = "BolioUICol";
+var Col_default = Col;
+
+// core/Col/index.ts
+var Col_default2 = Col_default;
+
+export {
+  Col_default2 as Col_default
+};

package/esm/chunk-OFNHKVGZ.js

@@ -0,0 +1,136 @@
+import {
+  getRefRect
+} from "./chunk-DSX6YDJM.js";
+import {
+  use_click_anywhere_default
+} from "./chunk-V57PNXMD.js";
+import {
+  use_resize_default
+} from "./chunk-JJFOGZ6V.js";
+import {
+  log_warning_default
+} from "./chunk-AXYDJGTN.js";
+import {
+  css_transition_default
+} from "./chunk-LDTDMDE6.js";
+import {
+  use_portal_default
+} from "./chunk-BXDUHMWS.js";
+import {
+  use_latest_default
+} from "./chunk-ZRORQ2WH.js";
+import {
+  use_classes_default
+} from "./chunk-5KUROAEP.js";
+
+// core/Shared/dropdown.tsx
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect as useEffect2, useState } from "react";
+import { createPortal } from "react-dom";
+
+// core/utils/use-dom-observer.ts
+import { useEffect } from "react";
+var config = { attributes: false, childList: true, subtree: true };
+var useDOMObserver = (ref, callback = () => {
+}) => {
+  const latest = use_latest_default(callback);
+  useEffect(() => {
+    if (!ref || !ref.current) return;
+    let unmount = false;
+    const done = (...params) => {
+      if (unmount) return;
+      latest.current(...params);
+    };
+    const observer = new MutationObserver(done);
+    observer.observe(ref.current, config);
+    return () => {
+      unmount = true;
+      observer.disconnect();
+    };
+  }, [ref, latest]);
+};
+var use_dom_observer_default = useDOMObserver;
+
+// core/Shared/dropdown.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultRect = {
+  top: -1e3,
+  left: -1e3,
+  right: -1e3,
+  width: 0
+};
+var Dropdown = React.memo(({
+  children,
+  parent,
+  visible,
+  disableMatchWidth,
+  getPopupContainer
+}) => {
+  const el = use_portal_default("dropdown", getPopupContainer);
+  const [rect, setRect] = useState(defaultRect);
+  const classes = use_classes_default("dropdown", disableMatchWidth ? "disable-match" : "width-match");
+  if (parent && process.env.NODE_ENV !== "production") {
+    if (getPopupContainer && getPopupContainer()) {
+      const el2 = getPopupContainer();
+      const style = window.getComputedStyle(el2);
+      if (style.position === "static") {
+        log_warning_default('The element specified by "getPopupContainer" must have "position" set.');
+      }
+    }
+  }
+  const updateRect = () => {
+    if (!parent) return;
+    const {
+      top,
+      left,
+      right,
+      width: nativeWidth
+    } = getRefRect(parent, getPopupContainer);
+    setRect({
+      top,
+      left,
+      right,
+      width: nativeWidth
+    });
+  };
+  use_resize_default(updateRect);
+  use_click_anywhere_default(() => {
+    const {
+      top,
+      left
+    } = getRefRect(parent, getPopupContainer);
+    const shouldUpdatePosition = top !== rect.top || left !== rect.left;
+    if (!shouldUpdatePosition) return;
+    updateRect();
+  });
+  use_dom_observer_default(parent, () => {
+    updateRect();
+  });
+  const latestUpdate = use_latest_default(updateRect);
+  useEffect2(() => {
+    const element = parent && parent.current;
+    if (!element) return;
+    const listener = () => latestUpdate.current();
+    element.addEventListener("mouseenter", listener);
+    return () => element.removeEventListener("mouseenter", listener);
+  }, [parent, latestUpdate]);
+  const clickHandler = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+  };
+  const mouseDownHandler = (event) => {
+    event.preventDefault();
+  };
+  if (!parent || !el) return null;
+  return createPortal(/* @__PURE__ */ jsx(css_transition_default, { visible, children: /* @__PURE__ */ jsxs("div", { onClick: clickHandler, onMouseDown: mouseDownHandler, className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || ""), children: [
+    children,
+    /* @__PURE__ */ jsx(_JSXStyle, { id: "1644673105", dynamic: [rect.top + 2, rect.left, rect.width, rect.width], children: `.dropdown.__jsx-style-dynamic-selector{position:absolute;top:${rect.top + 2}px;left:${rect.left}px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:${rect.width}px;}.disable-match.__jsx-style-dynamic-selector{min-width:${rect.width}px;}` })
+  ] }) }), el);
+});
+Dropdown.displayName = "BolioUIDropdown";
+var dropdown_default = Dropdown;
+
+export {
+  dropdown_default
+};