@digdir/designsystemet-react 1.20.0 → 1.21.0

package/dist/esm/components/avatar-stack/avatar-stack.d.ts

@@ -0,0 +1,81 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/avatar-stack/avatar-stack.d.ts
+type AvatarStackProps = {
+  /**
+   *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+   *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
+   */
+  gap?: string;
+  /**
+   *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+   *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
+   */
+  avatarSize?: string;
+  /**
+   *  A number which represents the percentage value of how much avatars should overlap.
+   *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
+   */
+  overlap?: number | string;
+  /**
+   *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
+   */
+  suffix?: string;
+  /**
+   *  Expand on hover to show full avatars.
+   *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+   *  @default undefined
+   */
+  expandable?: 'fixed' | boolean;
+} & HTMLAttributes<HTMLUListElement>;
+/**
+ * Use `AvatarStack` to constrain Avatars into a stack.
+ *
+ * @example
+ * <EXPERIMENTAL_AvatarStack>
+ *   <Avatar aria-label='name'>
+ *     <img src={cat1} alt='' />
+ *   </Avatar>
+ *   <Avatar aria-label='name'>
+ *     <BriefcaseIcon />
+ *   </Avatar>
+ *   <Avatar aria-label='name' initials='sm' />
+ * </EXPERIMENTAL_AvatarStack>
+ */
+declare const EXPERIMENTAL_AvatarStack: import("react").ForwardRefExoticComponent<{
+  /**
+   *  Adjusts gap-mask between avatars in the stack. Must be a valid css length value (px, em, rem, var(--ds-size-1) etc.)
+   *  @default 2px
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-gap': VALUE }}` instead
+   */
+  gap?: string;
+  /**
+   *  Control the size of the avatars. Must be a valid css length value (px, em, rem, var(--ds-size-12) etc.)
+   *  @default 'var(--ds-size-12)'
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-size': VALUE }}` instead
+   */
+  avatarSize?: string;
+  /**
+   *  A number which represents the percentage value of how much avatars should overlap.
+   *  @default 50
+   *  @deprecated Please use `style={{ '--dsc-avatar-stack-overlap': VALUE }}` instead
+   */
+  overlap?: number | string;
+  /**
+   *  Text to the right of the avatars to show a number representing additional avatars not shown such as '+5'".
+   *  @deprecated Please use a trailing `<li>` with text instead
+   */
+  suffix?: string;
+  /**
+   *  Expand on hover to show full avatars.
+   *  'fixed': AvatarStack physical width does not change when avatars are expanded.
+   *  @default undefined
+   */
+  expandable?: "fixed" | boolean;
+} & HTMLAttributes<HTMLUListElement> & import("react").RefAttributes<HTMLUListElement>>;
+//#endregion
+export { AvatarStackProps, EXPERIMENTAL_AvatarStack };

package/dist/esm/components/avatar-stack/avatar-stack.js

@@ -1,31 +1,38 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef, Children } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/avatar-stack/avatar-stack.tsx
 /**
- * Use `AvatarStack` to constrain Avatars into a stack.
- *
- * @example
- * <EXPERIMENTAL_AvatarStack>
- *   <Avatar aria-label='name'>
- *     <img src={cat1} alt='' />
- *   </Avatar>
- *   <Avatar aria-label='name'>
- *     <BriefcaseIcon />
- *   </Avatar>
- *   <Avatar aria-label='name' initials='sm' />
- * </EXPERIMENTAL_AvatarStack>
- */
-const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, avatarSize, overlap, expandable, children, ...rest }, ref) {
-    const style = {
-        ...(rest.style || {}),
-        '--dsc-avatar-stack-gap': gap !== undefined ? `${gap}` : undefined,
-        '--dsc-avatar-stack-size': avatarSize ? `${avatarSize}` : undefined,
-        '--dsc-avatar-stack-overlap': overlap !== undefined ? `${overlap}` : undefined,
-        '--dsc-avatar-count': expandable === 'fixed' ? Children.count(children) : undefined,
-    };
-    return (jsx("span", { tabIndex: rest.tabIndex !== undefined ? rest.tabIndex : expandable ? 0 : undefined, ref: ref, className: cl(`ds-avatar-stack`, className), style: style, "data-expandable": expandable, "data-suffix": suffix, ...rest, children: children }));
+* Use `AvatarStack` to constrain Avatars into a stack.
+*
+* @example
+* <EXPERIMENTAL_AvatarStack>
+*   <Avatar aria-label='name'>
+*     <img src={cat1} alt='' />
+*   </Avatar>
+*   <Avatar aria-label='name'>
+*     <BriefcaseIcon />
+*   </Avatar>
+*   <Avatar aria-label='name' initials='sm' />
+* </EXPERIMENTAL_AvatarStack>
+*/
+const EXPERIMENTAL_AvatarStack = forwardRef(function AvatarStack({ className, gap, suffix, children, avatarSize, overlap, style, expandable, ...rest }, ref) {
+	if (typeof overlap === "number") overlap = `calc(var(--dsc-avatar-stack-size) / 100 * ${overlap})`;
+	return /* @__PURE__ */ jsxs("ul", {
+		className: cl(`ds-avatar-stack`, className),
+		"data-expandable": expandable || void 0,
+		tabIndex: rest.tabIndex ?? (expandable ? 0 : void 0),
+		ref,
+		style: {
+			"--dsc-avatar-stack-gap": gap,
+			"--dsc-avatar-stack-size": avatarSize,
+			"--dsc-avatar-stack-overlap": overlap,
+			...style
+		},
+		...rest,
+		children: [children, suffix && /* @__PURE__ */ jsx("li", { children: suffix })]
+	});
 });
-
+//#endregion
 export { EXPERIMENTAL_AvatarStack };

package/dist/esm/components/badge/badge-position.d.ts

@@ -0,0 +1,45 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { HTMLAttributes } from "react";
+//#region src/components/badge/badge-position.d.ts
+type BadgePositionProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * The placement of the badge
+   *
+   * @default top-right
+   */
+  placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+  /**
+   * Use when badge is floating to change the position of the badge
+   *
+   * @default rectangle
+   */
+  overlap?: 'circle' | 'rectangle';
+}>;
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
+declare const BadgePosition: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {
+  /**
+   * The placement of the badge
+   *
+   * @default top-right
+   */
+  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  /**
+   * Use when badge is floating to change the position of the badge
+   *
+   * @default rectangle
+   */
+  overlap?: "circle" | "rectangle";
+} & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { BadgePosition, BadgePositionProps };

