@navikt/ds-react 8.2.0 → 8.2.1

package/src/dialog/index.ts

@@ -1,19 +1,23 @@
 "use client";
-export { default as Dialog } from "./root/DialogRoot";
-export type { DialogProps } from "./root/DialogRoot";
-export { DialogTrigger } from "./trigger/DialogTrigger";
-export type { DialogTriggerProps } from "./trigger/DialogTrigger";
-export { DialogPopup } from "./popup/DialogPopup";
-export type { DialogPopupProps } from "./popup/DialogPopup";
-export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger";
-export type { DialogCloseTriggerProps } from "./close-trigger/DialogCloseTrigger";
-export { DialogHeader } from "./header/DialogHeader";
-export type { DialogHeaderProps } from "./header/DialogHeader";
-export { DialogFooter } from "./footer/DialogFooter";
-export type { DialogFooterProps } from "./footer/DialogFooter";
-export { DialogTitle } from "./title/DialogTitle";
-export type { DialogTitleProps } from "./title/DialogTitle";
-export { DialogDescription } from "./description/DialogDescription";
-export type { DialogDescriptionProps } from "./description/DialogDescription";
-export { DialogBody } from "./body/DialogBody";
-export type { DialogBodyProps } from "./body/DialogBody";
+export {
+  default as Dialog,
+  DialogTrigger,
+  DialogPopup,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+} from "./root/DialogRoot";
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogPopupProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+} from "./root/DialogRoot";

package/src/dialog/root/DialogRoot.tsx

@@ -5,14 +5,20 @@ import {
   useEventCallback,
   useTransitionStatus,
 } from "../../utils/hooks";
