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

package/dist/Field/Field.js

@@ -25,7 +25,7 @@ import { mergeProps } from "../utils/index.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { Text } from "../Text/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 const styles = {
   container: {
     k1xSpc: "x78zum5",
@@ -96,7 +96,7 @@ export function Field({
   if (isOptional && isRequired) {
     console.warn('Field: isOptional and isRequired are mutually exclusive. isOptional takes precedence.');
   }
-  const labelNode = /*#__PURE__*/_jsx(FieldLabel, {
+  const labelNode = /*#__PURE__*/_jsxDEV(FieldLabel, {
     label: label,
     inputID: inputID,
     labelID: labelID,
@@ -109,13 +109,13 @@ export function Field({
     labelTooltip: labelTooltip,
     description: isHorizontalLabels ? undefined : description,
     descriptionID: isHorizontalLabels ? undefined : resolvedDescriptionID
-  });
-  const statusNode = status?.message ? /*#__PURE__*/_jsx(FieldStatus, {
+  }, void 0, false);
+  const statusNode = status?.message ? /*#__PURE__*/_jsxDEV(FieldStatus, {
     type: status.type,
     message: status.message,
     id: resolvedMessageID,
     variant: statusVariant
-  }) : null;
+  }, void 0, false) : null;
 
   // ─── Horizontal-labels mode ───────────────────────────────────────────
   // Use display:contents so the parent grid's `auto 1fr` columns place
@@ -123,44 +123,44 @@ export function Field({
   // and status are grouped with the input in column 2.
   // The label wrapper gets top padding to align label text with input text.
   if (isHorizontalLabels) {
-    return /*#__PURE__*/_jsxs("div", {
+    return /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       ...mergeProps(themeProps('field', {
         layout: 'horizontal-labels'
       }), stylex.props(styles.horizontalLabels, xstyle), className, style),
       ...props,
-      children: [/*#__PURE__*/_jsx("div", {
+      children: [/*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x1enrzb7"
         },
         children: labelNode
-      }), /*#__PURE__*/_jsxs("div", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x78zum5 xdt5ytf xc8icb0"
         },
-        children: [description && /*#__PURE__*/_jsx(Text, {
+        children: [description && /*#__PURE__*/_jsxDEV(Text, {
           type: "supporting",
           display: "block",
           id: resolvedDescriptionID,
           children: description
-        }), children, statusNode]
-      })]
-    });
+        }, void 0, false), children, statusNode]
+      }, void 0, true)]
+    }, void 0, true);
   }
 
   // ─── Default mode (vertical / horizontal) ─────────────────────────────
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('field'), stylex.props(styles.container, !isLabelHidden && styles.containerGap, width != null && dynamicStyles.width(width), xstyle), className, style),
     ...props,
-    children: [labelNode, statusVariant === 'attached' ? /*#__PURE__*/_jsxs("div", {
+    children: [labelNode, statusVariant === 'attached' ? /*#__PURE__*/_jsxDEV("div", {
       ...{
         className: "x78zum5 xdt5ytf xc8icb0"
       },
       children: [children, statusNode]
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
+    }, void 0, true) : /*#__PURE__*/_jsxDEV(_Fragment, {
       children: [children, statusNode]
-    })]
-  });
+    }, void 0, true)]
+  }, void 0, true);
 }
 Field.displayName = 'Field';

package/dist/Field/FieldLabel.js

