@postenbring/hedwig-react 0.0.81 → 0.0.83

package/dist/{chunk-GSJPTZT3.mjs → chunk-FC4CEI2V.mjs}

@@ -1,3 +1,8 @@
+import {
+  NavbarExpandableMenu,
+  NavbarExpandableMenuContent,
+  NavbarExpandableMenuTrigger
+} from "./chunk-35TXKAUH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -9,22 +14,6 @@ import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
-var Navbar = forwardRef(
-  (_a, ref) => {
-    var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
-    const Component = asChild ? Slot : "header";
-    return /* @__PURE__ */ jsx(
-      Component,
-      __spreadProps(__spreadValues({
-        className: clsx("hds-navbar", variant && `hds-navbar--${variant}`, className),
-        ref
-      }, rest), {
-        children
-      })
-    );
-  }
-);
-Navbar.displayName = "Navbar";
 var NavbarLogo = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
@@ -107,15 +96,41 @@ var NavbarNavigation = forwardRef(
   }
 );
 NavbarNavigation.displayName = "Navbar.Navigation";
+var Navbar = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { asChild, children, className, variant } = _b, rest = __objRest(_b, ["asChild", "children", "className", "variant"]);
+    const Component = asChild ? Slot : "header";
+    return /* @__PURE__ */ jsx(
+      Component,
+      __spreadProps(__spreadValues({
+        className: clsx("hds-navbar", variant && `hds-navbar--${variant}`, className),
+        ref
+      }, rest), {
+        children
+      })
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+Navbar.Logo = NavbarLogo;
+Navbar.LogoAndServiceText = NavbarLogoAndServiceText;
+Navbar.ExpandableMenu = NavbarExpandableMenu;
+Navbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;
+Navbar.ExpandableMenuContent = NavbarExpandableMenuContent;
+Navbar.Item = NavbarItem;
+Navbar.ButtonItem = NavbarButtonItem;
+Navbar.LinkItem = NavbarLinkItem;
+Navbar.ItemIcon = NavbarItemIcon;
+Navbar.Navigation = NavbarNavigation;
 
 export {
-  Navbar,
   NavbarLogo,
   NavbarLogoAndServiceText,
   NavbarItemIcon,
   NavbarItem,
   NavbarButtonItem,
   NavbarLinkItem,
-  NavbarNavigation
+  NavbarNavigation,
+  Navbar
 };
-//# sourceMappingURL=chunk-GSJPTZT3.mjs.map
+//# sourceMappingURL=chunk-FC4CEI2V.mjs.map

package/dist/chunk-FC4CEI2V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n  NavbarExpandableMenu,\n  NavbarExpandableMenuContent,\n  NavbarExpandableMenuTrigger,\n} from \"./navbar-expandable-menu\";\n\ninterface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {\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 fixed Posten or Bring logo.\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogo = forwardRef<HTMLDivElement, NavbarLogoProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(`hds-navbar__logo`, className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogo.displayName = \"Navbar.Logo\";\n\ninterface NavbarLogoAndServiceText extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The text display next to the logo\n   */\n  children: React.ReactNode;\n\n  /**\n   * The text variant\n   *\n   * Use `service` for internal applications\n   *\n   * Use `flagship` for public facing applications\n   */\n  variant: \"service\" | \"flagship\";\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 * Internal service or flagship text next to either the Posten or Bring logo\n *\n * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo\n */\nexport const NavbarLogoAndServiceText = forwardRef<HTMLDivElement, NavbarLogoAndServiceText>(\n  ({ children, asChild, variant, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        ref={ref}\n        className={clsx(\n          \"hds-navbar__logo-and-service-text\",\n          `hds-navbar__logo-and-service-text--${variant}`,\n          className as undefined,\n        )}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLogoAndServiceText.displayName = \"Navbar.NavbarLogoAndText\";\n\ninterface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n/**\n * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`\n */\nexport const NavbarItemIcon = forwardRef<HTMLDivElement, NavbarItemIconProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <Slot className={clsx(\"hds-navbar__item-icon\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Slot>\n    );\n  },\n);\nNavbarItemIcon.displayName = \"Navbar.ItemIcon\";\n\ninterface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\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 * Generic Navbar item\n *\n * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons\n */\nexport const NavbarItem = forwardRef<HTMLDivElement, NavbarItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarItem.displayName = \"Navbar.Item\";\n\ninterface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\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}\nexport const NavbarButtonItem = forwardRef<HTMLButtonElement, NavbarButtonItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"button\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__item\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarButtonItem.displayName = \"Navbar.ButtonItem\";\n\ninterface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: React.ReactNode;\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\nexport const NavbarLinkItem = forwardRef<HTMLAnchorElement, NavbarLinkItemProps>(\n  ({ asChild, children, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Component className={clsx(\"hds-navbar__item\", className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nNavbarLinkItem.displayName = \"Navbar.LinkItem\";\n\ninterface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\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}\nexport const NavbarNavigation = forwardRef<HTMLDivElement, NavbarNavigationProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar__navigation\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nNavbarNavigation.displayName = \"Navbar.Navigation\";\n\nexport interface NavbarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Navbar variant\n   *\n   * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px\n   *\n   * For internal services or flagship services use the `service` should be used\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"service\";\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 * 🚨 WORK IN PROGRESS 🚨\n */\nexport const Navbar = forwardRef<HTMLDivElement, NavbarProps>(\n  ({ asChild, children, className, variant, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"header\";\n    return (\n      <Component\n        className={clsx(\"hds-navbar\", variant && `hds-navbar--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n) as NavbarType;\nNavbar.displayName = \"Navbar\";\n\ntype NavbarType = ReturnType<typeof forwardRef<HTMLDivElement, NavbarProps>> & {\n  Logo: typeof NavbarLogo;\n  LogoAndServiceText: typeof NavbarLogoAndServiceText;\n  ExpandableMenu: typeof NavbarExpandableMenu;\n  ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;\n  ExpandableMenuContent: typeof NavbarExpandableMenuContent;\n  Item: typeof NavbarItem;\n  ButtonItem: typeof NavbarButtonItem;\n  LinkItem: typeof NavbarLinkItem;\n  ItemIcon: typeof NavbarItemIcon;\n  Navigation: typeof NavbarNavigation;\n};\n\nNavbar.Logo = NavbarLogo;\nNavbar.LogoAndServiceText = NavbarLogoAndServiceText;\nNavbar.ExpandableMenu = NavbarExpandableMenu;\nNavbar.ExpandableMenuTrigger = NavbarExpandableMenuTrigger;\nNavbar.ExpandableMenuContent = NavbarExpandableMenuContent;\nNavbar.Item = NavbarItem;\nNavbar.ButtonItem = NavbarButtonItem;\nNavbar.LinkItem = NavbarLinkItem;\nNavbar.ItemIcon = NavbarItemIcon;\nNavbar.Navigation = NavbarNavigation;\n"],"mappings":"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","names":[]}

