@postenbring/hedwig-react 0.0.82 → 0.0.84

package/dist/{chunk-C34HEQXO.mjs → chunk-GRWLX5BC.mjs}

@@ -2,11 +2,11 @@ import {
   LinkList
 } from "./chunk-COEZA7WA.mjs";
 import {
-  PrimaryButton
-} from "./chunk-KEKPEN2C.mjs";
+  Button
+} from "./chunk-6MR5XZOX.mjs";
 import {
   Accordion
-} from "./chunk-M3Y3XOGC.mjs";
+} from "./chunk-B6L7IFDX.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -30,7 +30,7 @@ var FooterButtonLink = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? Slot : "a";
-    return /* @__PURE__ */ jsx(PrimaryButton, { asChild: true, fill: "outline", className: clsx(className), children: /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ jsx(Button, { asChild: true, variant: "primary-outline", className: clsx(className), children: /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";
@@ -106,4 +106,4 @@ export {
   FooterLinkSection,
   Footer
 };
-//# sourceMappingURL=chunk-C34HEQXO.mjs.map
+//# sourceMappingURL=chunk-GRWLX5BC.mjs.map

package/dist/chunk-GRWLX5BC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/footer/footer.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ReactElement } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Accordion } from \"../accordion\";\nimport { LinkList } from \"../list/link-list\";\nimport { Button } from \"../button\";\n\ninterface FooterLogoProps extends 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 FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"div\";\n    return (\n      <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>\n        {children}\n      </Component>\n    );\n  },\n);\nFooterLogo.displayName = \"Footer.Logo\";\n\nexport interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\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 FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(\n  ({ children, className, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"a\";\n    return (\n      <Button asChild variant=\"primary-outline\" className={clsx(className as undefined)}>\n        <Component ref={ref} {...rest}>\n          {children}\n        </Component>\n      </Button>\n    );\n  },\n);\nFooterButtonLink.displayName = \"FooterButton\";\n\ninterface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];\n}\n\n/**\n * Responsive sections of links. Will become an accordion on mobile.\n *\n * Use with {@link FooterLinkSection} for each section.\n */\nexport const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <>\n        {/* Mobile and Desktop. The accordion styling gets removed on desktop */}\n        <Accordion\n          className={clsx(\"hds-footer__link-sections\", className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          {/* @ts-expect-error -- It's ok */}\n          {children}\n        </Accordion>\n      </>\n    );\n  },\n);\nFooterLinkSections.displayName = \"Footer.LinkSections\";\n\ninterface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {\n  heading: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(\n  ({ heading, children, className, ...rest }, ref) => {\n    // @ts-expect-error -- It's ok\n    const linkListChildren = <LinkList>{children}</LinkList>;\n    return (\n      <>\n        {/* Mobile */}\n        <Accordion.Item\n          className={clsx(`hds-footer__link-section`, className as undefined)}\n          ref={ref}\n          {...rest}\n        >\n          <Accordion.Header>{heading}</Accordion.Header>\n          <Accordion.Content>{linkListChildren}</Accordion.Content>\n        </Accordion.Item>\n\n        {/* Desktop */}\n        <div className={clsx(`hds-footer__link-section`, className as undefined)}>\n          <h2>{heading}</h2>\n          {linkListChildren}\n        </div>\n      </>\n    );\n  },\n);\nFooterLinkSection.displayName = \"Footer.LinkSection\";\n\nexport interface FooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer variant\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"slim\";\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 Footer = forwardRef<HTMLDivElement, FooterProps>(\n  ({ children, className, variant, asChild, ...rest }, ref) => {\n    const Component = asChild ? Slot : \"footer\";\n    return (\n      <Component\n        className={clsx(\n          `hds-footer`,\n          variant === \"slim\" && \"hds-footer--slim\",\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n) as FooterType;\nFooter.displayName = \"Footer\";\n\ntype FooterType = ReturnType<typeof forwardRef<HTMLDivElement, FooterProps>> & {\n  Logo: typeof FooterLogo;\n  ButtonLink: typeof FooterButtonLink;\n  LinkSections: typeof FooterLinkSections;\n  LinkSection: typeof FooterLinkSection;\n};\n\nFooter.Logo = FooterLogo;\nFooter.ButtonLink = FooterButtonLink;\nFooter.LinkSections = FooterLinkSections;\nFooter.LinkSection = FooterLinkSection;\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,kBAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AAuBf,SA8CA,UA9CA,KA0EE,YA1EF;AAJC,IAAM,aAAa;AAAA,EACxB,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAtB1B,IAsBG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,0CAAU,WAAW,KAAK,oBAAoB,SAAsB,GAAG,OAAc,OAArF,EACE,WACH;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAclB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QA9C1B,IA8CG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,YAAY,UAAU,OAAO;AACnC,WACE,oBAAC,UAAO,SAAO,MAAC,SAAQ,mBAAkB,WAAW,KAAK,SAAsB,GAC9E,8BAAC,0CAAU,OAAc,OAAxB,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAWxB,IAAM,qBAAqB;AAAA,EAChC,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UArEf,IAqEG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,WACE,gCAEE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE;AAAA,SACI,OAHL;AAAA,QAME;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAO1B,IAAM,oBAAoB;AAAA,EAC/B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,WAAS,UAAU,UA7FxB,IA6FG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AAEpB,UAAM,mBAAmB,oBAAC,YAAU,UAAS;AAC7C,WACE,iCAEE;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,WAAW,KAAK,4BAA4B,SAAsB;AAAA,UAClE;AAAA,WACI,OAHL;AAAA,UAKC;AAAA,gCAAC,UAAU,QAAV,EAAkB,mBAAQ;AAAA,YAC3B,oBAAC,UAAU,SAAV,EAAmB,4BAAiB;AAAA;AAAA;AAAA,MACvC;AAAA,MAGA,qBAAC,SAAI,WAAW,KAAK,4BAA4B,SAAsB,GACrE;AAAA,4BAAC,QAAI,mBAAQ;AAAA,QACZ;AAAA,SACH;AAAA,OACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAqBzB,IAAM,SAAS;AAAA,EACpB,CAAC,IAAoD,QAAQ;AAA5D,iBAAE,YAAU,WAAW,SAAS,QA3InC,IA2IG,IAA4C,iBAA5C,IAA4C,CAA1C,YAAU,aAAW,WAAS;AAC/B,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY,UAAU;AAAA,UACtB;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAPL;AAAA,QASE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;AASrB,OAAO,OAAO;AACd,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,cAAc;","names":[]}

package/dist/{chunk-3EFAPJ3H.mjs → chunk-HJYS664B.mjs}

@@ -1,6 +1,6 @@
 import {
   AccordionItemContext
-} from "./chunk-V3PAFMK5.mjs";
+} from "./chunk-YQFL5UN4.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -26,6 +26,7 @@ var AccordionHeader = forwardRef(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": context.open,
+        "aria-controls": context.contentId,
         "data-state": context.open ? "open" : "closed",
         className: clsx("hds-accordion-item-header", className),
         onClick: expandOrCollapse,
