@postenbring/hedwig-react 0.0.77 → 0.0.79

package/dist/_tsup-dts-rollup.d.mts

@@ -1498,7 +1498,7 @@ export { NavbarExpandableMenu as NavbarExpandableMenu_alias_1 }
 export { NavbarExpandableMenu as NavbarExpandableMenu_alias_2 }
 export { NavbarExpandableMenu as NavbarExpandableMenu_alias_3 }
 
-declare const NavbarExpandableMenuContent: React_3.ForwardRefExoticComponent<NavbarExpandableMenuContentProps & React_3.RefAttributes<HTMLDivElement>>;
+declare const NavbarExpandableMenuContent: ForwardRefExoticComponent<NavbarExpandableMenuContentProps & RefAttributes<HTMLDivElement>>;
 export { NavbarExpandableMenuContent }
 export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_1 }
 export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_2 }
@@ -1508,15 +1508,15 @@ export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_3 }
  * Content
  */
 export declare interface NavbarExpandableMenuContentProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
     className?: string;
 }
 
 export declare interface NavbarExpandableMenuProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
 }
 
-declare const NavbarExpandableMenuTrigger: React_3.ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & React_3.RefAttributes<HTMLButtonElement>>;
+declare const NavbarExpandableMenuTrigger: ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & RefAttributes<HTMLButtonElement>>;
 export { NavbarExpandableMenuTrigger }
 export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_1 }
 export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_2 }
@@ -1525,10 +1525,10 @@ export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_3 }
 /**
  * Trigger
  */
-export declare interface NavbarExpandableMenuTriggerProps extends Omit<React_3.HTMLAttributes<HTMLButtonElement>, "children"> {
-    whenClosedText: React_3.ReactNode;
+export declare interface NavbarExpandableMenuTriggerProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+    whenClosedText: React.ReactNode;
     whenClosedHelperTitle?: string;
-    whenOpenText: React_3.ReactNode;
+    whenOpenText: React.ReactNode;
     whenOpenHelperTitle?: string;
 }
 

package/dist/_tsup-dts-rollup.d.ts

@@ -1498,7 +1498,7 @@ export { NavbarExpandableMenu as NavbarExpandableMenu_alias_1 }
 export { NavbarExpandableMenu as NavbarExpandableMenu_alias_2 }
 export { NavbarExpandableMenu as NavbarExpandableMenu_alias_3 }
 
-declare const NavbarExpandableMenuContent: React_3.ForwardRefExoticComponent<NavbarExpandableMenuContentProps & React_3.RefAttributes<HTMLDivElement>>;
+declare const NavbarExpandableMenuContent: ForwardRefExoticComponent<NavbarExpandableMenuContentProps & RefAttributes<HTMLDivElement>>;
 export { NavbarExpandableMenuContent }
 export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_1 }
 export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_2 }
@@ -1508,15 +1508,15 @@ export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_3 }
  * Content
  */
 export declare interface NavbarExpandableMenuContentProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
     className?: string;
 }
 
 export declare interface NavbarExpandableMenuProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
 }
 
-declare const NavbarExpandableMenuTrigger: React_3.ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & React_3.RefAttributes<HTMLButtonElement>>;
+declare const NavbarExpandableMenuTrigger: ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & RefAttributes<HTMLButtonElement>>;
 export { NavbarExpandableMenuTrigger }
 export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_1 }
 export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_2 }
@@ -1525,10 +1525,10 @@ export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_3 }
 /**
  * Trigger
  */
-export declare interface NavbarExpandableMenuTriggerProps extends Omit<React_3.HTMLAttributes<HTMLButtonElement>, "children"> {
-    whenClosedText: React_3.ReactNode;
+export declare interface NavbarExpandableMenuTriggerProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+    whenClosedText: React.ReactNode;
     whenClosedHelperTitle?: string;
-    whenOpenText: React_3.ReactNode;
+    whenOpenText: React.ReactNode;
     whenOpenHelperTitle?: string;
 }
 

package/dist/{chunk-7JDEN3T6.mjs → chunk-4WQWU5TL.mjs}