package/dist/chunk-FYFJ75NX.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-FYFJ75NX.mjs.map

package/dist/chunk-FYFJ75NX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-G65EYZFQ.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-G65EYZFQ.mjs.map

package/dist/chunk-G65EYZFQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-H3E546OT.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-H3E546OT.mjs.map

package/dist/chunk-H3E546OT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-HQVL3ZJ2.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-HQVL3ZJ2.mjs.map

package/dist/chunk-HQVL3ZJ2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-KPGSRU4I.mjs → chunk-M3Y3XOGC.mjs}

@@ -1,3 +1,12 @@
+import {
+  AccordionItem
+} from "./chunk-A2H2LAII.mjs";
+import {
+  AccordionContent
+} from "./chunk-GLAEI3SD.mjs";
+import {
+  AccordionHeader
+} from "./chunk-3EFAPJ3H.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -26,8 +35,11 @@ var Accordion = forwardRef(
   }
 );
 Accordion.displayName = "Accordion";
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
 
 export {
   Accordion
 };
-//# sourceMappingURL=chunk-KPGSRU4I.mjs.map
+//# sourceMappingURL=chunk-M3Y3XOGC.mjs.map

package/dist/chunk-M3Y3XOGC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItem, type AccordionItemProps } from \"./accordion-item\";\nimport { AccordionHeader } from \"./accordion-header\";\nimport { AccordionContent } from \"./accordion-content\";\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Accepts type of <AccordionItem/>\n   */\n  children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];\n\n  /**\n   * Adds padding to the left of the accordion\n   */\n  indent?: boolean;\n}\n\n/**\n * Displays collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion>\n *   <Accordion.Item defaultOpen>\n *     <Accordion.Header>Item one</Accordion.Header>\n *     <Accordion.Content>\n *       Some content\n *     </Accordion.Content>\n *   </Accordion.Item>\n *   <Accordion.Item>\n *     <Accordion.Header>Item two</Accordion.Header>\n *     <Accordion.Content>\n *       Some more content\n *     </Accordion.Content>\n *   </Accordion.Item>\n * </Accordion>\n * ```\n */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  ({ children, className, indent = true, ...rest }, ref) => {\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          \"hds-accordion\",\n          !indent && \"hds-accordion--no-indent\",\n          className as undefined,\n        )}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n) as AccordionType;\nAccordion.displayName = \"Accordion\";\n\nAccordion.Item = AccordionItem;\nAccordion.Header = AccordionHeader;\nAccordion.Content = AccordionContent;\n\ntype AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {\n  Item: typeof AccordionItem;\n  Header: typeof AccordionHeader;\n  Content: typeof AccordionContent;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AACA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAyCf;AAHC,IAAM,YAAY;AAAA,EACvB,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,YAAU,WAAW,SAAS,KAzCnC,IAyCG,IAAyC,iBAAzC,IAAyC,CAAvC,YAAU,aAAW;AACtB,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA,CAAC,UAAU;AAAA,UACX;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,UAAU,cAAc;AAExB,UAAU,OAAO;AACjB,UAAU,SAAS;AACnB,UAAU,UAAU;","names":[]}

