refactor: Restructured expansion-card, link-card, list

@navikt/core/react/src/chat/Chat.stories.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { PersonIcon } from "@navikt/aksel-icons";
 import { VStack } from "../primitives/stack";
 import { renderStoriesForChromatic } from "../utils/renderStoriesForChromatic";
-import Chat, { POSITIONS, SIZES, VARIANTS } from "./Chat";
+import { Chat, POSITIONS, SIZES, VARIANTS } from "./root/ChatRoot";
 
 export default {
   title: "ds-react/Chat",

@navikt/core/react/src/chat/bubble/ChatBubble.tsx

@@ -1,8 +1,8 @@
 import React, { type HTMLAttributes, forwardRef } from "react";
-import { Detail, Heading, type HeadingProps } from "../typography";
-import { cl } from "../utils/helpers";
+import { Detail, Heading, type HeadingProps } from "../../typography";
+import { cl } from "../../utils/helpers";
 
-export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
+interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Bubble text.
    */
@@ -26,7 +26,7 @@ export interface ChatBubbleProps extends HTMLAttributes<HTMLDivElement> {
   toptextHeadingLevel?: Exclude<HeadingProps["level"], "1">;
 }
 
-const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
+const ChatBubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
   (
     {
       children,
@@ -65,4 +65,5 @@ const Bubble = forwardRef<HTMLDivElement, ChatBubbleProps>(
   },
 );
 
-export default Bubble;
+export { ChatBubble };
+export type { ChatBubbleProps };

@navikt/core/react/src/chat/index.ts

@@ -1,3 +1,3 @@
 "use client";
-export { default as Chat, ChatBubble } from "./Chat";
-export type { ChatProps, ChatBubbleProps } from "./Chat";
+export { Chat, ChatBubble } from "./root/ChatRoot";
+export type { ChatProps, ChatBubbleProps } from "./root/ChatRoot";

@navikt/core/react/src/chat/root/ChatRoot.tsx

@@ -1,13 +1,13 @@
 import React, { type HTMLAttributes, forwardRef } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
-import type { AkselColor } from "../types";
-import { BodyLong, type HeadingProps } from "../typography";
-import { cl } from "../utils/helpers";
-import Bubble, { type ChatBubbleProps } from "./Bubble";
+import type { AkselColor } from "../../types";
+import { BodyLong, type HeadingProps } from "../../typography";
+import { cl } from "../../utils/helpers";
+import { ChatBubble, type ChatBubbleProps } from "../bubble/ChatBubble";
 
-export const VARIANTS = ["subtle", "info", "neutral"] as const;
-export const POSITIONS = ["left", "right"] as const;
-export const SIZES = ["medium", "small"] as const;
+const VARIANTS = ["subtle", "info", "neutral"] as const;
+const POSITIONS = ["left", "right"] as const;
+const SIZES = ["medium", "small"] as const;
 
 interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -62,33 +62,7 @@ interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface ChatComponent extends React.ForwardRefExoticComponent<
-  ChatProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link ChatBubbleProps}
-   */
-  Bubble: typeof Bubble;
-}
-
-/**
- * A component for communicating a dialog between two or more parties.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
- * @see 🏷️ {@link ChatProps}
- *
- * @example
- * ```jsx
- * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
- *   <Chat.Bubble>Hello!</Chat.Bubble>
- *   <Chat.Bubble>How can I help you?</Chat.Bubble>
- * </Chat>
- * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
- *   <Chat.Bubble>Hi there!</Chat.Bubble>
- * </Chat>
- * ```
- */
-export const Chat = forwardRef<HTMLDivElement, ChatProps>(
+const ChatRoot = forwardRef<HTMLDivElement, ChatProps>(
   (
     {
       children,
@@ -143,7 +117,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       </div>
     );
   },
-) as ChatComponent;
+);
 
 function variantToColor(variant: ChatProps["variant"]): AkselColor {
   switch (variant) {
@@ -158,8 +132,29 @@ function variantToColor(variant: ChatProps["variant"]): AkselColor {
   }
 }
 
-Chat.Bubble = Bubble;
+/**
+ * A component for communicating a dialog between two or more parties.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
+ * @see 🏷️ {@link ChatProps}
+ *
+ * @example
+ * ```jsx
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
+ * </Chat>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
+ * </Chat>
+ * ```
+ */
+const Chat = Object.assign(ChatRoot, {
+  /**
+   * @see 🏷️ {@link ChatBubbleProps}
+   */
+  Bubble: ChatBubble,
+});
 
-export default Chat;
-export { Bubble as ChatBubble };
+export { Chat, ChatBubble, VARIANTS, POSITIONS, SIZES };
 export type { ChatProps, ChatBubbleProps };

@navikt/core/react/src/chips/index.ts

@@ -1,7 +1,7 @@
 "use client";
-export { default as Chips, type ChipsProps } from "./root/ChipsRoot";
-export {
-  ChipsRemovable,
-  type ChipsRemovableProps,
-} from "./removable/ChipsRemovable";
-export { ChipsToggle, type ChipsToggleProps } from "./toggle/ChipsToggle";
+export { Chips } from "./root/ChipsRoot";
+export { ChipsRemovable } from "./removable/ChipsRemovable";
+export { ChipsToggle } from "./toggle/ChipsToggle";
+export type { ChipsProps } from "./root/ChipsRoot";
+export type { ChipsRemovableProps } from "./removable/ChipsRemovable";
+export type { ChipsToggleProps } from "./toggle/ChipsToggle";

@navikt/core/react/src/chips/removable/ChipsRemovable.tsx

@@ -4,7 +4,7 @@ import type { AkselColor } from "../../types";
 import { cl, composeEventHandlers } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 
-export interface ChipsRemovableProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ChipsRemovableProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
    * @deprecated Use `data-color` prop instead.
@@ -22,10 +22,7 @@ export interface ChipsRemovableProps extends React.ButtonHTMLAttributes<HTMLButt
   "data-color"?: AkselColor;
 }
 
-export const ChipsRemovable = forwardRef<
-  HTMLButtonElement,
-  ChipsRemovableProps
->(
+const ChipsRemovable = forwardRef<HTMLButtonElement, ChipsRemovableProps>(
   (
     {
       children,
@@ -76,4 +73,5 @@ function variantToColor(
   }
 }
 
-export default ChipsRemovable;
+export { ChipsRemovable };
+export type { ChipsRemovableProps };

@navikt/core/react/src/chips/root/ChipsRoot.tsx

@@ -12,22 +12,24 @@ interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   size?: "medium" | "small";
 }
 
-interface ChipsComponent extends React.ForwardRefExoticComponent<
-  ChipsProps & React.RefAttributes<HTMLUListElement>
-> {
-  /**
-   * Toggle between selected-states.
-   * @see 🏷️ {@link ToggleChipsProps}
-   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
-   */
-  Toggle: typeof ChipsToggle;
-  /**
-   * Remove filter or the likes on click.
-   * @see 🏷️ {@link RemovableChipsProps}
-   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
-   */
-  Removable: typeof ChipsRemovable;
-}
+const ChipsRoot = forwardRef<HTMLUListElement, ChipsProps>(
+  ({ className, size = "medium", children, ...rest }, ref) => {
+    return (
+      <ul
+        {...rest}
+        ref={ref}
+        className={cl("aksel-chips", className, `aksel-chips--${size}`, {
+          "aksel-body-short aksel-body-short--small": size === "medium",
+          "aksel-detail aksel-detail--small": size === "small",
+        })}
+      >
+        {React.Children.map(children, (chip, index) => {
+          return <li key={chip?.toString() || index}>{chip}</li>;
+        })}
+      </ul>
+    );
+  },
+);
 
 /**
  * A component that displays a list of items as chips.
@@ -56,27 +58,20 @@ interface ChipsComponent extends React.ForwardRefExoticComponent<
  *    </Chips>
  * ```
  */
-export const Chips = forwardRef<HTMLUListElement, ChipsProps>(
-  ({ className, size = "medium", children, ...rest }, ref) => {
-    return (
-      <ul
-        {...rest}
-        ref={ref}
-        className={cl("aksel-chips", className, `aksel-chips--${size}`, {
-          "aksel-body-short aksel-body-short--small": size === "medium",
-          "aksel-detail aksel-detail--small": size === "small",
-        })}
-      >
-        {React.Children.map(children, (chip, index) => {
-          return <li key={chip?.toString() || index}>{chip}</li>;
-        })}
-      </ul>
-    );
-  },
-) as ChipsComponent;
+const Chips = Object.assign(ChipsRoot, {
+  /**
+   * Toggle between selected-states.
+   * @see 🏷️ {@link ChipsToggleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Toggle: ChipsToggle,
+  /**
+   * Remove filter or the likes on click.
+   * @see 🏷️ {@link ChipsRemovableProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Removable: ChipsRemovable,
+});
 
-Chips.Toggle = ChipsToggle;
-Chips.Removable = ChipsRemovable;
-
-export default Chips;
+export { Chips };
 export type { ChipsProps };

@navikt/core/react/src/chips/toggle/ChipsToggle.tsx

@@ -3,7 +3,7 @@ import type { AkselColor } from "../../types";
 import type { OverridableComponent } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 
-export interface ChipsToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ChipsToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
    * Toggles aria-pressed and visual changes
@@ -26,68 +26,66 @@ export interface ChipsToggleProps extends React.ButtonHTMLAttributes<HTMLButtonE
   checkmark?: boolean;
 }
 
-export const ChipsToggle: OverridableComponent<
-  ChipsToggleProps,
-  HTMLButtonElement
-> = forwardRef(
-  (
-    {
-      className,
-      children,
-      selected,
-      variant,
-      checkmark = true,
-      as: Component = "button",
-      "data-color": color,
-      ...rest
+const ChipsToggle: OverridableComponent<ChipsToggleProps, HTMLButtonElement> =
+  forwardRef(
+    (
+      {
+        className,
+        children,
+        selected,
+        variant,
+        checkmark = true,
+        as: Component = "button",
+        "data-color": color,
+        ...rest
+      },
+      ref,
+    ) => {
+      return (
+        <Component
+          data-color={color ?? variantToColor(variant)}
+          {...rest}
+          ref={ref}
+          className={cl("aksel-chips__chip aksel-chips__toggle", className, {
+            "aksel-chips__toggle--with-checkmark": checkmark,
+          })}
+          aria-pressed={selected}
+          data-pressed={selected}
+        >
+          {checkmark && (
+            <svg
+              aria-hidden
+              className="aksel-chips__toggle-icon"
+              width="1.25em"
+              height="1.25em"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              focusable={false}
+            >
+              {selected ? (
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
+                  fill="currentColor"
+                />
+              ) : (
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
+                  /* After removing old fallbacks, change to currentColor */
+                  fill="var(--ax-text-default)"
+                />
+              )}
+            </svg>
+          )}
+          <span className="aksel-chips__chip-text">{children}</span>
+        </Component>
+      );
     },