@@ -3,6 +3,7 @@ import {
 } from "./chunk-KQITCS3U.mjs";
 import {
   useHydrated,
+  useMergeRefs,
   useResize
 } from "./chunk-DEX36MFK.mjs";
 import {
@@ -16,10 +17,11 @@ import { forwardRef, useEffect, useRef } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { jsx } from "react/jsx-runtime";
 var TabsList = forwardRef(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
     const { activeTabId } = useTabsContext();
     const tabsListRef = useRef(null);
+    const mergedRef = useMergeRefs([tabsListRef, ref]);
     const { width: tabsWidth } = useResize(tabsListRef);
     const isClientSide = useHydrated();
     const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
@@ -63,7 +65,7 @@ var TabsList = forwardRef(
           },
           className
         ),
-        ref: tabsListRef,
+        ref: mergedRef,
         role: "tablist"
       }, rest), {
         children
@@ -106,4 +108,4 @@ export {
   TabsList,
   TabsTab
 };
-//# sourceMappingURL=chunk-7JDEN3T6.mjs.map
+//# sourceMappingURL=chunk-4WQWU5TL.mjs.map

package/dist/chunk-4WQWU5TL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tabs/tabs-list.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, MouseEvent } from \"react\";\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { useResize, useHydrated, useMergeRefs } from \"../utils\";\nimport { useTabsContext } from \"./context\";\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];\n\n  /**\n   * Direction of the tabs. Can either be vertical or horizontal.\n   * Horizontal breaks on window width with fallback back to vertical\n   *\n   * @default \"horizontal\"\n   */\n  direction?: \"vertical\" | \"horizontal\";\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, direction = \"horizontal\", className, ...rest }, ref) => {\n    const { activeTabId } = useTabsContext();\n    const tabsListRef = useRef<HTMLDivElement>(null);\n    const mergedRef = useMergeRefs([tabsListRef, ref]);\n    const { width: tabsWidth } = useResize(tabsListRef);\n\n    const isClientSide = useHydrated();\n    const { innerWidth } = isClientSide ? window : { innerWidth: 1000 };\n    const wideEnough = innerWidth >= tabsWidth;\n\n    const previousTabId = useRef(activeTabId);\n\n    // Marker animation\n    useEffect(() => {\n      const tabList = tabsListRef.current;\n      const activeTab = tabList?.querySelector(`[data-tabid=\"${activeTabId}\"]`);\n      if (!activeTab || !tabList) return;\n\n      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;\n      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab as HTMLElement;\n\n      // Calculate the height and width of the marker relative to the container\n      const height = offsetHeight / containerHeight;\n      const width = offsetWidth / containerWidth;\n\n      // NOTE: Doing a DOM manipulation here to set the CSS variables for the marker\n      // Not really the react idomatic way, but as long as it works we are able to skip some intermidiate `useState`\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-height\", String(height));\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-width\", String(width));\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-top\", `${offsetTop}px`);\n      tabsListRef.current.style.setProperty(\"--_hds-tabs-marker-left\", `${offsetLeft}px`);\n\n      // Start with border fallback, then switch to the animated marker when the user changes tabs\n      // This way the marker is placed immediately to the default tab, then animates smoothly to the next when selected\n      if (previousTabId.current !== activeTabId) {\n        tabsListRef.current.style.setProperty(\n          \"--_hds-tabs-marker-animated-color\",\n          \"var(--_hds-tabs-marker-color)\",\n        );\n        tabsListRef.current.style.setProperty(\n          \"--_hds-tabs-marker-border-fallback-color\",\n          \"transparent\",\n        );\n      }\n      previousTabId.current = activeTabId;\n    }, [activeTabId, innerWidth]);\n\n    return (\n      <div\n        className={clsx(\n          \"hds-tabs__list\",\n          direction === \"horizontal\"\n            ? {\n                \"hds-tabs__list--horizontal\": wideEnough,\n                \"hds-tabs__list--vertical\": !wideEnough,\n              }\n            : {\n                \"hds-tabs__list--vertical\": true,\n              },\n          className as undefined,\n        )}\n        ref={mergedRef}\n        role=\"tablist\"\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nTabsList.displayName = \"Tabs.List\";\n\nexport interface TabsTabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactElement<HTMLElement> | string;\n\n  /**\n   * Identifier for the tab\n   */\n  tabId: string;\n}\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  ({ children, tabId, className, onClick, ...rest }, ref) => {\n    const context = useTabsContext();\n\n    const toggleTab = (e: MouseEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      context.toggleActiveTabId(tabId);\n      onClick?.(e);\n    };\n    return (\n      <button\n        className={clsx(\n          \"hds-tabs__tab\",\n          { \"hds-tabs__tab--active\": context.activeTabId === tabId },\n          className as undefined,\n        )}\n        data-tabid={tabId}\n        onClick={toggleTab}\n        ref={ref}\n        type=\"button\"\n        role=\"tab\"\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\nTabsTab.displayName = \"Tabs.Tab\";\n"],"mappings":";;;;;;;;;;;;;;;AACA,SAAS,YAAY,WAAW,cAAc;AAC9C,SAAS,YAAY;AAiEf;AAjDC,IAAM,WAAW;AAAA,EACtB,CAAC,IAA4D,QAAQ;AAApE,iBAAE,YAAU,YAAY,cAAc,UAnBzC,IAmBG,IAAoD,iBAApD,IAAoD,CAAlD,YAAU,aAA0B;AACrC,UAAM,EAAE,YAAY,IAAI,eAAe;AACvC,UAAM,cAAc,OAAuB,IAAI;AAC/C,UAAM,YAAY,aAAa,CAAC,aAAa,GAAG,CAAC;AACjD,UAAM,EAAE,OAAO,UAAU,IAAI,UAAU,WAAW;AAElD,UAAM,eAAe,YAAY;AACjC,UAAM,EAAE,WAAW,IAAI,eAAe,SAAS,EAAE,YAAY,IAAK;AAClE,UAAM,aAAa,cAAc;AAEjC,UAAM,gBAAgB,OAAO,WAAW;AAGxC,cAAU,MAAM;AACd,YAAM,UAAU,YAAY;AAC5B,YAAM,YAAY,mCAAS,cAAc,gBAAgB,WAAW;AACpE,UAAI,CAAC,aAAa,CAAC;AAAS;AAE5B,YAAM,EAAE,cAAc,iBAAiB,aAAa,eAAe,IAAI;AACvE,YAAM,EAAE,cAAc,aAAa,WAAW,WAAW,IAAI;AAG7D,YAAM,SAAS,eAAe;AAC9B,YAAM,QAAQ,cAAc;AAI5B,kBAAY,QAAQ,MAAM,YAAY,6BAA6B,OAAO,MAAM,CAAC;AACjF,kBAAY,QAAQ,MAAM,YAAY,4BAA4B,OAAO,KAAK,CAAC;AAC/E,kBAAY,QAAQ,MAAM,YAAY,0BAA0B,GAAG,SAAS,IAAI;AAChF,kBAAY,QAAQ,MAAM,YAAY,2BAA2B,GAAG,UAAU,IAAI;AAIlF,UAAI,cAAc,YAAY,aAAa;AACzC,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AACA,oBAAY,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,QACF;AAAA,MACF;AACA,oBAAc,UAAU;AAAA,IAC1B,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,cAAc,eACV;AAAA,YACE,8BAA8B;AAAA,YAC9B,4BAA4B,CAAC;AAAA,UAC/B,IACA;AAAA,YACE,4BAA4B;AAAA,UAC9B;AAAA,UACJ;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,SACD,OAfL;AAAA,QAiBE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAWhB,IAAM,UAAU;AAAA,EACrB,CAAC,IAAkD,QAAQ;AAA1D,iBAAE,YAAU,OAAO,WAAW,QArGjC,IAqGG,IAA0C,iBAA1C,IAA0C,CAAxC,YAAU,SAAO,aAAW;AAC7B,UAAM,UAAU,eAAe;AAE/B,UAAM,YAAY,CAAC,MAAqC;AACtD,QAAE,eAAe;AACjB,cAAQ,kBAAkB,KAAK;AAC/B,yCAAU;AAAA,IACZ;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,EAAE,yBAAyB,QAAQ,gBAAgB,MAAM;AAAA,UACzD;AAAA,QACF;AAAA,QACA,cAAY;AAAA,QACZ,SAAS;AAAA,QACT;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,SACD,OAXL;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;","names":[]}

