@5ive-souls/controls 0.0.2 → 0.0.4

package/dist/components/Section/Section.js

@@ -1,12 +1,753 @@
-import "react/jsx-runtime";
-import "@fluentui/react-components";
-import "react";
-import "../FlexBox/FlexBox.js";
-import "../FlexBox/FlexBoxItem/FlexBoxItem.js";
+import { jsxs as re, jsx as A } from "react/jsx-runtime";
+import { makeStyles as ge, tokens as I, mergeClasses as q, Button as Te, Divider as be } from "@fluentui/react-components";
+import * as p from "react";
+import xe from "react";
+import { FlexBox as ne } from "../FlexBox/FlexBox.js";
+import { FlexBoxItem as U } from "../FlexBox/FlexBoxItem/FlexBoxItem.js";
 import "../FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
-import "../ClassNames.js";
-import "./SectionUtils.js";
-import { S as f } from "../../Section-Br38kDAa.js";
+import { ClassNames as Q } from "../ClassNames.js";
+import { SectionUtils as oe } from "./SectionUtils.js";
+import { e as Ae, f as Pe } from "../../chunk-3-CMb_cR4A.js";
+const we = {
+  durationUltraFast: 50,
+  durationFaster: 100,
+  durationFast: 150,
+  durationNormal: 200,
+  durationGentle: 250,
+  durationSlow: 300,
+  durationSlower: 400,
+  durationUltraSlow: 500
+}, Ie = {
+  curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)",
+  curveAccelerateMid: "cubic-bezier(1,0,1,1)",
+  curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)",
+  curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)",
+  curveDecelerateMid: "cubic-bezier(0,0,0,1)",
+  curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)",
+  curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)",
+  curveEasyEase: "cubic-bezier(0.33,0,0.67,1)",
+  curveLinear: "cubic-bezier(0,0,1,1)"
+}, x = {
+  ...we,
+  ...Ie
+}, ue = p.createContext(void 0), Ne = {
+  // eslint-disable-next-line @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )
+  targetDocument: typeof document == "object" ? document : void 0,
+  dir: "ltr"
+};
+ue.Provider;
+function _e() {
+  var e;
+  return (e = p.useContext(ue)) !== null && e !== void 0 ? e : Ne;
+}
+function ke() {
+  return (
+    /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/
+    typeof window < "u" && !!(window.document && // eslint-disable-next-line @typescript-eslint/no-deprecated
+    window.document.createElement)
+  );
+}
+const G = ke() ? p.useLayoutEffect : p.useEffect, Z = (e) => {
+  const n = p.useRef(() => {
+    throw new Error("Cannot call an event handler while rendering");
+  });
+  return G(() => {
+    n.current = e;
+  }, [
+    e
+  ]), p.useCallback((...r) => {
+    const o = n.current;
+    return o(...r);
+  }, [
+    n
+  ]);
+};
+function Oe() {
+  const e = p.useRef(!0);
+  return e.current ? (e.current = !1, !0) : e.current;
+}
+function De() {
+  return p.useReducer((e) => e + 1, 0)[1];
+}
+function ze(...e) {
+  "use no memo";
+  const n = p.useCallback(
+    (r) => {
+      n.current = r;
+      for (const o of e)
+        typeof o == "function" ? o(r) : o && (o.current = r);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
+    [
+      ...e
+    ]
+  );
+  return n;
+}
+function $e(e) {
+  if (e.playState === "running") {
+    var n;
+    if (e.overallProgress !== void 0) {
+      var r;
+      const l = (r = e.overallProgress) !== null && r !== void 0 ? r : 0;
+      return l > 0 && l < 1;
+    }
+    var o;
+    const u = Number((o = e.currentTime) !== null && o !== void 0 ? o : 0);
+    var i;
+    const d = Number((i = (n = e.effect) === null || n === void 0 ? void 0 : n.getTiming().duration) !== null && i !== void 0 ? i : 0);
+    return u > 0 && u < d;
+  }
+  return !1;
+}
+const Le = {
+  fill: "forwards"
+}, Be = {
+  duration: 1
+};
+function le() {
+  var e;
+  const n = typeof window < "u" && typeof ((e = window.Animation) === null || e === void 0 ? void 0 : e.prototype.persist) == "function";
+  return p.useCallback((r, o, i) => {
+    const u = Array.isArray(o) ? o : [
+      o
+    ], { isReducedMotion: d } = i, l = u.map((s) => {
+      const { keyframes: v, reducedMotion: f = Be, ...m } = s, { keyframes: C = v, ...R } = f, g = d ? C : v, b = {
+        ...Le,
+        ...m,
+        // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+        ...d && R
+      };
+      try {
+        const c = r.animate(g, b);
+        if (n)
+          c == null || c.persist();
+        else {
+          const S = g[g.length - 1];
+          var T;
+          Object.assign((T = r.style) !== null && T !== void 0 ? T : {}, S);
+        }
+        return c;
+      } catch {
+        return null;
+      }
+    }).filter((s) => !!s);
+    return {
+      set playbackRate(s) {
+        l.forEach((v) => {
+          v.playbackRate = s;
+        });
+      },
+      setMotionEndCallbacks(s, v) {
+        const f = l.map((m) => new Promise((C, R) => {
+          m.onfinish = () => C(), m.oncancel = () => R();
+        }));
+        Promise.all(f).then(() => {
+          s();
+        }).catch(() => {
+          v();
+        });
+      },
+      isRunning() {
+        return l.some((s) => $e(s));
+      },
+      cancel: () => {
+        l.forEach((s) => {
+          s.cancel();
+        });
+      },
+      pause: () => {
+        l.forEach((s) => {
+          s.pause();
+        });
+      },
+      play: () => {
+        l.forEach((s) => {
+          s.play();
+        });
+      },
+      finish: () => {
+        l.forEach((s) => {
+          s.finish();
+        });
+      },
+      reverse: () => {
+        l.forEach((s) => {
+          s.reverse();
+        });
+      }
+    };
+  }, [
+    n
+  ]);
+}
+function Fe() {
+  const [e, n] = p.useState(0), r = p.useRef(), o = le();
+  return p.useEffect(() => {
+    if (e > 0) {
+      var i;
+      (i = r.current) === null || i === void 0 || i.call(r);
+    }
+  }, [
+    e
+  ]), p.useCallback((i, u, d) => typeof i.animate == "function" ? o(i, u, d) : {
+    setMotionEndCallbacks(s) {
+      r.current = s, n((v) => v + 1);
+    },
+    set playbackRate(s) {
+    },
+    isRunning() {
+      return !1;
+    },
+    cancel() {
+    },
+    pause() {
+    },
+    play() {
+    },
+    finish() {
+    },
+    reverse() {
+    }
+  }, [
+    o
+  ]);
+}
+function Ye() {
+  "use no memo";
+  return process.env.NODE_ENV === "test" ? Fe() : le();
+}
+function Ue(e) {
+  const n = p.useRef();
+  return p.useImperativeHandle(e, () => ({
+    setPlayState: (r) => {
+      if (r === "running") {
+        var o;
+        (o = n.current) === null || o === void 0 || o.play();
+      }
+      if (r === "paused") {
+        var i;
+        (i = n.current) === null || i === void 0 || i.pause();
+      }
+    },
+    setPlaybackRate: (r) => {
+      n.current && (n.current.playbackRate = r);
+    }
+  })), n;
+}
+const Ve = "screen and (prefers-reduced-motion: reduce)";
+function je() {
+  const { targetDocument: e } = _e();
+  var n;
+  const r = (n = e == null ? void 0 : e.defaultView) !== null && n !== void 0 ? n : null, o = p.useRef(!1), i = p.useCallback(() => o.current, []);
+  return G(() => {
+    if (r === null || typeof r.matchMedia != "function")
+      return;
+    const u = r.matchMedia(Ve);
+    u.matches && (o.current = !0);
+    const d = (l) => {
+      o.current = l.matches;
+    };
+    return u.addEventListener("change", d), () => {
+      u.removeEventListener("change", d);
+    };
+  }, [
+    r
+  ]), i;
+}
+var J = { exports: {} }, E = {};
+/** @license React v17.0.2
+* react-is.production.min.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var ie;
+function qe() {
+  if (ie) return E;
+  ie = 1;
+  var e = 60103, n = 60106, r = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, s = 60113, v = 60120, f = 60115, m = 60116, C = 60121, R = 60122, g = 60117, b = 60129, T = 60131;
+  if (typeof Symbol == "function" && Symbol.for) {
+    var c = Symbol.for;
+    e = c("react.element"), n = c("react.portal"), r = c("react.fragment"), o = c("react.strict_mode"), i = c("react.profiler"), u = c("react.provider"), d = c("react.context"), l = c("react.forward_ref"), s = c("react.suspense"), v = c("react.suspense_list"), f = c("react.memo"), m = c("react.lazy"), C = c("react.block"), R = c("react.server.block"), g = c("react.fundamental"), b = c("react.debug_trace_mode"), T = c("react.legacy_hidden");
+  }
+  function S(t) {
+    if (typeof t == "object" && t !== null) {
+      var y = t.$$typeof;
+      switch (y) {
+        case e:
+          switch (t = t.type, t) {
+            case r:
+            case i:
+            case o:
+            case s:
+            case v:
+              return t;
+            default:
+              switch (t = t && t.$$typeof, t) {
+                case d:
+                case l:
+                case m:
+                case f:
+                case u:
+                  return t;
+                default:
+                  return y;
+              }
+          }
+        case n:
+          return y;
+      }
+    }
+  }
+  var P = u, M = e, $ = l, w = r, N = m, L = f, _ = n, k = i, O = o, D = s;
+  return E.ContextConsumer = d, E.ContextProvider = P, E.Element = M, E.ForwardRef = $, E.Fragment = w, E.Lazy = N, E.Memo = L, E.Portal = _, E.Profiler = k, E.StrictMode = O, E.Suspense = D, E.isAsyncMode = function() {
+    return !1;
+  }, E.isConcurrentMode = function() {
+    return !1;
+  }, E.isContextConsumer = function(t) {
+    return S(t) === d;
+  }, E.isContextProvider = function(t) {
+    return S(t) === u;
+  }, E.isElement = function(t) {
+    return typeof t == "object" && t !== null && t.$$typeof === e;
+  }, E.isForwardRef = function(t) {
+    return S(t) === l;
+  }, E.isFragment = function(t) {
+    return S(t) === r;
+  }, E.isLazy = function(t) {
+    return S(t) === m;
+  }, E.isMemo = function(t) {
+    return S(t) === f;
+  }, E.isPortal = function(t) {
+    return S(t) === n;
+  }, E.isProfiler = function(t) {
+    return S(t) === i;
+  }, E.isStrictMode = function(t) {
+    return S(t) === o;
+  }, E.isSuspense = function(t) {
+    return S(t) === s;
+  }, E.isValidElementType = function(t) {
+    return typeof t == "string" || typeof t == "function" || t === r || t === i || t === b || t === o || t === s || t === v || t === T || typeof t == "object" && t !== null && (t.$$typeof === m || t.$$typeof === f || t.$$typeof === u || t.$$typeof === d || t.$$typeof === l || t.$$typeof === g || t.$$typeof === C || t[0] === R);
+  }, E.typeOf = S, E;
+}
+var h = {};
+/** @license React v17.0.2
+* react-is.development.js
+*
+* Copyright (c) Facebook, Inc. and its affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+var ae;
+function Ge() {
+  return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
+    var e = 60103, n = 60106, r = 60107, o = 60108, i = 60114, u = 60109, d = 60110, l = 60112, s = 60113, v = 60120, f = 60115, m = 60116, C = 60121, R = 60122, g = 60117, b = 60129, T = 60131;
+    if (typeof Symbol == "function" && Symbol.for) {
+      var c = Symbol.for;
+      e = c("react.element"), n = c("react.portal"), r = c("react.fragment"), o = c("react.strict_mode"), i = c("react.profiler"), u = c("react.provider"), d = c("react.context"), l = c("react.forward_ref"), s = c("react.suspense"), v = c("react.suspense_list"), f = c("react.memo"), m = c("react.lazy"), C = c("react.block"), R = c("react.server.block"), g = c("react.fundamental"), c("react.scope"), c("react.opaque.id"), b = c("react.debug_trace_mode"), c("react.offscreen"), T = c("react.legacy_hidden");
+    }
+    var S = !1;
+    function P(a) {
+      return !!(typeof a == "string" || typeof a == "function" || a === r || a === i || a === b || a === o || a === s || a === v || a === T || S || typeof a == "object" && a !== null && (a.$$typeof === m || a.$$typeof === f || a.$$typeof === u || a.$$typeof === d || a.$$typeof === l || a.$$typeof === g || a.$$typeof === C || a[0] === R));
+    }
+    function M(a) {
+      if (typeof a == "object" && a !== null) {
+        var X = a.$$typeof;
+        switch (X) {
+          case e:
+            var j = a.type;
+            switch (j) {
+              case r:
+              case i:
+              case o:
+              case s:
+              case v:
+                return j;
+              default:
+                var te = j && j.$$typeof;
+                switch (te) {
+                  case d:
+                  case l:
+                  case m:
+                  case f:
+                  case u:
+                    return te;
+                  default:
+                    return X;
+                }
+            }
+          case n:
+            return X;
+        }
+      }
+    }
+    var $ = d, w = u, N = e, L = l, _ = r, k = m, O = f, D = n, t = i, y = o, B = s, z = !1, F = !1;
+    function H(a) {
+      return z || (z = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    }
+    function Y(a) {
+      return F || (F = !0, console.warn("The ReactIs.isConcurrentMode() alias has been deprecated, and will be removed in React 18+.")), !1;
+    }
+    function V(a) {
+      return M(a) === d;
+    }
+    function K(a) {
+      return M(a) === u;
+    }
+    function pe(a) {
+      return typeof a == "object" && a !== null && a.$$typeof === e;
+    }
+    function ve(a) {
+      return M(a) === l;
+    }
+    function Ee(a) {
+      return M(a) === r;
+    }
+    function he(a) {
+      return M(a) === m;
+    }
+    function Ce(a) {
+      return M(a) === f;
+    }
+    function Re(a) {
+      return M(a) === n;
+    }
+    function Se(a) {
+      return M(a) === i;
+    }
+    function ye(a) {
+      return M(a) === o;
+    }
+    function Me(a) {
+      return M(a) === s;
+    }
+    h.ContextConsumer = $, h.ContextProvider = w, h.Element = N, h.ForwardRef = L, h.Fragment = _, h.Lazy = k, h.Memo = O, h.Portal = D, h.Profiler = t, h.StrictMode = y, h.Suspense = B, h.isAsyncMode = H, h.isConcurrentMode = Y, h.isContextConsumer = V, h.isContextProvider = K, h.isElement = pe, h.isForwardRef = ve, h.isFragment = Ee, h.isLazy = he, h.isMemo = Ce, h.isPortal = Re, h.isProfiler = Se, h.isStrictMode = ye, h.isSuspense = Me, h.isValidElementType = P, h.typeOf = M;
+  }()), h;
+}
+process.env.NODE_ENV === "production" ? J.exports = qe() : J.exports = Ge();
+var We = J.exports;
+function He(e) {
+  try {
+    const n = p.Children.only(e);
+    if (typeof n.type == "string" || We.isForwardRef(n))
+      return n;
+  } catch {
+  }
+  throw new Error([
+    "@fluentui/react-motion: Invalid child element.",
+    `
+`,
+    "Motion factories require a single child element to be passed. ",
+    "That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef()."
+  ].join(""));
+}
+const de = p.createContext(void 0);
+de.Provider;
+const Ke = () => {
+  var e;
+  return (e = p.useContext(de)) !== null && e !== void 0 ? e : "default";
+}, Xe = p.createContext(void 0);
+function Qe(e = !1, n = !1) {
+  const r = p.useRef(n ? e : !0), o = De(), i = p.useCallback((u) => {
+    r.current !== u && (r.current = u, o());
+  }, [
+    o
+  ]);
+  return p.useEffect(() => {
+    e && (r.current = e);
+  }), [
+    e || r.current,
+    i
+  ];
+}
+const Ze = Symbol("MOTION_DEFINITION"), Je = Symbol.for("interruptablePresence");
+function W(e) {
+  return Object.assign((n) => {
+    "use no memo";
+    const o = {
+      ...p.useContext(Xe),
+      ...n
+    }, i = Ke() === "skip", { appear: u, children: d, imperativeRef: l, onExit: s, onMotionFinish: v, onMotionStart: f, onMotionCancel: m, visible: C, unmountOnExit: R, ...g } = o, b = g, [T, c] = Qe(C, R), S = He(d), P = Ue(l), M = p.useRef(), $ = ze(M, S.ref), w = p.useRef({
+      appear: u,
+      params: b,
+      skipMotions: i
+    }), N = Ye(), L = Oe(), _ = je(), k = Z((t) => {
+      f == null || f(null, {
+        direction: t
+      });
+    }), O = Z((t) => {
+      v == null || v(null, {
+        direction: t
+      }), t === "exit" && R && (c(!1), s == null || s());
+    }), D = Z((t) => {
+      m == null || m(null, {
+        direction: t
+      });
+    });
+    return G(() => {
+      w.current = {
+        appear: u,
+        params: b,
+        skipMotions: i
+      };
+    }), G(
+      () => {
+        const t = M.current;
+        if (!t)
+          return;
+        let y;
+        function B() {
+          y && (F && y.isRunning() || (y.cancel(), P.current = void 0));
+        }
+        const z = typeof e == "function" ? e({
+          element: t,
+          ...w.current.params
+        }) : e, F = z[Je];
+        if (F && (y = P.current, y && y.isRunning()))
+          return y.reverse(), B;
+        const H = C ? z.enter : z.exit, Y = C ? "enter" : "exit", V = !w.current.appear && L, K = w.current.skipMotions;
+        return V || k(Y), y = N(t, H, {
+          isReducedMotion: _()
+        }), V ? (y.finish(), B) : (P.current = y, y.setMotionEndCallbacks(() => O(Y), () => D(Y)), K && y.finish(), B);
+      },
+      // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [
+        N,
+        P,
+        _,
+        O,
+        k,
+        D,
+        C
+      ]
+    ), T ? p.cloneElement(S, {
+      ref: $
+    }) : null;
+  }, {
+    // Heads up!
+    // Always normalize it to a function to simplify types
+    [Ze]: typeof e == "function" ? e : () => e
+  });
+}
+const fe = (e, n) => {
+  const r = e === "horizontal" ? "maxWidth" : "maxHeight", o = e === "horizontal" ? "overflowX" : "overflowY", u = `${e === "horizontal" ? n.scrollWidth : n.scrollHeight}px`;
+  return {
+    sizeName: r,
+    overflowName: o,
+    toSize: u
+  };
+}, et = ({ orientation: e, duration: n, easing: r, element: o, fromSize: i = "0" }) => {
+  const { sizeName: u, overflowName: d, toSize: l } = fe(e, o);
+  return {
+    keyframes: [
+      {
+        [u]: i,
+        [d]: "hidden"
+      },
+      {
+        [u]: l,
+        offset: 0.9999,
+        [d]: "hidden"
+      },
+      {
+        [u]: "unset",
+        [d]: "unset"
+      }
+    ],
+    duration: n,
+    easing: r
+  };
+}, tt = ({ orientation: e, duration: n, easing: r, element: o, delay: i = 0, fromSize: u = "0" }) => {
+  const { sizeName: d, overflowName: l, toSize: s } = fe(e, o);
+  return {
+    keyframes: [
+      {
+        [d]: s,
+        [l]: "hidden"
+      },
+      {
+        [d]: u,
+        [l]: "hidden"
+      }
+    ],
+    duration: n,
+    easing: r,
+    fill: "both",
+    delay: i
+  };
+}, rt = (e) => e === "horizontal" ? {
+  paddingStart: "paddingInlineStart",
+  paddingEnd: "paddingInlineEnd",
+  marginStart: "marginInlineStart",
+  marginEnd: "marginInlineEnd"
+} : {
+  paddingStart: "paddingBlockStart",
+  paddingEnd: "paddingBlockEnd",
+  marginStart: "marginBlockStart",
+  marginEnd: "marginBlockEnd"
+}, ce = ({ direction: e, orientation: n, duration: r, easing: o, delay: i = 0 }) => {
+  const { paddingStart: u, paddingEnd: d, marginStart: l, marginEnd: s } = rt(n), v = e === "enter" ? 0 : 1, m = {
+    keyframes: [
+      {
+        [u]: "0",
+        [d]: "0",
+        [l]: "0",
+        [s]: "0",
+        offset: v
+      }
+    ],
+    duration: r,
+    easing: o,
+    delay: i
+  };
+  return e === "exit" && (m.fill = "forwards"), m;
+}, se = ({ direction: e, duration: n, easing: r = x.curveLinear, fromValue: o = 0 }) => {
+  const i = [
+    {
+      opacity: o
+    },
+    {
+      opacity: 1
+    }
+  ];
+  return e === "exit" && i.reverse(), {
+    keyframes: i,
+    duration: n,
+    easing: r
+  };
+}, me = ({
+  // enter
+  enterSizeDuration: e = x.durationNormal,
+  enterOpacityDuration: n = e,
+  enterEasing: r = x.curveEasyEaseMax,
+  enterDelay: o = 0,
+  // exit: durations and easing default to enter values for symmetry
+  exitSizeDuration: i = e,
+  exitOpacityDuration: u = n,
+  exitEasing: d = r,
+  exitDelay: l = 0
+} = {}) => ({ element: s, animateOpacity: v = !0, orientation: f = "vertical" }) => {
+  const m = [
+    et({
+      orientation: f,
+      duration: e,
+      easing: r,
+      element: s
+    }),
+    ce({
+      direction: "enter",
+      orientation: f,
+      duration: e,
+      easing: r
+    })
+  ];
+  v && m.push({
+    ...se({
+      direction: "enter",
+      duration: n,
+      easing: r
+    }),
+    delay: o,
+    fill: "both"
+  });
+  const C = [];
+  return v && C.push(se({
+    direction: "exit",
+    duration: u,
+    easing: d
+  })), C.push(tt({
+    orientation: f,
+    duration: i,
+    easing: d,
+    element: s,
+    delay: l
+  }), ce({
+    direction: "exit",
+    orientation: f,
+    duration: i,
+    easing: d,
+    delay: l
+  })), {
+    enter: m,
+    exit: C
+  };
+}, ee = ({ enterDuration: e = x.durationNormal, enterEasing: n = x.curveEasyEaseMax, exitDuration: r = e, exitEasing: o = n } = {}) => (
+  // Implement a regular collapse as a special case of the delayed collapse,
+  // where the delays are zero, and the size and opacity durations are equal.
+  me({
+    enterSizeDuration: e,
+    enterEasing: n,
+    exitSizeDuration: r,
+    exitEasing: o
+  })
+), nt = W(ee());
+W(ee({
+  enterDuration: x.durationFast
+}));
+W(ee({
+  enterDuration: x.durationSlower
+}));
+W(me({
+  enterSizeDuration: x.durationNormal,
+  enterOpacityDuration: x.durationSlower,
+  enterDelay: x.durationNormal,
+  exitDelay: x.durationSlower,
+  enterEasing: x.curveEasyEase
+}));
+const ot = ge({
+  root: {
+    backgroundColor: I.colorNeutralBackground1,
+    boxSizing: "border-box",
+    overflow: "hidden"
+  },
+  default: {
+    border: "1px solid " + I.colorNeutralForeground1,
+    borderRadius: I.borderRadiusMedium,
+    boxShadow: I.shadow16Brand,
+    transitionDuration: I.durationNormal,
+    transitionTimingFunction: "ease",
+    transitionProperty: "box-shadow, border",
+    ":hover": {
+      boxShadow: I.shadow28Brand,
+      border: "1px solid " + I.colorBrandForeground2Hover
+    }
+  },
+  divider: {
+    flexGrow: 0
+  },
+  fill: {
+    height: "100%",
+    width: "100%"
+  },
+  content: {
+    boxSizing: "border-box"
+  }
+}), it = (e) => {
+  var c;
+  const { children: n, icon: r, header: o, collapsible: i, className: u, fill: d, ref: l, id: s, appearance: v } = e, f = ot(), [m, C] = xe.useState(!0);
+  let R = q(Q.Section, f.root, u);
+  (d || (c = e.cellProps) != null && c.resizable) && (R = q(R, f.fill)), (v == null || v == "default") && (R = q(R, f.default));
+  const g = oe.buildSectionStyles(e), b = oe.buildSectionContentStyles(e);
+  m || (g.height = "fit-content");
+  const T = m ? /* @__PURE__ */ A(Ae, {}) : /* @__PURE__ */ A(Pe, {});
+  return /* @__PURE__ */ re(ne, { id: s, className: R, style: g, ref: l, role: e.role, children: [
+    /* @__PURE__ */ A(U, { className: Q.SectionHeader, children: /* @__PURE__ */ re(ne, { fill: !0, horizontal: !0, alignItems: "center", children: [
+      r && /* @__PURE__ */ A(U, { padding: 8, children: r }),
+      /* @__PURE__ */ A(U, { grow: 1, children: o && o }),
+      i && /* @__PURE__ */ A(U, { children: /* @__PURE__ */ A(Te, { appearance: "transparent", icon: T, onClick: () => {
+        C(!m);
+      } }) })
+    ] }) }),
+    (r || o || i) && /* @__PURE__ */ A(be, { className: f.divider }),
+    /* @__PURE__ */ A(U, { className: Q.SectionContent, grow: 1, style: b, children: /* @__PURE__ */ A(nt, { visible: m, children: /* @__PURE__ */ A("div", { className: q(f.fill, f.content), children: n }) }) })
+  ] });
+};
+it.displayName = "Section";
 export {
-  f as Section
+  it as Section
 };