@@ -41,4 +42,4 @@ AccordionHeader.displayName = "Accordion.Header";
 export {
   AccordionHeader
 };
-//# sourceMappingURL=chunk-3EFAPJ3H.mjs.map
+//# sourceMappingURL=chunk-HJYS664B.mjs.map

package/dist/chunk-HJYS664B.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion-header.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n}\n\nexport const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(\n  ({ children, className, onClick, ...rest }, ref) => {\n    const context = useContext(AccordionItemContext);\n    if (context === null) {\n      return null;\n    }\n    const expandOrCollapse = (e: MouseEvent<HTMLButtonElement>) => {\n      context.setOpen(!context.open);\n      onClick?.(e);\n    };\n    return (\n      <button\n        {...rest}\n        aria-expanded={context.open}\n        aria-controls={context.contentId}\n        data-state={context.open ? \"open\" : \"closed\"}\n        className={clsx(\"hds-accordion-item-header\", className as undefined)}\n        onClick={expandOrCollapse}\n        ref={ref}\n        type=\"button\"\n      >\n        <span>{children}</span>\n      </button>\n    );\n  },\n);\n\nAccordionHeader.displayName = \"Accordion.Header\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AA4Bb;AArBD,IAAM,kBAAkB;AAAA,EAC7B,CAAC,IAA2C,QAAQ;AAAnD,iBAAE,YAAU,WAAW,QAV1B,IAUG,IAAmC,iBAAnC,IAAmC,CAAjC,YAAU,aAAW;AACtB,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,UAAM,mBAAmB,CAAC,MAAqC;AAC7D,cAAQ,QAAQ,CAAC,QAAQ,IAAI;AAC7B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,iBAAe,QAAQ;AAAA,QACvB,iBAAe,QAAQ;AAAA,QACvB,cAAY,QAAQ,OAAO,SAAS;AAAA,QACpC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,QACnE,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":[]}

package/dist/{chunk-LCJSUBCZ.mjs → chunk-IHZ2MRF6.mjs}

@@ -1,9 +1,9 @@
+import {
+  useMergeRefs
+} from "./chunk-TDXU2IC6.mjs";
 import {
   Box
 } from "./chunk-AJWSQEDP.mjs";
-import {
-  useMergeRefs
-} from "./chunk-DEX36MFK.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -131,4 +131,4 @@ export {
   ModalFooter,
   Modal
 };
-//# sourceMappingURL=chunk-LCJSUBCZ.mjs.map
+//# sourceMappingURL=chunk-IHZ2MRF6.mjs.map

package/dist/chunk-IHZ2MRF6.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 *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>\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 *             <Button onClick={onMainAction}>Main action</Button>\n *             <Button variant=\"primary-outline\" onClick={onClose}>\n *               Cancel\n *             </Button>\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-3WVRY6CC.mjs → chunk-L4YBHIS3.mjs}

@@ -1,6 +1,3 @@
-import {
-  Box
-} from "./chunk-AJWSQEDP.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -8,31 +5,41 @@ import {
 } from "./chunk-R4SQKVDQ.mjs";
 
 // src/warning-banner/warning-banner.tsx
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx, jsxs } from "react/jsx-runtime";
 var WarningBanner = forwardRef(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
+    const descriptionId = useId();
     const expandable = !!description;
-    return /* @__PURE__ */ jsxs(Box, __spreadProps(__spreadValues({}, rest), { className: clsx("hds-warning-banner", className), ref, children: [
-      /* @__PURE__ */ jsx(WarningBannerTitle, { variant: expandable ? "expandable" : "default", children: title }),
-      expandable ? /* @__PURE__ */ jsx(WarningBannerDescription, { children: description }) : null
+    return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: clsx("hds-warning-banner", className), ref, children: [
+      /* @__PURE__ */ jsx(
+        WarningBannerTitle,
+        {
+          variant: expandable ? "expandable" : "default",
+          descriptionId,
+          children: title
+        }
+      ),
+      expandable ? /* @__PURE__ */ jsx(WarningBannerDescription, { id: descriptionId, children: description }) : null
     ] }));
   }
 );
 WarningBanner.displayName = "WarningBanner";
 var WarningBannerTitle = forwardRef((_a, ref) => {
-  var _b = _a, { variant, children, className } = _b, rest = __objRest(_b, ["variant", "children", "className"]);
+  var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
   const [open, setOpen] = useState(false);
   if (variant === "expandable") {
     return /* @__PURE__ */ jsx(
       "button",
       __spreadProps(__spreadValues({}, rest), {
+        "aria-expanded": open,
+        "aria-controls": descriptionId,
+        "data-state": open ? "open" : "closed",
         className: clsx(
           "hds-warning-banner__title",
           "hds-warning-banner__title-trigger",
-          { "hds-warning-banner--closed": !open },
           className
         ),
         onClick: () => {
@@ -40,7 +47,7 @@ var WarningBannerTitle = forwardRef((_a, ref) => {
         },
         ref,
         type: "button",
-        children: /* @__PURE__ */ jsx("span", { children })
+        children: /* @__PURE__ */ jsx("div", { children })
       })
     );
   }
@@ -56,10 +63,11 @@ var WarningBannerTitle = forwardRef((_a, ref) => {
 WarningBannerTitle.displayName = "WarningBannerTitle";
 var WarningBannerDescription = forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+    var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
     return /* @__PURE__ */ jsx(
       "p",
       __spreadValues({
+        id,
         className: clsx("hds-warning-banner__description", className),
         ref
       }, rest)
@@ -71,4 +79,4 @@ WarningBannerDescription.displayName = "WarningBannerDescription";
 export {
   WarningBanner
 };
-//# sourceMappingURL=chunk-3WVRY6CC.mjs.map
+//# sourceMappingURL=chunk-L4YBHIS3.mjs.map

package/dist/chunk-L4YBHIS3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/warning-banner/warning-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description?: ReactNode;\n}\n\nexport const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(\n  ({ title, description, className, ...rest }, ref) => {\n    const descriptionId = useId();\n    const expandable = !!description;\n    return (\n      <div {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle\n          variant={expandable ? \"expandable\" : \"default\"}\n          descriptionId={descriptionId}\n        >\n          {title}\n        </WarningBannerTitle>\n        {expandable ? (\n          <WarningBannerDescription id={descriptionId}>{description}</WarningBannerDescription>\n        ) : null}\n      </div>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n  | ({\n      variant: \"expandable\";\n      descriptionId: string;\n    } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n  | ({ variant: \"default\"; descriptionId?: string } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n  HTMLButtonElement | HTMLParagraphElement,\n  WarningBannerTitleProps\n>(({ variant, descriptionId, children, className, ...rest }, ref) => {\n  const [open, setOpen] = useState<boolean>(false);\n  if (variant === \"expandable\") {\n    return (\n      <button\n        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        aria-expanded={open}\n        aria-controls={descriptionId}\n        data-state={open ? \"open\" : \"closed\"}\n        className={clsx(\n          \"hds-warning-banner__title\",\n          \"hds-warning-banner__title-trigger\",\n          className as undefined,\n        )}\n        onClick={() => {\n          setOpen((prev) => !prev);\n        }}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        <div>{children}</div>\n      </button>\n    );\n  }\n  return (\n    <p\n      {...(rest as React.HTMLAttributes<HTMLParagraphElement>)}\n      className={clsx(\"hds-warning-banner__title\", className as undefined)}\n      ref={ref as React.Ref<HTMLParagraphElement>}\n    >\n      {children}\n    </p>\n  );\n});\nWarningBannerTitle.displayName = \"WarningBannerTitle\";\n\ntype WarningBannerDescriptionProps = { id: string } & React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n  ({ className, id, ...rest }, ref) => {\n    return (\n      <p\n        id={id}\n        className={clsx(\"hds-warning-banner__description\", className as undefined)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\nWarningBannerDescription.displayName = \"WarningBannerDescription\";\n"],"mappings":";;;;;;;AACA,SAAgB,YAAY,OAAO,gBAAgB;AACnD,SAAS,YAAY;AAYf,SACE,KADF;AALC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAVzB,IAUG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,gBAAgB,MAAM;AAC5B,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,qBAAC,wCAAQ,OAAR,EAAc,WAAW,KAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,aAAa,eAAe;AAAA,UACrC;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,aACC,oBAAC,4BAAyB,IAAI,eAAgB,uBAAY,IACxD;AAAA,QACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAS5B,IAAM,qBAAqB,WAGzB,CAAC,IAA0D,QAAQ;AAAlE,eAAE,WAAS,eAAe,UAAU,UAxCvC,IAwCG,IAAkD,iBAAlD,IAAkD,CAAhD,WAAS,iBAAe,YAAU;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,cAAY,OAAO,SAAS;AAAA,QAC5B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,SAAK,UAAS;AAAA;AAAA,IACjB;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA,qCACM,OADN;AAAA,MAEC,WAAW,KAAK,6BAA6B,SAAsB;AAAA,MACnE;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,mBAAmB,cAAc;AAGjC,IAAM,2BAA2B;AAAA,EAC/B,CAAC,IAA4B,QAAQ;AAApC,iBAAE,aAAW,GA9EhB,IA8EG,IAAoB,iBAApB,IAAoB,CAAlB,aAAW;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":[]}

package/dist/{chunk-6R7AXKBR.mjs → chunk-OIC2CPID.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-MOU6WBT2.mjs";
 import {
   focusTrap
-} from "./chunk-DEX36MFK.mjs";
+} from "./chunk-TDXU2IC6.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -15,17 +15,17 @@ import {
 import { createContext, useContext, forwardRef, useState, useEffect, useId } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx, jsxs } from "react/jsx-runtime";
-var expandableMenuContext = createContext([
-  false,
-  () => {
+var ExpandableMenuContext = createContext(null);
+var useNavbarExpendableMenuContext = () => {
+  const value = useContext(ExpandableMenuContext);
+  if (value === null) {
+    throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
   }
-]);
-var useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);
+  return value;
+};
 function NavbarExpandableMenu({ children }) {
+  const contentId = useId();
   const [open, setOpen] = useState(false);
-  function toggleOpen() {
-    setOpen((prev) => !prev);
-  }
   useEffect(() => {
     if (open) {
       window.scrollTo(0, 0);
@@ -39,7 +39,7 @@ function NavbarExpandableMenu({ children }) {
       };
     }
   }, [open]);
-  return /* @__PURE__ */ jsx(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
+  return /* @__PURE__ */ jsx(ExpandableMenuContext.Provider, { value: { contentId, open, setOpen }, children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
 var NavbarExpandableMenuTrigger = forwardRef(
@@ -59,7 +59,7 @@ var NavbarExpandableMenuTrigger = forwardRef(
       "style",
       "className"
     ]);
-    const [open, toggleOpen] = useNavbarExpendableMenuContext();
+    const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
     const [textWidth, setTextWidth] = useState(void 0);
     const measurementId = useId();
     useEffect(() => {
@@ -71,9 +71,14 @@ var NavbarExpandableMenuTrigger = forwardRef(
     const text = open ? whenOpenText : whenClosedText;
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const icon = open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {});
+    function toggleOpen() {
+      setOpen(!open);
+    }
     return /* @__PURE__ */ jsxs(
       "button",
       __spreadProps(__spreadValues({
+        "aria-expanded": open,
+        "aria-controls": contentId,
         className: clsx("hds-navbar__item", className),
         onClick: toggleOpen,
         ref,
@@ -127,10 +132,11 @@ var NavbarExpandableMenuTrigger = forwardRef(
 NavbarExpandableMenuTrigger.displayName = "Navbar.ExpandableMenuTrigger";
 var NavbarExpandableMenuContent = forwardRef((_a, ref) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
-  const [open] = useNavbarExpendableMenuContext();
+  const { contentId, open } = useNavbarExpendableMenuContext();
   return /* @__PURE__ */ jsx(
     "section",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
+      id: contentId,
       className: clsx("hds-navbar__expandable-menu-content", className),
       "data-state": open ? "open" : "closed"
     }), { inert: open ? void 0 : "true" }), {
@@ -147,4 +153,4 @@ export {
   NavbarExpandableMenuTrigger,
   NavbarExpandableMenuContent
 };
-//# sourceMappingURL=chunk-6R7AXKBR.mjs.map
+//# sourceMappingURL=chunk-OIC2CPID.mjs.map

package/dist/chunk-OIC2CPID.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useEffect, useId } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../utils/utils\";\nimport { CloseIcon, MenuIcon } from \"./icons\";\n\ninterface ExpandableMenuContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n}\nconst ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);\nexport const useNavbarExpendableMenuContext = () => {\n  const value = useContext(ExpandableMenuContext);\n  if (value === null) {\n    throw new Error(\"useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu\");\n  }\n  return value;\n};\n\nexport interface NavbarExpandableMenuProps {\n  children: React.ReactNode;\n}\n\n/**\n * Expandable Menu Provider\n * Handles scroll and focus locking,\n * as well as scrolling the user to the top of the page.\n *\n * If we want a sticky header in the future the scrolling should be configurable\n */\nexport function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {\n  const contentId = useId();\n  const [open, setOpen] = useState(false);\n\n  useEffect(() => {\n    if (open) {\n      window.scrollTo(0, 0);\n      document.body.classList.add(clsx(\"hds-navbar-scroll-lock\"));\n      const releaseFocusTrap = focusTrap(\n        document.getElementsByClassName(clsx(\"hds-navbar\"))[0] as HTMLElement,\n      );\n\n      return () => {\n        document.body.classList.remove(clsx(\"hds-navbar-scroll-lock\"));\n        releaseFocusTrap();\n      };\n    }\n  }, [open]);\n\n  return (\n    <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>\n      {children}\n    </ExpandableMenuContext.Provider>\n  );\n}\nNavbarExpandableMenu.displayName = \"NavbarExpandableMenu\";\n\n/**\n * Trigger\n */\nexport interface NavbarExpandableMenuTriggerProps\n  extends Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\"> {\n  whenClosedText: React.ReactNode;\n  whenClosedHelperTitle?: string;\n\n  whenOpenText: React.ReactNode;\n  whenOpenHelperTitle?: string;\n}\nexport const NavbarExpandableMenuTrigger = forwardRef<\n  HTMLButtonElement,\n  NavbarExpandableMenuTriggerProps\n>(\n  (\n    {\n      whenClosedText,\n      whenClosedHelperTitle,\n\n      whenOpenText,\n      whenOpenHelperTitle,\n\n      style,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { contentId, open, setOpen } = useNavbarExpendableMenuContext();\n\n    // Measure the width of the text when open and closed and choose the widest one\n    // This is to ensure that the button doesn't change size when the text changes\n    const [textWidth, setTextWidth] = useState<number | undefined>(undefined);\n    const measurementId = useId();\n    useEffect(() => {\n      const widthWhenOpen =\n        document.getElementById(`${measurementId}-when-open`)?.getBoundingClientRect().width ?? 0;\n      const widthWhenClosed =\n        document.getElementById(`${measurementId}-when-closed`)?.getBoundingClientRect().width ?? 0;\n\n      setTextWidth(widthWhenOpen < widthWhenClosed ? widthWhenClosed : widthWhenOpen);\n    }, [measurementId]);\n\n    const text = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n    const icon = open ? <CloseIcon /> : <MenuIcon />;\n\n    function toggleOpen() {\n      setOpen(!open);\n    }\n\n    return (\n      <button\n        aria-expanded={open}\n        aria-controls={contentId}\n        className={clsx(\"hds-navbar__item\", className as undefined)}\n        onClick={toggleOpen}\n        ref={ref}\n        title={title}\n        type=\"button\"\n        style={{ position: \"relative\", ...style }}\n        {...rest}\n      >\n        {/* Measurement elements, not shown to the user */}\n        <span\n          id={`${measurementId}-when-closed`}\n          aria-hidden\n          style={{\n            position: \"absolute\",\n            visibility: \"hidden\",\n            pointerEvents: \"none\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {whenOpenText}\n        </span>\n        <span\n          id={`${measurementId}-when-open`}\n          aria-hidden\n          style={{\n            position: \"absolute\",\n            visibility: \"hidden\",\n            pointerEvents: \"none\",\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {whenClosedText}\n        </span>\n\n        {/* Actual content */}\n        <span\n          style={{ width: textWidth, whiteSpace: \"nowrap\" }}\n          className={clsx(\"hds-navbar__item-responsive-text\")}\n        >\n          {text}\n        </span>\n        <span style={{ width: 32, height: 32 }}>{icon}</span>\n      </button>\n    );\n  },\n);\nNavbarExpandableMenuTrigger.displayName = \"Navbar.ExpandableMenuTrigger\";\n\n/**\n * Content\n */\nexport interface NavbarExpandableMenuContentProps {\n  children: React.ReactNode;\n  className?: string;\n}\nexport const NavbarExpandableMenuContent = forwardRef<\n  HTMLDivElement,\n  NavbarExpandableMenuContentProps\n>(({ children, className, ...rest }, ref) => {\n  const { contentId, open } = useNavbarExpendableMenuContext();\n  return (\n    <section\n      {...rest}\n      id={contentId}\n      className={clsx(\"hds-navbar__expandable-menu-content\", className as undefined)}\n      data-state={open ? \"open\" : \"closed\"}\n      {...{ inert: open ? undefined : \"true\" }}\n      ref={ref}\n    >\n      <div className={clsx(\"hds-navbar__expandable-menu-content-inner\")}>{children}</div>\n    </section>\n  );\n});\nNavbarExpandableMenuContent.displayName = \"Navbar.ExpandableMenuContent\";\n"],"mappings":"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","names":["_a","_b"]}

package/dist/{chunk-7UD72WOC.mjs → chunk-QZZIOBF4.mjs}

@@ -1,7 +1,7 @@
 import {
   TabsList,
   TabsTab
-} from "./chunk-4WQWU5TL.mjs";
+} from "./chunk-AXQCREUJ.mjs";
 import {
   TabsContent,
   TabsContents
@@ -37,4 +37,4 @@ Tabs.Content = TabsContent;
 export {
   Tabs
 };
-//# sourceMappingURL=chunk-7UD72WOC.mjs.map
+//# sourceMappingURL=chunk-QZZIOBF4.mjs.map

package/dist/{chunk-A2H2LAII.mjs → chunk-SKVM7G76.mjs}

@@ -1,6 +1,6 @@
 import {
   AccordionItemContext
-} from "./chunk-V3PAFMK5.mjs";
+} from "./chunk-YQFL5UN4.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -8,12 +8,13 @@ import {
 } from "./chunk-R4SQKVDQ.mjs";
 
 // src/accordion/accordion-item.tsx
-import { forwardRef, useState } from "react";
+import { forwardRef, useId, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx } from "react/jsx-runtime";
 var AccordionItem = forwardRef(
   (_a, ref) => {
     var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
+    const contentId = useId();
     const [innerOpen, setInnerOpen] = useState(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
@@ -29,7 +30,7 @@ var AccordionItem = forwardRef(
         "data-state": open ? "open" : "closed",
         className: clsx("hds-accordion-item", className),
         ref,
-        children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+        children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { contentId, open, setOpen: handleOpen }, children })
       })
     );
   }
@@ -39,4 +40,4 @@ AccordionItem.displayName = "Accordion.Item";
 export {
   AccordionItem
 };
-//# sourceMappingURL=chunk-A2H2LAII.mjs.map
+//# sourceMappingURL=chunk-SKVM7G76.mjs.map

package/dist/chunk-SKVM7G76.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion-item.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { forwardRef, useId, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\nimport type { AccordionHeaderProps } from \"./accordion-header\";\nimport type { AccordionContentProps } from \"./accordion-content\";\n\nexport type AccordionItemChildrenType =\n  | ReactElement<AccordionHeaderProps>\n  | ReactElement<AccordionContentProps>;\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Control the open state of the accordion manually\n   */\n  open?: boolean;\n\n  /**\n   * Use with open to control the open state of the accordion manually\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * If the accordion should be open by default\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Accepts type of Accordion.Content and Accordion.Header\n   */\n  children: AccordionItemChildrenType[];\n}\n\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(\n  ({ children, defaultOpen, open: outerOpen, onOpenChange, className, ...rest }, ref) => {\n    const contentId = useId();\n    const [innerOpen, setInnerOpen] = useState(defaultOpen ?? false);\n    const open = outerOpen ?? innerOpen;\n\n    const handleOpen = () => {\n      if (outerOpen !== undefined) {\n        onOpenChange && onOpenChange(!open);\n      } else {\n        setInnerOpen(!open);\n      }\n    };\n\n    return (\n      <div\n        {...rest}\n        data-state={open ? \"open\" : \"closed\"}\n        className={clsx(\"hds-accordion-item\", className as undefined)}\n        ref={ref}\n      >\n        <AccordionItemContext.Provider value={{ contentId, open, setOpen: handleOpen }}>\n          {children}\n        </AccordionItemContext.Provider>\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = \"Accordion.Item\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,OAAO,gBAAgB;AAC5C,SAAS,YAAY;AAoDb;AArBD,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA8E,QAAQ;AAAtF,iBAAE,YAAU,aAAa,MAAM,WAAW,cAAc,UAlC3D,IAkCG,IAAsE,iBAAtE,IAAsE,CAApE,YAAU,eAAa,QAAiB,gBAAc;AACvD,UAAM,YAAY,MAAM;AACxB,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,oCAAe,KAAK;AAC/D,UAAM,OAAO,gCAAa;AAE1B,UAAM,aAAa,MAAM;AACvB,UAAI,cAAc,QAAW;AAC3B,wBAAgB,aAAa,CAAC,IAAI;AAAA,MACpC,OAAO;AACL,qBAAa,CAAC,IAAI;AAAA,MACpB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,uCACK,OADL;AAAA,QAEC,cAAY,OAAO,SAAS;AAAA,QAC5B,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,QAEA,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,WAAW,MAAM,SAAS,WAAW,GAC1E,UACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

package/dist/chunk-SRLM3K2X.mjs

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

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-GLAEI3SD.mjs → chunk-VCQIR53Y.mjs}

@@ -1,6 +1,6 @@
 import {
   AccordionItemContext
-} from "./chunk-V3PAFMK5.mjs";
+} from "./chunk-YQFL5UN4.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -21,6 +21,7 @@ var AccordionContent = forwardRef(
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        id: context.contentId,
         "aria-hidden": !context.open,
         "data-state": context.open ? "open" : "closed"
       }, { inert: context.open ? void 0 : "true" }), {
@@ -37,4 +38,4 @@ AccordionContent.displayName = "Accordion.Content";
 export {
   AccordionContent
 };
-//# sourceMappingURL=chunk-GLAEI3SD.mjs.map
+//# sourceMappingURL=chunk-VCQIR53Y.mjs.map

package/dist/chunk-VCQIR53Y.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/accordion-content.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { forwardRef, useContext } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { AccordionItemContext } from \"./context\";\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  ({ children, className, ...rest }, ref) => {\n    const context = useContext(AccordionItemContext);\n    if (context === null) {\n      return null;\n    }\n    return (\n      <div\n        id={context.contentId}\n        aria-hidden={!context.open}\n        data-state={context.open ? \"open\" : \"closed\"}\n        {...{ inert: context.open ? undefined : \"true\" }}\n        className={clsx(\"hds-accordion-item-content\", className as undefined)}\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(\"hds-accordion-item-content-inner\")}>{children}</div>\n      </div>\n    );\n  },\n);\n\nAccordionContent.displayName = \"Accordion.Content\";\n"],"mappings":";;;;;;;;;;AACA,SAAS,YAAY,kBAAkB;AACvC,SAAS,YAAY;AAuBb;AAhBD,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAkC,QAAQ;AAA1C,iBAAE,YAAU,UAVf,IAUG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,UAAM,UAAU,WAAW,oBAAoB;AAC/C,QAAI,YAAY,MAAM;AACpB,aAAO;AAAA,IACT;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,QAAQ;AAAA,QACZ,eAAa,CAAC,QAAQ;AAAA,QACtB,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,QAAQ,OAAO,SAAY,OAAO,IAJhD;AAAA,QAKC,WAAW,KAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OAPL;AAAA,QASC,8BAAC,SAAI,WAAW,KAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/{chunk-V3PAFMK5.mjs → chunk-YQFL5UN4.mjs}

@@ -5,4 +5,4 @@ var AccordionItemContext = createContext(null);
 export {
   AccordionItemContext
 };
-//# sourceMappingURL=chunk-V3PAFMK5.mjs.map
+//# sourceMappingURL=chunk-YQFL5UN4.mjs.map

package/dist/chunk-YQFL5UN4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/accordion/context.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport interface AccordionItemContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n}\n\nexport const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);\n"],"mappings":";AAAA,SAAS,qBAAqB;AAQvB,IAAM,uBAAuB,cAAgD,IAAI;","names":[]}

package/dist/footer/footer.js

@@ -77,6 +77,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var AccordionItem = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, defaultOpen, open: outerOpen, onOpenChange, className } = _b, rest = __objRest(_b, ["children", "defaultOpen", "open", "onOpenChange", "className"]);
+    const contentId = (0, import_react2.useId)();
     const [innerOpen, setInnerOpen] = (0, import_react2.useState)(defaultOpen != null ? defaultOpen : false);
     const open = outerOpen != null ? outerOpen : innerOpen;
     const handleOpen = () => {
@@ -92,7 +93,7 @@ var AccordionItem = (0, import_react2.forwardRef)(
         "data-state": open ? "open" : "closed",
         className: (0, import_typed_classname.clsx)("hds-accordion-item", className),
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { open, setOpen: handleOpen }, children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionItemContext.Provider, { value: { contentId, open, setOpen: handleOpen }, children })
       })
     );
   }
@@ -118,6 +119,7 @@ var AccordionHeader = (0, import_react3.forwardRef)(
       "button",
       __spreadProps(__spreadValues({}, rest), {
         "aria-expanded": context.open,
+        "aria-controls": context.contentId,
         "data-state": context.open ? "open" : "closed",
         className: (0, import_typed_classname2.clsx)("hds-accordion-item-header", className),
         onClick: expandOrCollapse,
@@ -144,6 +146,7 @@ var AccordionContent = (0, import_react4.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+        id: context.contentId,
         "aria-hidden": !context.open,
         "data-state": context.open ? "open" : "closed"
       }, { inert: context.open ? void 0 : "true" }), {
@@ -242,10 +245,9 @@ var Button = (0, import_react8.forwardRef)(
     var _b = _a, {
       asChild,
       children,
-      variant,
+      variant = "primary",
       size = "medium",
       fullWidth = false,
-      fill = "contained",
       icon,
       className
     } = _b, rest = __objRest(_b, [
@@ -254,7 +256,6 @@ var Button = (0, import_react8.forwardRef)(
       "variant",
       "size",
       "fullWidth",
-      "fill",
       "icon",
       "className"
     ]);
@@ -265,9 +266,8 @@ var Button = (0, import_react8.forwardRef)(
         className: (0, import_typed_classname7.clsx)(
           "hds-button",
           `hds-button--${size}`,
+          `hds-button--${variant}`,
           {
-            [`hds-button--${variant}`]: fill === "contained",
-            [`hds-button--outline-${variant}`]: fill === "outline",
             "hds-button--full": fullWidth === true,
             "hds-button--mobile-full": fullWidth === "mobile",
             "hds-button--icon-only": icon
@@ -282,14 +282,6 @@ var Button = (0, import_react8.forwardRef)(
   }
 );
 Button.displayName = "Button";
-var PrimaryButton = (0, import_react8.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "primary" }));
-});
-PrimaryButton.displayName = "PrimaryButton";
-var SecondaryButton = (0, import_react8.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, __spreadProps(__spreadValues({}, props), { ref, variant: "secondary" }));
-});
-SecondaryButton.displayName = "SecondaryButton";
 
 // src/footer/footer.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -305,7 +297,7 @@ var FooterButtonLink = (0, import_react9.forwardRef)(
   (_a, ref) => {
     var _b = _a, { children, className, asChild } = _b, rest = __objRest(_b, ["children", "className", "asChild"]);
     const Component = asChild ? import_react_slot2.Slot : "a";
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PrimaryButton, { asChild: true, fill: "outline", className: (0, import_typed_classname8.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { asChild: true, variant: "primary-outline", className: (0, import_typed_classname8.clsx)(className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, __spreadProps(__spreadValues({ ref }, rest), { children })) });
   }
 );
 FooterButtonLink.displayName = "FooterButton";