package/dist/{chunk-CIHZDFSQ.mjs → chunk-NU6OSFAU.mjs}

@@ -9,12 +9,6 @@ import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
-var Card = forwardRef((_a, ref) => {
-  var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
-  const Component = asChild ? Slot : Tag;
-  return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card", className), ref, children }));
-});
-Card.displayName = "Card";
 var CardMedia = forwardRef(
   (_a, ref) => {
     var _b = _a, { asChild, className, children } = _b, rest = __objRest(_b, ["asChild", "className", "children"]);
@@ -132,9 +126,25 @@ var CardBodyActionArrow = forwardRef(
   }
 );
 CardBodyActionArrow.displayName = "Card.BodyActionArrow";
+var Card = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { as: Tag = "section", asChild, className, children } = _b, rest = __objRest(_b, ["as", "asChild", "className", "children"]);
+    const Component = asChild ? Slot : Tag;
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-card", className), ref, children }));
+  }
+);
+Card.displayName = "Card";
+Card.Media = CardMedia;
+Card.MediaImg = CardMediaImg;
+Card.Body = CardBody;
+Card.BodyHeader = CardBodyHeader;
+Card.BodyHeaderOverline = CardBodyHeaderOverline;
+Card.BodyHeaderTitle = CardBodyHeaderTitle;
+Card.BodyDescription = CardBodyDescription;
+Card.BodyAction = CardBodyAction;
+Card.BodyActionArrow = CardBodyActionArrow;
 
 export {
-  Card,
   CardMedia,
   CardMediaImg,
   CardBody,
@@ -143,6 +153,7 @@ export {
   CardBodyHeaderTitle,
   CardBodyDescription,
   CardBodyAction,
-  CardBodyActionArrow
+  CardBodyActionArrow,
+  Card
 };
-//# sourceMappingURL=chunk-CIHZDFSQ.mjs.map
+//# sourceMappingURL=chunk-NU6OSFAU.mjs.map

package/dist/chunk-NU6OSFAU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/card/card.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component {...rest} className={clsx(\"hds-card__media\", className as undefined)} ref={ref}>\n        {children}\n      </Component>\n    );\n  },\n);\nCardMedia.displayName = \"Card.Media\";\n\nexport interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\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}\nexport const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"img\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__media__img\", className as undefined)}\n        ref={ref}\n      />\n    );\n  },\n);\nCardMediaImg.displayName = \"Card.MediaImg\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component {...rest} className={clsx(\"hds-card__body\", className as undefined)} ref={ref}>\n        {children}\n      </Component>\n    );\n  },\n);\nCardBody.displayName = \"Card.Body\";\n\nexport const CardBodyHeader = forwardRef<\n  HTMLHeadingElement,\n  CardBaseProps &\n    (\n      | {\n          /**\n           * Heading level of the card heading\n           */\n          as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n          asChild?: never;\n        }\n      | {\n          asChild: true;\n          as?: never;\n        }\n    )\n>(({ as: Tag, asChild, className, children, ...rest }, ref) => {\n  const Component = asChild ? Slot : Tag;\n  return (\n    <Component\n      {...rest}\n      className={clsx(\"hds-card__body-header\", className as undefined)}\n      ref={ref}\n    >\n      {children}\n    </Component>\n  );\n});\nCardBodyHeader.displayName = \"Card.BodyHeader\";\n\nexport const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"span\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-header-overline\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyHeaderOverline.displayName = \"Card.BodyHeaderOverline\";\n\nexport const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-header-title\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyHeaderTitle.displayName = \"Card.BodyHeaderTitle\";\n\nexport const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"p\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-description\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyDescription.displayName = \"Card.BodyDescription\";\n\nexport const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(\n  ({ asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-action\", className as undefined)}\n        ref={ref}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nCardBodyAction.displayName = \"Card.BodyAction\";\n\ninterface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {\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}\nexport const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"span\";\n    return (\n      <Component\n        {...rest}\n        className={clsx(\"hds-card__body-action-arrow\", className as undefined)}\n        ref={ref}\n      />\n    );\n  },\n);\nCardBodyActionArrow.displayName = \"Card.BodyActionArrow\";\n\nexport interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\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\nexport interface CardProps extends CardBaseProps {\n  /**\n   * A Card should in most cases appear as a big link,\n   * but the actual link should just be the header title.\n   * To make life better for those with screen readers we should not make\n   * the entire card a link, as that would cause the entire card to be read\n   * as a link to the user. That would be perceived as information overload.\n   */\n  as?: \"section\" | \"div\" | \"article\" | \"aside\";\n}\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ as: Tag = \"section\", asChild, className, children, ...rest }, ref) => {\n    const Component = asChild ? Slot : Tag;\n    return (\n      <Component {...rest} className={clsx(\"hds-card\", className as undefined)} ref={ref}>\n        {children}\n      </Component>\n    );\n  },\n) as CardType;\nCard.displayName = \"Card\";\n\nCard.Media = CardMedia;\nCard.MediaImg = CardMediaImg;\nCard.Body = CardBody;\nCard.BodyHeader = CardBodyHeader;\nCard.BodyHeaderOverline = CardBodyHeaderOverline;\nCard.BodyHeaderTitle = CardBodyHeaderTitle;\nCard.BodyDescription = CardBodyDescription;\nCard.BodyAction = CardBodyAction;\nCard.BodyActionArrow = CardBodyActionArrow;\n\ntype CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {\n  Media: typeof CardMedia;\n  MediaImg: typeof CardMediaImg;\n  Body: typeof CardBody;\n  BodyHeader: typeof CardBodyHeader;\n  BodyHeaderOverline: typeof CardBodyHeaderOverline;\n  BodyHeaderTitle: typeof CardBodyHeaderTitle;\n  BodyDescription: typeof CardBodyDescription;\n  BodyAction: typeof CardBodyAction;\n  BodyActionArrow: typeof CardBodyActionArrow;\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-XUWZ4HGD.mjs → chunk-OGZ2NBMH.mjs}

@@ -1,9 +1,9 @@
 import {
   Box
-} from "./chunk-ENKVTAJB.mjs";
+} from "./chunk-AJWSQEDP.mjs";
 import {
   useMergeRefs
-} from "./chunk-DEX36MFK.mjs";
+} from "./chunk-TDXU2IC6.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -15,47 +15,6 @@ import { forwardRef, useEffect, useRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
-var Modal = forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
-    const modalRef = useRef(null);
-    const mergedRef = useMergeRefs([modalRef, ref]);
-    function onCloseButtonClick() {
-      var _a2;
-      (_a2 = modalRef.current) == null ? void 0 : _a2.close();
-      return false;
-    }
-    useScrollLock(modalRef, "hds-modal-scroll-lock");
-    useEffect(() => {
-      if (modalRef.current && open !== void 0) {
-        if (open && !modalRef.current.open) {
-          modalRef.current.showModal();
-        } else if (!open && modalRef.current.open) {
-          modalRef.current.close();
-        }
-      }
-    }, [modalRef, open]);
-    function onDialogClick(e) {
-      if (closeOnBackdropClick && e.target === modalRef.current) {
-        modalRef.current.close();
-      }
-      onClick == null ? void 0 : onClick(e);
-    }
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        asChild: true,
-        className: clsx("hds-modal", className),
-        closeable: true,
-        onClick: onDialogClick,
-        onClose: onCloseButtonClick,
-        variant: "white",
-        children: /* @__PURE__ */ jsx("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
-      }
-    );
-  }
-);
-Modal.displayName = "Modal";
 var ModalHeader = forwardRef(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
@@ -98,6 +57,50 @@ var ModalFooter = forwardRef(
   }
 );
 ModalFooter.displayName = "Modal.Footer";