@@ -19,7 +19,7 @@ import { colorVars, fontWeightVars, spacingVars, typographyVars, typeScaleVars }
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Tooltip } from "../Tooltip/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "react/jsx-dev-runtime";
 /**
  * Label + description group for form fields. Handles sr-only hiding,
  * disabled styling, optional/required indicators, icons, and tooltips.
@@ -55,30 +55,30 @@ export function FieldLabel({
   // associated with a group. Render it as a `<span>` instead, keeping all the
   // label styling and slots. The group references it via `aria-labelledby`.
   const LabelElement = isGroupLabel ? 'span' : 'label';
-  const labelContent = /*#__PURE__*/_jsxs(_Fragment, {
+  const labelContent = /*#__PURE__*/_jsxDEV(_Fragment, {
     children: [labelIcon && renderIconSlot(labelIcon, {
       size: 'sm',
       color: 'inherit'
-    }), label, statusText && /*#__PURE__*/_jsxs("span", {
+    }), label, statusText && /*#__PURE__*/_jsxDEV("span", {
       ...{
         className: "x1sodnla x141an7d x1ltkj2j xv1l7n4"
       },
-      children: [/*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         "aria-hidden": "true",
         children: " \u2219 "
-      }), statusText]
-    }), labelTooltip && /*#__PURE__*/_jsx(Tooltip, {
+      }, void 0, false), statusText]
+    }, void 0, true), labelTooltip && /*#__PURE__*/_jsxDEV(Tooltip, {
       content: labelTooltip,
       placement: "above",
-      children: /*#__PURE__*/_jsx(Icon, {
+      children: /*#__PURE__*/_jsxDEV(Icon, {
         icon: "info",
         size: "sm",
         color: "inherit"
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(LabelElement, {
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV(LabelElement, {
       ref: ref,
       id: labelID
       // `htmlFor` only applies to a real `<label>` associating with a single
@@ -100,7 +100,7 @@ export function FieldLabel({
         }
       }[!!isDisabled << 1 | !!isLabelHidden << 0]),
       children: labelContent
-    }), description && /*#__PURE__*/_jsx("span", {
+    }, void 0, false), description && /*#__PURE__*/_jsxDEV("span", {
       id: descriptionID,
       ...{
         0: {
@@ -111,7 +111,7 @@ export function FieldLabel({
         }
       }[!!isLabelHidden << 0],
       children: description
-    })]
-  });
+    }, void 0, false)]
+  }, void 0, true);
 }
 FieldLabel.displayName = 'FieldLabel';

package/dist/Field/InputClearButton.js

@@ -11,7 +11,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
 import { Icon } from "../Icon/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   button: {
     kZKoxP: "x1qx5ct2",
@@ -24,18 +24,18 @@ export function InputClearButton({
   onClick,
   xstyle
 }) {
-  return /*#__PURE__*/_jsx(Button, {
+  return /*#__PURE__*/_jsxDEV(Button, {
     variant: "ghost",
     size: "sm",
     label: label,
-    icon: /*#__PURE__*/_jsx(Icon, {
+    icon: /*#__PURE__*/_jsxDEV(Icon, {
       icon: "close",
       size: "sm",
       color: "inherit"
-    }),
+    }, void 0, false),
     onClick: onClick,
     isIconOnly: true,
     xstyle: [styles.button, xstyle]
-  });
+  }, void 0, false);
 }
 InputClearButton.displayName = 'InputClearButton';

package/dist/FieldStatus/FieldStatus.js

@@ -23,7 +23,7 @@ import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { useEntryAnimation } from "../hooks/useEntryAnimation.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const styles = {
   base: {
     kMv6JI: "x9ynric",
@@ -112,7 +112,7 @@ export function FieldStatus({
   ...rest
 }) {
   const entryStyle = useEntryAnimation('slideDown');
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     id: id,
     role: type === 'error' ? 'alert' : 'status',
@@ -123,6 +123,6 @@ export function FieldStatus({
       variant
     }), stylex.props(styles.base, entryStyle, variant === 'attached' ? styles.attached : styles.detached, colorStyles[type], xstyle), className, style),
     children: message
-  });
+  }, void 0, false);
 }
 FieldStatus.displayName = 'FieldStatus';

package/dist/FileInput/FileInput.js

@@ -26,7 +26,7 @@ import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-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";
 function formatFileSize(bytes) {
   if (bytes < 1024) {
     return `${bytes} B`;
@@ -329,50 +329,50 @@ export function FileInput({
   const fileNames = hasFiles ? Array.isArray(value) ? value.map(f => f.name).join(', ') : value?.name ?? '' : null;
   const renderDropzoneContent = () => {
     if (isLoading) {
-      return /*#__PURE__*/_jsx(Spinner, {
+      return /*#__PURE__*/_jsxDEV(Spinner, {
         size: "md"
-      });
+      }, void 0, false);
     }
     if (hasFiles) {
-      return /*#__PURE__*/_jsx("div", {
+      return /*#__PURE__*/_jsxDEV("div", {
         ...{
           className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv x98rzlu xeuugli x2b8uid xeaf4i8"
         },
         children: fileNames
-      });
+      }, void 0, false);
     }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Icon, {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [/*#__PURE__*/_jsxDEV(Icon, {
         icon: "arrowUp",
         size: "md",
         color: "secondary"
-      }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...{
           className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x2b8uid x87ps6o"
         },
         children: isDragOver ? 'Drop files here' : displayPlaceholder
-      })]
-    });
+      }, void 0, false)]
+    }, void 0, true);
   };
   const renderCompactContent = () => {
     if (isLoading) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("span", {
+      return /*#__PURE__*/_jsxDEV(_Fragment, {
+        children: [/*#__PURE__*/_jsxDEV("span", {
           ...{
             className: "x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xb3r6kr xlyipyv xuxw1ft x98rzlu xeuugli"
           },
           children: fileNames ?? displayPlaceholder
-        }), /*#__PURE__*/_jsx(Spinner, {
+        }, void 0, false), /*#__PURE__*/_jsxDEV(Spinner, {
           size: "sm"
-        })]
-      });
+        }, void 0, false)]
+      }, void 0, true);
     }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Icon, {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [/*#__PURE__*/_jsxDEV(Icon, {
         icon: "arrowUp",
         size: "sm",
         color: "secondary"
-      }), /*#__PURE__*/_jsx("span", {
+      }, void 0, false), /*#__PURE__*/_jsxDEV("span", {
         ...{
           0: {
             className: "x9ynric xjm74w1 x6pjikd xw6l6zx xv1l7n4 x87ps6o x1yc453h x98rzlu xeuugli"
@@ -388,12 +388,12 @@ export function FileInput({
           }
         }[!!hasFiles << 1 | !!hasFiles << 0],
         children: fileNames ?? displayPlaceholder
-      }), status && /*#__PURE__*/_jsx(Icon, {
+      }, void 0, false), status && /*#__PURE__*/_jsxDEV(Icon, {
         icon: statusIconMap[status.type],
         size: "md",
         color: statusIconColorMap[status.type]
-      })]
-    });
+      }, void 0, false)]
+    }, void 0, true);
   };
   const isDropzone = mode === 'dropzone';
   const dragDropProps = isDropzone ? {
@@ -402,7 +402,7 @@ export function FileInput({
     onDragLeave: handleDragLeave,
     onDrop: handleDrop
   } : {};
-  return /*#__PURE__*/_jsxs(Field, {
+  return /*#__PURE__*/_jsxDEV(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -418,7 +418,7 @@ export function FileInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: [/*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxDEV("div", {
       ref: el => {
         // Anchor + hover/focus listeners for the disabled-message tooltip.
         // Handlers are gated internally by isEnabled, and anchor names
@@ -448,7 +448,7 @@ export function FileInput({
         mode,
         status: status?.type ?? null
       }), stylex.props(isDropzone ? styles.dropzone : styles.compact, isDropzone && !isDisabled && styles.dropzoneHover, isDropzone && isDragOver && styles.dropzoneActive, isDropzone && isDisabled && styles.dropzoneDisabled, !isDropzone && isDisabled && styles.compactDisabled, status && statusBorderStyles[status.type], xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("input", {
+      children: [/*#__PURE__*/_jsxDEV("input", {
         ...rest,
         ref: mergeRefs(ref, inputRef),
         id: id,
@@ -465,11 +465,11 @@ export function FileInput({
         ...{
           className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
         }
-      }), isDropzone ? renderDropzoneContent() : renderCompactContent(), hasFiles && !isDisabled && !isLoading && /*#__PURE__*/_jsx(InputClearButton, {
+      }, void 0, false), isDropzone ? renderDropzoneContent() : renderCompactContent(), hasFiles && !isDisabled && !isLoading && /*#__PURE__*/_jsxDEV(InputClearButton, {
         label: `Clear ${label}`,
         onClick: handleClear
-      })]
-    }), /*#__PURE__*/_jsx("div", {
+      }, void 0, false)]
+    }, void 0, true), /*#__PURE__*/_jsxDEV("div", {
       id: liveRegionID,
       role: "status",
       "aria-live": "polite",
@@ -477,7 +477,7 @@ export function FileInput({
         className: "x10l6tqk x1i1rx1s xjm9jq1 x1717udv xkdpibf xb3r6kr xzpqnlu xuxw1ft xc342km"
       },
       children: validationError
-    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
-  });
+    }, void 0, false), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  }, void 0, true);
 }
 FileInput.displayName = 'FileInput';