package/dist/{chunk-QY2K3GWU.mjs → chunk-F2C3KZFX.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-P6WIBHQH.mjs";
+} from "./chunk-FB5GEZNH.mjs";
 import {
   useMergeRefs
 } from "./chunk-DEX36MFK.mjs";
@@ -83,4 +83,4 @@ DatePicker.displayName = "DatePicker";
 export {
   DatePicker
 };
-//# sourceMappingURL=chunk-QY2K3GWU.mjs.map
+//# sourceMappingURL=chunk-F2C3KZFX.mjs.map

package/dist/{chunk-P6WIBHQH.mjs → chunk-FB5GEZNH.mjs}

@@ -1,6 +1,6 @@
 import {
   ErrorMessage
-} from "./chunk-DFU2THGC.mjs";
+} from "./chunk-RZZDMBB7.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -99,4 +99,4 @@ var InputGroup = forwardRef(function InputGroup2(_a, ref) {
 export {
   InputGroup
 };
-//# sourceMappingURL=chunk-P6WIBHQH.mjs.map
+//# sourceMappingURL=chunk-FB5GEZNH.mjs.map

package/dist/{chunk-A4ME3VXV.mjs → chunk-GGNMBB3K.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-P6WIBHQH.mjs";
+} from "./chunk-FB5GEZNH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -34,4 +34,4 @@ Input.displayName = "Input";
 export {
   Input
 };
-//# sourceMappingURL=chunk-A4ME3VXV.mjs.map
+//# sourceMappingURL=chunk-GGNMBB3K.mjs.map

package/dist/{chunk-RYM3LM7K.mjs → chunk-GJO7Z2YL.mjs}

@@ -1,6 +1,6 @@
 import {
   Fieldset
-} from "./chunk-6N4TGRZB.mjs";
+} from "./chunk-LG7QWKFP.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -31,4 +31,4 @@ export {
   useRadioGroupContext,
   RadioGroup
 };
-//# sourceMappingURL=chunk-RYM3LM7K.mjs.map
+//# sourceMappingURL=chunk-GJO7Z2YL.mjs.map

package/dist/{chunk-DCCQXWD6.mjs → chunk-IJAX6APL.mjs}

@@ -1,7 +1,7 @@
 import {
   TabsList,
   TabsTab
-} from "./chunk-7JDEN3T6.mjs";
+} from "./chunk-4WQWU5TL.mjs";
 import {
   Tabs
 } from "./chunk-3MQKXNZ6.mjs";
@@ -20,4 +20,4 @@ TabsComponent.Content = TabsContent;
 export {
   TabsComponent
 };
