@postenbring/hedwig-react 0.0.76 → 0.0.78

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

@@ -1,16 +1,10 @@
 /// <reference types="react" />
 
-import type { ButtonHTMLAttributes } from 'react';
 import { ChangeEventHandler } from 'react';
-import { ComponentPropsWithRef } from 'react';
-import { ComponentType } from 'react';
 import { Context } from 'react';
 import type { CSSProperties } from 'react';
-import { ElementType } from 'react';
-import { FC } from 'react';
 import type { FieldsetHTMLAttributes } from 'react';
 import { ForwardRefExoticComponent } from 'react';
-import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -26,14 +20,9 @@ import { SelectHTMLAttributes } from 'react';
 import type { StoryObj } from '@storybook/react';
 import type { TextareaHTMLAttributes } from 'react';
 
-export declare const Accordion_alias_2: OverridableComponent<AccordionProps, HTMLDivElement>;
+export declare const Accordion_alias_2: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
 
-declare const AccordionComponent: {
-    (props: AccordionProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & AccordionProps & Omit<ComponentPropsWithRef<As>, keyof AccordionProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
+declare const AccordionComponent: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     Content: typeof AccordionContent;
@@ -42,13 +31,13 @@ export { AccordionComponent as Accordion }
 export { AccordionComponent as Accordion_alias_1 }
 export { AccordionComponent as Accordion_alias_3 }
 
-declare const AccordionContent: OverridableComponent<AccordionContentProps, HTMLDivElement>;
+declare const AccordionContent: ForwardRefExoticComponent<AccordionContentProps & RefAttributes<HTMLDivElement>>;
 export { AccordionContent }
 export { AccordionContent as AccordionContent_alias_1 }
 export { AccordionContent as AccordionContent_alias_2 }
 export { AccordionContent as AccordionContent_alias_3 }
 
-declare interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+declare interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
 export { AccordionContentProps }
@@ -56,13 +45,13 @@ export { AccordionContentProps as AccordionContentProps_alias_1 }
 export { AccordionContentProps as AccordionContentProps_alias_2 }
 export { AccordionContentProps as AccordionContentProps_alias_3 }
 
-declare const AccordionHeader: OverridableComponent<AccordionHeaderProps, HTMLButtonElement>;
+declare const AccordionHeader: ForwardRefExoticComponent<AccordionHeaderProps & RefAttributes<HTMLButtonElement>>;
 export { AccordionHeader }
 export { AccordionHeader as AccordionHeader_alias_1 }
 export { AccordionHeader as AccordionHeader_alias_2 }
 export { AccordionHeader as AccordionHeader_alias_3 }
 
-declare interface AccordionHeaderProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+declare interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
 }
 export { AccordionHeaderProps }
@@ -70,7 +59,7 @@ export { AccordionHeaderProps as AccordionHeaderProps_alias_1 }
 export { AccordionHeaderProps as AccordionHeaderProps_alias_2 }
 export { AccordionHeaderProps as AccordionHeaderProps_alias_3 }
 
-declare const AccordionItem: OverridableComponent<AccordionItemProps, HTMLDivElement>;
+declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
 export { AccordionItem }
 export { AccordionItem as AccordionItem_alias_1 }
 export { AccordionItem as AccordionItem_alias_2 }
@@ -89,7 +78,7 @@ export declare interface AccordionItemContextProps {
     setOpen: (open: boolean) => void;
 }
 
-declare interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+declare interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Control the open state of the accordion manually
      */
@@ -121,7 +110,6 @@ declare interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
      * Adds padding to the left of the accordion
      */
     indent?: boolean;
-    className?: string;
 }
 export { AccordionProps }
 export { AccordionProps as AccordionProps_alias_1 }
@@ -147,14 +135,14 @@ export declare const Attention: Story_21;
  *
  * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.
  */
-declare const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement>;
+declare const AutoAnimateHeight: ForwardRefExoticComponent<AutoAnimateHeightProps & RefAttributes<HTMLDivElement>>;
 export { AutoAnimateHeight }
 export { AutoAnimateHeight as AutoAnimateHeight_alias_1 }
 export { AutoAnimateHeight as AutoAnimateHeight_alias_2 }
 export { AutoAnimateHeight as AutoAnimateHeight_alias_3 }
 export { AutoAnimateHeight as AutoAnimateHeight_alias_4 }
 