package/dist/FormLayout/FormLayout.js

@@ -25,7 +25,7 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 // Responsive breakpoint for horizontal-labels collapse
 // =============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const HORIZONTAL_LABELS_COLLAPSE = '@media (max-width: 480px)';
 
 // =============================================================================
@@ -95,16 +95,16 @@ export function FormLayout({
   const contextValue = useMemo(() => ({
     direction
   }), [direction]);
-  return /*#__PURE__*/_jsx(FormLayoutContext, {
+  return /*#__PURE__*/_jsxDEV(FormLayoutContext, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxDEV("div", {
       ref: ref,
       ...mergeProps(themeProps('form-layout', {
         direction
       }), stylex.props(styles.base, direction === 'horizontal' && styles.horizontal, direction === 'horizontal-labels' && styles.horizontalLabels, xstyle), className, style),
       ...props,
       children: children
-    })
-  });
+    }, void 0, false)
+  }, void 0, false);
 }
 FormLayout.displayName = 'FormLayout';

package/dist/Grid/Grid.d.ts

@@ -26,9 +26,10 @@ export type GridAlignment = 'start' | 'center' | 'end' | 'stretch';
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
  *     `'fit'` collapses empty tracks so items stretch to fill
- *   - `max` — caps the maximum number of columns by limiting track max size.
- *     The grid stretches to 100% of its parent; `max` only limits how many
- *     columns appear.
+ *   - `max` — caps the maximum number of columns. The grid stretches to 100%
+ *     of its parent and the columns that are present always fill the row, so a
+ *     layout collapsing to a single column on mobile stretches to full width
+ *     (no dead space on the right).
  */
 export type GridColumns = number | {
     minWidth: number;

package/dist/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2MD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid/Grid.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAI9C;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAEnE;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN;IACE,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB,CAAC;AAEN,MAAM,WAAW,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC1D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA2ND;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,aAAiB,EACjB,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,SAAS,+BA2FX;yBA9Ge,IAAI"}

package/dist/Grid/Grid.js

@@ -32,11 +32,12 @@ import { themeProps } from "../utils/themeProps.js";
  *   - `minWidth` — minimum width (px) for each column track
  *   - `repeat` — `'fill'` (default) preserves empty tracks for consistent widths;
  *     `'fit'` collapses empty tracks so items stretch to fill
- *   - `max` — caps the maximum number of columns by limiting track max size.
- *     The grid stretches to 100% of its parent; `max` only limits how many
- *     columns appear.
+ *   - `max` — caps the maximum number of columns. The grid stretches to 100%
+ *     of its parent and the columns that are present always fill the row, so a
+ *     layout collapsing to a single column on mobile stretches to full width
+ *     (no dead space on the right).
  */
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const baseStyles = {
   grid: {
     k1xSpc: "xrvj5dj",
@@ -256,16 +257,32 @@ const spacingVarNames = {
 };
 
 /**
- * Build a grid-template-columns value that caps columns at `max` by
- * limiting each track's max size to `(100% - (max-1) * gap) / max`.
- * The grid stays 100% width; the track-max prevents more than `max` columns.
+ * Build a grid-template-columns value that caps the column *count* at `max`
+ * while still letting the columns that are actually present stretch to fill
+ * the row.
+ *
+ * The cap lives on the track's **min** size, not its max: each track is at
+ * least `perColumn = (100% - (max-1) * gap) / max`, so more than `max` columns
+ * can never fit. The track **max** stays `1fr`, so whenever fewer than `max`
+ * columns fit (most importantly a lone column on mobile) they still grow to
+ * fill the whole row — no dead space on the right.
+ *
+ * The track min is `max(minWidth, perColumn)` so an explicit `minWidth` is
+ * still honored, wrapped in `min(100%, …)` so a single column on a viewport
+ * narrower than `minWidth`/`perColumn` shrinks to the container instead of
+ * overflowing it.
  */
 function buildCappedTemplate(minWidth, maxCols, repeatMode, gap, columnGap) {
   const gapVar = columnGap != null ? spacingVarNames[columnGap] : gap != null ? spacingVarNames[gap] : null;
 
-  // trackMax = (100% - (maxCols - 1) * gap) / maxCols
-  const trackMax = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
-  return `repeat(${repeatMode}, minmax(${minWidth}px, ${trackMax}))`;
+  // perColumn = (100% - (maxCols - 1) * gap) / maxCols — the width a track
+  // would have if exactly `maxCols` columns were present. Used as a floor so
+  // the grid never fits more than `maxCols` columns.
+  const perColumn = gapVar ? `calc((100% - ${maxCols - 1} * var(${gapVar})) / ${maxCols})` : `calc(100% / ${maxCols})`;
+
+  // Track min caps the count; track max stays 1fr so present columns fill.
+  const trackMin = `min(100%, max(${minWidth}px, ${perColumn}))`;
+  return `repeat(${repeatMode}, minmax(${trackMin}, 1fr))`;
 }
 
 /**
@@ -353,7 +370,7 @@ export function Grid({
 
   // For themeProps, extract numeric columns value for variant tracking
   const columnsVariant = typeof columns === 'number' ? columns : typeof columns === 'object' ? undefined : undefined;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('grid', {
       columns: columnsVariant,
@@ -366,6 +383,6 @@ export function Grid({
     }),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 Grid.displayName = 'Grid';

package/dist/Grid/GridSpan.js

@@ -16,7 +16,7 @@
 import * as stylex from '@stylexjs/stylex';
 import { mergeProps } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 const baseStyles = {
   span: {
     k7Eaqz: "xeuugli",
@@ -59,7 +59,7 @@ export function GridSpan({
       gridRow: `span ${rows}`
     })
   };
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxDEV("div", {
     ref: ref,
     ...mergeProps(themeProps('grid-span'), stylex.props(baseStyles.span, xstyle), className, {
       ...style,
@@ -67,6 +67,6 @@ export function GridSpan({
     }),
     ...props,
     children: children
-  });
+  }, void 0, false);
 }
 GridSpan.displayName = 'GridSpan';

package/dist/HStack/HStack.js

@@ -13,7 +13,7 @@
  */
 
 import { Stack } from "../Stack/Stack.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 /**
  * Horizontal stack component for arranging items left-to-right.
  * Convenience wrapper around `Stack` with `direction="horizontal"`.
@@ -34,12 +34,12 @@ export function HStack({
   vAlign,
   ...props
 }) {
-  return /*#__PURE__*/_jsx(Stack, {
+  return /*#__PURE__*/_jsxDEV(Stack, {
     ...props,
     direction: "horizontal",
     hAlign: hAlign ?? justify,
     vAlign: vAlign ?? align,
     ref: ref
-  });
+  }, void 0, false);
 }
 HStack.displayName = 'HStack';

package/dist/Heading/Heading.js

@@ -22,7 +22,7 @@ import { colorStyles, sizeByLevelStyles, sizeByTypeStyles, defaultWeightByTypeSt
 import { useTruncation } from "../Text/useTruncation.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-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";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
 })));