-//# sourceMappingURL=chunk-DCCQXWD6.mjs.map
+//# sourceMappingURL=chunk-IJAX6APL.mjs.map

package/dist/{chunk-UMYOYHUI.mjs → chunk-KI6WRKZY.mjs}

@@ -1,9 +1,9 @@
 import {
   useFieldsetContext
-} from "./chunk-6N4TGRZB.mjs";
+} from "./chunk-LG7QWKFP.mjs";
 import {
   ErrorMessage
-} from "./chunk-DFU2THGC.mjs";
+} from "./chunk-RZZDMBB7.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -73,4 +73,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-UMYOYHUI.mjs.map
+//# sourceMappingURL=chunk-KI6WRKZY.mjs.map

package/dist/{chunk-6N4TGRZB.mjs → chunk-LG7QWKFP.mjs}

@@ -1,6 +1,6 @@
 import {
   ErrorMessage
-} from "./chunk-DFU2THGC.mjs";
+} from "./chunk-RZZDMBB7.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -64,4 +64,4 @@ export {
   useFieldsetContext,
   Fieldset
 };
-//# sourceMappingURL=chunk-6N4TGRZB.mjs.map
+//# sourceMappingURL=chunk-LG7QWKFP.mjs.map

package/dist/{chunk-FCPQXZQV.mjs → chunk-MPHMD4LO.mjs}

@@ -43,46 +43,31 @@ function NavbarExpandableMenu({ children }) {
   return /* @__PURE__ */ jsx(expandableMenuContext.Provider, { value: [open, toggleOpen], children });
 }
 NavbarExpandableMenu.displayName = "NavbarExpandableMenu";
