@cfx-dev/ui-components 4.3.2 → 4.3.4

package/dist/components/Input/Input.js

@@ -3,142 +3,142 @@ import i from "react";
 import { Icon as $ } from "../Icon/Icon.js";
 import q from "../IconButton/IconButton.js";
 import { Indicator as H } from "../Indicator/Indicator.js";
-import { clsx as C } from "../../utils/clsx.js";
+import { clsx as b } from "../../utils/clsx.js";
 import { getValue as J } from "../../utils/getValue.js";
 import { ui as L } from "../../utils/ui/ui.js";
-const O = "cfxui__Input__root__6392b", P = "cfxui__Input__input__07830", Q = "cfxui__Input__empty__3b36a", U = "cfxui__Input__placeholderIcon__4d079", Y = "cfxui__Input__decorator__3b81f", Z = "cfxui__Input__small__c1513", ee = "cfxui__Input__large__92d72", le = "cfxui__Input__onlight__7d0b7", l = {
+const O = "cfxui__Input__root__6392b", P = "cfxui__Input__fullWidth__5a033", Q = "cfxui__Input__input__07830", U = "cfxui__Input__empty__3b36a", Y = "cfxui__Input__placeholderIcon__4d079", Z = "cfxui__Input__decorator__3b81f", ee = "cfxui__Input__small__c1513", le = "cfxui__Input__large__92d72", te = "cfxui__Input__onlight__7d0b7", ae = "cfxui__Input__backdropBlur__fdde1", l = {
   root: O,
-  "full-width": "cfxui__Input__full-width__587b3",
-  input: P,
-  empty: Q,
-  placeholderIcon: U,
-  decorator: Y,
-  small: Z,
-  large: ee,
-  onlight: le,
-  "backdrop-blur": "cfxui__Input__backdrop-blur__6922f",
-  "input-size-initial-large": "cfxui__Input__input-size-initial-large__41d16",
-  "input-size-initial-small": "cfxui__Input__input-size-initial-small__5c106",
-  "input-size-small-large": "cfxui__Input__input-size-small-large__908ed",
-  "input-size-small-small": "cfxui__Input__input-size-small-small__936ed",
-  "input-size-small-medium-large": "cfxui__Input__input-size-small-medium-large__d2cf3",
-  "input-size-small-medium-small": "cfxui__Input__input-size-small-medium-small__50768",
-  "input-size-medium-large": "cfxui__Input__input-size-medium-large__9e343",
-  "input-size-medium-small": "cfxui__Input__input-size-medium-small__5ec16",
-  "input-size-medium-large-large": "cfxui__Input__input-size-medium-large-large__5a58f",
-  "input-size-medium-large-small": "cfxui__Input__input-size-medium-large-small__f4e31",
-  "input-size-large-large": "cfxui__Input__input-size-large-large__bd0f0",
-  "input-size-large-small": "cfxui__Input__input-size-large-small__05100",
-  "input-size-xlarge-large": "cfxui__Input__input-size-xlarge-large__38b57",
-  "input-size-xlarge-small": "cfxui__Input__input-size-xlarge-small__00b5b"
+  fullWidth: P,
+  input: Q,
+  empty: U,
+  placeholderIcon: Y,
+  decorator: Z,
+  small: ee,
+  large: le,
+  onlight: te,
+  backdropBlur: ae,
+  "inputSizeinitial-large": "cfxui__Input__inputSizeinitial-large__12afb",
+  "inputSizeinitial-small": "cfxui__Input__inputSizeinitial-small__33905",
+  "inputSizesmall-large": "cfxui__Input__inputSizesmall-large__e2689",
+  "inputSizesmall-small": "cfxui__Input__inputSizesmall-small__fc7c7",
+  "inputSizesmall-medium-large": "cfxui__Input__inputSizesmall-medium-large__d13bf",
+  "inputSizesmall-medium-small": "cfxui__Input__inputSizesmall-medium-small__1213b",
+  "inputSizemedium-large": "cfxui__Input__inputSizemedium-large__6a868",
+  "inputSizemedium-small": "cfxui__Input__inputSizemedium-small__140cd",
+  "inputSizemedium-large-large": "cfxui__Input__inputSizemedium-large-large__9e60d",
+  "inputSizemedium-large-small": "cfxui__Input__inputSizemedium-large-small__b3a78",
+  "inputSizelarge-large": "cfxui__Input__inputSizelarge-large__b8fe5",
+  "inputSizelarge-small": "cfxui__Input__inputSizelarge-small__40920",
+  "inputSizexlarge-large": "cfxui__Input__inputSizexlarge-large__1ef2c",
+  "inputSizexlarge-small": "cfxui__Input__inputSizexlarge-small__7f6ab"
 };
-function te(n) {
+function ie(n) {
   const {
-    decorator: o,
+    decorator: c,
     loading: p,
     type: a,
-    hasValue: _,
-    onCleare: u
+    hasValue: u,
+    onCleare: _
   } = n;
-  return p ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(H, {}) }) : o ? /* @__PURE__ */ t("div", { className: l.decorator, children: J(o) }) : a === "search" && _ ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(q, { size: "xsmall", areaSize: "large", name: "Close", onClick: u }) }) : null;
+  return p ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(H, {}) }) : c ? /* @__PURE__ */ t("div", { className: l.decorator, children: J(c) }) : a === "search" && u ? /* @__PURE__ */ t("div", { className: l.decorator, children: /* @__PURE__ */ t(q, { size: "xsmall", areaSize: "large", name: "Close", onClick: _ }) }) : null;
 }