@@ -110,8 +110,8 @@ export function Heading({
   const inlineStyle = maxLines > 1 ? {
     WebkitLineClamp: maxLines
   } : undefined;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Component, {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV(Component, {
       ref: mergeRefs(ref, truncation.ref, headingRef),
       ...mergeProps(themeProps('heading', {
         level,
@@ -141,17 +141,17 @@ export function Heading({
       ...ariaProps,
       ...props,
       children: children
-    }), tooltipEnabled && /*#__PURE__*/_jsx(Suspense, {
+    }, void 0, false), tooltipEnabled && /*#__PURE__*/_jsxDEV(Suspense, {
       fallback: null,
-      children: /*#__PURE__*/_jsx(LazyXDSTooltip, {
+      children: /*#__PURE__*/_jsxDEV(LazyXDSTooltip, {
         anchorRef: headingRef,
-        content: /*#__PURE__*/_jsx("span", {
+        content: /*#__PURE__*/_jsxDEV("span", {
           ...stylex.props(truncationTooltipStyles.content),
           children: truncation.fullText
-        }),
+        }, void 0, false),
         placement: tooltipPlacement
-      })
-    })]
-  });
+      }, void 0, false)
+    }, void 0, false)]
+  }, void 0, true);
 }
 Heading.displayName = 'Heading';

