diff --git a/packages/react/src/components/Box/Box.module.css b/packages/css/box.css
similarity index 64%
rename from packages/react/src/components/Box/Box.module.css
rename to packages/css/box.css
index f0f4275b6a..9744b8d5e7 100644
--- a/packages/react/src/components/Box/Box.module.css
+++ b/packages/css/box.css
@@ -1,73 +1,73 @@
 @layer fds.box {
-  .xsmallShadow {
+  .fds-box--xsmall-shadow {
     box-shadow: var(--fds-shadow-xsmall);
   }
 
-  .smallShadow {
+  .fds-box--small-shadow {
     box-shadow: var(--fds-shadow-small);
   }
 
-  .mediumShadow {
+  .fds-box--medium-shadow {
     box-shadow: var(--fds-shadow-medium);
   }
 
-  .largeShadow {
+  .fds-box--large-shadow {
     box-shadow: var(--fds-shadow-large);
   }
 
-  .xlargeShadow {
+  .fds-box--xlarge-shadow {
     box-shadow: var(--fds-shadow-xlarge);
   }
 
-  .defaultBorderColor {
+  .fds-box--default-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-default);
   }
 
-  .subtleBorderColor {
+  .fds-box--subtle-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-subtle);
   }
 
-  .strongBorderColor {
+  .fds-box--strong-border-color {
     border: 1px solid var(--fds-semantic-border-neutral-strong);
   }
 
-  .smallBorderRadius {
+  .fds-box--small-border-radius {
     border-radius: var(--fds-border_radius-small);
   }
 
-  .mediumBorderRadius {
+  .fds-box--medium-border-radius {
     border-radius: var(--fds-border_radius-medium);
   }
 
-  .largeBorderRadius {
+  .fds-box--large-border-radius {
     border-radius: var(--fds-border_radius-large);
   }
 
-  .xlargeBorderRadius {
+  .fds-box--xlarge-border-radius {
     border-radius: var(--fds-border_radius-xlarge);
   }
 
-  .xxlargeBorderRadius {
+  .fds-box--xxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxlarge);
   }
 
-  .xxxlargeBorderRadius {
+  .fds-box--xxxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxxlarge);
   }
 
-  .xxxxlargeBorderRadius {
+  .fds-box--xxxxlarge-border-radius {
     border-radius: var(--fds-border_radius-xxxxlarge);
   }
 
-  .fullBorderRadius {
+  .fds-box--full-border-radius {
     border-radius: var(--fds-border_radius-full);
   }
 
-  .defaultBackground {
+  .fds-box--default-background {
     background-color: var(--fds-semantic-background-default);
   }
 
-  .subtleBackground {
+  .fds-box--subtle-background {
     background-color: var(--fds-semantic-background-subtle);
   }
 }
diff --git a/packages/css/index.css b/packages/css/index.css
index 884fb499e3..7d4edf9b40 100644
--- a/packages/css/index.css
+++ b/packages/css/index.css
@@ -10,3 +10,4 @@
 @import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
+@import url('./box.css');
diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
index 7961d0fb92..178755ee34 100644
--- a/packages/css/react-css-modules.css
+++ b/packages/css/react-css-modules.css
@@ -2329,80 +2329,6 @@
   }
 }
 
-@layer fds.box {
-  .fds-box-xsmallShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-xsmall);
-  }
-
-  .fds-box-smallShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-small);
-  }
-
-  .fds-box-mediumShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-medium);
-  }
-
-  .fds-box-largeShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-large);
-  }
-
-  .fds-box-xlargeShadow-7eee64b7 {
-    box-shadow: var(--fds-shadow-xlarge);
-  }
-
-  .fds-box-defaultBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-default);
-  }
-
-  .fds-box-subtleBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-subtle);
-  }
-
-  .fds-box-strongBorderColor-7eee64b7 {
-    border: 1px solid var(--fds-semantic-border-neutral-strong);
-  }
-
-  .fds-box-smallBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-small);
-  }
-
-  .fds-box-mediumBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-medium);
-  }
-
-  .fds-box-largeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-large);
-  }
-
-  .fds-box-xlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xlarge);
-  }
-
-  .fds-box-xxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxlarge);
-  }
-
-  .fds-box-xxxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxxlarge);
-  }
-
-  .fds-box-xxxxlargeBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-xxxxlarge);
-  }
-
-  .fds-box-fullBorderRadius-7eee64b7 {
-    border-radius: var(--fds-border_radius-full);
-  }
-
-  .fds-box-defaultBackground-7eee64b7 {
-    background-color: var(--fds-semantic-background-default);
-  }
-
-  .fds-box-subtleBackground-7eee64b7 {
-    background-color: var(--fds-semantic-background-subtle);
-  }
-}
-
 @layer fds.card {
   .fds-card-media-a01cb08f {
     width: auto;
diff --git a/packages/react/src/components/Box/Box.test.tsx b/packages/react/src/components/Box/Box.test.tsx
index 430c901473..26ed30416d 100644
--- a/packages/react/src/components/Box/Box.test.tsx
+++ b/packages/react/src/components/Box/Box.test.tsx
@@ -28,21 +28,21 @@ describe('Box', () => {
     render({ shadow: 'xsmall' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('xsmallShadow');
+    expect(box.classList).toContain('fds-box--xsmall-shadow');
   });
 
   it('should render a div with correct classname when borderColor is subtle', () => {
     render({ borderColor: 'subtle' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('subtleBorderColor');
+    expect(box.classList).toContain('fds-box--subtle-border-color');
   });
 
   it('should render a div with correct classname when borderRadius is small', () => {
     render({ borderRadius: 'small' });
     const box = screen.getByTitle('box');
 
-    expect(box.classList).toContain('smallBorderRadius');
+    expect(box.classList).toContain('fds-box--small-border-radius');
   });
 
   it('should render as a button when we use asChild', () => {
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
index 15b8dc5b03..f1aa723a62 100644
--- a/packages/react/src/components/Box/Box.tsx
+++ b/packages/react/src/components/Box/Box.tsx
@@ -1,10 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
-import classes from './Box.module.css';
-
 export type BoxProps = {
   /**
    * Shadow size of the box
@@ -61,10 +59,10 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>(
       <Component
         ref={ref}
         className={cl(
-          shadow && classes[shadow + 'Shadow'],
-          borderRadius && classes[borderRadius + 'BorderRadius'],
-          borderColor && classes[borderColor + 'BorderColor'],
-          classes[background + 'Background'],
+          shadow && `fds-box--${shadow}-shadow`,
+          borderColor && `fds-box--${borderColor}-border-color`,
+          borderRadius && `fds-box--${borderRadius}-border-radius`,
+          `fds-box--${background}-background`,
           className,
         )}
         {...rest}
diff --git a/packages/react/src/components/Chip/Removable/Removable.tsx b/packages/react/src/components/Chip/Removable/Removable.tsx
index 1eeb6787e0..f36be64cb9 100644
--- a/packages/react/src/components/Chip/Removable/Removable.tsx
+++ b/packages/react/src/components/Chip/Removable/Removable.tsx
@@ -35,7 +35,7 @@ export const RemovableChip = forwardRef<HTMLButtonElement, RemovableChipProps>(
         <Paragraph
           asChild
           size={group?.size || size}
-          short
+          variant='short'
         >
           <span className={classes.label}>
             <span>{children}</span>
diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
index adafc41d14..2a6a546997 100644
--- a/packages/react/src/components/Chip/Toggle/Toggle.tsx
+++ b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -55,7 +55,7 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
         <Paragraph
           asChild
           size={group?.size || size}
-          short
+          variant='short'
         >
           <span className={classes.label}>
             {shouldDisplayCheckmark && (
diff --git a/packages/react/src/components/Typography/Ingress/Ingress.tsx b/packages/react/src/components/Typography/Ingress/Ingress.tsx
index 2910fea9d4..731363001d 100644
--- a/packages/react/src/components/Typography/Ingress/Ingress.tsx
+++ b/packages/react/src/components/Typography/Ingress/Ingress.tsx
@@ -3,8 +3,6 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../../types/OverridableComponent';
-
 export type IngressProps = {
   /** Changes text sizing
    * @default 'medium'
@@ -20,29 +18,25 @@ export type IngressProps = {
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `Ingress` to display text as ingress. */
-export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
-  forwardRef(
-    (
-      { className, size = 'medium', spacing, as = 'p', asChild, ...rest },
-      ref,
-    ) => {
-      const Component = asChild ? Slot : as;
+export const Ingress = forwardRef<HTMLParagraphElement, IngressProps>(
+  ({ className, size = 'medium', spacing, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'p';
 
-      return (
-        <Component
-          ref={ref}
-          className={cl(
-            `fds-ingress`,
-            `fds-ingress--${size}`,
-            {
-              'fds-ingress--spacing': !!spacing,
-            },
-            className,
-          )}
-          {...rest}
-        />
-      );
-    },
-  );
+    return (
+      <Component
+        ref={ref}
+        className={cl(
+          `fds-ingress`,
+          `fds-ingress--${size}`,
+          {
+            'fds-ingress--spacing': !!spacing,
+          },
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
 
 Ingress.displayName = 'Ingress';
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx
index 060d392bef..7c5d3b74aa 100644
--- a/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx
+++ b/packages/react/src/components/Typography/Paragraph/Paragraph.stories.tsx
@@ -16,8 +16,6 @@ export const Preview: Story = {
     children:
       'Personvernerklæringen gir informasjon om hvilke personopplysninger vi behandler, hvordan disse blir behandlet og hvilke rettigheter du har.',
     spacing: false,
-    short: false,
-    long: false,
     size: 'medium',
   },
 };
diff --git a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
index b154cd3009..381f025570 100644
--- a/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
+++ b/packages/react/src/components/Typography/Paragraph/Paragraph.tsx
@@ -3,8 +3,6 @@ import { forwardRef } from 'react';
 import cl from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../../types/OverridableComponent';
-
 import classes from './Paragraph.module.css';
 
 export type ParagraphProps = {
@@ -22,23 +20,9 @@ export type ParagraphProps = {
 } & HTMLAttributes<HTMLParagraphElement>;
 
 /** Use `Paragraph` to display text with paragraph text styles. */
-export const Paragraph: OverridableComponent<
-  ParagraphProps,
-  HTMLParagraphElement
-> = forwardRef(
-  (
-    {
-      className,
-      size = 'medium',
-      spacing,
-      as = 'p',
-      asChild,
-      variant,
-      ...rest
-    },
-    ref,
-  ) => {
-    const Component = asChild ? Slot : as;
+export const Paragraph = forwardRef<HTMLParagraphElement, ParagraphProps>(
+  ({ className, size = 'medium', spacing, asChild, variant, ...rest }, ref) => {
+    const Component = asChild ? Slot : 'p';
 
     return (
       <Component
diff --git a/packages/react/src/components/Typography/Typography.stories.tsx b/packages/react/src/components/Typography/Typography.stories.tsx
index ffb42a4304..a65471cf10 100644
--- a/packages/react/src/components/Typography/Typography.stories.tsx
+++ b/packages/react/src/components/Typography/Typography.stories.tsx
@@ -50,7 +50,7 @@ export const EksempelTekst: StoryFn = () => (
     </Heading>
 
     <Paragraph
-      short
+      variant='short'
       spacing
     >
       Når du skal signere meldingen vil du motta en signeringsoppgave i
@@ -83,7 +83,7 @@ export const EksempelTekst: StoryFn = () => (
     </Heading>
 
     <Paragraph
-      short
+      variant='short'
       spacing
     >
       Personvernerklæringen gir informasjon om hvilke personopplysninger vi
diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
index 4e713d6c89..a4fe10ce50 100644
--- a/packages/react/src/components/form/Fieldset/Fieldset.tsx
+++ b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -90,8 +90,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           {description && (
             <Paragraph
               size={size}
+              variant='short'
               asChild
-              short
             >
               <div
                 id={descriptionId}
diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
index e62da3a61b..e313871312 100644
--- a/packages/react/src/components/form/Textfield/Textfield.tsx
+++ b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -146,7 +146,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               <Paragraph
                 asChild
                 size={size}
-                short
+                variant='short'
               >
                 <div
                   className={cl(classes.adornment, classes.prefix)}
@@ -179,7 +179,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               <Paragraph
                 asChild
                 size={size}
-                short
+                variant='short'
               >
                 <div
                   className={cl(classes.adornment, classes.suffix)}
diff --git a/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx b/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx
index cda2c6e54a..a90cce35ae 100644
--- a/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx
+++ b/packages/react/src/utilities/RovingTabIndex/RovingTabindexItem.tsx
@@ -6,8 +6,6 @@ import type { HTMLAttributes } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../types/OverridableComponent';
-
 import type { RovingTabindexElement } from './RovingTabindexRoot';
 
 import { useRovingTabindex } from '.';
@@ -40,11 +38,11 @@ export function getPrevFocusableValue(
   return items.at(currIndex === 0 ? -1 : currIndex - 1);
 }
 
-export const RovingTabindexItem: OverridableComponent<
-  RovingTabindexItemProps,
-  HTMLElement
-> = forwardRef(({ value, as = 'div', asChild, ...rest }, ref) => {
-  const Component = asChild ? Slot : as;
+export const RovingTabindexItem = forwardRef<
+  HTMLElement,
+  RovingTabindexItemProps
+>(({ value, asChild, ...rest }, ref) => {
+  const Component = asChild ? Slot : 'div';
 
   const focusValue =
     value ?? (typeof rest.children == 'string' ? rest.children : '');
diff --git a/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx b/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx
index 4e81cf6b43..7e50f2164e 100644
--- a/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx
+++ b/packages/react/src/utilities/RovingTabIndex/RovingTabindexRoot.tsx
@@ -11,8 +11,6 @@ import type {
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 
-import type { OverridableComponent } from '../../types/OverridableComponent';
-
 type RovingTabindexRootBaseProps = {
   /** The children of the `RovingTabindexRoot`. The children should get their roving-relevant props from the `useRovingTabIndex` hook. */
   children: ReactNode;
@@ -50,72 +48,69 @@ export const RovingTabindexContext = createContext<RovingTabindexProps>({
   focusableValue: null,
 });
 
-export const RovingTabindexRoot: OverridableComponent<
-  RovingTabindexRootBaseProps,
-  HTMLElement
-> = forwardRef(
-  ({ valueId, as = 'div', asChild, onBlur, onFocus, ...rest }, ref) => {
-    const Component = asChild ? Slot : as;
+export const RovingTabindexRoot = forwardRef<
+  HTMLElement,
+  RovingTabindexRootBaseProps
+>(({ valueId, asChild, onBlur, onFocus, ...rest }, ref) => {
+  const Component = asChild ? Slot : 'div';
 
-    const [focusableValue, setFocusableValue] = useState<string | null>(null);
-    const [isShiftTabbing, setIsShiftTabbing] = useState(false);
-    const elements = useRef(new Map<string, HTMLElement>());
-    const myRef = useRef<HTMLElement>();
+  const [focusableValue, setFocusableValue] = useState<string | null>(null);
+  const [isShiftTabbing, setIsShiftTabbing] = useState(false);
+  const elements = useRef(new Map<string, HTMLElement>());
+  const myRef = useRef<HTMLElement>();
 
-    const refs = useMergeRefs([ref, myRef]);
+  const refs = useMergeRefs([ref, myRef]);
 
-    const getOrderedItems = (): RovingTabindexElement[] => {
-      if (!myRef.current) return [];
-      const elementsFromDOM = Array.from(
-        myRef.current.querySelectorAll<HTMLElement>(
-          '[data-roving-tabindex-item]',
-        ),
-      );
+  const getOrderedItems = (): RovingTabindexElement[] => {
+    if (!myRef.current) return [];
+    const elementsFromDOM = Array.from(
+      myRef.current.querySelectorAll<HTMLElement>(
+        '[data-roving-tabindex-item]',
+      ),
+    );
 
-      return Array.from(elements.current)
-        .sort(
-          (a, b) =>
-            elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]),
-        )
-        .map(([value, element]) => ({ value, element }));
-    };
+    return Array.from(elements.current)
+      .sort(
+        (a, b) => elementsFromDOM.indexOf(a[1]) - elementsFromDOM.indexOf(b[1]),
+      )
+      .map(([value, element]) => ({ value, element }));
+  };
 
-    return (
-      <RovingTabindexContext.Provider
-        value={{
-          elements,
-          getOrderedItems,
-          focusableValue,
-          setFocusableValue,
-          onShiftTab: () => {
-            setIsShiftTabbing(true);
-          },
+  return (
+    <RovingTabindexContext.Provider
+      value={{
+        elements,
+        getOrderedItems,
+        focusableValue,
+        setFocusableValue,
+        onShiftTab: () => {
+          setIsShiftTabbing(true);
+        },
+      }}
+    >
+      <Component
+        {...rest}
+        tabIndex={isShiftTabbing ? -1 : 0}
+        onBlur={(e: FocusEvent<HTMLElement>) => {
+          onBlur?.(e);
+          setIsShiftTabbing(false);
         }}
-      >
-        <Component
-          {...rest}
-          tabIndex={isShiftTabbing ? -1 : 0}
-          onBlur={(e: FocusEvent<HTMLElement>) => {
-            onBlur?.(e);
-            setIsShiftTabbing(false);
-          }}
-          onFocus={(e: FocusEvent<HTMLElement>) => {
-            onFocus?.(e);
-            if (e.target !== e.currentTarget) return;
-            const orderedItems = getOrderedItems();
-            if (orderedItems.length === 0) return;
+        onFocus={(e: FocusEvent<HTMLElement>) => {
+          onFocus?.(e);
+          if (e.target !== e.currentTarget) return;
+          const orderedItems = getOrderedItems();
+          if (orderedItems.length === 0) return;
 
-            if (focusableValue != null) {
-              elements.current.get(focusableValue)?.focus();
-            } else if (valueId != null) {
-              elements.current.get(valueId)?.focus();
-            } else {
-              orderedItems.at(0)?.element.focus();
-            }
-          }}
-          ref={refs}
-        />
-      </RovingTabindexContext.Provider>
-    );
-  },
-);
+          if (focusableValue != null) {
+            elements.current.get(focusableValue)?.focus();
+          } else if (valueId != null) {
+            elements.current.get(valueId)?.focus();
+          } else {
+            orderedItems.at(0)?.element.focus();
+          }
+        }}
+        ref={refs}
+      />
+    </RovingTabindexContext.Provider>
+  );
+});