diff --git a/.storybook/image-snapshots/expected/components_ButtonV2_ButtonV2_Visual Tests Disabled.png b/.storybook/image-snapshots/expected/components_ButtonV2_ButtonV2_Visual Tests Disabled.png
index b417f6630..3c2ef61d2 100644
Binary files a/.storybook/image-snapshots/expected/components_ButtonV2_ButtonV2_Visual Tests Disabled.png and b/.storybook/image-snapshots/expected/components_ButtonV2_ButtonV2_Visual Tests Disabled.png differ
diff --git a/.storybook/image-snapshots/expected/components_Wizard_Playground.png b/.storybook/image-snapshots/expected/components_Wizard_Playground.png
index 6930b0ce3..d62b20146 100644
Binary files a/.storybook/image-snapshots/expected/components_Wizard_Playground.png and b/.storybook/image-snapshots/expected/components_Wizard_Playground.png differ
diff --git a/.storybook/image-snapshots/expected/components_Wizard_Two Step Wizard.png b/.storybook/image-snapshots/expected/components_Wizard_Two Step Wizard.png
index 0006e4878..cd6d2f2fe 100644
Binary files a/.storybook/image-snapshots/expected/components_Wizard_Two Step Wizard.png and b/.storybook/image-snapshots/expected/components_Wizard_Two Step Wizard.png differ
diff --git a/.storybook/image-snapshots/expected/components_Wizard_With Backwards Navigation.png b/.storybook/image-snapshots/expected/components_Wizard_With Backwards Navigation.png
index 6930b0ce3..d62b20146 100644
Binary files a/.storybook/image-snapshots/expected/components_Wizard_With Backwards Navigation.png and b/.storybook/image-snapshots/expected/components_Wizard_With Backwards Navigation.png differ
diff --git a/.storybook/image-snapshots/expected/components_Wizard_With Initial Step.png b/.storybook/image-snapshots/expected/components_Wizard_With Initial Step.png
index 78128674e..f01ab6150 100644
Binary files a/.storybook/image-snapshots/expected/components_Wizard_With Initial Step.png and b/.storybook/image-snapshots/expected/components_Wizard_With Initial Step.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Size Lg.png b/.storybook/image-snapshots/expected/components_modals_Modal_Size Lg.png
new file mode 100644
index 000000000..f9ed8fe35
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_modals_Modal_Size Lg.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Size Md.png b/.storybook/image-snapshots/expected/components_modals_Modal_Size Md.png
new file mode 100644
index 000000000..c0bb8647e
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_modals_Modal_Size Md.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Size Sm.png b/.storybook/image-snapshots/expected/components_modals_Modal_Size Sm.png
new file mode 100644
index 000000000..f9dd13be5
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_modals_Modal_Size Sm.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Size XL.png b/.storybook/image-snapshots/expected/components_modals_Modal_Size XL.png
new file mode 100644
index 000000000..f9ed8fe35
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_modals_Modal_Size XL.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Size Xs.png b/.storybook/image-snapshots/expected/components_modals_Modal_Size Xs.png
new file mode 100644
index 000000000..c29358f7c
Binary files /dev/null and b/.storybook/image-snapshots/expected/components_modals_Modal_Size Xs.png differ
diff --git a/.storybook/image-snapshots/expected/components_modals_Modal_Without Footer.png b/.storybook/image-snapshots/expected/components_modals_Modal_Without Footer.png
index 19bf10493..3c71888ff 100644
Binary files a/.storybook/image-snapshots/expected/components_modals_Modal_Without Footer.png and b/.storybook/image-snapshots/expected/components_modals_Modal_Without Footer.png differ
diff --git a/src/components/ButtonV2/Button.tsx b/src/components/ButtonV2/Button.tsx
index 0f42c4b7b..c1ae123d1 100644
--- a/src/components/ButtonV2/Button.tsx
+++ b/src/components/ButtonV2/Button.tsx
@@ -44,7 +44,7 @@ export const ButtonV2Plain = <E extends ElementType = 'button'>(
           : size === 'sm'
           ? 'var(--sscds-space-2x)'
           : 'var(--sscds-space-3x)',
-      '--sscds-button-width': isExpanded ? '100%' : 'auto',
+      '--sscds-button-width': isExpanded ? '100%' : 'fit-content',
       '--sscds-button-width-min':
         typeof minWidth !== 'undefined' ? pxToRem(minWidth) : 'auto',
       '--sscds-button-height': getButtonSize(size),
diff --git a/src/components/ElementLabel/ElementLabel.tsx b/src/components/ElementLabel/ElementLabel.tsx
index e223b2d0d..a11f67087 100644
--- a/src/components/ElementLabel/ElementLabel.tsx
+++ b/src/components/ElementLabel/ElementLabel.tsx
@@ -1,9 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ElementType, ReactNode, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { WithAsProp } from '../../types/utils.types';
+import { PolymorphicProps } from '../../types/utils.types';
 
-export type ElementLabelProps = WithAsProp<{
+type ElementLabelOwnProps = {
   children: ReactNode;
   /* Font size */
   size?: 'sm' | 'md';
@@ -18,8 +18,11 @@ export type ElementLabelProps = WithAsProp<{
     | 'link';
   /* Font weight. When true ElementLabel will be rendered as bold */
   isStrong?: boolean;
-}> &
-  ComponentPropsWithoutRef<'span'>;
+};
+export type ElementLabelProps<Element extends ElementType> = PolymorphicProps<
+  ElementLabelOwnProps,
+  Element
+>;
 
 const ElementLabelRoot = styled.span`
   font-family: var(--sscds-font-family-body);
@@ -30,24 +33,27 @@ const ElementLabelRoot = styled.span`
 `;
 ElementLabelRoot.displayName = 'ElementLabel.Root';
 
-function ElementLabel({
+function ElementLabel<E extends ElementType = 'span'>({
   children,
   size = 'sm',
   color = 'default',
   isStrong = false,
   ...props
-}: ElementLabelProps) {
-  const vars = {
-    '--sscds-elementlabel-font-size': `var(--sscds-font-size-elementlabel-${size})`,
-    '--sscds-elementlabel-font-weight': isStrong
-      ? 'var(--sscds-font-weight-elementlabel-strong)'
-      : 'var(--sscds-font-weight-elementlabel-default)',
-    '--sscds-elementlabel-color':
-      color === 'link'
-        ? 'var(--sscds-color-link-default)'
-        : `var(--sscds-color-text-${color})`,
-    ...props.style,
-  };
+}: ElementLabelProps<E>) {
+  const vars = useMemo(
+    () => ({
+      '--sscds-elementlabel-font-size': `var(--sscds-font-size-elementlabel-${size})`,
+      '--sscds-elementlabel-font-weight': isStrong
+        ? 'var(--sscds-font-weight-elementlabel-strong)'
+        : 'var(--sscds-font-weight-elementlabel-default)',
+      '--sscds-elementlabel-color':
+        color === 'link'
+          ? 'var(--sscds-color-link-default)'
+          : `var(--sscds-color-text-${color})`,
+      ...props.style,
+    }),
+    [color, isStrong, props.style, size],
+  );
 
   return (
     <ElementLabelRoot {...props} style={vars}>
diff --git a/src/components/HexGrade/HexGrade.tsx b/src/components/HexGrade/HexGrade.tsx
index 764892c92..3d749ac05 100644
--- a/src/components/HexGrade/HexGrade.tsx
+++ b/src/components/HexGrade/HexGrade.tsx
@@ -2,6 +2,7 @@ import { defaultTo, path, pipe } from 'ramda';
 import { isNotUndefined } from 'ramda-adjunct';
 import styled, { useTheme } from 'styled-components';
 import cls from 'classnames';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { createMarginSpacing, getColor } from '../../utils';
 import { HexGradeGrades, HexGradeVariants } from './HexGrade.enums';
@@ -59,7 +60,7 @@ const HexGrade = ({
   margin,
   className,
   ...props
-}: HexGradeProps) => {
+}: HexGradeProps & ComponentPropsWithoutRef<'svg'>) => {
   const theme = useTheme();
   const isCSVariant = variant === HexGradeVariants.cs;
   const gradeColorType = pipe(
diff --git a/src/components/IconWrapper/IconWrapper.tsx b/src/components/IconWrapper/IconWrapper.tsx
index bbc67d062..00f28d96f 100644
--- a/src/components/IconWrapper/IconWrapper.tsx
+++ b/src/components/IconWrapper/IconWrapper.tsx
@@ -1,4 +1,5 @@
 import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+import { ComponentPropsWithoutRef } from 'react';
 
 import { getRadii } from '../../utils';
 import Icon from '../Icon/Icon';
@@ -18,13 +19,13 @@ const variances: Record<
   FlattenSimpleInterpolation
 > = {
   default: css`
-    box-shadow: inset 0 0 0 1px var(--slate-a6);
+    box-shadow: inset 0 0 0 1px var(--sscds-color-neutral-alpha-6);
   `,
   strong: css`
     background-color: var(--sscds-color-info-100);
   `,
   subtle: css`
-    background-color: var(--slate-a3);
+    background-color: var(--sscds-color-neutral-alpha-3);
   `,
 };
 
@@ -44,7 +45,11 @@ export default function IconWrapper({
   size = 'md',
   variant = 'default',
   ...rest
-}: IconWrapperProps) {
+}: IconWrapperProps &
+  Omit<
+    ComponentPropsWithoutRef<typeof Icon>,
+    'color' | 'size' | 'hasFixedSize' | 'hasFixedWidth' | 'name' | 'type'
+  >) {
   return (
     <IconWrapperRoot
       $size={size}
diff --git a/src/components/Modal/Modal.enums.ts b/src/components/Modal/Modal.enums.ts
index b5ca597d6..44722a0e6 100644
--- a/src/components/Modal/Modal.enums.ts
+++ b/src/components/Modal/Modal.enums.ts
@@ -3,4 +3,5 @@ export const ModalSizes = {
   sm: 'sm',
   md: 'md',
   lg: 'lg',
+  xl: 'xl',
 } as const;
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index d926332b4..4a8b7e3ec 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,19 +1,15 @@
 import { useState } from 'react';
-import { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import Modal from './Modal';
-import { ModalProps } from './Modal.types';
-import { ModalSizes } from './Modal.enums';
 import { H5 } from '../Heading';
 import { Paragraph } from '../Paragraph';
 import { Inline, Padbox } from '../layout';
 import { Button } from '../Button';
-import { generateControl } from '../../utils/tests/storybook';
-import { SpaceSizes } from '../../index';
 import { Tooltip } from '../Tooltip';
 
-export default {
+const meta = {
   title: 'components/modals/Modal',
   component: Modal,
   parameters: {
@@ -24,124 +20,143 @@ export default {
   },
   argTypes: {
     size: {
-      ...generateControl('select', ModalSizes),
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
     },
     footer: {
       control: { disable: true },
     },
   },
-} as Meta;
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 function Footer() {
   return (
-    <Inline gap={SpaceSizes.md} justify="flex-end">
+    <Inline gap="4x" justify="flex-end">
       <Button variant="outline">Cancel</Button>
       <Button>Confirm</Button>
     </Inline>
   );
 }
 
-export const Playground: StoryFn<ModalProps> = (args) => {
-  const [isShown, setIsShown] = useState(false);
+export const Playground: Story = {
+  render: function Render(args) {
+    const [isShown, setIsShown] = useState(false);
 
-  return (
-    <Padbox paddingSize={SpaceSizes.xxl}>
-      <Inline justify="center">
-        <Button onClick={() => setIsShown(!isShown)}>Open modal</Button>
-        {isShown && (
-          <Modal
-            footer={<Footer />}
-            title="Title"
-            onClose={() => setIsShown(false)}
-            {...args}
-          >
-            <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-            <Paragraph size="md" style={{ marginBottom: 0 }}>
-              You can replace this with a local component. You can also just
-              override the text, but{' '}
-              <Tooltip popup="I'm tooltip">keep in mind</Tooltip> that you might
-              lose content that way in case we happend to change the underlying
-              component. Lorem ipsum dolor sit amet, consectetur adipiscing
-              elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-              laboris nisi ut aliquip ex ea commodo consequat.
-            </Paragraph>
-          </Modal>
-        )}
-      </Inline>
-    </Padbox>
-  );
+    return (
+      <Padbox paddingSize="32x">
+        <Inline justify="center">
+          <Button onClick={() => setIsShown(!isShown)}>Open modal</Button>
+          {isShown && <Modal {...args} onClose={() => setIsShown(false)} />}
+        </Inline>
+      </Padbox>
+    );
+  },
+  args: {
+    footer: <Footer />,
+    title: 'Title',
+    children: (
+      <>
+        <H5 style={{ margin: 0 }}>This is a placeholder</H5>
+        <Paragraph size="md" style={{ marginBottom: 0 }}>
+          You can replace this with a local component. You can also just
+          override the text, but{' '}
+          <Tooltip popup="I'm tooltip">keep in mind</Tooltip> that you might
+          lose content that way in case we happend to change the underlying
+          component. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+          enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+          ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      </>
+    ),
+    onClose: action('close-modal'),
+  },
+  parameters: {
+    screenshot: { skip: true },
+  },
 };
 
-Playground.parameters = {
-  screenshot: { skip: true },
+export const WithTitle: Story = {
+  args: Playground.args,
 };
 
-export const WithTitle: StoryFn = () => (
-  <Modal footer={<Footer />} title="Title" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithLongContent: Story = {
+  args: {
+    ...Playground.args,
+    children: (
+      <>
+        <H5 style={{ margin: 0 }}>This is a placeholder</H5>
+        <Paragraph size="md" style={{ marginBottom: 0 }}>
+          You can replace this with a local component. You can also just
+          override the text, but keep in mind that you might lose content that
+          way in case we happend to change the underlying component. Lorem ipsum
+          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+          commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit
+          amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </Paragraph>
+      </>
+    ),
+  },
+};
 
-export const WithLongContent: StoryFn = () => (
-  <Modal footer={<Footer />} title="Title" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor
-      sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-      exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-      aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithoutTitle: Story = {
+  args: {
+    ...Playground.args,
+    title: undefined,
+  },
+};
 
-export const WithoutTitle: StoryFn = () => (
-  <Modal footer={<Footer />} onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const WithoutFooter: Story = {
+  args: {
+    ...Playground.args,
+    footer: undefined,
+  },
+};
 
-export const WithoutFooter: StoryFn = () => (
-  <Modal title="Simple modal" onClose={action('close-modal')}>
-    <H5 style={{ margin: 0 }}>This is a placeholder</H5>
-    <Paragraph size="md" style={{ marginBottom: 0 }}>
-      You can replace this with a local component. You can also just override
-      the text, but keep in mind that you might lose content that way in case we
-      happend to change the underlying component. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </Paragraph>
-  </Modal>
-);
+export const SizeXs: Story = {
+  args: {
+    ...Playground.args,
+    size: 'xs',
+  },
+};
+export const SizeSm: Story = {
+  args: {
+    ...Playground.args,
+    size: 'sm',
+  },
+};
+export const SizeMd: Story = {
+  args: {
+    ...Playground.args,
+    size: 'md',
+  },
+};
+export const SizeLg: Story = {
+  args: {
+    ...Playground.args,
+    size: 'lg',
+  },
+};
+export const SizeXL: Story = {
+  args: {
+    ...Playground.args,
+    size: 'xl',
+  },
+};
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index c876e8e09..4649bc698 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -24,13 +24,14 @@ const widthVariants = {
   [ModalSizes.sm]: 430,
   [ModalSizes.md]: 600,
   [ModalSizes.lg]: 900,
+  [ModalSizes.xl]: 1440,
 };
 
 const BaseModal = styled(Surface)<{ $maxWidth: number }>`
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  width: 100%;
+  width: 90%;
   max-width: ${({ $maxWidth }) => pxToRem($maxWidth)};
 `;
 
@@ -63,7 +64,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(
       children,
       className,
       ...rest
-    },
+    }: ModalProps,
     ref,
   ) => {
     const { portalsContainerId } = useContext(DSContext);
diff --git a/src/components/Modal/Modal.types.ts b/src/components/Modal/Modal.types.ts
index c213fc678..f0603a955 100644
--- a/src/components/Modal/Modal.types.ts
+++ b/src/components/Modal/Modal.types.ts
@@ -5,10 +5,15 @@ import { ModalSizes } from './Modal.enums';
 export type ModalSizes = (typeof ModalSizes)[keyof typeof ModalSizes];
 
 export interface ModalProps {
+  /** Modal window content */
   children: ReactNode;
+  /** Callback triggered by clicking on close button */
   onClose?: MouseEventHandler<HTMLDivElement>;
+  /** Content of modal window footer */
   footer?: ReactNode;
+  /** Modal window title displayed in header */
   title?: string;
+  /** Maximal size of the modal window */
   size?: ModalSizes;
   className?: string;
 }
diff --git a/src/components/forms/SegmentedToggle/SegmentedToggle.tsx b/src/components/forms/SegmentedToggle/SegmentedToggle.tsx
index 7d4b6e682..4d3687fef 100644
--- a/src/components/forms/SegmentedToggle/SegmentedToggle.tsx
+++ b/src/components/forms/SegmentedToggle/SegmentedToggle.tsx
@@ -53,6 +53,7 @@ const { useContext, Provider } = createCtx<SegmentedToggleContext>(
 );
 
 const SegmentedToggleRoot = styled(Padbox)`
+  width: fit-content;
   display: inline-block;
   background-color: var(--sscds-color-neutral-alpha-3);
   box-shadow: inset 0 0 0 1px var(--sscds-color-neutral-alpha-3);
diff --git a/src/types/utils.types.ts b/src/types/utils.types.ts
index a92b2c009..a6a1dd47c 100644
--- a/src/types/utils.types.ts
+++ b/src/types/utils.types.ts
@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import { ComponentProps, ElementType } from 'react';
 
 export type Subset<K> = {
   [attr in keyof K]?: K[attr] extends object
@@ -18,8 +18,8 @@ export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
     [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
   }[Keys];
 
-export type WithAsProp<Props> = Props & {
-  as?: ElementType;
+export type WithAsProp<Props, Element = ElementType> = Props & {
+  as?: Element;
 };
 
 export type ReactComponentLike =
@@ -28,3 +28,9 @@ export type ReactComponentLike =
   | ((props: any, context?: any) => any)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | (new (props: any, context?: any) => any);
+
+export type PolymorphicProps<
+  OwnProps,
+  Element extends ElementType,
+> = WithAsProp<OwnProps, Element> &
+  Omit<ComponentProps<Element>, keyof WithAsProp<OwnProps, Element>>;