@tcn/ui 0.5.0 → 0.7.0

package/dist/overlay/tethered/hooks/useTether.js

@@ -1,19 +1,19 @@
-import { useState as h, useRef as m, useCallback as l, useLayoutEffect as g } from "react";
-import { calculateTetheredPosition as y } from "./calculate_position.js";
+import { useState as f, useRef as m, useCallback as g, useLayoutEffect as l } from "react";
+import { calculateTetheredPosition as a } from "./calculate_position.js";
 function E({
-  anchor: n,
-  verticalAnchor: r = "bottom",
-  verticalOrigin: s = "top",
+  anchor: o,
+  verticalAnchor: s = "bottom",
+  verticalOrigin: r = "top",
   horizontalAnchor: u = "start",
   horizontalOrigin: d = "start",
   verticalOffset: p = 0,
-  horizontalOffset: w = 0
+  horizontalOffset: c = 0
 }) {
-  const [o, c] = h({ top: 0, left: 0 }), i = m(null), f = l(() => {
-    if (!n || !i.current) return;
-    const t = i.current.getBoundingClientRect(), e = getComputedStyle(i.current);
-    return y({
-      anchor: n,
+  const [i, h] = f({ top: 0, left: 0 }), n = m(null), w = g(() => {
+    if (!o || !n.current) return;
+    const t = n.current.getBoundingClientRect(), e = getComputedStyle(n.current);
+    return a({
+      anchor: o,
       tether: {
         dimensions: {
           width: t.width,
@@ -25,35 +25,36 @@ function E({
         }
       },
       direction: e.direction,
-      verticalAnchor: r,
-      verticalOrigin: s,
+      verticalAnchor: s,
+      verticalOrigin: r,
       horizontalAnchor: u,
       horizontalOrigin: d,
       verticalOffset: p,
-      horizontalOffset: w,
+      horizontalOffset: c,
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       }
     });
   }, [
-    n,
-    r,
+    o,
     s,
+    r,
     u,
     d,
     p,
-    w
+    c
   ]);
-  return g(() => {
+  return l(() => {
     const t = () => {
-      const e = f();
-      e && (o.top !== e.top || o.left !== e.left) && c(e);
+      const e = w();
+      if (!e) return;
+      (i.top !== e.top || i.left !== e.left) && h(e);
     };
     return t(), window.addEventListener("resize", t), () => {
       window.removeEventListener("resize", t);
     };
-  }), { position: o, tetherRef: i };
+  }), { position: i, tetherRef: n };
 }
 export {
   E as useTether

package/dist/overlay/tethered/hooks/useTether.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { type Rectangle } from '../../../utils/index.js';\nimport { calculateTetheredPosition } from './calculate_position.js';\n\nexport interface UseTetherParams {\n  anchor: Rectangle | null;\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport function useTether({\n  anchor,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  verticalOffset = 0,\n  horizontalOffset = 0,\n}: UseTetherParams) {\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const tetherRef = useRef<HTMLDivElement>(null);\n\n  const getPosition = useCallback(() => {\n    if (!anchor || !tetherRef.current) return;\n\n    const tether = tetherRef.current.getBoundingClientRect();\n    const computedStyle = getComputedStyle(tetherRef.current);\n\n    return calculateTetheredPosition({\n      anchor: anchor,\n      tether: {\n        dimensions: {\n          width: tether.width,\n          height: tether.height,\n        },\n        position: {\n          x: tether.left,\n          y: tether.top,\n        },\n      },\n      direction: computedStyle.direction as 'ltr' | 'rtl',\n      verticalAnchor: verticalAnchor,\n      verticalOrigin: verticalOrigin,\n      horizontalAnchor: horizontalAnchor,\n      horizontalOrigin: horizontalOrigin,\n      verticalOffset: verticalOffset,\n      horizontalOffset: horizontalOffset,\n      viewport: {\n        width: window.innerWidth,\n        height: window.innerHeight,\n      },\n    });\n  }, [\n    anchor,\n    verticalAnchor,\n    verticalOrigin,\n    horizontalAnchor,\n    horizontalOrigin,\n    verticalOffset,\n    horizontalOffset,\n  ]);\n\n  // Update the position when the window is resized\n  useLayoutEffect(() => {\n    const update = () => {\n      const newPosition = getPosition();\n      if (!newPosition) return;\n      if (position.top !== newPosition.top || position.left !== newPosition.left) {\n        setPosition(newPosition);\n      }\n    };\n    update();\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  });\n\n  return { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAGD,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,MAAKO,MACDZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SACpEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}
+{"version":3,"file":"useTether.js","sources":["../../../../src/overlay/tethered/hooks/useTether.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { type Rectangle } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport { calculateTetheredPosition } from './calculate_position.js';\n\nexport interface UseTetherParams {\n  anchor: Rectangle | null;\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport function useTether({\n  anchor,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  verticalOffset = 0,\n  horizontalOffset = 0,\n}: UseTetherParams) {\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const tetherRef = useRef<HTMLDivElement>(null);\n\n  const getPosition = useCallback(() => {\n    if (!anchor || !tetherRef.current) return;\n\n    const tether = tetherRef.current.getBoundingClientRect();\n    const computedStyle = getComputedStyle(tetherRef.current);\n\n    return calculateTetheredPosition({\n      anchor: anchor,\n      tether: {\n        dimensions: {\n          width: tether.width,\n          height: tether.height,\n        },\n        position: {\n          x: tether.left,\n          y: tether.top,\n        },\n      },\n      direction: computedStyle.direction as 'ltr' | 'rtl',\n      verticalAnchor: verticalAnchor,\n      verticalOrigin: verticalOrigin,\n      horizontalAnchor: horizontalAnchor,\n      horizontalOrigin: horizontalOrigin,\n      verticalOffset: verticalOffset,\n      horizontalOffset: horizontalOffset,\n      viewport: {\n        width: window.innerWidth,\n        height: window.innerHeight,\n      },\n    });\n  }, [\n    anchor,\n    verticalAnchor,\n    verticalOrigin,\n    horizontalAnchor,\n    horizontalOrigin,\n    verticalOffset,\n    horizontalOffset,\n  ]);\n\n  useLayoutEffect(() => {\n    const update = () => {\n      const newPosition = getPosition();\n      if (!newPosition) return;\n      const hasChanged =\n        position.top !== newPosition.top || position.left !== newPosition.left;\n      if (hasChanged) {\n        setPosition(newPosition);\n      }\n    };\n    update();\n    window.addEventListener('resize', update);\n    return () => {\n      window.removeEventListener('resize', update);\n    };\n  });\n\n  return { position, tetherRef };\n}\n"],"names":["useTether","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","position","setPosition","useState","tetherRef","useRef","getPosition","useCallback","tether","computedStyle","calculateTetheredPosition","useLayoutEffect","update","newPosition"],"mappings":";;AAeO,SAASA,EAAU;AAAA,EACxB,QAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AACrB,GAAoB;AAClB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAYC,EAAuB,IAAI,GAEvCC,IAAcC,EAAY,MAAM;AACpC,QAAI,CAACb,KAAU,CAACU,EAAU,QAAS;AAEnC,UAAMI,IAASJ,EAAU,QAAQ,sBAAA,GAC3BK,IAAgB,iBAAiBL,EAAU,OAAO;AAExD,WAAOM,EAA0B;AAAA,MAC/B,QAAAhB;AAAA,MACA,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,OAAOc,EAAO;AAAA,UACd,QAAQA,EAAO;AAAA,QAAA;AAAA,QAEjB,UAAU;AAAA,UACR,GAAGA,EAAO;AAAA,UACV,GAAGA,EAAO;AAAA,QAAA;AAAA,MACZ;AAAA,MAEF,WAAWC,EAAc;AAAA,MACzB,gBAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAU;AAAA,QACR,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,MAAA;AAAA,IACjB,CACD;AAAA,EACH,GAAG;AAAA,IACDN;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD;AAED,SAAAW,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,YAAMC,IAAcP,EAAA;AACpB,UAAI,CAACO,EAAa;AAGlB,OADEZ,EAAS,QAAQY,EAAY,OAAOZ,EAAS,SAASY,EAAY,SAElEX,EAAYW,CAAW;AAAA,IAE3B;AACA,WAAAD,EAAA,GACA,OAAO,iBAAiB,UAAUA,CAAM,GACjC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM;AAAA,IAC7C;AAAA,EACF,CAAC,GAEM,EAAE,UAAAX,GAAU,WAAAG,EAAA;AACrB;"}

package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts

@@ -0,0 +1,3 @@
+import { Rectangle } from '../../../utils/index.js';
+export declare function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle;
+//# sourceMappingURL=useTetherContentRect.d.ts.map

package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTetherContentRect.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTetherContentRect.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAuBzD,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAwBjF"}

package/dist/overlay/tethered/hooks/useTetherContentRect.js

@@ -0,0 +1,36 @@
+import { useState as r, useLayoutEffect as s } from "react";
+function i(t) {
+  if (!t)
+    return {
+      dimensions: { width: 0, height: 0 },
+      position: { x: 0, y: 0 }
+    };
+  const e = t.getBoundingClientRect();
+  return {
+    dimensions: {
+      width: e.width,
+      height: e.height
+    },
+    position: {
+      x: e.left,
+      y: e.top
+    }
+  };
+}
+function u(t) {
+  const [e, o] = r(
+    () => i(t.current)
+  );
+  return s(() => {
+    const n = () => {
+      o(i(t.current));
+    };
+    return n(), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
+      window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
+    };
+  }, [t]), e;
+}
+export {
+  u as useTetherContentRect
+};
+//# sourceMappingURL=useTetherContentRect.js.map

package/dist/overlay/tethered/hooks/useTetherContentRect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTetherContentRect.js","sources":["../../../../src/overlay/tethered/hooks/useTetherContentRect.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\nimport type { Rectangle } from '../../../utils/index.js';\n\nfunction getTetherContentRect(element: HTMLElement | null): Rectangle {\n  if (!element) {\n    return {\n      dimensions: { width: 0, height: 0 },\n      position: { x: 0, y: 0 },\n    };\n  }\n\n  const rect = element.getBoundingClientRect();\n  return {\n    dimensions: {\n      width: rect.width,\n      height: rect.height,\n    },\n    position: {\n      x: rect.left,\n      y: rect.top,\n    },\n  };\n}\n\nexport function useTetherContentRect(ref: React.RefObject<HTMLElement>): Rectangle {\n  const [contentRect, setContentRect] = useState<Rectangle>(() =>\n    getTetherContentRect(ref.current)\n  );\n\n  useLayoutEffect(() => {\n    const update = () => {\n      setContentRect(getTetherContentRect(ref.current));\n    };\n\n    update();\n\n    // Track resize events\n    window.addEventListener('resize', update);\n    // Track scroll events\n    window.addEventListener('scroll', update, true);\n\n    return () => {\n      window.removeEventListener('resize', update);\n      window.removeEventListener('scroll', update, true);\n    };\n  }, [ref]);\n\n  return contentRect;\n}\n"],"names":["getTetherContentRect","element","rect","useTetherContentRect","ref","contentRect","setContentRect","useState","useLayoutEffect","update"],"mappings":";AAGA,SAASA,EAAqBC,GAAwC;AACpE,MAAI,CAACA;AACH,WAAO;AAAA,MACL,YAAY,EAAE,OAAO,GAAG,QAAQ,EAAA;AAAA,MAChC,UAAU,EAAE,GAAG,GAAG,GAAG,EAAA;AAAA,IAAE;AAI3B,QAAMC,IAAOD,EAAQ,sBAAA;AACrB,SAAO;AAAA,IACL,YAAY;AAAA,MACV,OAAOC,EAAK;AAAA,MACZ,QAAQA,EAAK;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,MACR,GAAGA,EAAK;AAAA,MACR,GAAGA,EAAK;AAAA,IAAA;AAAA,EACV;AAEJ;AAEO,SAASC,EAAqBC,GAA8C;AACjF,QAAM,CAACC,GAAaC,CAAc,IAAIC;AAAA,IAAoB,MACxDP,EAAqBI,EAAI,OAAO;AAAA,EAAA;AAGlC,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAS,MAAM;AACnB,MAAAH,EAAeN,EAAqBI,EAAI,OAAO,CAAC;AAAA,IAClD;AAEA,WAAAK,EAAA,GAGA,OAAO,iBAAiB,UAAUA,CAAM,GAExC,OAAO,iBAAiB,UAAUA,GAAQ,EAAI,GAEvC,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAM,GAC3C,OAAO,oBAAoB,UAAUA,GAAQ,EAAI;AAAA,IACnD;AAAA,EACF,GAAG,CAACL,CAAG,CAAC,GAEDC;AACT;"}

package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts

@@ -0,0 +1,14 @@
+import { Position } from '../../../utils/index.js';
+import { HorizontalTether, VerticalTether } from '../types.js';
+import { CaretDirection } from './calculate_origin.js';
+export interface UseTetherOriginResult {
+    originPosition: Position;
+    originOffset: {
+        yOffset: number;
+        xOffset: number;
+    };
+    containerRef: React.RefObject<HTMLDivElement>;
+    originDirection: CaretDirection;
+}
+export declare function useTetherOrigin(tetherPosition: Position, hOrigin: HorizontalTether, vOrigin: VerticalTether, precision: 'high' | 'low'): UseTetherOriginResult;
+//# sourceMappingURL=useTetherOrigin.d.ts.map

package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTetherOrigin.d.ts","sourceRoot":"","sources":["../../../../src/overlay/tethered/hooks/useTetherOrigin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,QAAQ,CAAC;IACzB,YAAY,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,eAAe,EAAE,cAAc,CAAC;CACjC;AAED,wBAAgB,eAAe,CAC7B,cAAc,EAAE,QAAQ,EACxB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,MAAM,GAAG,KAAK,GACxB,qBAAqB,CAyBvB"}

package/dist/overlay/tethered/hooks/useTetherOrigin.js

@@ -0,0 +1,24 @@
+import { useRef as g } from "react";
+import { getOriginOffset as u, getOriginPosition as O, getOriginDirection as m } from "./calculate_origin.js";
+import { useTetherContentRect as p } from "./useTetherContentRect.js";
+function P(r, o, t, f) {
+  const i = g(null), n = p(i);
+  if (f === "low")
+    return {
+      originPosition: r,
+      originOffset: { yOffset: 0, xOffset: 0 },
+      containerRef: i,
+      originDirection: "none"
+    };
+  const e = u(n, o, t), s = O(n.position, e), c = m(t, o);
+  return {
+    originPosition: s,
+    originOffset: e,
+    containerRef: i,
+    originDirection: c
+  };
+}
+export {
+  P as useTetherOrigin
+};
+//# sourceMappingURL=useTetherOrigin.js.map

package/dist/overlay/tethered/hooks/useTetherOrigin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTetherOrigin.js","sources":["../../../../src/overlay/tethered/hooks/useTetherOrigin.ts"],"sourcesContent":["import { useRef } from 'react';\nimport type { Position } from '../../../utils/index.js';\nimport type { HorizontalTether, VerticalTether } from '../types.js';\nimport {\n  getOriginDirection,\n  getOriginOffset,\n  getOriginPosition,\n  type CaretDirection,\n} from './calculate_origin.js';\nimport { useTetherContentRect } from './useTetherContentRect.js';\n\nexport interface UseTetherOriginResult {\n  originPosition: Position;\n  originOffset: { yOffset: number; xOffset: number };\n  containerRef: React.RefObject<HTMLDivElement>;\n  originDirection: CaretDirection;\n}\n\nexport function useTetherOrigin(\n  tetherPosition: Position,\n  hOrigin: HorizontalTether,\n  vOrigin: VerticalTether,\n  precision: 'high' | 'low'\n): UseTetherOriginResult {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const containerRect = useTetherContentRect(containerRef);\n\n  // If precision is low, return default values\n  if (precision === 'low') {\n    return {\n      originPosition: tetherPosition,\n      originOffset: { yOffset: 0, xOffset: 0 },\n      containerRef,\n      originDirection: 'none',\n    };\n  }\n\n  // Calculate origin values for high precision\n  const originOffset = getOriginOffset(containerRect, hOrigin, vOrigin);\n  const originPosition = getOriginPosition(containerRect.position, originOffset);\n  const originDirection = getOriginDirection(vOrigin, hOrigin);\n\n  return {\n    originPosition,\n    originOffset,\n    containerRef,\n    originDirection,\n  };\n}\n"],"names":["useTetherOrigin","tetherPosition","hOrigin","vOrigin","precision","containerRef","useRef","containerRect","useTetherContentRect","originOffset","getOriginOffset","originPosition","getOriginPosition","originDirection","getOriginDirection"],"mappings":";;;AAkBO,SAASA,EACdC,GACAC,GACAC,GACAC,GACuB;AACvB,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAgBC,EAAqBH,CAAY;AAGvD,MAAID,MAAc;AAChB,WAAO;AAAA,MACL,gBAAgBH;AAAA,MAChB,cAAc,EAAE,SAAS,GAAG,SAAS,EAAA;AAAA,MACrC,cAAAI;AAAA,MACA,iBAAiB;AAAA,IAAA;AAKrB,QAAMI,IAAeC,EAAgBH,GAAeL,GAASC,CAAO,GAC9DQ,IAAiBC,EAAkBL,EAAc,UAAUE,CAAY,GACvEI,IAAkBC,EAAmBX,GAASD,CAAO;AAE3D,SAAO;AAAA,IACL,gBAAAS;AAAA,IACA,cAAAF;AAAA,IACA,cAAAJ;AAAA,IACA,iBAAAQ;AAAA,EAAA;AAEJ;"}

package/dist/overlay/tethered/tethered.d.ts

@@ -1,6 +1,6 @@
-import { HorizontalTether, VerticalTether } from './types.js';
 import { ZStackProps } from '../../stacks/index.js';
 import { Rectangle } from '../../utils/index.js';
+import { HorizontalTether, VerticalTether } from './types.js';
 export interface BaseTetheredOwnProps {
     verticalAnchor?: VerticalTether;
     verticalOrigin?: VerticalTether;
@@ -11,6 +11,7 @@ export interface BaseTetheredOwnProps {
 }
 export interface TetheredOwnProp extends BaseTetheredOwnProps {
     anchor: Rectangle | null;
+    precision?: 'high' | 'low';
 }
 export interface TetheredProps extends TetheredOwnProp, ZStackProps {
 }

package/dist/overlay/tethered/tethered.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAQlE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;CAC1B;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CA8CpB,CAAC"}
+{"version":3,"file":"tethered.d.ts","sourceRoot":"","sources":["../../../src/overlay/tethered/tethered.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMlE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAKnE,MAAM,WAAW,oBAAoB;IACnC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC5B;AACD,MAAM,WAAW,aAAc,SAAQ,eAAe,EAAE,WAAW;CAAG;AAEtE,eAAO,MAAM,QAAQ;;+CAgFpB,CAAC"}

package/dist/overlay/tethered/tethered.js

@@ -1,59 +1,92 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as R } from "react";
+import { jsx as p, jsxs as P } from "react/jsx-runtime";
+import { clsx as c } from "clsx";
+import { forwardRef as j } from "react";
 import "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
 import "../../stacks/h_stack.js";
 import "../../stacks/spacer.js";
 import "../../stacks/v_collapsible_box.js";
 import "../../stacks/v_stack.js";
-import { ZStack as b } from "../../stacks/z_stack.js";
+import { ZStack as D } from "../../stacks/z_stack.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
-import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
+import { useForkRef as E } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { useTether as T } from "./hooks/useTether.js";
-import { clsx as y } from "clsx";
-import { Portal as _ } from "../portal/portal.js";
-import '../../tethered.css';const $ = "_tethered_44058d8", j = { tethered: $ }, I = R(
+import "../../utils/dnd/context.js";
+import "../../draggable.module-BgelQsuJ.js";
+import { Caret as N } from "../caret/caret.js";
+import { Portal as S } from "../portal/portal.js";
+import { useCaretRefDimensions as F } from "./hooks/useCaretRefDimensions.js";
+import { useTether as I } from "./hooks/useTether.js";
+import { useTetherOrigin as V } from "./hooks/useTetherOrigin.js";
+import '../../tethered.css';const Z = "_origin-indicator_cbc16ea", q = "_tethered_44058d8", f = { "origin-indicator": Z, tethered: q }, mt = j(
   function({
-    anchor: r,
-    verticalAnchor: e = "bottom",
-    verticalOrigin: m = "top",
-    horizontalAnchor: p = "start",
-    horizontalOrigin: i = "start",
-    verticalOffset: s = 0,
-    horizontalOffset: f = 0,
-    children: c,
-    style: n,
-    className: d,
-    ...a
-  }, h) {
-    const { position: t, tetherRef: l } = T({
-      anchor: r,
-      verticalAnchor: e,
-      verticalOrigin: m,
-      horizontalAnchor: p,
-      horizontalOrigin: i,
-      verticalOffset: s,
-      horizontalOffset: f
-    }), u = k(h, l), x = {
+    anchor: h,
+    verticalAnchor: n = "bottom",
+    verticalOrigin: r = "top",
+    horizontalAnchor: s = "start",
+    horizontalOrigin: o = "start",
+    verticalOffset: x = 0,
+    horizontalOffset: g = 0,
+    precision: i = "low",
+    children: l,
+    style: $,
+    className: y,
+    ...R
+  }, u) {
+    const { position: t, tetherRef: w } = I({
+      anchor: h,
+      verticalAnchor: n,
+      verticalOrigin: r,
+      horizontalAnchor: s,
+      horizontalOrigin: o,
+      verticalOffset: x,
+      horizontalOffset: g
+    }), T = { x: t.left, y: t.top }, { originPosition: m, originOffset: d, containerRef: _, originDirection: e } = V(T, o, r, i), { caretElementRef: b, caretSize: a } = F(
+      i,
+      e
+    ), k = E(u, w, _), C = {
       "--tethered-top": `${t.top}px`,
-      "--tethered-left": `${t.left}px`
+      "--tethered-left": `${t.left}px`,
+      "--tethered-origin-y": `${m.y}px`,
+      "--tethered-origin-x": `${m.x}px`,
+      "--tethered-origin-delta-y": `${d.yOffset}px`,
+      "--tethered-origin-delta-x": `${d.xOffset}px`,
+      "--origin-indicator-dimensions-width": `${a.width}px`,
+      "--origin-indicator-dimensions-height": `${a.height}px`
     };
-    return /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
-      b,
+    return /* @__PURE__ */ p(S, { children: /* @__PURE__ */ P(
+      D,
       {
-        ref: u,
-        className: y(j.tethered, d),
-        style: { position: "absolute", ...x, ...n },
-        ...a,
-        children: c
+        ref: k,
+        className: c(f.tethered, "tcn-tethered", y),
+        style: { ...C, ...$ },
+        "data-v-anchor": n,
+        "data-h-anchor": s,
+        "data-v-origin": r,
+        "data-h-origin": o,
+        "data-anchor-direction": e,
+        ...R,
+        children: [
+          l,
+          i === "high" && e !== "none" && /* @__PURE__ */ p(
+            N,
+            {
+              ref: b,
+              direction: e,
+              className: c(
+                f["origin-indicator"],
+                "tcn-tethered-origin-indicator"
+              )
+            }
+          )
+        ]
       }
     ) });
   }
 );
 export {
-  I as Tethered
+  mt as Tethered
 };
 //# sourceMappingURL=tethered.js.map

package/dist/overlay/tethered/tethered.js.map

@@ -1 +1 @@
-{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport type { HorizontalTether, VerticalTether } from './types.js';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { useTether } from './hooks/useTether.js';\nimport { clsx } from 'clsx';\nimport { Portal } from '../portal/portal.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n}\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { position, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${position.top}px`,\n      '--tethered-left': `${position.left}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, className)}\n          style={{ position: 'absolute', ...cssVariables, ...style }}\n          {...rest}\n        >\n          {children}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","children","style","className","rest","ref","position","tetherRef","useTether","forkedRef","useForkRef","cssVariables","Portal","jsx","ZStack","clsx","styles"],"mappings":";;;;;;;;;;;;;;;;;oDAyBaA,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAd;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GACKS,IAAYC,EAAWL,GAAKE,CAAS,GAErCI,IAAe;AAAA,MACnB,kBAAkB,GAAGL,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,IAAA;AAGrC,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAUb,CAAS;AAAA,QAC1C,OAAO,EAAE,UAAU,YAAY,GAAGQ,GAAc,GAAGT,EAAA;AAAA,QAClD,GAAGE;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;"}
+{"version":3,"file":"tethered.js","sources":["../../../src/overlay/tethered/tethered.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, type PropsWithChildren } from 'react';\nimport { ZStack, type ZStackProps } from '../../stacks/index.js';\nimport { useForkRef, type Rectangle } from '../../utils/index.js';\nimport { Caret } from '../caret/caret.js';\nimport { Portal } from '../portal/portal.js';\nimport { useCaretRefDimensions } from './hooks/useCaretRefDimensions.js';\nimport { useTether } from './hooks/useTether.js';\nimport { useTetherOrigin } from './hooks/useTetherOrigin.js';\nimport type { HorizontalTether, VerticalTether } from './types.js';\n\n// Styles\nimport styles from './tethered.module.css';\n\nexport interface BaseTetheredOwnProps {\n  verticalAnchor?: VerticalTether;\n  verticalOrigin?: VerticalTether;\n  horizontalOrigin?: HorizontalTether;\n  horizontalAnchor?: HorizontalTether;\n  verticalOffset?: number;\n  horizontalOffset?: number;\n}\n\nexport interface TetheredOwnProp extends BaseTetheredOwnProps {\n  anchor: Rectangle | null;\n  precision?: 'high' | 'low';\n}\nexport interface TetheredProps extends TetheredOwnProp, ZStackProps {}\n\nexport const Tethered = forwardRef<HTMLElement, PropsWithChildren<TetheredProps>>(\n  function Tethered(\n    {\n      anchor,\n      verticalAnchor = 'bottom',\n      verticalOrigin = 'top',\n      horizontalAnchor = 'start',\n      horizontalOrigin = 'start',\n      verticalOffset = 0,\n      horizontalOffset = 0,\n      precision = 'low',\n      children,\n      style,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    const { position, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n\n    // Convert position from { top, left } to Position type { x, y }\n    const tetherPosition = { x: position.left, y: position.top };\n\n    const { originPosition, originOffset, containerRef, originDirection } =\n      useTetherOrigin(tetherPosition, horizontalOrigin, verticalOrigin, precision);\n\n    const { caretElementRef: setCaretElement, caretSize } = useCaretRefDimensions(\n      precision,\n      originDirection\n    );\n\n    const forkedRef = useForkRef(ref, tetherRef, containerRef);\n\n    const cssVariables = {\n      '--tethered-top': `${position.top}px`,\n      '--tethered-left': `${position.left}px`,\n      '--tethered-origin-y': `${originPosition.y}px`,\n      '--tethered-origin-x': `${originPosition.x}px`,\n      '--tethered-origin-delta-y': `${originOffset.yOffset}px`,\n      '--tethered-origin-delta-x': `${originOffset.xOffset}px`,\n      '--origin-indicator-dimensions-width': `${caretSize.width}px`,\n      '--origin-indicator-dimensions-height': `${caretSize.height}px`,\n    };\n\n    return (\n      <Portal>\n        <ZStack\n          ref={forkedRef}\n          className={clsx(styles.tethered, 'tcn-tethered', className)}\n          style={{ ...cssVariables, ...style }}\n          data-v-anchor={verticalAnchor}\n          data-h-anchor={horizontalAnchor}\n          data-v-origin={verticalOrigin}\n          data-h-origin={horizontalOrigin}\n          data-anchor-direction={originDirection}\n          {...rest}\n        >\n          {children}\n          {precision === 'high' && originDirection !== 'none' && (\n            <Caret\n              ref={setCaretElement}\n              direction={originDirection}\n              className={clsx(\n                styles['origin-indicator'],\n                'tcn-tethered-origin-indicator'\n              )}\n            />\n          )}\n        </ZStack>\n      </Portal>\n    );\n  }\n);\n"],"names":["Tethered","forwardRef","anchor","verticalAnchor","verticalOrigin","horizontalAnchor","horizontalOrigin","verticalOffset","horizontalOffset","precision","children","style","className","rest","ref","position","tetherRef","useTether","tetherPosition","originPosition","originOffset","containerRef","originDirection","useTetherOrigin","setCaretElement","caretSize","useCaretRefDimensions","forkedRef","useForkRef","cssVariables","Portal","jsxs","ZStack","clsx","styles","jsx","Caret"],"mappings":";;;;;;;;;;;;;;;;;;;;;;4GA6BaA,KAAWC;AAAA,EACtB,SACE;AAAA,IACE,QAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAM,EAAE,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACxC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAGKU,IAAiB,EAAE,GAAGH,EAAS,MAAM,GAAGA,EAAS,IAAA,GAEjD,EAAE,gBAAAI,GAAgB,cAAAC,GAAc,cAAAC,GAAc,iBAAAC,EAAA,IAClDC,EAAgBL,GAAgBZ,GAAkBF,GAAgBK,CAAS,GAEvE,EAAE,iBAAiBe,GAAiB,WAAAC,EAAA,IAAcC;AAAA,MACtDjB;AAAA,MACAa;AAAA,IAAA,GAGIK,IAAYC,EAAWd,GAAKE,GAAWK,CAAY,GAEnDQ,IAAe;AAAA,MACnB,kBAAkB,GAAGd,EAAS,GAAG;AAAA,MACjC,mBAAmB,GAAGA,EAAS,IAAI;AAAA,MACnC,uBAAuB,GAAGI,EAAe,CAAC;AAAA,MAC1C,uBAAuB,GAAGA,EAAe,CAAC;AAAA,MAC1C,6BAA6B,GAAGC,EAAa,OAAO;AAAA,MACpD,6BAA6B,GAAGA,EAAa,OAAO;AAAA,MACpD,uCAAuC,GAAGK,EAAU,KAAK;AAAA,MACzD,wCAAwC,GAAGA,EAAU,MAAM;AAAA,IAAA;AAG7D,6BACGK,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBtB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGiB,GAAc,GAAGlB,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBgB;AAAA,QACtB,GAAGT;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUa,MAAoB,UAC3C,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKZ;AAAA,cACL,WAAWF;AAAA,cACX,WAAWW;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}

package/dist/stacks/box/box.js

@@ -5,17 +5,19 @@ import "../../utils/scroll_away_listener.js";
 import O, { useRef as oo } from "react";
 import { useForkRef as ro } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import { LeftResizeHandle as to } from "./left_resize_handle.js";
-import { RightResizeHandle as ao } from "./right_resize_handle.js";
-import { BottomResizeHandle as eo } from "./bottom_resize_handle.js";
-import { EndResizeHandle as fo } from "./end_resize_handle.js";
-import { StartResizeHandle as so } from "./start_resize_handle.js";
-import { TopResizeHandle as lo } from "./top_resize_handle.js";
-import { clsx as mo } from "clsx";
+import "../../utils/dnd/context.js";
+import { clsx as to } from "clsx";
+import "../../draggable.module-BgelQsuJ.js";
+import { LeftResizeHandle as ao } from "./left_resize_handle.js";
+import { RightResizeHandle as eo } from "./right_resize_handle.js";
+import { BottomResizeHandle as fo } from "./bottom_resize_handle.js";
+import { EndResizeHandle as so } from "./end_resize_handle.js";
+import { StartResizeHandle as lo } from "./start_resize_handle.js";
+import { TopResizeHandle as mo } from "./top_resize_handle.js";
 import { isCustomSizeProp as y } from "../utils/isCustomSizeProp.js";
 import { removeUndefinedProperties as no } from "../utils/remove_undefined_properties.js";
 import { s as k } from "../../stack.module-CBV1f12Z.js";
-const Yo = O.forwardRef(function({
+const Bo = O.forwardRef(function({
   style: v,
   className: P,
   as: _ = "div",
@@ -47,11 +49,11 @@ const Yo = O.forwardRef(function({
   enableResizeOnLeft: c = !1,
   enableResizeOnRight: p = !1,
   onWidthResize: e,
-  onHeightResize: i,
+  onHeightResize: d,
   onWidthResizeEnd: f,
   onHeightResizeEnd: u,
-  horizontalHandleProps: x,
-  verticalHandleProps: d,
+  horizontalHandleProps: i,
+  verticalHandleProps: x,
   ...X
 }, Z) {
   const $ = _, o = oo(null), L = ro(Z, o), R = l || n || c || p, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
@@ -94,7 +96,7 @@ const Yo = O.forwardRef(function({
         ...no(W),
         ...v
       },
-      className: mo(
+      className: to(
         k.box,
         P,
         F && "stack-flex",
@@ -105,57 +107,57 @@ const Yo = O.forwardRef(function({
       children: [
         H,
         s && /* @__PURE__ */ a(
-          lo,
+          mo,
           {
-            onHeightResize: i,
+            onHeightResize: d,
             onHeightResizeEnd: u,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         ),
         m && /* @__PURE__ */ a(
-          eo,
+          fo,
           {
-            onHeightResize: i,
+            onHeightResize: d,
             onHeightResizeEnd: u,
             targetRef: o,
-            handleProps: d
+            handleProps: x
           }
         ),
         n && /* @__PURE__ */ a(
-          so,
+          lo,
           {
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         ),
         l && /* @__PURE__ */ a(
-          fo,
+          so,
           {
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: x
+            handleProps: i
           }
         ),
         c && /* @__PURE__ */ a(
-          to,
+          ao,
           {
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: d
+            handleProps: x
           }
         ),
         p && /* @__PURE__ */ a(
-          ao,
+          eo,
           {
             onWidthResize: e,
             onWidthResizeEnd: f,
             targetRef: o,
-            handleProps: d
+            handleProps: x
           }
         )
       ]
@@ -163,6 +165,6 @@ const Yo = O.forwardRef(function({
   );
 });
 export {
-  Yo as Box
+  Bo as Box
 };
 //# sourceMappingURL=box.js.map

package/dist/stacks/box/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport { clsx } from 'clsx';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport styles from '../stack.module.css';\nimport { HandleProps } from './handle_props.js';\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: (\n    width: number\n    // origin: 'left' | 'right'\n  ) => void;\n  onHeightResize?: (\n    height: number\n    // origin: 'top' | 'bottom'\n  ) => void;\n  onWidthResizeEnd?: (width: number) => void;\n  onHeightResizeEnd?: (width: number) => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":"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"}
+{"version":3,"file":"box.js","sources":["../../../src/stacks/box/box.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport React, { CSSProperties, HTMLAttributes, useRef } from 'react';\nimport { LeftResizeHandle } from './left_resize_handle.js';\nimport { RightResizeHandle } from './right_resize_handle.js';\nimport { BottomResizeHandle } from './bottom_resize_handle.js';\nimport { EndResizeHandle } from './end_resize_handle.js';\nimport { StartResizeHandle } from './start_resize_handle.js';\nimport { TopResizeHandle } from './top_resize_handle.js';\nimport { clsx } from 'clsx';\nimport { isCustomSizeProp } from '../utils/isCustomSizeProp.js';\nimport { removeUndefinedProperties } from '../utils/remove_undefined_properties.js';\nimport styles from '../stack.module.css';\nimport { HandleProps } from './handle_props.js';\n\nexport interface BoxProps extends HTMLAttributes<HTMLElement> {\n  as?: string;\n  style?: React.CSSProperties;\n  className?: string;\n  children?: React.ReactNode;\n  width?: 'default' | 'flex' | 'auto' | string | number;\n  minWidth?: CSSProperties['minWidth'];\n  maxWidth?: CSSProperties['maxWidth'];\n  height?: 'default' | 'flex' | 'auto' | string | number;\n  minHeight?: CSSProperties['minHeight'];\n  maxHeight?: CSSProperties['maxHeight'];\n  zIndex?: number;\n  padding?: CSSProperties['padding'];\n  paddingInline?: CSSProperties['paddingInline'];\n  paddingBlock?: CSSProperties['paddingBlock'];\n  margin?: CSSProperties['margin'];\n  marginBlock?: CSSProperties['marginBlock'];\n  marginInline?: CSSProperties['marginInline'];\n  marginInlineStart?: CSSProperties['marginInlineStart'];\n  marginInlineEnd?: CSSProperties['marginInlineEnd'];\n  marginTop?: CSSProperties['marginTop'];\n  marginBottom?: CSSProperties['marginBottom'];\n  overflow?: React.CSSProperties['overflow'];\n  overflowX?: React.CSSProperties['overflowX'];\n  overflowY?: React.CSSProperties['overflowY'];\n  enableResizeOnTop?: boolean;\n  enableResizeOnEnd?: boolean;\n  enableResizeOnBottom?: boolean;\n  enableResizeOnStart?: boolean;\n  enableResizeOnLeft?: boolean;\n  enableResizeOnRight?: boolean;\n  horizontalHandleProps?: HandleProps;\n  verticalHandleProps?: HandleProps;\n  onWidthResize?: (\n    width: number\n    // origin: 'left' | 'right'\n  ) => void;\n  onHeightResize?: (\n    height: number\n    // origin: 'top' | 'bottom'\n  ) => void;\n  onWidthResizeEnd?: (width: number) => void;\n  onHeightResizeEnd?: (width: number) => void;\n}\n\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\n  {\n    style,\n    className,\n    as = 'div',\n    children,\n    width = 'default',\n    minWidth,\n    maxWidth,\n    height = 'default',\n    minHeight,\n    maxHeight,\n    zIndex,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    enableResizeOnTop = false,\n    enableResizeOnEnd = false,\n    enableResizeOnBottom = false,\n    enableResizeOnStart = false,\n    enableResizeOnLeft = false,\n    enableResizeOnRight = false,\n    onWidthResize,\n    onHeightResize,\n    onWidthResizeEnd,\n    onHeightResizeEnd,\n    horizontalHandleProps,\n    verticalHandleProps,\n    ...otherProps\n  }: BoxProps,\n  ref\n) {\n  const As = as as React.ElementType;\n  const boxRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, boxRef);\n  const hasHorizontalResize =\n    enableResizeOnEnd || enableResizeOnStart || enableResizeOnLeft || enableResizeOnRight;\n  const hasVerticalResize = enableResizeOnBottom || enableResizeOnTop;\n\n  const cannotHorizontalFlex = hasHorizontalResize;\n  const cannotVerticalFlex = hasVerticalResize;\n  const warnHorizontalFlex = cannotHorizontalFlex && width === 'flex';\n  const warnVerticalFlex = cannotVerticalFlex && height === 'flex';\n  const isFlexing =\n    !warnHorizontalFlex && !warnVerticalFlex && (width === 'flex' || height === 'flex');\n\n  if (warnHorizontalFlex) {\n    width = '100%';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  if (warnVerticalFlex) {\n    height = 'auto';\n    // biome-ignore lint/suspicious/noConsole: Need to warn the developer\n    console.warn('You cannot have a resizable box and flex simultaneously');\n  }\n\n  const propStyles = {\n    width: !isCustomSizeProp(width) ? width : undefined,\n    minWidth,\n    maxWidth,\n    height: !isCustomSizeProp(height) ? height : undefined,\n    minHeight,\n    maxHeight,\n    padding,\n    paddingInline,\n    paddingBlock,\n    margin,\n    marginBlock,\n    marginInline,\n    marginInlineStart,\n    marginInlineEnd,\n    marginTop,\n    marginBottom,\n    overflow,\n    overflowX,\n    overflowY,\n    zIndex,\n  };\n\n  return (\n    <As\n      data-enabled-resize-on-start={String(enableResizeOnStart)}\n      data-enabled-resize-on-end={String(enableResizeOnEnd)}\n      data-enabled-resize-on-top={String(enableResizeOnTop)}\n      data-enabled-resize-on-bottom={String(enableResizeOnBottom)}\n      data_enabled-resize-on-left={String(enableResizeOnLeft)}\n      data_enabled-resize-on-right={String(enableResizeOnRight)}\n      data-height={height}\n      data-width={width}\n      ref={forkedRef}\n      style={{\n        ...removeUndefinedProperties(propStyles),\n        ...style,\n      }}\n      className={clsx(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        'tcn-box'\n      )}\n      {...otherProps}\n    >\n      {children}\n      {enableResizeOnTop && (\n        <TopResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnBottom && (\n        <BottomResizeHandle\n          onHeightResize={onHeightResize}\n          onHeightResizeEnd={onHeightResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnStart && (\n        <StartResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnEnd && (\n        <EndResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={horizontalHandleProps}\n        />\n      )}\n      {enableResizeOnLeft && (\n        <LeftResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n      {enableResizeOnRight && (\n        <RightResizeHandle\n          onWidthResize={onWidthResize}\n          onWidthResizeEnd={onWidthResizeEnd}\n          targetRef={boxRef}\n          handleProps={verticalHandleProps}\n        />\n      )}\n    </As>\n  );\n});\n"],"names":["Box","React","style","className","as","children","width","minWidth","maxWidth","height","minHeight","maxHeight","zIndex","padding","paddingInline","paddingBlock","margin","marginBlock","marginInline","marginInlineStart","marginInlineEnd","marginTop","marginBottom","overflow","overflowX","overflowY","enableResizeOnTop","enableResizeOnEnd","enableResizeOnBottom","enableResizeOnStart","enableResizeOnLeft","enableResizeOnRight","onWidthResize","onHeightResize","onWidthResizeEnd","onHeightResizeEnd","horizontalHandleProps","verticalHandleProps","otherProps","ref","As","boxRef","useRef","forkedRef","useForkRef","hasHorizontalResize","hasVerticalResize","cannotHorizontalFlex","cannotVerticalFlex","warnHorizontalFlex","warnVerticalFlex","isFlexing","propStyles","isCustomSizeProp","jsxs","removeUndefinedProperties","clsx","styles","jsx","TopResizeHandle","BottomResizeHandle","StartResizeHandle","EndResizeHandle","LeftResizeHandle","RightResizeHandle"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DO,MAAMA,KAAMC,EAAM,WAAkC,SACzD;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,mBAAAC,IAAoB;AAAA,EACpB,sBAAAC,IAAuB;AAAA,EACvB,qBAAAC,IAAsB;AAAA,EACtB,oBAAAC,IAAqB;AAAA,EACrB,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKpC,GACLqC,IAASC,GAA2B,IAAI,GACxCC,IAAYC,GAAWL,GAAKE,CAAM,GAClCI,IACJlB,KAAqBE,KAAuBC,KAAsBC,GAC9De,IAAoBlB,KAAwBF,GAE5CqB,IAAuBF,GACvBG,IAAqBF,GACrBG,IAAqBF,KAAwBzC,MAAU,QACvD4C,IAAmBF,KAAsBvC,MAAW,QACpD0C,IACJ,CAACF,KAAsB,CAACC,MAAqB5C,MAAU,UAAUG,MAAW;AAE9E,EAAIwC,MACF3C,IAAQ,QAER,QAAQ,KAAK,yDAAyD,IAGpE4C,MACFzC,IAAS,QAET,QAAQ,KAAK,yDAAyD;AAGxE,QAAM2C,IAAa;AAAA,IACjB,OAAQC,EAAiB/C,CAAK,IAAY,SAARA;AAAA,IAClC,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAS6C,EAAiB5C,CAAM,IAAa,SAATA;AAAA,IACpC,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAE;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,QAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAb;AAAA,EAAA;AAGF,SACE,gBAAA0C;AAAA,IAACd;AAAA,IAAA;AAAA,MACC,gCAA8B,OAAOX,CAAmB;AAAA,MACxD,8BAA4B,OAAOF,CAAiB;AAAA,MACpD,8BAA4B,OAAOD,CAAiB;AAAA,MACpD,iCAA+B,OAAOE,CAAoB;AAAA,MAC1D,+BAA6B,OAAOE,CAAkB;AAAA,MACtD,gCAA8B,OAAOC,CAAmB;AAAA,MACxD,eAAatB;AAAA,MACb,cAAYH;AAAA,MACZ,KAAKqC;AAAA,MACL,OAAO;AAAA,QACL,GAAGY,GAA0BH,CAAU;AAAA,QACvC,GAAGlD;AAAA,MAAA;AAAA,MAEL,WAAWsD;AAAA,QACTC,EAAO;AAAA,QACPtD;AAAA,QACAgD,KAAa;AAAA,QACbA,KAAaM,EAAO,YAAY;AAAA,QAChC;AAAA,MAAA;AAAA,MAED,GAAGnB;AAAA,MAEH,UAAA;AAAA,QAAAjC;AAAA,QACAqB,KACC,gBAAAgC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,gBAAA1B;AAAA,YACA,mBAAAE;AAAA,YACA,WAAWM;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBR,KACC,gBAAA8B;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,gBAAA3B;AAAA,YACA,mBAAAE;AAAA,YACA,WAAWM;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBR,KACC,gBAAA6B;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,eAAA7B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBT,KACC,gBAAA+B;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,eAAA9B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBN,KACC,gBAAA4B;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,eAAA/B;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBN,KACC,gBAAA2B;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,eAAAhC;AAAA,YACA,kBAAAE;AAAA,YACA,WAAWO;AAAA,YACX,aAAaJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}