@cfx-dev/ui-components 4.3.1 → 4.3.3

package/dist/components/Checkbox/Checkbox.js

@@ -1,9 +1,9 @@
-import { jsxs as z, jsx as p } from "react/jsx-runtime";
-import * as c from "react";
-import A from "react";
-import { u as w, d as L, c as O, P as E, e as S, f as j } from "../../index-BHuChyf5.js";
-import { u as H } from "../../index-BZPx6jYI.js";
-import { P as K } from "../../index-HDl8nGsm.js";
+import { jsx as u, jsxs as w, Fragment as $ } from "react/jsx-runtime";
+import * as l from "react";
+import G from "react";
+import { c as K, P as E, d as X, u as B, e as q, f as J } from "../../index-ByKwkZKY.js";
+import { u as Q } from "../../index-BZPx6jYI.js";
+import { P as V } from "../../index-CriGVLlo.js";
 import "../Icons/cfx-icons/Close.js";
 import "../Icons/cfx-icons/Controller.js";
 import "../Icons/cfx-icons/Copy.js";
@@ -25,16 +25,16 @@ import "../Icons/cfx-icons/MoreInfo.js";
 import "../Icons/cfx-icons/Pencil.js";
 import "../Icons/cfx-icons/Play.js";
 import "../Icons/cfx-icons/Plus.js";
-import g from "../Icons/cfx-icons/Radio.js";
+import z from "../Icons/cfx-icons/Radio.js";
 import "../Icons/cfx-icons/Refresh.js";
 import "../Icons/cfx-icons/RightArrow.js";
 import "../Icons/cfx-icons/RightChevron.js";
 import "../Icons/cfx-icons/Search.js";
 import "../Icons/cfx-icons/Sort.js";
-import $ from "../Icons/cfx-icons/Square.js";
+import W from "../Icons/cfx-icons/Square.js";
 import "../Icons/cfx-icons/SquareCheck.js";
 import "../Icons/cfx-icons/Stop.js";
-import X from "../Icons/cfx-icons/Tick.js";
+import Y from "../Icons/cfx-icons/Tick.js";
 import "../Icons/cfx-icons/Transfer.js";
 import "../Icons/cfx-icons/Trash.js";
 import "../Icons/cfx-icons/Undo.js";
@@ -55,191 +55,286 @@ import "../Icons/cfx-icons-big/Subscriptions.js";
 import "../Icons/cfx-icons-big/Upload.js";
 import "../Icons/cfx-icons-big/Warning.js";
 import "../Icons/cfx-icons-big/Confirm.js";