-    ref,
-  ) => {
-    return (
-      <Component
-        data-color={color ?? variantToColor(variant)}
-        {...rest}
-        ref={ref}
-        className={cl("aksel-chips__chip aksel-chips__toggle", className, {
-          "aksel-chips__toggle--with-checkmark": checkmark,
-        })}
-        aria-pressed={selected}
-        data-pressed={selected}
-      >
-        {checkmark && (
-          <svg
-            aria-hidden
-            className="aksel-chips__toggle-icon"
-            width="1.25em"
-            height="1.25em"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            focusable={false}
-          >
-            {selected ? (
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125ZM14.128 7.72904C14.3695 7.44357 14.3339 7.01635 14.0485 6.7748C13.763 6.53326 13.3358 6.56886 13.0942 6.85432L8.60428 12.1606L6.41627 9.97263C6.15185 9.70822 5.72315 9.70822 5.45873 9.97263C5.19431 10.2371 5.19431 10.6658 5.45873 10.9302L8.16706 13.6385C8.30095 13.7724 8.48479 13.8441 8.67397 13.8362C8.86316 13.8284 9.0404 13.7416 9.16271 13.5971L14.128 7.72904Z"
-                fill="currentColor"
-              />
-            ) : (
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10Z"
-                /* After removing old fallbacks, change to currentColor */
-                fill="var(--ax-text-default)"
-              />
-            )}
-          </svg>
-        )}
-        <span className="aksel-chips__chip-text">{children}</span>
-      </Component>
-    );
-  },
-);
+  );
 
 function variantToColor(
   variant?: ChipsToggleProps["variant"],
@@ -102,4 +100,5 @@ function variantToColor(
   }
 }
 
-export default ChipsToggle;
+export { ChipsToggle };
+export type { ChipsToggleProps };

@navikt/core/react/src/expansion-card/content/ExpansionCardContent.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useContext } from "react";
-import { useThemeInternal } from "../theme/Theme";
-import { BodyLong } from "../typography";
-import { cl } from "../utils/helpers";
-import { ExpansionCardContext } from "./context";
+import { useThemeInternal } from "../../theme/Theme";
+import { BodyLong } from "../../typography";
+import { cl } from "../../utils/helpers";
+import { ExpansionCardContext } from "../root/ExpansionCardRoot.context";
 
-export interface ExpansionCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ExpansionCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
@@ -44,4 +44,5 @@ const ExpansionCardContent = forwardRef<
   );
 });
 
-export default ExpansionCardContent;
+export { ExpansionCardContent };
+export type { ExpansionCardContentProps };

@navikt/core/react/src/expansion-card/context.ts

@@ -1,13 +0,0 @@
-import { createContext } from "react";
-
-export type ExpansionCardContextProps = {
-  open: boolean;
-  toggleOpen: () => void;
-  size: "medium" | "small";
-};
-
-export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
-  open: false,
-  toggleOpen: () => {},
-  size: "medium",
-});

@navikt/core/react/src/expansion-card/description/ExpansionCardDescription.tsx

@@ -1,13 +1,13 @@
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography";
-import { cl } from "../utils/helpers";
-import { ExpansionCardContext } from "./context";
+import { BodyLong } from "../../typography";
+import { cl } from "../../utils/helpers";
+import { ExpansionCardContext } from "../root/ExpansionCardRoot.context";
 
-export interface ExpansionCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+interface ExpansionCardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
 }
 
-export const ExpansionCardDescription = forwardRef<
+const ExpansionCardDescription = forwardRef<
   HTMLParagraphElement,
   ExpansionCardDescriptionProps
 >(({ className, ...rest }, ref) => {
@@ -31,4 +31,5 @@ export const ExpansionCardDescription = forwardRef<
   );
 });
 
-export default ExpansionCardDescription;
+export { ExpansionCardDescription };
+export type { ExpansionCardDescriptionProps };

@navikt/core/react/src/expansion-card/header/ExpansionCardHeader.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, useContext } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { cl } from "../utils/helpers";
-import { useI18n } from "../utils/i18n/i18n.hooks";
-import { ExpansionCardContext } from "./context";
+import { cl } from "../../utils/helpers";
+import { useI18n } from "../../utils/i18n/i18n.hooks";
+import { ExpansionCardContext } from "../root/ExpansionCardRoot.context";
 
-export interface ExpansionCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ExpansionCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
@@ -46,4 +46,5 @@ const ExpansionCardHeader = forwardRef<
   );
 });
 
-export default ExpansionCardHeader;
+export { ExpansionCardHeader };
+export type { ExpansionCardHeaderProps };

@navikt/core/react/src/expansion-card/index.ts

@@ -1,9 +1,9 @@
 "use client";
 export {
-  type ExpansionCardProps,
-  default as ExpansionCard,
-} from "./ExpansionCard";
-export { default as ExpansionCardContent } from "./ExpansionCardContent";
-export { default as ExpansionCardHeader } from "./ExpansionCardHeader";
-export { default as ExpansionCardTitle } from "./ExpansionCardTitle";
-export { default as ExpansionCardDescription } from "./ExpansionCardDescription";
+  ExpansionCard,
+  ExpansionCardContent,
+  ExpansionCardHeader,
+  ExpansionCardTitle,
+  ExpansionCardDescription,
+} from "./root/ExpansionCardRoot";
+export type { ExpansionCardProps } from "./root/ExpansionCardRoot";

@navikt/core/react/src/expansion-card/root/ExpansionCardRoot.context.ts

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+type ExpansionCardContextProps = {
+  open: boolean;
+  toggleOpen: () => void;
+  size: "medium" | "small";
+};
+
+const ExpansionCardContext = createContext<ExpansionCardContextProps>({
+  open: false,
+  toggleOpen: () => {},
+  size: "medium",
+});
+
+export { ExpansionCardContext };
+export type { ExpansionCardContextProps };

@navikt/core/react/src/expansion-card/root/ExpansionCardRoot.tsx

@@ -1,51 +1,24 @@
 import React, { forwardRef } from "react";
-import type { AkselColor } from "../types";
-import type { OverridableComponent } from "../utils-external";
-import { cl } from "../utils/helpers";
-import { useControllableState } from "../utils/hooks";
-import ExpansionCardContent, {
+import type { AkselColor } from "../../types";
+import { cl } from "../../utils/helpers";
+import { useControllableState } from "../../utils/hooks";
+import {
+  ExpansionCardContent,
   type ExpansionCardContentProps,
-} from "./ExpansionCardContent";
+} from "../content/ExpansionCardContent";
 import {
   ExpansionCardDescription,
   type ExpansionCardDescriptionProps,
-} from "./ExpansionCardDescription";
-import ExpansionCardHeader, {
+} from "../description/ExpansionCardDescription";
+import {
+  ExpansionCardHeader,
   type ExpansionCardHeaderProps,
-} from "./ExpansionCardHeader";
+} from "../header/ExpansionCardHeader";
 import {
   ExpansionCardTitle,
   type ExpansionCardTitleProps,
-} from "./ExpansionCardTitle";
-import { ExpansionCardContext } from "./context";
-
-interface ExpansionCardComponent extends React.ForwardRefExoticComponent<
-  ExpansionCardProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link ExpansionCardHeaderProps}
-   */
-  Header: React.ForwardRefExoticComponent<
-    ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
-  >;
-  /**
-   * @see 🏷️ {@link ExpansionCardTitleProps}
-   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
-   */
-  Title: OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>;
-  /**
-   * @see 🏷️ {@link ExpansionCardDescriptionProps}
-   */
-  Description: React.ForwardRefExoticComponent<
-    ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
-  >;
-  /**
-   * @see 🏷️ {@link ExpansionCardContentProps}
-   */
-  Content: React.ForwardRefExoticComponent<
-    ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
-  >;
-}
+} from "../title/ExpansionCardTitle";
+import { ExpansionCardContext } from "./ExpansionCardRoot.context";
 
 interface ExpansionCardCommonProps extends Omit<
   React.HTMLAttributes<HTMLDivElement>,
