@astryxdesign/core 0.1.4 → 0.1.5-canary.76e6697

package/dist/Item/Item.js

@@ -26,7 +26,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Types
 // =============================================================================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -193,15 +193,15 @@ export function Item({
   const isStringDescription = typeof description === 'string';
   const labelTruncateStyle = labelLines != null ? labelLines === 1 ? styles.labelSingleTruncate : styles.labelMultiTruncate : isStringLabel ? styles.labelSingleTruncate : null;
   const descriptionTruncateStyle = descriptionLines != null ? descriptionLines === 1 ? styles.descriptionSingleTruncate : styles.descriptionMultiTruncate : isStringDescription ? styles.descriptionSingleTruncate : null;
-  const labelAndDescription = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("span", {
+  const labelAndDescription = /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       ...stylex.props(styles.label, labelTruncateStyle, labelLines != null && labelLines > 1 && dynamicStyles.lineClamp(labelLines)),
       children: label
-    }), description != null && /*#__PURE__*/_jsx("span", {
+    }, void 0, false), description != null && /*#__PURE__*/_jsxDEV("span", {
       ...stylex.props(styles.description, descriptionTruncateStyle, descriptionLines != null && descriptionLines > 1 && dynamicStyles.lineClamp(descriptionLines)),
       children: description
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
   const handleContainerClick = e => {
     if (isDisabled) {
       return;
@@ -212,13 +212,13 @@ export function Item({
     }
     onClick?.(e);
   };
-  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [marker, startContent != null && /*#__PURE__*/_jsx("span", {
+  const innerContent = /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [marker, startContent != null && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x3psx0u x78zum5"
       },
       children: startContent
-    }), hasParentRole ? /*#__PURE__*/_jsx("span", {
+    }, void 0, false), hasParentRole ? /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -228,7 +228,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
+    }, void 0, false) : href != null ? /*#__PURE__*/_jsxDEV(LinkComponent, {
       href: href,
       target: target,
       rel: rel,
@@ -243,7 +243,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : onClick != null ? /*#__PURE__*/_jsx("button", {
+    }, void 0, false) : onClick != null ? /*#__PURE__*/_jsxDEV("button", {
       type: "button",
       onClick: onClick,
       disabled: isDisabled,
@@ -256,7 +256,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }) : /*#__PURE__*/_jsx("span", {
+    }, void 0, false) : /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h"
@@ -266,7 +266,7 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: labelAndDescription
-    }), endContent != null && /*#__PURE__*/_jsx("span", {
+    }, void 0, false), endContent != null && /*#__PURE__*/_jsxDEV("span", {
       ...{
         0: {
           className: "x3psx0u x78zum5 xvc5jky"
@@ -276,13 +276,13 @@ export function Item({
         }
       }[!!isDisabled << 0],
       children: endContent
-    })]
-  });
-  return /*#__PURE__*/_jsx(Component, {
+    }, void 0, false)]
+  }, void 0, true);
+  return /*#__PURE__*/_jsxDEV(Component, {
     ref: ref,
+    ...restProps,
     "aria-selected": isSelected || undefined,
     "aria-disabled": isDisabled || undefined,
-    ...restProps,
     ...mergeProps(themeProps('item', {
       density,
       align
@@ -290,6 +290,6 @@ export function Item({
     role: role,
     onClick: hasParentRole ? onClick : isInteractive ? handleContainerClick : undefined,
     children: innerContent
-  });
+  }, void 0, false);
 }
 Item.displayName = 'Item';

package/dist/Kbd/Kbd.js

@@ -18,7 +18,7 @@ import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   wrapper: {
     k1xSpc: "x3nfvp2",
@@ -145,19 +145,19 @@ export function Kbd({
   // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
   // the visual glyphs below are announced meaninglessly by assistive tech.
   const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
-  return /*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV("span", {
     ref: ref,
     role: "img",
     "aria-label": accessibleName,
     ...rest,
     ...mergeProps(themeProps('kbd'), stylex.props(styles.wrapper, xstyle), className, style),
-    children: parts.map(key => /*#__PURE__*/_jsx("kbd", {
+    children: parts.map(key => /*#__PURE__*/_jsxDEV("kbd", {
       "aria-hidden": "true",
       ...{
         className: "x3nfvp2 x6s0dn4 xl56j7k x16asifk x1grt7ep x7a5moj xx3sua9 x17x4s8c xlxy82 x1q0q8m5 xib2hle xv1l7n4 x9ynric x141an7d x1e4wzip x1ltkj2j x87ps6o"
       },
       children: getKeyDisplay(key, isMac)
-    }, key))
-  });
+    }, key, false))
+  }, void 0, false);
 }
 Kbd.displayName = 'Kbd';