-declare interface AutoAnimateHeightProps {
+declare interface AutoAnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Time of the animation, using the hedwig animation tokens
      * quick: 0.1s
@@ -183,41 +171,31 @@ export { AutoAnimateHeightProps as AutoAnimateHeightProps_alias_2 }
 export { AutoAnimateHeightProps as AutoAnimateHeightProps_alias_3 }
 export { AutoAnimateHeightProps as AutoAnimateHeightProps_alias_4 }
 
-declare function Badge(props: BadgeProps): JSX_2.Element;
-
-declare namespace Badge {
-    var displayName: string;
-}
-export { Badge }
-export { Badge as Badge_alias_1 }
-export { Badge as Badge_alias_2 }
-export { Badge as Badge_alias_3 }
-
-declare interface BadgeProps extends React_2.AnchorHTMLAttributes<HTMLSpanElement> {
+declare interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
+    children: React.ReactNode;
     /**
      * Font size of the badge
+     *
+     * @default "small"
      */
     size?: "small" | "smaller";
-    children: React_2.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { BadgeProps }
 export { BadgeProps as BadgeProps_alias_1 }
 export { BadgeProps as BadgeProps_alias_2 }
 export { BadgeProps as BadgeProps_alias_3 }
 
-declare const BaseButton: OverridableComponent<ButtonProps & {
-    variant: "primary" | "secondary";
-}, HTMLButtonElement>;
-export { BaseButton }
-export { BaseButton as BaseButton_alias_1 }
-export { BaseButton as BaseButton_alias_2 }
-export { BaseButton as BaseButton_alias_3 }
-
 export declare const BoundedCheckbox: Story_8;
 
 export declare const BoundedRadiobutton: Story_13;
 
-export declare const Box_alias_2: OverridableComponent<BoxProps, HTMLDivElement>;
+export declare const Box_alias_2: ForwardRefExoticComponent<BoxProps & RefAttributes<HTMLDivElement>>;
 
 declare const BoxCloseButton: ForwardRefExoticComponent<BoxCloseButtonProps & RefAttributes<HTMLButtonElement>>;
 export { BoxCloseButton }
@@ -231,12 +209,7 @@ export { BoxCloseButtonProps as BoxCloseButtonProps_alias_1 }
 export { BoxCloseButtonProps as BoxCloseButtonProps_alias_2 }
 export { BoxCloseButtonProps as BoxCloseButtonProps_alias_3 }
 
-declare const BoxComponent: {
-    (props: BoxProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & BoxProps & Omit<ComponentPropsWithRef<As>, keyof BoxProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
+declare const BoxComponent: ForwardRefExoticComponent<BoxProps & RefAttributes<HTMLDivElement>> & {
     CloseButton: typeof BoxCloseButton;
 };
 export { BoxComponent as Box }
@@ -244,11 +217,18 @@ export { BoxComponent as Box_alias_1 }
 export { BoxComponent as Box_alias_3 }
 
 declare interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: "light-grey" | "lighter" | "white" | "warning";
     children?: React.ReactNode;
+    /**
+     * Color variant of the box
+     *
+     * @default "light-grey"
+     */
+    variant?: "light-grey" | "lighter" | "white" | "warning";
     /**
      * If `true`, a close button will be shown.
      * Use when you want to control the close button using the BoxCloseButton component.
+     *
+     * @default false
      */
     closeable?: boolean;
     /**
@@ -270,6 +250,12 @@ declare interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
      * Props applied to the close button element.
      */
     closeButtonProps?: BoxCloseButtonProps;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { BoxProps }
 export { BoxProps as BoxProps_alias_1 }
@@ -279,7 +265,7 @@ export { BoxProps as BoxProps_alias_3 }
 /**
  * A breadcrumbs navigation menu
  *
- * **Usage**
+ * @example
  *
  * ```tsx
  * <Breadcrumbs data-testid="breadcrumbs">
@@ -328,6 +314,8 @@ declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
     size?: "small" | "medium" | "large";
     /**
      * The background fill of the button
+     *
+     * @default "contained"
      */
     fill?: "contained" | "outline";
     /**
@@ -336,170 +324,154 @@ declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
      */
     fullWidth?: boolean | "mobile";
     /**
-     * Use an icon inside the button
+     * Use the button as an icon button
+     *
+     * Render the icon in `children`
      */
-    icon?: React.ReactNode;
-    children?: React.ReactNode;
+    icon?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { ButtonProps }
 export { ButtonProps as ButtonProps_alias_1 }
 export { ButtonProps as ButtonProps_alias_2 }
 export { ButtonProps as ButtonProps_alias_3 }
 
-export declare const Card_alias_2: Story_6;
+export declare const Card_alias_2: ForwardRefExoticComponent<CardBaseProps & {
+/**
+* A Card should in most cases appear as a big link,
+* but the actual link should just be the header title.
+* To make life better for those with screen readers we should not make
+* the entire card a link, as that would cause the entire card to be read
+* as a link to the user. That would be perceived as information overload.
+*/
+as?: "article" | "div" | "aside" | "section" | undefined;
+} & RefAttributes<HTMLDivElement>>;
 
-export declare const Card_alias_3: OverridableComponent<CardBaseProps & {
+declare interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
     /**
-     * A Card should in most cases appear as a big link,
-     * but the actual link should just be the header title.
-     * To make life better for those with screen readers we should not make
-     * the entire card a link, as that would cause the entire card to be read
-     * as a link to the user. That would be perceived as information overload.
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
-    as?: Exclude<ElementType, "a">;
-}, HTMLDivElement>;
-
-declare interface CardBaseProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+    asChild?: boolean;
 }
 export { CardBaseProps }
 export { CardBaseProps as CardBaseProps_alias_1 }
 export { CardBaseProps as CardBaseProps_alias_2 }
 export { CardBaseProps as CardBaseProps_alias_3 }
 
-declare const CardBody: OverridableComponent<CardBaseProps, HTMLDivElement>;
+declare const CardBody: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLDivElement>>;
 export { CardBody }
 export { CardBody as CardBody_alias_1 }
 export { CardBody as CardBody_alias_2 }
 export { CardBody as CardBody_alias_3 }
 
-declare const CardBodyAction: OverridableComponent<CardBaseProps, HTMLDivElement>;
+declare const CardBodyAction: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLDivElement>>;
 export { CardBodyAction }
 export { CardBodyAction as CardBodyAction_alias_1 }
 export { CardBodyAction as CardBodyAction_alias_2 }
 export { CardBodyAction as CardBodyAction_alias_3 }
 
-declare const CardBodyActionArrow: OverridableComponent<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+declare const CardBodyActionArrow: ForwardRefExoticComponent<CardBodyActionArrowProps & RefAttributes<HTMLSpanElement>>;
 export { CardBodyActionArrow }
 export { CardBodyActionArrow as CardBodyActionArrow_alias_1 }
 export { CardBodyActionArrow as CardBodyActionArrow_alias_2 }
 export { CardBodyActionArrow as CardBodyActionArrow_alias_3 }
 
-declare const CardBodyActionComponent: {
-    (props: CardBaseProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & CardBaseProps & Omit<ComponentPropsWithRef<As>, keyof CardBaseProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
-    Arrow: typeof CardBodyActionArrow;
-};
-
-declare const CardBodyComponent: {
-    (props: CardBaseProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & CardBaseProps & Omit<ComponentPropsWithRef<As>, keyof CardBaseProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
-    Header: typeof CardBodyHeaderComponent;
-    Overline: typeof CardBodyHeaderOverline;
-    Title: typeof CardBodyHeaderTitle;
-    Description: typeof CardBodyDescription;
-    Action: typeof CardBodyActionComponent;
-};
+declare interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
 
-declare const CardBodyDescription: OverridableComponent<CardBaseProps, HTMLDivElement>;
+declare const CardBodyDescription: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLParagraphElement>>;
 export { CardBodyDescription }
 export { CardBodyDescription as CardBodyDescription_alias_1 }
 export { CardBodyDescription as CardBodyDescription_alias_2 }
 export { CardBodyDescription as CardBodyDescription_alias_3 }
 
-declare const CardBodyHeader: ForwardRefExoticComponent<CardBaseProps & {
+declare const CardBodyHeader: ForwardRefExoticComponent<(CardBaseProps & ({
 /**
 * Heading level of the card heading
 */
 as: "h2" | "h3" | "h4" | "h5" | "h6";
-} & RefAttributes<HTMLHeadingElement>>;
+asChild?: undefined;
+} | {
+asChild: true;
+as?: undefined;
+})) & RefAttributes<HTMLHeadingElement>>;
 export { CardBodyHeader }
 export { CardBodyHeader as CardBodyHeader_alias_1 }
 export { CardBodyHeader as CardBodyHeader_alias_2 }
 export { CardBodyHeader as CardBodyHeader_alias_3 }
 
-declare const CardBodyHeaderComponent: ForwardRefExoticComponent<CardBaseProps & {
-as: "h2" | "h3" | "h4" | "h5" | "h6";
-} & RefAttributes<HTMLHeadingElement>> & {
-    Overline: typeof CardBodyHeaderOverline;
-    Title: typeof CardBodyHeaderTitle;
-};
-
-declare const CardBodyHeaderOverline: OverridableComponent<CardBaseProps, HTMLDivElement>;
+declare const CardBodyHeaderOverline: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLDivElement>>;
 export { CardBodyHeaderOverline }
 export { CardBodyHeaderOverline as CardBodyHeaderOverline_alias_1 }
 export { CardBodyHeaderOverline as CardBodyHeaderOverline_alias_2 }
 export { CardBodyHeaderOverline as CardBodyHeaderOverline_alias_3 }
 
-declare const CardBodyHeaderTitle: OverridableComponent<CardBaseProps & {
-    /**
-     * A Card should in most cases appear as a big link,
-     * but the actual link should just be this header title.
-     * To make life better for those with screen readers we should not make
-     * the entire card a link, as that would cause the entire card to be read
-     * as a link to the user. That would be perceived as information overload.
-     */
-    as: ElementType;
-}, HTMLDivElement>;
+declare const CardBodyHeaderTitle: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLDivElement>>;
 export { CardBodyHeaderTitle }
 export { CardBodyHeaderTitle as CardBodyHeaderTitle_alias_1 }
 export { CardBodyHeaderTitle as CardBodyHeaderTitle_alias_2 }
 export { CardBodyHeaderTitle as CardBodyHeaderTitle_alias_3 }
 
-declare const CardComponent: {
-    (props: CardBaseProps & {
-        as?: "symbol" | "object" | "footer" | "text" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | ComponentType<any> | undefined;
-    } & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & CardBaseProps & {
-        as?: "symbol" | "object" | "footer" | "text" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | ComponentType<any> | undefined;
-    } & Omit<ComponentPropsWithRef<As>, "as" | keyof CardBaseProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
-    Media: typeof CardMediaComponent;
-    Body: typeof CardBodyComponent;
+declare const CardComponent: ForwardRefExoticComponent<CardBaseProps & {
+as?: "article" | "div" | "aside" | "section" | undefined;
+} & RefAttributes<HTMLDivElement>> & {
+    Media: typeof CardMedia;
+    MediaImg: typeof CardMediaImg;
+    Body: typeof CardBody;
+    BodyHeader: typeof CardBodyHeader;
+    BodyHeaderOverline: typeof CardBodyHeaderOverline;
+    BodyHeaderTitle: typeof CardBodyHeaderTitle;
+    BodyDescription: typeof CardBodyDescription;
+    BodyAction: typeof CardBodyAction;
+    BodyActionArrow: typeof CardBodyActionArrow;
 };
 export { CardComponent as Card }
 export { CardComponent as Card_alias_1 }
-export { CardComponent as Card_alias_4 }
+export { CardComponent as Card_alias_3 }
 
 export declare const CardFullWidth: Story_6;
 
-declare interface CardImageMediaProps extends HTMLAttributes<HTMLDivElement> {
-    aspectRatio?: string;
+declare interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { CardImageMediaProps }
 export { CardImageMediaProps as CardImageMediaProps_alias_1 }
 export { CardImageMediaProps as CardImageMediaProps_alias_2 }
 export { CardImageMediaProps as CardImageMediaProps_alias_3 }
 
-declare const CardMedia: OverridableComponent<CardBaseProps, HTMLDivElement>;
+declare const CardMedia: ForwardRefExoticComponent<CardBaseProps & RefAttributes<HTMLDivElement>>;
 export { CardMedia }
 export { CardMedia as CardMedia_alias_1 }
 export { CardMedia as CardMedia_alias_2 }
 export { CardMedia as CardMedia_alias_3 }
 
-declare const CardMediaComponent: {
-    (props: CardBaseProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & CardBaseProps & Omit<ComponentPropsWithRef<As>, keyof CardBaseProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
-    Img: typeof CardMediaImg;
-};
-
-declare const CardMediaImg: OverridableComponent<CardImageMediaProps, HTMLImageElement>;
+declare const CardMediaImg: ForwardRefExoticComponent<CardImageMediaProps & RefAttributes<HTMLImageElement>>;
 export { CardMediaImg }
 export { CardMediaImg as CardMediaImg_alias_1 }
 export { CardMediaImg as CardMediaImg_alias_2 }
 export { CardMediaImg as CardMediaImg_alias_3 }
 
+export declare const CardStory: Story_6;
+
 declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
 export { Checkbox }
 export { Checkbox as Checkbox_alias_1 }
@@ -546,7 +518,7 @@ export declare const CompleteShowMoreShowLess: Story_24;
  * Container is a layout component that is used to wrap content.
  * It ensures a max-width and minimum spacing on the sides.
  */
-declare const Container: OverridableComponent<ContainerProps, HTMLDivElement>;
+declare const Container: ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>;
 export { Container }
 export { Container as Container_alias_1 }
 export { Container as Container_alias_2 }
@@ -555,6 +527,18 @@ export { Container as Container_alias_3 }
 declare interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
     variant?: "default" | "slim";
     children: ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Convienence prop to change the rendered element.
+     *
+     * Use {@link ContainerProps.asChild} if you need more control of the rendered element.
+     */
+    as?: "div" | "section" | "aside" | "main" | "article" | "header" | "footer";
 }
 export { ContainerProps }
 export { ContainerProps as ContainerProps_alias_1 }
@@ -565,11 +549,7 @@ export declare const Custom: Story_3;
 
 export declare const Dark: Story_2;
 
-declare function DarkBadge(props: BadgeProps): JSX_2.Element;
-
-declare namespace DarkBadge {
-    var displayName: string;
-}
+declare const DarkBadge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
 export { DarkBadge }
 export { DarkBadge as DarkBadge_alias_1 }
 export { DarkBadge as DarkBadge_alias_2 }
@@ -651,7 +631,7 @@ export declare const default_alias_19: Meta<typeof LinkList>;
 
 export declare const Default_alias_2: Story_11;
 
-export declare const default_alias_2: Meta<typeof Badge>;
+export declare const default_alias_2: Meta<typeof LighterBadge>;
 
 export declare const default_alias_20: Meta<typeof UnorderedList>;
 
@@ -744,7 +724,7 @@ export { DescriptionList as DescriptionList_alias_3 }
 
 declare interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     /**
-     * Either `DescriptionDetails` or `DescriptionTerm` elements
+     * Either `dt`, `dl`, or `div` elements
      */
     children?: ReactNode;
     /**
@@ -770,14 +750,14 @@ declare interface DimensionsFromWidthAndHeight {
     width?: number | string;
 }
 
-declare function ErrorMessage({ children, id, className }: ErrorMessageProps): JSX_2.Element;
+declare const ErrorMessage: ForwardRefExoticComponent<ErrorMessageProps & RefAttributes<HTMLDivElement>>;
 export { ErrorMessage }
 export { ErrorMessage as ErrorMessage_alias_1 }
 export { ErrorMessage as ErrorMessage_alias_2 }
 export { ErrorMessage as ErrorMessage_alias_3 }
 export { ErrorMessage as ErrorMessage_alias_4 }
 
-declare interface ErrorMessageProps {
+declare interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     id: string;
     className?: string;
@@ -853,6 +833,8 @@ export { FooterButtonLink as FooterButtonLink_alias_3 }
 declare interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
@@ -885,7 +867,7 @@ declare interface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement>
 /**
  * Responsive sections of links. Will become an accordion on mobile.
  *
- * Use with `Footer.LinkSection` for each section.
+ * Use with {@link FooterLinkSection} for each section.
  */
 declare const FooterLinkSections: ForwardRefExoticComponent<FooterLinkSectionsProps & RefAttributes<HTMLDivElement>>;
 export { FooterLinkSections }
@@ -911,14 +893,23 @@ export { FooterLogo as FooterLogo_alias_3 }
 declare interface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
 
 declare interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Footer variant
+     *
+     * @default "default"
+     */
     variant?: "default" | "slim";
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
@@ -934,11 +925,11 @@ export declare function getResponsiveProps<T>(variable: `--hds-${string}`, input
 export declare function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes): string;
 
 /**
- * 🚧 A simple opionated abstraction over CSS Grid.
+ * A simple opionated abstraction over CSS Grid.
  *
  * The grid is always a 12 column grid.
  *
- * example
+ * @example
  * ```tsx
  * <Grid gap="12-16" span={{ small: 6 }}>
  *   <div>6/12</div>
@@ -1042,6 +1033,8 @@ declare interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     center?: ResponsiveProp<boolean>;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
@@ -1051,17 +1044,22 @@ export { GridProps as GridProps_alias_2 }
 export { GridProps as GridProps_alias_3 }
 export { GridProps as GridProps_alias_4 }
 
-declare interface HeadingProps {
+declare type HeadingProps = {
     variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
-    as: React_3.ElementType;
-}
+    asChild: true;
+    as?: never;
+} | {
+    variant: "h1-display" | "h1" | "h2" | "h3" | "h3-title";
+    as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
+    asChild?: never;
+};
 
 /**
  * Show a help text for a word or phrase when clicked
  *
  * Useful for providing explanations for domain-specific terms, acronyms or phrases that could do with further elaboration
  *
- * **Usage**
+ * @example
  * ```tsx
  * <p>
  *   En annen avgjørende faktor for avgifter er om nettbutikken er registrert i{" "}
@@ -1098,13 +1096,13 @@ declare interface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement>
     /**
      * The side of the trigger the popover should be attached to
      *
-     * default is `top`
+     * @default "top"
      */
     side?: "top" | "right" | "bottom" | "left";
     /**
      * The alignment of the popover content
      *
-     * default is `start`
+     * @default "start"
      */
     align?: "center" | "end" | "start";
 }
@@ -1197,11 +1195,20 @@ export declare const LargeLegend: Story_11;
 
 export declare const Lighter: Story_2;
 
+declare const LighterBadge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
+export { LighterBadge as Badge }
+export { LighterBadge as Badge_alias_1 }
+export { LighterBadge as Badge_alias_2 }
+export { LighterBadge }
+export { LighterBadge as LighterBadge_alias_1 }
+export { LighterBadge as LighterBadge_alias_2 }
+export { LighterBadge as LighterBadge_alias_3 }
+
 export declare const LighterBox: Story_3;
 
 export declare const LightGreyBox: Story_3;
 
-declare const Link: OverridableComponent<LinkProps, HTMLAnchorElement>;
+declare const Link: React_2.ForwardRefExoticComponent<LinkProps & React_2.RefAttributes<HTMLAnchorElement>>;
 export { Link }
 export { Link as Link_alias_1 }
 export { Link as Link_alias_2 }
@@ -1214,18 +1221,14 @@ export declare const LinkInDescription: Story_30;
  *
  * For other list types use `UnorderedList` and `OrderedList`, or use your own list component using the semantic `ul` and `ol` tags.
  */
-declare function LinkList({ className, ...rest }: LinkListProps): JSX_2.Element;
-
-declare namespace LinkList {
-    var displayName: string;
-}
+declare const LinkList: ForwardRefExoticComponent<LinkListProps & RefAttributes<HTMLUListElement>>;
 export { LinkList }
 export { LinkList as LinkList_alias_1 }
 export { LinkList as LinkList_alias_2 }
 export { LinkList as LinkList_alias_3 }
 
 declare interface LinkListProps extends Omit<ListProps, "listStyle"> {
-    children?: React_2.ReactElement<HTMLLIElement> | React_2.ReactElement<HTMLLIElement>[];
+    children?: React.ReactElement<HTMLLIElement> | React.ReactElement<HTMLLIElement>[];
 }
 export { LinkListProps }
 export { LinkListProps as LinkListProps_alias_1 }
@@ -1244,6 +1247,12 @@ declare interface LinkProps extends React_2.AnchorHTMLAttributes<HTMLAnchorEleme
      */
     size?: "small" | "medium" | "large";
     children: React_2.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { LinkProps }
 export { LinkProps as LinkProps_alias_1 }
@@ -1251,9 +1260,10 @@ export { LinkProps as LinkProps_alias_2 }
 export { LinkProps as LinkProps_alias_3 }
 
 declare interface ListProps extends HTMLAttributes<HTMLOListElement | HTMLUListElement> {
-    children?: React_2.ReactElement<HTMLLIElement> | React_2.ReactElement<HTMLLIElement>[];
     /**
      * Sets the size of the items (font)
+     *
+     * @default "medium"
      */
     size?: "small" | "medium" | "large";
 }
@@ -1272,14 +1282,9 @@ export declare const Main: {
 
 export declare function MenuIcon(): JSX_2.Element;
 
-export declare const Message_alias_3: OverridableComponent<MessageProps, HTMLDivElement>;
+export declare const Message_alias_3: ForwardRefExoticComponent<MessageProps & RefAttributes<HTMLDivElement>>;
 
-declare const MessageComponent: {
-    (props: MessageProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & MessageProps & Omit<ComponentPropsWithRef<As>, "slot" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onClose" | "closed" | "variant" | "closeable" | "closeButtonProps" | "icon" | "iconClassName">): ReactNode;
-} & Pick<FC, "displayName"> & {
+declare const MessageComponent: ForwardRefExoticComponent<MessageProps & RefAttributes<HTMLDivElement>> & {
     Title: typeof MessageTitle;
     Description: typeof MessageDescription;
 };
@@ -1287,28 +1292,46 @@ export { MessageComponent as Message }
 export { MessageComponent as Message_alias_1 }
 export { MessageComponent as Message_alias_2 }
 
-declare const MessageDescription: OverridableComponent<object, HTMLParagraphElement>;
+declare const MessageDescription: ForwardRefExoticComponent<MessageDescriptionProps & RefAttributes<HTMLParagraphElement>>;
 export { MessageDescription }
 export { MessageDescription as MessageDescription_alias_1 }
 export { MessageDescription as MessageDescription_alias_2 }
 export { MessageDescription as MessageDescription_alias_3 }
 
+declare interface MessageDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
 export declare type MessageProps = ({
     variant?: "success" | "attention" | "warning";
     icon?: never;
     iconClassName?: never;
 } | {
     variant: "neutral";
-    icon?: React_3.ReactNode;
+    icon?: React.ReactNode;
     iconClassName?: string;
-}) & Omit<BoxProps, "variant">;
+}) & Omit<BoxProps, "variant" | "asChild">;
 
-declare const MessageTitle: OverridableComponent<object, HTMLParagraphElement>;
+declare const MessageTitle: ForwardRefExoticComponent<MessageTitleProps & RefAttributes<HTMLParagraphElement>>;
 export { MessageTitle }
 export { MessageTitle as MessageTitle_alias_1 }
 export { MessageTitle as MessageTitle_alias_2 }
 export { MessageTitle as MessageTitle_alias_3 }
 
+declare interface MessageTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
 export declare const MinAndMax: Story_29;
 
 /**
@@ -1316,33 +1339,33 @@ export declare const MinAndMax: Story_29;
  *
  * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.
  *
- * Example
- * ```
- const modalRef = useRef<HTMLDialogElement>(null);
- const onClose = () => modalRef.current?.close();
-
- return (
- <>
- <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
- <Modal ref={modalRef}>
- <Modal.Header>Dialog header</Modal.Header>
- <Modal.Content>
- <p>
- Dialog header Dialog description - a description of what is about to happen and maybe
- something about the consequences.
- </p>
- </Modal.Content>
- <Modal.Footer>
- <HStack gap="16" wrap>
- <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
- <PrimaryButton fill="outline" onClick={onClose}>
- Cancel
- </PrimaryButton>
- </HStack>
- </Modal.Footer>
- </Modal>
- </>
- );
+ * @example
+ * ```tsx
+ *   const modalRef = useRef<HTMLDialogElement>(null);
+ *   const onClose = () => modalRef.current?.close();
+ *
+ *   return (
+ *     <>
+ *       <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>
+ *       <Modal ref={modalRef}>
+ *         <Modal.Header>Dialog header</Modal.Header>
+ *         <Modal.Content>
+ *           <p>
+ *             Dialog header Dialog description - a description of what is about to happen and maybe
+ *             something about the consequences.
+ *           </p>
+ *         </Modal.Content>
+ *         <Modal.Footer>
+ *           <HStack gap="16" wrap>
+ *             <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>
+ *             <PrimaryButton fill="outline" onClick={onClose}>
+ *               Cancel
+ *             </PrimaryButton>
+ *           </HStack>
+ *         </Modal.Footer>
+ *       </Modal>
+ *     </>
+ *   );
  * ```
  */
 export declare const Modal_alias_3: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDialogElement>>;
@@ -1356,24 +1379,51 @@ export { ModalComponent as Modal }
 export { ModalComponent as Modal_alias_1 }
 export { ModalComponent as Modal_alias_2 }
 
-declare const ModalContent: OverridableComponent<object, HTMLDivElement>;
+declare const ModalContent: ForwardRefExoticComponent<ModalContentProps & RefAttributes<HTMLDivElement>>;
 export { ModalContent }
 export { ModalContent as ModalContent_alias_1 }
 export { ModalContent as ModalContent_alias_2 }
 export { ModalContent as ModalContent_alias_3 }
 
-declare const ModalFooter: OverridableComponent<object, HTMLDivElement>;
+declare interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
+declare const ModalFooter: ForwardRefExoticComponent<ModalFooterProps & RefAttributes<HTMLDivElement>>;
 export { ModalFooter }
 export { ModalFooter as ModalFooter_alias_1 }
 export { ModalFooter as ModalFooter_alias_2 }
 export { ModalFooter as ModalFooter_alias_3 }
 
-declare const ModalHeader: OverridableComponent<object, HTMLHeadingElement>;
+declare interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
+declare const ModalHeader: ForwardRefExoticComponent<ModalHeaderProps & RefAttributes<HTMLHeadingElement>>;
 export { ModalHeader }
 export { ModalHeader as ModalHeader_alias_1 }
 export { ModalHeader as ModalHeader_alias_2 }
 export { ModalHeader as ModalHeader_alias_3 }
 
+declare interface ModalHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
 declare interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
     children: React.ReactNode;
     /**
@@ -1397,24 +1447,34 @@ export declare const MultipleItems: Story;
 /**
  * 🚨 WORK IN PROGRESS 🚨
  */
-export declare const Navbar_alias_3: React_3.ForwardRefExoticComponent<NavbarProps & React_3.RefAttributes<HTMLElement>>;
+export declare const Navbar_alias_3: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>>;
 
-declare const NavbarButton: OverridableComponent<NavbarButtonProps, HTMLElement>;
-export { NavbarButton }
-export { NavbarButton as NavbarButton_alias_1 }
-export { NavbarButton as NavbarButton_alias_2 }
-export { NavbarButton as NavbarButton_alias_3 }
+declare const NavbarButtonItem: ForwardRefExoticComponent<NavbarButtonItemProps & RefAttributes<HTMLButtonElement>>;
+export { NavbarButtonItem }
+export { NavbarButtonItem as NavbarButtonItem_alias_1 }
+export { NavbarButtonItem as NavbarButtonItem_alias_2 }
+export { NavbarButtonItem as NavbarButtonItem_alias_3 }
 
-declare interface NavbarButtonProps {
-    icon?: React_3.ReactNode;
-    children: React_3.ReactNode;
+declare interface NavbarButtonItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 
 declare const NavbarComponent: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>> & {
     Logo: typeof NavbarLogo;
     LogoAndServiceText: typeof NavbarLogoAndServiceText;
-    ExpandableMenu: typeof NavbarExpandableMenuComponent;
-    Button: typeof NavbarButton;
+    ExpandableMenu: typeof NavbarExpandableMenu;
+    ExpandableMenuTrigger: typeof NavbarExpandableMenuTrigger;
+    ExpandableMenuContent: typeof NavbarExpandableMenuContent;
+    Item: typeof NavbarItem;
+    ButtonItem: typeof NavbarButtonItem;
+    LinkItem: typeof NavbarLinkItem;
+    ItemIcon: typeof NavbarItemIcon;
     Navigation: typeof NavbarNavigation;
 };
 export { NavbarComponent as Navbar }
@@ -1428,49 +1488,106 @@ export { NavbarComponent as Navbar_alias_2 }
  *
  * If we want a sticky header in the future the scrolling should be configurable
  */
-export declare function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps): JSX_2.Element;
+declare function NavbarExpandableMenu({ children }: NavbarExpandableMenuProps): JSX_2.Element;
 
-export declare namespace NavbarExpandableMenu {
+declare namespace NavbarExpandableMenu {
     var displayName: string;
 }
+export { NavbarExpandableMenu }
+export { NavbarExpandableMenu as NavbarExpandableMenu_alias_1 }
+export { NavbarExpandableMenu as NavbarExpandableMenu_alias_2 }
+export { NavbarExpandableMenu as NavbarExpandableMenu_alias_3 }
 
-declare const NavbarExpandableMenuComponent: typeof NavbarExpandableMenu & {
-    Trigger: typeof NavbarExpandableMenuTrigger;
-    Content: typeof NavbarExpandableMenuContent;
-};
-
-export declare const NavbarExpandableMenuContent: OverridableComponent<NavbarExpandableMenuContentProps, HTMLDivElement>;
+declare const NavbarExpandableMenuContent: ForwardRefExoticComponent<NavbarExpandableMenuContentProps & RefAttributes<HTMLDivElement>>;
+export { NavbarExpandableMenuContent }
+export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_1 }
+export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_2 }
+export { NavbarExpandableMenuContent as NavbarExpandableMenuContent_alias_3 }
 
 /**
  * Content
  */
 export declare interface NavbarExpandableMenuContentProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
     className?: string;
 }
 
 export declare interface NavbarExpandableMenuProps {
-    children: React_3.ReactNode;
+    children: React.ReactNode;
 }
 
-export declare const NavbarExpandableMenuTrigger: React_3.ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & React_3.RefAttributes<HTMLButtonElement>>;
+declare const NavbarExpandableMenuTrigger: ForwardRefExoticComponent<NavbarExpandableMenuTriggerProps & RefAttributes<HTMLButtonElement>>;
+export { NavbarExpandableMenuTrigger }
+export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_1 }
+export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_2 }
+export { NavbarExpandableMenuTrigger as NavbarExpandableMenuTrigger_alias_3 }
 
 /**
  * Trigger
  */
