@postenbring/hedwig-react 0.0.81 → 0.0.83

package/dist/index.mjs

@@ -6,38 +6,35 @@ import {
 import "./chunk-3D2MWIEX.mjs";
 import {
   WarningBanner
-} from "./chunk-XC3UHH2U.mjs";
+} from "./chunk-3WVRY6CC.mjs";
+import "./chunk-7YWW46R3.mjs";
 import {
-  TabsComponent
-} from "./chunk-IJAX6APL.mjs";
+  Tabs
+} from "./chunk-QZZIOBF4.mjs";
 import {
   TabsList,
   TabsTab
-} from "./chunk-4WQWU5TL.mjs";
-import "./chunk-3MQKXNZ6.mjs";
+} from "./chunk-AXQCREUJ.mjs";
 import {
   TabsContent,
   TabsContents
 } from "./chunk-CCVZAHYA.mjs";
+import "./chunk-RC76SXBP.mjs";
 import {
-  MessageComponent
-} from "./chunk-IKJJWKXM.mjs";
-import {
+  Message,
   MessageDescription,
   MessageTitle
-} from "./chunk-TQDUBRCZ.mjs";
-import {
-  ModalComponent
-} from "./chunk-CYEYGPRH.mjs";
+} from "./chunk-SQ63E7KM.mjs";
+import "./chunk-FYFJ75NX.mjs";
 import {
+  Modal,
   ModalContent,
   ModalFooter,
   ModalHeader
-} from "./chunk-XUWZ4HGD.mjs";
-import {
-  NavbarComponent
-} from "./chunk-V6UKKHKD.mjs";
+} from "./chunk-OGZ2NBMH.mjs";
+import "./chunk-H3E546OT.mjs";
 import {
+  Navbar,
   NavbarButtonItem,
   NavbarItem,
   NavbarItemIcon,
@@ -45,17 +42,15 @@ import {
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarNavigation
-} from "./chunk-GSJPTZT3.mjs";
+} from "./chunk-FC4CEI2V.mjs";
 import {
   NavbarExpandableMenu,
   NavbarExpandableMenuContent,
   NavbarExpandableMenuTrigger,
   useNavbarExpendableMenuContext
-} from "./chunk-6R7AXKBR.mjs";
+} from "./chunk-35TXKAUH.mjs";
 import "./chunk-MOU6WBT2.mjs";
-import {
-  FooterComponent
-} from "./chunk-3NDUE23B.mjs";
+import "./chunk-HQVL3ZJ2.mjs";
 import "./chunk-XFKD6EEJ.mjs";
 import "./chunk-AGZHQDCQ.mjs";
 import {
@@ -77,7 +72,7 @@ import "./chunk-YJOOSTJC.mjs";
 import "./chunk-TDLSHJ4Z.mjs";
 import {
   DatePicker
-} from "./chunk-F2C3KZFX.mjs";
+} from "./chunk-BVPSZ3JI.mjs";
 import "./chunk-7LPYJC6S.mjs";
 import {
   Input
@@ -100,12 +95,11 @@ import "./chunk-BVG5VSZK.mjs";
 import {
   Container
 } from "./chunk-USXU6ULZ.mjs";
+import "./chunk-G65EYZFQ.mjs";
 import {
-  GridComponent
-} from "./chunk-722MZPXO.mjs";
-import {
+  Grid,
   GridItem
-} from "./chunk-ES6ISHOV.mjs";
+} from "./chunk-UP3M3NEZ.mjs";
 import "./chunk-ZQHLYAJU.mjs";
 import {
   HStack,
@@ -118,10 +112,9 @@ import {
 } from "./chunk-MJ2DZH3N.mjs";
 import "./chunk-6QV3OV66.mjs";
 import "./chunk-ISAHCU7C.mjs";
+import "./chunk-ARHJZUZG.mjs";
 import {
-  CardComponent
-} from "./chunk-PT5H3QV6.mjs";
-import {
+  Card,
   CardBody,
   CardBodyAction,
   CardBodyActionArrow,
@@ -131,17 +124,18 @@ import {
   CardBodyHeaderTitle,
   CardMedia,
   CardMediaImg
-} from "./chunk-CIHZDFSQ.mjs";
+} from "./chunk-NU6OSFAU.mjs";
 import "./chunk-2YL2MVWN.mjs";
 import {
   DescriptionList
 } from "./chunk-HMATZX4A.mjs";
 import {
+  Footer,
   FooterButtonLink,
   FooterLinkSection,
   FooterLinkSections,
   FooterLogo
-} from "./chunk-7JRS4WEB.mjs";
+} from "./chunk-C34HEQXO.mjs";
 import {
   LinkList
 } from "./chunk-COEZA7WA.mjs";