-import { DialogBody } from "../body/DialogBody";
-import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
-import { DialogDescription } from "../description/DialogDescription";
-import { DialogFooter } from "../footer/DialogFooter";
-import { DialogHeader } from "../header/DialogHeader";
-import { DialogPopup } from "../popup/DialogPopup";
-import { DialogTitle } from "../title/DialogTitle";
-import { DialogTrigger } from "../trigger/DialogTrigger";
+import { DialogBody, DialogBodyProps } from "../body/DialogBody";
+import {
+  DialogCloseTrigger,
+  DialogCloseTriggerProps,
+} from "../close-trigger/DialogCloseTrigger";
+import {
+  DialogDescription,
+  DialogDescriptionProps,
+} from "../description/DialogDescription";
+import { DialogFooter, DialogFooterProps } from "../footer/DialogFooter";
+import { DialogHeader, DialogHeaderProps } from "../header/DialogHeader";
+import { DialogPopup, DialogPopupProps } from "../popup/DialogPopup";
+import { DialogTitle, DialogTitleProps } from "../title/DialogTitle";
+import { DialogTrigger, DialogTriggerProps } from "../trigger/DialogTrigger";
 import { DialogContextProvider, useDialogContext } from "./DialogRoot.context";
 
 interface DialogProps {
@@ -56,6 +62,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   Trigger: typeof DialogTrigger;
+
   /**
    * @see 🏷️ {@link DialogCloseTriggerProps}
    * @example
@@ -70,6 +77,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   CloseTrigger: typeof DialogCloseTrigger;
+
   /**
    * @see 🏷️ {@link DialogPopupProps}
    * @example
@@ -295,4 +303,24 @@ Dialog.Footer = DialogFooter;
 Dialog.Popup = DialogPopup;
 
 export default Dialog;
-export type { DialogProps };
+export {
+  DialogTrigger,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogPopup,
+};
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogPopupProps,
+};

package/src/form/file-upload/FileUpload.tsx

@@ -14,10 +14,9 @@ interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   translations?: ComponentTranslation<"FileUpload">;
 }
 
-interface FileUploadComponent
-  extends React.ForwardRefExoticComponent<
-    FileUploadProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface FileUploadComponent extends React.ForwardRefExoticComponent<
+  FileUploadProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * Framed area to drag-n-drop files, upload files with button-click or copy-paste.
    * @example
@@ -64,7 +63,7 @@ interface FileUploadComponent
    * Multiple items can be semantically grouped as a list.
    * ```jsx
    * <FileUpload>
-   *   <VStack gap="4" as="ul">
+   *   <VStack gap="space-16" as="ul">
    *     <FileUpload.Item as="li" file={file} />
    *     <FileUpload.Item as="li" file={file2} />
    *     <FileUpload.Item as="li" file={file3} status="uploading" />
@@ -117,7 +116,7 @@ interface FileUploadComponent
  * @example
  * Items
  * ```jsx
- * <VStack gap="4" as="ul">
+ * <VStack gap="space-16" as="ul">
  *   <FileUpload.Item as="li" file={myFile} />
  *   <FileUpload.Item as="li" file={mySecondFile} />
  * </VStack>

package/src/form/search/Search.tsx

@@ -18,6 +18,11 @@ import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
 
+export type SearchNativeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "type"
+>;
+
 export type SearchClearEvent =
   | {
       trigger: "Click";
@@ -26,8 +31,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
+  extends Omit<FormFieldProps, "readOnly">, SearchNativeProps {
   children?: React.ReactNode;
   /**
    * Search label.
@@ -82,10 +86,9 @@ export interface SearchProps
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface SearchComponent
-  extends React.ForwardRefExoticComponent<
-    SearchProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface SearchComponent extends React.ForwardRefExoticComponent<
+  SearchProps & React.RefAttributes<HTMLDivElement>
+> {
   Button: SearchButtonType;
 }
 

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Theme } from "../theme/Theme";
-import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -15,38 +14,32 @@ import InternalHeaderUserButton, {
   InternalHeaderUserButtonProps,
 } from "./InternalHeaderUserButton";
 
-export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 
-interface InternalHeaderComponent
-  extends React.ForwardRefExoticComponent<
-    InternalHeaderProps & React.RefAttributes<HTMLElement>
-  > {
+interface InternalHeaderComponent extends React.ForwardRefExoticComponent<
+  InternalHeaderProps & React.RefAttributes<HTMLElement>
+> {
   /**
    * @see 🏷️ {@link InternalHeaderTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Title: OverridableComponent<InternalHeaderTitleProps, HTMLAnchorElement>;
+  Title: typeof InternalHeaderTitle;
   /**
    * @see 🏷️ {@link InternalHeaderUserProps}
    */
-  User: React.ForwardRefExoticComponent<
-    InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
-  >;
+  User: typeof InternalHeaderUser;
   /**
    * @see 🏷️ {@link InternalHeaderButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Button: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
+  Button: typeof InternalHeaderButton;
   /**
    * @see 🏷️ {@link InternalHeaderUserButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  UserButton: OverridableComponent<
-    InternalHeaderUserButtonProps,
-    HTMLButtonElement
-  >;
+  UserButton: typeof InternalHeaderUserButton;
 }
 
 /**
@@ -98,3 +91,16 @@ InternalHeader.Button = InternalHeaderButton;
 InternalHeader.UserButton = InternalHeaderUserButton;
 
 export default InternalHeader;
+export {
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderButton,
+  InternalHeaderUserButton,
+};
+export type {
+  InternalHeaderProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderButtonProps,
+  InternalHeaderUserButtonProps,
+};

package/src/internal-header/index.ts

@@ -1,21 +1,15 @@
 "use client";
 export {
   default as InternalHeader,
-  type InternalHeaderProps,
+  InternalHeaderButton,
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderUserButton,
+} from "./InternalHeader";
+export type {
+  InternalHeaderProps,
+  InternalHeaderButtonProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderUserButtonProps,
 } from "./InternalHeader";
-export {
-  default as InternalHeaderButton,
-  type InternalHeaderButtonProps,
-} from "./InternalHeaderButton";
-export {
-  default as InternalHeaderTitle,
-  type InternalHeaderTitleProps,
-} from "./InternalHeaderTitle";
-export {
-  default as InternalHeaderUser,
-  type InternalHeaderUserProps,
-} from "./InternalHeaderUser";
-export {
-  default as InternalHeaderUserButton,
-  type InternalHeaderUserButtonProps,
-} from "./InternalHeaderUserButton";

package/src/layout/bleed/Bleed.tsx

@@ -61,7 +61,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>

package/src/layout/responsive/Responsive.tsx

@@ -65,14 +65,14 @@ const Responsive = forwardRef<
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide above="md" asChild>
  *      // Only visible below "md"
@@ -90,14 +90,14 @@ export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show above="md" asChild>
  *      // Only visible above "md"

package/src/layout/stack/HStack.tsx

@@ -13,14 +13,14 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>
  *
  * @example
  * // Responsive gap
- * <HStack gap={{xs: "2", md: "6"}}>
+ * <HStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>

package/src/layout/stack/Spacer.tsx

@@ -6,7 +6,7 @@ import React from "react";
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <Spacer />
  *  <MyComponent />

package/src/layout/stack/VStack.tsx

@@ -14,14 +14,14 @@ export type VStackProps = PrimitiveAsChildProps &
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <VStack gap="8">
+ * <VStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>
  *
  * @example
  * // Responsive gap
- * <VStack gap={{xs: "2", md: "6"}}>
+ * <VStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>

package/src/link-panel/LinkPanel.tsx

@@ -9,8 +9,7 @@ import {
 } from "./LinkPanelDescription";
 import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 
-export interface LinkPanelProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkPanelProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Panel content
    */
@@ -22,10 +21,12 @@ export interface LinkPanelProps
   border?: boolean;
 }
 