+var Modal = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
+    const modalRef = useRef(null);
+    const mergedRef = useMergeRefs([modalRef, ref]);
+    function onCloseButtonClick() {
+      var _a2;
+      (_a2 = modalRef.current) == null ? void 0 : _a2.close();
+      return false;
+    }
+    useScrollLock(modalRef, "hds-modal-scroll-lock");
+    useEffect(() => {
+      if (modalRef.current && open !== void 0) {
+        if (open && !modalRef.current.open) {
+          modalRef.current.showModal();
+        } else if (!open && modalRef.current.open) {
+          modalRef.current.close();
+        }
+      }
+    }, [modalRef, open]);
+    function onDialogClick(e) {
+      if (closeOnBackdropClick && e.target === modalRef.current) {
+        modalRef.current.close();
+      }
+      onClick == null ? void 0 : onClick(e);
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        asChild: true,
+        className: clsx("hds-modal", className),
+        closeable: true,
+        onClick: onDialogClick,
+        onClose: onCloseButtonClick,
+        variant: "white",
+        children: /* @__PURE__ */ jsx("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+Modal.Header = ModalHeader;
+Modal.Content = ModalContent;
+Modal.Footer = ModalFooter;
 function useScrollLock(modalRef, bodyClass) {
   useEffect(() => {
     if (!modalRef.current)
@@ -123,9 +126,9 @@ function useScrollLock(modalRef, bodyClass) {
 }
 
 export {
-  Modal,
   ModalHeader,
   ModalContent,
-  ModalFooter
+  ModalFooter,
+  Modal
 };
-//# sourceMappingURL=chunk-XUWZ4HGD.mjs.map
+//# sourceMappingURL=chunk-OGZ2NBMH.mjs.map

package/dist/chunk-OGZ2NBMH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/modal/modal.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box } from \"../box/box\";\nimport { useMergeRefs } from \"../utils/utils\";\n\ninterface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {\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}\nexport const ModalHeader = forwardRef<HTMLHeadingElement, ModalHeaderProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"h1\";\n    return (\n      <Component\n        className={clsx(\"hds-modal__header\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalHeader.displayName = \"Modal.Header\";\n\ninterface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {\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}\nexport const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-modal__content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalContent.displayName = \"Modal.Content\";\n\ninterface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {\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}\nexport const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\n    return (\n      <Component\n        className={clsx(\"hds-modal__footer\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n\n  /**\n   * Controls the open state of the modal\n   */\n  open?: boolean;\n\n  /**\n   * Whether to close when clicking on the backdrop.\n   */\n  closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * @example\n * ```tsx\n *   const modalRef = useRef<HTMLDialogElement>(null);\n *   const onClose = () => modalRef.current?.close();\n *\n *   return (\n *     <>\n *       <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n *       <Modal ref={modalRef}>\n *         <Modal.Header>Dialog header</Modal.Header>\n *         <Modal.Content>\n *           <p>\n *             Dialog header Dialog description - a description of what is about to happen and maybe\n *             something about the consequences.\n *           </p>\n *         </Modal.Content>\n *         <Modal.Footer>\n *           <HStack gap=\"16\" wrap>\n *             <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n *             <PrimaryButton fill=\"outline\" onClick={onClose}>\n *               Cancel\n *             </PrimaryButton>\n *           </HStack>\n *         </Modal.Footer>\n *       </Modal>\n *     </>\n *   );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n    const modalRef = useRef<HTMLDialogElement>(null);\n    const mergedRef = useMergeRefs([modalRef, ref]);\n\n    // The X close button that comes from the `Box` component\n    function onCloseButtonClick() {\n      modalRef.current?.close();\n      return false;\n    }\n\n    // No scroll when modal is open\n    useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n    // `open` prop\n    useEffect(() => {\n      if (modalRef.current && open !== undefined) {\n        if (open && !modalRef.current.open) {\n          modalRef.current.showModal();\n        } else if (!open && modalRef.current.open) {\n          modalRef.current.close();\n        }\n      }\n    }, [modalRef, open]);\n\n    function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n      if (closeOnBackdropClick && e.target === modalRef.current) {\n        modalRef.current.close();\n      }\n      onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n    }\n\n    return (\n      <Box\n        asChild\n        className={clsx(\"hds-modal\", className as undefined)}\n        closeable\n        onClick={onDialogClick}\n        onClose={onCloseButtonClick}\n        variant=\"white\"\n      >\n        <dialog ref={mergedRef} {...rest}>\n          {children}\n        </dialog>\n      </Box>\n    );\n  },\n) as ModalType;\nModal.displayName = \"Modal\";\n\ntype ModalType = ReturnType<typeof forwardRef<HTMLDialogElement, ModalProps>> & {\n  Header: typeof ModalHeader;\n  Content: typeof ModalContent;\n  Footer: typeof ModalFooter;\n};\n\nModal.Header = ModalHeader;\nModal.Content = ModalContent;\nModal.Footer = ModalFooter;\n\nfunction useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n  useEffect(() => {\n    if (!modalRef.current) return;\n    if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n    const observer = new MutationObserver(() => {\n      if (modalRef.current?.open) document.body.classList.add(bodyClass);\n      else document.body.classList.remove(bodyClass);\n    });\n    observer.observe(modalRef.current, {\n      attributes: true,\n      attributeFilter: [\"open\"],\n    });\n    return () => {\n      observer.disconnect();\n      document.body.classList.remove(bodyClass);\n    };\n  }, [bodyClass, modalRef]);\n}\n"],"mappings":"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","names":["_a"]}

package/dist/{chunk-3MQKXNZ6.mjs → chunk-QZZIOBF4.mjs}

@@ -1,3 +1,11 @@
+import {
+  TabsList,
+  TabsTab
+} from "./chunk-AXQCREUJ.mjs";
+import {
+  TabsContent,
+  TabsContents
+} from "./chunk-CCVZAHYA.mjs";
 import {
   TabsContext
 } from "./chunk-KQITCS3U.mjs";
@@ -21,8 +29,12 @@ var Tabs = forwardRef(
   }
 );
 Tabs.displayName = "Tabs";
+Tabs.List = TabsList;
+Tabs.Tab = TabsTab;
+Tabs.Contents = TabsContents;
+Tabs.Content = TabsContent;
 
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-3MQKXNZ6.mjs.map
+//# sourceMappingURL=chunk-QZZIOBF4.mjs.map

package/dist/chunk-QZZIOBF4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from \"react\";\nimport { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { TabsContext } from \"./context\";\nimport { TabsContent, TabsContents, type TabsContentsProps } from \"./tabs-content\";\nimport { TabsList, TabsTab, type TabsListProps } from \"./tabs-list\";\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsListProps | TabsContentsProps>[] | ReactElement;\n\n  /**\n   * Define which tab to use as default. Must be one of the <Tab/>s identifier.\n   */\n  defaultTab: string;\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\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(\n  ({ asChild, defaultTab, children, ...rest }, ref) => {\n    const [activeTabId, setActiveTabId] = useState<string>(defaultTab);\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(\"hds-tabs\")} ref={ref} {...rest}>\n        <TabsContext.Provider value={{ activeTabId, toggleActiveTabId: setActiveTabId }}>\n          {children}\n        </TabsContext.Provider>\n      </Component>\n    );\n  },\n) as TabsType;\nTabs.displayName = \"Tabs\";\n\ntype TabsType = ReturnType<typeof forwardRef<HTMLDivElement, TabsProps>> & {\n  List: typeof TabsList;\n  Tab: typeof TabsTab;\n  Contents: typeof TabsContents;\n  Content: typeof TabsContent;\n};\n\nTabs.List = TabsList;\nTabs.Tab = TabsTab;\nTabs.Contents = TabsContents;\nTabs.Content = TabsContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;AACA,SAAS,YAAY,gBAAgB;AACrC,SAAS,YAAY;AACrB,SAAS,YAAY;AA2Bb;AAND,IAAM,OAAO;AAAA,EAClB,CAAC,IAA4C,QAAQ;AAApD,iBAAE,WAAS,YAAY,SAzB1B,IAyBG,IAAoC,iBAApC,IAAoC,CAAlC,WAAS,cAAY;AACtB,UAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,UAAU;AACjE,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,UAAU,GAAG,OAAc,OAArD,EACC,8BAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,aAAa,mBAAmB,eAAe,GAC3E,UACH,IACF;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AASnB,KAAK,OAAO;AACZ,KAAK,MAAM;AACX,KAAK,WAAW;AAChB,KAAK,UAAU;","names":[]}

