@postenbring/hedwig-react 3.0.6 → 4.0.1

package/dist/form/error-summary/error-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/error-summary/error-summary.tsx","../../../src/box/box.tsx","../../../src/list/list.tsx","../../../src/link/link.tsx","../../../src/utils/utils.ts","../../../src/form/error-summary/focus.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../../box\";\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 = HTMLAttributes<HTMLElement> &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n  const Component = asChild ? Slot : Tag;\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    <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>\n      {children}\n    </Component>\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, size = \"small\", ...rest }, ref) => (\n    <UnorderedList size={size} ref={ref} {...rest}>\n      {children}\n    </UnorderedList>\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 className={clsx(`hds-error-summary__list-item`)} ref={ref} {...rest}>\n        <Link\n          size=\"small\"\n          href={href}\n          variant=\"inverted-no-underline\"\n          {...linkProps}\n          onClick={onClick}\n        >\n          {children}\n        </Link>\n      </li>\n    );\n  },\n);\nErrorSummaryItem.displayName = \"ErrorSummary.Item\";\n\nexport type ErrorSummaryProps = Omit<\n  BoxProps,\n  \"variant\" | \"closeable\" | \"onClose\" | \"closed\" | \"closeButtonProps\"\n>;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, className, ...rest }, ref) => (\n    <Box ref={ref} {...rest} className={clsx(`hds-error-summary`, className as undefined)}>\n      {children}\n    </Box>\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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"default\" | \"small\" | \"technical\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"default\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\" | \"inverted-no-underline\";\n\n  /**\n   * Font size of the link\n   * @default \"default\"\n   */\n  size?: \"default\" | \"small\" | \"large\" | \"technical\";\n\n  /**\n   * Specify that there is an icon in the link.\n   * `icon=\"leading\"`: There is an icon before the text.\n   * `icon=\"trailing\"`: There is an icon after the text.\n   *\n   */\n  icon?: \"leading\" | \"trailing\";\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\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    { asChild, children, variant = \"underline\", size = \"default\", icon, className, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"default\" && `hds-link--${size}`,\n          { \"hds-link--trailing-icon\": icon === \"trailing\" },\n          { \"hds-link--leading-icon\": icon === \"leading\" },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n  ? (x: boolean): boolean => x\n  : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n","/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n  const input = document.getElementById(id);\n  if (!input) {\n    return false;\n  }\n\n  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n  if (!legendOrLabel) {\n    return false;\n  }\n\n  legendOrLabel.scrollIntoView();\n  input.focus({ preventScroll: true });\n\n  return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n  const fieldset = input.closest(\"fieldset\");\n  if (!fieldset) {\n    return null;\n  }\n\n  const legend = fieldset.querySelector(\"legend\");\n  if (!legend) {\n    return null;\n  }\n\n  // If the input type is radio or checkbox, always use the legend if\n  // there is one.\n  if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n    return legend;\n  }\n\n  // For other input types, only scroll to the fieldset’s legend (instead\n  // of the label associated with the input) if the input would end up in\n  // the top half of the screen.\n  //\n  // This should avoid situations where the input either ends up off the\n  // screen, or obscured by a software keyboard.\n  const legendTop = legend.getBoundingClientRect().top;\n  const inputRect = input.getBoundingClientRect();\n\n  // If the browser doesn't support Element.getBoundingClientRect().height\n  // or window.innerHeight (like IE8), bail and just link to the label.\n  if (inputRect.height && window.innerHeight) {\n    const inputBottom = inputRect.top + inputRect.height;\n\n    if (inputBottom - legendTop < window.innerHeight / 2) {\n      return legend;\n    }\n  }\n}\n\nfunction labelForInput(input: HTMLElement) {\n  return (\n    document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,gBAAmE;AACnE,IAAAC,0BAAqB;AACrB,IAAAC,qBAAqB;;;ACFrB,mBAAkD;AAClD,6BAAqB;AACrB,wBAAgC;AAM1B;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YANL,IAMG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAmDtB,IAAM,UAAM;AAAA,EACjB,CACE,IAWA,QACG;AAZH,iBACE;AAAA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IA9EN,IAsEI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAC7B,UAAM,YAAY,UAAU,yBAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UAC1E,4CAAC,+BAAW,UAAS;AAAA;AAAA;AAAA,IACvB;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAElB,IAAI,cAAc;;;ACrHlB,IAAAC,gBAAgD;AAChD,IAAAC,0BAAqB;AA4Bf,IAAAC,sBAAA;AAHC,IAAM,oBAAgB;AAAA,EAC3B,CAAC,IAA0C,QAAQ;AAAlD,iBAAE,SAAO,WAAW,UA3BvB,IA2BG,IAAkC,iBAAlC,IAAkC,CAAhC,QAAkB;AACnB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,SAAS,aAAa,aAAa,IAAI;AAAA,UACvC;AAAA,QACF;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAgBrB,IAAM,kBAAc;AAAA,EACzB,CAAC,IAAyC,QAAQ;AAAjD,iBAAE,SAAO,UAAU,UA1DtB,IA0DG,IAAiC,iBAAjC,IAAiC,CAA/B,QAAiB;AAClB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,SAAS,aAAa,aAAa,IAAI;AAAA,UACvC;AAAA,QACF;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;;;ACxE1B,YAAuB;AACvB,IAAAC,0BAAqB;AACrB,IAAAC,gBAA2B;AAC3B,IAAAC,qBAAqB;AAwCf,IAAAC,sBAAA;AARC,IAAM,WAAO;AAAA,EAClB,CACE,IACA,QACG;AAFH,iBAAE,WAAS,UAAU,UAAU,aAAa,OAAO,WAAW,MAAM,UArCxE,IAqCI,IAAkF,iBAAlF,IAAkF,CAAhF,WAAS,YAAU,WAAuB,QAAkB,QAAM;AAGpE,UAAM,YAAY,UAAU,0BAAO;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,YAAY,eAAe,aAAa,OAAO;AAAA,UAC/C,SAAS,aAAa,aAAa,IAAI;AAAA,UACvC,EAAE,2BAA2B,SAAS,WAAW;AAAA,UACjD,EAAE,0BAA0B,SAAS,UAAU;AAAA,UAC/C;AAAA,QACF;AAAA,QACA;AAAA,SACI,OAVL;AAAA,QAYE;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;;;AC5DnB,IAAAC,SAAuB;AACvB,IAAAC,gBAA0D;AAMnD,SAAS,aACd,MACoC;AACpC,SAAa,eAAQ,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;AAyFA,IAAM,wBAAiC,OAAO,sBAAQ,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK;;;AC5GjE,SAAS,iCAAiC,IAAY;AAP7D;AAQE,QAAM,QAAQ,SAAS,eAAe,EAAE;AACxC,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,iBAAgB,yBAAoB,KAAK,MAAzB,YAA8B,cAAc,KAAK;AACvE,MAAI,CAAC,eAAe;AAClB,WAAO;AAAA,EACT;AAEA,gBAAc,eAAe;AAC7B,QAAM,MAAM,EAAE,eAAe,KAAK,CAAC;AAEnC,SAAO;AACT;AAEA,SAAS,oBAAoB,OAAoB;AAC/C,QAAM,WAAW,MAAM,QAAQ,UAAU;AACzC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,MAAI,CAAC,QAAQ;AACX,WAAO;AAAA,EACT;AAIA,MAAI,iBAAiB,qBAAqB,MAAM,SAAS,cAAc,MAAM,SAAS,UAAU;AAC9F,WAAO;AAAA,EACT;AAQA,QAAM,YAAY,OAAO,sBAAsB,EAAE;AACjD,QAAM,YAAY,MAAM,sBAAsB;AAI9C,MAAI,UAAU,UAAU,OAAO,aAAa;AAC1C,UAAM,cAAc,UAAU,MAAM,UAAU;AAE9C,QAAI,cAAc,YAAY,OAAO,cAAc,GAAG;AACpD,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,SAAS,cAAc,OAAoB;AA7D3C;AA8DE,UACE,cAAS,cAAc,cAAc,MAAM,aAAa,IAAI,CAAC,IAAI,MAAjE,YAAsE,MAAM,QAAQ,OAAO;AAE/F;;;ALAI,IAAAC,sBAAA;AAtBG,IAAM,0BAAsB,0BAGjC,CAAC,IAA2D,QAAQ;AAAnE,eAAE,WAAS,UAAU,IAAI,KAAK,YAAY,KA9C7C,IA8CG,IAAmD,iBAAnD,IAAmD,CAAjD,WAAS,YAAU,MAAS;AAC/B,QAAM,eAAW,sBAAoB,IAAI;AACzC,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAC9C,QAAM,YAAY,UAAU,0BAAO;AAEnC,+BAAU,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,6CAAC,0CAAU,eAAW,8BAAK,0BAA0B,GAAG,KAAK,WAAW,UAAU,MAAQ,OAAzF,EACE,WACH;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAU3B,IAAM,uBAAmB;AAAA,EAC9B,CAAC,IAAuC,QAAK;AAA5C,iBAAE,YAAU,OAAO,QAjFtB,IAiFG,IAA+B,iBAA/B,IAA+B,CAA7B,YAAU;AACX,wDAAC,8CAAc,MAAY,OAAc,OAAxC,EACE,WACH;AAAA;AAEJ;AACA,iBAAiB,cAAc;AAiBxB,IAAM,uBAAmB;AAAA,EAC9B,CAAC,IAAwC,QAAQ;AAAhD,iBAAE,YAAU,MAAM,UAzGrB,IAyGG,IAAgC,iBAAhC,IAAgC,CAA9B,YAAU,QAAM;AACjB,aAAS,QAAQ,GAAwC;AA1G7D,UAAAC;AA2GM,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,6CAAC,qCAAG,eAAW,8BAAK,8BAA8B,GAAG,OAAc,OAAlE,EACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,SAAQ;AAAA,SACJ,YAJL;AAAA,QAKC;AAAA,QAEC;AAAA;AAAA,IACH,IACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAOxB,IAAM,mBAAe;AAAA,EAC1B,CAAC,IAAkC,QAAK;AAAvC,iBAAE,YAAU,UAxIf,IAwIG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX,wDAAC,oCAAI,OAAc,OAAlB,EAAwB,eAAW,8BAAK,qBAAqB,SAAsB,GACjF,WACH;AAAA;AAEJ;AACA,aAAa,cAAc;AAO3B,aAAa,UAAU;AACvB,aAAa,OAAO;AACpB,aAAa,OAAO;","names":["import_react","import_typed_classname","import_react_slot","import_react","import_typed_classname","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime","React","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../../src/form/error-summary/error-summary.tsx","../../../src/box/box.tsx","../../../src/list/list.tsx","../../../src/link/link.tsx","../../../src/utils/utils.ts","../../../src/form/error-summary/focus.ts"],"sourcesContent":["import { forwardRef, useEffect, useRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../../box\";\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 = HTMLAttributes<HTMLElement> &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n  const Component = asChild ? Slot : Tag;\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    <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>\n      {children}\n    </Component>\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, size = \"small\", ...rest }, ref) => (\n    <UnorderedList size={size} ref={ref} {...rest}>\n      {children}\n    </UnorderedList>\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 className={clsx(`hds-error-summary__list-item`)} 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<\n  BoxProps,\n  \"variant\" | \"closeable\" | \"onClose\" | \"closed\" | \"closeButtonProps\"\n>;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, className, ...rest }, ref) => (\n    <Box ref={ref} {...rest} className={clsx(`hds-error-summary`, className as undefined)}>\n      {children}\n    </Box>\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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nfunction CloseIcon() {\n  return (\n    <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32} viewBox=\"0 0 32 32\">\n      <path\n        d=\"M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        <CloseIcon />\n      </button>\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Posten/Bring-spesific variant of the box. NB: warning variant is deprecated, use data-color=\"warning\" instead.\n   *\n   * @default \"light-grey\"\n   */\n  variant?:\n    | \"light-grey\"\n    | \"lighter\"\n    | \"white\"\n    /** @deprecated use data-color=\"warning\" instead */\n    | \"warning\";\n\n  /**\n   * Color variant of the box\n   *\n   */\n\n  \"data-color\"?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\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\nconst convertVariantToColor = (variant: BoxProps[\"variant\"] | \"\") => {\n  switch (variant) {\n    case \"lighter\":\n      return \"\";\n    case \"white\":\n      return \"\";\n    case \"warning\":\n      return \"warning\";\n    default:\n      return \"neutral\";\n  }\n};\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      \"data-color\": color = \"\",\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    const resolvedColor = color && color !== \"\" ? color : convertVariantToColor(variant);\n\n    return (\n      <Component\n        data-color={resolvedColor}\n        className={clsx(\n          \"hds-box\",\n          { \"hds-box--lighter\": variant === \"lighter\" },\n          { \"hds-box--white\": variant === \"white\" },\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"default\" | \"small\" | \"technical\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"default\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"no-underline\";\n\n  /**\n   * Font size of the link\n   * @default \"default\"\n   */\n  size?: \"default\" | \"small\" | \"large\" | \"technical\";\n\n  /**\n   * Specify that there is an icon in the link.\n   * `icon=\"leading\"`: There is an icon before the text.\n   * `icon=\"trailing\"`: There is an icon after the text.\n   *\n   */\n  icon?: \"leading\" | \"trailing\";\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\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    { asChild, children, variant = \"underline\", size = \"default\", icon, className, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"default\" && `hds-link--${size}`,\n          { \"hds-link--trailing-icon\": icon === \"trailing\" },\n          { \"hds-link--leading-icon\": icon === \"leading\" },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n  ? (x: boolean): boolean => x\n  : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n","/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n  const input = document.getElementById(id);\n  if (!input) {\n    return false;\n  }\n\n  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n  if (!legendOrLabel) {\n    return false;\n  }\n\n  legendOrLabel.scrollIntoView();\n  input.focus({ preventScroll: true });\n\n  return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n  const fieldset = input.closest(\"fieldset\");\n  if (!fieldset) {\n    return null;\n  }\n\n  const legend = fieldset.querySelector(\"legend\");\n  if (!legend) {\n    return null;\n  }\n\n  // If the input type is radio or checkbox, always use the legend if\n  // there is one.\n  if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n    return legend;\n  }\n\n  // For other input types, only scroll to the fieldset’s legend (instead\n  // of the label associated with the input) if the input would end up in\n  // the top half of the screen.\n  //\n  // This should avoid situations where the input either ends up off the\n  // screen, or obscured by a software keyboard.\n  const legendTop = legend.getBoundingClientRect().top;\n  const inputRect = input.getBoundingClientRect();\n\n  // If the browser doesn't support Element.getBoundingClientRect().height\n  // or window.innerHeight (like IE8), bail and just link to the label.\n  if (inputRect.height && window.innerHeight) {\n    const inputBottom = inputRect.top + inputRect.height;\n\n    if (inputBottom - legendTop < window.innerHeight / 2) {\n      return legend;\n    }\n  }\n}\n\nfunction labelForInput(input: HTMLElement) {\n  return (\n    document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n  );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_typed_classname","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime","React","import_react","import_jsx_runtime","_a"]}