package/dist/esm/components/badge/badge-position.js

@@ -1,19 +1,25 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/badge-position.tsx
 /**
- * `BadgePosition` is a component that positions the badge.
- *
- * @example
- * <BadgePosition placement='top-right' overlap='circle'>
- *  <Badge count={5} maxCount={10} />
- *  <Element />
- * </BadgePosition>
- */
-const BadgePosition = forwardRef(function BadgePlacement({ className, overlap = 'rectangle', placement = 'top-right', ...rest }, ref) {
-    return (jsx("span", { className: cl('ds-badge--position', className), "data-overlap": overlap, "data-placement": placement, ref: ref, ...rest }));
+* `BadgePosition` is a component that positions the badge.
+*
+* @example
+* <BadgePosition placement='top-right' overlap='circle'>
+*  <Badge count={5} maxCount={10} />
+*  <Element />
+* </BadgePosition>
+*/
+const BadgePosition = forwardRef(function BadgePlacement({ className, overlap = "rectangle", placement = "top-right", ...rest }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cl("ds-badge--position", className),
+		"data-overlap": overlap,
+		"data-placement": placement,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { BadgePosition };

package/dist/esm/components/badge/badge.d.ts

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { HTMLAttributes } from "react";
+//#region src/components/badge/badge.d.ts
+type BadgeProps = MergeRight<DefaultProps & HTMLAttributes<HTMLSpanElement>, {
+  /**
+   * The number to display in the badge
+   */
+  count?: number;
+  /**
+   * The maximum number to display in the badge, when the count exceeds this number, the badge will display `{max}+`
+   */
+  maxCount?: number;
+  /**
+   * Change the background color of the badge.
+   *
+   * @default 'base'
+   */
+  variant?: 'base' | 'tinted';
+  children?: never;
+}>;
+//#endregion
+export { BadgeProps };

package/dist/esm/components/badge/badge.js

@@ -1,21 +1,27 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
 /**
- * `Badge` is a non-interactive component for displaying status with or without numbers.
- *
- * @example without children
- * <Badge count={5} maxCount={10} />
- *
- * @example with children
- * <Badge count={5} maxCount={10}>
- *   <Icon />
- * </Badge>
- */
+* `Badge` is a non-interactive component for displaying status with or without numbers.
+*
+* @example without children
+* <Badge count={5} maxCount={10} />
+*
+* @example with children
+* <Badge count={5} maxCount={10}>
+*   <Icon />
+* </Badge>
+*/
 const Badge = forwardRef(function Badge({ className, count, maxCount, variant, ...rest }, ref) {
-    return (jsx("span", { className: cl('ds-badge', className), "data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count, "data-variant": variant, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx("span", {
+		className: cl("ds-badge", className),
+		"data-count": count && maxCount && count > maxCount ? `${maxCount}+` : count,
+		"data-variant": variant,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { Badge };

package/dist/esm/components/badge/index.d.ts

@@ -0,0 +1,25 @@
+
+import { DefaultProps } from "../../types.js";
+import { BadgePosition, BadgePositionProps } from "./badge-position.js";
+import { BadgeProps } from "./badge.js";
+import "../../index.js";
+//#region src/components/badge/index.d.ts
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
+declare const Badge: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").HTMLAttributes<HTMLSpanElement>, "children" | "variant" | "count" | "maxCount"> & {
+  count?: number;
+  maxCount?: number;
+  variant?: "base" | "tinted";
+  children?: never;
+} & import("react").RefAttributes<HTMLSpanElement>> & {
+  Position: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").HTMLAttributes<HTMLSpanElement>, "placement" | "overlap"> & {
+    placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    overlap?: "circle" | "rectangle";
+  } & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Badge, BadgePosition, type BadgePositionProps, type BadgeProps };

package/dist/esm/components/badge/index.js

@@ -1,14 +1,14 @@
 'use client';
-import { Badge as Badge$1 } from './badge.js';
-import { BadgePosition } from './badge-position.js';
-
+import { Badge as Badge$1 } from "./badge.js";
+import { BadgePosition } from "./badge-position.js";
+//#region src/components/badge/index.ts
 /**
- * `Badge` is a non-interactive component for displaying status with or without numbers.
- *
- * @example without children
- * <Badge count={5} maxCount={10} />
- */
+* `Badge` is a non-interactive component for displaying status with or without numbers.
+*
+* @example without children
+* <Badge count={5} maxCount={10} />
+*/
 const Badge = Object.assign(Badge$1, { Position: BadgePosition });
-Badge.Position.displayName = 'Badge.Position';
-
+Badge.Position.displayName = "Badge.Position";
+//#endregion
 export { Badge, BadgePosition };

package/dist/esm/components/breadcrumbs/breadcrumbs-item.d.ts

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs-item.d.ts
+type BreadcrumbsItemProps = HTMLAttributes<HTMLLIElement>;
+declare const BreadcrumbsItem: import("react").ForwardRefExoticComponent<BreadcrumbsItemProps & import("react").RefAttributes<HTMLLIElement>>;
+//#endregion
+export { BreadcrumbsItem, BreadcrumbsItemProps };

package/dist/esm/components/breadcrumbs/breadcrumbs-item.js

@@ -1,9 +1,12 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/breadcrumbs/breadcrumbs-item.tsx
 const BreadcrumbsItem = forwardRef(function BreadcrumbsItem({ className, ...rest }, ref) {
-    return jsx("li", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { BreadcrumbsItem };

package/dist/esm/components/breadcrumbs/breadcrumbs-link.d.ts

@@ -0,0 +1,12 @@
+
+import { DefaultProps } from "../../types.js";
+import { LinkProps } from "../link/link.js";
+import "../../index.js";
+//#region src/components/breadcrumbs/breadcrumbs-link.d.ts
+type BreadcrumbsLinkProps = LinkProps;
+declare const BreadcrumbsLink: import("react").ForwardRefExoticComponent<Omit<DefaultProps & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "asChild" | "children"> & {
+  children: import("react").ReactNode;
+  asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { BreadcrumbsLink, BreadcrumbsLinkProps };

package/dist/esm/components/breadcrumbs/breadcrumbs-link.js

@@ -1,11 +1,14 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Link } from '../link/link.js';
-
+import { Link } from "../link/link.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/breadcrumbs/breadcrumbs-link.tsx
 const BreadcrumbsLink = forwardRef(function BreadcrumbsLink(rest, ref) {
-    return (jsx(Link, { suppressHydrationWarning // Since <ds-breadcrumbs> adds aria-current="page"
-        : true, ref: ref, ...rest }));
+	return /* @__PURE__ */ jsx(Link, {
+		suppressHydrationWarning: true,
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { BreadcrumbsLink };

package/dist/esm/components/breadcrumbs/breadcrumbs-list.d.ts

@@ -0,0 +1,7 @@
+
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs-list.d.ts
+type BreadcrumbsListProps = HTMLAttributes<HTMLOListElement>;
+declare const BreadcrumbsList: import("react").ForwardRefExoticComponent<BreadcrumbsListProps & import("react").RefAttributes<HTMLOListElement>>;
+//#endregion
+export { BreadcrumbsList, BreadcrumbsListProps };

package/dist/esm/components/breadcrumbs/breadcrumbs-list.js

@@ -1,9 +1,12 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/breadcrumbs/breadcrumbs-list.tsx
 const BreadcrumbsList = forwardRef(function BreadcrumbsList(rest, ref) {
-    return jsx("ol", { ref: ref, ...rest });
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		...rest
+	});
 });
-
+//#endregion
 export { BreadcrumbsList };

package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,41 @@
+
+import { DefaultProps } from "../../types.js";
+import { MergeRight } from "../../utilities/types.js";
+import "../../utilities/index.js";
+import { DSBreadcrumbsElement } from "@digdir/designsystemet-web";
+import { HTMLAttributes } from "react";
+//#region src/components/breadcrumbs/breadcrumbs.d.ts
+type BreadcrumbsProps = MergeRight<DefaultProps & HTMLAttributes<DSBreadcrumbsElement>, {
+  /**
+   * Sets the screen reader label for the Breadcrumbs area
+   * @default 'Du er her'
+   */
+  'aria-label'?: string;
+}>;
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<Omit<DefaultProps & HTMLAttributes<DSBreadcrumbsElement>, "aria-label"> & {
+  /**
+   * Sets the screen reader label for the Breadcrumbs area
+   * @default 'Du er her'
+   */
+  'aria-label'?: string;
+} & import("react").RefAttributes<DSBreadcrumbsElement>>;
+//#endregion
+export { Breadcrumbs, BreadcrumbsProps };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,27 +1,32 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import '@digdir/designsystemet-web';
-import cl from 'clsx/lite';
-import { forwardRef } from 'react';
-
+import "@digdir/designsystemet-web";
+import cl from "clsx/lite";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/breadcrumbs/breadcrumbs.tsx
 /**
- * `Breadcrumbs` is a component that displays a list of breadcrumbs.
- *
- * @example
- * <Breadcrumbs aria-label='Du er her:' {...args}>
- *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
- *    Nivå 1
- *  </Breadcrumbs.Link>
- *  <Breadcrumbs.List>
- *    <Breadcrumbs.Item>
- *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
- *    </Breadcrumbs.Item>
- *    <Breadcrumbs.Item>
- *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
- *    </Breadcrumbs.Item>
- *  </Breadcrumbs.List>
- * </Breadcrumbs>
- */
-const Breadcrumbs = forwardRef(({ className, ...rest }, ref) => (jsx("ds-breadcrumbs", { suppressHydrationWarning: true, class: cl('ds-breadcrumbs', className), ref: ref, ...rest })));
-
+* `Breadcrumbs` is a component that displays a list of breadcrumbs.
+*
+* @example
+* <Breadcrumbs aria-label='Du er her:' {...args}>
+*  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+*    Nivå 1
+*  </Breadcrumbs.Link>
+*  <Breadcrumbs.List>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*    <Breadcrumbs.Item>
+*      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+*    </Breadcrumbs.Item>
+*  </Breadcrumbs.List>
+* </Breadcrumbs>
+*/
+const Breadcrumbs = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx("ds-breadcrumbs", {
+	suppressHydrationWarning: true,
+	class: cl("ds-breadcrumbs", className),
+	ref,
+	...rest
+}));
+//#endregion
 export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/index.d.ts

@@ -0,0 +1,71 @@
+
+import { Breadcrumbs as Breadcrumbs$1, BreadcrumbsProps } from "./breadcrumbs.js";
+import { BreadcrumbsItem, BreadcrumbsItemProps } from "./breadcrumbs-item.js";
+import { BreadcrumbsLink, BreadcrumbsLinkProps } from "./breadcrumbs-link.js";
+import { BreadcrumbsList, BreadcrumbsListProps } from "./breadcrumbs-list.js";
+//#region src/components/breadcrumbs/index.d.ts
+type Breadcrumbs = typeof Breadcrumbs$1 & {
+  /**
+   * Component that provides a Breadcrumbs item.
+   *
+   * Place as a descendant of `Breadcrumbs.List`
+   *
+   * @example
+   * <Breadcrumbs.List>
+   *   <Breadcrumbs.Item>
+   *     <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   *   </Breadcrumbs.Item>
+   * </Breadcrumbs.List>
+   */
+  Item: typeof BreadcrumbsItem;
+  /**
+   * Component that provides a link for the Breadcrumbs.
+   *
+   * Place as a descendant of `Breadcrumbs`
+   *
+   * @example
+   * <Breadcrumbs>
+   *   <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   * </Breadcrumbs>
+   */
+  Link: typeof BreadcrumbsLink;
+  /**
+   * Component that provides a list of Breadcrumbs items.
+   *
+   * Place as a descendant of `Breadcrumbs`
+   *
+   * @example
+   * <Breadcrumbs>
+   *   <Breadcrumbs.List>
+   *     <Breadcrumbs.Item>
+   *       <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+   *     </Breadcrumbs.Item>
+   *     <Breadcrumbs.Item>
+   *       <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+   *     </Breadcrumbs.Item>
+   *   </Breadcrumbs.List>
+   * </Breadcrumbs>
+   */
+  List: typeof BreadcrumbsList;
+};
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:'>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
+declare const BreadcrumbsComponent: Breadcrumbs;
+//#endregion
+export { BreadcrumbsComponent as Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, BreadcrumbsLink, type BreadcrumbsLinkProps, BreadcrumbsList, type BreadcrumbsListProps, type BreadcrumbsProps };