diff --git a/.changeset/hip-comics-agree.md b/.changeset/hip-comics-agree.md
new file mode 100644
index 0000000000..fd895539d5
--- /dev/null
+++ b/.changeset/hip-comics-agree.md
@@ -0,0 +1,15 @@
+---
+"@sumup-oss/circuit-ui": major
+---
+
+Marked the `ColorInput` and `PhoneNumberInput` components as stable. Update the related imports:
+
+```diff
+- import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui/experimental';
++ import { ColorInput, type ColorInputProps } from '@sumup-oss/circuit-ui';
+```
+
+```diff
+- import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui/experimental';
++ import { PhoneNumberInput, type PhoneNumberInputProps } from '@sumup-oss/circuit-ui';
+```
diff --git a/.changeset/witty-rabbits-collect.md b/.changeset/witty-rabbits-collect.md
new file mode 100644
index 0000000000..effeb9b4af
--- /dev/null
+++ b/.changeset/witty-rabbits-collect.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/eslint-plugin-circuit-ui": minor
+---
+
+Updated the `component-lifecycle-imports` ESLint rule to handle imports of `ColorInput` and `PhoneNumberInput` as experimental components.
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.mdx b/packages/circuit-ui/components/ColorInput/ColorInput.mdx
index 2867d1fe0f..e710f00365 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.mdx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.mdx
@@ -5,9 +5,46 @@ import * as Stories from './ColorInput.stories';
 
 # ColorInput
 
-<Status variant="experimental" />
+## Use cases and API
+<Status variant="stable" />
 
-The ColorInput component enables users to type or select a color.
+The ColorInput component enables users to type a color in a text field or select it using the browser native color picker.
+
+Use the ColorInput component to allow users to input a color value to personalize content such as UI themes, profile settings or other customizable experiences.
+
+
+The component only supports seven-character string representations of colors in hexadecimal format. Shorthand Hex values like `#fff` will not be normalized to `#ffffff` and values with alpha channel like `##ffffff50` will not be accepted.
+- Accepted: `#aabbcc`, `#AABBCC`
+- Not accepted: `#abc`, `#aabbccaa`, `#ABC`, `#AABBCCAA`
 
 <Story of={Stories.Base} />
+
 <Props />