package/dist/form/error-summary/error-summary.mjs

@@ -3,10 +3,10 @@ import {
   ErrorSummaryHeading,
   ErrorSummaryItem,
   ErrorSummaryList
-} from "../../chunk-W7CPW23K.mjs";
+} from "../../chunk-F7MLQ6JI.mjs";
 import "../../chunk-CKAL5ZJZ.mjs";
 import "../../chunk-XLLYMQLW.mjs";
-import "../../chunk-OHDHIRAW.mjs";
+import "../../chunk-QE2ZES72.mjs";
 import "../../chunk-6QV3OV66.mjs";
 import "../../chunk-OS24UCTD.mjs";
 import "../../chunk-3QHKPEXO.mjs";
@@ -14,7 +14,7 @@ import "../../chunk-BCFV6VOE.mjs";
 import "../../chunk-CYDWEPFL.mjs";
 import "../../chunk-GYI4NCUY.mjs";
 import "../../chunk-77M2ZTP7.mjs";
-import "../../chunk-3OGHJOJF.mjs";
+import "../../chunk-DEABU7DB.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   ErrorSummary,

package/dist/form/error-summary/index.js

@@ -73,23 +73,47 @@ var import_react = require("react");
 var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
+      fill: "currentColor"
+    }
+  ) });
+}
 var BoxCloseButton = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
         ref,
         type: "button"