package/dist/chunk-RC76SXBP.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-RC76SXBP.mjs.map

package/dist/chunk-RC76SXBP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-TQDUBRCZ.mjs → chunk-SQ63E7KM.mjs}

@@ -1,6 +1,6 @@
 import {
   Box
-} from "./chunk-ENKVTAJB.mjs";
+} from "./chunk-AJWSQEDP.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -12,24 +12,6 @@ import { forwardRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Message = forwardRef(
-  (_a, ref) => {
-    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
-    return /* @__PURE__ */ jsxs(
-      Box,
-      __spreadProps(__spreadValues({
-        className: clsx(`hds-message`, `hds-message--${variant}`, className),
-        ref
-      }, rest), {
-        children: [
-          variant === "neutral" && /* @__PURE__ */ jsx("div", { className: clsx("hds-message--neutral__icon", iconClassName), children: icon }),
-          children
-        ]
-      })
-    );
-  }
-);
-Message.displayName = "Message";
 var MessageTitle = forwardRef(
   (_a, ref) => {
     var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
@@ -58,10 +40,30 @@ var MessageDescription = forwardRef(
   }
 );
 MessageDescription.displayName = "Message.Description";
+var Message = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, variant = "success", icon, iconClassName } = _b, rest = __objRest(_b, ["children", "className", "variant", "icon", "iconClassName"]);
+    return /* @__PURE__ */ jsxs(
+      Box,
+      __spreadProps(__spreadValues({
+        className: clsx(`hds-message`, `hds-message--${variant}`, className),
+        ref
+      }, rest), {
+        children: [
+          variant === "neutral" && /* @__PURE__ */ jsx("div", { className: clsx("hds-message--neutral__icon", iconClassName), children: icon }),
+          children
+        ]
+      })
+    );
+  }
+);
+Message.displayName = "Message";
+Message.Title = MessageTitle;
+Message.Description = MessageDescription;
 
 export {
-  Message,
   MessageTitle,
-  MessageDescription
+  MessageDescription,
+  Message
 };