@@ -93,28 +66,10 @@ type ExpansionCardConditionalProps =
       "aria-labelledby": string;
     };
 
-export type ExpansionCardProps = ExpansionCardCommonProps &
+type ExpansionCardProps = ExpansionCardCommonProps &
   ExpansionCardConditionalProps;
 
-/**
- * A component that displays an expandable card.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
- * @see 🏷️ {@link ExpansionCardProps}
- *
- * @example
- * ```jsx
- * <ExpansionCard aria-label="Utbetaling av sykepenger">
- *   <ExpansionCard.Header>
- *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
- *   </ExpansionCard.Header>
- *   <ExpansionCard.Content>
- *     <Innhold />
- *   </ExpansionCard.Content>
- * </ExpansionCard>
- * ```
- */
-export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
+const ExpansionCardRoot = forwardRef<HTMLDivElement, ExpansionCardProps>(
   (
     {
       className,
@@ -154,11 +109,57 @@ export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
       </ExpansionCardContext.Provider>
     );
   },
-) as ExpansionCardComponent;
+);
 
-ExpansionCard.Header = ExpansionCardHeader;
-ExpansionCard.Content = ExpansionCardContent;
-ExpansionCard.Title = ExpansionCardTitle;
-ExpansionCard.Description = ExpansionCardDescription;
+/**
+ * A component that displays an expandable card.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
+ * @see 🏷️ {@link ExpansionCardProps}
+ *
+ * @example
+ * ```jsx
+ * <ExpansionCard aria-label="Utbetaling av sykepenger">
+ *   <ExpansionCard.Header>
+ *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+ *   </ExpansionCard.Header>
+ *   <ExpansionCard.Content>
+ *     <Innhold />
+ *   </ExpansionCard.Content>
+ * </ExpansionCard>
+ * ```
+ */
+const ExpansionCard = Object.assign(ExpansionCardRoot, {
+  /**
+   * @see 🏷️ {@link ExpansionCardHeaderProps}
+   */
+  Header: ExpansionCardHeader,
+  /**
+   * @see 🏷️ {@link ExpansionCardTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: ExpansionCardTitle,
+  /**
+   * @see 🏷️ {@link ExpansionCardDescriptionProps}
+   */
+  Description: ExpansionCardDescription,
+  /**
+   * @see 🏷️ {@link ExpansionCardContentProps}
+   */
+  Content: ExpansionCardContent,
+});
 
-export default ExpansionCard;
+export {
+  ExpansionCard,
+  ExpansionCardHeader,
+  ExpansionCardTitle,
+  ExpansionCardDescription,
+  ExpansionCardContent,
+};
+export type {
+  ExpansionCardProps,
+  ExpansionCardHeaderProps,
+  ExpansionCardTitleProps,
+  ExpansionCardDescriptionProps,
+  ExpansionCardContentProps,
+};

@navikt/core/react/src/expansion-card/title/ExpansionCardTitle.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import type { OverridableComponent } from "../utils-external";
-import { cl } from "../utils/helpers";
+import type { OverridableComponent } from "../../utils-external";
+import { cl } from "../../utils/helpers";
 