package/dist/Layer/LayerProvider.js

@@ -5,7 +5,7 @@
 import { useMemo } from 'react';
 import { LayerContext, useLayerContext } from "./LayerContext.js";
 import { ToastViewport } from "../Toast/ToastViewport.js";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * App-level provider for layer systems (toast, sheet, imperative modals).
  *
@@ -32,18 +32,18 @@ export function LayerProvider({
 
   // Nested provider — pass through
   if (existingContext) {
-    return /*#__PURE__*/_jsx(_Fragment, {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
       children: children
-    });
+    }, void 0, false);
   }
-  return /*#__PURE__*/_jsx(LayerContext, {
+  return /*#__PURE__*/_jsxDEV(LayerContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(ToastViewport, {
+    children: /*#__PURE__*/_jsxDEV(ToastViewport, {
       position: toastConfig.position,
       maxVisible: toastConfig.maxVisible,
       inset: toastConfig.inset,
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayerProvider.displayName = 'LayerProvider';

package/dist/Layer/useLayer.d.ts

@@ -5,13 +5,16 @@
  * @position Core layer utility; used by useHoverCard, useTooltip, etc.
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Layer/Layer.doc.mjs
+ * - /packages/core/src/Layer/useLayer.doc.mjs
+ * - /packages/core/src/Layer/useLayer.test.tsx
  * - /packages/core/src/Layer/index.ts
  */
 import React, { type ReactNode, type RefCallback } from 'react';
 import type { StyleXStyles } from '@stylexjs/stylex';
 /**
- * Position placement relative to anchor
+ * Position placement relative to anchor.
+ * Logical: start/end resolve against the popover's own inherited direction
+ * via CSS (RTL contexts mirror automatically, no JS involved).
  */
 export type LayerPlacement = 'above' | 'below' | 'start' | 'end';
 /**
@@ -22,7 +25,31 @@ export type LayerAlignment = 'start' | 'center' | 'end';
  * Render props for context mode (anchor positioning)
  */
 export interface ContextRenderProps {
+    /**
+     * Who authors the layer's position styles.
+     *
+     * `'anchor'` (default): the hook derives CSS anchor-positioning styles —
+     * `position-area` and `position-try-fallbacks` — from the logical
+     * `placement`/`alignment`.
+     *
+     * `'custom'`: the consumer authors its own position styles via `style`
+     * (e.g. explicit `anchor()` insets or an `anchor-size()` cover). The hook
+     * keeps the popover behavior and the `position-anchor` wiring but emits no
+     * placement-derived styles, so direction handling becomes the consumer's
+     * responsibility. `placement`/`alignment` are ignored.
+     *
+     * @default 'anchor'
+     */
+    positioning?: 'anchor' | 'custom';
+    /**
+     * Logical placement relative to the anchor. Ignored when `positioning`
+     * is `'custom'`.
+     */
     placement?: LayerPlacement;
+    /**
+     * Alignment along the placement axis. Ignored when `positioning`
+     * is `'custom'`.
+     */
     alignment?: LayerAlignment;
     /**
      * ARIA role applied to the popover container (e.g. `'tooltip'`). Lets

package/dist/Layer/useLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLayer.d.ts","sourceRoot":"","sources":["../../src/Layer/useLayer.tsx"],"names":[],"mappings":"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"}

package/dist/Layer/useLayer.js

@@ -9,7 +9,8 @@
  * @position Core layer utility; used by useHoverCard, useTooltip, etc.
  *
  * SYNC: When modified, update:
- * - /packages/core/src/Layer/Layer.doc.mjs
+ * - /packages/core/src/Layer/useLayer.doc.mjs
+ * - /packages/core/src/Layer/useLayer.test.tsx
  * - /packages/core/src/Layer/index.ts
  */
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
@@ -17,7 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import { addAnchorName, removeAnchorName } from "./anchorName.js";
 import "../theme/tokens.stylex.js";
 import { typographyVars } from "../theme/tokens.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     keoZOQ: "xdj266r",
@@ -42,7 +43,9 @@ const styles = {
 };
 
 /**
- * Position placement relative to anchor
+ * Position placement relative to anchor.
+ * Logical: start/end resolve against the popover's own inherited direction
+ * via CSS (RTL contexts mirror automatically, no JS involved).
  */
 
 /**
@@ -78,36 +81,40 @@ const styles = {
  */
 
 /**
- * Map placement and alignment to CSS position-area value.
+ * Map logical placement/alignment to a CSS position-area value.
+ *
+ * Uses the self-* logical keyword family: the inline axis resolves against
+ * the popover's own inherited direction (the layer renders inside the
+ * trigger's subtree, so it inherits `direction` and mirrors in RTL with no
+ * JS). The block axis is direction-neutral but must come from the same
+ * keyword family — mixing physical `top` with `self-inline-*` produces an
+ * invalid position-area (computes to `none`, which pins the popover to the
+ * viewport corner because styles.base zeroes the UA margins).
+ *
+ * Note the plain logical family (`inline-start`, no `self-`) is NOT a
+ * substitute: it resolves against the containing block — the page root for
+ * a top-layer popover — so it ignores `direction` set on a subtree, which
+ * is exactly #3389's repro.
  */
 function getPositionArea(placement = 'above', alignment = 'center') {
-  const placementMap = {
-    above: 'top',
-    below: 'bottom',
-    start: 'left',
-    end: 'right'
-  };
-  const cssPlacement = placementMap[placement];
-
-  // For above/below, alignment is horizontal
   if (placement === 'above' || placement === 'below') {
+    const block = placement === 'above' ? 'self-block-start' : 'self-block-end';
     if (alignment === 'start') {
-      return `${cssPlacement} span-right`;
+      return `${block} span-self-inline-end`;
     }
     if (alignment === 'end') {
-      return `${cssPlacement} span-left`;
+      return `${block} span-self-inline-start`;
     }
-    return cssPlacement; // center
+    return block; // center
   }
-
-  // For start/end, alignment is vertical
+  const inline = placement === 'start' ? 'self-inline-start' : 'self-inline-end';
   if (alignment === 'start') {
-    return `${cssPlacement} span-bottom`;
+    return `${inline} span-self-block-end`;
   }
   if (alignment === 'end') {
-    return `${cssPlacement} span-top`;
+    return `${inline} span-self-block-start`;
   }
-  return `${cssPlacement} center`;
+  return inline; // center
 }
 
 /**
@@ -143,18 +150,18 @@ export function useLayer(options) {
   // stale-closure reads of the previous isOpen value.
   const isOpenRef = useRef(false);
   const show = useCallback(() => {
-    const el = popoverRef.current;
-    if (el && !isOpenRef.current) {
+    const popover = popoverRef.current;
+    if (popover && !isOpenRef.current) {
       // Finding infra-4: the Popover API is unsupported on Safari <17 and
       // Firefox <125. On those browsers `showPopover` does not exist, so
       // calling it unconditionally throws a TypeError and the layer never
       // opens. Guard behind a feature check; when the API is missing, fall
       // back to plain visibility (the [popover] attribute is inert there, so
       // the element sits in normal flow) so the layer still becomes visible.
-      if (typeof el.showPopover === 'function') {
-        el.showPopover();
+      if (typeof popover.showPopover === 'function') {
+        popover.showPopover();
       } else {
-        el.style.display = 'block';
+        popover.style.display = 'block';
       }
       isOpenRef.current = true;
       setIsOpen(true);
@@ -255,6 +262,7 @@ export function useLayer(options) {
     const {
       placement = 'above',
       alignment = 'center',
+      positioning = 'anchor',
       role,
       xstyle,
       className: extraClassName,
@@ -265,7 +273,12 @@ export function useLayer(options) {
     } = props || {};
 
     // CSS anchor positioning (dynamic, not in StyleX)
-    const anchorStyle = {
+    const anchorStyle = positioning === 'custom' ?
+    // Consumer authors its own position styles via `style` — keep
+    // only the anchor wiring, derive nothing from placement.
+    {
+      positionAnchor: anchorId
+    } : {
       positionAnchor: anchorId,
       positionArea: getPositionArea(placement, alignment),
       positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline'
@@ -276,7 +289,7 @@ export function useLayer(options) {
     // Render as the requested tag. A `span` keeps the layer phrasing content
     // so it is valid (and stays put on hydration) inside inline contexts like
     // a `<p>`; `div` remains the default for block layers.
-    return /*#__PURE__*/_jsx(Container, {
+    return /*#__PURE__*/_jsxDEV(Container, {
       ref: popoverRefCallback,
       id: id,
       role: role,
@@ -290,7 +303,7 @@ export function useLayer(options) {
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       children: children
-    });
+    }, void 0, false);
   }, [anchorId, id, lightDismiss, popoverRefCallback]);
 
   // Render function for fixed mode
@@ -310,7 +323,7 @@ export function useLayer(options) {
     };
     const stylexResult = stylex.props(styles.base, styles.fixed, xstyle);
     const combinedClassName = extraClassName ? `${extraClassName} ${stylexResult.className ?? ''}` : stylexResult.className;
-    return /*#__PURE__*/_jsx("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       ref: popoverRefCallback,
       id: id,
       popover: lightDismiss ? 'auto' : 'manual',
@@ -321,7 +334,7 @@ export function useLayer(options) {
         ...extraStyle
       },
       children: children
-    });
+    }, void 0, false);
   }, [popoverRefCallback, id, lightDismiss]);
   if (mode === 'context') {
     return {

package/dist/Layout/Layout.js

@@ -32,7 +32,7 @@ import { layoutPaddingOuterXVarStyles, layoutPaddingOuterYVarStyles } from "./pa
  * - `fill`: Layout fills container height, content scrolls internally (default)
  * - `auto`: Layout grows with content, container/page scrolls
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   layoutOuter: {
     keTefX: "xojxgvx",
@@ -97,10 +97,10 @@ function AreaProvider({
   if (children == null) {
     return null;
   }
-  return /*#__PURE__*/_jsx(LayoutAreaContext, {
+  return /*#__PURE__*/_jsxDEV(LayoutAreaContext, {
     value: area,
     children: children
-  });
+  }, void 0, false);
 }
 
 /**
@@ -188,51 +188,51 @@ export function Layout({
     hasStart,
     hasEnd
   }), [hasHeader, hasFooter, hasStart, hasEnd]);
-  const tree = /*#__PURE__*/_jsx(LayoutSlotsContext, {
+  const tree = /*#__PURE__*/_jsxDEV(LayoutSlotsContext, {
     value: slotsValue,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       ...mergeProps(themeProps('layout', {
         height
       }), stylex.props(styles.layoutOuter, isFill ? styles.fill : styles.auto, xstyle), className, style),
-      children: /*#__PURE__*/_jsxs("div", {
+      children: /*#__PURE__*/_jsxDEV("div", {
         ...stylex.props(_temp2, styles.layoutInner, ...stack({
           direction: 'vertical'
         }), isFill ? styles.fill : styles.auto, padding === 0 && styles.fullBleed, padding != null && layoutPaddingOuterXVarStyles[padding], padding != null && layoutPaddingOuterYVarStyles[padding], contentWidth != null && dynamicStyles.contentWidthVar(contentWidth)),
-        children: [/*#__PURE__*/_jsx(AreaProvider, {
+        children: [/*#__PURE__*/_jsxDEV(AreaProvider, {
           area: "header",
           children: header
-        }), /*#__PURE__*/_jsxs("div", {
+        }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
           ...stylex.props(...stack({
             direction: 'horizontal'
           }), styles.middle, contentWidth != null && dynamicStyles.contentWidth(contentWidth)),
-          children: [/*#__PURE__*/_jsx(AreaProvider, {
+          children: [/*#__PURE__*/_jsxDEV(AreaProvider, {
             area: "start",
             children: start
-          }), /*#__PURE__*/_jsx("div", {
+          }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
             ...stylex.props(...stackItem({
               size: 'fill'
             })),
-            children: /*#__PURE__*/_jsx(AreaProvider, {
+            children: /*#__PURE__*/_jsxDEV(AreaProvider, {
               area: "content",
               children: resolvedContent
-            })
-          }), /*#__PURE__*/_jsx(AreaProvider, {
+            }, void 0, false)
+          }, void 0, false), /*#__PURE__*/_jsxDEV(AreaProvider, {
             area: "end",
             children: end
-          })]
-        }), /*#__PURE__*/_jsx(AreaProvider, {
+          }, void 0, false)]
+        }, void 0, true), /*#__PURE__*/_jsxDEV(AreaProvider, {
           area: "footer",
           children: footer
-        })]
-      })
-    })
-  });
+        }, void 0, false)]
+      }, void 0, true)
+    }, void 0, false)
+  }, void 0, false);
   if (dividerCtxValue != null) {
-    return /*#__PURE__*/_jsx(LayoutDividerContext, {
+    return /*#__PURE__*/_jsxDEV(LayoutDividerContext, {
       value: dividerCtxValue,
       children: tree
-    });
+    }, void 0, false);
   }
   return tree;
 }