-//# sourceMappingURL=chunk-TQDUBRCZ.mjs.map
+//# sourceMappingURL=chunk-SQ63E7KM.mjs.map

package/dist/chunk-SQ63E7KM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/message/message.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../box/box\";\n\ninterface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {\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}\nexport const MessageTitle = forwardRef<HTMLParagraphElement, MessageTitleProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__title\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageTitle.displayName = \"Message.Title\";\n\ninterface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\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}\nexport const MessageDescription = forwardRef<HTMLParagraphElement, MessageDescriptionProps>(\n  ({ asChild, className, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component\n        className={clsx(\"hds-message__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nMessageDescription.displayName = \"Message.Description\";\n\nexport type MessageProps = (\n  | {\n      variant?: \"success\" | \"attention\" | \"warning\";\n      icon?: never;\n      iconClassName?: never;\n    }\n  | {\n      variant: \"neutral\";\n      icon?: React.ReactNode;\n      iconClassName?: string;\n    }\n) &\n  Omit<BoxProps, \"variant\" | \"asChild\">;\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n    return (\n      <Box\n        className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        {variant === \"neutral\" && (\n          <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n            {icon}\n          </div>\n        )}\n        {children}\n      </Box>\n    );\n  },\n) as MessageType;\nMessage.displayName = \"Message\";\n\ntype MessageType = ReturnType<typeof forwardRef<HTMLDivElement, MessageProps>> & {\n  Title: typeof MessageTitle;\n  Description: typeof MessageDescription;\n};\nMessage.Title = MessageTitle;\nMessage.Description = MessageDescription;\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AACrB,SAAS,YAAY;AAef,cAiDA,YAjDA;AAJC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UAdd,IAcG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAUpB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAiC,QAAQ;AAAzC,iBAAE,WAAS,UApCd,IAoCG,IAAyB,iBAAzB,IAAyB,CAAvB,WAAS;AACV,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAgB1B,IAAM,UAAU;AAAA,EACrB,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cAhErD,IAgEG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,oBAAC,SAAI,WAAW,KAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAMtB,QAAQ,QAAQ;AAChB,QAAQ,cAAc;","names":[]}