+
+## Validations
+
+Use the `validationHint` prop to communication information about the state of the ColorInput component, along with one of the following validation props:
+- stand-alone: The user is informed of the expected response.
+- `showWarning`: The user is warned that the value is not recommended but still valid.
+- `showError`: The user is alerted that the value is invalid.
+- `showValid`: The user is reassured that the value is valid. Use sparingly.
+
+<Story of={Stories.Validations} />
+
+## Optional
+
+Use the `optionalLabel` prop to indicate that the field is optional. This can help reduce the cognitive load for the user by clearly indicating which fields are required and which are not. This label is only displayed when the `required` prop is falsy.
+
+<Story of={Stories.Optional} />
+
+## Readonly
+
+The ColorInput component supports a read-only state. Use the `readOnly` prop to indicate that the field is not currently editable.
+The read-only state is applied to the text input field of the ColorInput component, while disabling the color picker input to prevent interactions with the element.
+
+<Story of={Stories.Readonly} />
+
+## Disabled
+
+Disabled form fields can be confusing to users, so use them with caution. Use a disabled color input only if you need to communicate to the user that an option that existed before is not available for choosing now. Consider not displaying the field at all or add an explanation why the field is disabled.
+<Story of={Stories.Disabled} />
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
index ea43d78306..557c0c52c3 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.spec.tsx
@@ -28,21 +28,20 @@ import type { InputElement } from '../Input/index.js';
 import { ColorInput } from './ColorInput.js';
 
 describe('ColorInput', () => {
-  const baseProps = { label: 'Car color', pickerLabel: 'Pick car color' };
+  const baseProps = { label: 'Car color' };
 
   it('should merge a custom class name with the default ones', () => {
     const className = 'foo';
-    const { container } = render(
-      <ColorInput {...baseProps} inputClassName={className} />,
-    );
-    const input = container.querySelector('input[type="text"]');
-    expect(input?.className).toContain(className);
+    render(<ColorInput {...baseProps} inputClassName={className} />);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, textInput] = screen.getAllByLabelText(baseProps.label);
+    expect(textInput?.className).toContain(className);
   });
 
   it('should forward a ref', () => {
     const ref = createRef<InputElement>();
-    const { container } = render(<ColorInput {...baseProps} ref={ref} />);
-    const input = container.querySelector("input[type='color']");
+    render(<ColorInput {...baseProps} ref={ref} />);
+    const [input] = screen.getAllByLabelText(baseProps.label);
     expect(ref.current).toBe(input);
   });
 
@@ -52,7 +51,7 @@ describe('ColorInput', () => {
     expect(actual).toHaveNoViolations();
   });
 
-  describe('Labeling', () => {
+  describe('semantics', () => {
     it('should accept a custom description via aria-describedby', () => {
       const customDescription = 'Custom description';
       const customDescriptionId = 'customDescriptionId';
@@ -66,133 +65,110 @@ describe('ColorInput', () => {
         customDescription,
       );
     });
-  });
+    it('should render as disabled', async () => {
+      render(<ColorInput {...baseProps} disabled />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      expect(colorInput).toBeDisabled();
+      expect(textInput).toBeDisabled();
+    });
+    it('should render as read-only', async () => {
+      render(<ColorInput {...baseProps} readOnly />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+      expect(colorInput).toBeDisabled();
+      expect(textInput).toHaveAttribute('readonly');
+    });
 
-  it('should set value and default value on both inputs', () => {
-    const { container } = render(
-      <ColorInput {...baseProps} defaultValue="#ff11bb" />,
-    );
-    const colorPicker = container.querySelector(
-      "input[type='color']",
-    ) as HTMLInputElement;
-    const colorInput = container.querySelector(
-      "input[type='text']",
-    ) as HTMLInputElement;
-    expect(colorPicker.value).toBe('#ff11bb');
-    expect(colorInput.value).toBe('ff11bb');
+    it('should render as required', async () => {
+      render(<ColorInput {...baseProps} required />);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const [_, textInput] = screen.getAllByLabelText(baseProps.label);
+      expect(textInput).toBeRequired(); // text input
+    });
   });
 
-  describe('Synchronization', () => {
-    it('should update text input if color input changes', async () => {
-      const { container } = render(<ColorInput {...baseProps} />);
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-      const newValue = '#00ff00';
-
-      fireEvent.input(colorPicker, { target: { value: newValue } });
-
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
-      expect(colorInput.value).toBe(newValue.replace('#', ''));
+  describe('state', () => {
+    it('should display a default value on both inputs', () => {
+      render(<ColorInput {...baseProps} defaultValue="#ff11bb" />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      expect(colorInput).toHaveValue('#ff11bb');
+      expect(textInput).toHaveValue('ff11bb');
     });
 
-    it('should update color input if text input changes', async () => {
-      const { container } = render(<ColorInput {...baseProps} />);
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
-      const newValue = '00ff00';
-
-      await userEvent.type(colorInput, newValue);
-
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-      expect(colorPicker.value).toBe(`#${newValue}`);
+    it('should display an initial value', () => {
+      render(<ColorInput {...baseProps} value="#ff11bb" />);
+
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      expect(colorInput).toHaveValue('#ff11bb');
+      expect(textInput).toHaveValue('ff11bb');
+    });
+
+    it('should ignore an invalid value', () => {
+      render(<ColorInput {...baseProps} value="#fff" />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      expect(colorInput).toHaveValue('#000000');
+      expect(textInput).toHaveValue('fff');
     });
   });
 
-  describe('OnChange events', () => {
-    it('should trigger onChange event when color picker changes', async () => {
+  describe('user interactions', () => {
+    const newValue = '00ff00';
+    it('should update text input if color input changes', async () => {
       const onChange = vi.fn();
-      const { container } = render(
-        <ColorInput {...baseProps} onChange={onChange} />,
-      );
+      render(<ColorInput {...baseProps} onChange={onChange} />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
 
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-
-      fireEvent.input(colorPicker, { target: { value: '#00ff00' } });
+      fireEvent.input(colorInput, { target: { value: `#${newValue}` } });
 
+      expect(textInput).toHaveValue(newValue.replace('#', ''));
       expect(onChange).toHaveBeenCalledTimes(1);
     });
 
-    it('should trigger onChange event when color hex input changes', async () => {
+    it('should update color input if text input changes', async () => {
       const onChange = vi.fn();
-      const { container } = render(
-        <ColorInput {...baseProps} onChange={onChange} />,
-      );
+      render(<ColorInput {...baseProps} onChange={onChange} />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
 
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
-
-      await userEvent.type(colorInput, '00ff00');
+      await userEvent.type(textInput, newValue);
 
+      expect(colorInput).toHaveValue(`#${newValue}`);
       expect(onChange).toHaveBeenCalled();
     });
-  });
 
-  describe('Paste', () => {
     it('should handle paste events', async () => {
-      const { container } = render(<ColorInput {...baseProps} />);
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
-
-      await userEvent.click(colorInput);
-      await userEvent.paste('#00ff00');
-
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-      expect(colorPicker.value).toBe('#00ff00');
-      expect(colorInput.value).toBe('00ff00');
+      render(<ColorInput {...baseProps} />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      await userEvent.click(textInput);
+      await userEvent.paste(`#${newValue}`);
+
+      expect(colorInput).toHaveValue(`#${newValue}`);
+      expect(textInput).toHaveValue(newValue);
     });
 
     it('should ignore invalid paste event', async () => {
-      const { container } = render(<ColorInput {...baseProps} />);
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
+      render(<ColorInput {...baseProps} />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
 
-      await userEvent.click(colorInput);
+      await userEvent.click(textInput);
       await userEvent.paste('obviously invalid');
 
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-      expect(colorPicker.value).toBe('#000000');
-      expect(colorInput.value).toBe('');
+      expect(colorInput).toHaveValue('#000000');
+      expect(textInput).toHaveValue('');
     });
 
     it("should allow pasting color without '#'", async () => {
-      const { container } = render(<ColorInput {...baseProps} />);
-      const colorInput = container.querySelector(
-        "input[type='text']",
-      ) as HTMLInputElement;
-
-      await userEvent.click(colorInput);
-      await userEvent.paste('00ff00');
-
-      const colorPicker = container.querySelector(
-        "input[type='color']",
-      ) as HTMLInputElement;
-      expect(colorPicker.value).toBe('#00ff00');
-      expect(colorInput.value).toBe('00ff00');
+      render(<ColorInput {...baseProps} />);
+      const [colorInput, textInput] = screen.getAllByLabelText(baseProps.label);
+
+      await userEvent.click(textInput);
+      await userEvent.paste(newValue);
+
+      expect(colorInput).toHaveValue(`#${newValue}`);
+      expect(textInput).toHaveValue(newValue);
     });
   });
 });
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx
index d852030f66..dda3909c0c 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.stories.tsx
@@ -13,6 +13,8 @@
  * limitations under the License.
  */
 
+import { Stack } from '../../../../.storybook/components/index.js';
+
 import { ColorInput, type ColorInputProps } from './ColorInput.js';
 
 export default {
@@ -22,13 +24,47 @@ export default {
 
 const baseArgs = {
   label: 'Color',
-  pickerLabel: 'Pick color',
   placeholder: '#99ffbb',
   defaultValue: '#99ffbb',
 };
 
-export const Base = (args: ColorInputProps) => (
-  <ColorInput {...args} style={{ maxWidth: '250px' }} />
-);
+export const Base = (args: ColorInputProps) => <ColorInput {...args} />;
 
 Base.args = baseArgs;
+
+export const Optional = (args: ColorInputProps) => <ColorInput {...args} />;
+
+Optional.args = { ...baseArgs, optionalLabel: 'optional' };
+
+export const Readonly = (args: ColorInputProps) => <ColorInput {...args} />;
+
+Readonly.args = { ...baseArgs, readOnly: true };
+
+export const Disabled = (args: ColorInputProps) => <ColorInput {...args} />;
+
+Disabled.args = { ...baseArgs, disabled: true };
+
+export const Validations = (args: ColorInputProps) => (
+  <Stack>
+    <ColorInput
+      {...args}
+      defaultValue="#0096FF"
+      hasWarning
+      validationHint="Blue is not a Teletubby color :( "
+    />
+    <ColorInput
+      {...args}
+      defaultValue="#fff"
+      invalid
+      validationHint="Value must be a 6 character hexadecimal color"
+    />
+    <ColorInput
+      {...args}
+      defaultValue="#4a288d"
+      showValid
+      validationHint="Tinky-Winky!"
+    />
+  </Stack>
+);
+
+Validations.args = baseArgs;
diff --git a/packages/circuit-ui/components/ColorInput/ColorInput.tsx b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
index 30aa4a7ba1..eab1e073ae 100644
--- a/packages/circuit-ui/components/ColorInput/ColorInput.tsx
+++ b/packages/circuit-ui/components/ColorInput/ColorInput.tsx
@@ -48,6 +48,8 @@ export interface ColorInputProps
     | 'pattern'
     | 'renderPrefix'
     | 'as'
+    | 'textAlign'
+    | 'renderSuffix'
   > {
   /**
    * A short string that is shown inside the empty input.
@@ -67,7 +69,6 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
   (
     {
       'aria-describedby': descriptionId,
-      'renderSuffix': RenderSuffix,
       className,
       defaultValue,
       disabled,
@@ -99,12 +100,6 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
 
     const descriptionIds = clsx(validationHintId, descriptionId);
 
-    const suffix = RenderSuffix && (
-      <RenderSuffix className={inputClasses.suffix} />
-    );
-
-    const hasSuffix = Boolean(suffix);
-
     const handlePaste: ClipboardEventHandler<InputElement> = (e) => {
       if (!colorPickerRef.current || !colorInputRef.current || readOnly) {
         return;
@@ -178,7 +173,7 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
           <label
             htmlFor={pickerId}
             className={classes.picker}
-            data-disabled={disabled}
+            data-disabled={disabled || readOnly}
           >
             <input
               id={pickerId}
@@ -203,7 +198,6 @@ export const ColorInput = forwardRef<InputElement, ColorInputProps>(
             className={clsx(
               inputClasses.base,
               !disabled && hasWarning && inputClasses.warning,
-              hasSuffix && inputClasses['has-suffix'],
               classes.input,
               inputClassName,
             )}
diff --git a/packages/circuit-ui/components/Input/Input.mdx b/packages/circuit-ui/components/Input/Input.mdx
index 1897955b3c..b0a2eca68f 100644
--- a/packages/circuit-ui/components/Input/Input.mdx
+++ b/packages/circuit-ui/components/Input/Input.mdx
@@ -7,26 +7,21 @@ import * as Stories from './Input.stories';
 
 <Status variant="stable" />
 
-A text field is an input field for inserting short text and numbers. It has
-multiple functions and supports multiple character types/formats.
+A text field is an input field for inserting short text and numbers.
 
 <Story of={Stories.Base} />
 <Props />
 
 ## When to use it
 
-When you need short textual information from the user such as email address,
-first name, phone number, street name, etc.
+When you need short textual information from the user such as email address, first name, phone number, street name, etc.
 
 ## Usage guidelines
 
 - **Do** always accompany an input field with a visible label.
-- **Do** use one input per row, unless two fields are closely interrelated
-  (e.g. first and last name).
-- **Do not** use input fields for requiring longer textual information from the
-  user.
-- **Do not** communicate that an input field is required on the label or the placeholder.
-  We assume that everything is required for the user unless explicitly said so.
+- **Do** use one input per row, unless two fields are closely interrelated (e.g. first and last name).
+- **Do not** use input fields for requiring longer textual information from the user.
+- **Do not** communicate that an input field is required on the label or the placeholder. We assume that everything is required for the user unless explicitly said so.
 - **Do not** mark required fields with asterisks.
 
 ## Validations
@@ -63,19 +58,11 @@ field should only be open for editing again if a button is clicked.
 
 ## Placeholder
 
-An input field must always have a placeholder, which is a short example of the
-information required that helps the user to understand what kind of information
-is needed. (For instance, an Address Field could have a placeholder:
-Grunerstrasse 13)
-
-### When to use it
-
-Always provide a placeholder for text input fields.
+An input field must always have a placeholder, which is a short example of the information required that helps the user to understand what kind of information is needed. (For instance, an Address Field could have a placeholder: "Grunerstrasse 13")
 
 ### Usage guidelines
 
 - **Do** make the placeholder succinct (up to 3-4 words).
 - **Do** make the placeholder contextual to the language and market.
 - **Do not** repeat the same content in the placeholder as the label.
-- **Do not** communicate that a field is optional in the placeholder, you
-  should do it in the label.
+- **Do not** communicate that a field is optional in the placeholder, you should do it in the label.
diff --git a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx
index 600de1b70b..51eace5c5f 100644
--- a/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx
+++ b/packages/circuit-ui/components/PhoneNumberInput/PhoneNumberInput.mdx
@@ -5,24 +5,17 @@ import * as Stories from './PhoneNumberInput.stories';
 
 # PhoneNumberInput
 
-<Status variant="experimental" />
+<Status variant="stable" />
 
 The PhoneNumberInput component provides a straightforward way for users to type their phone number in an accurate, consistent format including the country code and subscriber number.
 
 <Story of={Stories.Base} />
 <Props />
 
-## When to use it
+## Usage
 
 When you need to collect a phone number from the user. This could be for contact information, two-factor authentication, or other purposes where a phone number is required.
-The component allows the user to select their country code, and normalizes the input to the E.164 format.
-
-## Usage guidelines
-
-- **Do** always accompany the `PhoneNumberInput` field with a visible label. This helps users understand what information is required.
-- **Do not** use `PhoneNumberInput` for non-phone number data. It is specifically designed for phone number input and includes specific formatting and validation for phone numbers.
-- **Do not** communicate that a `PhoneNumberInput` field is required on the label or the placeholder. We assume that everything is required for the user unless explicitly stated otherwise.
-- **Do not** mark required fields with asterisks. Instead, use the `required` prop to indicate that the field is required.
+The component allows the user to select their country code, and normalizes the input to the [E.164 format](https://www.itu.int/rec/t-rec-e.164/en).
 
 ## Validations
 
@@ -39,41 +32,30 @@ When the user is recommended to change the value, but can proceed without doing
 
 ### Valid
 
-When the user is reassured that the value is valid. Use sparingly, as the `PhoneNumberInput` component does not validate that the number is actually in service.
+When the user is reassured that the value is valid. Use sparingly, as the PhoneNumberInput component does not validate that the number is actually in service.
 
 <Story of={Stories.Validations} />
 
 ## Readonly
 
-The `PhoneNumberInput` component supports a Readonly state. Use the `readOnly` prop to indicate that the field is not currently editable.
-The state can be applied to the entire component or only to a specific field, e.g. in the example below is used to indicate that only the country code is readonly
-
-- **Do** use the `readOnly` prop to communicate to the user that the phone number input is not currently editable. This can be useful in situations where the user needs to view but not edit the phone number, such as in a summary or review screen.
-- **Do not** use the `readOnly` prop to indicate that the field is optional or not required. The `readOnly` prop only changes the editability of the field, not its requirement status.
+Use the `readOnly` prop to indicate that the field is not currently editable. This can be useful in situations where the user needs to view but not edit the phone number, such as in a summary or review screen. The state can be applied to the entire component or only to a specific field, e.g. in the example below is used to indicate that only the country code is read-only.
 
 <Story of={Stories.Readonly} />
 
 ## Optional
 
-The `PhoneNumberInput` component supports optional fields. Use the `optionalLabel` prop to indicate that the field is optional. This label is only displayed when the `required` prop is falsy.
-
-- **Do** use the `optionalLabel` prop to communicate to the user that the phone number input is optional. This can help reduce the cognitive load for the user by clearly indicating which fields are required and which are not.
-- **Do not** use the `optionalLabel` prop to communicate other information. It should only be used to indicate that the field is optional.
+Use the `optionalLabel` prop to indicate that the field is optional. This can help reduce the cognitive load for the user by clearly indicating which fields are required and which are not. This label is only displayed when the `required` prop is falsy.
 
 <Story of={Stories.Optional} />
 
 ## Disabled
 
-You should use only when its a critical information from the user that we
-already have or need and we do not want the user to edit it easily. A disabled
-field should only be open for editing again if a user event is triggered.
+You should use only when its a critical information from the user that we already have or need and we do not want the user to edit it easily. A disabled field should only be open for editing again if a user event is triggered.
 
 <Story of={Stories.Disabled} />
 
 ## With Prefix
 
-The `PhoneNumberInput` component supports prefixes. Use the `renderPrefix` prop to add a small prefix to the country code selected input field. This can be useful for adding a flag icon, which can help the user recognize the selected country.
-
-- **Do** use the `renderPrefix` prop to provide relevant visual cues that help guide the user's input.
+Use the `renderPrefix` prop to add a small prefix to the country code selected input field. This can be useful for adding a flag icon, which can help the user recognize the selected country.
 
 <Story of={Stories.WithPrefix} />
diff --git a/packages/circuit-ui/experimental.ts b/packages/circuit-ui/experimental.ts
index ae28b8ea69..e32e3b5857 100644
--- a/packages/circuit-ui/experimental.ts
+++ b/packages/circuit-ui/experimental.ts
@@ -22,7 +22,3 @@ export {
   Toggletip,
   type ToggletipProps,
 } from './components/Toggletip/index.js';
-export { PhoneNumberInput } from './components/PhoneNumberInput/index.js';
-export type { PhoneNumberInputProps } from './components/PhoneNumberInput/index.js';
-export { ColorInput } from './components/ColorInput/index.js';
-export type { ColorInputProps } from './components/ColorInput/index.js';
diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts
index b75001c063..c6ef92c40b 100644
--- a/packages/circuit-ui/index.ts
+++ b/packages/circuit-ui/index.ts
@@ -67,6 +67,10 @@ export type { ImageInputProps } from './components/ImageInput/index.js';
 export { Calendar } from './components/Calendar/index.js';
 export type { CalendarProps } from './components/Calendar/index.js';
 export type { PlainDateRange } from './util/date.js';
+export { PhoneNumberInput } from './components/PhoneNumberInput/index.js';
+export type { PhoneNumberInputProps } from './components/PhoneNumberInput/index.js';
+export { ColorInput } from './components/ColorInput/index.js';
+export type { ColorInputProps } from './components/ColorInput/index.js';
 
 // Actions
 export { Button } from './components/Button/index.js';
diff --git a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts
index 29aeb23dd3..f31c6771eb 100644
--- a/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts
+++ b/packages/eslint-plugin-circuit-ui/component-lifecycle-imports/index.ts
@@ -74,7 +74,15 @@ const mappings = [
   {
     from: '@sumup-oss/circuit-ui/experimental',
     to: '@sumup-oss/circuit-ui',
-    specifiers: ['Calendar', 'CalendarProps', 'PlainDateRange'],
+    specifiers: [
+      'Calendar',
+      'CalendarProps',
+      'PlainDateRange',
+      'ColorInput',
+      'ColorInputProps',
+      'PhoneNumberInputProps',
+      'PhoneNumberInput',
+    ],
   },
 ];