package/dist/HoverCard/HoverCard.js

@@ -20,7 +20,7 @@ import * as stylex from '@stylexjs/stylex';
 import { useHoverCard } from "./useHoverCard.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
-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";
 /**
  * Check if children are text-only (no React elements)
  */
@@ -145,8 +145,8 @@ export function HoverCard({
 
   // For text-only children: use inline span with ref on wrapper
   if (textOnly) {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("span", {
+    return /*#__PURE__*/_jsxDEV(_Fragment, {
+      children: [/*#__PURE__*/_jsxDEV("span", {
         ref: hoverCard.ref,
         tabIndex: 0,
         "aria-describedby": hoverCard.describedBy,
@@ -159,19 +159,19 @@ export function HoverCard({
           }
         }[!!showHoverIndication << 0],
         children: children
-      }), renderedHoverCard]
-    });
+      }, void 0, false), renderedHoverCard]
+    }, void 0, true);
   }
 
   // For element children: use inline-safe display:contents, ref on first child
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("span", {
+  return /*#__PURE__*/_jsxDEV(_Fragment, {
+    children: [/*#__PURE__*/_jsxDEV("span", {
       ref: wrapperRef,
       ...{
         className: "xjp7ctv"
       },
       children: children
-    }), renderedHoverCard]
-  });
+    }, void 0, false), renderedHoverCard]
+  }, void 0, true);
 }
 HoverCard.displayName = 'HoverCard';

package/dist/HoverCard/useHoverCard.d.ts

@@ -103,8 +103,12 @@ export interface HoverCardReturn {
     /**
      * Render function for hover card content.
      * Returns anchor-positioned popover element.
+     *
+     * `positioning` is excluded: the hover card always derives its position
+     * from placement/alignment, so accepting the custom opt-out here would be
+     * a silent no-op.
      */
-    renderHoverCard: (children: ReactNode, props?: ContextRenderProps) => ReactNode;
+    renderHoverCard: (children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode;
     /**
      * Imperatively show the hover card (bypassing hover delay).
      */