-function RenderButton(_a) {
-  var _b = _a, {
-    className,
-    innerRef,
-    open = false,
-    ref,
-    text,
-    title,
-    toggleOpen,
-    width
-  } = _b, rest = __objRest(_b, [
-    "className",
-    "innerRef",
-    "open",
-    "ref",
-    "text",
-    "title",
-    "toggleOpen",
-    "width"
-  ]);
-  const icon = open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {});
-  const style = width ? { width } : {};
-  return /* @__PURE__ */ jsxs(
-    "button",
-    __spreadProps(__spreadValues({
-      className: clsx("hds-navbar__item", className),
-      onClick: toggleOpen,
-      ref: ref != null ? ref : innerRef,
-      style,
-      title,
-      type: "button"
-    }, rest), {
-      children: [
-        /* @__PURE__ */ jsx("span", { className: clsx("hds-navbar__item-responsive-text"), children: text }),
-        " ",
-        icon
-      ]
-    })
-  );
-}
+var RenderButton = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, innerRef, open = false, text, title, toggleOpen, width } = _b, rest = __objRest(_b, ["className", "innerRef", "open", "text", "title", "toggleOpen", "width"]);
+    const icon = open ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {});
+    const style = width ? { width } : {};
+    return /* @__PURE__ */ jsxs(
+      "button",
+      __spreadProps(__spreadValues({
+        className: clsx("hds-navbar__item", className),
+        onClick: toggleOpen,
+        ref: ref != null ? ref : innerRef,
+        style,
+        title,
+        type: "button"
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx("span", { className: clsx("hds-navbar__item-responsive-text"), children: text }),
+          " ",
+          icon
+        ]
+      })
+    );
+  }
+);
+RenderButton.displayName = "Navbar.RenderButton";
 var NavbarExpandableMenuTrigger = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -123,7 +108,7 @@ var NavbarExpandableMenuTrigger = forwardRef(
         /* @__PURE__ */ jsx(
           RenderButton,
           __spreadValues({
-            className: className ? className : "",
+            className,
             innerRef: measureButtonRef,
             text: whenClosedText,
             title
@@ -134,7 +119,7 @@ var NavbarExpandableMenuTrigger = forwardRef(
             /* @__PURE__ */ jsx(
               RenderButton,
               __spreadValues({
-                className: className ? className : "",
+                className,
                 innerRef: measureButtonRef,
                 open: true,
                 text: whenOpenText,
@@ -151,7 +136,7 @@ var NavbarExpandableMenuTrigger = forwardRef(
     return /* @__PURE__ */ jsx(
       RenderButton,
       __spreadValues({
-        className: className ? className : "",
+        className,
         open,
         ref,
         text,
@@ -185,4 +170,4 @@ export {
   NavbarExpandableMenuTrigger,
   NavbarExpandableMenuContent
 };
-//# sourceMappingURL=chunk-FCPQXZQV.mjs.map
+//# sourceMappingURL=chunk-MPHMD4LO.mjs.map

package/dist/chunk-MPHMD4LO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/navbar/navbar-expandable-menu.tsx"],"sourcesContent":["import { createContext, useContext, forwardRef, useState, useRef, useEffect } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { focusTrap } from \"../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\ninterface ButtonInterface extends React.HTMLAttributes<HTMLButtonElement> {\n  open?: boolean;\n  innerRef?: React.RefObject<HTMLButtonElement>;\n  text: React.ReactNode;\n  title?: string;\n  toggleOpen?: () => void;\n  width?: number;\n}\n\nconst RenderButton = forwardRef<HTMLButtonElement, ButtonInterface>(\n  ({ className, innerRef, open = false, text, title, toggleOpen, width, ...rest }, ref) => {\n    const icon = open ? <CloseIcon /> : <MenuIcon />;\n    const style = width ? { width } : {};\n    return (\n      <button\n        className={clsx(\"hds-navbar__item\", className as undefined)}\n        onClick={toggleOpen}\n        ref={ref ?? innerRef}\n        style={style}\n        title={title}\n        type=\"button\"\n        {...rest}\n      >\n        <span className={clsx(\"hds-navbar__item-responsive-text\")}>{text}</span> {icon}\n      </button>\n    );\n  },\n);\nRenderButton.displayName = \"Navbar.RenderButton\";\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      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [open, toggleOpen] = useNavbarExpendableMenuContext();\n    const [width, setWidth] = useState(0);\n    const measureButtonRef = useRef<HTMLButtonElement>(null);\n\n    const text: React.ReactNode = open ? whenOpenText : whenClosedText;\n    const title = open ? whenOpenHelperTitle : whenClosedHelperTitle;\n\n    /**\n     *\n     * @param element - Button to measure\n     * @param callback - report the width back\n     */\n    const measureButton = (element: React.ReactNode, callback: (width: number) => void) => {\n      // Create an empty div to render the Button in\n      const container = document.createElement(\"div\");\n      container.style.cssText = \"display: inline-block; position: absolute; visibility: hidden\";\n\n      // Attach the empty div inside the navigation section\n      const c = document.getElementsByClassName(\"hds-navbar__navigation\")[0];\n      c.appendChild(container);\n\n      // Render the Button here\n      const root = createRoot(container as HTMLElement);\n      root.render(element);\n\n      /**\n       * Get the offsetWidth now that it is rendered\n       * Also clean up after us\n       */\n      const getWidth = () => {\n        callback(measureButtonRef.current?.offsetWidth ?? 0);\n        root.unmount();\n        c.removeChild(container);\n      };\n      // This is instead of the callback that used to be on ReactDOM.render()\n      setTimeout(getWidth, 0);\n    };\n\n    useEffect(() => {\n      measureButton(\n        <RenderButton\n          className={className}\n          innerRef={measureButtonRef}\n          text={whenClosedText}\n          title={title}\n          {...rest}\n        />,\n        (closedWidth: number) => {\n          measureButton(\n            <RenderButton\n              className={className}\n              innerRef={measureButtonRef}\n              open\n              text={whenOpenText}\n              title={title}\n              {...rest}\n            />,\n            (openWidth: number) => {\n              setWidth(Math.max(openWidth, closedWidth));\n            },\n          );\n        },\n      );\n    }, [className, rest, title, whenClosedText, whenOpenText]);\n\n    return (\n      <RenderButton\n        className={className}\n        open={open}\n        ref={ref}\n        text={text as string}\n        title={title}\n        toggleOpen={toggleOpen}\n        width={width}\n        {...rest}\n      />\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 ? \"true\" : undefined }}\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-7W4HONVO.mjs → chunk-O4HIHUMD.mjs}

@@ -1,9 +1,9 @@
 import {
   useRadioGroupContext
-} from "./chunk-RYM3LM7K.mjs";
+} from "./chunk-GJO7Z2YL.mjs";
 import {
   useFieldsetContext
-} from "./chunk-6N4TGRZB.mjs";
+} from "./chunk-LG7QWKFP.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -89,4 +89,4 @@ Radiobutton.displayName = "Radiobutton";
 export {
   Radiobutton
 };
-//# sourceMappingURL=chunk-7W4HONVO.mjs.map
+//# sourceMappingURL=chunk-O4HIHUMD.mjs.map

package/dist/{chunk-DFU2THGC.mjs → chunk-RZZDMBB7.mjs}

@@ -9,14 +9,15 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 var ErrorMessage = forwardRef(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
     return /* @__PURE__ */ jsx(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "assertive",
         className: clsx("hds-error-message", className),
-        id
+        id,
+        ref
       }, rest), {
         children
       })
@@ -28,4 +29,4 @@ ErrorMessage.displayName = "ErrorMessage";
 export {
   ErrorMessage
 };
-//# sourceMappingURL=chunk-DFU2THGC.mjs.map
+//# sourceMappingURL=chunk-RZZDMBB7.mjs.map

package/dist/chunk-RZZDMBB7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/form/error-message/error-message.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkC;AAWrC;AAHC,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW,KAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/{chunk-JL4PLDXN.mjs → chunk-WPCWXROV.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-P6WIBHQH.mjs";
+} from "./chunk-FB5GEZNH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -34,4 +34,4 @@ Textarea.displayName = "Textarea";
 export {
   Textarea
 };
-//# sourceMappingURL=chunk-JL4PLDXN.mjs.map
+//# sourceMappingURL=chunk-WPCWXROV.mjs.map

package/dist/{chunk-ACEYO4LN.mjs → chunk-XDYXNQDV.mjs}

@@ -12,7 +12,7 @@ import {
   NavbarExpandableMenu,
   NavbarExpandableMenuContent,
   NavbarExpandableMenuTrigger
-} from "./chunk-FCPQXZQV.mjs";
+} from "./chunk-MPHMD4LO.mjs";
 
 // src/navbar/index.tsx
 var NavbarComponent = Navbar;
@@ -30,4 +30,4 @@ NavbarComponent.Navigation = NavbarNavigation;
 export {
   NavbarComponent
 };
-//# sourceMappingURL=chunk-ACEYO4LN.mjs.map
+//# sourceMappingURL=chunk-XDYXNQDV.mjs.map

package/dist/{chunk-NAIBK23T.mjs → chunk-XFODQH3I.mjs}

@@ -1,6 +1,6 @@
 import {
   InputGroup
-} from "./chunk-P6WIBHQH.mjs";
+} from "./chunk-FB5GEZNH.mjs";
 import {
   __objRest,
   __spreadProps,
@@ -33,4 +33,4 @@ Select.displayName = "Select";
 export {
   Select
 };
-//# sourceMappingURL=chunk-NAIBK23T.mjs.map
+//# sourceMappingURL=chunk-XFODQH3I.mjs.map

package/dist/form/checkbox/checkbox.js

@@ -60,14 +60,15 @@ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ErrorMessage = (0, import_react.forwardRef)(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "assertive",
         className: (0, import_typed_classname.clsx)("hds-error-message", className),
-        id
+        id,
+        ref
       }, rest), {
         children
       })

package/dist/form/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n  children: ReactNode;\n  variant?: \"plain\" | \"bounding-box\";\n  title?: string;\n} & (\n    | {\n        /**\n         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n         *\n         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n         *\n         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n         */\n        hasError?: boolean;\n        errorMessage?: never;\n      }\n    | {\n        hasError?: never;\n        /**\n         * Set an error message to add error styling, and display the error message.\n         * The component will take care of aria to connect the error message to the checkbox.\n         *\n         * Use this when your checkbox is standalone (not part of a fieldset).\n         */\n        errorMessage?: ReactNode;\n      }\n  );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant = \"plain\",\n      hasError: hasErrorProp,\n      errorMessage,\n      title,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const errorMessageId = useId();\n    const { hasError: hasFieldsetError } = useFieldsetContext();\n    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n    return (\n      <div className={clsx(\"hds-checkbox-wrapper\")}>\n        <div\n          className={clsx(\n            \"hds-checkbox\",\n            {\n              [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n              \"hds-checkbox--error\": hasError,\n            },\n            className as undefined,\n          )}\n        >\n          <label>\n            <input\n              {...rest}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={errorMessage ? errorMessageId : undefined}\n              ref={ref}\n              type=\"checkbox\"\n            />\n            <span aria-hidden className=\"hds-checkbox__checkmark\" />\n            {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n          </label>\n          {title ? children : null}\n        </div>\n        {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n  children: ReactNode;\n  variant?: \"plain\" | \"bounding-box\";\n  title?: string;\n} & (\n    | {\n        /**\n         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n         *\n         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n         *\n         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n         */\n        hasError?: boolean;\n        errorMessage?: never;\n      }\n    | {\n        hasError?: never;\n        /**\n         * Set an error message to add error styling, and display the error message.\n         * The component will take care of aria to connect the error message to the checkbox.\n         *\n         * Use this when your checkbox is standalone (not part of a fieldset).\n         */\n        errorMessage?: ReactNode;\n      }\n  );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant = \"plain\",\n      hasError: hasErrorProp,\n      errorMessage,\n      title,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const errorMessageId = useId();\n    const { hasError: hasFieldsetError } = useFieldsetContext();\n    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n    return (\n      <div className={clsx(\"hds-checkbox-wrapper\")}>\n        <div\n          className={clsx(\n            \"hds-checkbox\",\n            {\n              [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n              \"hds-checkbox--error\": hasError,\n            },\n            className as undefined,\n          )}\n        >\n          <label>\n            <input\n              {...rest}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={errorMessage ? errorMessageId : undefined}\n              ref={ref}\n              type=\"checkbox\"\n            />\n            <span aria-hidden className=\"hds-checkbox__checkmark\" />\n            {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n          </label>\n          {title ? children : null}\n        </div>\n        {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}

package/dist/form/checkbox/checkbox.mjs

@@ -1,10 +1,10 @@
 import {
   Checkbox
-} from "../../chunk-UMYOYHUI.mjs";
+} from "../../chunk-KI6WRKZY.mjs";
 import "../../chunk-LMF3QGSF.mjs";
-import "../../chunk-6N4TGRZB.mjs";
+import "../../chunk-LG7QWKFP.mjs";
 import "../../chunk-NSLSA7F7.mjs";
-import "../../chunk-DFU2THGC.mjs";
+import "../../chunk-RZZDMBB7.mjs";
 import "../../chunk-R4SQKVDQ.mjs";
 export {
   Checkbox

package/dist/form/checkbox/index.js

@@ -62,14 +62,15 @@ var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ErrorMessage = (0, import_react.forwardRef)(
-  (_a) => {
+  (_a, ref) => {
     var _b = _a, { children, id, className } = _b, rest = __objRest(_b, ["children", "id", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       __spreadProps(__spreadValues({
         "aria-live": "assertive",
         className: (0, import_typed_classname.clsx)("hds-error-message", className),
-        id
+        id,
+        ref
       }, rest), {
         children
       })

package/dist/form/checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n  children: ReactNode;\n  variant?: \"plain\" | \"bounding-box\";\n  title?: string;\n} & (\n    | {\n        /**\n         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n         *\n         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n         *\n         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n         */\n        hasError?: boolean;\n        errorMessage?: never;\n      }\n    | {\n        hasError?: never;\n        /**\n         * Set an error message to add error styling, and display the error message.\n         * The component will take care of aria to connect the error message to the checkbox.\n         *\n         * Use this when your checkbox is standalone (not part of a fieldset).\n         */\n        errorMessage?: ReactNode;\n      }\n  );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant = \"plain\",\n      hasError: hasErrorProp,\n      errorMessage,\n      title,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const errorMessageId = useId();\n    const { hasError: hasFieldsetError } = useFieldsetContext();\n    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n    return (\n      <div className={clsx(\"hds-checkbox-wrapper\")}>\n        <div\n          className={clsx(\n            \"hds-checkbox\",\n            {\n              [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n              \"hds-checkbox--error\": hasError,\n            },\n            className as undefined,\n          )}\n        >\n          <label>\n            <input\n              {...rest}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={errorMessage ? errorMessageId : undefined}\n              ref={ref}\n              type=\"checkbox\"\n            />\n            <span aria-hidden className=\"hds-checkbox__checkmark\" />\n            {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n          </label>\n          {title ? children : null}\n        </div>\n        {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}
+{"version":3,"sources":["../../../src/form/checkbox/index.tsx","../../../src/form/checkbox/checkbox.tsx","../../../src/form/error-message/error-message.tsx","../../../src/form/fieldset/fieldset.tsx"],"sourcesContent":["export { Checkbox } from \"./checkbox\";\nexport type * from \"./checkbox\";\n","import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\nimport { useFieldsetContext } from \"../fieldset\";\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"defaultValue\"> & {\n  children: ReactNode;\n  variant?: \"plain\" | \"bounding-box\";\n  title?: string;\n} & (\n    | {\n        /**\n         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.\n         *\n         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.\n         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.\n         *\n         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.\n         */\n        hasError?: boolean;\n        errorMessage?: never;\n      }\n    | {\n        hasError?: never;\n        /**\n         * Set an error message to add error styling, and display the error message.\n         * The component will take care of aria to connect the error message to the checkbox.\n         *\n         * Use this when your checkbox is standalone (not part of a fieldset).\n         */\n        errorMessage?: ReactNode;\n      }\n  );\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      variant = \"plain\",\n      hasError: hasErrorProp,\n      errorMessage,\n      title,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const errorMessageId = useId();\n    const { hasError: hasFieldsetError } = useFieldsetContext();\n    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;\n\n    return (\n      <div className={clsx(\"hds-checkbox-wrapper\")}>\n        <div\n          className={clsx(\n            \"hds-checkbox\",\n            {\n              [`hds-checkbox--${variant}`]: variant === \"bounding-box\",\n              \"hds-checkbox--error\": hasError,\n            },\n            className as undefined,\n          )}\n        >\n          <label>\n            <input\n              {...rest}\n              aria-invalid={hasError ? true : undefined}\n              aria-describedby={errorMessage ? errorMessageId : undefined}\n              ref={ref}\n              type=\"checkbox\"\n            />\n            <span aria-hidden className=\"hds-checkbox__checkmark\" />\n            {title ? <p className=\"hds-checkbox__title\">{title}</p> : children}\n          </label>\n          {title ? children : null}\n        </div>\n        {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nexport interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  id: string;\n  className?: string;\n}\n\nexport const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(\n  ({ children, id, className, ...rest }, ref) => {\n    return (\n      <div\n        aria-live=\"assertive\"\n        className={clsx(\"hds-error-message\", className as undefined)}\n        id={id}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\nErrorMessage.displayName = \"ErrorMessage\";\n","import { useId, forwardRef, createContext, useContext } from \"react\";\nimport type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage } from \"../error-message\";\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons\n   * error styling and aria to indicate invalid state.\n   *\n   * For Radiobuttons you are even better off using RadioGroup.\n   */\n  errorMessage?: ReactNode;\n  legendProps?: HTMLAttributes<HTMLElement> & { size: \"default\" | \"large\" };\n  legend: ReactNode;\n  children: ReactNode;\n}\n\nconst FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });\n\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  {\n    className,\n    style,\n    errorMessage,\n    legendProps: { size: legendSize = \"default\", className: legendClassName, ...legendProps } = {},\n    legend,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n\n  return (\n    <fieldset\n      aria-describedby={errorMessage ? errorMessageId : undefined}\n      aria-invalid={errorMessage ? true : undefined}\n      className={clsx(\"hds-fieldset\", className as undefined)}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <legend\n        className={clsx(\n          \"hds-fieldset__legend\",\n          { [`hds-fieldset__legend--${legendSize}`]: legendSize },\n          legendClassName as undefined,\n        )}\n        {...legendProps}\n      >\n        {legend}\n      </legend>\n      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>\n        {children}\n      </FieldsetContext.Provider>\n      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>\n    </fieldset>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAA4E;AAC5E,IAAAC,0BAAqB;;;ACDrB,6BAAqB;AACrB,mBAA2C;AAWrC;AAHC,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAsC,QAAQ;AAA9C,iBAAE,YAAU,IAAI,UAVnB,IAUG,IAA8B,iBAA9B,IAA8B,CAA5B,YAAU,MAAI;AACf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAW,6BAAK,qBAAqB,SAAsB;AAAA,QAC3D;AAAA,QACA;AAAA,SACI,OALL;AAAA,QAOE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;;;ACxB3B,IAAAC,gBAA6D;AAE7D,IAAAC,0BAAqB;AAqCjB,IAAAC,sBAAA;AAnBJ,IAAM,sBAAkB,6BAAqC,EAAE,UAAU,MAAM,CAAC;AAEzE,IAAM,qBAAqB,UAAM,0BAAW,eAAe;AAE3D,IAAM,eAAW,0BAA+C,SAASC,UAC9E,IASA,KACA;AAVA,eAIe;AAAA,IAHb;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,KAA+E,CAAC;AAAA,EA7BjG,IAyBE,IAIe,SAAE,QAAM,aAAa,WAAW,WAAW,gBA7B5D,IA6BiB,IAA+D,wBAA/D,IAA+D,CAA7D,QAA8B,eAJ/C,SAKE;AAAA;AAAA,IACA;AAAA,EA/BJ,IAyBE,IAOK,iBAPL,IAOK;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,qBAAiB,qBAAM;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,eAAe,iBAAiB;AAAA,MAClD,gBAAc,eAAe,OAAO;AAAA,MACpC,eAAW,8BAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,OACI,OANL;AAAA,MAQC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA,cACA,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,WAAW;AAAA,cACtD;AAAA,YACF;AAAA,aACI,cANL;AAAA,YAQE;AAAA;AAAA,QACH;AAAA,QACA,6CAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAChE,UACH;AAAA,QACA,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa;AAAA;AAAA;AAAA,EAClD;AAEJ,CAAC;;;AFAS,IAAAC,sBAAA;AA7BH,IAAM,eAAW;AAAA,EACtB,CACE,IASA,QACG;AAVH,iBACE;AAAA,gBAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IA1CN,IAoCI,IAOK,iBAPL,IAOK;AAAA,MANH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,qBAAiB,qBAAM;AAC7B,UAAM,EAAE,UAAU,iBAAiB,IAAI,mBAAmB;AAC1D,UAAM,WAAW,CAAC,CAAC,gBAAgB,oBAAoB;AAEvD,WACE,8CAAC,SAAI,eAAW,8BAAK,sBAAsB,GACzC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,CAAC,iBAAiB,OAAO,EAAE,GAAG,YAAY;AAAA,cAC1C,uBAAuB;AAAA,YACzB;AAAA,YACA;AAAA,UACF;AAAA,UAEA;AAAA,0DAAC,WACC;AAAA;AAAA,gBAAC;AAAA,iDACK,OADL;AAAA,kBAEC,gBAAc,WAAW,OAAO;AAAA,kBAChC,oBAAkB,eAAe,iBAAiB;AAAA,kBAClD;AAAA,kBACA,MAAK;AAAA;AAAA,cACP;AAAA,cACA,6CAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA,cACrD,QAAQ,6CAAC,OAAE,WAAU,uBAAuB,iBAAM,IAAO;AAAA,eAC5D;AAAA,YACC,QAAQ,WAAW;AAAA;AAAA;AAAA,MACtB;AAAA,MACC,eAAe,6CAAC,gBAAa,IAAI,gBAAiB,wBAAa,IAAkB;AAAA,OACpF;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":["import_react","import_typed_classname","import_react","import_typed_classname","import_jsx_runtime","Fieldset","import_jsx_runtime"]}

package/dist/form/checkbox/index.mjs

@@ -1,11 +1,11 @@
 import "../../chunk-YJOOSTJC.mjs";
 import {
   Checkbox
-} from "../../chunk-UMYOYHUI.mjs";
+} from "../../chunk-KI6WRKZY.mjs";
 import "../../chunk-LMF3QGSF.mjs";
-import "../../chunk-6N4TGRZB.mjs";
+import "../../chunk-LG7QWKFP.mjs";
 import "../../chunk-NSLSA7F7.mjs";
-import "../../chunk-DFU2THGC.mjs";
+import "../../chunk-RZZDMBB7.mjs";
 import "../../chunk-R4SQKVDQ.mjs";
 export {
   Checkbox