-export declare interface NavbarExpandableMenuTriggerProps extends Omit<React_3.HTMLAttributes<HTMLButtonElement>, "children"> {
-    whenClosedText: React_3.ReactNode;
+export declare interface NavbarExpandableMenuTriggerProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+    whenClosedText: React.ReactNode;
     whenClosedHelperTitle?: string;
-    whenOpenText: React_3.ReactNode;
+    whenOpenText: React.ReactNode;
     whenOpenHelperTitle?: string;
 }
 
+/**
+ * Generic Navbar item
+ *
+ * Use `Navbar.ButtonItem` or `Navbar.LinkItem` for links and buttons
+ */
+declare const NavbarItem: ForwardRefExoticComponent<NavbarItemProps & RefAttributes<HTMLDivElement>>;
+export { NavbarItem }
+export { NavbarItem as NavbarItem_alias_1 }
+export { NavbarItem as NavbarItem_alias_2 }
+export { NavbarItem as NavbarItem_alias_3 }
+
+/**
+ * Icon to be used inside a `Navbar.Item`, `Navbar.ButtonItem`, or `Navbar.LinkItem`
+ */
+declare const NavbarItemIcon: ForwardRefExoticComponent<NavbarItemIconProps & RefAttributes<HTMLDivElement>>;
+export { NavbarItemIcon }
+export { NavbarItemIcon as NavbarItemIcon_alias_1 }
+export { NavbarItemIcon as NavbarItemIcon_alias_2 }
+export { NavbarItemIcon as NavbarItemIcon_alias_3 }
+
+declare interface NavbarItemIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+
+declare interface NavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
+declare const NavbarLinkItem: ForwardRefExoticComponent<NavbarLinkItemProps & RefAttributes<HTMLAnchorElement>>;
+export { NavbarLinkItem }
+export { NavbarLinkItem as NavbarLinkItem_alias_1 }
+export { NavbarLinkItem as NavbarLinkItem_alias_2 }
+export { NavbarLinkItem as NavbarLinkItem_alias_3 }
+
+declare interface NavbarLinkItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+
 /**
  * A fixed Posten or Bring logo.
  *
  * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
  */
