@postenbring/hedwig-react 0.0.83 → 0.0.84

package/src/badge/badge.tsx

@@ -5,6 +5,13 @@ import { forwardRef } from "react";
 export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
 
+  /**
+   * Color of the badge
+   *
+   * @default "lighter"
+   */
+  variant?: "lighter" | "dark" | "white" | "warning";
+
   /**
    * Font size of the badge
    *
@@ -20,44 +27,29 @@ export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement>
   asChild?: boolean;
 }
 
-const Badge = forwardRef<
-  HTMLSpanElement,
-  BadgeProps & { variant: "lighter" | "dark" | "white" | "warning" }
->(({ children, asChild, variant, size = "small", className, ...rest }, ref) => {
-  const Component = asChild ? Slot : "span";
-  return (
-    <Component
-      ref={ref}
-      className={clsx(
-        "hds-badge",
-        `hds-badge--${size}`,
-        `hds-badge--${variant}`,
-        className as undefined,
-      )}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-});
+/**
+ * Badges are used to label, categorize or organize items using keywords to describe them.
+ *
+ * @example
+ * <Badge variant="dark">Dark</Badge>
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ children, asChild, variant = "lighter", size = "small", className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        ref={ref}
+        className={clsx(
+          "hds-badge",
+          `hds-badge--${size}`,
+          `hds-badge--${variant}`,
+          className as undefined,
+        )}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
 Badge.displayName = "Badge";
-
-export const LighterBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
-  return <Badge {...props} ref={ref} variant="lighter" />;
-});
-LighterBadge.displayName = "LighterBadge";
-
-export const DarkBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
-  return <Badge {...props} ref={ref} variant="dark" />;
-});
-DarkBadge.displayName = "DarkBadge";
-
-export const WhiteBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
-  return <Badge {...props} ref={ref} variant="white" />;
-});
-WhiteBadge.displayName = "WhiteBadge";
-
-export const WarningBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
-  return <Badge {...props} ref={ref} variant="warning" />;
-});
-WarningBadge.displayName = "WarningBadge";

package/src/badge/index.tsx

@@ -1,3 +1,3 @@
-export { LighterBadge as Badge, DarkBadge, WarningBadge, WhiteBadge } from "./badge";
+export { Badge } from "./badge";
 
 export type * from "./badge";

package/src/button/button.stories.tsx

@@ -2,11 +2,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { HStack } from "../layout";
 import type { ButtonProps } from ".";
-import { PrimaryButton, SecondaryButton } from ".";
+import { Button } from ".";
 
-const meta: Meta<typeof PrimaryButton> = {
+const meta: Meta<typeof Button> = {
   title: "Button",
-  component: PrimaryButton,
+  component: Button,
   argTypes: {
     fullWidth: { control: "radio", options: [false, true, "mobile"] },
   },
@@ -14,33 +14,33 @@ const meta: Meta<typeof PrimaryButton> = {
 
 export default meta;
 
-type Story = StoryObj<typeof PrimaryButton>;
+type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
   args: {
+    variant: "primary",
     children: "Primary button",
   },
 };
 
 export const PrimaryOutline: Story = {
   args: {
+    variant: "primary-outline",
     children: "Primary outline button",
-    fill: "outline",
   },
 };
 
 export const Secondary: Story = {
   args: {
+    variant: "secondary",
     children: "Secondary button",
   },
-  render: (props) => <SecondaryButton {...props} />,
 };
 
 export const SecondaryOutline: Story = {
-  render: (props) => <SecondaryButton {...props} />,
   args: {
+    variant: "secondary-outline",
     children: "Secondary outline button",
-    fill: "outline",
   },
 };
 
@@ -48,10 +48,10 @@ export const AsALink: Story = {
   name: "As a link",
   render: (args) => (
     <HStack gap="16" wrap>
-      <PrimaryButton {...args} />
-      <PrimaryButton {...args} fill="outline" />
-      <SecondaryButton {...args} />
-      <SecondaryButton {...args} fill="outline" />
+      <Button {...args} variant="primary" />
+      <Button {...args} variant="primary-outline" />
+      <Button {...args} variant="secondary" />
+      <Button {...args} variant="secondary-outline" />
     </HStack>
   ),
   args: {
@@ -65,7 +65,7 @@ export const AsALink: Story = {
 };
 
 const createIconStory = (
-  Component: typeof PrimaryButton,
+  Component: typeof Button,
   extraArgs: Partial<ButtonProps> = {},
 ): Story => ({
   render: (args) => (
@@ -98,7 +98,9 @@ const createIconStory = (
   },
 });
 
-export const IconPrimary: Story = createIconStory(PrimaryButton);
-export const IconPrimaryOutline: Story = createIconStory(PrimaryButton, { fill: "outline" });
-export const IconSecondary: Story = createIconStory(SecondaryButton);
-export const IconSecondaryOutline: Story = createIconStory(SecondaryButton, { fill: "outline" });
+export const IconPrimary: Story = createIconStory(Button, { variant: "secondary" });
+export const IconPrimaryOutline: Story = createIconStory(Button, { variant: "primary-outline" });
+export const IconSecondary: Story = createIconStory(Button, { variant: "secondary" });
+export const IconSecondaryOutline: Story = createIconStory(Button, {
+  variant: "secondary-outline",
+});

package/src/button/button.tsx

@@ -9,11 +9,11 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   size?: "small" | "medium" | "large";
 
   /**
-   * The background fill of the button
+   * The background and fill of the button
    *
-   * @default "contained"
+   * @default "primary"
    */
