diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 45c1c56e7..ef9faff93 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,6 +1,6 @@
import type { Preview } from '@storybook/react';
import '../index.css';
-import { OdsModulesProvider } from '../src';
+import { OdsModulesProvider } from '../src/modules';
import './style.css';
const preview: Preview = {
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359aa8277..8cbe74924 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
## [Unreleased]
+### Added
+
+- Implement `StatePingAnimation` core component
+
## [1.0.20] - 2024-03-13
### Fixed
diff --git a/src/core/components/states/index.ts b/src/core/components/states/index.ts
index 9f06565e2..38ae11784 100644
--- a/src/core/components/states/index.ts
+++ b/src/core/components/states/index.ts
@@ -1 +1,2 @@
export * from './emptyState';
+export * from './statePingAnimation';
diff --git a/src/core/components/states/statePingAnimation/index.ts b/src/core/components/states/statePingAnimation/index.ts
new file mode 100644
index 000000000..e8d93ba50
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/index.ts
@@ -0,0 +1,5 @@
+export {
+ StatePingAnimation,
+ type IStatePingAnimationProps,
+ type StatePingAnimationVariant,
+} from './statePingAnimation';
diff --git a/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx b/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx
new file mode 100644
index 000000000..fe16fd538
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimation.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { StatePingAnimation, type IStatePingAnimationProps } from './statePingAnimation';
+
+describe(' component', () => {
+ const createTestComponent = (props?: Partial) => {
+ const completeProps = { ...props };
+
+ return ;
+ };
+
+ it('renders without crashing', () => {
+ render(createTestComponent());
+
+ expect(screen.getByTestId('statePingAnimation')).toBeInTheDocument();
+ });
+});
diff --git a/src/core/components/states/statePingAnimation/statePingAnimation.tsx b/src/core/components/states/statePingAnimation/statePingAnimation.tsx
new file mode 100644
index 000000000..74290b728
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimation.tsx
@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import type React from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
+
+export type StatePingAnimationVariant = 'primary' | 'info' | 'success' | 'warning' | 'critical';
+
+export interface IStatePingAnimationProps extends ComponentPropsWithoutRef<'span'> {
+ /**
+ * Variant of the ping animation
+ * @default primary
+ */
+ variant?: StatePingAnimationVariant;
+}
+
+const variantToBgClassName: Record = {
+ info: 'bg-info-500',
+ primary: 'bg-primary-500',
+ success: 'bg-success-500',
+ warning: 'bg-warning-500',
+ critical: 'bg-critical-500',
+};
+
+export const StatePingAnimation: React.FC = (props) => {
+ const { className, variant = 'primary', ...otherProps } = props;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx b/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx
new file mode 100644
index 000000000..86f3189f1
--- /dev/null
+++ b/src/core/components/states/statePingAnimation/statePingAnimations.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatePingAnimation } from './statePingAnimation';
+
+const meta: Meta = {
+ title: 'Core/Components/States/StatePingAnimation',
+ component: StatePingAnimation,
+ tags: ['autodocs'],
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/P0GeJKqILL7UXvaqu5Jj7V/v1.1.0?type=design&node-id=15073-29243&mode=design&t=FQrFXBU8bQ7ug6dM-4',
+ },
+ },
+};
+
+type Story = StoryObj;
+
+/**
+ * Default usage of the `StatePingAnimation`
+ */
+export const Default: Story = {
+ args: {
+ variant: 'info',
+ },
+};
+
+export default meta;