-export interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   /**
    * Changes text-sizing
@@ -11,7 +11,7 @@ export interface ExpansionCardTitleProps extends React.HTMLAttributes<HTMLHeadin
   size?: "large" | "medium" | "small";
 }
 
-export const ExpansionCardTitle: OverridableComponent<
+const ExpansionCardTitle: OverridableComponent<
   ExpansionCardTitleProps,
   HTMLHeadingElement
 > = forwardRef(
@@ -32,4 +32,5 @@ export const ExpansionCardTitle: OverridableComponent<
   },
 );
 
-export default ExpansionCardTitle;
+export { ExpansionCardTitle };
+export type { ExpansionCardTitleProps };

@navikt/core/react/src/link-card/LinkCard.stories.tsx

@@ -13,7 +13,7 @@ import {
   LinkCardIcon,
   LinkCardImage,
   LinkCardTitle,
-} from "./LinkCard";
+} from "./index";
 
 type Story = StoryObj<typeof LinkCard>;
 

@navikt/core/react/src/link-card/LinkCard.tsx

@@ -1,334 +0,0 @@
-import React, { type HTMLAttributes, forwardRef } from "react";
-import type { AkselColor } from "../types";
-import { BodyLong, Heading } from "../typography";
-import {
-  LinkAnchor,
-  LinkAnchorArrow,
-  LinkAnchorOverlay,
-  type LinkAnchorProps,
-} from "../utils/components/link-anchor";
-import { cl, createStrictContext } from "../utils/helpers";
-
-/* ------------------------------ LinkCard Root ----------------------------- */
-interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * @default true
-   */
-  arrow?: boolean;
-  /**
-   * Adjusts arrow position.
-   * @default "baseline"
-   */
-  arrowPosition?: "baseline" | "center";
-  /**
-   * Changes padding and typo sizes.
-   * @default "medium"
-   */
-  size?: "small" | "medium";
-  /**
-   * Overrides color.
-   *
-   * We recommend avoiding status-colors (`info`, `success`, `warning`, `danger`) in LinkCards.
-   * @default "neutral"
-   * @see 🏷️ {@link AkselColor}
-   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
-   */
-  "data-color"?: AkselColor;
-  /**
-   * Changes the HTML element used for the root element.
-   *
-   * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
-   * `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
-   * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
-   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
-   *
-   *
-   * **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
-   * @default "div"
-   */
-  as?: "div" | "section" | "article";
-}
-
-type LinkCardContextProps = {
-  size: LinkCardProps["size"];
-};
-
-const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } =
-  createStrictContext<LinkCardContextProps>({
-    name: "LinkCardContextProvider",
-  });
-
-interface LinkCardComponent extends React.ForwardRefExoticComponent<
-  LinkCardProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link LinkCardTitleProps}
-   */
-  Title: typeof LinkCardTitle;
-  /**
-   * @see 🏷️ {@link LinkCardAnchorProps}
-   */
-  Anchor: typeof LinkCardAnchor;
-  /**
-   * @see 🏷️ {@link LinkCardDescriptionProps}
-   */
-  Description: typeof LinkCardDescription;
-  /**
-   * @see 🏷️ {@link LinkCardFooterProps}
-   */
-  Footer: typeof LinkCardFooter;
-  /**
-   * @see 🏷️ {@link LinkCardIconProps}
-   */
-  Icon: typeof LinkCardIcon;
-  /**
-   * @see 🏷️ {@link LinkCardImageProps}
-   */
-  Image: typeof LinkCardImage;
-}
-
-/**
- * Accessible clickable card as a link.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
- * @see 🏷️ {@link LinkCardProps}
- *
- *
- * @example
- * ```tsx
- * <LinkCard>
- *   <LinkCard.Icon>
- *     <IconOrPictogram />
- *   </LinkCard.Icon>
- *   <LinkCard.Title>
- *     <LinkCard.Anchor href="/href">
- *       LinkCard title
- *     </LinkCard.Anchor>
- *   </LinkCard.Title>
- *   <LinkCard.Description>
- *     This is a description of the link card.
- *   </LinkCard.Description>
- *   <LinkCard.Footer>Footer content</LinkCard.Footer>
- * </LinkCard>
- * ```
- */
-export const LinkCard = forwardRef<HTMLDivElement, LinkCardProps>(
-  (
-    {
-      children,
-      className,
-      arrow = true,
-      arrowPosition = "baseline",
-      size = "medium",
-      as: Component = "div",
-      ...restProps
-    }: LinkCardProps,
-    forwardedRef,
-  ) => {
-    return (
-      <LinkCardContextProvider size={size}>
-        <LinkAnchorOverlay asChild>
-          <BodyLong
-            as={Component}
-            size={size}
-            ref={forwardedRef}
-            data-color="neutral"
-            className={cl(
-              "aksel-link-card",
-              className,
-              `aksel-link-card--${size}`,
-            )}
-            data-align-arrow={arrowPosition}
-            {...restProps}
-          >
-            {children}
-            {arrow && (
-              <LinkAnchorArrow
-                fontSize={size === "medium" ? "1.75rem" : "1.5rem"}
-                className="aksel-link-card__arrow"
-              />
-            )}
-          </BodyLong>
-        </LinkAnchorOverlay>
-      </LinkCardContextProvider>
-    );
-  },
-) as LinkCardComponent;
-
-/* ---------------------------- LinkCard Title ---------------------------- */
-type LinkCardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
-  children: React.ReactNode;
-  /**
-   * Heading tag. Use "span" if you want a non header defining card
-   * (eg. you have a lot of them all at once, such as in a grid)
-   * @default "span"
-   */
-  as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
-};
-
-/**
- * @see 🏷️ {@link LinkCardTitleProps}
- */
-export const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
-  (
-    { children, as = "span", className, ...restProps }: LinkCardTitleProps,
-    forwardedRef,
-  ) => {
-    const context = useLinkCardContext();
-
-    return (
-      <Heading
-        ref={forwardedRef}
-        as={as}
-        size={context.size === "medium" ? "small" : "xsmall"}
-        className={cl("aksel-link-card__title", className)}
-        {...restProps}
-      >
-        {children}
-      </Heading>
-    );
-  },
-);
-
-/* ---------------------------- LinkCard Anchor ---------------------------- */
-type LinkCardAnchorProps = LinkAnchorProps;
-
-/**
- * @see 🏷️ {@link LinkCardAnchorProps}
- */
-export const LinkCardAnchor = LinkAnchor;
-
-/* ---------------------------- LinkCard Description ---------------------------- */
-interface LinkCardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-/**
- * @see 🏷️ {@link LinkCardDescriptionProps}
- */
-export const LinkCardDescription = forwardRef<
-  HTMLDivElement,
-  LinkCardDescriptionProps
->(
-  (
-    { children, className, ...restProps }: LinkCardDescriptionProps,
-    forwardedRef,
-  ) => {
-    return (
-      <div
-        ref={forwardedRef}
-        className={cl("aksel-link-card__description", className)}
-        {...restProps}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/* ---------------------------- LinkCard Footer ---------------------------- */
-interface LinkCardFooterProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-/**
- * @see 🏷️ {@link LinkCardFooterProps}
- */
-export const LinkCardFooter = forwardRef<HTMLDivElement, LinkCardFooterProps>(
-  (
-    { children, className, ...restProps }: LinkCardFooterProps,
-    forwardedRef,
-  ) => {
-    return (
-      <div
-        ref={forwardedRef}
-        className={cl("aksel-link-card__footer", className)}
-        {...restProps}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/* ---------------------------- LinkCard Icon ---------------------------- */
-interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-/**
- * @see 🏷️ {@link LinkCardIconProps}
- */
-export const LinkCardIcon = forwardRef<HTMLDivElement, LinkCardIconProps>(
-  ({ children, className, ...restProps }: LinkCardIconProps, forwardedRef) => {
-    return (
-      <div
-        ref={forwardedRef}
-        aria-hidden
-        className={cl("aksel-link-card__icon", className)}
-        {...restProps}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-/* ---------------------------- LinkCard Image ---------------------------- */
-type ImageAspectRatio = "1/1" | "16/9" | "16/10" | "4/3" | (string & {});
-
-interface LinkCardImageProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
-   * This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
-   */
-  aspectRatio?: ImageAspectRatio;
-}
-
-/**
- * @see 🏷️ {@link LinkCardImageProps}
- */
-export const LinkCardImage = forwardRef<HTMLDivElement, LinkCardImageProps>(
-  (
-    {
-      children,
-      className,
-      aspectRatio,
-      style,
-      ...restProps
-    }: LinkCardImageProps,
-    forwardedRef,
-  ) => {
-    return (
-      <div
-        ref={forwardedRef}
-        className={cl("aksel-link-card__image-container", className)}
-        style={{
-          ...style,
-          aspectRatio,
-        }}
-        {...restProps}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-LinkCard.Title = LinkCardTitle;
-LinkCard.Anchor = LinkCardAnchor;
-LinkCard.Description = LinkCardDescription;
-LinkCard.Footer = LinkCardFooter;
-LinkCard.Icon = LinkCardIcon;
-LinkCard.Image = LinkCardImage;
-
-export type {
-  LinkCardAnchorProps,
-  LinkCardDescriptionProps,
-  LinkCardFooterProps,
-  LinkCardIconProps,
-  LinkCardImageProps,
-  LinkCardProps,
-  LinkCardTitleProps,
-};

@navikt/core/react/src/link-card/anchor/LinkCardAnchor.tsx

@@ -0,0 +1,14 @@
+import {
+  LinkAnchor,
+  type LinkAnchorProps,
+} from "../../utils/components/link-anchor";
+
+type LinkCardAnchorProps = LinkAnchorProps;
+
+/**
+ * @see 🏷️ {@link LinkCardAnchorProps}
+ */
+const LinkCardAnchor = LinkAnchor;
+
+export { LinkCardAnchor };
+export type { LinkCardAnchorProps };

@navikt/core/react/src/link-card/description/LinkCardDescription.tsx

@@ -0,0 +1,32 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import { cl } from "../../utils/helpers";
+
+interface LinkCardDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardDescriptionProps}
+ */
+const LinkCardDescription = forwardRef<
+  HTMLDivElement,
+  LinkCardDescriptionProps
+>(
+  (
+    { children, className, ...restProps }: LinkCardDescriptionProps,
+    forwardedRef,
+  ) => {
+    return (
+      <div
+        ref={forwardedRef}
+        className={cl("aksel-link-card__description", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { LinkCardDescription };
+export type { LinkCardDescriptionProps };

@navikt/core/react/src/link-card/footer/LinkCardFooter.tsx

@@ -0,0 +1,29 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import { cl } from "../../utils/helpers";
+
+interface LinkCardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardFooterProps}
+ */
+const LinkCardFooter = forwardRef<HTMLDivElement, LinkCardFooterProps>(
+  (
+    { children, className, ...restProps }: LinkCardFooterProps,
+    forwardedRef,
+  ) => {
+    return (
+      <div
+        ref={forwardedRef}
+        className={cl("aksel-link-card__footer", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { LinkCardFooter };
+export type { LinkCardFooterProps };

@navikt/core/react/src/link-card/icon/LinkCardIcon.tsx

@@ -0,0 +1,27 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import { cl } from "../../utils/helpers";
+
+interface LinkCardIconProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardIconProps}
+ */
+const LinkCardIcon = forwardRef<HTMLDivElement, LinkCardIconProps>(
+  ({ children, className, ...restProps }: LinkCardIconProps, forwardedRef) => {
+    return (
+      <div
+        ref={forwardedRef}
+        aria-hidden
+        className={cl("aksel-link-card__icon", className)}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { LinkCardIcon };
+export type { LinkCardIconProps };

@navikt/core/react/src/link-card/image/LinkCardImage.tsx

@@ -0,0 +1,46 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import { cl } from "../../utils/helpers";
+
+type ImageAspectRatio = "1/1" | "16/9" | "16/10" | "4/3" | (string & {});
+
+interface LinkCardImageProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box.
+   * This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
+   */
+  aspectRatio?: ImageAspectRatio;
+}
+
+/**
+ * @see 🏷️ {@link LinkCardImageProps}
+ */
+const LinkCardImage = forwardRef<HTMLDivElement, LinkCardImageProps>(
+  (
+    {
+      children,
+      className,
+      aspectRatio,
+      style,
+      ...restProps
+    }: LinkCardImageProps,
+    forwardedRef,
+  ) => {
+    return (
+      <div
+        ref={forwardedRef}
+        className={cl("aksel-link-card__image-container", className)}
+        style={{
+          ...style,
+          aspectRatio,
+        }}
+        {...restProps}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { LinkCardImage };
+export type { LinkCardImageProps };

@navikt/core/react/src/link-card/index.ts

@@ -7,7 +7,7 @@ export {
   LinkCardAnchor,
   LinkCardIcon,
   LinkCardImage,
-} from "./LinkCard";
+} from "./root/LinkCardRoot";
 
 export type {
   LinkCardProps,
@@ -17,4 +17,4 @@ export type {
   LinkCardAnchorProps,
   LinkCardIconProps,
   LinkCardImageProps,
-} from "./LinkCard";
+} from "./root/LinkCardRoot";

@navikt/core/react/src/link-card/root/LinkCardRoot.context.ts

@@ -0,0 +1,14 @@
+import { createStrictContext } from "../../utils/helpers";
+import type { LinkCardProps } from "./LinkCardRoot";
+
+type LinkCardContextProps = {
+  size: LinkCardProps["size"];
+};
+
+const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } =
+  createStrictContext<LinkCardContextProps>({
+    name: "LinkCardContextProvider",
+  });
+
+export { LinkCardContextProvider, useLinkCardContext };
+export type { LinkCardContextProps };

@navikt/core/react/src/link-card/root/LinkCardRoot.tsx

@@ -0,0 +1,177 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import type { AkselColor } from "../../types";
+import { BodyLong } from "../../typography";
+import {
+  LinkAnchorArrow,
+  LinkAnchorOverlay,
+} from "../../utils/components/link-anchor";
+import { cl } from "../../utils/helpers";
+import {
+  LinkCardAnchor,
+  type LinkCardAnchorProps,
+} from "../anchor/LinkCardAnchor";
+import {
+  LinkCardDescription,
+  type LinkCardDescriptionProps,
+} from "../description/LinkCardDescription";
+import {
+  LinkCardFooter,
+  type LinkCardFooterProps,
+} from "../footer/LinkCardFooter";
+import { LinkCardIcon, type LinkCardIconProps } from "../icon/LinkCardIcon";
+import { LinkCardImage, type LinkCardImageProps } from "../image/LinkCardImage";
+import { LinkCardTitle, type LinkCardTitleProps } from "../title/LinkCardTitle";
+import { LinkCardContextProvider } from "./LinkCardRoot.context";
+
+interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @default true
+   */
+  arrow?: boolean;
+  /**
+   * Adjusts arrow position.
+   * @default "baseline"
+   */
+  arrowPosition?: "baseline" | "center";
+  /**
+   * Changes padding and typo sizes.
+   * @default "medium"
+   */
+  size?: "small" | "medium";
+  /**
+   * Overrides color.
+   *
+   * We recommend avoiding status-colors (`info`, `success`, `warning`, `danger`) in LinkCards.
+   * @default "neutral"
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
+   * `axe-core` might warn about unique landmarks if you have multiple Accordions on page with the same label.
+   * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   *
+   *
+   * **When using `article`, make sure `<LinkCard.Title />` is a heading and not a `span`.**
+   * @default "div"
+   */
+  as?: "div" | "section" | "article";
+}
+
+const LinkCardRoot = forwardRef<HTMLDivElement, LinkCardProps>(
+  (
+    {
+      children,
+      className,
+      arrow = true,
+      arrowPosition = "baseline",
+      size = "medium",
+      as: Component = "div",
+      ...restProps
+    }: LinkCardProps,
+    forwardedRef,
+  ) => {
+    return (
+      <LinkCardContextProvider size={size}>
+        <LinkAnchorOverlay asChild>
+          <BodyLong
+            as={Component}
+            size={size}
+            ref={forwardedRef}
+            data-color="neutral"
+            className={cl(
+              "aksel-link-card",
+              className,
+              `aksel-link-card--${size}`,
+            )}
+            data-align-arrow={arrowPosition}
+            {...restProps}
+          >
+            {children}
+            {arrow && (
+              <LinkAnchorArrow
+                fontSize={size === "medium" ? "1.75rem" : "1.5rem"}
+                className="aksel-link-card__arrow"
+              />
+            )}
+          </BodyLong>
+        </LinkAnchorOverlay>
+      </LinkCardContextProvider>
+    );
+  },
+);
+
+/**
+ * Accessible clickable card as a link.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/linkcard)
+ * @see 🏷️ {@link LinkCardProps}
+ *
+ *
+ * @example
+ * ```tsx
+ * <LinkCard>
+ *   <LinkCard.Icon>
+ *     <IconOrPictogram />
+ *   </LinkCard.Icon>
+ *   <LinkCard.Title>
+ *     <LinkCard.Anchor href="/href">
+ *       LinkCard title
+ *     </LinkCard.Anchor>
+ *   </LinkCard.Title>
+ *   <LinkCard.Description>
+ *     This is a description of the link card.
+ *   </LinkCard.Description>
+ *   <LinkCard.Footer>Footer content</LinkCard.Footer>
+ * </LinkCard>
+ * ```
+ */
+const LinkCard = Object.assign(LinkCardRoot, {
+  /**
+   * @see 🏷️ {@link LinkCardTitleProps}
+   */
+  Title: LinkCardTitle,
+  /**
+   * @see 🏷️ {@link LinkCardAnchorProps}
+   */
+  Anchor: LinkCardAnchor,
+  /**
+   * @see 🏷️ {@link LinkCardDescriptionProps}
+   */
+  Description: LinkCardDescription,
+  /**
+   * @see 🏷️ {@link LinkCardFooterProps}
+   */
+  Footer: LinkCardFooter,
+  /**
+   * @see 🏷️ {@link LinkCardIconProps}
+   */
+  Icon: LinkCardIcon,
+  /**
+   * @see 🏷️ {@link LinkCardImageProps}
+   */
+  Image: LinkCardImage,
+});
+
+export {
+  LinkCard,
+  LinkCardTitle,
+  LinkCardDescription,
+  LinkCardFooter,
+  LinkCardAnchor,
+  LinkCardIcon,
+  LinkCardImage,
+};
+export type {
+  LinkCardProps,
+  LinkCardTitleProps,
+  LinkCardDescriptionProps,
+  LinkCardFooterProps,
+  LinkCardAnchorProps,
+  LinkCardIconProps,
+  LinkCardImageProps,
+};

@navikt/core/react/src/link-card/title/LinkCardTitle.tsx

@@ -0,0 +1,41 @@
+import React, { type HTMLAttributes, forwardRef } from "react";
+import { Heading } from "../../typography";
+import { cl } from "../../utils/helpers";
+import { useLinkCardContext } from "../root/LinkCardRoot.context";
+
+type LinkCardTitleProps = HTMLAttributes<HTMLHeadingElement> & {
+  children: React.ReactNode;
+  /**
+   * Heading tag. Use "span" if you want a non header defining card
+   * (eg. you have a lot of them all at once, such as in a grid)
+   * @default "span"
+   */
+  as?: "span" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+/**
+ * @see 🏷️ {@link LinkCardTitleProps}
+ */
+const LinkCardTitle = forwardRef<HTMLHeadingElement, LinkCardTitleProps>(
+  (
+    { children, as = "span", className, ...restProps }: LinkCardTitleProps,
+    forwardedRef,
+  ) => {
+    const context = useLinkCardContext();
+
+    return (
+      <Heading
+        ref={forwardedRef}
+        as={as}
+        size={context.size === "medium" ? "small" : "xsmall"}
+        className={cl("aksel-link-card__title", className)}
+        {...restProps}
+      >
+        {children}
+      </Heading>
+    );
+  },
+);
+
+export { LinkCardTitle };
+export type { LinkCardTitleProps };

@navikt/core/react/src/list/List.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Box } from "../primitives/box";
 import { VStack } from "../primitives/stack";
 import { BodyLong } from "../typography";
-import List from "./List";
+import { List } from "./index";
 
 export default {
   title: "ds-react/List",

@navikt/core/react/src/list/List.types.ts

@@ -1,4 +1,4 @@
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
    * HTML list element to render.
@@ -16,7 +16,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: "small" | "medium" | "large";
 }
 
-export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   /**
    * List item content.
    */
@@ -30,3 +30,5 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
    */
   icon?: React.ReactNode;
 }
+
+export type { ListProps, ListItemProps };

@navikt/core/react/src/list/index.ts

@@ -1,3 +1,3 @@
 "use client";
-export { default as List, ListItem } from "./List";
-export type { ListProps, ListItemProps } from "./List";
+export { List, ListItem } from "./root/ListRoot";
+export type { ListProps, ListItemProps } from "./root/ListRoot";

@navikt/core/react/src/list/item/ListItem.tsx

@@ -1,14 +1,14 @@
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography";
-import { cl } from "../utils/helpers";
-import { consoleWarning } from "../utils/helpers/consoleWarning";
-import { ListContext } from "./List.context";
-import type { ListItemProps } from "./List.types";
+import { BodyLong } from "../../typography";
+import { cl } from "../../utils/helpers";
+import { consoleWarning } from "../../utils/helpers/consoleWarning";
+import type { ListItemProps } from "../List.types";
+import { ListContext } from "../root/ListRoot.context";
 
 /**
  * @see 🏷️ {@link ListItemProps}
  */
-export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
+const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType, size } = useContext(ListContext);
 
@@ -57,4 +57,6 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
 );
 
 ListItem.displayName = "List.Item";
-export default ListItem;
+
+export { ListItem };
+export type { ListItemProps };

@navikt/core/react/src/list/root/ListRoot.context.ts

@@ -1,12 +1,14 @@
 import { createContext } from "react";
-import type { ListProps } from "./List.types";
+import type { ListProps } from "../List.types";
 
 interface ListContextProps {
   listType: Exclude<ListProps["as"], undefined>;
   size: Exclude<ListProps["size"], undefined>;
 }
 
-export const ListContext = createContext<ListContextProps>({
+const ListContext = createContext<ListContextProps>({
   listType: "ul",
   size: "medium",
 });
+
+export { ListContext };

@navikt/core/react/src/list/root/ListRoot.tsx

@@ -1,35 +1,11 @@
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography";
-import { cl } from "../utils/helpers";
-import { ListItem } from "./List.Item";
-import { ListContext } from "./List.context";
-import type { ListItemProps, ListProps } from "./List.types";
+import { BodyLong } from "../../typography";
+import { cl } from "../../utils/helpers";
+import type { ListItemProps, ListProps } from "../List.types";
+import { ListItem } from "../item/ListItem";
+import { ListContext } from "./ListRoot.context";
 
-interface ListComponent extends React.ForwardRefExoticComponent<
-  ListProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link ListItemProps}
-   */
-  Item: typeof ListItem;
-}
-
-/**
- * A list component
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/list)
- * @see 🏷️ {@link ListProps | Props}
- *
- * @example
- * ```jsx
- * <List>
- *   <List.Item>Coffee</List.Item>
- *   <List.Item>Tea</List.Item>
- *   <List.Item>Milk</List.Item>
- * </List>
- * ```
- */
-export const List = forwardRef<HTMLDivElement, ListProps>(
+const ListRoot = forwardRef<HTMLDivElement, ListProps>(
   (
     {
       children,
@@ -71,10 +47,29 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       </ListContext.Provider>
     );
   },
-) as ListComponent;
+);
 
-List.Item = ListItem;
+/**
+ * A list component
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/list)
+ * @see 🏷️ {@link ListProps | Props}
+ *
+ * @example
+ * ```jsx
+ * <List>
+ *   <List.Item>Coffee</List.Item>
+ *   <List.Item>Tea</List.Item>
+ *   <List.Item>Milk</List.Item>
+ * </List>
+ * ```
+ */
+const List = Object.assign(ListRoot, {
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   */
+  Item: ListItem,
+});
 
-export default List;
-export { ListItem };
+export { List, ListItem };
 export type { ListProps, ListItemProps };

@navikt/core/react/src/tabs/Tabs.types.ts

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "react";
 
-export interface TabsProps extends Omit<
+interface TabsProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   "onChange" | "dir"
 > {
@@ -43,3 +43,5 @@ export interface TabsProps extends Omit<
    */
   fill?: boolean;
 }
+
+export type { TabsProps };

@navikt/core/react/src/tabs/index.ts

@@ -1,8 +1,8 @@
 "use client";
-export { default as Tabs, TabsTab, TabsList, TabsPanel } from "./Tabs";
+export { Tabs, TabsTab, TabsList, TabsPanel } from "./root/TabsRoot";
 export type {
   TabsProps,
   TabsTabProps,
   TabsListProps,
   TabsPanelProps,
-} from "./Tabs";
+} from "./root/TabsRoot";

@navikt/core/react/src/tabs/list/TabsList.tsx

@@ -1,18 +1,18 @@
 import React, { forwardRef, useRef } from "react";
-import { cl, composeEventHandlers } from "../../../utils/helpers";
-import { useMergeRefs } from "../../../utils/hooks";
-import ScrollButton from "./ScrollButtons";
+import { cl, composeEventHandlers } from "../../utils/helpers";
+import { useMergeRefs } from "../../utils/hooks";
+import { TabsScrollButtonInternal } from "../scroll-button/TabsScrollButtonInternal";
 import { useScrollButtons } from "./useScrollButtons";
 import { useTabList } from "./useTabList";
 
-export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * <Tabs.Tab /> elements.
    */
   children: React.ReactNode;
 }
 
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
+const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
   ({ className, onKeyDown, ...rest }, ref) => {
     const { onKeyDown: _onKeyDown } = useTabList();
 
@@ -24,7 +24,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
     return (
       <div className="aksel-tabs__tablist-wrapper">
         {scrollCtx.show && (
-          <ScrollButton
+          <TabsScrollButtonInternal
             dir="left"
             hidden={!scrollCtx.start}
             onClick={scrollCtx.scrollLeft}
@@ -40,7 +40,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
           onKeyDown={composeEventHandlers(onKeyDown, _onKeyDown)}
         />
         {scrollCtx.show && (
-          <ScrollButton
+          <TabsScrollButtonInternal
             dir="right"
             hidden={!scrollCtx.end}
             onClick={scrollCtx.scrollRight}
@@ -51,4 +51,5 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   },
 );
 
-export default TabList;
+export { TabsList };
+export type { TabsListProps };

@navikt/core/react/src/tabs/list/useScrollButtons.ts

@@ -1,10 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { debounce } from "../../../utils-external";
-import { ownerDocument } from "../../../utils/helpers";
+import { debounce } from "../../utils-external";
+import { ownerDocument } from "../../utils/helpers";
 
-export function useScrollButtons(
-  listRef: React.RefObject<HTMLDivElement | null>,
-) {
+function useScrollButtons(listRef: React.RefObject<HTMLDivElement | null>) {
   const [displayScroll, setDisplayScroll] = useState({
     start: false,
     end: false,
@@ -70,3 +68,5 @@ export function useScrollButtons(
     },
   };
 }
+
+export { useScrollButtons };

@navikt/core/react/src/tabs/list/useTabList.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
-import { rovingFocus } from "../../../utils/helpers/roving-focus";
-import { useTabsContext } from "../../Tabs.context";
+import { rovingFocus } from "../../utils/helpers/roving-focus";
+import { useTabsContext } from "../root/TabsRoot.context";
 
 const TAB_SELECTOR = "[data-aksel-tab]:not([data-disabled])";
 
@@ -8,7 +8,7 @@ const TAB_SELECTOR = "[data-aksel-tab]:not([data-disabled])";
  * TabList hook to manage multiple tab buttons,
  * and ensures only one tab is selected at a time.
  */
-export function useTabList() {
+function useTabList() {
   const { loop, selectedValue, setFocusedValue } = useTabsContext();
 
   /**
@@ -52,3 +52,5 @@ export function useTabList() {
 
   return { onKeyDown };
 }
+
+export { useTabList };

@navikt/core/react/src/tabs/panel/TabsPanel.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { cl } from "../../../utils/helpers";
+import { cl } from "../../utils/helpers";
 import { useTabPanel } from "./useTabPanel";
 
-export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Tab panel content.
    */
@@ -25,7 +25,7 @@ export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   id?: string;
 }
 
-const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
+const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(
   ({ className, value, children, lazy = true, id, ...rest }, ref) => {
     const ctx = useTabPanel({ value });
 
@@ -48,4 +48,5 @@ const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
   },
 );
 
-export default TabPanel;
+export { TabsPanel };
+export type { TabsPanelProps };

@navikt/core/react/src/tabs/panel/useTabPanel.ts

@@ -1,13 +1,13 @@
-import { useTabsContext } from "../../Tabs.context";
+import { useTabsContext } from "../root/TabsRoot.context";
 
-type TabPanelProps = {
+type UseTabPanelProps = {
   value: string;
 };
 
 /**
  * Tabs hook for managing the visible/hidden state of Tabs.Panel
  */
-export function useTabPanel({ value }: TabPanelProps) {
+function useTabPanel({ value }: UseTabPanelProps) {
   const { id, selectedValue, makeTabId, makeTabPanelId } = useTabsContext();
 
   return {
@@ -16,3 +16,5 @@ export function useTabPanel({ value }: TabPanelProps) {
     id: makeTabPanelId(id, value),
   };
 }
+
+export { useTabPanel };

@navikt/core/react/src/tabs/root/TabsRoot.context.ts

@@ -1,5 +1,5 @@
-import { createStrictContext } from "../utils/helpers";
-import type { TabsProps } from "./Tabs.types";
+import { createStrictContext } from "../../utils/helpers";
+import type { TabsProps } from "../Tabs.types";
 import type { useTabs } from "./useTabs";
 
 type TabsProviderProps = ReturnType<typeof useTabs> &
@@ -9,9 +9,11 @@ type TabsProviderProps = ReturnType<typeof useTabs> &
   >;
 
 /* State context */
-export const { Provider: TabsProvider, useContext: useTabsContext } =
+const { Provider: TabsProvider, useContext: useTabsContext } =
   createStrictContext<TabsProviderProps>({
     name: "TabsContext",
     errorMessage:
       "Tabs.List, Tabs.Tag and Tabs.Panel needs to be wrapped within <Tabs>",
   });
+
+export { TabsProvider, useTabsContext };

@navikt/core/react/src/tabs/root/TabsRoot.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { Tabs } from "./Tabs";
+import { Tabs } from "./TabsRoot";
 
 const TestTabs = ({
   value,

@navikt/core/react/src/tabs/root/TabsRoot.tsx

@@ -1,57 +1,13 @@
 import React, { forwardRef } from "react";
-import { cl } from "../utils/helpers";
-import { TabsProvider } from "./Tabs.context";
-import type { TabsProps } from "./Tabs.types";
-import Tab, { type TabProps } from "./parts/tab/Tab";
-import TabList, { type TabListProps } from "./parts/tablist/TabList";
-import TabPanel, { type TabPanelProps } from "./parts/tabpanel/TabPanel";
+import { cl } from "../../utils/helpers";
+import type { TabsProps } from "../Tabs.types";
+import { TabsList, type TabsListProps } from "../list/TabsList";
+import { TabsPanel, type TabsPanelProps } from "../panel/TabsPanel";
+import { TabsTab, type TabsTabProps } from "../tab/TabsTab";
+import { TabsProvider } from "./TabsRoot.context";
 import { useTabs } from "./useTabs";
 
-interface TabsComponent extends React.ForwardRefExoticComponent<
-  TabsProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link TabProps}
-   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
-   */
-  Tab: typeof Tab;
-  /**
-   * @see 🏷️ {@link TabListProps}
-   */
-  List: typeof TabList;
-  /**
-   * @see 🏷️ {@link TabPanelProps}
-   */
-  Panel: typeof TabPanel;
-}
-
-/**
- * A component that displays a set of tabs that can be used to switch between different views.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tabs)
- * @see 🏷️ {@link TabsProps}
- *
- * @example
- * ```jsx
- * <Tabs defaultValue="logg">
- *   <Tabs.List>
- *     <Tabs.Tab value="logg" label="Logg" />
- *     <Tabs.Tab value="inbox" label="Inbox" />
- *     <Tabs.Tab value="sendt" label="Sendt" />
- *   </Tabs.List>
- *   <Tabs.Panel value="logg">
- *     Logg-tab
- *   </Tabs.Panel>
- *   <Tabs.Panel value="inbox">
- *     Inbox-tab
- *   </Tabs.Panel>
- *   <Tabs.Panel value="sendt">
- *     Sendt-tab
- *   </Tabs.Panel>
- * </Tabs>
- * ```
- */
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+const TabsRoot = forwardRef<HTMLDivElement, TabsProps>(
   (
     {
       className,
@@ -96,17 +52,49 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
       </TabsProvider>
     );
   },
-) as TabsComponent;
+);
 
-Tabs.Tab = Tab;
-Tabs.List = TabList;
-Tabs.Panel = TabPanel;
+/**
+ * A component that displays a set of tabs that can be used to switch between different views.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tabs)
+ * @see 🏷️ {@link TabsProps}
+ *
+ * @example
+ * ```jsx
+ * <Tabs defaultValue="logg">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="logg" label="Logg" />
+ *     <Tabs.Tab value="inbox" label="Inbox" />
+ *     <Tabs.Tab value="sendt" label="Sendt" />
+ *   </Tabs.List>
+ *   <Tabs.Panel value="logg">
+ *     Logg-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="inbox">
+ *     Inbox-tab
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="sendt">
+ *     Sendt-tab
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
+const Tabs = Object.assign(TabsRoot, {
+  /**
+   * @see 🏷️ {@link TabsTabProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Tab: TabsTab,
+  /**
+   * @see 🏷️ {@link TabsListProps}
+   */
+  List: TabsList,
+  /**
+   * @see 🏷️ {@link TabsPanelProps}
+   */
+  Panel: TabsPanel,
+});
 
-export default Tabs;
-export { Tab as TabsTab, TabList as TabsList, TabPanel as TabsPanel };
-export type {
-  TabsProps,
-  TabProps as TabsTabProps,
-  TabListProps as TabsListProps,
-  TabPanelProps as TabsPanelProps,
-};
+export { Tabs, TabsTab, TabsList, TabsPanel };
+export type { TabsProps, TabsTabProps, TabsListProps, TabsPanelProps };

@navikt/core/react/src/tabs/root/useTabs.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { useId } from "../utils-external";
-import { useControllableState } from "../utils/hooks";
-import type { TabsProps } from "./Tabs.types";
+import { useId } from "../../utils-external";
+import { useControllableState } from "../../utils/hooks";
+import type { TabsProps } from "../Tabs.types";
 
-export function useTabs({
+function useTabs({
   onChange,
   value,
   defaultValue = "",
@@ -45,3 +45,5 @@ function makeTabId(id: string, value: string) {
 function makeTabPanelId(id: string, value: string) {
   return `${id}--tabpanel-${value}`;
 }
+
+export { useTabs };

@navikt/core/react/src/tabs/scroll-button/TabsScrollButtonInternal.tsx

@@ -1,14 +1,18 @@
 import React from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { cl } from "../../../utils/helpers";
+import { cl } from "../../utils/helpers";
 
-interface ScrollButtonProps {
+interface TabsScrollButtonInternalProps {
   hidden: boolean;
   onClick: () => void;
   dir: "left" | "right";
 }
 
-function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
+function TabsScrollButtonInternal({
+  hidden,
+  onClick,
+  dir,
+}: TabsScrollButtonInternalProps) {
   return (
     <div
       className={cl("aksel-tabs__scroll-button", {
@@ -22,4 +26,5 @@ function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
   );
 }
 
-export default ScrollButton;
+export { TabsScrollButtonInternal };
+export type { TabsScrollButtonInternalProps };

@navikt/core/react/src/tabs/tab/TabsTab.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef } from "react";
-import { BodyShort } from "../../../typography";
-import type { OverridableComponent } from "../../../utils-external";
-import { cl } from "../../../utils/helpers";
-import { useTabsContext } from "../../Tabs.context";
+import { BodyShort } from "../../typography";
+import type { OverridableComponent } from "../../utils-external";
+import { cl } from "../../utils/helpers";
+import { useTabsContext } from "../root/TabsRoot.context";
 import { useTab } from "./useTab";
 
-export interface TabProps extends Omit<
+interface TabsTabProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   "children"
 > {
@@ -30,7 +30,7 @@ export interface TabProps extends Omit<
   id?: string;
 }
 
-export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
+const TabsTab: OverridableComponent<TabsTabProps, HTMLButtonElement> =
   forwardRef(
     (
       {
@@ -94,4 +94,5 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
     },
   );
 
-export default Tab;
+export { TabsTab };
+export type { TabsTabProps };

@navikt/core/react/src/tabs/tab/useTab.ts

@@ -1,7 +1,7 @@
-import { composeEventHandlers } from "../../../utils/helpers";
-import { useTabsContext } from "../../Tabs.context";
+import { composeEventHandlers } from "../../utils/helpers";
+import { useTabsContext } from "../root/TabsRoot.context";
 
-export interface UseTabProps {
+interface UseTabProps {
   id?: string;
   /**
    * If `true`, the `Tab` won't be toggleable
@@ -56,3 +56,4 @@ function useTab({
 }
 
 export { useTab };
+export type { UseTabProps };

@navikt/core/react/src/toggle-group/ToggleGroup.context.ts

@@ -1,23 +0,0 @@
-import { createContext as ReactCreateContext } from "react";
-import { createStrictContext } from "../utils/helpers";
-import type { ToggleGroupProps } from "./ToggleGroup.types";
-import type { useToggleGroup } from "./useToggleGroup";
-
-interface ToggleContextProps {
-  size: "medium" | "small" | "xsmall";
-}
-
-export const ToggleGroupContext = ReactCreateContext<ToggleContextProps | null>(
-  null,
-);
-type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> &
-  Pick<ToggleGroupProps, "size">;
-
-/* State context */
-export const {
-  Provider: ToggleGroupProvider,
-  useContext: useToggleGroupContext,
-} = createStrictContext<ToggleGroupProviderProps>({
-  name: "ToggleGroupContext",
-  errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
-});

@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx

@@ -1,6 +1,5 @@
-import type { Meta, StoryFn, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import React, { useState } from "react";
-import { expect, userEvent, within } from "storybook/test";
 import {
   EnvelopeClosedIcon,
   EnvelopeOpenIcon,
@@ -9,8 +8,8 @@ import {
 } from "@navikt/aksel-icons";
 import { VStack } from "../primitives/stack";
 import { renderStoriesForChromatic } from "../utils/renderStoriesForChromatic";
-import ToggleGroup from "./ToggleGroup";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
+import { ToggleGroup } from "./index";
 
 const meta: Meta<typeof ToggleGroup> = {
   title: "ds-react/ToggleGroup",
@@ -22,8 +21,6 @@ const meta: Meta<typeof ToggleGroup> = {
 
 export default meta;
 
-type Story = StoryObj<typeof ToggleGroup>;
-
 const Items = (icon?: boolean, both?: boolean) => {
   const hasLabel = both || !icon;
 
@@ -173,60 +170,6 @@ export const XSmall = () => {
   );
 };
 
-export const PlayControlled: Story = {
-  render: () => {
-    const [activeValue, setActiveValue] = useState("ny");
-
-    return (
-      <ToggleGroup value={activeValue} onChange={setActiveValue}>
-        {Items()}
-      </ToggleGroup>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const initialToggle = canvas.getByText("Ny").closest("button");
-
-    expect(initialToggle).toHaveAttribute("aria-checked", "true");
-    expect(initialToggle).toHaveAttribute("tabindex", "0");
-    initialToggle?.focus();
-    expect(initialToggle).toHaveFocus();
-
-    await userEvent.keyboard("{ArrowRight}");
-    const nextToggle = canvas.getByText("Leste").closest("button");
-    expect(nextToggle).toHaveFocus();
-    expect(nextToggle).toHaveAttribute("aria-checked", "false");
-    expect(nextToggle).toHaveAttribute("tabindex", "0");
-
-    expect(initialToggle).toHaveAttribute("aria-checked", "true");
-    expect(initialToggle).toHaveAttribute("tabindex", "-1");
-
-    await userEvent.keyboard("{Enter}");
-    expect(nextToggle).toHaveAttribute("aria-checked", "true");
-
-    await userEvent.keyboard("{ArrowLeft}");
-    await userEvent.keyboard("{ArrowLeft}");
-    const firstToggle = canvas.getByText("Uleste").closest("button");
-    expect(firstToggle).toHaveFocus();
-    expect(firstToggle).toHaveAttribute("aria-checked", "false");
-    expect(firstToggle).toHaveAttribute("tabindex", "0");
-
-    expect(nextToggle).toHaveAttribute("aria-checked", "true");
-    expect(nextToggle).toHaveAttribute("tabindex", "-1");
-  },
-};
-
-export const PlayUnControlled: Story = {
-  render: () => {
-    return (
-      <ToggleGroup defaultValue="ny" onChange={() => null}>
-        {Items()}
-      </ToggleGroup>
-    );
-  },
-  play: PlayControlled.play,
-};
-
 export const Chromatic = renderStoriesForChromatic({
   Label,
   Compositions,

@navikt/core/react/src/toggle-group/ToggleGroup.tests.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React, { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+import { ToggleGroup } from "./index";
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: "ds-react/ToggleGroup/Tests",
+  component: ToggleGroup,
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleGroup>;
+
+const Items = () => (
+  <>
+    <ToggleGroup.Item value="ulest" label="Uleste" />
+    <ToggleGroup.Item value="ny" label="Ny" />
+    <ToggleGroup.Item value="lest" label="Leste" />
+    <ToggleGroup.Item value="sendt" label="Sendt" />
+  </>
+);
+
+export const PlayControlled: Story = {
+  render: () => {
+    const [activeValue, setActiveValue] = useState("ny");
+
+    return (
+      <ToggleGroup value={activeValue} onChange={setActiveValue}>
+        <Items />
+      </ToggleGroup>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const initialToggle = canvas.getByRole("radio", { name: "Ny" });
+
+    expect(initialToggle).toHaveAttribute("aria-checked", "true");
+    expect(initialToggle).toHaveAttribute("tabindex", "0");
+    initialToggle.focus();
+    expect(initialToggle).toHaveFocus();
+
+    await userEvent.keyboard("{ArrowRight}");
+    const nextToggle = canvas.getByRole("radio", { name: "Leste" });
+    expect(nextToggle).toHaveFocus();
+    expect(nextToggle).toHaveAttribute("aria-checked", "false");
+    expect(nextToggle).toHaveAttribute("tabindex", "0");
+
+    expect(initialToggle).toHaveAttribute("aria-checked", "true");
+    expect(initialToggle).toHaveAttribute("tabindex", "-1");
+
+    await userEvent.keyboard("{Enter}");
+    expect(nextToggle).toHaveAttribute("aria-checked", "true");
+
+    await userEvent.keyboard("{ArrowLeft}");
+    await userEvent.keyboard("{ArrowLeft}");
+    const firstToggle = canvas.getByRole("radio", { name: "Uleste" });
+    expect(firstToggle).toHaveFocus();
+    expect(firstToggle).toHaveAttribute("aria-checked", "false");
+    expect(firstToggle).toHaveAttribute("tabindex", "0");
+
+    expect(nextToggle).toHaveAttribute("aria-checked", "true");
+    expect(nextToggle).toHaveAttribute("tabindex", "-1");
+  },
+};
+
+export const PlayUnControlled: Story = {
+  render: () => (
+    <ToggleGroup defaultValue="ny" onChange={() => null}>
+      <Items />
+    </ToggleGroup>
+  ),
+  play: PlayControlled.play,
+};

@navikt/core/react/src/toggle-group/ToggleGroup.types.ts

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import type { AkselColor } from "../types";
 
-export interface ToggleGroupProps extends Omit<
+interface ToggleGroupProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   "onChange" | "dir"
 > {
@@ -49,3 +49,5 @@ export interface ToggleGroupProps extends Omit<
    */
   fill?: boolean;
 }
+
+export type { ToggleGroupProps };

@navikt/core/react/src/toggle-group/index.ts

@@ -1,3 +1,6 @@
 "use client";
-export { default as ToggleGroup, ToggleGroupItem } from "./ToggleGroup";
-export type { ToggleGroupProps, ToggleGroupItemProps } from "./ToggleGroup";
+export { ToggleGroup, ToggleGroupItem } from "./root/ToggleGroupRoot";
+export type {
+  ToggleGroupProps,
+  ToggleGroupItemProps,
+} from "./root/ToggleGroupRoot";

@navikt/core/react/src/toggle-group/item/ToggleGroupItem.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography/BodyShort";
 import { cl } from "../../utils/helpers";
-import { useToggleGroupContext } from "../ToggleGroup.context";
+import { useToggleGroupContext } from "../root/ToggleGroupRoot.context";
 import { useToggleItem } from "./useToggleItem";
 
 type BaseProps = Omit<
@@ -47,10 +47,10 @@ type IconProps = {
   icon: React.ReactNode;
 };
 
-export type ToggleGroupItemProps = BaseProps &
+type ToggleGroupItemProps = BaseProps &
   (ChildrenProps | LabelProps | IconProps);
 
-const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   (
     {
       className,
@@ -101,4 +101,5 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   },
 );
 
-export default ToggleItem;
+export { ToggleGroupItem };
+export type { ToggleGroupItemProps };

@navikt/core/react/src/toggle-group/item/useToggleItem.ts

@@ -1,11 +1,11 @@
 import { useCallback } from "react";
 import { composeEventHandlers } from "../../utils/helpers";
 import { rovingFocus } from "../../utils/helpers/roving-focus";
-import { useToggleGroupContext } from "../ToggleGroup.context";
+import { useToggleGroupContext } from "../root/ToggleGroupRoot.context";
 
 const TOGGLE_ITEM_SELECTOR = "[data-aksel-toggle-item]:not([data-disabled])";
 
-export interface UseToggleItemProps {
+interface UseToggleItemProps {
   /**
    * If `true`, the `ToggleItem` won't be toggleable
    * @default false
@@ -17,7 +17,7 @@ export interface UseToggleItemProps {
   value: string;
 }
 
-export function useToggleItem<P extends UseToggleItemProps>({
+function useToggleItem<P extends UseToggleItemProps>({
   value,
   disabled = false,
   onFocus: _onFocus,
@@ -92,3 +92,6 @@ export function useToggleItem<P extends UseToggleItemProps>({
     "data-disabled": disabled ? "" : undefined,
   };
 }
+
+export { useToggleItem };
+export type { UseToggleItemProps };

@navikt/core/react/src/toggle-group/root/ToggleGroupRoot.context.ts

@@ -0,0 +1,21 @@
+import { createContext as ReactCreateContext } from "react";
+import { createStrictContext } from "../../utils/helpers";
+import type { ToggleGroupProps } from "../ToggleGroup.types";
+import type { useToggleGroup } from "./useToggleGroup";
+
+interface ToggleContextProps {
+  size: "medium" | "small" | "xsmall";
+}
+
+const ToggleGroupContext = ReactCreateContext<ToggleContextProps | null>(null);
+type ToggleGroupProviderProps = ReturnType<typeof useToggleGroup> &
+  Pick<ToggleGroupProps, "size">;
+
+/* State context */
+const { Provider: ToggleGroupProvider, useContext: useToggleGroupContext } =
+  createStrictContext<ToggleGroupProviderProps>({
+    name: "ToggleGroupContext",
+    errorMessage: "<ToggleGroup.Item> needs to be wrapped within <ToggleGroup>",
+  });
+
+export { ToggleGroupContext, ToggleGroupProvider, useToggleGroupContext };

@navikt/core/react/src/toggle-group/root/ToggleGroupRoot.test.tsx

@@ -2,7 +2,7 @@ import { act, fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { ToggleGroup } from "./ToggleGroup";
+import { ToggleGroup } from "./ToggleGroupRoot";
 
 const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
   <ToggleGroup value={value} onChange={onChange} defaultValue={defaultValue}>

@navikt/core/react/src/toggle-group/root/ToggleGroupRoot.tsx

@@ -1,38 +1,17 @@
 import React, { forwardRef } from "react";
-import type { AkselColor } from "../types";
-import { Label } from "../typography";
-import { useId } from "../utils-external";
-import { cl } from "../utils/helpers";
-import { ToggleGroupProvider } from "./ToggleGroup.context";
-import type { ToggleGroupProps } from "./ToggleGroup.types";
-import ToggleItem, { type ToggleGroupItemProps } from "./parts/ToggleItem";
+import type { AkselColor } from "../../types";
+import { Label } from "../../typography";
+import { useId } from "../../utils-external";
+import { cl } from "../../utils/helpers";
+import type { ToggleGroupProps } from "../ToggleGroup.types";
+import {
+  ToggleGroupItem,
+  type ToggleGroupItemProps,
+} from "../item/ToggleGroupItem";
+import { ToggleGroupProvider } from "./ToggleGroupRoot.context";
 import { useToggleGroup } from "./useToggleGroup";
 
-interface ToggleGroupComponent extends React.ForwardRefExoticComponent<
-  ToggleGroupProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link ToggleGroupItemProps}
-   */
-  Item: typeof ToggleItem;
-}
-
-/**
- * A component that displays a group of toggle buttons.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/toggle-group)
- * @see 🏷️ {@link ToggleGroupProps}
- *
- * @example
- * ```jsx
- * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
- *   <ToggleGroup.Item value="ulest" label="Ulest" />
- *   <ToggleGroup.Item value="lest" label="Leste" />
- *   <ToggleGroup.Item value="sendt" label="Sendt" />
- * </ToggleGroup>
- * ```
- */
-export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+const ToggleGroupRoot = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {
       className,
@@ -107,7 +86,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       </ToggleGroupProvider>
     );
   },
-) as ToggleGroupComponent;
+);
 
 function variantToColor(
   variant?: ToggleGroupProps["variant"],
@@ -122,8 +101,27 @@ function variantToColor(
   }
 }
 
-ToggleGroup.Item = ToggleItem;
+/**
+ * A component that displays a group of toggle buttons.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/toggle-group)
+ * @see 🏷️ {@link ToggleGroupProps}
+ *
+ * @example
+ * ```jsx
+ * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
+ *   <ToggleGroup.Item value="ulest" label="Ulest" />
+ *   <ToggleGroup.Item value="lest" label="Leste" />
+ *   <ToggleGroup.Item value="sendt" label="Sendt" />
+ * </ToggleGroup>
+ * ```
+ */
+const ToggleGroup = Object.assign(ToggleGroupRoot, {
+  /**
+   * @see 🏷️ {@link ToggleGroupItemProps}
+   */
+  Item: ToggleGroupItem,
+});
 
-export default ToggleGroup;
-export { ToggleItem as ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem };
 export type { ToggleGroupProps, ToggleGroupItemProps };

@navikt/core/react/src/toggle-group/root/useToggleGroup.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { useControllableState } from "../utils/hooks";
-import type { ToggleGroupProps } from "./ToggleGroup.types";
+import { useControllableState } from "../../utils/hooks";
+import type { ToggleGroupProps } from "../ToggleGroup.types";
 
-export function useToggleGroup({
+function useToggleGroup({
   onChange,
   value,
   defaultValue = "",
@@ -28,3 +28,5 @@ export function useToggleGroup({
     setFocusedValue,
   };
 }
+
+export { useToggleGroup };