-  fill?: "contained" | "outline";
+  variant?: "primary" | "secondary" | "primary-outline" | "secondary-outline";
 
   /**
    * Make the button use 100% width available.
@@ -36,15 +36,27 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   asChild?: boolean;
 }
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary" | "secondary" }>(
+/**
+ * Button component
+ *
+ * @example
+ * <Button variant="primary">Primary</Button>
+ * <Button variant="secondary" size="large">Secondary</Button>
+ * <Button variant="primary-outline">Primary Outline</Button>
+ * <Button variant="secondary-outline" fullWidth="mobile">Secondary Outline</Button>
+ *
+ * @example
+ * // If used for navigation use the `asChild` prop with a anchor element as a child.
+ * <Button asChild><a href="/home">Home</a></Button>
+ */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       asChild,
       children,
-      variant,
+      variant = "primary",
       size = "medium",
       fullWidth = false,
-      fill = "contained",
       icon,
       className,
       ...rest
@@ -57,9 +69,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary"
         className={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,
@@ -75,13 +86,3 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary"
   },
 );
 Button.displayName = "Button";
-
-export const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <Button {...props} ref={ref} variant="primary" />;
-});
-PrimaryButton.displayName = "PrimaryButton";
-
-export const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  return <Button {...props} ref={ref} variant="secondary" />;
-});
-SecondaryButton.displayName = "SecondaryButton";

package/src/button/index.tsx

@@ -1,3 +1,3 @@
-export { PrimaryButton, SecondaryButton } from "./button";
+export { Button } from "./button";
 
 export type * from "./button";

package/src/footer/footer.tsx

@@ -3,7 +3,7 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { Accordion } from "../accordion";
 import { LinkList } from "../list/link-list";
-import { PrimaryButton } from "../button";
+import { Button } from "../button";
 
 interface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -47,11 +47,11 @@ export const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkPr
   ({ children, className, asChild, ...rest }, ref) => {
     const Component = asChild ? Slot : "a";
     return (
-      <PrimaryButton asChild fill="outline" className={clsx(className as undefined)}>
+      <Button asChild variant="primary-outline" className={clsx(className as undefined)}>
         <Component ref={ref} {...rest}>
           {children}
         </Component>
-      </PrimaryButton>
+      </Button>
     );
   },
 );

package/src/form/input/input.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { PrimaryButton, SecondaryButton } from "../../button";
+import { Button } from "../../button";
 import { HStack, VStack } from "../../layout";
 import { Input } from ".";
 
@@ -118,7 +118,7 @@ export const TrackingNumberSearch: Story = {
       }}
     >
       <Input label="Sporingsnummer" style={{ width: "100%" }} />
-      <PrimaryButton size="large">Spor</PrimaryButton>
+      <Button size="large">Spor</Button>
     </HStack>
   ),
 };