@@ -154,50 +148,45 @@ import {
   PrimaryButton,
   SecondaryButton
 } from "./chunk-KEKPEN2C.mjs";
+import "./chunk-ZKMFJZSH.mjs";
 import {
-  AccordionComponent
-} from "./chunk-3ZFEUABU.mjs";
-import {
-  AccordionContent
-} from "./chunk-GLAEI3SD.mjs";
-import {
-  AccordionHeader
-} from "./chunk-3EFAPJ3H.mjs";
+  Accordion
+} from "./chunk-M3Y3XOGC.mjs";
 import {
   AccordionItem
 } from "./chunk-A2H2LAII.mjs";
-import "./chunk-KPGSRU4I.mjs";
+import "./chunk-K6PP3ACJ.mjs";
+import {
+  DarkBadge,
+  LighterBadge,
+  WarningBadge,
+  WhiteBadge
+} from "./chunk-P6KBFRF4.mjs";
 import {
   Breadcrumbs
 } from "./chunk-YSFZCRWS.mjs";
-import "./chunk-JKCVB5TR.mjs";
-import {
-  StyledHtml
-} from "./chunk-I3ZIMS72.mjs";
 import "./chunk-3LYJRAOC.mjs";
 import {
   Table
 } from "./chunk-EMI7NAO2.mjs";
 import "./chunk-KQITCS3U.mjs";
-import "./chunk-DZNH5JHY.mjs";
-import "./chunk-K6PP3ACJ.mjs";
+import "./chunk-CYDWEPFL.mjs";
 import {
-  DarkBadge,
-  LighterBadge,
-  WarningBadge,
-  WhiteBadge
-} from "./chunk-P6KBFRF4.mjs";
+  AccordionContent
+} from "./chunk-GLAEI3SD.mjs";
+import {
+  AccordionHeader
+} from "./chunk-3EFAPJ3H.mjs";
 import "./chunk-V3PAFMK5.mjs";
 import "./chunk-CFAH2LID.mjs";
 import {
   HelpText
-} from "./chunk-PLXB3TNA.mjs";
-import {
-  BoxComponent
-} from "./chunk-3NL3TOZF.mjs";
+} from "./chunk-D7QPJIUZ.mjs";
+import "./chunk-BCFV6VOE.mjs";
 import {
+  Box,
   BoxCloseButton
-} from "./chunk-ENKVTAJB.mjs";
+} from "./chunk-AJWSQEDP.mjs";
 import "./chunk-F4STR6SD.mjs";
 import "./chunk-NE6W2PCD.mjs";
 import "./chunk-MSFHJVHD.mjs";
@@ -206,8 +195,13 @@ import {
 } from "./chunk-UB2R7TCG.mjs";
 import {
   AutoAnimateHeight
-} from "./chunk-67TP3E2D.mjs";
-import "./chunk-DEX36MFK.mjs";
+} from "./chunk-6FBPKLWB.mjs";
+import {
+  focusTrap,
+  useHydrated,
+  useMergeRefs,
+  useResize
+} from "./chunk-TDXU2IC6.mjs";
 import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton
@@ -216,21 +210,25 @@ import "./chunk-TJH5QJMS.mjs";
 import {
   StepIndicator
 } from "./chunk-5UJ3LEKK.mjs";