-      }, rest)
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+      })
     );
   }
 );
 BoxCloseButton.displayName = "Box.CloseButton";
+var convertVariantToColor = (variant) => {
+  switch (variant) {
+    case "lighter":
+      return "";
+    case "white":
+      return "";
+    case "warning":
+      return "warning";
+    default:
+      return "neutral";
+  }
+};
 var Box = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
+      "data-color": color = "",
       asChild,
       variant,
       closeable = false,
@@ -99,6 +123,7 @@ var Box = (0, import_react.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
+      "data-color",
       "asChild",
       "variant",
       "closeable",
@@ -121,12 +146,15 @@ var Box = (0, import_react.forwardRef)(
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
     const Component = asChild ? import_react_slot.Slot : "div";
+    const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       __spreadProps(__spreadValues({
+        "data-color": resolvedColor,
         className: (0, import_typed_classname.clsx)(
           "hds-box",
-          variant && `hds-box--${variant}`,
+          { "hds-box--lighter": variant === "lighter" },
+          { "hds-box--white": variant === "white" },
           { "hds-box--closed": closed },
           className
         ),
@@ -308,17 +336,7 @@ var ErrorSummaryItem = (0, import_react5.forwardRef)(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname4.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      Link,
-      __spreadProps(__spreadValues({
-        size: "small",
-        href,
-        variant: "inverted-no-underline"
-      }, linkProps), {
-        onClick,
-        children
-      })
-    ) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname4.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
   }
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";

package/dist/form/error-summary/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/form/error-summary/index.tsx","../../../src/form/error-summary/error-summary.tsx","../../../src/box/box.tsx","../../../src/list/list.tsx","../../../src/link/link.tsx","../../../src/utils/utils.ts","../../../src/form/error-summary/focus.ts"],"sourcesContent":["export { ErrorSummary } from \"./error-summary\";\nexport type * from \"./error-summary\";\n","import { forwardRef, useEffect, useRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../../box\";\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 = HTMLAttributes<HTMLElement> &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n  const Component = asChild ? Slot : Tag;\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    <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>\n      {children}\n    </Component>\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, size = \"small\", ...rest }, ref) => (\n    <UnorderedList size={size} ref={ref} {...rest}>\n      {children}\n    </UnorderedList>\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 className={clsx(`hds-error-summary__list-item`)} ref={ref} {...rest}>\n        <Link\n          size=\"small\"\n          href={href}\n          variant=\"inverted-no-underline\"\n          {...linkProps}\n          onClick={onClick}\n        >\n          {children}\n        </Link>\n      </li>\n    );\n  },\n);\nErrorSummaryItem.displayName = \"ErrorSummary.Item\";\n\nexport type ErrorSummaryProps = Omit<\n  BoxProps,\n  \"variant\" | \"closeable\" | \"onClose\" | \"closed\" | \"closeButtonProps\"\n>;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, className, ...rest }, ref) => (\n    <Box ref={ref} {...rest} className={clsx(`hds-error-summary`, className as undefined)}>\n      {children}\n    </Box>\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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      />\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Color variant of the box\n   *\n   * @default \"light-grey\"\n   */\n  variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\n\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   *\n   * @default false\n   */\n  asChild?: boolean;\n}\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-box\",\n          variant && `hds-box--${variant}`,\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"default\" | \"small\" | \"technical\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"default\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"inverted\" | \"no-underline\" | \"inverted-no-underline\";\n\n  /**\n   * Font size of the link\n   * @default \"default\"\n   */\n  size?: \"default\" | \"small\" | \"large\" | \"technical\";\n\n  /**\n   * Specify that there is an icon in the link.\n   * `icon=\"leading\"`: There is an icon before the text.\n   * `icon=\"trailing\"`: There is an icon after the text.\n   *\n   */\n  icon?: \"leading\" | \"trailing\";\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\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    { asChild, children, variant = \"underline\", size = \"default\", icon, className, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"default\" && `hds-link--${size}`,\n          { \"hds-link--trailing-icon\": icon === \"trailing\" },\n          { \"hds-link--leading-icon\": icon === \"leading\" },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n  ? (x: boolean): boolean => x\n  : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n","/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n  const input = document.getElementById(id);\n  if (!input) {\n    return false;\n  }\n\n  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n  if (!legendOrLabel) {\n    return false;\n  }\n\n  legendOrLabel.scrollIntoView();\n  input.focus({ preventScroll: true });\n\n  return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n  const fieldset = input.closest(\"fieldset\");\n  if (!fieldset) {\n    return null;\n  }\n\n  const legend = fieldset.querySelector(\"legend\");\n  if (!legend) {\n    return null;\n  }\n\n  // If the input type is radio or checkbox, always use the legend if\n  // there is one.\n  if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n    return legend;\n  }\n\n  // For other input types, only scroll to the fieldset’s legend (instead\n  // of the label associated with the input) if the input would end up in\n  // the top half of the screen.\n  //\n  // This should avoid situations where the input either ends up off the\n  // screen, or obscured by a software keyboard.\n  const legendTop = legend.getBoundingClientRect().top;\n  const inputRect = input.getBoundingClientRect();\n\n  // If the browser doesn't support Element.getBoundingClientRect().height\n  // or window.innerHeight (like IE8), bail and just link to the label.\n  if (inputRect.height && window.innerHeight) {\n    const inputBottom = inputRect.top + inputRect.height;\n\n    if (inputBottom - legendTop < window.innerHeight / 2) {\n      return legend;\n    }\n  }\n}\n\nfunction labelForInput(input: HTMLElement) {\n  return (\n    document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n  );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_typed_classname","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime","React","import_react","import_jsx_runtime","_a"]}
+{"version":3,"sources":["../../../src/form/error-summary/index.tsx","../../../src/form/error-summary/error-summary.tsx","../../../src/box/box.tsx","../../../src/list/list.tsx","../../../src/link/link.tsx","../../../src/utils/utils.ts","../../../src/form/error-summary/focus.ts"],"sourcesContent":["export { ErrorSummary } from \"./error-summary\";\nexport type * from \"./error-summary\";\n","import { forwardRef, useEffect, useRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../../box\";\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 = HTMLAttributes<HTMLElement> &\n  ErrorSummaryHeadingPropsAutoFocus &\n  (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n  HTMLParagraphElement,\n  ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {\n  const focusRef = useRef<HTMLElement>(null);\n  const mergedRef = useMergeRefs([focusRef, ref]);\n  const Component = asChild ? Slot : Tag;\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    <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>\n      {children}\n    </Component>\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, size = \"small\", ...rest }, ref) => (\n    <UnorderedList size={size} ref={ref} {...rest}>\n      {children}\n    </UnorderedList>\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 className={clsx(`hds-error-summary__list-item`)} 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<\n  BoxProps,\n  \"variant\" | \"closeable\" | \"onClose\" | \"closed\" | \"closeButtonProps\"\n>;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n  ({ children, className, ...rest }, ref) => (\n    <Box ref={ref} {...rest} className={clsx(`hds-error-summary`, className as undefined)}>\n      {children}\n    </Box>\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","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\n\nfunction CloseIcon() {\n  return (\n    <svg aria-hidden xmlns=\"http://www.w3.org/2000/svg\" width={32} height={32} viewBox=\"0 0 32 32\">\n      <path\n        d=\"M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n}\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n  ({ className, ...rest }, ref) => {\n    return (\n      <button\n        className={clsx(\"hds-box__close-button\", className as undefined)}\n        ref={ref}\n        type=\"button\"\n        {...rest}\n      >\n        <CloseIcon />\n      </button>\n    );\n  },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n\n  /**\n   * Posten/Bring-spesific variant of the box. NB: warning variant is deprecated, use data-color=\"warning\" instead.\n   *\n   * @default \"light-grey\"\n   */\n  variant?:\n    | \"light-grey\"\n    | \"lighter\"\n    | \"white\"\n    /** @deprecated use data-color=\"warning\" instead */\n    | \"warning\";\n\n  /**\n   * Color variant of the box\n   *\n   */\n\n  \"data-color\"?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\n  /**\n   * If `true`, a close button will be shown.\n   * Use when you want to control the close button using the BoxCloseButton component.\n   *\n   * @default false\n   */\n  closeable?: boolean;\n\n  /**\n   * Callback fired when the component requests to be closed.\n   * If not set, the component will be closed without any user interaction.\n   *\n   * If set, and the handler returns non-true value, the component will not be closed.\n   * Use this if you want to control the closing of the component, using the `closed` prop\n   *\n   * If set, and the handler returns the true, the component will be closed.\n   * Use this with `window.confirm()` to ask the user to confirm closing the component.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n  onClose?: () => boolean | unknown;\n\n  /**\n   * If `true`, the box will be closed and hidden from view\n   */\n  closed?: boolean;\n\n  /**\n   * Props applied to the close button element.\n   */\n  closeButtonProps?: BoxCloseButtonProps;\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\nconst convertVariantToColor = (variant: BoxProps[\"variant\"] | \"\") => {\n  switch (variant) {\n    case \"lighter\":\n      return \"\";\n    case \"white\":\n      return \"\";\n    case \"warning\":\n      return \"warning\";\n    default:\n      return \"neutral\";\n  }\n};\n\nexport const Box = forwardRef<HTMLDivElement, BoxProps>(\n  (\n    {\n      \"data-color\": color = \"\",\n      asChild,\n      variant,\n      closeable = false,\n      onClose: onCloseProp,\n      closed: closedProp,\n      closeButtonProps,\n      children,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const [closedState, setClosedState] = useState(false);\n    const onClose = useCallback(() => {\n      if (onCloseProp) {\n        const result = onCloseProp();\n        if (result === true) {\n          setClosedState(true);\n        }\n      } else {\n        setClosedState(true);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n    }, []);\n    const closed = closedProp ?? closedState;\n    const Component = asChild ? Slot : \"div\";\n\n    const resolvedColor = color && color !== \"\" ? color : convertVariantToColor(variant);\n\n    return (\n      <Component\n        data-color={resolvedColor}\n        className={clsx(\n          \"hds-box\",\n          { \"hds-box--lighter\": variant === \"lighter\" },\n          { \"hds-box--white\": variant === \"white\" },\n          { \"hds-box--closed\": closed },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n        <Slottable>{children}</Slottable>\n      </Component>\n    );\n  },\n) as BoxType;\nBox.displayName = \"Box\";\n\nBox.CloseButton = BoxCloseButton;\n\ntype BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {\n  CloseButton: typeof BoxCloseButton;\n};\n","import { forwardRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\nexport interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {\n  /**\n   * Sets the size of the items (font)\n   *\n   * @default \"medium\"\n   */\n  size?: \"default\" | \"small\" | \"technical\" | \"medium\" | \"large\";\n}\n\n/**\n * An unordered list of simple items, often text. You can nest other lists inside this component.\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <UnorderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </UnorderedList>\n * ```\n */\nexport const UnorderedList = forwardRef<HTMLUListElement, ListProps>(\n  ({ size = \"default\", className, ...rest }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nUnorderedList.displayName = \"UnorderedList\";\n\n/**\n * An ordered list of simple items\n *\n * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.\n *\n * @example\n * ```tsx\n * <OrderedList>\n *  <li>Item 1</li>\n *  <li>Item 2</li>\n *  <li>Item 3</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = forwardRef<HTMLOListElement, ListProps>(\n  ({ size = \"medium\", className, ...rest }, ref) => {\n    return (\n      <ol\n        ref={ref}\n        className={clsx(\n          \"hds-list\",\n          size !== \"default\" && `hds-list--${size}`,\n          className as undefined,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\nOrderedList.displayName = \"OrderedList\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * The visual style of the link\n   */\n  variant?: \"underline\" | \"solid\" | \"no-underline\";\n\n  /**\n   * Font size of the link\n   * @default \"default\"\n   */\n  size?: \"default\" | \"small\" | \"large\" | \"technical\";\n\n  /**\n   * Specify that there is an icon in the link.\n   * `icon=\"leading\"`: There is an icon before the text.\n   * `icon=\"trailing\"`: There is an icon after the text.\n   *\n   */\n  icon?: \"leading\" | \"trailing\";\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\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n  (\n    { asChild, children, variant = \"underline\", size = \"default\", icon, className, ...rest },\n    ref,\n  ) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        className={clsx(\n          \"hds-link\",\n          variant !== \"underline\" && `hds-link--${variant}`,\n          size !== \"default\" && `hds-link--${size}`,\n          { \"hds-link--trailing-icon\": icon === \"trailing\" },\n          { \"hds-link--leading-icon\": icon === \"leading\" },\n          className as undefined,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </Component>\n    );\n  },\n);\nLink.displayName = \"Link\";\n","import * as React from \"react\";\nimport { useCallback, useEffect, useState, version } 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\n/**\n * React 19 supports inert prop\n * React 18 needs inert to be a string\n */\nconst inertBooleanSupported: boolean = Number(version.split(\".\")[0]) >= 19;\n\n/**\n * Returns the inert prop value based on the React version.\n */\nexport const inertPropValue: (x: boolean) => boolean | \"\" | undefined = inertBooleanSupported\n  ? (x: boolean): boolean => x\n  : (x: boolean): \"\" | undefined => (x ? \"\" : undefined);\n","/**\n * Focus a form field while showing the associated legend or label in the viewport.\n *\n * Gives the user a better context of what field they are focusing on.\n *\n * Copied from https://github.com/alphagov/govuk-frontend/blob/cbf4ef1e329711be5b78a92bda6ba84a7db9ca40/packages/govuk-frontend/src/govuk/components/error-summary/error-summary.mjs#L60-L108\n */\nexport function focusWithLegendOrLabelInViewport(id: string) {\n  const input = document.getElementById(id);\n  if (!input) {\n    return false;\n  }\n\n  const legendOrLabel = maybeLegendForInput(input) ?? labelForInput(input);\n  if (!legendOrLabel) {\n    return false;\n  }\n\n  legendOrLabel.scrollIntoView();\n  input.focus({ preventScroll: true });\n\n  return true;\n}\n\nfunction maybeLegendForInput(input: HTMLElement) {\n  const fieldset = input.closest(\"fieldset\");\n  if (!fieldset) {\n    return null;\n  }\n\n  const legend = fieldset.querySelector(\"legend\");\n  if (!legend) {\n    return null;\n  }\n\n  // If the input type is radio or checkbox, always use the legend if\n  // there is one.\n  if (input instanceof HTMLInputElement && (input.type === \"checkbox\" || input.type === \"radio\")) {\n    return legend;\n  }\n\n  // For other input types, only scroll to the fieldset’s legend (instead\n  // of the label associated with the input) if the input would end up in\n  // the top half of the screen.\n  //\n  // This should avoid situations where the input either ends up off the\n  // screen, or obscured by a software keyboard.\n  const legendTop = legend.getBoundingClientRect().top;\n  const inputRect = input.getBoundingClientRect();\n\n  // If the browser doesn't support Element.getBoundingClientRect().height\n  // or window.innerHeight (like IE8), bail and just link to the label.\n  if (inputRect.height && window.innerHeight) {\n    const inputBottom = inputRect.top + inputRect.height;\n\n    if (inputBottom - legendTop < window.innerHeight / 2) {\n      return legend;\n    }\n  }\n}\n\nfunction labelForInput(input: HTMLElement) {\n  return (\n    document.querySelector(`label[for='${input.getAttribute(\"id\")}']`) ?? input.closest(\"label\")\n  );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react_slot","import_react","import_typed_classname","import_jsx_runtime","import_typed_classname","import_react","import_react_slot","import_jsx_runtime","React","import_react","import_jsx_runtime","_a"]}

package/dist/form/error-summary/index.mjs

@@ -1,10 +1,10 @@
 import "../../chunk-KPPLVGZ3.mjs";
 import {
   ErrorSummary
-} from "../../chunk-W7CPW23K.mjs";
+} from "../../chunk-F7MLQ6JI.mjs";
 import "../../chunk-CKAL5ZJZ.mjs";
 import "../../chunk-XLLYMQLW.mjs";
-import "../../chunk-OHDHIRAW.mjs";
+import "../../chunk-QE2ZES72.mjs";
 import "../../chunk-6QV3OV66.mjs";
 import "../../chunk-OS24UCTD.mjs";
 import "../../chunk-3QHKPEXO.mjs";
@@ -12,7 +12,7 @@ import "../../chunk-BCFV6VOE.mjs";
 import "../../chunk-CYDWEPFL.mjs";
 import "../../chunk-GYI4NCUY.mjs";
 import "../../chunk-77M2ZTP7.mjs";
-import "../../chunk-3OGHJOJF.mjs";
+import "../../chunk-DEABU7DB.mjs";
 import "../../chunk-YOSPWY5K.mjs";
 export {
   ErrorSummary

package/dist/form/index.js

@@ -409,23 +409,47 @@ var import_react7 = require("react");
 var import_typed_classname6 = require("@postenbring/hedwig-css/typed-classname");
 var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
+      fill: "currentColor"
+    }
+  ) });
+}
 var BoxCloseButton = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: (0, import_typed_classname6.clsx)("hds-box__close-button", className),
         ref,
         type: "button"
