@postenbring/hedwig-react 2.2.0 → 3.0.0

package/src/form/error-summary/error-summary.tsx

@@ -1,5 +1,7 @@
-import { forwardRef, useEffect, useRef } from "react";
-import { Message, type MessageProps, type MessageTitleProps } from "../../message";
+import { forwardRef, useEffect, useRef, type HTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Box, type BoxProps } from "../../box";
 import { UnorderedList, type ListProps } from "../../list";
 import { Link } from "../../link";
 import { useMergeRefs } from "../../utils";
@@ -35,16 +37,17 @@ interface ErrorSummaryHeadingPropsAsChild {
   as?: never;
 }
 
-export type ErrorSummaryHeadingProps = MessageTitleProps &
+export type ErrorSummaryHeadingProps = HTMLAttributes<HTMLElement> &
   ErrorSummaryHeadingPropsAutoFocus &
   (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);
 
 export const ErrorSummaryHeading = forwardRef<
   HTMLParagraphElement,
   ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)
->(({ children, as: Tag, autoFocus = true, ...rest }, ref) => {
+>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {
   const focusRef = useRef<HTMLElement>(null);
   const mergedRef = useMergeRefs([focusRef, ref]);
+  const Component = asChild ? Slot : Tag;
 
   useEffect(() => {
     /**
@@ -60,9 +63,9 @@ export const ErrorSummaryHeading = forwardRef<
   }, []);
 
   return (
-    <Message.Title ref={mergedRef} tabIndex={-1} asChild {...rest}>
-      {Tag ? <Tag>{children}</Tag> : children}
-    </Message.Title>
+    <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>
+      {children}
+    </Component>
   );
 });
 ErrorSummaryHeading.displayName = "ErrorSummary.Heading";
@@ -76,20 +79,11 @@ export interface ErrorSummaryListProps extends ListProps {
   size?: ListProps["size"];
 }
 export const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(
-  ({ children, style: _style, size = "small", ...rest }, ref) => {
-    const style = {
-      // Match the link `solid` style, which black underline
-      "--_hds-list-marker-color": "var(--hds-ui-colors-black)",
-      ..._style,
-    };
-    return (
-      <Message.Description asChild>
-        <UnorderedList size={size} ref={ref} style={style} {...rest}>
-          {children}
-        </UnorderedList>
-      </Message.Description>
-    );
-  },
+  ({ children, size = "small", ...rest }, ref) => (
+    <UnorderedList size={size} ref={ref} {...rest}>
+      {children}
+    </UnorderedList>
+  ),
 );
 ErrorSummaryList.displayName = "ErrorSummary.List";
 
@@ -118,8 +112,14 @@ export const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>
     }
 
     return (
-      <li ref={ref} {...rest}>
-        <Link size="small" href={href} variant="solid" {...linkProps} onClick={onClick}>
+      <li className={clsx(`hds-error-summary__list-item`)} ref={ref} {...rest}>
+        <Link
+          size="small"
+          href={href}
+          variant="inverted-no-underline"
+          {...linkProps}
+          onClick={onClick}
+        >
           {children}
         </Link>
       </li>
@@ -128,16 +128,17 @@ export const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";
 
-export type ErrorSummaryProps = Omit<MessageProps, "variant" | "icon" | "iconClassName">;
+export type ErrorSummaryProps = Omit<
+  BoxProps,
+  "variant" | "closeable" | "onClose" | "closed" | "closeButtonProps"
+>;
 
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <Message variant="warning" ref={ref} {...rest}>
-        {children}
-      </Message>
-    );
-  },
+  ({ children, className, ...rest }, ref) => (
+    <Box ref={ref} {...rest} className={clsx(`hds-error-summary`, className as undefined)}>
+      {children}
+    </Box>
+  ),
 ) as ErrorSummaryType;
 ErrorSummary.displayName = "ErrorSummary";
 

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

@@ -18,9 +18,9 @@ export const Preview: Story = {
     placeholder: "I am a placeholder",
     errorMessage: "",
     readOnly: false,
-    variant: "default",
+    size: "large",
   },
   argTypes: {
-    variant: { control: "inline-radio", options: ["default", "white"] },
+    size: { control: "inline-radio", options: ["large", "small"] },
   },
 };

package/src/form/input/input.tsx

@@ -4,10 +4,20 @@ import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { InputGroup } from "../input-group";
 import type { InputGroupProps } from "../input-group";
 
-export type InputProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, "children">;
+/**
+ * Omitting:
+ * - `size` from InputHTMLAttributes
+ * - `children` from InputGroupProps
+ * The original `size` prop that input elements have is not in use in HDS.
+ * It is overridden by styling.
+ */
+export type InputProps = Omit<
+  InputGroupProps & Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+  "children"
+>;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
+  { className, size, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
   ref,
 ) {
   return (
@@ -20,7 +30,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       labelProps={labelProps}
       readOnly={readOnly}
       style={style}
-      variant={variant}
+      size={size}
     >
       <input {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
     </InputGroup>

package/src/form/input-group/input-group.tsx

@@ -14,7 +14,7 @@ export interface InputGroupProps {
   id?: string;
   className?: string;
   style?: CSSProperties;
-  variant?: "default" | "white";
+  size?: "large" | "small";
   errorMessage?: ReactNode;
   errorMessageProps?: Partial<ErrorMessageProps>;
   labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
@@ -34,7 +34,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
     id,
     className,
     style,
-    variant = "default",
+    size = "large",
     errorMessage,
     errorMessageProps,
     labelProps: { className: labelClassName, ...labelProps } = {},
@@ -79,7 +79,7 @@ export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function I
       className={clsx(
         "hds-input-group",
         {
-          [`hds-input-group--${variant}`]: variant,
+          [`hds-input-group--${size}`]: size,
           "hds-input-group--error": errorMessage,
         },
         className as undefined,

package/src/form/select/select.stories.tsx

@@ -16,10 +16,10 @@ export const Preview: Story = {
   args: {
     label: "Default select",
     errorMessage: "",
-    variant: "default",
+    size: "large",
   },
   argTypes: {
-    variant: { control: "inline-radio", options: ["default", "white"] },
+    size: { control: "inline-radio", options: ["large", "small"] },
   },
   render: (props) => (
     <Select {...props} defaultValue="">

package/src/form/select/select.tsx

@@ -1,15 +1,15 @@
-import { forwardRef, type ReactNode , type SelectHTMLAttributes } from "react";
+import { forwardRef, type ReactNode, type SelectHTMLAttributes } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { InputGroup } from "../input-group";
 import type { InputGroupProps } from "../input-group";
 
 export type SelectProps = Omit<
-  InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,
+  InputGroupProps & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">,
   "readOnly" | "children"
 > & { children: ReactNode };
 
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },
+  { className, size, errorMessage, labelProps, label, id, style, disabled, children, ...rest },
   ref,
 ) {
   return (
@@ -21,7 +21,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       label={label}
       labelProps={labelProps}
       style={style}
-      variant={variant}
+      size={size}
     >
       <select {...rest} disabled={disabled} ref={ref}>
         {children}

package/src/form/textarea/textarea.stories.tsx

@@ -6,7 +6,7 @@ const meta: Meta<typeof Textarea> = {
   title: "Form/Textarea",
   component: Textarea,
   argTypes: {
-    variant: { control: "inline-radio", options: ["default", "white"] },
+    size: { control: "inline-radio", options: ["large", "small"] },
   },
 };
 
@@ -21,6 +21,6 @@ export const Preview: Story = {
     placeholder: "I am a placeholder",
     errorMessage: "",
     readOnly: false,
-    variant: "default",
+    size: "large",
   },
 };

package/src/form/textarea/textarea.tsx

@@ -10,7 +10,7 @@ export type TextareaProps = Omit<
 >;
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
-  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
+  { className, size, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
   ref,
 ) {
   return (
@@ -23,7 +23,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
       labelProps={labelProps}
       readOnly={readOnly}
       style={style}
-      variant={variant}
+      size={size}
     >
       <textarea {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
     </InputGroup>

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

@@ -1,6 +1,6 @@
 import { createContext, useContext, forwardRef, useState, useEffect, useId } from "react";
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
-import { focusTrap } from "../utils/utils";
+import { focusTrap, inertPropValue } from "../utils/utils";
 import { CloseIcon, MenuIcon } from "./icons";
 
 interface ExpandableMenuContextProps {
@@ -137,13 +137,14 @@ export const NavbarExpandableMenuContent = forwardRef<
   NavbarExpandableMenuContentProps
 >(({ children, className, ...rest }, ref) => {
   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" }}
+      {...{ inert: inertPropValue(!open) }}
       ref={ref}
     >
       <div className={clsx("hds-navbar__expandable-menu-content-inner")}>{children}</div>

package/src/skeleton/skeleton.tsx

@@ -4,6 +4,7 @@
 import { clsx } from "@postenbring/hedwig-css/typed-classname";
 import { Slot } from "@radix-ui/react-slot";
 import { forwardRef } from "react";
+import { inertPropValue } from "../utils";
 
 interface DimensionsFromWidthAndHeight {
   height?: number | string;
@@ -102,7 +103,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
         )}
         style={{ ...style, width, height }}
         aria-hidden
-        {...{ inert: "true" }}
+        {...{ inert: inertPropValue(true) }}
         ref={ref as any}
         {...(rest as any)}
       >

package/src/utils/utils.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, version } from "react";
 
 /**
  * Merges an array of refs into a single memoized callback ref or `null`.
@@ -108,3 +108,16 @@ function releaseFocusTrap(inertElements: Iterable<HTMLElement>) {
     el.removeAttribute("inert");
   }
 }
+
+/**
+ * React 19 supports inert prop
+ * React 18 needs inert to be a string
+ */
+const inertBooleanSupported: boolean = Number(version.split(".")[0]) >= 19;
+
+/**
+ * Returns the inert prop value based on the React version.
+ */
+export const inertPropValue: (x: boolean) => boolean | "" | undefined = inertBooleanSupported
+  ? (x: boolean): boolean => x
+  : (x: boolean): "" | undefined => (x ? "" : undefined);

package/dist/chunk-5FWY7FIX.mjs.map

@@ -1 +0,0 @@
-{"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        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;AAsBb;AAfD,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,cAAY,QAAQ,OAAO,SAAS;AAAA,SAChC,EAAE,OAAO,QAAQ,OAAO,SAAY,OAAO,IAHhD;AAAA,QAIC,WAAW,KAAK,8BAA8B,SAAsB;AAAA,QACpE;AAAA,UACI,OANL;AAAA,QAQC,8BAAC,SAAI,WAAW,KAAK,kCAAkC,GAAI,UAAS;AAAA;AAAA,IACtE;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/chunk-AXEAIXG7.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/select/select.tsx"],"sourcesContent":["import { forwardRef, type ReactNode , type SelectHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type SelectProps = Omit<\n  InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,\n  \"readOnly\" | \"children\"\n> & { children: ReactNode };\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(\n  { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },\n  ref,\n) {\n  return (\n    <InputGroup\n      className={clsx(\"hds-select\", className as undefined)}\n      disabled={disabled}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      style={style}\n      variant={variant}\n    >\n      <select {...rest} disabled={disabled} ref={ref}>\n        {children}\n      </select>\n    </InputGroup>\n  );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAA8D;AACvE,SAAS,YAAY;AAwBf;AAfC,IAAM,SAAS,WAA2C,SAASA,QACxE,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAX9E,IAWE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,cAAc,SAAsB;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,2CAAW,OAAX,EAAiB,UAAoB,KACnC,WACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,OAAO,cAAc;","names":["Select"]}

package/dist/chunk-DRSAVDIE.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\ninterface ExpandableMenuContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  contentId: string;\n}\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}\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}\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    function toggleOpen() {\n      setOpen(!open);\n    }\n\n    return (\n      <button\n        aria-expanded={open}\n        aria-controls={contentId}\n        className={clsx(\n          \"hds-navbar__item\",\n          className as undefined,\n          open ? \"hds-navbar__item--open\" : \"hds-navbar__item--closed\",\n        )}\n        onClick={toggleOpen}\n        ref={ref}\n        title={open ? whenOpenHelperTitle : whenClosedHelperTitle}\n        type=\"button\"\n        style={{ position: \"relative\", ...style }}\n        {...rest}\n      >\n        <span className=\"hds-navbar__item-responsive-text\">\n          <span aria-hidden={!open} className={clsx(\"hds-navbar__item-whenopentext\")}>\n            {whenOpenText}\n          </span>\n          <span aria-hidden={open} className={clsx(\"hds-navbar__item-whenclosedtext\")}>\n            {whenClosedText}\n          </span>\n        </span>\n        <span style={{ width: 32, height: 32 }}>{open ? <CloseIcon /> : <MenuIcon />}</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}\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":";;;;;;;;;;;;;;AAAA,SAAS,eAAe,YAAY,YAAY,UAAU,WAAW,aAAa;AAClF,SAAS,YAAY;AAkDjB,cA4DI,YA5DJ;AAxCJ,IAAM,wBAAwB,cAAiD,IAAI;AAC5E,IAAM,iCAAiC,MAAM;AAClD,QAAM,QAAQ,WAAW,qBAAqB;AAC9C,MAAI,UAAU,MAAM;AAClB,UAAM,IAAI,MAAM,4EAA4E;AAAA,EAC9F;AACA,SAAO;AACT;AAaO,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC5E,QAAM,YAAY,MAAM;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,MAAM;AACR,aAAO,SAAS,GAAG,CAAC;AACpB,eAAS,KAAK,UAAU,IAAI,KAAK,wBAAwB,CAAC;AAC1D,YAAM,mBAAmB;AAAA,QACvB,SAAS,uBAAuB,KAAK,YAAY,CAAC,EAAE,CAAC;AAAA,MACvD;AAEA,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,KAAK,wBAAwB,CAAC;AAC7D,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,WAAW,MAAM,QAAQ,GAC/D,UACH;AAEJ;AAEA,qBAAqB,cAAc;AAc5B,IAAM,8BAA8B;AAAA,EAIzC,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,IApFN,IA4EI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAKF,UAAM,EAAE,WAAW,MAAM,QAAQ,IAAI,+BAA+B;AAEpE,aAAS,aAAa;AACpB,cAAQ,CAAC,IAAI;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,OAAO,2BAA2B;AAAA,QACpC;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,OAAO,OAAO,sBAAsB;AAAA,QACpC,MAAK;AAAA,QACL,OAAO,iBAAE,UAAU,cAAe;AAAA,SAC9B,OAbL;AAAA,QAeC;AAAA,+BAAC,UAAK,WAAU,oCACd;AAAA,gCAAC,UAAK,eAAa,CAAC,MAAM,WAAW,KAAK,+BAA+B,GACtE,wBACH;AAAA,YACA,oBAAC,UAAK,eAAa,MAAM,WAAW,KAAK,iCAAiC,GACvE,0BACH;AAAA,aACF;AAAA,UACA,oBAAC,UAAK,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAG,GAAI,iBAAO,oBAAC,aAAU,IAAK,oBAAC,YAAS,GAAG;AAAA;AAAA;AAAA,IAC/E;AAAA,EAEJ;AACF;AACA,4BAA4B,cAAc;AAUnC,IAAM,8BAA8B,WAGzC,CAAC,IAAkC,QAAQ;AAA1C,eAAE,YAAU,UAzIf,IAyIG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACb,QAAM,EAAE,WAAW,KAAK,IAAI,+BAA+B;AAC3D,SACE;AAAA,IAAC;AAAA,kEACK,OADL;AAAA,MAEC,IAAI;AAAA,MACJ,WAAW,KAAK,uCAAuC,SAAsB;AAAA,MAC7E,cAAY,OAAO,SAAS;AAAA,QACxB,EAAE,OAAO,OAAO,SAAY,OAAO,IALxC;AAAA,MAMC;AAAA,MAEA,8BAAC,SAAI,WAAW,KAAK,2CAA2C,GAAI,UAAS;AAAA;AAAA,EAC/E;AAEJ,CAAC;AACD,4BAA4B,cAAc;","names":[]}

package/dist/chunk-GVO57ZWU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/date-picker/date-picker.tsx"],"sourcesContent":["import { forwardRef, useRef, type InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup, type InputGroupProps } from \"../input-group\";\nimport { useMergeRefs } from \"../../utils/utils\";\n\nexport type DatePickerProps = Omit<\n  InputGroupProps & InputHTMLAttributes<HTMLInputElement>,\n  \"children\" | \"type\"\n> & {\n  /**\n   * Accessible title for the calendar button\n   *\n   * This button currently only shows in Chrome.\n   *\n   * @defaultValue \"Åpne kalender\"\n   */\n  calendarButtonTitle?: string;\n};\n\n/**\n * A basic implementation of a date picker\n *\n * This date picker is an implementation of native date picker, as you get\n * with `<input type=\"date\" />`, where the input field is dressed in Hedwig styling.\n *\n * Due to accessibility concerns you will only see the appropriate Hedwig calendar\n * icon in Chrome. Firefox will show built in icon and Safari will show no icon.\n * Not tested in Edge.\n */\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(\n  {\n    className,\n    variant,\n    errorMessage,\n    labelProps,\n    label,\n    id,\n    style,\n    disabled,\n    readOnly,\n    calendarButtonTitle = \"Åpne kalender\",\n    ...rest\n  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMergeRefs([inputRef, ref]);\n\n  return (\n    <InputGroup\n      className={clsx(\"hds-date-picker\", className as undefined)}\n      disabled={disabled}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      readOnly={readOnly}\n      style={style}\n      variant={variant}\n    >\n      {(inputProps) => (\n        <>\n          <input\n            {...rest}\n            {...inputProps}\n            disabled={disabled}\n            readOnly={readOnly}\n            ref={mergedRef}\n            type=\"date\"\n          />\n          <button\n            className={clsx(\"hds-date-picker__calendar-button\")}\n            type=\"button\"\n            title={calendarButtonTitle}\n            onClick={() => {\n              inputRef.current?.showPicker();\n            }}\n          />\n        </>\n      )}\n    </InputGroup>\n  );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAS,YAAY,cAAwC;AAC7D,SAAS,YAAY;AA4Db,mBACE,KADF;AAhCD,IAAM,aAAa,WAA8C,SAASA,YAC/E,IAaA,KACA;AAdA,eACE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,EAxC1B,IA8BE,IAWK,iBAXL,IAWK;AAAA,IAVH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,mBAAmB,SAAsB;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,WAAC,eACA,iCACE;AAAA;AAAA,UAAC;AAAA,0DACK,OACA,aAFL;AAAA,YAGC;AAAA,YACA;AAAA,YACA,KAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,kCAAkC;AAAA,YAClD,MAAK;AAAA,YACL,OAAO;AAAA,YACP,SAAS,MAAM;AA1E3B,kBAAAC;AA2Ec,eAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB;AAAA,YACpB;AAAA;AAAA,QACF;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAED,WAAW,cAAc;","names":["DatePicker","_a"]}

package/dist/chunk-ILFK3VKS.mjs.map

@@ -1 +0,0 @@
-{"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,KAAM,QAAO,MAAM;AAAA,EAAC;AAE7C,MAAI,gBAA+B,CAAC;AACpC,WAAS,KAAyB,SAAS,IAAI,KAAK,GAAG,eAAe;AACpE,QAAI,OAAO,SAAS,KAAM;AAE1B,eAAW,YAAW,cAAG,kBAAH,mBAAkB,aAAlB,YAA8B,CAAC,GAAG;AACtD,UAAI,YAAY,GAAI;AACpB,UAAI,EAAE,mBAAmB,aAAc;AACvC,UAAI,QAAQ,aAAa,OAAO,EAAG;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-ITLZQ47H.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/input/input.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type InputProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, \"children\">;\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },\n  ref,\n) {\n  return (\n    <InputGroup\n      className={clsx(\"hds-input\", className as undefined)}\n      disabled={disabled}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      readOnly={readOnly}\n      style={style}\n      variant={variant}\n    >\n      <input {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />\n    </InputGroup>\n  );\n});\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAsBf;AAhBC,IAAM,QAAQ,WAAyC,SAASA,OACrE,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAT9E,IASE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,aAAa,SAAsB;AAAA,MACnD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,0CAAU,OAAV,EAAgB,UAAoB,UAAoB,MAAU;AAAA;AAAA,EACrE;AAEJ,CAAC;AAED,MAAM,cAAc;","names":["Input"]}

package/dist/chunk-JEAGKB4V.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/textarea/textarea.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { InputGroup } from \"../input-group\";\nimport type { InputGroupProps } from \"../input-group\";\n\nexport type TextareaProps = Omit<\n  InputGroupProps & TextareaHTMLAttributes<HTMLTextAreaElement>,\n  \"children\"\n>;\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },\n  ref,\n) {\n  return (\n    <InputGroup\n      className={clsx(\"hds-textarea\", className as undefined)}\n      disabled={disabled}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      readOnly={readOnly}\n      style={style}\n      variant={variant}\n    >\n      <textarea {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />\n    </InputGroup>\n  );\n});\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;;;;;AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AAyBf;AAhBC,IAAM,WAAW,WAA+C,SAASA,UAC9E,IACA,KACA;AAFA,eAAE,aAAW,SAAS,cAAc,YAAY,OAAO,IAAI,OAAO,UAAU,SAZ9E,IAYE,IAAyF,iBAAzF,IAAyF,CAAvF,aAAW,WAAS,gBAAc,cAAY,SAAO,MAAI,SAAO,YAAU;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,gBAAgB,SAAsB;AAAA,MACtD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,6CAAa,OAAb,EAAmB,UAAoB,UAAoB,MAAU;AAAA;AAAA,EACxE;AAEJ,CAAC;AAED,SAAS,cAAc;","names":["Textarea"]}

package/dist/chunk-WLESNP6Z.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/skeleton/skeleton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment -- Typings for the differnt html elements */\n/* eslint-disable @typescript-eslint/no-explicit-any -- Typings for the differnt html elements */\n\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\n\ninterface DimensionsFromWidthAndHeight {\n  height?: number | string;\n  width?: number | string;\n}\n\ninterface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The visual style of the Skeleton\n   */\n  variant?: \"text\" | \"circle\" | \"rectangle\" | \"rounded\";\n\n  /**\n   * Whether to show animation or not\n   * In the future the animation effect might become configurable\n   *\n   * default true\n   */\n  animation?: boolean;\n\n  children?: React.ReactNode;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n\n  /**\n   * Convienence prop to change the rendered element.\n   *\n   * Use {@link SkeletonProps.asChild} if you need more control of the rendered element.\n   */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n}\n\nexport type SkeletonProps = SkeletonPropsInner & DimensionsFromWidthAndHeight;\n\n/**\n * Make skeleton loading states as placeholders for your content while waiting for data to load.\n *\n * **Note**\n *\n * Consider if this is really needed. The best experience is to avoid loading states altogether.\n * If your loading takes under 1 second, it better to not show anything at all.\n *\n * - Make your backend faster\n * - Preload/prefetch data\n * - Avoid data loading waterfalls\n * - Use optimistic ui when doing mutations\n *\n * **Usage**\n *\n * ```tsx\n * <Skeleton variant=\"circle\" width=\"2rem\" height=\"2rem\" />\n * <Skeleton variant=\"text\" />\n * <Skeleton variant=\"text\" width=\"80%\" />\n * <Skeleton variant=\"text\">Uses content to determine width</Skeleton>\n * <Skeleton variant=\"rectangle\" width=\"300px\" height=\"400px\" />\n * ```\n *\n * Remember to set `aria-hidden` on top level components you use that are not the `Skeleton` component.\n *\n * The `Skeleton` component does this for it self, but if you are using other components higher up in the tree, it might cause problems with screen readers\n *\n * **References**\n * - https://aksel.nav.no/komponenter/core/skeleton\n * - https://chakra-ui.com/docs/components/skeleton\n * - https://mui.com/material-ui/react-skeleton/\n */\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  (\n    {\n      as: Tag = \"div\",\n      asChild,\n      children,\n      animation = true,\n      variant = \"text\",\n      width,\n      height,\n      className,\n      style,\n      ...rest\n    },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : Tag;\n    return (\n      <Component\n        className={clsx(\n          \"hds-skeleton\",\n          `hds-skeleton--${variant}`,\n          !animation && `hds-skeleton--no-animation`,\n          className as undefined,\n        )}\n        style={{ ...style, width, height }}\n        aria-hidden\n        {...{ inert: \"true\" }}\n        ref={ref as any}\n        {...(rest as any)}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nSkeleton.displayName = \"Skeleton\";\n"],"mappings":";;;;;;;AAGA,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AA0FrB;AAlBC,IAAM,WAAW;AAAA,EACtB,CACE,IAYA,QACG;AAbH,iBACE;AAAA,UAAI,MAAM;AAAA,MACV;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAxFN,IA+EI,IAUK,iBAVL,IAUK;AAAA,MATH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,YAAY,UAAU,OAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,iBAAiB,OAAO;AAAA,UACxB,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QACA,OAAO,iCAAK,QAAL,EAAY,OAAO,OAAO;AAAA,QACjC,eAAW;AAAA,SACP,EAAE,OAAO,OAAO,IATrB;AAAA,QAUC;AAAA,UACK,OAXN;AAAA,QAaE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}

package/dist/chunk-XZ43OSZ5.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/input-group/input-group.tsx"],"sourcesContent":["import { useId, forwardRef, Children, isValidElement, cloneElement } from \"react\";\nimport type { LabelHTMLAttributes, ReactNode, CSSProperties } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ErrorMessage, type ErrorMessageProps } from \"../error-message\";\n\ninterface InputProps {\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean;\n  id?: string;\n  className?: string;\n}\n\nexport interface InputGroupProps {\n  id?: string;\n  className?: string;\n  style?: CSSProperties;\n  variant?: \"default\" | \"white\";\n  errorMessage?: ReactNode;\n  errorMessageProps?: Partial<ErrorMessageProps>;\n  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;\n  label: ReactNode;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /**\n   * `children` must be either a single input element or a render function.\n   *\n   * If you use a render function, make sure you spread the input props to the appropriate element.\n   */\n  children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);\n}\n\nexport const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  {\n    id,\n    className,\n    style,\n    variant = \"default\",\n    errorMessage,\n    errorMessageProps,\n    labelProps: { className: labelClassName, ...labelProps } = {},\n    label,\n    disabled,\n    readOnly,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const errorMessageId = useId();\n  const inputId = useId();\n\n  const renderInput = () => {\n    const inputProps: InputProps = {\n      \"aria-describedby\": errorMessage ? errorMessageId : undefined,\n      \"aria-invalid\": errorMessage ? true : undefined,\n      id: id ?? inputId,\n      className: clsx(\"hds-input-group__input\"),\n    };\n\n    if (typeof children === \"function\") {\n      return children(inputProps);\n    }\n\n    const input: ReactNode = Children.toArray(children)[0];\n\n    if (!isValidElement<InputProps>(input)) {\n      return;\n    }\n\n    return cloneElement<InputProps>(input, {\n      ...inputProps,\n      ...input.props,\n      className: `${inputProps.className} ${input.props.className ?? \"\"}`,\n    });\n  };\n\n  return (\n    <div\n      className={clsx(\n        \"hds-input-group\",\n        {\n          [`hds-input-group--${variant}`]: variant,\n          \"hds-input-group--error\": errorMessage,\n        },\n        className as undefined,\n      )}\n      ref={ref}\n      style={style}\n      {...rest}\n    >\n      <label\n        className={clsx(\"hds-input-group__label\", labelClassName as undefined)}\n        {...labelProps}\n        htmlFor={id ?? inputId}\n      >\n        {label}\n      </label>\n      <div\n        className={clsx(\"hds-input-group__input-wrapper\")}\n        data-disabled={disabled}\n        data-readonly={readOnly}\n      >\n        {renderInput()}\n      </div>\n      <ErrorMessage id={errorMessageId} {...errorMessageProps}>\n        {errorMessage}\n      </ErrorMessage>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAAA,SAAS,OAAO,YAAY,UAAU,gBAAgB,oBAAoB;AAE1E,SAAS,YAAY;AA2EjB,SAaE,KAbF;AA9CG,IAAM,aAAa,WAA4C,SAASA,YAC7E,IAcA,KACA;AAfA,eAOc;AAAA,IANZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,YAAY,KAA+C,CAAC;AAAA,EAvChE,IAgCE,IAOc,SAAE,aAAW,eAvC7B,IAuCgB,IAAgC,uBAAhC,IAAgC,CAA9B,eAPhB,SAQE;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EA3CJ,IAgCE,IAYK,iBAZL,IAYK;AAAA,IAXH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,iBAAiB,MAAM;AAC7B,QAAM,UAAU,MAAM;AAEtB,QAAM,cAAc,MAAM;AAnD5B,QAAAC;AAoDI,UAAM,aAAyB;AAAA,MAC7B,oBAAoB,eAAe,iBAAiB;AAAA,MACpD,gBAAgB,eAAe,OAAO;AAAA,MACtC,IAAI,kBAAM;AAAA,MACV,WAAW,KAAK,wBAAwB;AAAA,IAC1C;AAEA,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS,UAAU;AAAA,IAC5B;AAEA,UAAM,QAAmB,SAAS,QAAQ,QAAQ,EAAE,CAAC;AAErD,QAAI,CAAC,eAA2B,KAAK,GAAG;AACtC;AAAA,IACF;AAEA,WAAO,aAAyB,OAAO,gDAClC,aACA,MAAM,QAF4B;AAAA,MAGrC,WAAW,GAAG,WAAW,SAAS,KAAIA,MAAA,MAAM,MAAM,cAAZ,OAAAA,MAAyB,EAAE;AAAA,IACnE,EAAC;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,oBAAoB,OAAO,EAAE,GAAG;AAAA,UACjC,0BAA0B;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,OACI,OAXL;AAAA,MAaC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,0BAA0B,cAA2B;AAAA,aACjE,aAFL;AAAA,YAGC,SAAS,kBAAM;AAAA,YAEd;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,gCAAgC;AAAA,YAChD,iBAAe;AAAA,YACf,iBAAe;AAAA,YAEd,sBAAY;AAAA;AAAA,QACf;AAAA,QACA,oBAAC,6CAAa,IAAI,kBAAoB,oBAArC,EACE,yBACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["InputGroup","_a"]}

package/dist/chunk-ZSYBCM2L.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/form/error-summary/error-summary.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\nimport { Message, type MessageProps, type MessageTitleProps } from \"../../message\";\nimport { UnorderedList, type ListProps } from \"../../list\";\nimport { Link } from \"../../link\";\nimport { useMergeRefs } from \"../../utils\";\nimport { focusWithLegendOrLabelInViewport } from \"./focus\";\n\ninterface ErrorSummaryHeadingPropsAutoFocus {\n  /**\n   * The heading will be focused when the component mounts\n   *\n   * On following errornous form submissions you should manually focus the heading\n   * e.g. by passing a ref and calling `ref.current.focus()`\n   *\n   * @default true\n   */\n  autoFocus?: boolean;\n}\n\ninterface ErrorSummaryHeadingPropsAs {\n  /**\n   * A heading level must be selected, or optionally opting out for a different element\n   *\n   * Use {@link ErrorSummaryHeadingPropsAsChild.asChild} if you need more control of the rendered element.\n   */\n  as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n  asChild?: never;\n}\n\ninterface ErrorSummaryHeadingPropsAsChild {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild: true;\n  as?: never;\n}\n\nexport type ErrorSummaryHeadingProps = MessageTitleProps &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n\n  useEffect(() => {\n    /**\n     * Hack: Safari 18 on mac at the time of writing\n     * does not correctly focus it with VoiceOver without the timeout\n     */\n    setTimeout(() => {\n      if (focusRef.current && autoFocus) {\n        focusRef.current.focus();\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on initial render\n  }, []);\n\n  return (\n    <Message.Title ref={mergedRef} tabIndex={-1} asChild {...rest}>\n      {Tag ? <Tag>{children}</Tag> : children}\n    </Message.Title>\n  );\n});\nErrorSummaryHeading.displayName = \"ErrorSummary.Heading\";\n\nexport interface ErrorSummaryListProps extends ListProps {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"small\"\n   */\n  size?: ListProps[\"size\"];\n}\nexport const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(\n  ({ children, style: _style, size = \"small\", ...rest }, ref) => {\n    const style = {\n      // Match the link `solid` style, which black underline\n      \"--_hds-list-marker-color\": \"var(--hds-ui-colors-black)\",\n      ..._style,\n    };\n    return (\n      <Message.Description asChild>\n        <UnorderedList size={size} ref={ref} style={style} {...rest}>\n          {children}\n        </UnorderedList>\n      </Message.Description>\n    );\n  },\n);\nErrorSummaryList.displayName = \"ErrorSummary.List\";\n\nexport interface ErrorSummaryItemProps extends React.HTMLAttributes<HTMLLIElement> {\n  /**\n   * A hash link to the element that the error message refers to\n   *\n   * Must start with \"#\" as it's passed to the `href` attribute of an anchor element\n   *\n   * @example \"#email\"\n   */\n  href: `#${string}`;\n\n  /**\n   * Extra props to pass to the link element\n   */\n  linkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n}\nexport const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>(\n  ({ children, href, linkProps, ...rest }, ref) => {\n    function onClick(e: React.MouseEvent<HTMLAnchorElement>) {\n      linkProps?.onClick?.(e);\n      if (focusWithLegendOrLabelInViewport(href.replace(\"#\", \"\"))) {\n        e.preventDefault();\n      }\n    }\n\n    return (\n      <li ref={ref} {...rest}>\n        <Link size=\"small\" href={href} variant=\"solid\" {...linkProps} onClick={onClick}>\n          {children}\n        </Link>\n      </li>\n    );\n  },\n);\nErrorSummaryItem.displayName = \"ErrorSummary.Item\";\n\nexport type ErrorSummaryProps = Omit<MessageProps, \"variant\" | \"icon\" | \"iconClassName\">;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, ...rest }, ref) => {\n    return (\n      <Message variant=\"warning\" ref={ref} {...rest}>\n        {children}\n      </Message>\n    );\n  },\n) as ErrorSummaryType;\nErrorSummary.displayName = \"ErrorSummary\";\n\ntype ErrorSummaryType = ReturnType<typeof forwardRef<HTMLDivElement, ErrorSummaryProps>> & {\n  Heading: typeof ErrorSummaryHeading;\n  List: typeof ErrorSummaryList;\n  Item: typeof ErrorSummaryItem;\n};\nErrorSummary.Heading = ErrorSummaryHeading;\nErrorSummary.List = ErrorSummaryList;\nErrorSummary.Item = ErrorSummaryItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,WAAW,cAAc;AA+DjC;AAtBN,IAAM,sBAAsB,WAGjC,CAAC,IAAkD,QAAQ;AAA1D,eAAE,YAAU,IAAI,KAAK,YAAY,KA5CpC,IA4CG,IAA0C,iBAA1C,IAA0C,CAAxC,YAAU,MAAS;AACtB,QAAM,WAAW,OAAoB,IAAI;AACzC,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAE9C,YAAU,MAAM;AAKd,eAAW,MAAM;AACf,UAAI,SAAS,WAAW,WAAW;AACjC,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,EAEH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,QAAQ,OAAR,+BAAc,KAAK,WAAW,UAAU,IAAI,SAAO,QAAK,OAAxD,EACE,gBAAM,oBAAC,OAAK,UAAS,IAAS,WACjC;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAU3B,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAsD,QAAQ;AAA9D,iBAAE,YAAU,OAAO,QAAQ,OAAO,QA9ErC,IA8EG,IAA8C,iBAA9C,IAA8C,CAA5C,YAAU,SAAe;AAC1B,UAAM,QAAQ;AAAA;AAAA,MAEZ,4BAA4B;AAAA,OACzB;AAEL,WACE,oBAAC,QAAQ,aAAR,EAAoB,SAAO,MAC1B,8BAAC,8CAAc,MAAY,KAAU,SAAkB,OAAtD,EACE,WACH,GACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAiBxB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAwC,QAAQ;AAAhD,iBAAE,YAAU,MAAM,UA/GrB,IA+GG,IAAgC,iBAAhC,IAAgC,CAA9B,YAAU,QAAM;AACjB,aAAS,QAAQ,GAAwC;AAhH7D,UAAAA;AAiHM,OAAAA,MAAA,uCAAW,YAAX,gBAAAA,IAAA,gBAAqB;AACrB,UAAI,iCAAiC,KAAK,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAEA,WACE,oBAAC,qCAAG,OAAc,OAAjB,EACC,8BAAC,qCAAK,MAAK,SAAQ,MAAY,SAAQ,WAAY,YAAlD,EAA6D,SAC3D,WACH,IACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAIxB,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAuB,QAAQ;AAA/B,iBAAE,WArIL,IAqIG,IAAe,iBAAf,IAAe,CAAb;AACD,WACE,oBAAC,wCAAQ,SAAQ,WAAU,OAAc,OAAxC,EACE,WACH;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAO3B,aAAa,UAAU;AACvB,aAAa,OAAO;AACpB,aAAa,OAAO;","names":["_a"]}