-function ce(n) {
+function pe(n) {
   const {
-    id: o,
+    id: c,
     fullWidth: p = !1,
     value: a,
-    onChange: _,
-    onSubmit: u,
+    onChange: u,
+    onSubmit: _,
     onKeyDown: d,
     pattern: f,
-    tabIndex: N,
-    loading: y = !1,
-    spellCheck: k = !0,
-    autofocus: w = !1,
+    tabIndex: C,
+    loading: N = !1,
+    spellCheck: y = !0,
+    autofocus: k = !1,
     disabled: R = !1,
-    className: v,
-    containerClassName: E,
-    placeholder: c = "",
+    className: w,
+    containerClassName: v,
+    placeholder: s = "",
     placeholderIcon: m,
     type: x = "text",
-    size: V = "normal",
-    theme: S = "default",
-    decorator: D,
-    backdropBlur: F = !1,
-    ref: A
-  } = n, [g, K] = i.useState(a), I = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null;
-  let z, h, b;
+    size: E = "normal",
+    theme: B = "default",
+    decorator: V,
+    backdropBlur: W = !1,
+    ref: D
+  } = n, [g, F] = i.useState(a), I = typeof g < "u" && g !== "" && g !== null || typeof a < "u" && a !== "" && a !== null;
+  let S, z, h;
   if (n.type === "number") {
     const {
       min: e,
-      max: r,
-      step: W
+      max: o,
+      step: T
     } = n;
-    b = W ?? 1, z = e ?? Number.MIN_SAFE_INTEGER, h = r ?? Number.MAX_SAFE_INTEGER;
+    h = T ?? 1, S = e ?? Number.MIN_SAFE_INTEGER, z = o ?? Number.MAX_SAFE_INTEGER;
   }
-  const s = i.useCallback((e) => {
-    K(e), _ && _(e);
-  }, [_]), M = i.useCallback(
+  const r = i.useCallback((e) => {
+    F(e), u && u(e);
+  }, [u]), A = i.useCallback(
     (e) => {
       const {
-        value: r
+        value: o
       } = e.target;
       if (f) {
-        f.test(r) && s(r);
+        f.test(o) && r(o);
         return;
       }
-      s(r);
+      r(o);
     },
-    [s, f]
-  ), j = i.useCallback((e) => {
-    d && d(e), u && e.key === "Enter" && u();
-  }, [d, u]), B = i.useCallback(() => {
-    s("");
-  }, [s]), G = C(
+    [r, f]
+  ), K = i.useCallback((e) => {
+    d && d(e), _ && e.key === "Enter" && _();
+  }, [d, _]), M = i.useCallback(() => {
+    r("");
+  }, [r]), j = b(
     l.root,
-    l[S],
-    E,
-    L.getResponsiveFlatClassnames("input-size", V).map((e) => l[e]),
+    l[B],
+    v,
+    L.getResponsiveFlatClassnames("input-size", E).map((e) => l[e]),
     {
-      [l["full-width"]]: p,
-      [l["backdrop-blur"]]: F,
+      [l.fullWidth]: p,
+      [l.backdropBlur]: W,
       [l.empty]: !I
     }
-  ), T = i.useMemo(() => c ? m ? `     ${c.trim()}` : c.trim() : "", [c, m]);
-  return /* @__PURE__ */ X("div", { className: G, children: [
+  ), G = i.useMemo(() => s ? m ? `     ${s.trim()}` : s.trim() : "", [s, m]);
+  return /* @__PURE__ */ X("div", { className: j, children: [
     /* @__PURE__ */ t(
       "input",
       {
-        id: o,
-        ref: A,
+        id: c,
+        ref: D,
         type: x,
-        tabIndex: N,
-        autoFocus: w,
-        className: C(l.input, v),
+        tabIndex: C,
+        autoFocus: k,
+        className: b(l.input, w),
         value: a,
-        placeholder: T,
+        placeholder: G,
         disabled: R,
-        onChange: M,
-        onKeyDown: j,
-        spellCheck: k,
-        min: z,
-        max: h,
-        step: b
+        onChange: A,
+        onKeyDown: K,
+        spellCheck: y,
+        min: S,
+        max: z,
+        step: h
       }
     ),
     m && /* @__PURE__ */ t($, { name: m, className: l.placeholderIcon }),
     /* @__PURE__ */ t(
-      te,
+      ie,
       {
-        decorator: D,
-        loading: y,
+        decorator: V,
+        loading: N,
         type: x,
         hasValue: I,
-        onCleare: B
+        onCleare: M
       }
     )
   ] });
 }
 export {
-  ce as default
+  pe as default
 };

package/dist/components/Input/InputShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import i from "react";
-import r from "../Layout/Flex/Flex.js";
+import r from "../Flex/Flex.js";
 import { Text as a } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import c from "./Input.js";

package/dist/components/Input/RichInput.js

@@ -1,9 +1,9 @@
-import { jsxs as B, jsx as l } from "react/jsx-runtime";
+import { jsxs as B, jsx as t } from "react/jsx-runtime";
 import i from "react";
 import D from "../Button/Button.js";
 import { clsx as F } from "../../utils/clsx.js";
 import "../../utils/links.js";
-import { useDynamicRef as _ } from "../../utils/hooks/useDynamicRef.js";
+import { useDynamicRef as s } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
@@ -12,63 +12,63 @@ const T = "cfxui__RichInput__root__57e6e", j = "cfxui__RichInput__renderer__8b29
   root: T,
   renderer: j,
   clear: w,
-  "richinput-size-initial-large": "cfxui__RichInput__richinput-size-initial-large__cdc8c",
-  "richinput-size-initial-small": "cfxui__RichInput__richinput-size-initial-small__c3ec0",
-  "richinput-size-small-large": "cfxui__RichInput__richinput-size-small-large__1e06d",
-  "richinput-size-small-small": "cfxui__RichInput__richinput-size-small-small__f3518",
-  "richinput-size-small-medium-large": "cfxui__RichInput__richinput-size-small-medium-large__92eec",
-  "richinput-size-small-medium-small": "cfxui__RichInput__richinput-size-small-medium-small__8df57",
-  "richinput-size-medium-large": "cfxui__RichInput__richinput-size-medium-large__43539",
-  "richinput-size-medium-small": "cfxui__RichInput__richinput-size-medium-small__4d0ff",
-  "richinput-size-medium-large-large": "cfxui__RichInput__richinput-size-medium-large-large__df4e3",
-  "richinput-size-medium-large-small": "cfxui__RichInput__richinput-size-medium-large-small__af8ce",
-  "richinput-size-large-large": "cfxui__RichInput__richinput-size-large-large__1dc6d",
-  "richinput-size-large-small": "cfxui__RichInput__richinput-size-large-small__bd0d0",
-  "richinput-size-xlarge-large": "cfxui__RichInput__richinput-size-xlarge-large__ae9e6",
-  "richinput-size-xlarge-small": "cfxui__RichInput__richinput-size-xlarge-small__41461"
+  "richinputSizeinitial-large": "cfxui__RichInput__richinputSizeinitial-large__4991c",
+  "richinputSizeinitial-small": "cfxui__RichInput__richinputSizeinitial-small__cb0af",
+  "richinputSizesmall-large": "cfxui__RichInput__richinputSizesmall-large__d8bc8",
+  "richinputSizesmall-small": "cfxui__RichInput__richinputSizesmall-small__2f49a",
+  "richinputSizesmall-medium-large": "cfxui__RichInput__richinputSizesmall-medium-large__e3523",
+  "richinputSizesmall-medium-small": "cfxui__RichInput__richinputSizesmall-medium-small__a84f9",
+  "richinputSizemedium-large": "cfxui__RichInput__richinputSizemedium-large__80e93",
+  "richinputSizemedium-small": "cfxui__RichInput__richinputSizemedium-small__f42a7",
+  "richinputSizemedium-large-large": "cfxui__RichInput__richinputSizemedium-large-large__b8650",
+  "richinputSizemedium-large-small": "cfxui__RichInput__richinputSizemedium-large-small__30be4",
+  "richinputSizelarge-large": "cfxui__RichInput__richinputSizelarge-large__13d43",
+  "richinputSizelarge-small": "cfxui__RichInput__richinputSizelarge-small__de800",
+  "richinputSizexlarge-large": "cfxui__RichInput__richinputSizexlarge-large__fe171",
+  "richinputSizexlarge-small": "cfxui__RichInput__richinputSizexlarge-small__32365"
 };
 function P(o) {
   const {
     size: m = "normal",
-    value: n,
+    value: a,
     onChange: p,
     onFocus: h,
     onBlur: f,
     onSelect: d,
     onKeyDown: g,
-    className: z,
-    rendered: R,
-    placeholder: x,
-    autoFocus: I,
-    withClearButton: C = !1,
-    ref: b
-  } = o, u = i.useRef(null), r = i.useRef(null), a = _(p), s = _(d), S = i.useCallback((e) => {
-    a.current(e.target.value);
-  }, []), k = i.useCallback(() => {
+    className: S,
+    rendered: z,
+    placeholder: R,
+    autoFocus: x,
+    withClearButton: I = !1,
+    ref: C
+  } = o, _ = i.useRef(null), r = i.useRef(null), l = s(p), n = s(d), b = i.useCallback((e) => {
+    l.current(e.target.value);
+  }, [l]), k = i.useCallback(() => {
     var e;
-    a.current(""), (e = u.current) == null || e.focus();
-  }, []), N = i.useCallback((e) => {
-    if (!s.current || !(e.target instanceof HTMLInputElement))
+    l.current(""), (e = _.current) == null || e.focus();
+  }, [l]), N = i.useCallback((e) => {
+    if (!n.current || !(e.target instanceof HTMLInputElement))
       return;
-    const t = e.target;
-    s.current(t.selectionStart, t.selectionEnd, t.selectionDirection);
-  }, []), v = i.useCallback((e) => {
+    const u = e.target;
+    n.current(u.selectionStart, u.selectionEnd, u.selectionDirection);
+  }, [n]), v = i.useCallback((e) => {
     r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
   }, []), y = F(
     c.root,
-    z,
+    S,
     L.getResponsiveFlatClassnames("richinput-size", m).map((e) => c[e])
   );
-  return /* @__PURE__ */ B("div", { ref: b, className: y, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ B("div", { ref: C, className: y, children: [
+    /* @__PURE__ */ t(
       "input",
       {
-        ref: u,
-        autoFocus: I,
+        ref: _,
+        autoFocus: x,
         type: "text",
-        value: n,
-        onChange: S,
-        placeholder: x,
+        value: a,
+        onChange: b,
+        placeholder: R,
         onBlur: f,
         onFocus: h,
         onScroll: v,
@@ -76,8 +76,8 @@ function P(o) {
         onKeyDown: g
       }
     ),
-    /* @__PURE__ */ l("div", { ref: r, className: c.renderer, children: R }),
-    C && n && /* @__PURE__ */ l("div", { className: c.clear, children: /* @__PURE__ */ l(D, { icon: "Close", onClick: k }) })
+    /* @__PURE__ */ t("div", { ref: r, className: c.renderer, children: z }),
+    I && a && /* @__PURE__ */ t("div", { className: c.clear, children: /* @__PURE__ */ t(D, { icon: "Close", onClick: k }) })
   ] });
 }
 export {

package/dist/components/Island/Island.js

@@ -1,34 +1,34 @@
-import { jsx as c } from "react/jsx-runtime";
-import { clsx as b } from "../../utils/clsx.js";
-import { ui as g } from "../../utils/ui/ui.js";
-const h = "cfxui__Island__root__24fd9", p = "cfxui__Island__grow__c1786", t = {
-  root: h,
-  grow: p,
-  "no-round-border-top-left": "cfxui__Island__no-round-border-top-left__599e3",
-  "no-round-border-top-right": "cfxui__Island__no-round-border-top-right__83fe5",
-  "no-round-border-bottom-left": "cfxui__Island__no-round-border-bottom-left__8d1c9",
-  "no-round-border-bottom-right": "cfxui__Island__no-round-border-bottom-right__f8472"
+import { jsx as r } from "react/jsx-runtime";
+import { clsx as c } from "../../utils/clsx.js";
+import { ui as m } from "../../utils/ui/ui.js";
+const n = "cfxui__Island__root__24fd9", g = "cfxui__Island__grow__c1786", h = "cfxui__Island__noRoundBorderTopLeft__c0f59", p = "cfxui__Island__noRoundBorderTopRight__eedb7", L = "cfxui__Island__noRoundBorderBottomLeft__a4912", T = "cfxui__Island__noRoundBorderBottomRight__db1c7", t = {
+  root: n,
+  grow: g,
+  noRoundBorderTopLeft: h,
+  noRoundBorderTopRight: p,
+  noRoundBorderBottomLeft: L,
+  noRoundBorderBottomRight: T
 };
-var n = /* @__PURE__ */ ((o) => (o[o.TopLeft = 1] = "TopLeft", o[o.TopRight = 2] = "TopRight", o[o.BottomLeft = 4] = "BottomLeft", o[o.BottomRight = 8] = "BottomRight", o[o.Top = 3] = "Top", o[o.Left = 5] = "Left", o[o.Right = 10] = "Right", o[o.Bottom = 12] = "Bottom", o[o.All = 15] = "All", o))(n || {});
-function w(o) {
+var s = /* @__PURE__ */ ((o) => (o[o.TopLeft = 1] = "TopLeft", o[o.TopRight = 2] = "TopRight", o[o.BottomLeft = 4] = "BottomLeft", o[o.BottomRight = 8] = "BottomRight", o[o.Top = 3] = "Top", o[o.Left = 5] = "Left", o[o.Right = 10] = "Right", o[o.Bottom = 12] = "Bottom", o[o.All = 15] = "All", o))(s || {});
+function b(o) {
   const {
-    grow: f = !1,
-    widthQ: r = 0,
+    grow: R = !1,
+    widthQ: i = 0,
     straightCorner: _ = 0,
-    children: u,
-    className: m,
-    ref: d
-  } = o, e = b(t.root, m, {
-    [t.grow]: f,
-    [t["no-round-border-top-left"]]: _ & 1,
-    [t["no-round-border-top-right"]]: _ & 2,
-    [t["no-round-border-bottom-left"]]: _ & 4,
-    [t["no-round-border-bottom-right"]]: _ & 8
+    children: d,
+    className: f,
+    ref: e
+  } = o, u = c(t.root, f, {
+    [t.grow]: R,
+    [t.noRoundBorderTopLeft]: _ & 1,
+    [t.noRoundBorderTopRight]: _ & 2,
+    [t.noRoundBorderBottomLeft]: _ & 4,
+    [t.noRoundBorderBottomRight]: _ & 8
     /* BottomRight */
-  }), i = {};
-  return r > 0 && (i.width = g.q(r)), /* @__PURE__ */ c("div", { className: e, style: i, ref: d, children: u });
+  }), B = {};
+  return i > 0 && (B.width = m.q(i)), /* @__PURE__ */ r("div", { className: u, style: B, ref: e, children: d });
 }
 export {
-  w as Island,
-  n as IslandCorner
+  b as Island,
+  s as IslandCorner
 };

package/dist/components/Layout/Pad/Pad.js

@@ -1,7 +1,7 @@
-import { jsx as x } from "react/jsx-runtime";
-import { clsx as r } from "../../../utils/clsx.js";
-const d = "cfxui__Pad__root__f230e", _ = {
-  root: d,
+import { jsx as d } from "react/jsx-runtime";
+import { clsx as x } from "../../../utils/clsx.js";
+const m = "cfxui__Pad__root__f230e", r = "cfxui__Pad__onlyTop__90400", u = "cfxui__Pad__onlyLeft__3d457", P = "cfxui__Pad__onlyRight__dddb2", y = "cfxui__Pad__onlyBottom__66299", _ = {
+  root: m,
   "offset-none": "cfxui__Pad__offset-none__41261",
   "offset-hairthin": "cfxui__Pad__offset-hairthin__aa20b",
   "offset-thin": "cfxui__Pad__offset-thin__cf68c",
@@ -13,28 +13,28 @@ const d = "cfxui__Pad__root__f230e", _ = {
   "offset-large": "cfxui__Pad__offset-large__7d722",
   "offset-xlarge": "cfxui__Pad__offset-xlarge__ce0b6",
   "offset-safezone": "cfxui__Pad__offset-safezone__2a0b0",
-  "only-top": "cfxui__Pad__only-top__9db9a",
-  "only-left": "cfxui__Pad__only-left__11e11",
-  "only-right": "cfxui__Pad__only-right__3fa8a",
-  "only-bottom": "cfxui__Pad__only-bottom__dc7c9"
+  onlyTop: r,
+  onlyLeft: u,
+  onlyRight: P,
+  onlyBottom: y
 };
-function P(s) {
+function p(a) {
   const {
-    top: o = !1,
+    top: f = !1,
     left: t = !1,
     right: e = !1,
-    bottom: a = !1,
+    bottom: s = !1,
     size: l = "normal",
-    children: c,
-    className: i
-  } = s, f = !(o || t || e || a), n = r(_.root, i, _[`offset-${l}`], {
-    [_["only-top"]]: f || o,
-    [_["only-left"]]: f || t,
-    [_["only-right"]]: f || e,
-    [_["only-bottom"]]: f || a
+    children: n,
+    className: c
+  } = a, o = !(f || t || e || s), i = x(_.root, c, _[`offset-${l}`], {
+    [_.onlyTop]: o || f,
+    [_.onlyLeft]: o || t,
+    [_.onlyRight]: o || e,
+    [_.onlyBottom]: o || s
   });
-  return /* @__PURE__ */ x("div", { className: n, children: c });
+  return /* @__PURE__ */ d("div", { className: i, children: n });
 }
 export {
-  P as Pad
+  p as Pad
 };

package/dist/components/Link/LinkShowcase.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import d from "react";
-import l from "../Layout/Flex/Flex.js";
+import l from "../Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import t from "./ButtonLink.js";

package/dist/components/Logos/LogosShowcase.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import d from "react";
+import m from "../Flex/Flex.js";
 import { Island as c } from "../Island/Island.js";
-import m from "../Layout/Flex/Flex.js";
 import { Pad as l } from "../Layout/Pad/Pad.js";
 import { Text as a } from "../Text/Text.js";
 import "../../utils/ui/ui.js";

package/dist/components/Modal/ModalShowcase.js

@@ -1,13 +1,13 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import i from "react";
+import n from "../Box/Box.js";
+import "../../utils/ui/ui.js";
 import l from "../Button/Button.js";
 import "../../utils/links.js";
-import n from "../Input/Input.js";
+import p from "../Input/Input.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-Cl_RnsqN.js";
-import "../../utils/ui/ui.js";
-import p from "../Layout/Box/Box.js";
 import { LOREM_IPSUM as c } from "../../utils/loremipsum.js";
 import { Modal as r } from "./Modal.js";
 function s() {
@@ -25,7 +25,7 @@ function s() {
         /* @__PURE__ */ o(l, { theme: "primary", onClick: t, text: "Toggle Modal" }),
         d && /* @__PURE__ */ e(r, { onClose: t, children: [
           /* @__PURE__ */ o(r.Header, { title: "Modal Title", description: "Modal Description" }),
-          /* @__PURE__ */ o(p, { mb: 4, children: /* @__PURE__ */ o(n, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
+          /* @__PURE__ */ o(n, { mb: 4, children: /* @__PURE__ */ o(p, { theme: "onlight", placeholder: "Input", fullWidth: !0 }) }),
           "Modal content: ",
           c,
           /* @__PURE__ */ e(r.Footer, { children: [

package/dist/components/OnScreenSensor.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-import t from "react";
-import { noop as o } from "../utils/functional.js";
-import { useDynamicRef as s } from "../utils/hooks/useDynamicRef.js";
+import s from "react";
+import { noop as c } from "../utils/functional.js";
+import { useDynamicRef as i } from "../utils/hooks/useDynamicRef.js";
 import "../utils/hooks/useGlobalKeyboardEvent.js";
 import "../utils/hooks/useKeyboardClose.js";
 import "../index-Cl_RnsqN.js";
@@ -9,20 +9,20 @@ const l = {
   width: "0",
   height: "0"
 };
-function w(c) {
+function w(f) {
   const {
-    onEnter: i = o,
-    onLeave: f = o
-  } = c, u = s(i), m = s(f), e = t.useRef(null);
-  return t.useEffect(() => {
+    onEnter: u = c,
+    onLeave: m = c
+  } = f, r = i(u), n = i(m), e = s.useRef(null);
+  return s.useEffect(() => {
     if (!e.current)
       return;
-    const r = new IntersectionObserver((p) => {
-      const [n] = p;
-      n && (n.isIntersecting ? u.current() : m.current());
+    const t = new IntersectionObserver((p) => {
+      const [o] = p;
+      o && (o.isIntersecting ? r.current() : n.current());
     });
-    return r.observe(e.current), () => r.disconnect();
-  }, []), /* @__PURE__ */ a("span", { ref: e, style: l });
+    return t.observe(e.current), () => t.disconnect();
+  }, [r, n]), /* @__PURE__ */ a("span", { ref: e, style: l });
 }
 export {
   w as OnScreenSensor

package/dist/components/Popover/Popover.js

@@ -1,13 +1,13 @@
 import { jsxs as P, jsx as h } from "react/jsx-runtime";
 import { Interactive as d } from "../Interactive/Interactive.js";
 import { clsx as r } from "../../utils/clsx.js";
-const N = "cfxui__Popover__root__4521b", C = "cfxui__Popover__active__e4504", g = "cfxui__Popover__popover__bea1e", M = "cfxui__Popover__appearance__20d42", o = {
+const N = "cfxui__Popover__root__4521b", C = "cfxui__Popover__popover__bea1e", g = "cfxui__Popover__active__e4504", M = "cfxui__Popover__appearance__20d42", o = {
   root: N,
-  active: C,
-  popover: g,
-  appearance: M,
+  popover: C,
   "pos-top-right": "cfxui__Popover__pos-top-right__95a54",
-  "pos-top-left": "cfxui__Popover__pos-top-left__a93aa"
+  "pos-top-left": "cfxui__Popover__pos-top-left__a93aa",
+  active: g,
+  appearance: M
 };
 function A(s) {
   const {

package/dist/components/Popover/PopoverShowcase.js

@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import s from "react";
 import a from "../Button/Button.js";
 import "../../utils/links.js";
-import m from "../Layout/Flex/Flex.js";
+import m from "../Flex/Flex.js";
 import { usePopoverController as i } from "../../utils/hooks/usePopoverController.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";

package/dist/components/{Layout → RSC}/Box/Box.d.ts

@@ -20,6 +20,7 @@ export interface BoxProps extends MPProps {
     as?: React.ElementType;
 }
 export declare const stringPropFormater: (val: string) => string;
+export declare function getBoxClassNames(props: BoxProps): string;
+export declare function getBoxStyles(props: BoxProps): React.CSSProperties;
 declare function Box(props: BoxProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof Box>;
-export default _default;
+export default Box;