-import { clsx as P } from "../../utils/clsx.js";
-import { getColor as F } from "../../utils/color.js";
-var y = "Checkbox", [G, lo] = O(y), [J, Q] = G(y), q = c.forwardRef(
-  (e, l) => {
+import { clsx as g } from "../../utils/clsx.js";
+import { getColor as Z } from "../../utils/color.js";
+var R = "Checkbox", [ee, bo] = K(R), [oe, N] = ee(R);
+function te(o) {
+  const {
+    __scopeCheckbox: n,
+    checked: r,
+    children: a,
+    defaultChecked: t,
+    disabled: e,
+    form: f,
+    name: _,
+    onCheckedChange: d,
+    required: m,
+    value: h = "on",
+    // @ts-expect-error
+    internal_do_not_use_render: i
+  } = o, [p, C] = X({
+    prop: r,
+    defaultProp: t ?? !1,
+    onChange: d,
+    caller: R
+  }), [x, v] = l.useState(null), [I, c] = l.useState(null), s = l.useRef(!1), y = x ? !!f || !!x.closest("form") : (
+    // We set this to true by default so that events bubble to forms without JS (SSR)
+    !0
+  ), P = {
+    checked: p,
+    disabled: e,
+    setChecked: C,
+    control: x,
+    setControl: v,
+    name: _,
+    form: f,
+    value: h,
+    hasConsumerStoppedPropagationRef: s,
+    required: m,
+    defaultChecked: k(t) ? !1 : t,
+    isFormControl: y,
+    bubbleInput: I,
+    setBubbleInput: c
+  };
+  return /* @__PURE__ */ u(
+    oe,
+    {
+      scope: n,
+      ...P,
+      children: re(i) ? i(P) : a
+    }
+  );
+}
+var T = "CheckboxTrigger", M = l.forwardRef(
+  ({ __scopeCheckbox: o, onKeyDown: n, onClick: r, ...a }, t) => {
     const {
-      __scopeCheckbox: o,
-      name: n,
-      checked: u,
-      defaultChecked: r,
-      required: k,
-      disabled: s,
-      value: h = "on",
-      onCheckedChange: a,
-      form: f,
-      ...x
-    } = e, [t, b] = c.useState(null), N = w(l, (i) => b(i)), _ = c.useRef(!1), I = t ? f || !!t.closest("form") : !0, [C, R] = L({
-      prop: u,
-      defaultProp: r ?? !1,
-      onChange: a,
-      caller: y
-    }), T = c.useRef(C);
-    return c.useEffect(() => {
-      const i = t == null ? void 0 : t.form;
-      if (i) {
-        const v = () => R(T.current);
-        return i.addEventListener("reset", v), () => i.removeEventListener("reset", v);
+      control: e,
+      value: f,
+      disabled: _,
+      checked: d,
+      required: m,
+      setControl: h,
+      setChecked: i,
+      hasConsumerStoppedPropagationRef: p,
+      isFormControl: C,
+      bubbleInput: x
+    } = N(T, o), v = B(t, h), I = l.useRef(d);
+    return l.useEffect(() => {
+      const c = e == null ? void 0 : e.form;
+      if (c) {
+        const s = () => i(I.current);
+        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
       }
-    }, [t, R]), /* @__PURE__ */ z(J, { scope: o, state: C, disabled: s, children: [
-      /* @__PURE__ */ p(
-        E.button,
-        {
-          type: "button",
-          role: "checkbox",
-          "aria-checked": d(C) ? "mixed" : C,
-          "aria-required": k,
-          "data-state": M(C),
-          "data-disabled": s ? "" : void 0,
-          disabled: s,
-          value: h,
-          ...x,
-          ref: N,
-          onKeyDown: S(e.onKeyDown, (i) => {
-            i.key === "Enter" && i.preventDefault();
-          }),
-          onClick: S(e.onClick, (i) => {
-            R((v) => d(v) ? !0 : !v), I && (_.current = i.isPropagationStopped(), _.current || i.stopPropagation());
-          })
-        }
-      ),
-      I && /* @__PURE__ */ p(
-        D,
-        {
-          control: t,
-          bubbles: !_.current,
-          name: n,
-          value: h,
-          checked: C,
-          required: k,
-          disabled: s,
-          form: f,
-          style: { transform: "translateX(-100%)" },
-          defaultChecked: d(r) ? !1 : r
-        }
-      )
-    ] });
+    }, [e, i]), /* @__PURE__ */ u(
+      E.button,
+      {
+        type: "button",
+        role: "checkbox",
+        "aria-checked": k(d) ? "mixed" : d,
+        "aria-required": m,
+        "data-state": O(d),
+        "data-disabled": _ ? "" : void 0,
+        disabled: _,
+        value: f,
+        ...a,
+        ref: v,
+        onKeyDown: q(n, (c) => {
+          c.key === "Enter" && c.preventDefault();
+        }),
+        onClick: q(r, (c) => {
+          i((s) => k(s) ? !0 : !s), x && C && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
+        })
+      }
+    );
   }
 );
-q.displayName = y;
-var B = "CheckboxIndicator", U = c.forwardRef(
-  (e, l) => {
-    const { __scopeCheckbox: o, forceMount: n, ...u } = e, r = Q(B, o);
-    return /* @__PURE__ */ p(K, { present: n || d(r.state) || r.state === !0, children: /* @__PURE__ */ p(
-      E.span,
+M.displayName = T;
+var U = l.forwardRef(
+  (o, n) => {
+    const {
+      __scopeCheckbox: r,
+      name: a,
+      checked: t,
+      defaultChecked: e,
+      required: f,
+      disabled: _,
+      value: d,
+      onCheckedChange: m,
+      form: h,
+      ...i
+    } = o;
+    return /* @__PURE__ */ u(
+      te,
       {
-        "data-state": M(r.state),
-        "data-disabled": r.disabled ? "" : void 0,
-        ...u,
-        ref: l,
-        style: { pointerEvents: "none", ...e.style }
+        __scopeCheckbox: r,
+        checked: t,
+        defaultChecked: e,
+        disabled: _,
+        required: f,
+        onCheckedChange: m,
+        name: a,
+        form: h,
+        value: d,
+        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ w($, { children: [
+          /* @__PURE__ */ u(
+            M,
+            {
+              ...i,
+              ref: n,
+              __scopeCheckbox: r
+            }
+          ),
+          p && /* @__PURE__ */ u(
+            L,
+            {
+              __scopeCheckbox: r
+            }
+          )
+        ] })
       }
-    ) });
+    );
   }
 );
-U.displayName = B;
-var V = "CheckboxBubbleInput", D = c.forwardRef(
-  ({
-    __scopeCheckbox: e,
-    control: l,
-    checked: o,
-    bubbles: n = !0,
-    defaultChecked: u,
-    ...r
-  }, k) => {
-    const s = c.useRef(null), h = w(s, k), a = H(o), f = j(l);
-    c.useEffect(() => {
-      const t = s.current;
-      if (!t) return;
-      const b = window.HTMLInputElement.prototype, _ = Object.getOwnPropertyDescriptor(
-        b,
+U.displayName = R;
+var A = "CheckboxIndicator", D = l.forwardRef(
+  (o, n) => {
+    const { __scopeCheckbox: r, forceMount: a, ...t } = o, e = N(A, r);
+    return /* @__PURE__ */ u(
+      V,
+      {
+        present: a || k(e.checked) || e.checked === !0,
+        children: /* @__PURE__ */ u(
+          E.span,
+          {
+            "data-state": O(e.checked),
+            "data-disabled": e.disabled ? "" : void 0,
+            ...t,
+            ref: n,
+            style: { pointerEvents: "none", ...o.style }
+          }
+        )
+      }
+    );
+  }
+);
+D.displayName = A;
+var F = "CheckboxBubbleInput", L = l.forwardRef(
+  ({ __scopeCheckbox: o, ...n }, r) => {
+    const {
+      control: a,
+      hasConsumerStoppedPropagationRef: t,
+      checked: e,
+      defaultChecked: f,
+      required: _,
+      disabled: d,
+      name: m,
+      value: h,
+      form: i,
+      bubbleInput: p,
+      setBubbleInput: C
+    } = N(F, o), x = B(r, C), v = Q(e), I = J(a);
+    l.useEffect(() => {
+      const s = p;
+      if (!s) return;
+      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
+        y,
         "checked"
-      ).set;
-      if (a !== o && _) {
-        const I = new Event("click", { bubbles: n });
-        t.indeterminate = d(o), _.call(t, d(o) ? !1 : o), t.dispatchEvent(I);
+      ).set, j = !t.current;
+      if (v !== e && S) {
+        const H = new Event("click", { bubbles: j });
+        s.indeterminate = k(e), S.call(s, k(e) ? !1 : e), s.dispatchEvent(H);
       }
-    }, [a, o, n]);
-    const x = c.useRef(d(o) ? !1 : o);
-    return /* @__PURE__ */ p(
+    }, [p, v, e, t]);
+    const c = l.useRef(k(e) ? !1 : e);
+    return /* @__PURE__ */ u(
       E.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: u ?? x.current,
-        ...r,
+        defaultChecked: f ?? c.current,
+        required: _,
+        disabled: d,
+        name: m,
+        value: h,
+        form: i,
+        ...n,
         tabIndex: -1,
-        ref: h,
+        ref: x,
         style: {
-          ...r.style,
-          ...f,
+          ...n.style,
+          ...I,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
-          margin: 0
+          margin: 0,
+          // We transform because the input is absolutely positioned but we have
+          // rendered it **after** the button. This pulls it back to sit on top
+          // of the button.
+          transform: "translateX(-100%)"
         }
       }
     );
   }
 );
-D.displayName = V;
-function d(e) {
-  return e === "indeterminate";
+L.displayName = F;
+function re(o) {
+  return typeof o == "function";
+}
+function k(o) {
+  return o === "indeterminate";
 }
-function M(e) {
-  return d(e) ? "indeterminate" : e ? "checked" : "unchecked";
+function O(o) {
+  return k(o) ? "indeterminate" : o ? "checked" : "unchecked";
 }
-var W = q, Y = U;
-const Z = "cfxui__Checkbox__rootUnset__cbb57", ee = "cfxui__Checkbox__root__865aa", oe = "cfxui__Checkbox__square__029aa", te = "cfxui__Checkbox__indicator__2afc0", re = "cfxui__Checkbox__checked__b4081", ie = "cfxui__Checkbox__radioIcon__719e7", ce = "cfxui__Checkbox__tickIcon__a7f19", m = {
-  rootUnset: Z,
-  root: ee,
-  square: oe,
-  indicator: te,
-  checked: re,
+const ce = "cfxui__Checkbox__rootUnset__cbb57", ne = "cfxui__Checkbox__root__865aa", ie = "cfxui__Checkbox__square__029aa", se = "cfxui__Checkbox__indicator__2afc0", ae = "cfxui__Checkbox__checked__b4081", de = "cfxui__Checkbox__radioIcon__719e7", me = "cfxui__Checkbox__tickIcon__a7f19", b = {
+  rootUnset: ce,
+  root: ne,
+  square: ie,
+  indicator: se,
+  checked: ae,
   "size-small": "cfxui__Checkbox__size-small__02440",
-  radioIcon: ie,
-  tickIcon: ce,
+  radioIcon: de,
+  tickIcon: me,
   "size-normal": "cfxui__Checkbox__size-normal__700f4",
   "size-large": "cfxui__Checkbox__size-large__28529"
 };
-function ne(e) {
+function pe(o) {
   const {
-    id: l,
-    size: o = "normal",
-    rootClassName: n,
-    indicatorClassName: u,
-    colorToken: r,
-    color: k,
-    opacity: s,
-    luminance: h,
-    iconIndicator: a = g,
-    ...f
-  } = e, x = P(
-    m.root,
-    m.rootUnset,
-    m[`size-${o}`],
-    n
-  ), t = F(e), b = P(
-    m.checked,
-    a === X && m.tickIcon,
-    a === g && m.radioIcon
+    id: n,
+    size: r = "normal",
+    rootClassName: a,
+    indicatorClassName: t,
+    colorToken: e,
+    color: f,
+    opacity: _,
+    luminance: d,
+    iconIndicator: m = z,
+    ...h
+  } = o, i = g(
+    b.root,
+    b.rootUnset,
+    b[`size-${r}`],
+    a
+  ), p = Z(o), C = g(
+    b.checked,
+    m === Y && b.tickIcon,
+    m === z && b.radioIcon
   );
-  return /* @__PURE__ */ z(
-    W,
+  return /* @__PURE__ */ w(
+    U,
     {
-      ...f,
-      id: l,
-      style: { color: t },
-      className: x,
+      ...h,
+      id: n,
+      style: { color: p },
+      className: i,
       children: [
-        /* @__PURE__ */ p($, { className: m.square }),
-        /* @__PURE__ */ p(Y, { className: P(m.indicator, u), children: /* @__PURE__ */ p(a, { className: b }) })
+        /* @__PURE__ */ u(W, { className: b.square }),
+        /* @__PURE__ */ u(D, { className: g(b.indicator, t), children: /* @__PURE__ */ u(m, { className: C }) })
       ]
     }
   );
 }
-const uo = A.memo(ne);
+const ko = G.memo(pe);
 export {
-  uo as default
+  ko as default
 };

package/dist/components/DataTable/DataTable.js

@@ -2,9 +2,9 @@ import { jsx as t, jsxs as x } from "react/jsx-runtime";
 import s, { useState as k } from "react";
 import $ from "../Checkbox/Checkbox.js";
 import { clsx as p } from "../../utils/clsx.js";
-import "../Layout/Box/Box.js";
-import "../Layout/Flex/Flex.js";
+import "../Box/Box.js";
 import "../../utils/ui/ui.js";
+import "../Flex/Flex.js";
 import "../Table/TableCellCheckbox.js";
 import S from "../Table/TableIconButton.js";
 import { Text as j } from "../Text/Text.js";

package/dist/components/DataTable/DataTableShowcase.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import d from "react";
 import { Badge as l } from "../Badge/Badge.js";
-import a from "../Layout/Flex/Flex.js";
-import { Scrollable as c } from "../Layout/Scrollable/Scrollable.js";
+import a from "../Flex/Flex.js";
+import { Scrollable as c } from "../Scrollable/Scrollable.js";
 import { Text as r } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
 import { DataTable as o } from "./DataTable.js";

package/dist/components/DropdownSelect/DropdownSelect.js

@@ -1,13 +1,13 @@
 import { jsx as s, jsxs as De } from "react/jsx-runtime";
 import * as a from "react";
 import { useRef as vo, useState as ho, useEffect as Mo } from "react";
-import { c as me, P as O, e as g, u as U, d as ye, g as Co, b as Ro, h as Te } from "../../index-BHuChyf5.js";
-import { c as Ae, u as Ne } from "../../index-DZEAOJqB.js";
-import { u as de, a as _e, c as Oe, R as So, A as Io, h as bo, b as Do, d as Eo, F as xo, D as Po, C as yo, e as To } from "../../Combination-CSgOhzm-.js";
-import { P as ge } from "../../index-HDl8nGsm.js";
-import { Icon as Ao } from "../Icon/Icon.js";
-import No from "../Layout/Flex/Flex.js";
+import { c as me, P as O, e as g, u as U, d as ye, g as Co, b as Ro, h as Te } from "../../index-ByKwkZKY.js";
+import { c as Ae, u as Ne } from "../../index-DlJ4qUbZ.js";
+import { u as de, a as _e, c as Oe, R as So, A as Io, h as bo, b as Do, d as Eo, F as xo, D as Po, C as yo, e as To } from "../../Combination-BGYCZNoJ.js";
+import { P as ge } from "../../index-CriGVLlo.js";
+import Ao from "../Flex/Flex.js";
 import { clsx as Ee } from "../../utils/clsx.js";
+import { Icon as No } from "../Icon/Icon.js";
 import { mergeRefs as Oo } from "../../utils/mergeRefs.js";
 import { ui as xe } from "../../utils/ui/ui.js";
 var le = "rovingFocusGroup.onEntryFocus", Fo = { bubbles: !1, cancelable: !0 }, Z = "RovingFocusGroup", [fe, Fe, ko] = Ae(Z), [Go, ke] = me(
@@ -912,11 +912,11 @@ var tt = "DropdownMenuSubContent", rt = a.forwardRef((e, n) => {
 });
 rt.displayName = tt;
 var at = lo, ct = po, st = _o, it = go;
-const ut = "cfxui__DropdownSelect__trigger__c03df", lt = "cfxui__DropdownSelect__onlight__f0191", dt = "cfxui__DropdownSelect__fullWidth__dce56", ft = "cfxui__DropdownSelect__icon__d05b8", pt = "cfxui__DropdownSelect__placeholder__e0d89", mt = "cfxui__DropdownSelect__content__05ed8", _t = "cfxui__DropdownSelect__item__0e45f", T = {
-  trigger: ut,
-  onlight: lt,
-  fullWidth: dt,
-  icon: ft,
+const ut = "cfxui__DropdownSelect__icon__d05b8", lt = "cfxui__DropdownSelect__trigger__c03df", dt = "cfxui__DropdownSelect__onlight__f0191", ft = "cfxui__DropdownSelect__fullWidth__dce56", pt = "cfxui__DropdownSelect__placeholder__e0d89", mt = "cfxui__DropdownSelect__content__05ed8", _t = "cfxui__DropdownSelect__item__0e45f", T = {
+  icon: ut,
+  trigger: lt,
+  onlight: dt,
+  fullWidth: ft,
   placeholder: pt,
   content: mt,
   item: _t,
@@ -976,9 +976,9 @@ function Tt(e) {
         ref: Oo(_, u),
         className: v,
         disabled: d,
-        children: /* @__PURE__ */ De(No, { gap: "small", centered: !0, spaceBetween: !0, children: [
+        children: /* @__PURE__ */ De(Ao, { gap: "small", centered: !0, spaceBetween: !0, children: [
           o || m,
-          /* @__PURE__ */ s(Ao, { className: T.icon, name: "DownChevron" })
+          /* @__PURE__ */ s(No, { className: T.icon, name: "DownChevron" })
         ] })
       }
     ),

package/dist/components/DropdownSelect/DropdownSelectShowcase.js

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

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { FlexProps as FlexPropsRSC } from '../RSC/Flex';
+
+export type FlexProps = FlexPropsRSC;
+declare function Flex(props: FlexProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Flex>;
+export default _default;

package/dist/components/Flex/Flex.js

@@ -0,0 +1,23 @@
+import { jsx as l } from "react/jsx-runtime";
+import t from "react";
+import r from "../Box/Box.js";
+import "../../utils/ui/ui.js";
+import { getFlexClassNames as a, getFlexStyles as c, getBoxProps as n } from "../RSC/Flex/Flex.js";
+function x(e) {
+  const {
+    children: o
+  } = e, m = a(e), s = t.useMemo(() => c(e), [e]);
+  return /* @__PURE__ */ l(
+    r,
+    {
+      className: m,
+      style: s,
+      ...n(e),
+      children: o
+    }
+  );
+}
+const g = t.memo(x);
+export {
+  g as default
+};

package/dist/components/Flex/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export type { FlexDirectionType, FlexAlignItemsType, FlexJustifyContentType, FlexWrapType, FlexCentredType, } from '../RSC/Flex/Flex.types';
+export { FlexDirectionEnum, FlexAlignItemsEnum, FlexJustifyContentEnum, FlexWrapEnum, FlexCentredEnum, } from '../RSC/Flex/Flex.types';
+export { FlexRestricter } from '../RSC/Flex/FlexRestricter';
+export type { FlexRestricterProps } from '../RSC/Flex/FlexRestricter';

package/dist/components/{Layout/Flex → Flex}/index.js

@@ -1,6 +1,6 @@
 import { default as r } from "./Flex.js";
-import { FlexAlignItemsEnum as x, FlexCentredEnum as l, FlexDirectionEnum as m, FlexJustifyContentEnum as o, FlexWrapEnum as u } from "./Flex.types.js";
-import { FlexRestricter as f } from "./FlexRestricter.js";
+import { FlexAlignItemsEnum as x, FlexCentredEnum as l, FlexDirectionEnum as m, FlexJustifyContentEnum as o, FlexWrapEnum as u } from "../RSC/Flex/Flex.types.js";
+import { FlexRestricter as f } from "../RSC/Flex/FlexRestricter.js";
 export {
   r as Flex,
   x as FlexAlignItemsEnum,

package/dist/components/Flyout/Flyout.js

@@ -9,18 +9,18 @@ import { Interactive as y } from "../Interactive/Interactive.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as F } from "../../utils/hooks/useKeyboardClose.js";
 import { useOutlet as x } from "../../utils/hooks/useOutlet.js";
-const k = "cfxui__Flyout__root__eba04", b = "cfxui__Flyout__holder__d80b5", v = "cfxui__Flyout__active__14a29", C = "cfxui__Flyout__backdrop__57f9e", N = "cfxui__Flyout__mask__72713", z = "cfxui__Flyout__content__04e42", L = "cfxui__Flyout__header__40009", O = "cfxui__Flyout__title__b235a", o = {
+const k = "cfxui__Flyout__root__eba04", b = "cfxui__Flyout__backdrop__57f9e", v = "cfxui__Flyout__mask__72713", C = "cfxui__Flyout__holder__d80b5", N = "cfxui__Flyout__content__04e42", z = "cfxui__Flyout__active__14a29", L = "cfxui__Flyout__header__40009", O = "cfxui__Flyout__title__b235a", o = {
   root: k,
+  backdrop: b,
+  mask: v,
+  holder: C,
+  content: N,
   "size-normal": "cfxui__Flyout__size-normal__e1165",
-  holder: b,
   "size-small": "cfxui__Flyout__size-small__038a5",
   "size-xsmall": "cfxui__Flyout__size-xsmall__839e8",
-  active: v,
-  backdrop: C,
+  active: z,
   "backdrop-appearance": "cfxui__Flyout__backdrop-appearance__d9564",
-  mask: N,
   "holder-appearance": "cfxui__Flyout__holder-appearance__e818c",
-  content: z,
   header: L,
   title: O
 }, E = "flyout-outlet";

package/dist/components/InfoPanel/InfoPanel.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import u from "react";
 import { Icon as _ } from "../Icon/Icon.js";
 import { clsx as x } from "../../utils/clsx.js";
-const I = "cfxui__InfoPanel__rootUnset__7ca3f", p = "cfxui__InfoPanel__root__a19ad", P = "cfxui__InfoPanel__interactive__1b051", v = "cfxui__InfoPanel__interactiveIcon__03510", y = "cfxui__InfoPanel__icon__b2fca", d = "cfxui__InfoPanel__content__43082", n = {
+const I = "cfxui__InfoPanel__rootUnset__7ca3f", p = "cfxui__InfoPanel__root__a19ad", P = "cfxui__InfoPanel__interactiveIcon__03510", v = "cfxui__InfoPanel__interactive__1b051", y = "cfxui__InfoPanel__icon__b2fca", d = "cfxui__InfoPanel__content__43082", n = {
   rootUnset: I,
   root: p,
-  interactive: P,
-  interactiveIcon: v,
+  interactiveIcon: P,
+  interactive: v,
   "type-neutral": "cfxui__InfoPanel__type-neutral__c4653",
   "type-error": "cfxui__InfoPanel__type-error__bdfbf",
   "type-success": "cfxui__InfoPanel__type-success__e3f02",

package/dist/components/InfoPanel/InfoPanelShowcase.js

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