@usefragments/ui 1.5.4 → 1.6.0

package/dist/components/Grid/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const layoutSpacing = require("../../utils/layout-spacing.cjs");
 const Grid_module = require("./Grid.module.scss.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -23,96 +24,75 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 function isResponsiveColumns(columns) {
   return typeof columns === "object" && columns !== null;
 }
-const gapClasses = {
-  none: Grid_module.default.gapNone,
-  xs: Grid_module.default.gapXs,
-  sm: Grid_module.default.gapSm,
-  md: Grid_module.default.gapMd,
-  lg: Grid_module.default.gapLg,
-  xl: Grid_module.default.gapXl
-};
 const paddingClasses = {
   none: Grid_module.default.paddingNone,
   sm: Grid_module.default.paddingSm,
   md: Grid_module.default.paddingMd,
   lg: Grid_module.default.paddingLg
 };
-const Grid = React__namespace.forwardRef(
-  function Grid2({
-    children,
-    columns = 1,
-    minChildWidth,
-    gap = "md",
-    alignItems,
-    justifyItems,
-    padding = "none",
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    let columnsClass;
-    let inlineStyle;
-    if (columns === "auto") {
-      columnsClass = Grid_module.default.columnsAuto;
-      if (minChildWidth) {
-        inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
-      }
-    } else if (isResponsiveColumns(columns)) {
-      columnsClass = Grid_module.default.columnsResponsive;
-      const vars = {};
-      if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
-      if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
-      if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
-      if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
-      if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
-      inlineStyle = vars;
-    } else {
-      columnsClass = Grid_module.default[`columns${columns}`];
+const Grid = React__namespace.forwardRef(function Grid2({
+  children,
+  columns = 1,
+  minChildWidth,
+  gap = "md",
+  alignItems,
+  justifyItems,
+  padding = "none",
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  let columnsClass;
+  let inlineStyle;
+  if (columns === "auto") {
+    columnsClass = Grid_module.default.columnsAuto;
+    if (minChildWidth) {
+      inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
     }
-    if (typeof gap === "number") {
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` };
-    }
-    const classes = [
-      Grid_module.default.grid,
-      columnsClass,
-      typeof gap === "number" ? void 0 : gapClasses[gap],
-      paddingClasses[padding],
-      alignItems && Grid_module.default[`align${cap(alignItems)}`],
-      justifyItems && Grid_module.default[`justify${cap(justifyItems)}`],
-      className
-    ].filter(Boolean).join(" ");
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+  } else if (isResponsiveColumns(columns)) {
+    columnsClass = Grid_module.default.columnsResponsive;
+    const vars = {};
+    if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
+    if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
+    if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
+    if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
+    if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
+    inlineStyle = vars;
+  } else {
+    columnsClass = Grid_module.default[`columns${columns}`];
   }
-);
+  inlineStyle = {
+    ...inlineStyle,
+    "--_fui-grid-gap": layoutSpacing.resolveLayoutGap(gap)
+  };
+  const classes = [
+    Grid_module.default.grid,
+    columnsClass,
+    paddingClasses[padding],
+    alignItems && Grid_module.default[`align${cap(alignItems)}`],
+    justifyItems && Grid_module.default[`justify${cap(justifyItems)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+});
 const subgridClasses = {
   rows: Grid_module.default.subgridRows,
   columns: Grid_module.default.subgridColumns,
   both: Grid_module.default.subgridBoth
 };
-const GridItem = React__namespace.forwardRef(
-  function GridItem2({
-    children,
-    colSpan,
-    rowSpan,
-    alignSelf,
-    subgrid,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
-    const classes = [
-      Grid_module.default.item,
-      colSpan && (colSpan === "full" ? Grid_module.default.colSpanFull : Grid_module.default[`colSpan${colSpan}`]),
-      rowSpan && Grid_module.default[`rowSpan${rowSpan}`],
-      alignSelf && Grid_module.default[`selfAlign${cap(alignSelf)}`],
-      subgridClass,
-      className
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style, children });
-  }
-);
+const GridItem = React__namespace.forwardRef(function GridItem2({ children, colSpan, rowSpan, alignSelf, subgrid, className, style, ...htmlProps }, ref) {
+  const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+  const classes = [
+    Grid_module.default.item,
+    colSpan && (colSpan === "full" ? Grid_module.default.colSpanFull : Grid_module.default[`colSpan${colSpan}`]),
+    rowSpan && Grid_module.default[`rowSpan${rowSpan}`],
+    alignSelf && Grid_module.default[`selfAlign${cap(alignSelf)}`],
+    subgridClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, ref, className: classes, style, children });
+});
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }

package/dist/components/Grid/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 type ColumnCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 type GapScale = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 /** Responsive value — either a single value or per-breakpoint overrides */
@@ -18,7 +18,7 @@ export interface ResponsiveColumns {
  * CSS Grid layout component with responsive columns.
  * @see https://usefragments.com/components/grid
  */
-export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'style' | 'className'> {
+export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "style" | "className"> {
     children?: React.ReactNode;
     /**
      * Number of columns.
@@ -26,30 +26,30 @@ export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
      * - An object for responsive columns: `{ base: 1, md: 2, lg: 3 }`
      * - `"auto"` for responsive auto-fill based on minChildWidth
      */
-    columns?: ColumnCount | ResponsiveColumns | 'auto';
+    columns?: ColumnCount | ResponsiveColumns | "auto";
     /** Minimum width for auto-fill columns (only used with columns="auto") */
     minChildWidth?: string;
     /** Gap between grid items. Accepts string tokens or numbers (1-8) mapping to the spacing scale */
-    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | GapScale;
+    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | GapScale;
     /** Vertical alignment of items within their cells */
-    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    alignItems?: "start" | "center" | "end" | "stretch";
     /** Horizontal alignment of items within their cells */
-    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    justifyItems?: "start" | "center" | "end" | "stretch";
     /** Padding inside the grid container */
-    padding?: 'none' | 'sm' | 'md' | 'lg';
+    padding?: "none" | "sm" | "md" | "lg";
     /** Additional class name */
     className?: string;
     /** Inline styles */
     style?: React.CSSProperties;
 }
-export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "className"> {
     children?: React.ReactNode;
     /** Number of columns this item spans */
-    colSpan?: ColumnCount | 'full';
+    colSpan?: ColumnCount | "full";
     /** Number of rows this item spans */
     rowSpan?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Override alignment for this item */
-    alignSelf?: 'start' | 'center' | 'end' | 'stretch';
+    alignSelf?: "start" | "center" | "end" | "stretch";
     /**
      * Enable CSS subgrid so children align to parent grid tracks.
      * - `true` or `"rows"` — children align to parent row tracks
@@ -57,7 +57,7 @@ export interface GridItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * - `"both"` — children align to both row and column tracks
      * Requires the item to span multiple rows/columns for visible effect.
      */
-    subgrid?: boolean | 'rows' | 'columns' | 'both';
+    subgrid?: boolean | "rows" | "columns" | "both";
     /** Additional class name */
     className?: string;
     style?: React.CSSProperties;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9C,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC/G,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,MAAM,CAAC;IACnD,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kGAAkG;IAClG,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC;IAC3D,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACtD,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACzG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACnD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgCD,eAAO,MAAM,IAAI,EA+DZ,aAAa,CAAC;AAYnB,QAAA,MAAM,QAAQ,sFAmCb,CAAC;AAcF,UAAU,aACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACxF,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACpE,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9C,2EAA2E;AAC3E,MAAM,WAAW,iBAAiB;IAChC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,cAAc;IACd,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,OAAO,GAAG,WAAW,CACnC;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,iBAAiB,GAAG,MAAM,CAAC;IACnD,0EAA0E;IAC1E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kGAAkG;IAClG,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC;IAC3D,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACtD,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,WAAW,CACzB;IACC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wCAAwC;IACxC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAChC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACnD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAqBD,eAAO,MAAM,IAAI,EA4DX,aAAa,CAAC;AAYpB,QAAA,MAAM,QAAQ,sFAsBZ,CAAC;AAcH,UAAU,aAAc,SAAQ,KAAK,CAAC,yBAAyB,CAC7D,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAChD;IACC,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB"}

package/dist/components/Grid/index.js

@@ -1,99 +1,79 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { resolveLayoutGap } from "../../utils/layout-spacing.js";
 import styles from "./Grid.module.scss.js";
 function isResponsiveColumns(columns) {
   return typeof columns === "object" && columns !== null;
 }
-const gapClasses = {
-  none: styles.gapNone,
-  xs: styles.gapXs,
-  sm: styles.gapSm,
-  md: styles.gapMd,
-  lg: styles.gapLg,
-  xl: styles.gapXl
-};
 const paddingClasses = {
   none: styles.paddingNone,
   sm: styles.paddingSm,
   md: styles.paddingMd,
   lg: styles.paddingLg
 };
-const Grid = React.forwardRef(
-  function Grid2({
-    children,
-    columns = 1,
-    minChildWidth,
-    gap = "md",
-    alignItems,
-    justifyItems,
-    padding = "none",
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    let columnsClass;
-    let inlineStyle;
-    if (columns === "auto") {
-      columnsClass = styles.columnsAuto;
-      if (minChildWidth) {
-        inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
-      }
-    } else if (isResponsiveColumns(columns)) {
-      columnsClass = styles.columnsResponsive;
-      const vars = {};
-      if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
-      if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
-      if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
-      if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
-      if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
-      inlineStyle = vars;
-    } else {
-      columnsClass = styles[`columns${columns}`];
-    }
-    if (typeof gap === "number") {
-      inlineStyle = { ...inlineStyle, gap: `var(--fui-space-${gap})` };
+const Grid = React.forwardRef(function Grid2({
+  children,
+  columns = 1,
+  minChildWidth,
+  gap = "md",
+  alignItems,
+  justifyItems,
+  padding = "none",
+  className,
+  style,
+  ...htmlProps
+}, ref) {
+  let columnsClass;
+  let inlineStyle;
+  if (columns === "auto") {
+    columnsClass = styles.columnsAuto;
+    if (minChildWidth) {
+      inlineStyle = { "--fui-grid-min-child-width": minChildWidth };
     }
-    const classes = [
-      styles.grid,
-      columnsClass,
-      typeof gap === "number" ? void 0 : gapClasses[gap],
-      paddingClasses[padding],
-      alignItems && styles[`align${cap(alignItems)}`],
-      justifyItems && styles[`justify${cap(justifyItems)}`],
-      className
-    ].filter(Boolean).join(" ");
-    const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
-    return /* @__PURE__ */ jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+  } else if (isResponsiveColumns(columns)) {
+    columnsClass = styles.columnsResponsive;
+    const vars = {};
+    if (columns.base) vars["--fui-grid-cols"] = String(columns.base);
+    if (columns.sm) vars["--fui-grid-cols-sm"] = String(columns.sm);
+    if (columns.md) vars["--fui-grid-cols-md"] = String(columns.md);
+    if (columns.lg) vars["--fui-grid-cols-lg"] = String(columns.lg);
+    if (columns.xl) vars["--fui-grid-cols-xl"] = String(columns.xl);
+    inlineStyle = vars;
+  } else {
+    columnsClass = styles[`columns${columns}`];
   }
-);
+  inlineStyle = {
+    ...inlineStyle,
+    "--_fui-grid-gap": resolveLayoutGap(gap)
+  };
+  const classes = [
+    styles.grid,
+    columnsClass,
+    paddingClasses[padding],
+    alignItems && styles[`align${cap(alignItems)}`],
+    justifyItems && styles[`justify${cap(justifyItems)}`],
+    className
+  ].filter(Boolean).join(" ");
+  const mergedStyle = inlineStyle ? { ...inlineStyle, ...style } : style;
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, ref, className: classes, style: mergedStyle, children });
+});
 const subgridClasses = {
   rows: styles.subgridRows,
   columns: styles.subgridColumns,
   both: styles.subgridBoth
 };
-const GridItem = React.forwardRef(
-  function GridItem2({
-    children,
-    colSpan,
-    rowSpan,
-    alignSelf,
-    subgrid,
-    className,
-    style,
-    ...htmlProps
-  }, ref) {
-    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
-    const classes = [
-      styles.item,
-      colSpan && (colSpan === "full" ? styles.colSpanFull : styles[`colSpan${colSpan}`]),
-      rowSpan && styles[`rowSpan${rowSpan}`],
-      alignSelf && styles[`selfAlign${cap(alignSelf)}`],
-      subgridClass,
-      className
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx("div", { ...htmlProps, ref, className: classes, style, children });
-  }
-);
+const GridItem = React.forwardRef(function GridItem2({ children, colSpan, rowSpan, alignSelf, subgrid, className, style, ...htmlProps }, ref) {
+  const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+  const classes = [
+    styles.item,
+    colSpan && (colSpan === "full" ? styles.colSpanFull : styles[`colSpan${colSpan}`]),
+    rowSpan && styles[`rowSpan${rowSpan}`],
+    alignSelf && styles[`selfAlign${cap(alignSelf)}`],
+    subgridClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, ref, className: classes, style, children });
+});
 function cap(s) {
   return s.charAt(0).toUpperCase() + s.slice(1);
 }

package/dist/components/Header/Header.module.scss.cjs

@@ -1,38 +1,38 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const header = "_header_hge7p_1";
-const fixed = "_fixed_hge7p_13";
-const sticky = "_sticky_hge7p_20";
-const elevatedOnScroll = "_elevatedOnScroll_hge7p_25";
-const scrolled = "_scrolled_hge7p_30";
-const containerPage = "_containerPage_hge7p_34";
-const container = "_container_hge7p_34";
-const navCentered = "_navCentered_hge7p_55";
-const nav = "_nav_hge7p_55";
-const brand = "_brand_hge7p_67";
-const navList = "_navList_hge7p_95";
-const navItem = "_navItem_hge7p_104";
-const navItemActive = "_navItemActive_hge7p_152";
-const navMenuTrigger = "_navMenuTrigger_hge7p_166";
-const navMenuChevron = "_navMenuChevron_hge7p_171";
-const navMenuPositioner = "_navMenuPositioner_hge7p_179";
-const navMenuPopup = "_navMenuPopup_hge7p_184";
-const navMenuItem = "_navMenuItem_hge7p_205";
-const navMenuItemActive = "_navMenuItemActive_hge7p_241";
-const search = "_search_hge7p_263";
-const searchExpandable = "_searchExpandable_hge7p_273";
-const actions = "_actions_hge7p_277";
-const trigger = "_trigger_hge7p_284";
-const spacer = "_spacer_hge7p_326";
-const mobileNavBackdrop = "_mobileNavBackdrop_hge7p_330";
-const mobileNavDrawer = "_mobileNavDrawer_hge7p_338";
-const mobileNavHeader = "_mobileNavHeader_hge7p_352";
-const mobileNavClose = "_mobileNavClose_hge7p_360";
-const mobileNavBody = "_mobileNavBody_hge7p_398";
-const mobileNavLink = "_mobileNavLink_hge7p_404";
-const mobileNavLinkActive = "_mobileNavLinkActive_hge7p_438";
-const mobileNavActions = "_mobileNavActions_hge7p_443";
-const skipLink = "_skipLink_hge7p_472";
+const header = "_header_1lu4k_1";
+const fixed = "_fixed_1lu4k_28";
+const sticky = "_sticky_1lu4k_35";
+const elevatedOnScroll = "_elevatedOnScroll_1lu4k_40";
+const scrolled = "_scrolled_1lu4k_45";
+const containerPage = "_containerPage_1lu4k_49";
+const container = "_container_1lu4k_49";
+const navCentered = "_navCentered_1lu4k_70";
+const nav = "_nav_1lu4k_70";
+const brand = "_brand_1lu4k_82";
+const navList = "_navList_1lu4k_110";
+const navItem = "_navItem_1lu4k_119";
+const navItemActive = "_navItemActive_1lu4k_180";
+const navMenuTrigger = "_navMenuTrigger_1lu4k_190";
+const navMenuChevron = "_navMenuChevron_1lu4k_195";
+const navMenuPositioner = "_navMenuPositioner_1lu4k_203";
+const navMenuPopup = "_navMenuPopup_1lu4k_208";
+const navMenuItem = "_navMenuItem_1lu4k_254";
+const navMenuItemActive = "_navMenuItemActive_1lu4k_294";
+const search = "_search_1lu4k_316";
+const searchExpandable = "_searchExpandable_1lu4k_326";
+const actions = "_actions_1lu4k_330";
+const trigger = "_trigger_1lu4k_337";
+const spacer = "_spacer_1lu4k_403";
+const mobileNavBackdrop = "_mobileNavBackdrop_1lu4k_407";
+const mobileNavDrawer = "_mobileNavDrawer_1lu4k_415";
+const mobileNavHeader = "_mobileNavHeader_1lu4k_429";
+const mobileNavClose = "_mobileNavClose_1lu4k_437";
+const mobileNavBody = "_mobileNavBody_1lu4k_498";
+const mobileNavLink = "_mobileNavLink_1lu4k_504";
+const mobileNavLinkActive = "_mobileNavLinkActive_1lu4k_555";
+const mobileNavActions = "_mobileNavActions_1lu4k_560";
+const skipLink = "_skipLink_1lu4k_589";
 const styles = {
   header,
   fixed,

package/dist/components/Header/Header.module.scss.js

@@ -1,36 +1,36 @@
-const header = "_header_hge7p_1";
-const fixed = "_fixed_hge7p_13";
-const sticky = "_sticky_hge7p_20";
-const elevatedOnScroll = "_elevatedOnScroll_hge7p_25";
-const scrolled = "_scrolled_hge7p_30";
-const containerPage = "_containerPage_hge7p_34";
-const container = "_container_hge7p_34";
-const navCentered = "_navCentered_hge7p_55";
-const nav = "_nav_hge7p_55";
-const brand = "_brand_hge7p_67";
-const navList = "_navList_hge7p_95";
-const navItem = "_navItem_hge7p_104";
-const navItemActive = "_navItemActive_hge7p_152";
-const navMenuTrigger = "_navMenuTrigger_hge7p_166";
-const navMenuChevron = "_navMenuChevron_hge7p_171";
-const navMenuPositioner = "_navMenuPositioner_hge7p_179";
-const navMenuPopup = "_navMenuPopup_hge7p_184";
-const navMenuItem = "_navMenuItem_hge7p_205";
-const navMenuItemActive = "_navMenuItemActive_hge7p_241";
-const search = "_search_hge7p_263";
-const searchExpandable = "_searchExpandable_hge7p_273";
-const actions = "_actions_hge7p_277";
-const trigger = "_trigger_hge7p_284";
-const spacer = "_spacer_hge7p_326";
-const mobileNavBackdrop = "_mobileNavBackdrop_hge7p_330";
-const mobileNavDrawer = "_mobileNavDrawer_hge7p_338";
-const mobileNavHeader = "_mobileNavHeader_hge7p_352";
-const mobileNavClose = "_mobileNavClose_hge7p_360";
-const mobileNavBody = "_mobileNavBody_hge7p_398";
-const mobileNavLink = "_mobileNavLink_hge7p_404";
-const mobileNavLinkActive = "_mobileNavLinkActive_hge7p_438";
-const mobileNavActions = "_mobileNavActions_hge7p_443";
-const skipLink = "_skipLink_hge7p_472";
+const header = "_header_1lu4k_1";
+const fixed = "_fixed_1lu4k_28";
+const sticky = "_sticky_1lu4k_35";
+const elevatedOnScroll = "_elevatedOnScroll_1lu4k_40";
+const scrolled = "_scrolled_1lu4k_45";
+const containerPage = "_containerPage_1lu4k_49";
+const container = "_container_1lu4k_49";
+const navCentered = "_navCentered_1lu4k_70";
+const nav = "_nav_1lu4k_70";
+const brand = "_brand_1lu4k_82";
+const navList = "_navList_1lu4k_110";
+const navItem = "_navItem_1lu4k_119";
+const navItemActive = "_navItemActive_1lu4k_180";
+const navMenuTrigger = "_navMenuTrigger_1lu4k_190";
+const navMenuChevron = "_navMenuChevron_1lu4k_195";
+const navMenuPositioner = "_navMenuPositioner_1lu4k_203";
+const navMenuPopup = "_navMenuPopup_1lu4k_208";
+const navMenuItem = "_navMenuItem_1lu4k_254";
+const navMenuItemActive = "_navMenuItemActive_1lu4k_294";
+const search = "_search_1lu4k_316";
+const searchExpandable = "_searchExpandable_1lu4k_326";
+const actions = "_actions_1lu4k_330";
+const trigger = "_trigger_1lu4k_337";
+const spacer = "_spacer_1lu4k_403";
+const mobileNavBackdrop = "_mobileNavBackdrop_1lu4k_407";
+const mobileNavDrawer = "_mobileNavDrawer_1lu4k_415";
+const mobileNavHeader = "_mobileNavHeader_1lu4k_429";
+const mobileNavClose = "_mobileNavClose_1lu4k_437";
+const mobileNavBody = "_mobileNavBody_1lu4k_498";
+const mobileNavLink = "_mobileNavLink_1lu4k_504";
+const mobileNavLinkActive = "_mobileNavLinkActive_1lu4k_555";
+const mobileNavActions = "_mobileNavActions_1lu4k_560";
+const skipLink = "_skipLink_1lu4k_589";
 const styles = {
   header,
   fixed,

package/dist/components/Header/index.cjs

@@ -10,6 +10,7 @@ const a11y = require("../../utils/a11y.cjs");
 const index$1 = require("../ScrollArea/index.cjs");
 const Header_module = require("./Header.module.scss.cjs");
 const index = require("../Sidebar/index.cjs");
+const popup = require("../../recipes/popup.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -261,7 +262,7 @@ function HeaderNavMenu({
       label,
       chevronIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Header_module.default.navMenuChevron, "aria-hidden": true, children: chevronIcon }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 12, className: Header_module.default.navMenuChevron, "aria-hidden": true })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: Header_module.default.navMenuPositioner, children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Popup, { className: Header_module.default.navMenuPopup, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Positioner, { side: "bottom", align: "start", sideOffset: popup.POPUP_OFFSET_PX, className: Header_module.default.navMenuPositioner, children: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Popup, { className: Header_module.default.navMenuPopup, children }) }) })
   ] }) });
 }
 function HeaderNavMenuItem({

package/dist/components/Header/index.d.ts.map

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

package/dist/components/Header/index.js

@@ -8,6 +8,7 @@ import { useFocusTrap } from "../../utils/a11y.js";
 import { ScrollArea } from "../ScrollArea/index.js";
 import styles from "./Header.module.scss.js";
 import { useSidebar } from "../Sidebar/index.js";
+import { POPUP_OFFSET_PX } from "../../recipes/popup.js";
 const HeaderContext = React.createContext(null);
 function useHeaderContext() {
   const ctx = React.useContext(HeaderContext);
@@ -242,7 +243,7 @@ function HeaderNavMenu({
       label,
       chevronIcon ? /* @__PURE__ */ jsx("span", { className: styles.navMenuChevron, "aria-hidden": true, children: chevronIcon }) : /* @__PURE__ */ jsx(CaretDown, { size: 12, className: styles.navMenuChevron, "aria-hidden": true })
     ] }),
-    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: styles.navMenuPositioner, children: /* @__PURE__ */ jsx(Menu.Popup, { className: styles.navMenuPopup, children }) }) })
+    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { side: "bottom", align: "start", sideOffset: POPUP_OFFSET_PX, className: styles.navMenuPositioner, children: /* @__PURE__ */ jsx(Menu.Popup, { className: styles.navMenuPopup, children }) }) })
   ] }) });
 }
 function HeaderNavMenuItem({