@tcn/ui 0.16.0 → 0.17.0

package/dist/overlay/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","e","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../../src/overlay/menu/menu.tsx"],"sourcesContent":["import { BodyText } from '../../typography/body_text/body_text.js';\nimport { useForkRef } from '../../utils/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport type { HStackProps } from '../../stacks/h_stack.js';\nimport type { VStackProps } from '../../stacks/v_stack.js';\nimport { Popper, type PopperProps } from '../popper/legacy/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport { clsx } from 'clsx';\n\nexport type MenuProps = Omit<PopperProps & VStackProps, 'children'> & {\n  children?: React.ReactNode;\n  onActivatedMenu?: (hasActiveMenu: boolean) => void;\n  direction?: 'up' | 'down';\n};\n\nexport const Menu = React.forwardRef(function Menu(\n  {\n    anchorElement,\n    verticalAnchor,\n    verticalOrigin,\n    verticalOffset,\n    horizontalAnchor,\n    horizontalOrigin,\n    horizontalOffset,\n    direction,\n    open,\n    onClose,\n    restoreFocus,\n    veil,\n    onActivatedMenu,\n    children = [],\n    className,\n    ...props\n  }: MenuProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const clonedChildren = React.Children.toArray(children).map((child, index) => {\n    if (!React.isValidElement(child)) {\n      return child;\n    }\n\n    if (child.type !== MenuItem) {\n      return React.cloneElement(child, {\n        ...child.props,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          e.stopPropagation();\n          child.props.onClick && child.props.onClick(e);\n        },\n      });\n    }\n\n    const props = {\n      ...child.props,\n      key: index,\n      verticalAnchor: direction === 'up' ? 'bottom' : 'top',\n      verticalOrigin: direction === 'up' ? 'bottom' : 'top',\n      verticalOffset,\n      horizontalAnchor: 'end',\n      horizontalOrigin: 'start',\n      horizontalOffset,\n      direction,\n      onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n        if (child.props.children == null) {\n          onClose && onClose();\n        }\n        child.props.onClick && child.props.onClick(e);\n      },\n      onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {\n        setFocusedIndex(index);\n        onActivatedMenu && onActivatedMenu(true);\n        child.props.onMouseEnter && child.props.onMouseEnter(e);\n      },\n    };\n\n    if (child.type === MenuItem) {\n      props.open = focusedIndex === index;\n    }\n\n    return React.cloneElement(child, props);\n  });\n\n  direction === 'up' && clonedChildren.reverse();\n\n  useLayoutEffect(() => {\n    if (!open) {\n      setFocusedIndex(-1);\n      onActivatedMenu && onActivatedMenu(false);\n    }\n  }, [open, onActivatedMenu]);\n\n  return (\n    <Popper\n      anchorElement={anchorElement}\n      verticalAnchor={verticalAnchor}\n      verticalOrigin={verticalOrigin}\n      verticalOffset={verticalOffset}\n      horizontalAnchor={horizontalAnchor || 'end'}\n      horizontalOrigin={horizontalOrigin || 'end'}\n      horizontalOffset={horizontalOffset}\n      open={open}\n      onClose={onClose}\n      restoreFocus={restoreFocus}\n      veil={veil}\n    >\n      <VStack ref={ref} className={clsx(styles.menu, className, 'tcn-menu')} {...props}>\n        {clonedChildren}\n      </VStack>\n    </Popper>\n  );\n});\n\nexport interface MenuItemProps extends Omit<HStackProps, 'children'> {\n  open?: boolean;\n  children?: React.ReactElement<MenuItemProps>[];\n  selected?: boolean;\n  label?: React.ReactNode;\n  direction?: 'up' | 'down';\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'center' | 'start' | 'end';\n  horizontalOrigin?: 'center' | 'start' | 'end';\n  horizontalOffset?: number;\n}\n\nexport const MenuItem = React.forwardRef(function MenuItem(\n  {\n    selected,\n    label,\n    className,\n    children,\n    direction = 'down',\n    verticalAnchor = 'top',\n    verticalOrigin = 'top',\n    verticalOffset,\n    horizontalAnchor = 'end',\n    horizontalOrigin = 'start',\n    horizontalOffset,\n    open = false,\n    ...props\n  }: MenuItemProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const hasEnteredMenuRef = useRef(false);\n  const cursorPositionRef = useRef({ x: -1, y: -1 });\n  const cursorDeltaRef = useRef({ x: -1, y: -1 });\n  const [showVeil, setShowVeil] = useState(false);\n  const itemRef = useRef<HTMLElement | null>(null);\n  const forkedRef = useForkRef(ref, itemRef);\n  const hasSubmenu = children != null && children.length > 0;\n\n  function close() {\n    setShowVeil(false);\n  }\n\n  useLayoutEffect(() => {\n    const itemElement = itemRef.current;\n\n    if (itemElement && hasSubmenu && open) {\n      const direction = window.getComputedStyle(itemElement).direction;\n\n      const startPosition = cursorPositionRef.current;\n      const delta = cursorDeltaRef.current;\n\n      const calculateSlope = (event: MouseEvent) => {\n        if (startPosition.x === -1) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n\n        const deltaX = event.clientX - startPosition.x;\n        const deltaY = event.clientY - startPosition.y;\n        delta.x = Math.max(Math.abs(deltaX), 0.001);\n        delta.y = Math.max(Math.abs(deltaY), 0.001);\n\n        const isSlopeWrongDirection =\n          ((deltaX < 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'ltr') ||\n          ((deltaX > 0 ||\n            (direction === 'down' && deltaY < 0) ||\n            (direction === 'up' && deltaY > 0)) &&\n            direction === 'rtl');\n\n        if (isSlopeWrongDirection) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        const distance = Math.sqrt(delta.x ** 2 + delta.y ** 2);\n\n        if (hasEnteredMenuRef.current) {\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n          setShowVeil(false);\n          return;\n        }\n\n        if (distance > 5) {\n          const movingHorizontal = delta.x / delta.y > 0.2;\n\n          if (movingHorizontal) {\n            setShowVeil(true);\n          } else {\n            setShowVeil(false);\n          }\n\n          startPosition.x = event.clientX;\n          startPosition.y = event.clientY;\n        }\n      };\n\n      window.addEventListener('mousemove', calculateSlope);\n\n      return () => {\n        window.removeEventListener('mousemove', calculateSlope);\n      };\n    }\n  }, [hasSubmenu, open]);\n\n  useLayoutEffect(() => {\n    setShowVeil(open);\n  }, [open]);\n\n  return (\n    <>\n      <HStack\n        as=\"button\"\n        ref={forkedRef}\n        data-is-selected={Boolean(selected)}\n        data-has-children={Boolean(hasSubmenu)}\n        className={clsx(className, styles['menu-item'], 'tcn-menu-item')}\n        data-is-open={open}\n        {...props}\n      >\n        {typeof label === 'string' ? <BodyText color=\"inherit\">{label}</BodyText> : label}\n      </HStack>\n      {children && (\n        <Menu\n          anchorElement={itemRef.current}\n          veil={showVeil}\n          onClose={close}\n          open={open}\n          direction={direction}\n          verticalAnchor={verticalAnchor}\n          verticalOrigin={verticalOrigin}\n          verticalOffset={verticalOffset}\n          horizontalAnchor={horizontalAnchor}\n          horizontalOrigin={horizontalOrigin}\n          horizontalOffset={horizontalOffset}\n          hAlign=\"start\"\n          onActivatedMenu={hasActiveMenu => {\n            hasEnteredMenuRef.current = hasActiveMenu;\n          }}\n        >\n          {children}\n        </Menu>\n      )}\n    </>\n  );\n});\n"],"names":["Menu","React","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","direction","open","onClose","restoreFocus","veil","onActivatedMenu","children","className","props","ref","focusedIndex","setFocusedIndex","useState","clonedChildren","child","index","MenuItem","e","useLayoutEffect","jsx","Popper","VStack","clsx","styles","selected","label","hasEnteredMenuRef","useRef","cursorPositionRef","cursorDeltaRef","showVeil","setShowVeil","itemRef","forkedRef","useForkRef","hasSubmenu","close","itemElement","startPosition","delta","calculateSlope","event","deltaX","deltaY","distance","movingHorizontal","jsxs","Fragment","HStack","BodyText","hasActiveMenu"],"mappings":"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"}

package/dist/overlay/popper/context_popper.js

@@ -12,7 +12,10 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
-const S = C(function({
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
+const y = C(function({
   anchorElement: o,
   restoreFocus: i,
   children: m,
@@ -21,21 +24,21 @@ const S = C(function({
   dismissals: n = [p.CLICK_AWAY, p.SCROLL_AWAY],
   ...c
 }, l) {
-  const { isOpen: R, close: u, rectangle: e } = P(o), r = x(null), a = L(l, r), d = [r, o, ...s];
+  const { isOpen: R, close: u, rectangle: r } = P(o), e = x(null), a = L(l, e), d = [e, o, ...s];
   return /* @__PURE__ */ t(
     A,
     {
-      open: R && e != null,
+      open: R && r != null,
       onDismissal: u,
       restoreFocus: i,
       dismissals: n,
       acceptedRefs: d,
       isException: f,
-      children: /* @__PURE__ */ t(g, { ref: a, anchor: e, ...c, children: m })
+      children: /* @__PURE__ */ t(g, { ref: a, anchor: r, ...c, children: m })
     }
   );
 });
 export {
-  S as ContextPopper
+  y as ContextPopper
 };
 //# sourceMappingURL=context_popper.js.map

package/dist/overlay/popper/context_popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"context_popper.js","sources":["../../../src/overlay/popper/context_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { Tethered, type TetheredProps } from '../tethered/tethered.js';\nimport { useContextTrigger } from './hooks/use_context_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n  Omit<TetheredProps, 'anchor'> & {\n    anchorElement: React.RefObject<HTMLElement>;\n  };\n\nexport const ContextPopper = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ContextPopperProps>\n>(function ContextPopper(\n  {\n    anchorElement,\n    restoreFocus,\n    children,\n    acceptedRefs = [],\n    isException,\n    dismissals = [PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY],\n    ...tetheredProps\n  },\n  ref\n) {\n  const { isOpen, close, rectangle } = useContextTrigger(anchorElement);\n  const popperRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useForkRef(ref, popperRef);\n  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n  return (\n    <BasePopper\n      open={isOpen && rectangle != null}\n      onDismissal={close}\n      restoreFocus={restoreFocus}\n      dismissals={dismissals}\n      acceptedRefs={effectiveAcceptedRefs}\n      isException={isException}\n    >\n      <Tethered ref={mergedRef} anchor={rectangle} {...tetheredProps}>\n        {children}\n      </Tethered>\n    </BasePopper>\n  );\n});\n"],"names":["ContextPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","tetheredProps","ref","isOpen","close","rectangle","useContextTrigger","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","Tethered"],"mappings":";;;;;;;;;;;;;;AAYO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,YAAYA,EAAgB,WAAW;AAAA,EACrE,GAAGC;AACL,GACAC,GACA;AACA,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAkBZ,CAAa,GAC9Da,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWR,GAAKK,CAAS,GACrCI,IAAwB,CAACJ,GAAWb,GAAe,GAAGG,CAAY;AAExE,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMV,KAAUE,KAAa;AAAA,MAC7B,aAAaD;AAAA,MACb,cAAAT;AAAA,MACA,YAAAI;AAAA,MACA,cAAcY;AAAA,MACd,aAAAb;AAAA,MAEA,UAAA,gBAAAc,EAACE,KAAS,KAAKL,GAAW,QAAQJ,GAAY,GAAGJ,GAC9C,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"context_popper.js","sources":["../../../src/overlay/popper/context_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { Tethered, type TetheredProps } from '../tethered/tethered.js';\nimport { useContextTrigger } from './hooks/use_context_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ContextPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n  Omit<TetheredProps, 'anchor'> & {\n    anchorElement: React.RefObject<HTMLElement>;\n  };\n\nexport const ContextPopper = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ContextPopperProps>\n>(function ContextPopper(\n  {\n    anchorElement,\n    restoreFocus,\n    children,\n    acceptedRefs = [],\n    isException,\n    dismissals = [PopperDismissal.CLICK_AWAY, PopperDismissal.SCROLL_AWAY],\n    ...tetheredProps\n  },\n  ref\n) {\n  const { isOpen, close, rectangle } = useContextTrigger(anchorElement);\n  const popperRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useForkRef(ref, popperRef);\n  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n  return (\n    <BasePopper\n      open={isOpen && rectangle != null}\n      onDismissal={close}\n      restoreFocus={restoreFocus}\n      dismissals={dismissals}\n      acceptedRefs={effectiveAcceptedRefs}\n      isException={isException}\n    >\n      <Tethered ref={mergedRef} anchor={rectangle} {...tetheredProps}>\n        {children}\n      </Tethered>\n    </BasePopper>\n  );\n});\n"],"names":["ContextPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","tetheredProps","ref","isOpen","close","rectangle","useContextTrigger","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","Tethered"],"mappings":";;;;;;;;;;;;;;;;;AAYO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,YAAYA,EAAgB,WAAW;AAAA,EACrE,GAAGC;AACL,GACAC,GACA;AACA,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,WAAAC,EAAA,IAAcC,EAAkBZ,CAAa,GAC9Da,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWR,GAAKK,CAAS,GACrCI,IAAwB,CAACJ,GAAWb,GAAe,GAAGG,CAAY;AAExE,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMV,KAAUE,KAAa;AAAA,MAC7B,aAAaD;AAAA,MACb,cAAAT;AAAA,MACA,YAAAI;AAAA,MACA,cAAcY;AAAA,MACd,aAAAb;AAAA,MAEA,UAAA,gBAAAc,EAACE,KAAS,KAAKL,GAAW,QAAQJ,GAAY,GAAGJ,GAC9C,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/overlay/popper/element_popper.js

@@ -10,26 +10,29 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
-const C = P(function({
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
+const H = P(function({
   restoreFocus: t,
   open: p,
   onDismissal: m,
-  isException: f,
-  acceptedRefs: i = [],
+  isException: i,
+  acceptedRefs: f = [],
   veil: c,
   dismissals: n,
   children: s,
   anchorElement: e,
   ...R
 }, d) {
-  const r = a(null), l = g(d, r), u = [r, e, ...i];
+  const r = a(null), l = g(d, r), u = [r, e, ...f];
   return /* @__PURE__ */ o(
     x,
     {
       restoreFocus: t,
       open: p,
       onDismissal: m,
-      isException: f,
+      isException: i,
       dismissals: n,
       acceptedRefs: u,
       veil: c,
@@ -46,6 +49,6 @@ const C = P(function({
   );
 });
 export {
-  C as ElementPopper
+  H as ElementPopper
 };
 //# sourceMappingURL=element_popper.js.map

package/dist/overlay/popper/element_popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n  {\n    restoreFocus,\n    open,\n    onDismissal,\n    isException,\n    acceptedRefs = [],\n    veil,\n    dismissals,\n    children,\n    anchorElement,\n    ...elementTetheredProps\n  },\n  ref\n) {\n  const popperRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useForkRef(ref, popperRef);\n  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n  return (\n    <BasePopper\n      restoreFocus={restoreFocus}\n      open={open}\n      onDismissal={onDismissal}\n      isException={isException}\n      dismissals={dismissals}\n      acceptedRefs={effectiveAcceptedRefs}\n      veil={veil}\n    >\n      <ElementTethered\n        ref={mergedRef}\n        anchorElement={anchorElement}\n        {...elementTetheredProps}\n      >\n        {children}\n      </ElementTethered>\n    </BasePopper>\n  );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","anchorElement","elementTetheredProps","ref","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;;AAUO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWJ,GAAKC,CAAS,GACrCI,IAAwB,CAACJ,GAAWH,GAAe,GAAGJ,CAAY;AAExE,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAcS;AAAA,MACd,MAAAV;AAAA,MAEA,UAAA,gBAAAW;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKL;AAAA,UACL,eAAAL;AAAA,UACC,GAAGC;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"element_popper.js","sources":["../../../src/overlay/popper/element_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { useForkRef } from '../../utils/index.js';\n\nexport type ElementPopperProps = BasePopperProps & ElementTetheredProps;\n\nexport const ElementPopper = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ElementPopperProps>\n>(function ElementPopper(\n  {\n    restoreFocus,\n    open,\n    onDismissal,\n    isException,\n    acceptedRefs = [],\n    veil,\n    dismissals,\n    children,\n    anchorElement,\n    ...elementTetheredProps\n  },\n  ref\n) {\n  const popperRef = useRef<HTMLDivElement>(null);\n  const mergedRef = useForkRef(ref, popperRef);\n  const effectiveAcceptedRefs = [popperRef, anchorElement, ...acceptedRefs];\n\n  return (\n    <BasePopper\n      restoreFocus={restoreFocus}\n      open={open}\n      onDismissal={onDismissal}\n      isException={isException}\n      dismissals={dismissals}\n      acceptedRefs={effectiveAcceptedRefs}\n      veil={veil}\n    >\n      <ElementTethered\n        ref={mergedRef}\n        anchorElement={anchorElement}\n        {...elementTetheredProps}\n      >\n        {children}\n      </ElementTethered>\n    </BasePopper>\n  );\n});\n"],"names":["ElementPopper","forwardRef","restoreFocus","open","onDismissal","isException","acceptedRefs","veil","dismissals","children","anchorElement","elementTetheredProps","ref","popperRef","useRef","mergedRef","useForkRef","effectiveAcceptedRefs","jsx","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;;;;;AAUO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAYC,EAAWJ,GAAKC,CAAS,GACrCI,IAAwB,CAACJ,GAAWH,GAAe,GAAGJ,CAAY;AAExE,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAAC;AAAA,MACA,aAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAG;AAAA,MACA,cAAcS;AAAA,MACd,MAAAV;AAAA,MAEA,UAAA,gBAAAW;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,KAAKL;AAAA,UACL,eAAAL;AAAA,UACC,GAAGC;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;"}

package/dist/overlay/popper/legacy/popper.js

@@ -7,9 +7,12 @@ import "../../../utils/hooks/use_resize_observer.js";
 import "../../../utils/dnd/context.js";
 import M from "clsx";
 import "../../../draggable.module-BgelQsuJ.js";
+import "../../../utils/resize/context.js";
+import "../../../resizable.module-I6iyBAvM.js";
+import "../../../utils/resize/resize_handle.js";
 import { Portal as Q } from "../../portal/portal.js";
 import '../../../popper.css';const U = "_popover_fcfb66a", V = "_popover-veil_c56df66", _ = { popover: U, "popover-veil": V };
-function se({
+function le({
   anchorElement: r,
   verticalAnchor: j = "bottom",
   verticalOrigin: E = "top",
@@ -28,13 +31,13 @@ function se({
   isClickAwayException: W,
   isScrollAwayException: $
 }) {
-  const x = d(r), [p, q] = K({ top: 0, left: 0 }), C = d(null), w = d(null), T = c && r != null, D = H ?? [], F = !N, S = d(null);
+  const x = d(r), [p, q] = K({ top: 0, left: 0 }), C = d(null), m = d(null), T = c && r != null, D = H ?? [], F = !N, S = d(null);
   function A() {
     k && k();
   }
-  const m = () => {
-    if (!r || !w.current) return;
-    const e = r.getBoundingClientRect(), o = w.current.getBoundingClientRect(), L = window.innerWidth, P = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
+  const w = () => {
+    if (!r || !m.current) return;
+    const e = r.getBoundingClientRect(), o = m.current.getBoundingClientRect(), L = window.innerWidth, P = window.innerHeight, v = getComputedStyle(r).direction === "rtl";
     let t = e.top, i = e.left;
     switch (j) {
       case "top":
@@ -61,10 +64,10 @@ function se({
     let n = u;
     v && (u === "start" ? n = "end" : u === "end" && (n = "start")), n === "start" || (n === "center" ? i -= o.width / 2 : n === "end" && (i -= o.width)), i + o.width > L && (i = L - o.width), i < 0 && (i = 0), t + o.height > P && (t = P - o.height), t < 0 && (t = 0), (t !== p.top || i !== p.left) && q({ top: t, left: i });
   };
-  if (h(() => (window.addEventListener("resize", m), () => {
-    window.removeEventListener("resize", m);
+  if (h(() => (window.addEventListener("resize", w), () => {
+    window.removeEventListener("resize", w);
   })), h(() => {
-    m();
+    w();
   }, [c, r]), h(() => {
     if (c)
       C.current = window.document.activeElement;
@@ -80,7 +83,7 @@ function se({
   let l = /* @__PURE__ */ f(J, { onScrollAway: A, isException: $, children: /* @__PURE__ */ f(
     "div",
     {
-      ref: w,
+      ref: m,
       className: M(_.popover, "tcn-popper"),
       style: {
         top: `${p.top}px`,
@@ -111,6 +114,6 @@ function se({
   ] });
 }
 export {
-  se as Popper
+  le as Popper
 };
 //# sourceMappingURL=popper.js.map

package/dist/overlay/popper/legacy/popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"popper.js","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"sourcesContent":["import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { Portal } from '../../portal/portal.js';\nimport styles from './popper.module.css';\nimport clsx from 'clsx';\n\nexport interface PopperProps {\n  anchorElement: HTMLElement | null;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n  open: boolean;\n  onClose: () => void;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n  veil?: boolean;\n  onVeilClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  clickAwayRefs?: React.RefObject<HTMLElement>[];\n  isClickAwayException?: (target: HTMLElement) => boolean;\n  isScrollAwayException?: (target: HTMLElement) => boolean;\n  disableClickAway?: boolean;\n}\n\n// This component is being phased out in favor of ElementPopper - need to ensure parity beforehand.\nexport function Popper({\n  anchorElement,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  verticalOffset = 0,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  restoreFocus = false,\n  veil = false,\n  onVeilClick,\n  clickAwayRefs = [],\n  open,\n  onClose,\n  children,\n  disableClickAway = false,\n  isClickAwayException,\n  isScrollAwayException,\n}: PopperProps) {\n  const anchorElementRef = useRef(anchorElement);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const activeElementRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const canOpen = open && anchorElement != null;\n  const finalClickAwayRefs: React.RefObject<HTMLElement>[] = clickAwayRefs ?? [];\n  const enableClickAway = !disableClickAway;\n  const veilRef = useRef<HTMLDivElement>(null);\n  function close() {\n    onClose && onClose();\n  }\n\n  // eslint-disable-next-line complexity\n  const updatePosition = () => {\n    if (!anchorElement || !popoverRef.current) return;\n\n    const anchorRect = anchorElement.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Determine the text direction (ltr or rtl)\n    const computedStyle = getComputedStyle(anchorElement);\n    const isRtl = computedStyle.direction === 'rtl';\n\n    let top = anchorRect.top;\n    let left = anchorRect.left;\n\n    // Calculate vertical position\n    switch (verticalAnchor) {\n      case 'top':\n        top += verticalOffset;\n        break;\n      case 'center':\n        top += anchorRect.height / 2;\n        break;\n      case 'bottom':\n        top += anchorRect.height - verticalOffset;\n        break;\n    }\n\n    switch (verticalOrigin) {\n      case 'top':\n        break;\n      case 'center':\n        top -= popoverRect.height / 2;\n        break;\n      case 'bottom':\n        top -= popoverRect.height;\n        break;\n    }\n\n    // Calculate horizontal position with direction sensitivity\n    if (horizontalAnchor === 'start') {\n      left += isRtl ? anchorRect.width + horizontalOffset : horizontalOffset;\n    } else if (horizontalAnchor === 'center') {\n      left += anchorRect.width / 2;\n    } else if (horizontalAnchor === 'end') {\n      left += isRtl ? -horizontalOffset : anchorRect.width + horizontalOffset;\n    }\n\n    // Adjust the origin based on RTL direction\n    let adjustedHorizontalOrigin = horizontalOrigin;\n    if (isRtl) {\n      if (horizontalOrigin === 'start') {\n        adjustedHorizontalOrigin = 'end';\n      } else if (horizontalOrigin === 'end') {\n        adjustedHorizontalOrigin = 'start';\n      }\n    }\n\n    // Apply adjusted origin to the position calculation\n    if (adjustedHorizontalOrigin === 'start') {\n      // No adjustment needed\n    } else if (adjustedHorizontalOrigin === 'center') {\n      left -= popoverRect.width / 2;\n    } else if (adjustedHorizontalOrigin === 'end') {\n      left -= popoverRect.width;\n    }\n\n    // Ensure the popover stays within the viewport\n    // Prevent overflow to the right\n    if (left + popoverRect.width > viewportWidth) {\n      left = viewportWidth - popoverRect.width;\n    }\n\n    // Prevent overflow to the left\n    if (left < 0) {\n      left = 0;\n    }\n\n    // Prevent overflow to the bottom\n    if (top + popoverRect.height > viewportHeight) {\n      top = viewportHeight - popoverRect.height;\n    }\n\n    // Prevent overflow to the top\n    if (top < 0) {\n      top = 0;\n    }\n\n    // Only update if position has changed to avoid unnecessary re-renders\n    if (top !== position.top || left !== position.left) {\n      setPosition({ top, left });\n    }\n  };\n\n  useLayoutEffect(() => {\n    window.addEventListener('resize', updatePosition);\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n    };\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: updatePosition depends on open and anchorElement\n  useLayoutEffect(() => {\n    updatePosition();\n  }, [open, anchorElement]);\n\n  useLayoutEffect(() => {\n    if (open) {\n      activeElementRef.current = window.document.activeElement as HTMLElement;\n    } else {\n      const restoreToElement = activeElementRef.current;\n      requestAnimationFrame(() => {\n        restoreFocus && restoreToElement?.focus();\n      });\n    }\n  }, [open, restoreFocus]);\n\n  if (!canOpen) {\n    return null;\n  }\n\n  anchorElementRef.current = anchorElement;\n\n  let content = (\n    <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>\n      <div\n        ref={popoverRef}\n        className={clsx(styles.popover, 'tcn-popper')}\n        style={{\n          top: `${position.top}px`,\n          left: `${position.left}px`,\n        }}\n      >\n        {children}\n      </div>\n    </ScrollAwayListener>\n  );\n\n  if (enableClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={close}\n        refs={[anchorElementRef, ...finalClickAwayRefs]}\n        isException={isClickAwayException}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return (\n    <Portal>\n      {veil && (\n        <div\n          ref={veilRef}\n          onClick={e => veilRef.current === e.target && onVeilClick && onVeilClick(e)}\n          className={styles['popover-veil']}\n        >\n          {content}\n        </div>\n      )}\n      {!veil && content}\n    </Portal>\n  );\n}\n"],"names":["Popper","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","restoreFocus","veil","onVeilClick","clickAwayRefs","open","onClose","children","disableClickAway","isClickAwayException","isScrollAwayException","anchorElementRef","useRef","position","setPosition","useState","activeElementRef","popoverRef","canOpen","finalClickAwayRefs","enableClickAway","veilRef","close","updatePosition","anchorRect","popoverRect","viewportWidth","viewportHeight","isRtl","top","left","adjustedHorizontalOrigin","useLayoutEffect","restoreToElement","content","jsx","ScrollAwayListener","clsx","styles","ClickAwayListener","Portal"],"mappings":";;;;;;;;;;;AA2BO,SAASA,GAAO;AAAA,EACrB,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC,IAAiB;AAAA,EACjB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC,IAAgB,CAAA;AAAA,EAChB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,sBAAAC;AAAA,EACA,uBAAAC;AACF,GAAgB;AACd,QAAMC,IAAmBC,EAAOlB,CAAa,GACvC,CAACmB,GAAUC,CAAW,IAAIC,EAAS,EAAE,KAAK,GAAG,MAAM,GAAG,GACtDC,IAAmBJ,EAA2B,IAAI,GAClDK,IAAaL,EAAuB,IAAI,GACxCM,IAAUb,KAAQX,KAAiB,MACnCyB,IAAqDf,KAAiB,CAAA,GACtEgB,IAAkB,CAACZ,GACnBa,IAAUT,EAAuB,IAAI;AAC3C,WAASU,IAAQ;AACf,IAAAhB,KAAWA,EAAA;AAAA,EACb;AAGA,QAAMiB,IAAiB,MAAM;AAC3B,QAAI,CAAC7B,KAAiB,CAACuB,EAAW,QAAS;AAE3C,UAAMO,IAAa9B,EAAc,sBAAA,GAC3B+B,IAAcR,EAAW,QAAQ,sBAAA,GACjCS,IAAgB,OAAO,YACvBC,IAAiB,OAAO,aAIxBC,IADgB,iBAAiBlC,CAAa,EACxB,cAAc;AAE1C,QAAImC,IAAML,EAAW,KACjBM,IAAON,EAAW;AAGtB,YAAQ7B,GAAA;AAAA,MACN,KAAK;AACH,QAAAkC,KAAOhC;AACP;AAAA,MACF,KAAK;AACH,QAAAgC,KAAOL,EAAW,SAAS;AAC3B;AAAA,MACF,KAAK;AACH,QAAAK,KAAOL,EAAW,SAAS3B;AAC3B;AAAA,IAAA;AAGJ,YAAQD,GAAA;AAAA,MACN,KAAK;AACH;AAAA,MACF,KAAK;AACH,QAAAiC,KAAOJ,EAAY,SAAS;AAC5B;AAAA,MACF,KAAK;AACH,QAAAI,KAAOJ,EAAY;AACnB;AAAA,IAAA;AAIJ,IAAI3B,MAAqB,UACvBgC,KAAQF,IAAQJ,EAAW,QAAQxB,IAAmBA,IAC7CF,MAAqB,WAC9BgC,KAAQN,EAAW,QAAQ,IAClB1B,MAAqB,UAC9BgC,KAAQF,IAAQ,CAAC5B,IAAmBwB,EAAW,QAAQxB;AAIzD,QAAI+B,IAA2BhC;AAC/B,IAAI6B,MACE7B,MAAqB,UACvBgC,IAA2B,QAClBhC,MAAqB,UAC9BgC,IAA2B,WAK3BA,MAA6B,YAEtBA,MAA6B,WACtCD,KAAQL,EAAY,QAAQ,IACnBM,MAA6B,UACtCD,KAAQL,EAAY,SAKlBK,IAAOL,EAAY,QAAQC,MAC7BI,IAAOJ,IAAgBD,EAAY,QAIjCK,IAAO,MACTA,IAAO,IAILD,IAAMJ,EAAY,SAASE,MAC7BE,IAAMF,IAAiBF,EAAY,SAIjCI,IAAM,MACRA,IAAM,KAIJA,MAAQhB,EAAS,OAAOiB,MAASjB,EAAS,SAC5CC,EAAY,EAAE,KAAAe,GAAK,MAAAC,GAAM;AAAA,EAE7B;AAyBA,MAvBAE,EAAgB,OACd,OAAO,iBAAiB,UAAUT,CAAc,GACzC,MAAM;AACX,WAAO,oBAAoB,UAAUA,CAAc;AAAA,EACrD,EACD,GAGDS,EAAgB,MAAM;AACpB,IAAAT,EAAA;AAAA,EACF,GAAG,CAAClB,GAAMX,CAAa,CAAC,GAExBsC,EAAgB,MAAM;AACpB,QAAI3B;AACF,MAAAW,EAAiB,UAAU,OAAO,SAAS;AAAA,SACtC;AACL,YAAMiB,IAAmBjB,EAAiB;AAC1C,4BAAsB,MAAM;AAC1B,QAAAf,KAAgBgC,GAAkB,MAAA;AAAA,MACpC,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC5B,GAAMJ,CAAY,CAAC,GAEnB,CAACiB;AACH,WAAO;AAGT,EAAAP,EAAiB,UAAUjB;AAE3B,MAAIwC,IACF,gBAAAC,EAACC,GAAA,EAAmB,cAAcd,GAAO,aAAaZ,GACpD,UAAA,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKlB;AAAA,MACL,WAAWoB,EAAKC,EAAO,SAAS,YAAY;AAAA,MAC5C,OAAO;AAAA,QACL,KAAK,GAAGzB,EAAS,GAAG;AAAA,QACpB,MAAM,GAAGA,EAAS,IAAI;AAAA,MAAA;AAAA,MAGvB,UAAAN;AAAA,IAAA;AAAA,EAAA,GAEL;AAGF,SAAIa,MACFc,IACE,gBAAAC;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,aAAajB;AAAA,MACb,MAAM,CAACX,GAAkB,GAAGQ,CAAkB;AAAA,MAC9C,aAAaV;AAAA,MAEZ,UAAAyB;AAAA,IAAA;AAAA,EAAA,sBAMJM,GAAA,EACE,UAAA;AAAA,IAAAtC,KACC,gBAAAiC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKd;AAAA,QACL,SAAS,OAAKA,EAAQ,YAAY,EAAE,UAAUlB,KAAeA,EAAY,CAAC;AAAA,QAC1E,WAAWmC,EAAO,cAAc;AAAA,QAE/B,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ,CAAChC,KAAQgC;AAAA,EAAA,GACZ;AAEJ;"}
+{"version":3,"file":"popper.js","sources":["../../../../src/overlay/popper/legacy/popper.tsx"],"sourcesContent":["import { ClickAwayListener, ScrollAwayListener } from '../../../utils/index.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { Portal } from '../../portal/portal.js';\nimport styles from './popper.module.css';\nimport clsx from 'clsx';\n\nexport interface PopperProps {\n  anchorElement: HTMLElement | null;\n  verticalAnchor?: 'top' | 'center' | 'bottom';\n  verticalOrigin?: 'top' | 'center' | 'bottom';\n  verticalOffset?: number;\n  horizontalAnchor?: 'start' | 'center' | 'end';\n  horizontalOrigin?: 'start' | 'center' | 'end';\n  horizontalOffset?: number;\n  open: boolean;\n  onClose: () => void;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n  veil?: boolean;\n  onVeilClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n  clickAwayRefs?: React.RefObject<HTMLElement>[];\n  isClickAwayException?: (target: HTMLElement) => boolean;\n  isScrollAwayException?: (target: HTMLElement) => boolean;\n  disableClickAway?: boolean;\n}\n\n// This component is being phased out in favor of ElementPopper - need to ensure parity beforehand.\nexport function Popper({\n  anchorElement,\n  verticalAnchor = 'bottom',\n  verticalOrigin = 'top',\n  verticalOffset = 0,\n  horizontalAnchor = 'start',\n  horizontalOrigin = 'start',\n  horizontalOffset = 0,\n  restoreFocus = false,\n  veil = false,\n  onVeilClick,\n  clickAwayRefs = [],\n  open,\n  onClose,\n  children,\n  disableClickAway = false,\n  isClickAwayException,\n  isScrollAwayException,\n}: PopperProps) {\n  const anchorElementRef = useRef(anchorElement);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const activeElementRef = useRef<HTMLElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const canOpen = open && anchorElement != null;\n  const finalClickAwayRefs: React.RefObject<HTMLElement>[] = clickAwayRefs ?? [];\n  const enableClickAway = !disableClickAway;\n  const veilRef = useRef<HTMLDivElement>(null);\n  function close() {\n    onClose && onClose();\n  }\n\n  // eslint-disable-next-line complexity\n  const updatePosition = () => {\n    if (!anchorElement || !popoverRef.current) return;\n\n    const anchorRect = anchorElement.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n\n    // Determine the text direction (ltr or rtl)\n    const computedStyle = getComputedStyle(anchorElement);\n    const isRtl = computedStyle.direction === 'rtl';\n\n    let top = anchorRect.top;\n    let left = anchorRect.left;\n\n    // Calculate vertical position\n    switch (verticalAnchor) {\n      case 'top':\n        top += verticalOffset;\n        break;\n      case 'center':\n        top += anchorRect.height / 2;\n        break;\n      case 'bottom':\n        top += anchorRect.height - verticalOffset;\n        break;\n    }\n\n    switch (verticalOrigin) {\n      case 'top':\n        break;\n      case 'center':\n        top -= popoverRect.height / 2;\n        break;\n      case 'bottom':\n        top -= popoverRect.height;\n        break;\n    }\n\n    // Calculate horizontal position with direction sensitivity\n    if (horizontalAnchor === 'start') {\n      left += isRtl ? anchorRect.width + horizontalOffset : horizontalOffset;\n    } else if (horizontalAnchor === 'center') {\n      left += anchorRect.width / 2;\n    } else if (horizontalAnchor === 'end') {\n      left += isRtl ? -horizontalOffset : anchorRect.width + horizontalOffset;\n    }\n\n    // Adjust the origin based on RTL direction\n    let adjustedHorizontalOrigin = horizontalOrigin;\n    if (isRtl) {\n      if (horizontalOrigin === 'start') {\n        adjustedHorizontalOrigin = 'end';\n      } else if (horizontalOrigin === 'end') {\n        adjustedHorizontalOrigin = 'start';\n      }\n    }\n\n    // Apply adjusted origin to the position calculation\n    if (adjustedHorizontalOrigin === 'start') {\n      // No adjustment needed\n    } else if (adjustedHorizontalOrigin === 'center') {\n      left -= popoverRect.width / 2;\n    } else if (adjustedHorizontalOrigin === 'end') {\n      left -= popoverRect.width;\n    }\n\n    // Ensure the popover stays within the viewport\n    // Prevent overflow to the right\n    if (left + popoverRect.width > viewportWidth) {\n      left = viewportWidth - popoverRect.width;\n    }\n\n    // Prevent overflow to the left\n    if (left < 0) {\n      left = 0;\n    }\n\n    // Prevent overflow to the bottom\n    if (top + popoverRect.height > viewportHeight) {\n      top = viewportHeight - popoverRect.height;\n    }\n\n    // Prevent overflow to the top\n    if (top < 0) {\n      top = 0;\n    }\n\n    // Only update if position has changed to avoid unnecessary re-renders\n    if (top !== position.top || left !== position.left) {\n      setPosition({ top, left });\n    }\n  };\n\n  useLayoutEffect(() => {\n    window.addEventListener('resize', updatePosition);\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n    };\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: updatePosition depends on open and anchorElement\n  useLayoutEffect(() => {\n    updatePosition();\n  }, [open, anchorElement]);\n\n  useLayoutEffect(() => {\n    if (open) {\n      activeElementRef.current = window.document.activeElement as HTMLElement;\n    } else {\n      const restoreToElement = activeElementRef.current;\n      requestAnimationFrame(() => {\n        restoreFocus && restoreToElement?.focus();\n      });\n    }\n  }, [open, restoreFocus]);\n\n  if (!canOpen) {\n    return null;\n  }\n\n  anchorElementRef.current = anchorElement;\n\n  let content = (\n    <ScrollAwayListener onScrollAway={close} isException={isScrollAwayException}>\n      <div\n        ref={popoverRef}\n        className={clsx(styles.popover, 'tcn-popper')}\n        style={{\n          top: `${position.top}px`,\n          left: `${position.left}px`,\n        }}\n      >\n        {children}\n      </div>\n    </ScrollAwayListener>\n  );\n\n  if (enableClickAway) {\n    content = (\n      <ClickAwayListener\n        onClickAway={close}\n        refs={[anchorElementRef, ...finalClickAwayRefs]}\n        isException={isClickAwayException}\n      >\n        {content}\n      </ClickAwayListener>\n    );\n  }\n\n  return (\n    <Portal>\n      {veil && (\n        <div\n          ref={veilRef}\n          onClick={e => veilRef.current === e.target && onVeilClick && onVeilClick(e)}\n          className={styles['popover-veil']}\n        >\n          {content}\n        </div>\n      )}\n      {!veil && content}\n    </Portal>\n  );\n}\n"],"names":["Popper","anchorElement","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","restoreFocus","veil","onVeilClick","clickAwayRefs","open","onClose","children","disableClickAway","isClickAwayException","isScrollAwayException","anchorElementRef","useRef","position","setPosition","useState","activeElementRef","popoverRef","canOpen","finalClickAwayRefs","enableClickAway","veilRef","close","updatePosition","anchorRect","popoverRect","viewportWidth","viewportHeight","isRtl","top","left","adjustedHorizontalOrigin","useLayoutEffect","restoreToElement","content","jsx","ScrollAwayListener","clsx","styles","ClickAwayListener","Portal"],"mappings":"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"}

package/dist/overlay/popper/preview_popper.js

@@ -1,4 +1,4 @@
-import { jsx as e, Fragment as d } from "react/jsx-runtime";
+import { jsx as o, Fragment as d } from "react/jsx-runtime";
 import { forwardRef as u, useRef as R } from "react";
 import { BasePopper as a } from "./base/base_popper.js";
 import "../../utils/click_away_listener.js";
@@ -9,10 +9,13 @@ import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "clsx";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { ElementTethered as v } from "../tethered/element_tethered.js";
 import { usePreviewElement as E } from "./hooks/use_hover_trigger.js";
 import { PopperDismissal as g } from "./base/dismissal_decorator.js";
-const _ = u(function({
+const y = u(function({
   anchorElement: r,
   restoreFocus: p,
   children: i,
@@ -21,8 +24,8 @@ const _ = u(function({
   dismissals: s = [g.MOUSE_LEAVE],
   ...f
 }, n) {
-  const o = R(null), c = w(n, o), { isOpen: l, close: P } = E(r);
-  return /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(
+  const e = R(null), c = w(n, e), { isOpen: l, close: P } = E(r);
+  return /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(
     a,
     {
       restoreFocus: p,
@@ -30,8 +33,8 @@ const _ = u(function({
       onDismissal: P,
       isException: t,
       dismissals: s,
-      acceptedRefs: [o, r, ...m],
-      children: /* @__PURE__ */ e(
+      acceptedRefs: [e, r, ...m],
+      children: /* @__PURE__ */ o(
         v,
         {
           ref: c,
@@ -44,6 +47,6 @@ const _ = u(function({
   ) });
 });
 export {
-  _ as PreviewPopper
+  y as PreviewPopper
 };
 //# sourceMappingURL=preview_popper.js.map

package/dist/overlay/popper/preview_popper.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview_popper.js","sources":["../../../src/overlay/popper/preview_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { useForkRef } from '../../utils/index.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { usePreviewElement } from './hooks/use_hover_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n  ElementTetheredProps;\n\nexport const PreviewPopper = forwardRef<\n  HTMLElement,\n  PropsWithChildren<PreviewPopperProps>\n>(function PreviewPopper(\n  {\n    anchorElement,\n    restoreFocus,\n    children,\n    acceptedRefs = [],\n    isException,\n    dismissals = [PopperDismissal.MOUSE_LEAVE],\n    ...elementTetheredProps\n  },\n  ref\n) {\n  const popperRef = useRef<HTMLElement>(null);\n  const merged = useForkRef(ref, popperRef);\n\n  const { isOpen, close } = usePreviewElement(anchorElement);\n\n  return (\n    <>\n      <BasePopper\n        restoreFocus={restoreFocus}\n        open={isOpen}\n        onDismissal={close}\n        isException={isException}\n        dismissals={dismissals}\n        acceptedRefs={[popperRef, anchorElement, ...acceptedRefs]}\n      >\n        <ElementTethered\n          ref={merged}\n          anchorElement={anchorElement}\n          {...elementTetheredProps}\n        >\n          {children}\n        </ElementTethered>\n      </BasePopper>\n    </>\n  );\n});\n"],"names":["PreviewPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","elementTetheredProps","ref","popperRef","useRef","merged","useForkRef","isOpen","close","usePreviewElement","jsx","Fragment","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;;;;AAaO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,WAAW;AAAA,EACzC,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GACpCC,IAASC,EAAWJ,GAAKC,CAAS,GAElC,EAAE,QAAAI,GAAQ,OAAAC,MAAUC,EAAkBf,CAAa;AAEzD,SACE,gBAAAgB,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAMY;AAAA,MACN,aAAaC;AAAA,MACb,aAAAV;AAAA,MACA,YAAAC;AAAA,MACA,cAAc,CAACI,GAAWT,GAAe,GAAGG,CAAY;AAAA,MAExD,UAAA,gBAAAa;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKR;AAAA,UACL,eAAAX;AAAA,UACC,GAAGO;AAAA,UAEH,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"preview_popper.js","sources":["../../../src/overlay/popper/preview_popper.tsx"],"sourcesContent":["import { forwardRef, useRef, type PropsWithChildren } from 'react';\nimport { BasePopper, type BasePopperProps } from './base/base_popper.js';\nimport { useForkRef } from '../../utils/index.js';\nimport {\n  ElementTethered,\n  type ElementTetheredProps,\n} from '../tethered/element_tethered.js';\nimport { usePreviewElement } from './hooks/use_hover_trigger.js';\nimport { PopperDismissal } from './base/dismissal_decorator.js';\n\nexport type PreviewPopperProps = Omit<BasePopperProps, 'open' | 'onDismissal'> &\n  ElementTetheredProps;\n\nexport const PreviewPopper = forwardRef<\n  HTMLElement,\n  PropsWithChildren<PreviewPopperProps>\n>(function PreviewPopper(\n  {\n    anchorElement,\n    restoreFocus,\n    children,\n    acceptedRefs = [],\n    isException,\n    dismissals = [PopperDismissal.MOUSE_LEAVE],\n    ...elementTetheredProps\n  },\n  ref\n) {\n  const popperRef = useRef<HTMLElement>(null);\n  const merged = useForkRef(ref, popperRef);\n\n  const { isOpen, close } = usePreviewElement(anchorElement);\n\n  return (\n    <>\n      <BasePopper\n        restoreFocus={restoreFocus}\n        open={isOpen}\n        onDismissal={close}\n        isException={isException}\n        dismissals={dismissals}\n        acceptedRefs={[popperRef, anchorElement, ...acceptedRefs]}\n      >\n        <ElementTethered\n          ref={merged}\n          anchorElement={anchorElement}\n          {...elementTetheredProps}\n        >\n          {children}\n        </ElementTethered>\n      </BasePopper>\n    </>\n  );\n});\n"],"names":["PreviewPopper","forwardRef","anchorElement","restoreFocus","children","acceptedRefs","isException","dismissals","PopperDismissal","elementTetheredProps","ref","popperRef","useRef","merged","useForkRef","isOpen","close","usePreviewElement","jsx","Fragment","BasePopper","ElementTethered"],"mappings":";;;;;;;;;;;;;;;;;AAaO,MAAMA,IAAgBC,EAG3B,SACA;AAAA,EACE,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe,CAAA;AAAA,EACf,aAAAC;AAAA,EACA,YAAAC,IAAa,CAACC,EAAgB,WAAW;AAAA,EACzC,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYC,EAAoB,IAAI,GACpCC,IAASC,EAAWJ,GAAKC,CAAS,GAElC,EAAE,QAAAI,GAAQ,OAAAC,MAAUC,EAAkBf,CAAa;AAEzD,SACE,gBAAAgB,EAAAC,GAAA,EACE,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAAjB;AAAA,MACA,MAAMY;AAAA,MACN,aAAaC;AAAA,MACb,aAAAV;AAAA,MACA,YAAAC;AAAA,MACA,cAAc,CAACI,GAAWT,GAAe,GAAGG,CAAY;AAAA,MAExD,UAAA,gBAAAa;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,KAAKR;AAAA,UACL,eAAAX;AAAA,UACC,GAAGO;AAAA,UAEH,UAAAL;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}

package/dist/overlay/tethered/tethered.js

@@ -1,5 +1,5 @@
-import { jsx as s, jsxs as T } from "react/jsx-runtime";
-import { clsx as m } from "clsx";
+import { jsx as m, jsxs as T } from "react/jsx-runtime";
+import { clsx as s } from "clsx";
 import { forwardRef as _ } from "react";
 import "../../stacks/box/box.js";
 import "../../stacks/h_collapsible_box.js";
@@ -15,11 +15,14 @@ import { useForkRef as k } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { Caret as j } from "../caret/caret.js";
 import { Portal as N } from "../portal/portal.js";
 import { useTether as C } from "./hooks/use_tether.js";
 import { useTetherOrigin as F } from "./hooks/use_tether_origin.js";
-import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethered_44058d8", p = { "origin-indicator": I, tethered: P }, tt = _(
+import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethered_44058d8", p = { "origin-indicator": I, tethered: P }, ot = _(
   function({
     anchor: a,
     verticalAnchor: r = "bottom",
@@ -57,11 +60,11 @@ import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethere
       "--origin-indicator-dimensions-width": `${t.rectangle.dimensions.width}px`,
       "--origin-indicator-dimensions-height": `${t.rectangle.dimensions.height}px`
     };
-    return /* @__PURE__ */ s(N, { children: /* @__PURE__ */ T(
+    return /* @__PURE__ */ m(N, { children: /* @__PURE__ */ T(
       b,
       {
         ref: R,
-        className: m(p.tethered, "tcn-tethered", x),
+        className: s(p.tethered, "tcn-tethered", x),
         style: { ...w, ...g },
         "data-v-anchor": r,
         "data-h-anchor": n,
@@ -71,12 +74,12 @@ import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethere
         ...l,
         children: [
           f,
-          d === "high" && t.direction !== "none" && /* @__PURE__ */ s(
+          d === "high" && t.direction !== "none" && /* @__PURE__ */ m(
             j,
             {
               ref: u,
               direction: t.direction,
-              className: m(
+              className: s(
                 p["origin-indicator"],
                 "tcn-tethered-origin-indicator"
               )
@@ -88,6 +91,6 @@ import '../../tethered.css';const I = "_origin-indicator_cbc16ea", P = "_tethere
   }
 );
 export {
-  tt as Tethered
+  ot 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 { 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 { useTether } from './hooks/use_tether.js';\nimport { useTetherOrigin } from './hooks/use_tether_origin.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}\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 { rectangle, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n\n    const [origin, originRef] = useTetherOrigin(\n      rectangle,\n      horizontalOrigin,\n      verticalOrigin,\n      precision\n    );\n\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${rectangle.position.y}px`,\n      '--tethered-left': `${rectangle.position.x}px`,\n      '--tethered-origin-y': `${origin.rectangle.position.y}px`,\n      '--tethered-origin-x': `${origin.rectangle.position.x}px`,\n      '--tethered-origin-delta-y': `${origin.offset.y}px`,\n      '--tethered-origin-delta-x': `${origin.offset.x}px`,\n      '--origin-indicator-dimensions-width': `${origin.rectangle.dimensions.width}px`,\n      '--origin-indicator-dimensions-height': `${origin.rectangle.dimensions.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={origin.direction}\n          {...rest}\n        >\n          {children}\n          {precision === 'high' && origin.direction !== 'none' && (\n            <Caret\n              ref={originRef}\n              direction={origin.direction}\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","rectangle","tetherRef","useTether","origin","originRef","useTetherOrigin","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,WAAAC,GAAW,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACzC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAEK,CAACU,GAAQC,CAAS,IAAIC;AAAA,MAC1BL;AAAA,MACAT;AAAA,MACAF;AAAA,MACAK;AAAA,IAAA,GAGIY,IAAYC,EAAWR,GAAKE,CAAS,GAErCO,IAAe;AAAA,MACnB,kBAAkB,GAAGR,EAAU,SAAS,CAAC;AAAA,MACzC,mBAAmB,GAAGA,EAAU,SAAS,CAAC;AAAA,MAC1C,uBAAuB,GAAGG,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,uBAAuB,GAAGA,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,uCAAuC,GAAGA,EAAO,UAAU,WAAW,KAAK;AAAA,MAC3E,wCAAwC,GAAGA,EAAO,UAAU,WAAW,MAAM;AAAA,IAAA;AAG/E,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBhB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGW,GAAc,GAAGZ,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBY,EAAO;AAAA,QAC7B,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUS,EAAO,cAAc,UAC5C,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,WAAWD,EAAO;AAAA,cAClB,WAAWS;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;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 { useTether } from './hooks/use_tether.js';\nimport { useTetherOrigin } from './hooks/use_tether_origin.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}\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 { rectangle, tetherRef } = useTether({\n      anchor,\n      verticalAnchor,\n      verticalOrigin,\n      horizontalAnchor,\n      horizontalOrigin,\n      verticalOffset,\n      horizontalOffset,\n    });\n\n    const [origin, originRef] = useTetherOrigin(\n      rectangle,\n      horizontalOrigin,\n      verticalOrigin,\n      precision\n    );\n\n    const forkedRef = useForkRef(ref, tetherRef);\n\n    const cssVariables = {\n      '--tethered-top': `${rectangle.position.y}px`,\n      '--tethered-left': `${rectangle.position.x}px`,\n      '--tethered-origin-y': `${origin.rectangle.position.y}px`,\n      '--tethered-origin-x': `${origin.rectangle.position.x}px`,\n      '--tethered-origin-delta-y': `${origin.offset.y}px`,\n      '--tethered-origin-delta-x': `${origin.offset.x}px`,\n      '--origin-indicator-dimensions-width': `${origin.rectangle.dimensions.width}px`,\n      '--origin-indicator-dimensions-height': `${origin.rectangle.dimensions.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={origin.direction}\n          {...rest}\n        >\n          {children}\n          {precision === 'high' && origin.direction !== 'none' && (\n            <Caret\n              ref={originRef}\n              direction={origin.direction}\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","rectangle","tetherRef","useTether","origin","originRef","useTetherOrigin","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,WAAAC,GAAW,WAAAC,EAAA,IAAcC,EAAU;AAAA,MACzC,QAAAf;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,kBAAAC;AAAA,IAAA,CACD,GAEK,CAACU,GAAQC,CAAS,IAAIC;AAAA,MAC1BL;AAAA,MACAT;AAAA,MACAF;AAAA,MACAK;AAAA,IAAA,GAGIY,IAAYC,EAAWR,GAAKE,CAAS,GAErCO,IAAe;AAAA,MACnB,kBAAkB,GAAGR,EAAU,SAAS,CAAC;AAAA,MACzC,mBAAmB,GAAGA,EAAU,SAAS,CAAC;AAAA,MAC1C,uBAAuB,GAAGG,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,uBAAuB,GAAGA,EAAO,UAAU,SAAS,CAAC;AAAA,MACrD,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,6BAA6B,GAAGA,EAAO,OAAO,CAAC;AAAA,MAC/C,uCAAuC,GAAGA,EAAO,UAAU,WAAW,KAAK;AAAA,MAC3E,wCAAwC,GAAGA,EAAO,UAAU,WAAW,MAAM;AAAA,IAAA;AAG/E,6BACGM,GAAA,EACC,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKL;AAAA,QACL,WAAWM,EAAKC,EAAO,UAAU,gBAAgBhB,CAAS;AAAA,QAC1D,OAAO,EAAE,GAAGW,GAAc,GAAGZ,EAAA;AAAA,QAC7B,iBAAeR;AAAA,QACf,iBAAeE;AAAA,QACf,iBAAeD;AAAA,QACf,iBAAeE;AAAA,QACf,yBAAuBY,EAAO;AAAA,QAC7B,GAAGL;AAAA,QAEH,UAAA;AAAA,UAAAH;AAAA,UACAD,MAAc,UAAUS,EAAO,cAAc,UAC5C,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,KAAKX;AAAA,cACL,WAAWD,EAAO;AAAA,cAClB,WAAWS;AAAA,gBACTC,EAAO,kBAAkB;AAAA,gBACzB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ;AACF;"}

package/dist/resizable.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._resizable-target_a6e624b){position:relative}}

package/dist/resizable.module-I6iyBAvM.js

@@ -0,0 +1,5 @@
+import './resizable.css';const e = "_resizable-target_a6e624b", s = { "resizable-target": e };
+export {
+  s
+};
+//# sourceMappingURL=resizable.module-I6iyBAvM.js.map

package/dist/resizable.module-I6iyBAvM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.module-I6iyBAvM.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/resize_handle.css

@@ -0,0 +1 @@
+@layer tcn-system{._resize-handle_287f4e0{position:absolute;z-index:1;pointer-events:auto}:where(._resize-handle_287f4e0[data-position=left]),:where(._resize-handle_287f4e0[data-position=right]),:where(._resize-handle_287f4e0[data-position=start]),:where(._resize-handle_287f4e0[data-position=end]){top:0;height:100%;width:16px;cursor:ew-resize}:where(._resize-handle_287f4e0[data-position=left]){left:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=right]){right:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=start]:dir(ltr)){left:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=start]:dir(rtl)){right:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=end]:dir(ltr)){right:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=end]:dir(rtl)){left:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=top]),:where(._resize-handle_287f4e0[data-position=bottom]){left:0;width:100%;height:16px;cursor:ns-resize}:where(._resize-handle_287f4e0[data-position=top]){top:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=bottom]){bottom:var(--resize-offset, 0px)}:where(._resize-handle_287f4e0[data-position=top-left]),:where(._resize-handle_287f4e0[data-position=top-right]),:where(._resize-handle_287f4e0[data-position=bottom-left]),:where(._resize-handle_287f4e0[data-position=bottom-right]),:where(._resize-handle_287f4e0[data-position=top-start]),:where(._resize-handle_287f4e0[data-position=top-end]),:where(._resize-handle_287f4e0[data-position=bottom-start]),:where(._resize-handle_287f4e0[data-position=bottom-end]){width:16px;height:16px}:where(._resize-handle_287f4e0[data-position=top-left]){top:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=top-right]){top:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nesw-resize}:where(._resize-handle_287f4e0[data-position=bottom-left]){bottom:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nesw-resize}:where(._resize-handle_287f4e0[data-position=bottom-right]){bottom:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=top-start]:dir(ltr)){top:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=top-start]:dir(rtl)){top:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nesw-resize}:where(._resize-handle_287f4e0[data-position=top-end]:dir(ltr)){top:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nesw-resize}:where(._resize-handle_287f4e0[data-position=top-end]:dir(rtl)){top:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=bottom-start]:dir(ltr)){bottom:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nesw-resize}:where(._resize-handle_287f4e0[data-position=bottom-start]:dir(rtl)){bottom:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=bottom-end]:dir(ltr)){bottom:var(--resize-offset, 0px);right:var(--resize-offset, 0px);cursor:nwse-resize}:where(._resize-handle_287f4e0[data-position=bottom-end]:dir(rtl)){bottom:var(--resize-offset, 0px);left:var(--resize-offset, 0px);cursor:nesw-resize}}

package/dist/row.css

@@ -0,0 +1 @@
+@layer tcn-system{:where(._row_121bbbf){width:100%;min-width:0;height:var(--rows-height, auto);min-height:var(--rows-min-height, 0);max-height:var(--rows-max-height, none);flex-grow:0}:where(._row_121bbbf[data-height=fill]){flex-grow:1;height:0}}

package/dist/stacks/box/box.js

@@ -8,6 +8,9 @@ import { useForkRef as to } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
 import "../../utils/dnd/context.js";
 import "../../draggable.module-BgelQsuJ.js";
+import "../../utils/resize/context.js";
+import "../../resizable.module-I6iyBAvM.js";
+import "../../utils/resize/resize_handle.js";
 import { s as y } from "../../stack.module-CBV1f12Z.js";
 import { isCustomSizeProp as k } from "../utils/isCustomSizeProp.js";
 import { removeUndefinedProperties as ao } from "../utils/remove_undefined_properties.js";
@@ -17,7 +20,7 @@ import { LeftResizeHandle as so } from "./left_resize_handle.js";
 import { RightResizeHandle as lo } from "./right_resize_handle.js";
 import { StartResizeHandle as mo } from "./start_resize_handle.js";
 import { TopResizeHandle as no } from "./top_resize_handle.js";
-const Bo = oo.forwardRef(function({
+const Uo = oo.forwardRef(function({
   style: v,
   className: P,
   as: _ = "div",
@@ -46,8 +49,8 @@ const Bo = oo.forwardRef(function({
   enableResizeOnEnd: l = !1,
   enableResizeOnBottom: m = !1,
   enableResizeOnStart: n = !1,
-  enableResizeOnLeft: c = !1,
-  enableResizeOnRight: p = !1,
+  enableResizeOnLeft: p = !1,
+  enableResizeOnRight: c = !1,
   onWidthResize: e,
   onHeightResize: d,
   onWidthResizeEnd: f,
@@ -56,7 +59,7 @@ const Bo = oo.forwardRef(function({
   verticalHandleProps: x,
   ...X
 }, Z) {
-  const $ = _, o = ro(null), L = to(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");
+  const $ = _, o = ro(null), L = to(Z, o), R = l || n || p || c, T = m || s, z = R, E = T, g = z && r === "flex", S = E && t === "flex", F = !g && !S && (r === "flex" || t === "flex");
   g && (r = "100%", console.warn("You cannot have a resizable box and flex simultaneously")), S && (t = "auto", console.warn("You cannot have a resizable box and flex simultaneously"));
   const W = {
     width: k(r) ? void 0 : r,
@@ -87,8 +90,8 @@ const Bo = oo.forwardRef(function({
       "data-enabled-resize-on-end": String(l),
       "data-enabled-resize-on-top": String(s),
       "data-enabled-resize-on-bottom": String(m),
-      "data_enabled-resize-on-left": String(c),
-      "data_enabled-resize-on-right": String(p),
+      "data_enabled-resize-on-left": String(p),
+      "data_enabled-resize-on-right": String(c),
       "data-height": t,
       "data-width": r,
       ref: L,
@@ -142,7 +145,7 @@ const Bo = oo.forwardRef(function({
             handleProps: i
           }
         ),
-        c && /* @__PURE__ */ a(
+        p && /* @__PURE__ */ a(
           so,
           {
             onWidthResize: e,
@@ -151,7 +154,7 @@ const Bo = oo.forwardRef(function({
             handleProps: x
           }
         ),
-        p && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           lo,
           {
             onWidthResize: e,
@@ -165,6 +168,6 @@ const Bo = oo.forwardRef(function({
   );
 });
 export {
-  Bo as Box
+  Uo as Box
 };
 //# sourceMappingURL=box.js.map