package/dist/{chunk-DEX36MFK.mjs → chunk-TDXU2IC6.mjs}

@@ -1,4 +1,4 @@
-// src/utils.ts
+// src/utils/utils.ts
 import * as React from "react";
 import { useCallback, useEffect, useState } from "react";
 function useMergeRefs(refs) {
@@ -86,7 +86,6 @@ export {
   useMergeRefs,
   useResize,
   useHydrated,
-  focusTrap,
-  releaseFocusTrap
+  focusTrap
 };
-//# sourceMappingURL=chunk-DEX36MFK.mjs.map
+//# sourceMappingURL=chunk-TDXU2IC6.mjs.map

package/dist/chunk-TDXU2IC6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/utils.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n\n/**\n * Trap focus inside an element using the `inert` attribute.\n *\n * Adds `inert` to all siblings of the given element, and all their ancestors up to the body.\n * Returns a cleanup function which removes the `inert` property from the elements, effectively giving focus back to rest of the document.\n *\n * NOTE: Does not support portals, i.e. elements outside the DOM hierarchy of the given element.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n * @see https://web.dev/articles/inert\n */\nexport function focusTrap(element: HTMLElement) {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- NOP on focus trapping the body element\n  if (element === document.body) return () => {};\n\n  let inertElements: HTMLElement[] = [];\n  for (let el: HTMLElement | null = element; el; el = el.parentElement) {\n    if (el === document.body) break;\n\n    for (const sibling of el.parentElement?.children ?? []) {\n      if (sibling === el) continue;\n      if (!(sibling instanceof HTMLElement)) continue;\n      if (sibling.hasAttribute(\"inert\")) continue;\n\n      sibling.setAttribute(\"inert\", \"true\");\n      inertElements.push(sibling);\n    }\n  }\n\n  return () => {\n    releaseFocusTrap(inertElements);\n    inertElements = [];\n  };\n}\n\n/**\n * Unset the `inert` attribute on all elements given\n */\nfunction releaseFocusTrap(inertElements: Iterable<HTMLElement>) {\n  for (const el of inertElements) {\n    el.removeAttribute(\"inert\");\n  }\n}\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,aAAa,WAAW,gBAAgB;AAM1C,SAAS,aACd,MACoC;AACpC,SAAa,cAAQ,MAAM;AACzB,QAAI,KAAK,MAAM,CAAC,QAAQ,QAAQ,IAAI,GAAG;AACrC,aAAO;AAAA,IACT;AAEA,WAAO,CAAC,UAAU;AAChB,WAAK,QAAQ,CAAC,QAAQ;AACpB,YAAI,OAAO,QAAQ,YAAY;AAC7B,cAAI,KAAK;AAAA,QACX,WAAW,QAAQ,MAAM;AACvB,UAAC,IAAgD,UAAU;AAAA,QAC7D;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,IAAI;AACT;AAEO,SAAS,UACd,KACmC;AACnC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAC9C,QAAM,eAAe,YAAY,MAAM;AAjCzC;AAkCI,SAAI,2BAAK,aAAY,MAAM;AACzB,gBAAS,sCAAK,YAAL,mBAAc,gBAAd,YAA6B,CAAC;AACvC,iBAAU,sCAAK,YAAL,mBAAc,iBAAd,YAA8B,CAAC;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,YAAU,MAAM;AACd,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,iBAAiB,UAAU,YAAY;AAC9C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAC/C,aAAO,oBAAoB,UAAU,YAAY;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,KAAK,YAAY,CAAC;AACtB,YAAU,MAAM;AACd,iBAAa;AAAA,EAEf,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,OAAO,OAAO;AACzB;AAEA,SAAS,YAAY;AAEnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAa;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAaO,SAAS,UAAU,SAAsB;AA9EhD;AAgFE,MAAI,YAAY,SAAS;AAAM,WAAO,MAAM;AAAA,IAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS;AAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY;AAAI;AACpB,UAAI,EAAE,mBAAmB;AAAc;AACvC,UAAI,QAAQ,aAAa,OAAO;AAAG;AAEnC,cAAQ,aAAa,SAAS,MAAM;AACpC,oBAAc,KAAK,OAAO;AAAA,IAC5B;AAAA,EACF;AAEA,SAAO,MAAM;AACX,qBAAiB,aAAa;AAC9B,oBAAgB,CAAC;AAAA,EACnB;AACF;AAKA,SAAS,iBAAiB,eAAsC;AAC9D,aAAW,MAAM,eAAe;AAC9B,OAAG,gBAAgB,OAAO;AAAA,EAC5B;AACF;","names":[]}

package/dist/{chunk-ES6ISHOV.mjs → chunk-UP3M3NEZ.mjs}

@@ -15,16 +15,16 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-var Grid = forwardRef(
+var GridItem = 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 ? 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__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: clsx("hds-grid", className),
+        className: clsx("hds-grid__item", className),
         ref
       }, rest), {
         children
@@ -32,17 +32,17 @@ var Grid = forwardRef(
     );
   }
 );
-Grid.displayName = "Grid";
-var GridItem = forwardRef(
+GridItem.displayName = "Grid.Item";
+var Grid = 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 ? 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__ */ jsx(
       Component,
       __spreadProps(__spreadValues({
         style,
-        className: clsx("hds-grid__item", className),
+        className: clsx("hds-grid", className),
         ref
       }, rest), {
         children
@@ -50,10 +50,11 @@ var GridItem = forwardRef(
     );
   }
 );
-GridItem.displayName = "Grid.Item";
+Grid.displayName = "Grid";
+Grid.Item = GridItem;
 
 export {
-  Grid,
-  GridItem
+  GridItem,
+  Grid
 };
-//# sourceMappingURL=chunk-ES6ISHOV.mjs.map
+//# sourceMappingURL=chunk-UP3M3NEZ.mjs.map

package/dist/{chunk-ES6ISHOV.mjs.map → chunk-UP3M3NEZ.mjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/layout/grid/grid.tsx"],"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"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAuFrB;AAfC,IAAM,OAAO;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,OAAO;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,WAAW,KAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAoCZ,IAAM,WAAW;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,OAAO;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,WAAW,KAAK,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"],"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"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA+CrB;AATC,IAAM,WAAW;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,OAAO;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,WAAW,KAAK,kBAAkB,SAAsB;AAAA,QACxD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAsEhB,IAAM,OAAO;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,OAAO;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,WAAW,KAAK,YAAY,SAAsB;AAAA,QAClD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAMnB,KAAK,OAAO;","names":[]}