-declare const NavbarLogo: OverridableComponent<NavbarLogoProps, HTMLDivElement>;
+declare const NavbarLogo: ForwardRefExoticComponent<NavbarLogoProps & RefAttributes<HTMLDivElement>>;
 export { NavbarLogo }
 export { NavbarLogo as NavbarLogo_alias_1 }
 export { NavbarLogo as NavbarLogo_alias_2 }
@@ -1481,7 +1598,7 @@ export { NavbarLogo as NavbarLogo_alias_3 }
  *
  * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
  */
-declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+declare const NavbarLogoAndServiceText: ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & RefAttributes<HTMLDivElement>>;
 export { NavbarLogoAndServiceText }
 export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_1 }
 export { NavbarLogoAndServiceText as NavbarLogoAndServiceText_alias_2 }
@@ -1491,16 +1608,19 @@ declare interface NavbarLogoAndServiceText_2 extends HTMLAttributes<HTMLDivEleme
     /**
      * The text display next to the logo
      */
-    children: React_3.ReactNode;
+    children: React.ReactNode;
     /**
      * The text variant
      *
      * Use `service` for internal applications
+     *
      * Use `flagship` for public facing applications
      */
     variant: "service" | "flagship";
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
@@ -1510,20 +1630,31 @@ declare interface NavbarLogoAndServiceText_2 extends HTMLAttributes<HTMLDivEleme
  *
  * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
  */