@@ -148,16 +148,16 @@ export const FormWithErrorsOnSubmit: Story = {
           <Input errorMessage={errors.Two} label="Two" name="Two" />
           <Input errorMessage={errors.Three} label="Three" name="Three" />
           <VStack gap="4">
-            <PrimaryButton type="submit">Submit</PrimaryButton>
-            <SecondaryButton
-              fill="outline"
+            <Button type="submit">Submit</Button>
+            <Button
+              variant="secondary-outline"
               onClick={() => {
                 setErrors({});
               }}
               type="reset"
             >
               Reset
-            </SecondaryButton>
+            </Button>
           </VStack>
         </form>
       </VStack>

package/src/modal/modal.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
-import { PrimaryButton } from "../button";
+import { Button } from "../button";
 import { Link } from "../link";
 import { Message } from "../message";
 import { StyledHtml } from "../styled-html";
@@ -24,7 +24,7 @@ export const Main = {
 
     return (
       <>
-        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+        <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
         <Modal ref={modalRef} {...args}>
           <Modal.Header>Dialog header</Modal.Header>
           <Modal.Content>
@@ -35,10 +35,10 @@ export const Main = {
           </Modal.Content>
           <Modal.Footer>
             <HStack gap="16" wrap>
-              <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
-              <PrimaryButton fill="outline" onClick={onClose}>
+              <Button onClick={onMainAction}>Main action</Button>
+              <Button variant="primary-outline" onClick={onClose}>
                 Cancel
-              </PrimaryButton>
+              </Button>
             </HStack>
           </Modal.Footer>
         </Modal>
@@ -53,7 +53,7 @@ export const ShareParcelModal = {
     const open = window.location.search.includes("viewMode=story");
     return (
       <>
-        <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+        <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
         <Modal ref={modalRef} {...args} closeOnBackdropClick open={open}>
           <Modal.Header>Legg til pakken</Modal.Header>
           <Modal.Content>
@@ -67,7 +67,7 @@ export const ShareParcelModal = {
             </StyledHtml>
           </Modal.Content>
           <Modal.Footer>
-            <PrimaryButton fullWidth="mobile">Legg til pakken i Posten-appen </PrimaryButton>
+            <Button fullWidth="mobile">Legg til pakken i Posten-appen </Button>
           </Modal.Footer>
         </Modal>
       </>
@@ -136,9 +136,9 @@ export const AsAReadMore: Story = {
           </Modal.Content>
 
           <Modal.Footer>
-            <PrimaryButton fullWidth="mobile" onClick={() => modalRef.current?.close()}>
+            <Button fullWidth="mobile" onClick={() => modalRef.current?.close()}>
               Lukk
-            </PrimaryButton>
+            </Button>
           </Modal.Footer>
         </Modal>
       </>

package/src/modal/modal.tsx

@@ -96,7 +96,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
  *
  *   return (
  *     <>
- *       <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+ *       <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
  *       <Modal ref={modalRef}>
  *         <Modal.Header>Dialog header</Modal.Header>
  *         <Modal.Content>
@@ -107,10 +107,10 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
  *         </Modal.Content>
  *         <Modal.Footer>
  *           <HStack gap="16" wrap>
- *             <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
- *             <PrimaryButton fill="outline" onClick={onClose}>
+ *             <Button onClick={onMainAction}>Main action</Button>
+ *             <Button variant="primary-outline" onClick={onClose}>
  *               Cancel
- *             </PrimaryButton>
+ *             </Button>
  *           </HStack>
  *         </Modal.Footer>
  *       </Modal>

package/src/navbar/navbar-expandable-menu.tsx

@@ -3,13 +3,19 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { focusTrap } from "../utils/utils";
 import { CloseIcon, MenuIcon } from "./icons";
 
-const expandableMenuContext = createContext([
-  false as boolean,
-  () => {
-    // Empty
-  },
-] as const);
-export const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);
+interface ExpandableMenuContextProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentId: string;
+}
+const ExpandableMenuContext = createContext<ExpandableMenuContextProps | null>(null);
+export const useNavbarExpendableMenuContext = () => {
+  const value = useContext(ExpandableMenuContext);
+  if (value === null) {
+    throw new Error("useNavbarExpendableMenuContext must be used within a Navbar.ExpandableMenu");
+  }
+  return value;
+};
 
 export interface NavbarExpandableMenuProps {
   children: React.ReactNode;
@@ -23,10 +29,8 @@ export interface NavbarExpandableMenuProps {
  * If we want a sticky header in the future the scrolling should be configurable
  */
 export function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {
+  const contentId = useId();
   const [open, setOpen] = useState(false);
-  function toggleOpen() {
-    setOpen((prev) => !prev);
-  }
 
   useEffect(() => {
     if (open) {
@@ -44,9 +48,9 @@ export function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps) {
   }, [open]);
 
   return (
-    <expandableMenuContext.Provider value={[open, toggleOpen]}>
+    <ExpandableMenuContext.Provider value={{ contentId, open, setOpen }}>
       {children}
-    </expandableMenuContext.Provider>
+    </ExpandableMenuContext.Provider>
   );
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
@@ -80,7 +84,7 @@ export const NavbarExpandableMenuTrigger = forwardRef<
     },
     ref,
   ) => {
-    const [open, toggleOpen] = useNavbarExpendableMenuContext();
+    const { contentId, open, setOpen } = useNavbarExpendableMenuContext();
 
     // Measure the width of the text when open and closed and choose the widest one
     // This is to ensure that the button doesn't change size when the text changes
@@ -99,8 +103,14 @@ export const NavbarExpandableMenuTrigger = forwardRef<
     const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;
     const icon = open ? <CloseIcon /> : <MenuIcon />;
 
+    function toggleOpen() {
+      setOpen(!open);
+    }
+
     return (
       <button
+        aria-expanded={open}
+        aria-controls={contentId}
         className={clsx("hds-navbar__item", className as undefined)}
         onClick={toggleOpen}
         ref={ref}
@@ -160,10 +170,11 @@ export const NavbarExpandableMenuContent = forwardRef<
   HTMLDivElement,
   NavbarExpandableMenuContentProps
 >(({ children, className, ...rest }, ref) => {
-  const [open] = useNavbarExpendableMenuContext();
+  const { contentId, open } = useNavbarExpendableMenuContext();
   return (
     <section
       {...rest}
+      id={contentId}
       className={clsx("hds-navbar__expandable-menu-content", className as undefined)}
       data-state={open ? "open" : "closed"}
       {...{ inert: open ? undefined : "true" }}

package/src/show-more/index.ts

@@ -1,5 +1,2 @@
-export { AutoAnimateHeight } from "../utils/auto-animate-height";
-export type * from "../utils/auto-animate-height";
-
 export { ShowMoreButton } from "./show-more";
 export type * from "./show-more";

package/src/skeleton/skeleton.stories.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { StyledHtml } from "../styled-html";
 import { Card } from "../card";
 import { CardStory } from "../card/card.stories";
-import { PrimaryButton } from "../button";
+import { Button } from "../button";
 import { HStack, VStack } from "../layout";
 import { Skeleton } from ".";
 
@@ -91,14 +91,14 @@ export const LoadingCards: Story = {
     const card = isLoading ? skeletonCard : realCard;
     return (
       <div>
-        <PrimaryButton
+        <Button
           size="small"
           onClick={() => {
             setIsLoading(true);
           }}
         >
           Reload
-        </PrimaryButton>
+        </Button>
         <p className="hds-mt-8">Only use greytones, never any red or green colors.</p>
         <HStack className="hds-mt-16" wrap gap="24">
           {card}

package/src/warning-banner/warning-banner.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from "react";
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useId, useState } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { Box } from "../box";
 
 export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   title: ReactNode;
@@ -10,36 +9,47 @@ export interface WarningBannerProps extends Omit<React.HTMLAttributes<HTMLDivEle
 
 export const WarningBanner = forwardRef<HTMLDivElement, WarningBannerProps>(
   ({ title, description, className, ...rest }, ref) => {
+    const descriptionId = useId();
     const expandable = !!description;
     return (
-      <Box {...rest} className={clsx("hds-warning-banner", className as undefined)} ref={ref}>
-        <WarningBannerTitle variant={expandable ? "expandable" : "default"}>
+      <div {...rest} className={clsx("hds-warning-banner", className as undefined)} ref={ref}>
+        <WarningBannerTitle
+          variant={expandable ? "expandable" : "default"}
+          descriptionId={descriptionId}
+        >
           {title}
         </WarningBannerTitle>
-        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}
-      </Box>
+        {expandable ? (
+          <WarningBannerDescription id={descriptionId}>{description}</WarningBannerDescription>
+        ) : null}
+      </div>
     );
   },
 );
 WarningBanner.displayName = "WarningBanner";
 
 type WarningBannerTitleProps =
-  | ({ variant: "expandable" } & React.ButtonHTMLAttributes<HTMLButtonElement>)
-  | ({ variant: "default" } & React.HTMLAttributes<HTMLParagraphElement>);
+  | ({
+      variant: "expandable";
+      descriptionId: string;
+    } & React.ButtonHTMLAttributes<HTMLButtonElement>)
+  | ({ variant: "default"; descriptionId?: string } & React.HTMLAttributes<HTMLParagraphElement>);
 
 const WarningBannerTitle = forwardRef<
   HTMLButtonElement | HTMLParagraphElement,
   WarningBannerTitleProps
->(({ variant, children, className, ...rest }, ref) => {
+>(({ variant, descriptionId, children, className, ...rest }, ref) => {
   const [open, setOpen] = useState<boolean>(false);
   if (variant === "expandable") {
     return (
       <button
         {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+        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 as undefined,
         )}
         onClick={() => {
@@ -48,7 +58,7 @@ const WarningBannerTitle = forwardRef<
         ref={ref as React.Ref<HTMLButtonElement>}
         type="button"
       >
-        <span>{children}</span>
+        <div>{children}</div>
       </button>
     );
   }
@@ -64,11 +74,12 @@ const WarningBannerTitle = forwardRef<
 });
 WarningBannerTitle.displayName = "WarningBannerTitle";
 
-type WarningBannerDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+type WarningBannerDescriptionProps = { id: string } & React.HTMLAttributes<HTMLParagraphElement>;
 const WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(
-  ({ className, ...rest }, ref) => {
+  ({ className, id, ...rest }, ref) => {
     return (
       <p
+        id={id}
         className={clsx("hds-warning-banner__description", className as undefined)}
         ref={ref}
         {...rest}

package/dist/chunk-35TXKAUH.mjs.map

@@ -1 +0,0 @@
-{"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\nconst expandableMenuContext = createContext([\n  false as boolean,\n  () => {\n    // Empty\n  },\n] as const);\nexport const useNavbarExpendableMenuContext = () => useContext(expandableMenuContext);\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 [open, setOpen] = useState(false);\n  function toggleOpen() {\n    setOpen((prev) => !prev);\n  }\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={[open, toggleOpen]}>\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 [open, toggleOpen] = 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    return (\n      <button\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 [open] = useNavbarExpendableMenuContext();\n  return (\n    <section\n      {...rest}\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-3EFAPJ3H.mjs.map

@@ -1 +0,0 @@
-{"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        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;AA2Bb;AApBD,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,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-3WVRY6CC.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/warning-banner/warning-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { forwardRef, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box\";\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 expandable = !!description;\n    return (\n      <Box {...rest} className={clsx(\"hds-warning-banner\", className as undefined)} ref={ref}>\n        <WarningBannerTitle variant={expandable ? \"expandable\" : \"default\"}>\n          {title}\n        </WarningBannerTitle>\n        {expandable ? <WarningBannerDescription>{description}</WarningBannerDescription> : null}\n      </Box>\n    );\n  },\n);\nWarningBanner.displayName = \"WarningBanner\";\n\ntype WarningBannerTitleProps =\n  | ({ variant: \"expandable\" } & React.ButtonHTMLAttributes<HTMLButtonElement>)\n  | ({ variant: \"default\" } & React.HTMLAttributes<HTMLParagraphElement>);\n\nconst WarningBannerTitle = forwardRef<\n  HTMLButtonElement | HTMLParagraphElement,\n  WarningBannerTitleProps\n>(({ variant, 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        className={clsx(\n          \"hds-warning-banner__title\",\n          \"hds-warning-banner__title-trigger\",\n          { \"hds-warning-banner--closed\": !open },\n          className as undefined,\n        )}\n        onClick={() => {\n          setOpen((prev) => !prev);\n        }}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n      >\n        <span>{children}</span>\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 = React.HTMLAttributes<HTMLParagraphElement>;\nconst WarningBannerDescription = forwardRef<HTMLParagraphElement, WarningBannerDescriptionProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <p\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,gBAAgB;AAC5C,SAAS,YAAY;AAYf,SACE,KADF;AAJC,IAAM,gBAAgB;AAAA,EAC3B,CAAC,IAA4C,QAAQ;AAApD,iBAAE,SAAO,aAAa,UAXzB,IAWG,IAAoC,iBAApC,IAAoC,CAAlC,SAAO,eAAa;AACrB,UAAM,aAAa,CAAC,CAAC;AACrB,WACE,qBAAC,sCAAQ,OAAR,EAAc,WAAW,KAAK,sBAAsB,SAAsB,GAAG,KAC5E;AAAA,0BAAC,sBAAmB,SAAS,aAAa,eAAe,WACtD,iBACH;AAAA,MACC,aAAa,oBAAC,4BAA0B,uBAAY,IAA8B;AAAA,QACrF;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAM5B,IAAM,qBAAqB,WAGzB,CAAC,IAA2C,QAAQ;AAAnD,eAAE,WAAS,UAAU,UAhCxB,IAgCG,IAAmC,iBAAnC,IAAmC,CAAjC,WAAS,YAAU;AACtB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA,uCACM,OADN;AAAA,QAEC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,EAAE,8BAA8B,CAAC,KAAK;AAAA,UACtC;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,kBAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QAEL,8BAAC,UAAM,UAAS;AAAA;AAAA,IAClB;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,IAAwB,QAAQ;AAAhC,iBAAE,YApEL,IAoEG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,mCAAmC,SAAsB;AAAA,QACzE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,yBAAyB,cAAc;","names":[]}