@tcn/ui 0.0.3 → 0.1.1

package/dist/overlay/menu/menu.js

@@ -9,8 +9,8 @@ import "../../utils/hooks/use_resize_observer.js";
 import { HStack as G } from "../../stacks/h_stack.js";
 import { VStack as J } from "../../stacks/v_stack.js";
 import { Popper as K } from "../popper/popper.js";
-import L from "classnames";
-import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", N = { menu: Q, "menu-item": U }, Z = f.forwardRef(function({
+import { clsx as L } from "clsx";
+import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", j = { menu: Q, "menu-item": U }, Z = f.forwardRef(function({
   anchorElement: R,
   verticalAnchor: y,
   verticalOrigin: S,
@@ -73,7 +73,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", N =
       onClose: x,
       restoreFocus: Y,
       veil: s,
-      children: /* @__PURE__ */ g(J, { ref: z, className: L(N.menu, E, "menu"), ...I, children: l })
+      children: /* @__PURE__ */ g(J, { ref: z, className: L(j.menu, E, "menu"), ...I, children: l })
     }
   );
 }), D = f.forwardRef(function({
@@ -105,14 +105,14 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", N =
           o.x = n.clientX, o.y = n.clientY, r(!1);
           return;
         }
-        const A = Math.sqrt(p.x ** 2 + p.y ** 2);
+        const H = Math.sqrt(p.x ** 2 + p.y ** 2);
         if (E.current) {
           o.x = n.clientX, o.y = n.clientY, r(!1);
           return;
         }
-        if (A > 5) {
-          const H = p.x / p.y > 0.2;
-          r(!!H), o.x = n.clientX, o.y = n.clientY;
+        if (H > 5) {
+          const N = p.x / p.y > 0.2;
+          r(!!N), o.x = n.clientX, o.y = n.clientY;
         }
       };
       return window.addEventListener("mousemove", B), () => {
@@ -129,7 +129,7 @@ import '../../menu.css';const Q = "_menu_9ce21e3", U = "_menu-item_68b387f", N =
         ref: t,
         "data-is-selected": !!R,
         "data-has-children": !!a,
-        className: L(S, N["menu-item"], "menu-item"),
+        className: L(S, j["menu-item"], "menu-item"),
         "data-is-open": s,
         ...c,
         children: typeof y == "string" ? /* @__PURE__ */ g(O, { color: "inherit", children: y }) : y

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 '../../overlay/popper/popper.js';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport styles from './menu.module.css';\nimport classNames from 'classnames';\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={classNames(styles.menu, className, '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={classNames(className, styles['menu-item'], '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","useLayoutEffect","jsx","Popper","VStack","classNames","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 '../../overlay/popper/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, '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'], '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","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/popper.js

@@ -2,17 +2,17 @@ import { jsx as p, jsxs as G } from "react/jsx-runtime";
 import "../../utils/focus_redirect.js";
 import { ClickAwayListener as I } from "../../utils/click_away_listener.js";
 import { ScrollAwayListener as J } from "../../utils/scroll_away_listener.js";
-import { useRef as f, useState as K, useLayoutEffect as P } from "react";
+import { useRef as f, useState as K, useLayoutEffect as E } from "react";
 import "../../utils/hooks/use_resize_observer.js";
-import { P as M } from "../../portal-qqIp4SIl.js";
-import '../../popper.css';const Q = "_popover_069b323", U = "_popover-veil_2f5f985", E = { popover: Q, "popover-veil": U };
+import { Portal as M } from "../portal/portal.js";
+import '../../popper.css';const Q = "_popover_069b323", U = "_popover-veil_2f5f985", P = { popover: Q, "popover-veil": U };
 function ie({
   anchorElement: n,
   verticalAnchor: _ = "bottom",
   verticalOrigin: j = "top",
   verticalOffset: h = 0,
-  horizontalAnchor: a = "start",
-  horizontalOrigin: d = "start",
+  horizontalAnchor: d = "start",
+  horizontalOrigin: a = "start",
   horizontalOffset: s = 0,
   restoreFocus: g = !1,
   veil: y = !1,
@@ -54,13 +54,13 @@ function ie({
         t -= o.height;
         break;
     }
-    a === "start" ? i += v ? e.width + s : s : a === "center" ? i += e.width / 2 : a === "end" && (i += v ? -s : e.width + s);
-    let r = d;
-    v && (d === "start" ? r = "end" : d === "end" && (r = "start")), r === "start" || (r === "center" ? i -= o.width / 2 : r === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
+    d === "start" ? i += v ? e.width + s : s : d === "center" ? i += e.width / 2 : d === "end" && (i += v ? -s : e.width + s);
+    let r = a;
+    v && (a === "start" ? r = "end" : a === "end" && (r = "start")), r === "start" || (r === "center" ? i -= o.width / 2 : r === "end" && (i -= o.width)), i + o.width > A && (i = A - o.width), i < 0 && (i = 0), t + o.height > L && (t = L - o.height), t < 0 && (t = 0), (t !== c.top || i !== c.left) && q({ top: t, left: i });
   };
-  if (P(() => (m(), window.addEventListener("resize", m), () => {
+  if (E(() => (m(), window.addEventListener("resize", m), () => {
     window.removeEventListener("resize", m);
-  })), P(() => {
+  })), E(() => {
     if (u)
       x.current = window.document.activeElement;
     else {
@@ -76,7 +76,7 @@ function ie({
     "div",
     {
       ref: w,
-      className: E.popover,
+      className: P.popover,
       style: {
         top: `${c.top}px`,
         left: `${c.left}px`
@@ -98,7 +98,7 @@ function ie({
       {
         ref: C,
         onClick: (e) => C.current === e.target && b && b(e),
-        className: E["popover-veil"],
+        className: P["popover-veil"],
         children: l
       }
     ),

package/dist/{portal-qqIp4SIl.js → overlay/portal/portal.js}

@@ -1,5 +1,5 @@
 import { useState as n, useLayoutEffect as e } from "react";
-import { usePortalPlatform as u } from "./overlay/portal/portal_platform_context.js";
+import { usePortalPlatform as u } from "./portal_platform_context.js";
 const s = ({ children: a, zIndex: o }) => {
   const r = u(), [t] = n(() => r.createPortal());
   return e(() => {
@@ -7,6 +7,6 @@ const s = ({ children: a, zIndex: o }) => {
   }, [t, o]), e(() => (r.mountPortal(t), () => r.unmountPortal(t)), [t, r]), t.render(a);
 };
 export {
-  s as P
+  s as Portal
 };
-//# sourceMappingURL=portal-qqIp4SIl.js.map
+//# sourceMappingURL=portal.js.map

package/dist/overlay/portal/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sources":["../../../src/overlay/portal/portal.tsx"],"sourcesContent":["import React, { useState, useLayoutEffect } from 'react';\nimport { usePortalPlatform } from './portal_platform_context.js';\n\nexport interface PortalProps {\n  children: React.ReactNode | React.ReactNode[];\n  zIndex?: number;\n}\n\nexport const Portal = ({ children, zIndex }: PortalProps) => {\n  const portalPlatform = usePortalPlatform();\n\n  const [portal] = useState(() => {\n    return portalPlatform.createPortal();\n  });\n\n  useLayoutEffect(() => {\n    portal.setZIndex(zIndex);\n  }, [portal, zIndex]);\n\n  useLayoutEffect(() => {\n    portalPlatform.mountPortal(portal);\n    return () => portalPlatform.unmountPortal(portal);\n  }, [portal, portalPlatform]);\n\n  return portal.render(children);\n};\n"],"names":["Portal","children","zIndex","portalPlatform","usePortalPlatform","portal","useState","useLayoutEffect"],"mappings":";;AAQO,MAAMA,IAAS,CAAC,EAAE,UAAAC,GAAU,QAAAC,QAA0B;AAC3D,QAAMC,IAAiBC,EAAA,GAEjB,CAACC,CAAM,IAAIC,EAAS,MACjBH,EAAe,aAAA,CACvB;AAED,SAAAI,EAAgB,MAAM;AACpB,IAAAF,EAAO,UAAUH,CAAM;AAAA,EACzB,GAAG,CAACG,GAAQH,CAAM,CAAC,GAEnBK,EAAgB,OACdJ,EAAe,YAAYE,CAAM,GAC1B,MAAMF,EAAe,cAAcE,CAAM,IAC/C,CAACA,GAAQF,CAAc,CAAC,GAEpBE,EAAO,OAAOJ,CAAQ;AAC/B;"}

package/dist/overlay/portal/portal_platform.js

@@ -1,6 +1,5 @@
 import { createPortal as e } from "react-dom";
-import './portal.css';/* empty css       */
-class s {
+import '../../portal_platform.css';class s {
   _window;
   div;
   hasMounted = !1;
@@ -14,7 +13,7 @@ class s {
     return this.div == null ? null : e(t, this.div);
   }
 }
-class n {
+class a {
   _window;
   _root;
   _portals = [];
@@ -64,7 +63,7 @@ class n {
   }
 }
 export {
-  n as PortalPlatform,
+  a as PortalPlatform,
   s as PortalPresenter
 };
 //# sourceMappingURL=portal_platform.js.map

package/dist/overlay/portal/portal_platform.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal_platform.js","sources":["../../../src/overlay/portal/portal_platform.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport './portal.css';\n\nexport class PortalPresenter {\n  private _window: Window & typeof globalThis;\n  div: HTMLDivElement;\n  hasMounted = false;\n\n  constructor(win = window, zIndex: number | string = '0') {\n    this._window = win;\n    this.div = this._window.document.createElement('div');\n    this.div.className = 'portal';\n    this.setZIndex(zIndex);\n  }\n\n  setZIndex(zIndex: number | string = '0') {\n    if (this.div != null) {\n      this.div.style.zIndex = zIndex.toString();\n    }\n  }\n\n  render(children: React.ReactNode) {\n    if (this.div == null) {\n      return null;\n    }\n\n    return createPortal(children, this.div);\n  }\n}\n\nexport class PortalPlatform {\n  private _window: Window & typeof globalThis;\n  private _root: HTMLElement;\n  private _portals: PortalPresenter[] = [];\n\n  readonly platform: HTMLDivElement;\n\n  constructor(win = window, root: HTMLElement = win.document.body) {\n    this._window = win;\n    this._root = root;\n    this.platform = this._getPlatformRoot();\n    this.platform.classList.add('platform-root');\n  }\n\n  private _getPlatformRoot() {\n    const existingPlatformRoot = this._window.document.body.querySelector(\n      '.platform-root'\n    ) as HTMLDivElement | null;\n    if (!existingPlatformRoot) {\n      const root = this._window.document.createElement('div');\n      const portalPlatform = this._window.document.createElement('div');\n      portalPlatform.id = 'portal-platform';\n      portalPlatform.classList.add('portal-platform');\n      root.appendChild(portalPlatform);\n\n      return root;\n    } else {\n      return existingPlatformRoot;\n    }\n  }\n\n  setZIndex(zIndex: number | string = 'auto') {\n    if (this.platform != null) {\n      this.platform.style.zIndex = zIndex.toString();\n    }\n  }\n\n  setRoot(root: HTMLElement | null) {\n    if (root !== this._root) {\n      this.platform?.parentNode?.removeChild(this.platform);\n      this._root = root == null ? document.body : root;\n      this.showPlatform();\n    }\n  }\n\n  createPortal() {\n    const portal = new PortalPresenter(this._window);\n    this._portals.push(portal);\n    return portal;\n  }\n\n  mountPortal(portal: PortalPresenter) {\n    portal.hasMounted = true;\n    this.platform.firstElementChild?.appendChild(portal.div);\n    this.showPlatform();\n  }\n\n  unmountPortal(portal: PortalPresenter) {\n    this.removePortal(portal);\n  }\n\n  removePortal(portal: PortalPresenter) {\n    const index = this._portals.indexOf(portal);\n    if (index > -1) {\n      portal.hasMounted = false;\n      this._portals.splice(index, 1);\n      this.platform.firstElementChild?.removeChild(portal.div);\n      this.hidePlatformIfNecessary();\n    }\n  }\n\n  showPlatform() {\n    if (this.platform != null && this.platform.parentElement == null) {\n      this._root.appendChild(this.platform);\n    }\n  }\n\n  hidePlatformIfNecessary() {\n    if (this._portals.length === 0 && this.platform.parentElement != null) {\n      this._root.removeChild(this.platform);\n    }\n  }\n\n  dispose() {\n    if (this.platform != null && this._root.contains(this.platform)) {\n      this._root.removeChild(this.platform);\n    }\n  }\n}\n"],"names":["PortalPresenter","win","zIndex","children","createPortal","PortalPlatform","root","existingPlatformRoot","portalPlatform","portal","index"],"mappings":";;AAIO,MAAMA,EAAgB;AAAA,EACnB;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EAEb,YAAYC,IAAM,QAAQC,IAA0B,KAAK;AACvD,SAAK,UAAUD,GACf,KAAK,MAAM,KAAK,QAAQ,SAAS,cAAc,KAAK,GACpD,KAAK,IAAI,YAAY,UACrB,KAAK,UAAUC,CAAM;AAAA,EACvB;AAAA,EAEA,UAAUA,IAA0B,KAAK;AACvC,IAAI,KAAK,OAAO,SACd,KAAK,IAAI,MAAM,SAASA,EAAO,SAAA;AAAA,EAEnC;AAAA,EAEA,OAAOC,GAA2B;AAChC,WAAI,KAAK,OAAO,OACP,OAGFC,EAAaD,GAAU,KAAK,GAAG;AAAA,EACxC;AACF;AAEO,MAAME,EAAe;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAA8B,CAAA;AAAA,EAE7B;AAAA,EAET,YAAYJ,IAAM,QAAQK,IAAoBL,EAAI,SAAS,MAAM;AAC/D,SAAK,UAAUA,GACf,KAAK,QAAQK,GACb,KAAK,WAAW,KAAK,iBAAA,GACrB,KAAK,SAAS,UAAU,IAAI,eAAe;AAAA,EAC7C;AAAA,EAEQ,mBAAmB;AACzB,UAAMC,IAAuB,KAAK,QAAQ,SAAS,KAAK;AAAA,MACtD;AAAA,IAAA;AAEF,QAAKA;AASH,aAAOA;AATkB;AACzB,YAAMD,IAAO,KAAK,QAAQ,SAAS,cAAc,KAAK,GAChDE,IAAiB,KAAK,QAAQ,SAAS,cAAc,KAAK;AAChE,aAAAA,EAAe,KAAK,mBACpBA,EAAe,UAAU,IAAI,iBAAiB,GAC9CF,EAAK,YAAYE,CAAc,GAExBF;AAAA,IACT;AAAA,EAGF;AAAA,EAEA,UAAUJ,IAA0B,QAAQ;AAC1C,IAAI,KAAK,YAAY,SACnB,KAAK,SAAS,MAAM,SAASA,EAAO,SAAA;AAAA,EAExC;AAAA,EAEA,QAAQI,GAA0B;AAChC,IAAIA,MAAS,KAAK,UAChB,KAAK,UAAU,YAAY,YAAY,KAAK,QAAQ,GACpD,KAAK,QAAQA,KAAe,SAAS,MACrC,KAAK,aAAA;AAAA,EAET;AAAA,EAEA,eAAe;AACb,UAAMG,IAAS,IAAIT,EAAgB,KAAK,OAAO;AAC/C,gBAAK,SAAS,KAAKS,CAAM,GAClBA;AAAA,EACT;AAAA,EAEA,YAAYA,GAAyB;AACnC,IAAAA,EAAO,aAAa,IACpB,KAAK,SAAS,mBAAmB,YAAYA,EAAO,GAAG,GACvD,KAAK,aAAA;AAAA,EACP;AAAA,EAEA,cAAcA,GAAyB;AACrC,SAAK,aAAaA,CAAM;AAAA,EAC1B;AAAA,EAEA,aAAaA,GAAyB;AACpC,UAAMC,IAAQ,KAAK,SAAS,QAAQD,CAAM;AAC1C,IAAIC,IAAQ,OACVD,EAAO,aAAa,IACpB,KAAK,SAAS,OAAOC,GAAO,CAAC,GAC7B,KAAK,SAAS,mBAAmB,YAAYD,EAAO,GAAG,GACvD,KAAK,wBAAA;AAAA,EAET;AAAA,EAEA,eAAe;AACb,IAAI,KAAK,YAAY,QAAQ,KAAK,SAAS,iBAAiB,QAC1D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AAAA,EAEA,0BAA0B;AACxB,IAAI,KAAK,SAAS,WAAW,KAAK,KAAK,SAAS,iBAAiB,QAC/D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AAAA,EAEA,UAAU;AACR,IAAI,KAAK,YAAY,QAAQ,KAAK,MAAM,SAAS,KAAK,QAAQ,KAC5D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AACF;"}
+{"version":3,"file":"portal_platform.js","sources":["../../../src/overlay/portal/portal_platform.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport './portal.css';\n\nexport class PortalPresenter {\n  private _window: Window & typeof globalThis;\n  div: HTMLDivElement;\n  hasMounted = false;\n\n  constructor(win = window, zIndex: number | string = '0') {\n    this._window = win;\n    this.div = this._window.document.createElement('div');\n    this.div.className = 'portal';\n    this.setZIndex(zIndex);\n  }\n\n  setZIndex(zIndex: number | string = '0') {\n    if (this.div != null) {\n      this.div.style.zIndex = zIndex.toString();\n    }\n  }\n\n  render(children: React.ReactNode) {\n    if (this.div == null) {\n      return null;\n    }\n\n    return createPortal(children, this.div);\n  }\n}\n\nexport class PortalPlatform {\n  private _window: Window & typeof globalThis;\n  private _root: HTMLElement;\n  private _portals: PortalPresenter[] = [];\n\n  readonly platform: HTMLDivElement;\n\n  constructor(win = window, root: HTMLElement = win.document.body) {\n    this._window = win;\n    this._root = root;\n    this.platform = this._getPlatformRoot();\n    this.platform.classList.add('platform-root');\n  }\n\n  private _getPlatformRoot() {\n    const existingPlatformRoot = this._window.document.body.querySelector(\n      '.platform-root'\n    ) as HTMLDivElement | null;\n    if (!existingPlatformRoot) {\n      const root = this._window.document.createElement('div');\n      const portalPlatform = this._window.document.createElement('div');\n      portalPlatform.id = 'portal-platform';\n      portalPlatform.classList.add('portal-platform');\n      root.appendChild(portalPlatform);\n\n      return root;\n    } else {\n      return existingPlatformRoot;\n    }\n  }\n\n  setZIndex(zIndex: number | string = 'auto') {\n    if (this.platform != null) {\n      this.platform.style.zIndex = zIndex.toString();\n    }\n  }\n\n  setRoot(root: HTMLElement | null) {\n    if (root !== this._root) {\n      this.platform?.parentNode?.removeChild(this.platform);\n      this._root = root == null ? document.body : root;\n      this.showPlatform();\n    }\n  }\n\n  createPortal() {\n    const portal = new PortalPresenter(this._window);\n    this._portals.push(portal);\n    return portal;\n  }\n\n  mountPortal(portal: PortalPresenter) {\n    portal.hasMounted = true;\n    this.platform.firstElementChild?.appendChild(portal.div);\n    this.showPlatform();\n  }\n\n  unmountPortal(portal: PortalPresenter) {\n    this.removePortal(portal);\n  }\n\n  removePortal(portal: PortalPresenter) {\n    const index = this._portals.indexOf(portal);\n    if (index > -1) {\n      portal.hasMounted = false;\n      this._portals.splice(index, 1);\n      this.platform.firstElementChild?.removeChild(portal.div);\n      this.hidePlatformIfNecessary();\n    }\n  }\n\n  showPlatform() {\n    if (this.platform != null && this.platform.parentElement == null) {\n      this._root.appendChild(this.platform);\n    }\n  }\n\n  hidePlatformIfNecessary() {\n    if (this._portals.length === 0 && this.platform.parentElement != null) {\n      this._root.removeChild(this.platform);\n    }\n  }\n\n  dispose() {\n    if (this.platform != null && this._root.contains(this.platform)) {\n      this._root.removeChild(this.platform);\n    }\n  }\n}\n"],"names":["PortalPresenter","win","zIndex","children","createPortal","PortalPlatform","root","existingPlatformRoot","portalPlatform","portal","index"],"mappings":";AAIO,MAAMA,EAAgB;AAAA,EACnB;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EAEb,YAAYC,IAAM,QAAQC,IAA0B,KAAK;AACvD,SAAK,UAAUD,GACf,KAAK,MAAM,KAAK,QAAQ,SAAS,cAAc,KAAK,GACpD,KAAK,IAAI,YAAY,UACrB,KAAK,UAAUC,CAAM;AAAA,EACvB;AAAA,EAEA,UAAUA,IAA0B,KAAK;AACvC,IAAI,KAAK,OAAO,SACd,KAAK,IAAI,MAAM,SAASA,EAAO,SAAA;AAAA,EAEnC;AAAA,EAEA,OAAOC,GAA2B;AAChC,WAAI,KAAK,OAAO,OACP,OAGFC,EAAaD,GAAU,KAAK,GAAG;AAAA,EACxC;AACF;AAEO,MAAME,EAAe;AAAA,EAClB;AAAA,EACA;AAAA,EACA,WAA8B,CAAA;AAAA,EAE7B;AAAA,EAET,YAAYJ,IAAM,QAAQK,IAAoBL,EAAI,SAAS,MAAM;AAC/D,SAAK,UAAUA,GACf,KAAK,QAAQK,GACb,KAAK,WAAW,KAAK,iBAAA,GACrB,KAAK,SAAS,UAAU,IAAI,eAAe;AAAA,EAC7C;AAAA,EAEQ,mBAAmB;AACzB,UAAMC,IAAuB,KAAK,QAAQ,SAAS,KAAK;AAAA,MACtD;AAAA,IAAA;AAEF,QAAKA;AASH,aAAOA;AATkB;AACzB,YAAMD,IAAO,KAAK,QAAQ,SAAS,cAAc,KAAK,GAChDE,IAAiB,KAAK,QAAQ,SAAS,cAAc,KAAK;AAChE,aAAAA,EAAe,KAAK,mBACpBA,EAAe,UAAU,IAAI,iBAAiB,GAC9CF,EAAK,YAAYE,CAAc,GAExBF;AAAA,IACT;AAAA,EAGF;AAAA,EAEA,UAAUJ,IAA0B,QAAQ;AAC1C,IAAI,KAAK,YAAY,SACnB,KAAK,SAAS,MAAM,SAASA,EAAO,SAAA;AAAA,EAExC;AAAA,EAEA,QAAQI,GAA0B;AAChC,IAAIA,MAAS,KAAK,UAChB,KAAK,UAAU,YAAY,YAAY,KAAK,QAAQ,GACpD,KAAK,QAAQA,KAAe,SAAS,MACrC,KAAK,aAAA;AAAA,EAET;AAAA,EAEA,eAAe;AACb,UAAMG,IAAS,IAAIT,EAAgB,KAAK,OAAO;AAC/C,gBAAK,SAAS,KAAKS,CAAM,GAClBA;AAAA,EACT;AAAA,EAEA,YAAYA,GAAyB;AACnC,IAAAA,EAAO,aAAa,IACpB,KAAK,SAAS,mBAAmB,YAAYA,EAAO,GAAG,GACvD,KAAK,aAAA;AAAA,EACP;AAAA,EAEA,cAAcA,GAAyB;AACrC,SAAK,aAAaA,CAAM;AAAA,EAC1B;AAAA,EAEA,aAAaA,GAAyB;AACpC,UAAMC,IAAQ,KAAK,SAAS,QAAQD,CAAM;AAC1C,IAAIC,IAAQ,OACVD,EAAO,aAAa,IACpB,KAAK,SAAS,OAAOC,GAAO,CAAC,GAC7B,KAAK,SAAS,mBAAmB,YAAYD,EAAO,GAAG,GACvD,KAAK,wBAAA;AAAA,EAET;AAAA,EAEA,eAAe;AACb,IAAI,KAAK,YAAY,QAAQ,KAAK,SAAS,iBAAiB,QAC1D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AAAA,EAEA,0BAA0B;AACxB,IAAI,KAAK,SAAS,WAAW,KAAK,KAAK,SAAS,iBAAiB,QAC/D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AAAA,EAEA,UAAU;AACR,IAAI,KAAK,YAAY,QAAQ,KAAK,MAAM,SAAS,KAAK,QAAQ,KAC5D,KAAK,MAAM,YAAY,KAAK,QAAQ;AAAA,EAExC;AACF;"}

package/dist/overlay/tooltip/tooltip.js

@@ -1,20 +1,20 @@
-import { jsx as p } from "react/jsx-runtime";
-import { VStack as a } from "../../stacks/v_stack.js";
-import e from "classnames";
-import i from "react";
-import '../../tooltip.css';const m = "_tooltip_e324d7e", l = { tooltip: m }, x = i.forwardRef(function({ children: o, className: t, ...r }, s) {
-  return /* @__PURE__ */ p(
-    a,
+import { jsx as s } from "react/jsx-runtime";
+import { VStack as i } from "../../stacks/v_stack.js";
+import { clsx as e } from "clsx";
+import l from "react";
+import '../../tooltip.css';const m = "_tooltip_e324d7e", a = { tooltip: m }, u = l.forwardRef(function({ children: o, className: t, ...r }, p) {
+  return /* @__PURE__ */ s(
+    i,
     {
-      ref: s,
+      ref: p,
       as: "span",
-      className: e(t, l.tooltip, "tooltip"),
+      className: e(t, a.tooltip, "tooltip"),
       ...r,
       children: o
     }
   );
 });
 export {
-  x as Tooltip
+  u as Tooltip
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/overlay/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/overlay/tooltip/tooltip.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport classNames from 'classnames';\nimport React from 'react';\nimport styles from './tooltip.module.css';\n\nexport interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPanel(\n  { children, className, ...props }: TooltipProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"span\"\n      className={classNames(className, styles.tooltip, 'tooltip')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Tooltip","React","children","className","props","ref","jsx","VStack","classNames","styles"],"mappings":";;;;kDASaA,IAAUC,EAAM,WAAsC,SACjE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAWL,GAAWM,EAAO,SAAS,SAAS;AAAA,MACzD,GAAGL;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/overlay/tooltip/tooltip.tsx"],"sourcesContent":["import { VStack, type VStackProps } from '../../stacks/v_stack.js';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './tooltip.module.css';\n\nexport interface TooltipProps extends Omit<VStackProps, 'as' | 'children'> {\n  children?: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(function VPanel(\n  { children, className, ...props }: TooltipProps,\n  ref\n) {\n  return (\n    <VStack\n      ref={ref}\n      as=\"span\"\n      className={clsx(className, styles.tooltip, 'tooltip')}\n      {...props}\n    >\n      {children}\n    </VStack>\n  );\n});\n"],"names":["Tooltip","React","children","className","props","ref","jsx","VStack","clsx","styles"],"mappings":";;;;kDASaA,IAAUC,EAAM,WAAsC,SACjE,EAAE,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAC1BC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKL,GAAWM,EAAO,SAAS,SAAS;AAAA,MACnD,GAAGL;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/phone_number_input.css

@@ -1 +1 @@
-._phone-number-input_5c4483d{position:relative;opacity:1;border-radius:0}._phone-number-input_5c4483d[data-has-phone-book=false]{border-end-end-radius:4px;border-start-end-radius:4px}._phone-number-input-select_a7b33ac{border-end-end-radius:0px;border-start-end-radius:0px}._phone-number-input_5c4483d>*{position:relative;z-index:1}._phone-number-input-select_a7b33ac:has(button){z-index:2}._phone-number-input-input_5b14556:has(input:focus),._phone-number-input-select_a7b33ac:focus,._phone-number-input-input_5b14556:has(input:focus-visible),._phone-number-input-select_a7b33ac:focus-visible{z-index:3}._phone-number-input-phone-book-popover_1511f35{border-radius:calc(4px * var(--scalar, 1));padding:8px;background-color:#fefefe;box-shadow:var(--raised-box-shadow),var(--drop-shadow-depth-3);min-width:calc(200px * var(--scalar, 1))}._phone-number-input-phone-book_7999ca1{border-start-start-radius:0px;border-end-start-radius:0px;height:calc(26px * var(--scalar, 1))!important;width:calc(26px * var(--scalar, 1))!important;min-height:calc(26px * var(--scalar, 1))!important;min-width:calc(26px * var(--scalar, 1))!important;max-height:calc(26px * var(--scalar, 1))!important;max-width:calc(26px * var(--scalar, 1))!important}
+._phone-number-input_5c4483d{position:relative;opacity:1;border-radius:0}._phone-number-input_5c4483d[data-has-phone-book=false]{border-end-end-radius:4px;border-start-end-radius:4px}._phone-number-input-select_a7b33ac{border-end-end-radius:0px;border-start-end-radius:0px}._phone-number-input_5c4483d>*{position:relative;z-index:1}._phone-number-input-select_a7b33ac:has(button){z-index:2}._phone-number-input-input_5b14556:has(input:focus),._phone-number-input-select_a7b33ac:focus,._phone-number-input-input_5b14556:has(input:focus-visible),._phone-number-input-select_a7b33ac:focus-visible{z-index:3}._phone-number-input-phone-book-popover_1511f35{border-radius:calc(4px * var(--scalar, 1));padding:8px;background-color:#fefefe;box-shadow:var(--raised-box-shadow),var(--drop-shadow-depth-3);min-width:calc(200px * var(--scalar, 1))}._phone-number-input-phone-book_7999ca1{border-start-start-radius:0px;border-end-start-radius:0px;height:calc(26px * var(--scalar, 1))!important;width:calc(26px * var(--scalar, 1))!important;min-height:calc(26px * var(--scalar, 1))!important;min-width:calc(26px * var(--scalar, 1))!important;max-height:calc(26px * var(--scalar, 1))!important;max-width:calc(26px * var(--scalar, 1))!important}._phone-number-input-obfuscated_5a0ed8c{user-select:none;-webkit-user-select:none;cursor:default;width:100%;height:100%}._phone-number-input-obfuscated_5a0ed8c::selection{background:transparent}

package/dist/slim_button.css

@@ -1 +1 @@
-._slim-button_188fdc3{min-height:auto}._slim-button_188fdc3[data-is-disabled=true]{pointer-events:none}._slim-button_188fdc3[data-size=sm]{padding:1px}._slim-button_188fdc3[data-size=md]{padding:2px}._slim-button_188fdc3[data-size=lg]{padding:3px}._slim-button_188fdc3[data-hierarchy=tertiary][data-is-disabled=true]{background-color:transparent;border:none;color:var(--button-color-disabled);min-height:auto;pointer-events:none}._slim-button_188fdc3[data-hierarchy=secondary][data-is-disabled=true]{background-color:transparent;border:1px solid var(--button-color-disabled);color:var(--button-color-disabled)}
+._slim-button_188fdc3{min-height:auto}._slim-button_188fdc3[data-is-disabled=true]{pointer-events:none}

package/dist/stacks/box/bottom_resize_handle.js

@@ -1,8 +1,8 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as m } from "react/jsx-runtime";
 import { createVerticalResizeHandler as l } from "./resize_handlers.js";
-import c from "classnames";
-import '../../bottom_resize_handle.css';const a = "_bottom-resize-handle_e3e2ef2", f = { "bottom-resize-handle": a };
-function H({
+import { clsx as c } from "clsx";
+import '../../bottom_resize_handle.css';const f = "_bottom-resize-handle_e3e2ef2", z = { "bottom-resize-handle": f };
+function x({
   targetRef: t,
   handleProps: e,
   onHeightResize: o,
@@ -12,22 +12,22 @@ function H({
     t,
     o,
     s
-  ), n = e?.offset ? e.offset : -8, m = {
+  ), n = e?.offset ? e.offset : -8, r = {
     ...e?.style,
     bottom: `${n}px`,
     height: e?.size || "16px"
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: c(f["bottom-resize-handle"], "bottom-resize-handle"),
+      className: c(z["bottom-resize-handle"], "bottom-resize-handle"),
       onMouseDown: i,
-      style: m,
+      style: r,
       children: e?.children
     }
   );
 }
 export {
-  H as BottomResizeHandle
+  x as BottomResizeHandle
 };
 //# sourceMappingURL=bottom_resize_handle.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bottom_resize_handle.js","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './bottom_resize_handle.module.css';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport classNames from 'classnames';\nimport type { HandleProps } from './handle_props.js';\n\nexport interface BottomResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (value: number) => void;\n  onHeightResizeEnd?: (value: number) => void;\n}\n\nexport function BottomResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: BottomResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const bottomResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    bottom: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={classNames(styles['bottom-resize-handle'], 'bottom-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={bottomResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["BottomResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","bottomResizeHandleStyle","jsx","classNames","styles"],"mappings":";;;;AAaO,SAASA,EAAmB;AAAA,EACjC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA+C;AAAA,IACnD,GAAGN,GAAa;AAAA,IAChB,QAAQ,GAAGK,CAAM;AAAA,IACjB,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAG/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,sBAAsB,GAAG,sBAAsB;AAAA,MAC5E,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}
+{"version":3,"file":"bottom_resize_handle.js","sources":["../../../src/stacks/box/bottom_resize_handle.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './bottom_resize_handle.module.css';\nimport { createVerticalResizeHandler } from './resize_handlers.js';\nimport { clsx } from 'clsx';\nimport type { HandleProps } from './handle_props.js';\n\nexport interface BottomResizeHandleProps {\n  targetRef: React.MutableRefObject<HTMLElement | null>;\n  handleProps?: HandleProps;\n  onHeightResize?: (value: number) => void;\n  onHeightResizeEnd?: (value: number) => void;\n}\n\nexport function BottomResizeHandle({\n  targetRef,\n  handleProps,\n  onHeightResize,\n  onHeightResizeEnd,\n}: BottomResizeHandleProps) {\n  const resizeHandler = createVerticalResizeHandler(\n    targetRef,\n    onHeightResize,\n    onHeightResizeEnd\n  );\n  const offset = handleProps?.offset ? handleProps.offset : -8;\n\n  const bottomResizeHandleStyle: React.CSSProperties = {\n    ...handleProps?.style,\n    bottom: `${offset}px`,\n    height: handleProps?.size || '16px',\n  };\n\n  return (\n    <div\n      className={clsx(styles['bottom-resize-handle'], 'bottom-resize-handle')}\n      onMouseDown={resizeHandler}\n      style={bottomResizeHandleStyle}\n    >\n      {handleProps?.children}\n    </div>\n  );\n}\n"],"names":["BottomResizeHandle","targetRef","handleProps","onHeightResize","onHeightResizeEnd","resizeHandler","createVerticalResizeHandler","offset","bottomResizeHandleStyle","jsx","clsx","styles"],"mappings":";;;;AAaO,SAASA,EAAmB;AAAA,EACjC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AACF,GAA4B;AAC1B,QAAMC,IAAgBC;AAAA,IACpBL;AAAA,IACAE;AAAA,IACAC;AAAA,EAAA,GAEIG,IAASL,GAAa,SAASA,EAAY,SAAS,IAEpDM,IAA+C;AAAA,IACnD,GAAGN,GAAa;AAAA,IAChB,QAAQ,GAAGK,CAAM;AAAA,IACjB,QAAQL,GAAa,QAAQ;AAAA,EAAA;AAG/B,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,sBAAsB,GAAG,sBAAsB;AAAA,MACtE,aAAaN;AAAA,MACb,OAAOG;AAAA,MAEN,UAAAN,GAAa;AAAA,IAAA;AAAA,EAAA;AAGpB;"}

package/dist/stacks/box/box.js

@@ -1,21 +1,21 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 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 ao } from "./left_resize_handle.js";
-import { RightResizeHandle as to } from "./right_resize_handle.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 so } from "./end_resize_handle.js";
-import { StartResizeHandle as fo } from "./start_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 mo from "classnames";
+import { clsx as mo } from "clsx";
 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 _o = O.forwardRef(function({
   style: v,
   className: P,
   as: H = "div",
@@ -23,14 +23,14 @@ const Yo = O.forwardRef(function({
   width: r = "default",
   minWidth: b,
   maxWidth: j,
-  height: a = "default",
+  height: t = "default",
   minHeight: w,
-  maxHeight: N,
-  zIndex: Y,
-  padding: _,
-  paddingInline: A,
-  paddingBlock: B,
-  margin: C,
+  maxHeight: Y,
+  zIndex: _,
+  padding: A,
+  paddingInline: B,
+  paddingBlock: C,
+  margin: N,
   marginBlock: U,
   marginInline: q,
   marginInlineStart: D,
@@ -40,7 +40,7 @@ const Yo = O.forwardRef(function({
   overflow: K,
   overflowX: M,
   overflowY: Q,
-  enableResizeOnTop: f = !1,
+  enableResizeOnTop: s = !1,
   enableResizeOnEnd: l = !1,
   enableResizeOnBottom: m = !1,
   enableResizeOnStart: n = !1,
@@ -48,25 +48,25 @@ const Yo = O.forwardRef(function({
   enableResizeOnRight: p = !1,
   onWidthResize: e,
   onHeightResize: d,
-  onWidthResizeEnd: s,
+  onWidthResizeEnd: f,
   onHeightResizeEnd: u,
   horizontalHandleProps: x,
   verticalHandleProps: i,
   ...X
 }, Z) {
-  const $ = H, o = oo(null), L = ro(Z, o), R = l || n || c || p, T = m || f, z = R, E = T, g = z && r === "flex", S = E && a === "flex", F = !g && !S && (r === "flex" || a === "flex");
-  g && (r = "100%", console.warn("You cannot have a resizable box and flex simultaneously")), S && (a = "auto", console.warn("You cannot have a resizable box and flex simultaneously"));
+  const $ = H, 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");
+  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: y(r) ? void 0 : r,
     minWidth: b,
     maxWidth: j,
-    height: y(a) ? void 0 : a,
+    height: y(t) ? void 0 : t,
     minHeight: w,
-    maxHeight: N,
-    padding: _,
-    paddingInline: A,
-    paddingBlock: B,
-    margin: C,
+    maxHeight: Y,
+    padding: A,
+    paddingInline: B,
+    paddingBlock: C,
+    margin: N,
     marginBlock: U,
     marginInline: q,
     marginInlineStart: D,
@@ -76,18 +76,18 @@ const Yo = O.forwardRef(function({
     overflow: K,
     overflowX: M,
     overflowY: Q,
-    zIndex: Y
+    zIndex: _
   };
   return /* @__PURE__ */ h(
     $,
     {
       "data-enabled-resize-on-start": String(n),
       "data-enabled-resize-on-end": String(l),
-      "data-enabled-resize-on-top": String(f),
+      "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-height": a,
+      "data-height": t,
       "data-width": r,
       ref: L,
       style: {
@@ -104,7 +104,7 @@ const Yo = O.forwardRef(function({
       ...X,
       children: [
         V,
-        f && /* @__PURE__ */ t(
+        s && /* @__PURE__ */ a(
           lo,
           {
             onHeightResize: d,
@@ -113,7 +113,7 @@ const Yo = O.forwardRef(function({
             handleProps: x
           }
         ),
-        m && /* @__PURE__ */ t(
+        m && /* @__PURE__ */ a(
           eo,
           {
             onHeightResize: d,
@@ -122,38 +122,38 @@ const Yo = O.forwardRef(function({
             handleProps: i
           }
         ),
-        n && /* @__PURE__ */ t(
-          fo,
+        n && /* @__PURE__ */ a(
+          so,
           {
             onWidthResize: e,
-            onWidthResizeEnd: s,
+            onWidthResizeEnd: f,
             targetRef: o,
             handleProps: x
           }
         ),
-        l && /* @__PURE__ */ t(
-          so,
+        l && /* @__PURE__ */ a(
+          fo,
           {
             onWidthResize: e,
-            onWidthResizeEnd: s,
+            onWidthResizeEnd: f,
             targetRef: o,
             handleProps: x
           }
         ),
-        c && /* @__PURE__ */ t(
-          ao,
+        c && /* @__PURE__ */ a(
+          to,
           {
             onWidthResize: e,
-            onWidthResizeEnd: s,
+            onWidthResizeEnd: f,
             targetRef: o,
             handleProps: i
           }
         ),
-        p && /* @__PURE__ */ t(
-          to,
+        p && /* @__PURE__ */ a(
+          ao,
           {
             onWidthResize: e,
-            onWidthResizeEnd: s,
+            onWidthResizeEnd: f,
             targetRef: o,
             handleProps: i
           }
@@ -163,6 +163,6 @@ const Yo = O.forwardRef(function({
   );
 });
 export {
-  Yo as Box
+  _o 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 classNames from 'classnames';\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?: (width: number) => void;\n  onHeightResize?: (width: number) => 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={classNames(\n        styles['box'],\n        className,\n        isFlexing && 'stack-flex',\n        isFlexing && styles['stack-flex'],\n        '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","classNames","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?: (width: number) => void;\n  onHeightResize?: (width: number) => 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        '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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"}