-declare const NavbarLogoAndServiceText: React_3.ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & React_3.RefAttributes<HTMLDivElement>>;
+declare const NavbarLogoAndServiceText: ForwardRefExoticComponent<NavbarLogoAndServiceText_2 & RefAttributes<HTMLDivElement>>;
 
-declare interface NavbarLogoProps {
-    children?: never;
+declare interface NavbarLogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 
-declare const NavbarNavigation: OverridableComponent<NavbarNavigationProps, HTMLElement>;
+declare const NavbarNavigation: ForwardRefExoticComponent<NavbarNavigationProps & RefAttributes<HTMLDivElement>>;
 export { NavbarNavigation }
 export { NavbarNavigation as NavbarNavigation_alias_1 }
 export { NavbarNavigation as NavbarNavigation_alias_2 }
 export { NavbarNavigation as NavbarNavigation_alias_3 }
 
-declare interface NavbarNavigationProps {
-    children: React_3.ReactNode;
+declare interface NavbarNavigationProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 
 declare interface NavbarProps extends HTMLAttributes<HTMLElement> {
@@ -1533,9 +1664,16 @@ declare interface NavbarProps extends HTMLAttributes<HTMLElement> {
      * By default the `posten.no` variant is used which has a fixed logo and a fixed height of 112px
      *
      * For internal services or flagship services use the `service` should be used
+     *
+     * @default "default"
      */
     variant?: "default" | "service";
-    children: React_3.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { NavbarProps }
 export { NavbarProps as NavbarProps_alias_1 }
@@ -1553,13 +1691,18 @@ export declare const NoUnderline: Story_18;
 /**
  * An ordered list of simple items
  *
- * If you have other list needs build your own using the semantic `ul` and `ol` tags.
+ * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.
+ *
+ * @example
+ * ```tsx
+ * <OrderedList>
+ *  <li>Item 1</li>
+ *  <li>Item 2</li>
+ *  <li>Item 3</li>
+ * </OrderedList>
+ * ```
  */
-declare function OrderedList(props: ListProps): JSX_2.Element;
-
-declare namespace OrderedList {
-    var displayName: string;
-}
+declare const OrderedList: ForwardRefExoticComponent<ListProps & RefAttributes<HTMLOListElement>>;
 export { OrderedList }
 export { OrderedList as OrderedList_alias_1 }
 export { OrderedList as OrderedList_alias_2 }
@@ -1567,20 +1710,6 @@ export { OrderedList as OrderedList_alias_3 }
 
 export declare const OrderedListStory: Story_20;
 
-/**
- * OverridableComponent makes the `as` prop available,
- * to be used to override the html element being used for a component
- *
- * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts
- */
-export declare type OverridableComponent<ComponentProps, Element extends HTMLElement> = {
-    (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;
-    <As extends ElementType>(props: {
-        /** Override html element */
-        as?: As;
-    } & ComponentProps & Omit<ComponentPropsWithRef<As>, keyof ComponentProps>): ReturnType<FC>;
-} & Pick<FC, "displayName">;
-
 export declare const Paragraph: Story_7;
 
 declare interface ParagraphProps {
@@ -1613,14 +1742,7 @@ export declare const PostenBringSideBySide: Story_29;
 
 export declare const Primary: Story_5;
 
-/**
- * ## TODO
- *
- * - [x] Handle links that looks like buttons
- * - [ ] Revisit how to handle outline
- * - [ ] Figure out outline-white
- */
-declare const PrimaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
+declare const PrimaryButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 export { PrimaryButton }
 export { PrimaryButton as PrimaryButton_alias_1 }
 export { PrimaryButton as PrimaryButton_alias_2 }
@@ -1724,7 +1846,7 @@ declare type ResponsiveValues<T> = {
 
 export declare const Secondary: Story_5;
 
-declare const SecondaryButton: OverridableComponent<ButtonProps, HTMLButtonElement>;
+declare const SecondaryButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
 export { SecondaryButton }
 export { SecondaryButton as SecondaryButton_alias_1 }
 export { SecondaryButton as SecondaryButton_alias_2 }
@@ -1761,8 +1883,7 @@ export declare const ShowMore: Story_24;
  *
  * You have to add the logic for what happens when the button is clicked yourself.
  *
- * **Example**
- *
+ * @example
  * ```tsx
  * function Content() {
  *   const [items, fetchMoreItems, moreItemsAvailable] = useYourData();
@@ -1839,7 +1960,7 @@ export declare const SingleAccordion: Story;
  * - https://chakra-ui.com/docs/components/skeleton
  * - https://mui.com/material-ui/react-skeleton/
  */
-declare const Skeleton: OverridableComponent<SkeletonProps, HTMLDivElement>;
+declare const Skeleton: ForwardRefExoticComponent<SkeletonPropsInner & DimensionsFromWidthAndHeight & RefAttributes<HTMLDivElement>>;
 export { Skeleton }
 export { Skeleton as Skeleton_alias_1 }
 export { Skeleton as Skeleton_alias_2 }
@@ -1851,7 +1972,7 @@ export { SkeletonProps as SkeletonProps_alias_1 }
 export { SkeletonProps as SkeletonProps_alias_2 }
 export { SkeletonProps as SkeletonProps_alias_3 }
 
-declare interface SkeletonPropsInner extends React_2.AnchorHTMLAttributes<HTMLDivElement> {
+declare interface SkeletonPropsInner extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The visual style of the Skeleton
      */
@@ -1863,7 +1984,19 @@ declare interface SkeletonPropsInner extends React_2.AnchorHTMLAttributes<HTMLDi
      * default true
      */
     animation?: boolean;
-    children?: React_2.ReactNode;
+    children?: React.ReactNode;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Convienence prop to change the rendered element.
+     *
+     * Use {@link SkeletonProps.asChild} if you need more control of the rendered element.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
 }
 
 export declare const Slim: Story_17;
@@ -1930,6 +2063,8 @@ declare interface StackProps extends React_2.HTMLAttributes<HTMLDivElement> {
     justify?: ResponsiveProp<React_2.CSSProperties["justifyContent"]>;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
      */
     asChild?: boolean;
 }
@@ -1988,7 +2123,7 @@ declare type Story_18 = StoryObj<typeof Link>;
 
 declare type Story_19 = StoryObj<typeof LinkList>;
 
-declare type Story_2 = StoryObj<typeof Badge>;
+declare type Story_2 = StoryObj<typeof LighterBadge>;
 
 declare type Story_20 = StoryObj<typeof UnorderedList>;
 
@@ -2034,6 +2169,7 @@ declare type Story_9 = StoryObj<typeof DatePicker>;
  *
  * Previously known as `hw-wysiwyg` in hedwig legacy. In tailwind this kind of component it is known as `prose`.
  *
+ * @example
  * ```tsx
  * <StyledHtml>
  *   <h1>Heading 1</h1>
@@ -2047,16 +2183,22 @@ declare type Story_9 = StoryObj<typeof DatePicker>;
  * </StyledHtml>
  * ```
  */
-declare const StyledHtml: OverridableComponent<StyledHtmlProps, HTMLDivElement>;
+declare const StyledHtml: ForwardRefExoticComponent<StyledHtmlProps & RefAttributes<HTMLDivElement>>;
 export { StyledHtml }
 export { StyledHtml as StyledHtml_alias_1 }
 export { StyledHtml as StyledHtml_alias_2 }
 export { StyledHtml as StyledHtml_alias_3 }
 
-declare interface StyledHtmlProps {
-    children?: React_3.ReactNode;
+declare interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
     size?: "default" | "small";
     darkmode?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { StyledHtmlProps }
 export { StyledHtmlProps as StyledHtmlProps_alias_1 }
@@ -2065,14 +2207,6 @@ export { StyledHtmlProps as StyledHtmlProps_alias_3 }
 
 export declare const Success: Story_21;
 
-declare interface TabContentsProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
-}
-export { TabContentsProps }
-export { TabContentsProps as TabContentsProps_alias_1 }
-export { TabContentsProps as TabContentsProps_alias_2 }
-export { TabContentsProps as TabContentsProps_alias_3 }
-
 declare const Table: ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>;
 export { Table }
 export { Table as Table_alias_1 }
@@ -2101,27 +2235,9 @@ declare interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
     description?: React.ReactNode;
 }
 
-declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
-    /**
-     * Direction of the tabs. Can either be vertical or horizontal.
-     * Horizontal breaks on window width with fallback back to vertical
-     */
-    direction?: "vertical" | "horizontal";
-}
-export { TabListProps }
-export { TabListProps as TabListProps_alias_1 }
-export { TabListProps as TabListProps_alias_2 }
-export { TabListProps as TabListProps_alias_3 }
-
-export declare const Tabs_alias_3: OverridableComponent<TabsProps, HTMLDivElement>;
+export declare const Tabs_alias_3: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
 
-declare const TabsComponent: {
-    (props: TabsProps & RefAttributes<HTMLDivElement>): ReactNode;
-    <As extends ElementType>(props: {
-        as?: As | undefined;
-    } & TabsProps & Omit<ComponentPropsWithRef<As>, keyof TabsProps>): ReactNode;
-} & Pick<FC, "displayName"> & {
+declare const TabsComponent: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> & {
     List: typeof TabsList;
     Tab: typeof TabsTab;
     Contents: typeof TabsContents;
@@ -2131,7 +2247,7 @@ export { TabsComponent as Tabs }
 export { TabsComponent as Tabs_alias_1 }
 export { TabsComponent as Tabs_alias_2 }
 
-declare const TabsContent: OverridableComponent<TabsContentProps, HTMLElement>;
+declare const TabsContent: ForwardRefExoticComponent<TabsContentProps & RefAttributes<HTMLDivElement>>;
 export { TabsContent }
 export { TabsContent as TabsContent_alias_1 }
 export { TabsContent as TabsContent_alias_2 }
@@ -2143,22 +2259,38 @@ declare interface TabsContentProps extends HTMLAttributes<HTMLElement> {
      * Content for the referenced tabId
      */
     forTabId: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { TabsContentProps }
 export { TabsContentProps as TabsContentProps_alias_1 }
 export { TabsContentProps as TabsContentProps_alias_2 }
 export { TabsContentProps as TabsContentProps_alias_3 }
 
-declare function TabsContents({ children, ...rest }: TabContentsProps): JSX_2.Element;
-
-declare namespace TabsContents {
-    var displayName: string;
-}
+declare const TabsContents: ForwardRefExoticComponent<TabsContentsProps & RefAttributes<HTMLDivElement>>;
 export { TabsContents }
 export { TabsContents as TabsContents_alias_1 }
 export { TabsContents as TabsContents_alias_2 }
 export { TabsContents as TabsContents_alias_3 }
 
+declare interface TabsContentsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsContentProps> | ReactElement<TabsContentProps>[];
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+}
+export { TabsContentsProps }
+export { TabsContentsProps as TabsContentsProps_alias_1 }
+export { TabsContentsProps as TabsContentsProps_alias_2 }
+export { TabsContentsProps as TabsContentsProps_alias_3 }
+
 export declare const TabsContext: Context<TabsContextProps | null>;
 
 export declare interface TabsContextProps {
@@ -2166,29 +2298,46 @@ export declare interface TabsContextProps {
     toggleActiveTabId: (tabId: string) => void;
 }
 
-declare function TabsList({ children, direction, className, ...rest }: TabListProps): JSX_2.Element;
-
-declare namespace TabsList {
-    var displayName: string;
-}
+declare const TabsList: ForwardRefExoticComponent<TabsListProps & RefAttributes<HTMLDivElement>>;
 export { TabsList }
 export { TabsList as TabsList_alias_1 }
 export { TabsList as TabsList_alias_2 }
 export { TabsList as TabsList_alias_3 }
 
-declare interface TabsProps extends HTMLAttributes<HTMLElement> {
-    children: ReactElement<TabListProps | TabContentsProps>[] | ReactElement;
+declare interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsTabProps> | ReactElement<TabsTabProps>[];
+    /**
+     * Direction of the tabs. Can either be vertical or horizontal.
+     * Horizontal breaks on window width with fallback back to vertical
+     *
+     * @default "horizontal"
+     */
+    direction?: "vertical" | "horizontal";
+}
+export { TabsListProps }
+export { TabsListProps as TabsListProps_alias_1 }
+export { TabsListProps as TabsListProps_alias_2 }
+export { TabsListProps as TabsListProps_alias_3 }
+
+declare interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactElement<TabsListProps | TabsContentsProps>[] | ReactElement;
     /**
      * Define which tab to use as default. Must be one of the <Tab/>s identifier.
      */
     defaultTab: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
 }
 export { TabsProps }
 export { TabsProps as TabsProps_alias_1 }
 export { TabsProps as TabsProps_alias_2 }
 export { TabsProps as TabsProps_alias_3 }
 
-declare const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement>;
+declare const TabsTab: ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLButtonElement>>;
 export { TabsTab }
 export { TabsTab as TabsTab_alias_1 }
 export { TabsTab as TabsTab_alias_2 }
@@ -2209,9 +2358,9 @@ export { TabsTabProps as TabsTabProps_alias_3 }
 /**
  * Text component
  *
- * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` prop is required.
+ * If the variant is `h1-display`, `h1`, `h2`, `h3`, or `h3-title` the `as` or `asChild` prop is required.
  *
- * This to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`
+ * This is to force the consumer to consider which semantic html element to use. E.g. `<h1>` or `<h2>`
  *
  * @example
  * ```tsx
@@ -2221,7 +2370,7 @@ export { TabsTabProps as TabsTabProps_alias_3 }
  * </Text>
  * ```
  */
-declare const Text_2: OverridableComponent<TextProps, HTMLDivElement>;
+declare const Text_2: React_3.ForwardRefExoticComponent<TextProps & React_3.RefAttributes<HTMLHeadingElement | HTMLParagraphElement>>;
 export { Text_2 as Text }
 export { Text_2 as Text_alias_1 }
 export { Text_2 as Text_alias_2 }
@@ -2241,172 +2390,38 @@ export { TextareaProps as TextareaProps_alias_2 }
 export { TextareaProps as TextareaProps_alias_3 }
 export { TextareaProps as TextareaProps_alias_4 }
 
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextBody: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextBody }
-export { TextBody as TextBody_alias_1 }
-export { TextBody as TextBody_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextBodySmall: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextBodySmall }
-export { TextBodySmall as TextBodySmall_alias_1 }
-export { TextBodySmall as TextBodySmall_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextBodySmallTitle: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextBodySmallTitle }
-export { TextBodySmallTitle as TextBodySmallTitle_alias_1 }
-export { TextBodySmallTitle as TextBodySmallTitle_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextBodyTitle: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextBodyTitle }
-export { TextBodyTitle as TextBodyTitle_alias_1 }
-export { TextBodyTitle as TextBodyTitle_alias_2 }
-
-/**
- * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextCaption: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextCaption }
-export { TextCaption as TextCaption_alias_1 }
-export { TextCaption as TextCaption_alias_2 }
-
-/**
- * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextCaptionTitle: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextCaptionTitle }
-export { TextCaptionTitle as TextCaptionTitle_alias_1 }
-export { TextCaptionTitle as TextCaptionTitle_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextH1: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextH1 }
-export { TextH1 as TextH1_alias_1 }
-export { TextH1 as TextH1_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextH1Display: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextH1Display }
-export { TextH1Display as TextH1Display_alias_1 }
-export { TextH1Display as TextH1Display_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextH2: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextH2 }
-export { TextH2 as TextH2_alias_1 }
-export { TextH2 as TextH2_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextH3: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextH3 }
-export { TextH3 as TextH3_alias_1 }
-export { TextH3 as TextH3_alias_2 }
-
-/**
- * # 🚨 Unstable alternative
- *
- * named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextH3Title: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextH3Title }
-export { TextH3Title as TextH3Title_alias_1 }
-export { TextH3Title as TextH3Title_alias_2 }
-
-declare type TextProps = (HeadingProps | ParagraphProps) & {
+declare type TextProps = {
     children: React_3.ReactNode;
     /**
      * The font-size of the component. By default it's `fluid` which means it's smaller on mobile and larger on desktop.
      *
      * But you can lock it to either the min or the max size.
+     *
+     * @default "fluid"
      */
     size?: "min" | "max" | "fluid";
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Convienence prop to change the rendered element.
+     *
+     * Use {@link TextProps.asChild} if you need more control of the rendered element.
+     */
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "label" | "p";
     /**
      * 🚧 Experimental spacing
      */
     _unstableSpacing?: boolean;
-};
+} & (HeadingProps | ParagraphProps) & React_3.HTMLAttributes<HTMLParagraphElement | HTMLHeadingElement>;
 export { TextProps }
 export { TextProps as TextProps_alias_1 }
 export { TextProps as TextProps_alias_2 }
 export { TextProps as TextProps_alias_3 }
 
-/**
- * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextTechnical: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextTechnical }
-export { TextTechnical as TextTechnical_alias_1 }
-export { TextTechnical as TextTechnical_alias_2 }
-
-/**
- * 🚨 Unstable alterentative: Named as the different typography levels with Text prefix
- *
- * ## Alias to @see Text
- */
-declare const TextTechnicalTitle: FunctionComponent<Omit<TextProps, "variant">>;
-export { TextTechnicalTitle }
-export { TextTechnicalTitle as TextTechnicalTitle_alias_1 }
-export { TextTechnicalTitle as TextTechnicalTitle_alias_2 }
-
 export declare const Title: Story_26;
 
 export declare const TitleOnly: Story_21;
@@ -2438,13 +2453,18 @@ export declare const Underline: Story_18;
 /**
  * An unordered list of simple items, often text. You can nest other lists inside this component.
  *
- * If you have other list needs build your own using the semantic `ul` and `ol` tags.
+ * If you have other list needs, you can build your own using the semantic `ul` and `ol` tags.
+ *
+ * @example
+ * ```tsx
+ * <UnorderedList>
+ *  <li>Item 1</li>
+ *  <li>Item 2</li>
+ *  <li>Item 3</li>
+ * </UnorderedList>
+ * ```
  */
-declare function UnorderedList(props: ListProps): JSX_2.Element;
-
-declare namespace UnorderedList {
-    var displayName: string;
-}
+declare const UnorderedList: ForwardRefExoticComponent<ListProps & RefAttributes<HTMLUListElement>>;
 export { UnorderedList }
 export { UnorderedList as UnorderedList_alias_1 }
 export { UnorderedList as UnorderedList_alias_2 }
@@ -2487,12 +2507,6 @@ export declare function useResize<Instance extends HTMLElement>(ref: React_2.Ref
     height: number;
 };
 
-declare function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string): void;
-export { useScrollLock }
-export { useScrollLock as useScrollLock_alias_1 }
-export { useScrollLock as useScrollLock_alias_2 }
-export { useScrollLock as useScrollLock_alias_3 }
-
 export declare function useTabsContext(): TabsContextProps;
 
 declare type Variant = {
@@ -2526,23 +2540,19 @@ export declare const Warning: Story_2;
 
 export declare const Warning_alias_1: Story_21;
 
-declare function WarningBadge(props: BadgeProps): JSX_2.Element;
-
-declare namespace WarningBadge {
-    var displayName: string;
-}
+declare const WarningBadge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
 export { WarningBadge }
 export { WarningBadge as WarningBadge_alias_1 }
 export { WarningBadge as WarningBadge_alias_2 }
 export { WarningBadge as WarningBadge_alias_3 }
 
-declare const WarningBanner: OverridableComponent<WarningBannerProps, HTMLDivElement>;
+declare const WarningBanner: React_3.ForwardRefExoticComponent<WarningBannerProps & React_3.RefAttributes<HTMLDivElement>>;
 export { WarningBanner }
 export { WarningBanner as WarningBanner_alias_1 }
 export { WarningBanner as WarningBanner_alias_2 }
 export { WarningBanner as WarningBanner_alias_3 }
 
-declare interface WarningBannerProps {
+declare interface WarningBannerProps extends Omit<React_3.HTMLAttributes<HTMLDivElement>, "title"> {
     title: ReactNode;
     description?: ReactNode;
 }
@@ -2557,11 +2567,7 @@ export declare const White: Story_2;
 
 export declare const White_alias_1: Story_15;
 
-declare function WhiteBadge(props: BadgeProps): JSX_2.Element;
-
-declare namespace WhiteBadge {
-    var displayName: string;
-}
+declare const WhiteBadge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
 export { WhiteBadge }
 export { WhiteBadge as WhiteBadge_alias_1 }
 export { WhiteBadge as WhiteBadge_alias_2 }