+import "./chunk-JKCVB5TR.mjs";
+import {
+  StyledHtml
+} from "./chunk-I3ZIMS72.mjs";
 import "./chunk-R4SQKVDQ.mjs";
 
 // src/index.tsx
 import "@postenbring/hedwig-css/dist/index.css";
 export {
-  AccordionComponent as Accordion,
+  Accordion,
   AccordionContent,
   AccordionHeader,
   AccordionItem,
   AutoAnimateHeight,
   LighterBadge as Badge,
-  BoxComponent as Box,
+  Box,
   BoxCloseButton,
   Breadcrumbs,
-  CardComponent as Card,
+  Card,
   CardBody,
   CardBodyAction,
   CardBodyActionArrow,
@@ -247,26 +245,26 @@ export {
   DescriptionList,
   ErrorMessage,
   Fieldset,
-  FooterComponent as Footer,
+  Footer,
   FooterButtonLink,
   FooterLinkSection,
   FooterLinkSections,
   FooterLogo,
-  GridComponent as Grid,
+  Grid,
   GridItem,
   HStack,
   HelpText,
   Input,
   Link,
   LinkList,
-  MessageComponent as Message,
+  Message,
   MessageDescription,
   MessageTitle,
-  ModalComponent as Modal,
+  Modal,
   ModalContent,
   ModalFooter,
   ModalHeader,
-  NavbarComponent as Navbar,
+  Navbar,
   NavbarButtonItem,
   NavbarExpandableMenu,
   NavbarExpandableMenuContent,
@@ -289,7 +287,7 @@ export {
   StepIndicator,
   StyledHtml,
   Table,
-  TabsComponent as Tabs,
+  Tabs,
   TabsContent,
   TabsContents,
   TabsList,
@@ -301,8 +299,12 @@ export {
   WarningBadge,
   WarningBanner,
   WhiteBadge,
+  focusTrap,
   useFieldsetContext,
+  useHydrated,
+  useMergeRefs,
   useNavbarExpendableMenuContext,
-  useRadioGroupContext
+  useRadioGroupContext,
+  useResize
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["/**\n * Import the hedwig css file, so the consumers don't have to. Plug and play.\n *\n * NOTE: Importing the full path, not just the package name.\n * For some reason vite did not include the css during development when this file only imported the package name.\n *\n * Consumers using the `@postenbring/hedwig-css` package directly should only need to import the package without a path.\n */\nimport \"@postenbring/hedwig-css/dist/index.css\";\n\nexport * from \"./index-no-css\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,OAAO;","names":[]}

package/dist/layout/container/container.d.ts

@@ -1,2 +1,23 @@
-export { ContainerProps_alias_3 as ContainerProps } from '../../_tsup-dts-rollup';
-export { Container_alias_3 as Container } from '../../_tsup-dts-rollup';
+import type { HTMLAttributes, ReactNode } from "react";
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "default" | "slim";
+    children: ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Convienence prop to change the rendered element.
+     *
+     * Use {@link ContainerProps.asChild} if you need more control of the rendered element.
+     */
+    as?: "div" | "section" | "aside" | "main" | "article" | "header" | "footer";
+}
+/**
+ * Container is a layout component that is used to wrap content.
+ * It ensures a max-width and minimum spacing on the sides.
+ */
+export declare const Container: import("react").ForwardRefExoticComponent<ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=container.d.ts.map

package/dist/layout/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/layout/container/container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC7E;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAiBrB,CAAC"}

package/dist/layout/grid/grid.d.ts

@@ -1,4 +1,101 @@
-export { GridProps_alias_3 as GridProps } from '../../_tsup-dts-rollup';
-export { Grid_alias_3 as Grid } from '../../_tsup-dts-rollup';
-export { GridItemProps_alias_3 as GridItemProps } from '../../_tsup-dts-rollup';
-export { GridItem_alias_3 as GridItem } from '../../_tsup-dts-rollup';
+import { forwardRef } from "react";
+import { type ResponsiveProp } from "../responsive";
+import { type SpacingSizes, type ResponsiveSpacingSizes } from "../spacing";
+export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Column span for the grid item
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center the grid item horizontally
+     *
+     * Offsets the start position of the grid item relative to it's span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+}
+/**
+ * 🚧 Grid.Item
+ *
+ * Use as the direct child of a `Grid` to override `span` and `center` for individual items.
+ */
+export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Space between grid items. Both horizontal and vertical.
+     *
+     * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.
+     *
+     * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.
+     *
+     * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.
+     */
+    gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Space between grid items horizontally
+     */
+    gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Space between grid items vertically
+     */
+    gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;
+    /**
+     * Column span for the grid items
+     *
+     * `default` is `12`
+     */
+    span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;
+    /**
+     * Center grid items horizontally
+     *
+     * Offsets the start position of the grid items relative to their span so that it appears centered.
+     *
+     * assumes a span of 2, 4, 6, 8, or 10
+     *
+     * a span of `12` is 100% width and centering has no effect
+     *
+     * `default` is `false`
+     */
+    center?: ResponsiveProp<boolean>;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+/**
+ * A simple opionated abstraction over CSS Grid.
+ *
+ * The grid is always a 12 column grid.
+ *
+ * @example
+ * ```tsx
+ * <Grid gap="12-16" span={{ small: 6 }}>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>
+ *   <div>6/12</div>
+ *   <div>6/12</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: GridType;
+type GridType = ReturnType<typeof forwardRef<HTMLDivElement, GridProps>> & {
+    Item: typeof GridItem;
+};
+export {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/layout/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,sBAAsB,EAAsB,MAAM,YAAY,CAAC;AAEhG,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IAExE;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAEjC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,0GAmBpB,CAAC;AAGF,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;;;OAQG;IACH,GAAG,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,sBAAsB,CAAC;IAE5D;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,sBAAsB,CAAC;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,GAAG,sBAAsB,CAAC;IAE7D;;;;OAIG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;IAExE;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAEjC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,UAyBJ,CAAC;AAGd,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC,GAAG;IACzE,IAAI,EAAE,OAAO,QAAQ,CAAC;CACvB,CAAC"}

package/dist/layout/grid/grid.js

@@ -78,16 +78,16 @@ function getSpacingVariable(size) {
 
 // src/layout/grid/grid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Grid = (0, import_react.forwardRef)(
+var GridItem = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname.clsx)("hds-grid", className),
+        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -95,17 +95,17 @@ var Grid = (0, import_react.forwardRef)(
     );
   }
 );
-Grid.displayName = "Grid";
-var GridItem = (0, import_react.forwardRef)(
+GridItem.displayName = "Grid.Item";
+var Grid = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -113,7 +113,8 @@ var GridItem = (0, import_react.forwardRef)(
     );
   }
 );
-GridItem.displayName = "Grid.Item";
+Grid.displayName = "Grid";
+Grid.Item = GridItem;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Grid,

package/dist/layout/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layout/grid/grid.tsx","../../../src/layout/responsive.ts","../../../src/layout/spacing.ts"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * @example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGrid.displayName = \"Grid\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,wBAAqB;AACrB,mBAA2B;;;ACMpB,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;ACSO,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AFqDM;AAfC,IAAM,WAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,KA5E5E,IA4EI,IAAiF,iBAAjF,IAAiF,CAA/E,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe,OAAK,QAAM;AAGxE,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,8FAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,eAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAzIxD,IAyIG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,iDAC9B,SACA,mBAAmB,wBAAwB,IAAI,IAC/C,mBAAmB,0BAA0B,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/layout/grid/grid.tsx","../../../src/layout/responsive.ts","../../../src/layout/spacing.ts"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\nimport { type SpacingSizes, type ResponsiveSpacingSizes, getSpacingVariable } from \"../spacing\";\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Column span for the grid item\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center the grid item horizontally\n   *\n   * Offsets the start position of the grid item relative to it's span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean;\n}\n\n/**\n * 🚧 Grid.Item\n *\n * Use as the direct child of a `Grid` to override `span` and `center` for individual items.\n */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(\n  ({ children, asChild, className, span, center, style: _style, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-item-span\", span),\n      ...getResponsiveProps(\"--hds-grid-item-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid__item\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nGridItem.displayName = \"Grid.Item\";\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n\n  /**\n   * Space between grid items. Both horizontal and vertical.\n   *\n   * Use the responsive shorthand `12-16` to jump a level at the `large` breakpoint.\n   *\n   * Or use the responsive object `{ initial: 40, large: 64 }` to set different values at different breakpoints.\n   *\n   * Use `gapX` and `gapY` to set different values for horizontal and vertical spacing.\n   */\n  gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items horizontally\n   */\n  gapX?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Space between grid items vertically\n   */\n  gapY?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n\n  /**\n   * Column span for the grid items\n   *\n   * `default` is `12`\n   */\n  span?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>;\n\n  /**\n   * Center grid items horizontally\n   *\n   * Offsets the start position of the grid items relative to their span so that it appears centered.\n   *\n   * assumes a span of 2, 4, 6, 8, or 10\n   *\n   * a span of `12` is 100% width and centering has no effect\n   *\n   * `default` is `false`\n   */\n  center?: ResponsiveProp<boolean>;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\n/**\n * A simple opionated abstraction over CSS Grid.\n *\n * The grid is always a 12 column grid.\n *\n * @example\n * ```tsx\n * <Grid gap=\"12-16\" span={{ small: 6 }}>\n *   <div>6/12</div>\n *   <div>6/12</div>\n *   <Grid.Item span={{ small: 12 }}>12/12</Grid.Item>\n *   <div>6/12</div>\n *   <div>6/12</div>\n * </Grid>\n * ```\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(\n  (\n    { children, asChild, className, span, center, style: _style, gap, gapX, gapY, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const style: React.CSSProperties = {\n      ..._style,\n      ...getResponsiveProps(\"--hds-grid-gap\", gap, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-x\", gapX, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-gap-y\", gapY, getSpacingVariable),\n      ...getResponsiveProps(\"--hds-grid-span\", span),\n      ...getResponsiveProps(\"--hds-grid-center\", center, (value) => (value ? \"1\" : \"0\")),\n    };\n    return (\n      <Component\n        style={style}\n        className={clsx(\"hds-grid\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n) as GridType;\nGrid.displayName = \"Grid\";\n\ntype GridType = ReturnType<typeof forwardRef<HTMLDivElement, GridProps>> & {\n  Item: typeof GridItem;\n};\n\nGrid.Item = GridItem;\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n  [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n  variable: `--hds-${string}`,\n  inputValues?: ResponsiveProp<T>,\n  valueTransformer: (value: T) => string = (value) => String(value),\n) {\n  if (!inputValues) return {};\n\n  if (typeof inputValues !== \"object\") {\n    return { [`${variable}-initial`]: valueTransformer(inputValues) };\n  }\n\n  const result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n    result[`${variable}-${key}`] = valueTransformer(value);\n  }\n\n  return result;\n}\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n  \"4\": \"4\",\n  \"8\": \"8\",\n  \"12\": \"12\",\n  \"16\": \"16\",\n  \"20\": \"20\",\n  \"24\": \"24\",\n  \"32\": \"32\",\n  \"40\": \"40\",\n  \"48\": \"48\",\n  \"64\": \"64\",\n  \"80\": \"80\",\n  \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n  \"4-8\": \"4-8\",\n  \"8-12\": \"8-12\",\n  \"12-16\": \"12-16\",\n  \"16-20\": \"16-20\",\n  \"20-24\": \"20-24\",\n  \"24-32\": \"24-32\",\n  \"32-40\": \"32-40\",\n  \"40-48\": \"40-48\",\n  \"48-64\": \"48-64\",\n  \"64-80\": \"64-80\",\n  \"80-120\": \"80-120\",\n  \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n  return `var(--hds-spacing-${size})`;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,wBAAqB;AACrB,mBAA2B;;;ACMpB,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;ACSO,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AFaM;AATC,IAAM,eAAW;AAAA,EACtB,CAAC,IAAwE,QAAQ;AAAhF,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,OAzCxD,IAyCG,IAAgE,iBAAhE,IAAgE,CAA9D,YAAU,WAAS,aAAW,QAAM,UAAQ;AAC7C,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,iDAC9B,SACA,mBAAmB,wBAAwB,IAAI,IAC/C,mBAAmB,0BAA0B,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAExF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAsEhB,IAAM,WAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAQ,KAAK,MAAM,KApI5E,IAoII,IAAiF,iBAAjF,IAAiF,CAA/E,YAAU,WAAS,aAAW,QAAM,UAAQ,SAAe,OAAK,QAAM;AAGxE,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA6B,8FAC9B,SACA,mBAAmB,kBAAkB,KAAK,kBAAkB,IAC5D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,oBAAoB,MAAM,kBAAkB,IAC/D,mBAAmB,mBAAmB,IAAI,IAC1C,mBAAmB,qBAAqB,QAAQ,CAAC,UAAW,QAAQ,MAAM,GAAI;AAEnF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAMnB,KAAK,OAAO;","names":[]}

package/dist/layout/grid/grid.mjs

@@ -1,7 +1,7 @@
 import {
   Grid,
   GridItem
-} from "../../chunk-ES6ISHOV.mjs";
+} from "../../chunk-UP3M3NEZ.mjs";
 import "../../chunk-F4STR6SD.mjs";
 import "../../chunk-NE6W2PCD.mjs";
 import "../../chunk-R4SQKVDQ.mjs";

package/dist/layout/grid/index.d.ts

@@ -1,4 +1,3 @@
-export { Grid_alias_4 as Grid } from '../../_tsup-dts-rollup';
-export { GridItem_alias_4 as GridItem } from '../../_tsup-dts-rollup';
-export { GridProps_alias_4 as GridProps } from '../../_tsup-dts-rollup';
-export { GridItemProps_alias_4 as GridItemProps } from '../../_tsup-dts-rollup';
+export { Grid, GridItem } from "./grid";
+export type * from "./grid";
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAExC,mBAAmB,QAAQ,CAAC"}

package/dist/layout/grid/index.js

@@ -49,7 +49,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/layout/grid/index.tsx
 var grid_exports = {};
 __export(grid_exports, {
-  Grid: () => GridComponent,
+  Grid: () => Grid,
   GridItem: () => GridItem
 });
 module.exports = __toCommonJS(grid_exports);
@@ -80,16 +80,16 @@ function getSpacingVariable(size) {
 
 // src/layout/grid/grid.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Grid = (0, import_react.forwardRef)(
+var GridItem = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
+    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname.clsx)("hds-grid", className),
+        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -97,17 +97,17 @@ var Grid = (0, import_react.forwardRef)(
     );
   }
 );
-Grid.displayName = "Grid";
-var GridItem = (0, import_react.forwardRef)(
+GridItem.displayName = "Grid.Item";
+var Grid = (0, import_react.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { children, asChild, className, span, center, style: _style } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style"]);
+    var _b = _a, { children, asChild, className, span, center, style: _style, gap, gapX, gapY } = _b, rest = __objRest(_b, ["children", "asChild", "className", "span", "center", "style", "gap", "gapX", "gapY"]);
     const Component = asChild ? import_react_slot.Slot : "div";
-    const style = __spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-item-span", span)), getResponsiveProps("--hds-grid-item-center", center, (value) => value ? "1" : "0"));
+    const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-grid-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-x", gapX, getSpacingVariable)), getResponsiveProps("--hds-grid-gap-y", gapY, getSpacingVariable)), getResponsiveProps("--hds-grid-span", span)), getResponsiveProps("--hds-grid-center", center, (value) => value ? "1" : "0"));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: (0, import_typed_classname.clsx)("hds-grid__item", className),
+        className: (0, import_typed_classname.clsx)("hds-grid", className),
         ref
       }, rest), {
         children
@@ -115,11 +115,8 @@ var GridItem = (0, import_react.forwardRef)(
     );
   }
 );
-GridItem.displayName = "Grid.Item";
-
-// src/layout/grid/index.tsx
-var GridComponent = Grid;
-GridComponent.Item = GridItem;
+Grid.displayName = "Grid";
+Grid.Item = GridItem;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Grid,