-      }, rest)
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
+      })
     );
   }
 );
 BoxCloseButton.displayName = "Box.CloseButton";
+var convertVariantToColor = (variant) => {
+  switch (variant) {
+    case "lighter":
+      return "";
+    case "white":
+      return "";
+    case "warning":
+      return "warning";
+    default:
+      return "neutral";
+  }
+};
 var Box = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
+      "data-color": color = "",
       asChild,
       variant,
       closeable = false,
@@ -435,6 +459,7 @@ var Box = (0, import_react7.forwardRef)(
       children,
       className
     } = _b, rest = __objRest(_b, [
+      "data-color",
       "asChild",
       "variant",
       "closeable",
@@ -457,12 +482,15 @@ var Box = (0, import_react7.forwardRef)(
     }, []);
     const closed = closedProp != null ? closedProp : closedState;
     const Component = asChild ? import_react_slot.Slot : "div";
+    const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Component,
       __spreadProps(__spreadValues({
+        "data-color": resolvedColor,
         className: (0, import_typed_classname6.clsx)(
           "hds-box",
-          variant && `hds-box--${variant}`,
+          { "hds-box--lighter": variant === "lighter" },
+          { "hds-box--white": variant === "white" },
           { "hds-box--closed": closed },
           className
         ),
@@ -623,17 +651,7 @@ var ErrorSummaryItem = (0, import_react10.forwardRef)(
         e.preventDefault();
       }
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname9.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      Link,
-      __spreadProps(__spreadValues({
-        size: "small",
-        href,
-        variant: "inverted-no-underline"
-      }, linkProps), {
-        onClick,
-        children
-      })
-    ) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", __spreadProps(__spreadValues({ className: (0, import_typed_classname9.clsx)(`hds-error-summary__list-item`), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Link, __spreadProps(__spreadValues({ size: "small", href, variant: "solid" }, linkProps), { onClick, children })) }));
   }
 );
 ErrorSummaryItem.displayName = "ErrorSummary.Item";