-interface LinkPanelComponentType
-  extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
+interface LinkPanelComponentType extends OverridableComponent<
+  LinkPanelProps,
+  HTMLAnchorElement
+> {
   /**
-   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   * @see 🏷️ {@link LinkPanelTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
   Title: OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;

package/src/list/List.tsx

@@ -3,13 +3,11 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./List.types";
 
-export interface ListComponent
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ListComponent extends React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ListItemProps}
    */
@@ -78,3 +76,5 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 List.Item = ListItem;
 
 export default List;
+export { ListItem };
+export type { ListProps, ListItemProps };

package/src/list/index.ts

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

package/src/overlays/action-menu/ActionMenu.tsx

@@ -52,7 +52,7 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Trigger>
-   *     <button>Open Menu</button>
+   *   <button>Open Menu</button>
    * </ActionMenu.Trigger>
    * ```
    */
@@ -62,12 +62,12 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Item>
-   *       Item 1
-   *     </ActionMenu.Item>
-   *     <ActionMenu.Item>
-   *       Item 2
-   *     </ActionMenu.Item>
+   *   <ActionMenu.Item>
+   *     Item 1
+   *   </ActionMenu.Item>
+   *   <ActionMenu.Item>
+   *     Item 2
+   *   </ActionMenu.Item>
    * </ActionMenu.Content>
    * ```
    */
@@ -81,22 +81,22 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Group label="Group 1">
-   *         <ActionMenu.Item>
-   *           Item 1
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item>
-   *           Item 2
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
-   *     <ActionMenu.Group label="Group 2">
-   *         <ActionMenu.Item>
-   *           Item 3
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item>
-   *           Item 4
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
+   *   <ActionMenu.Group label="Group 1">
+   *     <ActionMenu.Item>
+   *       Item 1
+   *     </ActionMenu.Item>
+   *     <ActionMenu.Item>
+   *       Item 2
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
+   *   <ActionMenu.Group label="Group 2">
+   *     <ActionMenu.Item>
+   *       Item 3
+   *     </ActionMenu.Item>
+   *     <ActionMenu.Item>
+   *       Item 4
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
    * </ActionMenu.Content>
    * ```
    */
@@ -107,10 +107,10 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     <ActionMenu.Label>
-   *         Label
-   *     </ActionMenu.Label>
-   *     <ActionMenu.Divider />
+   *   <ActionMenu.Label>
+   *     Label
+   *   </ActionMenu.Label>
+   *   <ActionMenu.Divider />
    * </ActionMenu.Content
    * ```
    */
@@ -121,26 +121,26 @@ interface ActionMenuComponent extends React.FC<ActionMenuProps> {
    * @example
    * ```jsx
    * <ActionMenu.Content>
-   *     // Grouped
-   *     <ActionMenu.Group label="Group 1">
-   *         <ActionMenu.Item onSelect={navigate}>
-   *           Item 1
-   *         </ActionMenu.Item>
-   *         <ActionMenu.Item onSelect={navigate}>
-   *           Item 2
-   *         </ActionMenu.Item>
-   *     </ActionMenu.Group>
-   *     <ActionMenu.Divider />
-   *     // Standalone
-   *     <ActionMenu.Item onSelect={updateState}>
-   *        Item 3
+   *   // Grouped
+   *   <ActionMenu.Group label="Group 1">
+   *     <ActionMenu.Item onSelect={navigate}>
+   *       Item 1
    *     </ActionMenu.Item>
+   *     <ActionMenu.Item onSelect={navigate}>
+   *       Item 2
+   *     </ActionMenu.Item>
+   *   </ActionMenu.Group>
+   *   <ActionMenu.Divider />
+   *   // Standalone
+   *   <ActionMenu.Item onSelect={updateState}>
+   *      Item 3
+   *   </ActionMenu.Item>
    * </ActionMenu.Content>
    * ```
    * @example As link
    * ```jsx
    * <ActionMenu.Item as="a" href="#">
-   *     Item
+   *   Item
    * </ActionMenu.Item>
    * ```
    */
@@ -296,7 +296,7 @@ const ActionMenuRoot = ({
  *       Item 2
  *     </ActionMenu.Item>
  *   </ActionMenu.Content>
- * <ActionMenu>
+ * </ActionMenu>
  * ```
  */
 export const ActionMenu = ActionMenuRoot as ActionMenuComponent;
@@ -304,8 +304,7 @@ export const ActionMenu = ActionMenuRoot as ActionMenuComponent;
 /* -------------------------------------------------------------------------- */
 /*                             ActionMenuTrigger                              */
 /* -------------------------------------------------------------------------- */
-interface ActionMenuTriggerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ActionMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactElement;
 }
 
@@ -351,8 +350,10 @@ export const ActionMenuTrigger = forwardRef<
 /* -------------------------------------------------------------------------- */
 /*                             ActionMenuContent                              */
 /* -------------------------------------------------------------------------- */
-interface ActionMenuContentProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+interface ActionMenuContentProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "id"
+> {
   children?: React.ReactNode;
   align?: "start" | "end";
 }
@@ -606,8 +607,10 @@ type MenuCheckboxItemProps = React.ComponentPropsWithoutRef<
   typeof Menu.CheckboxItem
 >;
 
-interface ActionMenuCheckboxItemProps
-  extends Omit<MenuCheckboxItemProps, "asChild"> {
+interface ActionMenuCheckboxItemProps extends Omit<
+  MenuCheckboxItemProps,
+  "asChild"
+> {
   children: React.ReactNode;
   /**
    * Shows connected shortcut-keys for the item.
@@ -890,8 +893,10 @@ type ActionMenuSubTriggerElement = React.ElementRef<typeof Menu.SubTrigger>;
 type MenuSubTriggerProps = React.ComponentPropsWithoutRef<
   typeof Menu.SubTrigger
 >;
-interface ActionMenuSubTriggerProps
-  extends Omit<MenuSubTriggerProps, "asChild"> {
+interface ActionMenuSubTriggerProps extends Omit<
+  MenuSubTriggerProps,
+  "asChild"
+> {
   icon?: React.ReactNode;
   /**
    * Position of icon.
@@ -947,8 +952,7 @@ export const ActionMenuSubTrigger = forwardRef<
 /* -------------------------------------------------------------------------- */
 type ActionMenuSubContentElement = React.ElementRef<typeof Menu.Content>;
 
-interface ActionMenuSubContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ActionMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/panel/Panel.tsx

@@ -23,8 +23,8 @@ export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
  * @deprecated
  * Use Box with padding and border instead
  * ```
- * <Box padding="4" borderRadius="2" />
- * <Box padding="4" borderWidth="1" borderRadius="2" />
+ * <Box padding="space-16" borderRadius="2" />
+ * <Box padding="space-16" borderWidth="1" borderRadius="2" />
  * ```
  * Component will be removed in a future major release
  */

package/src/stepper/Stepper.tsx

@@ -3,7 +3,7 @@ import { cl } from "../utils/helpers";
 import Step, { StepperStepProps } from "./Step";
 import { StepperContextProvider } from "./context";
 
-export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
    * `<Stepper.Step />` elements.
    */
@@ -33,10 +33,9 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   interactive?: boolean;
 }
 
-interface StepperComponent
-  extends React.ForwardRefExoticComponent<
-    StepperProps & React.RefAttributes<HTMLOListElement>
-  > {
+interface StepperComponent extends React.ForwardRefExoticComponent<
+  StepperProps & React.RefAttributes<HTMLOListElement>
+> {
   /**
    * @see 🏷️ {@link StepperStepProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
@@ -128,3 +127,5 @@ export const Stepper: StepperComponent = forwardRef<
 Stepper.Step = Step;
 
 export default Stepper;
+export { Step as StepperStep };
+export type { StepperProps, StepperStepProps };