package/dist/Layout/LayoutContent.js

@@ -22,7 +22,7 @@ import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   content: {
     kB7OPa: "x9f619",
@@ -130,7 +130,7 @@ export function LayoutContent({
     hasEnd
   } = use(LayoutSlotsContext);
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
@@ -139,6 +139,6 @@ export function LayoutContent({
     !hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 LayoutContent.displayName = 'LayoutContent';

package/dist/Layout/LayoutFooter.js

@@ -22,7 +22,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   footer: {
     kmuXW: "x2lah0s",
@@ -103,17 +103,17 @@ export function LayoutFooter({
   const dividerCtx = use(LayoutDividerContext);
   const resolvedHasDivider = hasDivider ?? dividerCtx?.defaultHasDividers ?? false;
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
     ...mergeProps(themeProps('layout-footer'), stylex.props(styles.footer, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayoutFooter.displayName = 'LayoutFooter';

package/dist/Layout/LayoutHeader.js

@@ -22,7 +22,7 @@ import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   header: {
     kmuXW: "x2lah0s",
@@ -103,17 +103,17 @@ export function LayoutHeader({
   const dividerCtx = use(LayoutDividerContext);
   const resolvedHasDivider = hasDivider ?? dividerCtx?.defaultHasDividers ?? false;
   const isZeroPadding = padding === 0;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
     "data-divider": resolvedHasDivider || undefined,
     ...mergeProps(themeProps('layout-header'), stylex.props(styles.header, dynamicStyles.sizing(height ?? null), resolvedHasDivider && styles.divider, xstyle), className, style),
     ...props,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ...stylex.props(styles.inner, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding]),
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 LayoutHeader.displayName = 'LayoutHeader';

package/dist/Layout/LayoutPanel.js

@@ -23,7 +23,7 @@ import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   panel: {
     kB7OPa: "x9f619",
@@ -166,7 +166,7 @@ export function LayoutPanel({
 
   // Select collapse style based on position (collapse the side where divider would be)
   const collapseStyle = isStartPanel ? styles.collapseEnd : isEndPanel ? styles.collapseStart : null;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     role: role,
     "aria-label": label,
@@ -175,6 +175,6 @@ export function LayoutPanel({
     isStartPanel && !isZeroPadding && padding == null && styles.startPanel, isEndPanel && !isZeroPadding && padding == null && styles.endPanel, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], hasDivider && dividerStyle, shouldCollapseSpacing && collapseStyle, xstyle), className, style),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 LayoutPanel.displayName = 'LayoutPanel';

package/dist/Lightbox/Lightbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAySf;yBAzTe,QAAQ"}
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,gEAAgE;IAChE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACjE,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,KAAK,EAAE,aAAa,GAAG,aAAa,EAAE,CAAC;IACvC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAqID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,YAAY,EACZ,KAAK,EACL,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,OAAe,EACf,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,KAAK,EACT,EAAE,aAAa,sCAmUf;yBAnVe,QAAQ"}