From 9bd2045200f64c5c1569d7ba987b5b33b75969be Mon Sep 17 00:00:00 2001
From: ss-dimasm <dimas.m@softwareseni.com>
Date: Fri, 27 Dec 2024 09:51:52 +0700
Subject: [PATCH 1/5] chore: #244 deprecating current status indicator

---
 .../__styles__/index.ts                       | 12 +++-
 .../status-indicator.test.tsx.snap            | 65 +++++++++++++++++++
 .../__tests__/status-indicator.test.tsx       | 20 +++---
 .../index.ts                                  |  0
 .../status-indicator.mdx                      | 45 +++++++++++++
 .../status-indicator.stories.tsx              | 22 +++----
 .../status-indicator.tsx                      | 29 +++++++++
 .../deprecated-table/table.stories.tsx        | 14 ++--
 .../status-indicator.test.tsx.snap            | 65 -------------------
 .../status-indicator/status-indicator.mdx     | 45 -------------
 .../status-indicator/status-indicator.tsx     | 16 -----
 src/index.ts                                  |  2 +-
 12 files changed, 177 insertions(+), 158 deletions(-)
 rename src/components/{status-indicator => deprecated-status-indicator}/__styles__/index.ts (90%)
 create mode 100644 src/components/deprecated-status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
 rename src/components/{status-indicator => deprecated-status-indicator}/__tests__/status-indicator.test.tsx (54%)
 rename src/components/{status-indicator => deprecated-status-indicator}/index.ts (100%)
 create mode 100644 src/components/deprecated-status-indicator/status-indicator.mdx
 rename src/components/{status-indicator => deprecated-status-indicator}/status-indicator.stories.tsx (65%)
 create mode 100644 src/components/deprecated-status-indicator/status-indicator.tsx
 delete mode 100644 src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
 delete mode 100644 src/components/status-indicator/status-indicator.mdx
 delete mode 100644 src/components/status-indicator/status-indicator.tsx

diff --git a/src/components/status-indicator/__styles__/index.ts b/src/components/deprecated-status-indicator/__styles__/index.ts
similarity index 90%
rename from src/components/status-indicator/__styles__/index.ts
rename to src/components/deprecated-status-indicator/__styles__/index.ts
index 0bd61334..228946e6 100644
--- a/src/components/status-indicator/__styles__/index.ts
+++ b/src/components/deprecated-status-indicator/__styles__/index.ts
@@ -10,9 +10,15 @@ import {
   elIntentNeutral,
 } from '../../../styles/intent'
 
-export const elShapeTag = css``
+/**
+ * @deprecated
+ */
+export const elDeprecatedShapeTag = css``
 
-export const ElStatusIndicator = styled.span`
+/**
+ * @deprecated
+ */
+export const ElDeprecatedStatusIndicator = styled.span`
   border-radius: 3rem;
   display: inline-block;
   width: 0.75rem;
@@ -56,7 +62,7 @@ export const ElStatusIndicator = styled.span`
     outline-color: var(--intent-default-dark);
   }
 
-  &.${elShapeTag} {
+  &.${elDeprecatedShapeTag} {
     border-radius: 1rem 0.2rem 0.2rem 1rem;
     height: 2rem;
     width: 0.5rem;
diff --git a/src/components/deprecated-status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap b/src/components/deprecated-status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
new file mode 100644
index 00000000..fc3a87bb
--- /dev/null
+++ b/src/components/deprecated-status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-primary el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 2`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-primary el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 3`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-pending el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 4`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-danger el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 5`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-success el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 6`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-warning el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 7`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-neutral el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
+
+exports[`DeprecatedStatusIndicator component > should match a snapshot 8`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-default el-deprecated-status-indicator"
+  />
+</DocumentFragment>
+`;
diff --git a/src/components/status-indicator/__tests__/status-indicator.test.tsx b/src/components/deprecated-status-indicator/__tests__/status-indicator.test.tsx
similarity index 54%
rename from src/components/status-indicator/__tests__/status-indicator.test.tsx
rename to src/components/deprecated-status-indicator/__tests__/status-indicator.test.tsx
index 0da87743..6d22aa9a 100644
--- a/src/components/status-indicator/__tests__/status-indicator.test.tsx
+++ b/src/components/deprecated-status-indicator/__tests__/status-indicator.test.tsx
@@ -1,44 +1,44 @@
 import { render } from '@testing-library/react'
-import { StatusIndicator } from '..'
+import { DeprecatedStatusIndicator } from '..'
 
-describe('StatusIndicator component', () => {
+describe('DeprecatedStatusIndicator component', () => {
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator />)
+    const wrapper = render(<DeprecatedStatusIndicator />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="primary" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="primary" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="pending" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="pending" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="danger" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="danger" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="success" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="success" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="warning" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="warning" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="neutral" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="neutral" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot', () => {
-    const wrapper = render(<StatusIndicator intent="default" />)
+    const wrapper = render(<DeprecatedStatusIndicator intent="default" />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 })
diff --git a/src/components/status-indicator/index.ts b/src/components/deprecated-status-indicator/index.ts
similarity index 100%
rename from src/components/status-indicator/index.ts
rename to src/components/deprecated-status-indicator/index.ts
diff --git a/src/components/deprecated-status-indicator/status-indicator.mdx b/src/components/deprecated-status-indicator/status-indicator.mdx
new file mode 100644
index 00000000..160f543b
--- /dev/null
+++ b/src/components/deprecated-status-indicator/status-indicator.mdx
@@ -0,0 +1,45 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
+import { DeprecatedStatusIndicator } from '.'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as DeprecatedStatusIndicatorStories from './status-indicator.stories'
+
+<Meta of={DeprecatedStatusIndicatorStories} />
+
+# Deprecated Status Indicator
+
+A small coloured circle indicator to provide quick visual reference to the status of something; be it an action, response or anything else.
+
+Props available for the React version of the component;
+
+<Controls />
+
+## Basic usage
+
+<Canvas of={DeprecatedStatusIndicatorStories.BasicUsage} />
+
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.BasicUsage} />
+
+## Intent
+
+Different intents are supported, to enable buttons to be used in different contexts
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentPrimary} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentPrimary} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentNeutral} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentNeutral} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentSuccess} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentSuccess} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentPending} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentPending} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentWarning} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentWarning} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentDanger} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentDanger} />
+
+<Canvas of={DeprecatedStatusIndicatorStories.IntentDefault} />
+<RenderHtmlMarkup of={DeprecatedStatusIndicatorStories.IntentDefault} />
diff --git a/src/components/status-indicator/status-indicator.stories.tsx b/src/components/deprecated-status-indicator/status-indicator.stories.tsx
similarity index 65%
rename from src/components/status-indicator/status-indicator.stories.tsx
rename to src/components/deprecated-status-indicator/status-indicator.stories.tsx
index 5a683eb7..e9365e99 100644
--- a/src/components/status-indicator/status-indicator.stories.tsx
+++ b/src/components/deprecated-status-indicator/status-indicator.stories.tsx
@@ -1,14 +1,14 @@
-import { StatusIndicator } from '.'
+import { DeprecatedStatusIndicator } from '.'
 
 export default {
-  title: 'StatusIndicator',
-  component: StatusIndicator,
+  title: 'DeprecatedStatusIndicator',
+  component: DeprecatedStatusIndicator,
 }
 
 export const BasicUsage = {
   render: ({}) => (
     <div>
-      <StatusIndicator />
+      <DeprecatedStatusIndicator />
       Something is happening
     </div>
   ),
@@ -19,7 +19,7 @@ export const BasicUsage = {
 export const IntentPrimary = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="primary" />
+      <DeprecatedStatusIndicator intent="primary" />
       Primary
     </div>
   ),
@@ -30,7 +30,7 @@ export const IntentPrimary = {
 export const IntentNeutral = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="neutral" />
+      <DeprecatedStatusIndicator intent="neutral" />
       Neutral
     </div>
   ),
@@ -41,7 +41,7 @@ export const IntentNeutral = {
 export const IntentSuccess = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="success" />
+      <DeprecatedStatusIndicator intent="success" />
       Success
     </div>
   ),
@@ -52,7 +52,7 @@ export const IntentSuccess = {
 export const IntentPending = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="pending" />
+      <DeprecatedStatusIndicator intent="pending" />
       Pending
     </div>
   ),
@@ -63,7 +63,7 @@ export const IntentPending = {
 export const IntentWarning = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="warning" />
+      <DeprecatedStatusIndicator intent="warning" />
       Warning
     </div>
   ),
@@ -74,7 +74,7 @@ export const IntentWarning = {
 export const IntentDanger = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="danger" />
+      <DeprecatedStatusIndicator intent="danger" />
       Danger
     </div>
   ),
@@ -85,7 +85,7 @@ export const IntentDanger = {
 export const IntentDefault = {
   render: ({}) => (
     <div>
-      <StatusIndicator intent="default" />
+      <DeprecatedStatusIndicator intent="default" />
       Default
     </div>
   ),
diff --git a/src/components/deprecated-status-indicator/status-indicator.tsx b/src/components/deprecated-status-indicator/status-indicator.tsx
new file mode 100644
index 00000000..82a9c96d
--- /dev/null
+++ b/src/components/deprecated-status-indicator/status-indicator.tsx
@@ -0,0 +1,29 @@
+import React, { FC, HTMLAttributes } from 'react'
+import { cx } from '@linaria/core'
+import { elDeprecatedShapeTag, ElDeprecatedStatusIndicator } from './__styles__'
+import { Intent, getIntentClassName } from '../../helpers/intent'
+
+/**
+ * replaced with StatusIndicatorProps
+ * @deprecated
+ */
+export interface DeprecatedStatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  intent?: Intent
+  shape?: 'circle' | 'tag'
+}
+
+/**
+ * replaced with StatusIndicator
+ * @deprecated
+ */
+export const DeprecatedStatusIndicator: FC<DeprecatedStatusIndicatorProps> = ({
+  intent = 'primary',
+  shape,
+  className,
+  ...rest
+}) => (
+  <ElDeprecatedStatusIndicator
+    className={cx(intent && getIntentClassName(intent), shape && shape === 'tag' && elDeprecatedShapeTag, className)}
+    {...rest}
+  />
+)
diff --git a/src/components/deprecated-table/table.stories.tsx b/src/components/deprecated-table/table.stories.tsx
index 3177f352..de70da2f 100644
--- a/src/components/deprecated-table/table.stories.tsx
+++ b/src/components/deprecated-table/table.stories.tsx
@@ -15,7 +15,7 @@ import { Icon } from '../icon'
 import { elSpan2, elSpan3 } from '../grid'
 import { InputGroup } from '../input-group'
 import { Button, DeprecatedButtonGroup } from '../button'
-import { StatusIndicator } from '../status-indicator'
+import { DeprecatedStatusIndicator } from '../deprecated-status-indicator'
 import { elMlAuto } from '../../styles/spacing'
 import { FormLayout, InputWrap } from '../form-layout'
 import { elIsActive } from '../../styles/states'
@@ -152,7 +152,7 @@ export const BasicCustomisationTableCells = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
         </DeprecatedTableRow>
@@ -191,7 +191,7 @@ export const ExpandingTableCellSpace = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
         </DeprecatedTableRow>
@@ -234,7 +234,7 @@ export const ExpandableContent = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
           <TableExpandableRowTriggerCell isOpen />
@@ -293,7 +293,7 @@ export const CallToActionContent = {
             £50.00
           </DeprecatedTableCell>
           <DeprecatedTableCell narrowLabel="Status">
-            <StatusIndicator intent="pending" />
+            <DeprecatedStatusIndicator intent="pending" />
             Pending
           </DeprecatedTableCell>
           <TableCtaTriggerCell icon="fileDownload" />
@@ -400,7 +400,7 @@ export const ReactShorthandUsage = {
 
             children: (
               <>
-                <StatusIndicator intent="pending" />
+                <DeprecatedStatusIndicator intent="pending" />
                 Pending
               </>
             ),
@@ -532,7 +532,7 @@ export const AdvancedCustomisationReact = {
 
             children: (
               <>
-                <StatusIndicator intent="pending" />
+                <DeprecatedStatusIndicator intent="pending" />
                 Pending
               </>
             ),
diff --git a/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap b/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
deleted file mode 100644
index ecbfaece..00000000
--- a/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
+++ /dev/null
@@ -1,65 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`StatusIndicator component > should match a snapshot 1`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-primary el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 2`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-primary el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 3`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-pending el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 4`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-danger el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 5`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-success el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 6`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-warning el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 7`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-neutral el-status-indicator"
-  />
-</DocumentFragment>
-`;
-
-exports[`StatusIndicator component > should match a snapshot 8`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-default el-status-indicator"
-  />
-</DocumentFragment>
-`;
diff --git a/src/components/status-indicator/status-indicator.mdx b/src/components/status-indicator/status-indicator.mdx
deleted file mode 100644
index 52f9e153..00000000
--- a/src/components/status-indicator/status-indicator.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
-import { StatusIndicator } from '.'
-import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
-import * as StatusIndicatorStories from './status-indicator.stories'
-
-<Meta of={StatusIndicatorStories} />
-
-# Status Indicator
-
-A small coloured circle indicator to provide quick visual reference to the status of something; be it an action, response or anything else.
-
-Props available for the React version of the component;
-
-<Controls />
-
-## Basic usage
-
-<Canvas of={StatusIndicatorStories.BasicUsage} />
-
-<RenderHtmlMarkup of={StatusIndicatorStories.BasicUsage} />
-
-## Intent
-
-Different intents are supported, to enable buttons to be used in different contexts
-
-<Canvas of={StatusIndicatorStories.IntentPrimary} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentPrimary} />
-
-<Canvas of={StatusIndicatorStories.IntentNeutral} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentNeutral} />
-
-<Canvas of={StatusIndicatorStories.IntentSuccess} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentSuccess} />
-
-<Canvas of={StatusIndicatorStories.IntentPending} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentPending} />
-
-<Canvas of={StatusIndicatorStories.IntentWarning} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentWarning} />
-
-<Canvas of={StatusIndicatorStories.IntentDanger} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentDanger} />
-
-<Canvas of={StatusIndicatorStories.IntentDefault} />
-<RenderHtmlMarkup of={StatusIndicatorStories.IntentDefault} />
diff --git a/src/components/status-indicator/status-indicator.tsx b/src/components/status-indicator/status-indicator.tsx
deleted file mode 100644
index 511bd2f3..00000000
--- a/src/components/status-indicator/status-indicator.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react'
-import { cx } from '@linaria/core'
-import { elShapeTag, ElStatusIndicator } from './__styles__'
-import { Intent, getIntentClassName } from '../../helpers/intent'
-
-export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
-  intent?: Intent
-  shape?: 'circle' | 'tag'
-}
-
-export const StatusIndicator: FC<StatusIndicatorProps> = ({ intent = 'primary', shape, className, ...rest }) => (
-  <ElStatusIndicator
-    className={cx(intent && getIntentClassName(intent), shape && shape === 'tag' && elShapeTag, className)}
-    {...rest}
-  />
-)
diff --git a/src/index.ts b/src/index.ts
index 7993408d..a73f0378 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,7 +30,7 @@ export * from './components/secondary-nav'
 export * from './components/select'
 export * from './components/searchable-dropdown'
 export * from './components/snack'
-export * from './components/status-indicator'
+export * from './components/deprecated-status-indicator'
 export * from './components/steps'
 export * from './components/deprecated-table'
 export * from './components/tabs'

From 94892361e93a566d3760c72ee73481502a5ca6b1 Mon Sep 17 00:00:00 2001
From: ss-dimasm <dimas.m@softwareseni.com>
Date: Fri, 27 Dec 2024 10:57:58 +0700
Subject: [PATCH 2/5] feat: #244 add new status indicator component

---
 .../status-indicator.test.tsx.snap            | 113 ++++++++++++++++++
 .../__tests__/status-indicator.test.tsx       |  15 +++
 .../status-indicator/status-indicator.mdx     |  23 ++++
 .../status-indicator.stories.tsx              |  41 +++++++
 .../status-indicator/status-indicator.tsx     |  35 ++++++
 src/components/status-indicator/styles.ts     |  53 ++++++++
 6 files changed, 280 insertions(+)
 create mode 100644 src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
 create mode 100644 src/components/status-indicator/__tests__/status-indicator.test.tsx
 create mode 100644 src/components/status-indicator/status-indicator.mdx
 create mode 100644 src/components/status-indicator/status-indicator.stories.tsx
 create mode 100644 src/components/status-indicator/status-indicator.tsx
 create mode 100644 src/components/status-indicator/styles.ts

diff --git a/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap b/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
new file mode 100644
index 00000000..a1633038
--- /dev/null
+++ b/src/components/status-indicator/__tests__/__snapshots__/status-indicator.test.tsx.snap
@@ -0,0 +1,113 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatusIndicator > should render as expected 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="neutral"
+    />
+    Neutral
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 2`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="success"
+    />
+    Success
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 3`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="warning"
+    />
+    Warning
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 4`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="pending"
+    />
+    Pending
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 5`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="danger"
+    />
+    Danger
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 6`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="inactive"
+    />
+    Inactive
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 7`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="accent1"
+    />
+    Accent 1
+  </div>
+</DocumentFragment>
+`;
+
+exports[`StatusIndicator > should render as expected 8`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-status-indicator"
+  >
+    <span
+      class="mocked-styled-0 el-status-indicator-shape"
+      data-variant="accent2"
+    />
+    Accent 2
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/status-indicator/__tests__/status-indicator.test.tsx b/src/components/status-indicator/__tests__/status-indicator.test.tsx
new file mode 100644
index 00000000..e322b27b
--- /dev/null
+++ b/src/components/status-indicator/__tests__/status-indicator.test.tsx
@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+import { StatusIndicator } from '../status-indicator'
+
+describe('StatusIndicator', () => {
+  it('should render as expected', () => {
+    expect(render(<StatusIndicator variant="neutral">Neutral</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="success">Success</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="warning">Warning</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="pending">Pending</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="danger">Danger</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="inactive">Inactive</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="accent1">Accent 1</StatusIndicator>).asFragment()).toMatchSnapshot()
+    expect(render(<StatusIndicator variant="accent2">Accent 2</StatusIndicator>).asFragment()).toMatchSnapshot()
+  })
+})
diff --git a/src/components/status-indicator/status-indicator.mdx b/src/components/status-indicator/status-indicator.mdx
new file mode 100644
index 00000000..a066b33e
--- /dev/null
+++ b/src/components/status-indicator/status-indicator.mdx
@@ -0,0 +1,23 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks'
+import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
+import * as StatusIndicatorStories from './status-indicator.stories'
+
+<Meta of={StatusIndicatorStories} />
+
+# Status Indicator
+
+A Status Indicator is a low-visibility component used to highlight important information.
+
+<Controls />
+
+## Default
+
+<Canvas of={StatusIndicatorStories.Default} />
+
+<RenderHtmlMarkup of={StatusIndicatorStories.Default} />
+
+## Variants
+
+<Canvas of={StatusIndicatorStories.Variants} />
+
+<RenderHtmlMarkup of={StatusIndicatorStories.Variants} />
diff --git a/src/components/status-indicator/status-indicator.stories.tsx b/src/components/status-indicator/status-indicator.stories.tsx
new file mode 100644
index 00000000..6306df46
--- /dev/null
+++ b/src/components/status-indicator/status-indicator.stories.tsx
@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/react'
+import { StatusIndicator } from './status-indicator'
+import { FlexContainer } from '../layout'
+
+const meta = {
+  title: 'Components/Status Indicator',
+  component: StatusIndicator,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['neutral', 'success', 'pending', 'warning', 'danger', 'accent1', 'accent2'],
+      description: 'Defines the status indicator style variant.',
+    },
+    className: {
+      control: 'text',
+      description: 'CSS class for additional styling',
+    },
+  },
+} satisfies Meta<typeof StatusIndicator>
+
+export default meta
+
+export const Default = {
+  args: {
+    children: 'Status Indicator',
+  },
+}
+
+export const Variants = {
+  render: ({}) => (
+    <FlexContainer style={{ gap: 'var(--spacing-7)' }}>
+      <StatusIndicator variant="neutral">Neutral</StatusIndicator>
+      <StatusIndicator variant="success">Success</StatusIndicator>
+      <StatusIndicator variant="pending">Pending</StatusIndicator>
+      <StatusIndicator variant="warning">Warning</StatusIndicator>
+      <StatusIndicator variant="danger">Danger</StatusIndicator>
+      <StatusIndicator variant="accent1">Accent 1</StatusIndicator>
+      <StatusIndicator variant="accent2">Accent 2</StatusIndicator>
+    </FlexContainer>
+  ),
+}
diff --git a/src/components/status-indicator/status-indicator.tsx b/src/components/status-indicator/status-indicator.tsx
new file mode 100644
index 00000000..786da03e
--- /dev/null
+++ b/src/components/status-indicator/status-indicator.tsx
@@ -0,0 +1,35 @@
+import { FC, HTMLAttributes, ReactNode } from 'react'
+import { ElStatusIndicator, ElStatusIndicatorShape } from './styles'
+
+export type StatusIndicatorVariant =
+  | 'neutral'
+  | 'success'
+  | 'pending'
+  | 'warning'
+  | 'danger'
+  | 'inactive'
+  | 'accent1'
+  | 'accent2'
+
+export interface StatusIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * The variant of the status indicator, used to highlight important information
+   *
+   * @default "neutral"
+   */
+  variant?: StatusIndicatorVariant
+
+  /**
+   * The related content associated with the status indicator variant
+   */
+  children: ReactNode
+}
+
+export const StatusIndicator: FC<StatusIndicatorProps> = ({ variant = 'neutral', children, ...rest }) => {
+  return (
+    <ElStatusIndicator {...rest}>
+      <ElStatusIndicatorShape data-variant={variant} />
+      {children}
+    </ElStatusIndicator>
+  )
+}
diff --git a/src/components/status-indicator/styles.ts b/src/components/status-indicator/styles.ts
new file mode 100644
index 00000000..4eb6fcfd
--- /dev/null
+++ b/src/components/status-indicator/styles.ts
@@ -0,0 +1,53 @@
+import { styled } from '@linaria/react'
+
+export const ElStatusIndicatorShape = styled.span`
+  width: var(--size-2);
+  height: var(--size-2);
+  border-radius: 100%;
+
+  &[data-variant='neutral'] {
+    background: var(--icon-info);
+  }
+
+  &[data-variant='success'] {
+    background: var(--icon-success);
+  }
+
+  &[data-variant='pending'] {
+    background: var(--icon-pending);
+  }
+
+  &[data-variant='warning'] {
+    background: var(--icon-warning);
+  }
+
+  &[data-variant='danger'] {
+    background: var(--icon-error);
+  }
+
+  &[data-variant='inactive'] {
+    background: var(--icon-secondary);
+  }
+
+  &[data-variant='accent1'] {
+    background: var(--icon-accent_1);
+  }
+
+  &[data-variant='accent2'] {
+    background: var(--icon-accent_2);
+  }
+`
+
+export const ElStatusIndicator = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+
+  color: var(--text-primary);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--line-height-sm);
+  letter-spacing: var(--letter-spacing-sm);
+`

From 4028791ff8941acd28fcd2cac79eb891550ca867 Mon Sep 17 00:00:00 2001
From: ss-dimasm <dimas.m@softwareseni.com>
Date: Fri, 27 Dec 2024 11:02:44 +0700
Subject: [PATCH 3/5] chore: add inactive in variants story

---
 src/components/status-indicator/status-indicator.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/status-indicator/status-indicator.stories.tsx b/src/components/status-indicator/status-indicator.stories.tsx
index 6306df46..f0bcd495 100644
--- a/src/components/status-indicator/status-indicator.stories.tsx
+++ b/src/components/status-indicator/status-indicator.stories.tsx
@@ -8,7 +8,7 @@ const meta = {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['neutral', 'success', 'pending', 'warning', 'danger', 'accent1', 'accent2'],
+      options: ['neutral', 'success', 'pending', 'warning', 'danger', 'inactive', 'accent1', 'accent2'],
       description: 'Defines the status indicator style variant.',
     },
     className: {
@@ -34,6 +34,7 @@ export const Variants = {
       <StatusIndicator variant="pending">Pending</StatusIndicator>
       <StatusIndicator variant="warning">Warning</StatusIndicator>
       <StatusIndicator variant="danger">Danger</StatusIndicator>
+      <StatusIndicator variant="inactive">Neutral</StatusIndicator>
       <StatusIndicator variant="accent1">Accent 1</StatusIndicator>
       <StatusIndicator variant="accent2">Accent 2</StatusIndicator>
     </FlexContainer>

From 20515f03be121007e7d13838ee5f3ebcb23822bf Mon Sep 17 00:00:00 2001
From: ss-dimasm <dimas.m@softwareseni.com>
Date: Thu, 16 Jan 2025 16:15:28 +0700
Subject: [PATCH 4/5] Merge branch with main into
 feat/#244-new-status-indicator

---
 src/components/avatar/styles.ts               |   2 +-
 .../__snapshots__/badge.test.tsx.snap         | 114 ------------------
 src/components/badge/__tests__/badge.test.tsx |  56 ---------
 src/components/badge/badge.stories.tsx        |  28 -----
 src/components/badge/badge.tsx                |  20 ---
 src/components/button/button.mdx              |   8 ++
 src/components/button/button.stories.tsx      |  38 +++++-
 src/components/button/button.tsx              | 110 +++++++++--------
 src/components/button/styles.ts               |  24 ++--
 .../__styles__/index.ts                       |   9 +-
 .../__snapshots__/badge.test.tsx.snap         | 114 ++++++++++++++++++
 .../deprecated-badge/__tests__/badge.test.tsx |  56 +++++++++
 .../{badge => deprecated-badge}/badge.mdx     |   3 +-
 .../deprecated-badge/badge.stories.tsx        |  28 +++++
 src/components/deprecated-badge/badge.tsx     |  23 ++++
 .../{badge => deprecated-badge}/index.ts      |   0
 .../__styles__/index.ts                       |   9 +-
 .../__tests__/__snapshots__/tag.test.tsx.snap |  24 ++--
 .../__tests__/tag.test.tsx                    |  26 ++--
 .../{tag => deprecated-tag}/index.ts          |   0
 .../{tag => deprecated-tag}/tag.mdx           |   2 +-
 .../{tag => deprecated-tag}/tag.stories.tsx   |  28 ++---
 src/components/deprecated-tag/tag.tsx         |  23 ++++
 .../__snapshots__/tool-tip.test.tsx.snap      |  16 ---
 src/components/dialog/styles.ts               |   2 +-
 src/components/menu/styles.ts                 |   4 +-
 src/components/nav-dropdown-button/styles.ts  |   2 +-
 src/components/nav-item/styles.ts             |   2 +-
 src/components/nav-search-button/styles.ts    |   4 +-
 .../__snapshots__/page-header.test.tsx.snap   |   8 +-
 src/components/page-header/page-header.tsx    |  12 +-
 src/components/status-indicator/index.ts      |   1 +
 src/components/table/table-toolbar/styles.ts  |   2 +-
 src/components/tag/tag.tsx                    |  20 ---
 src/index.ts                                  |   5 +-
 src/tokens/payprop/tokens.css                 |   8 +-
 src/tokens/payprop/tokens.ts                  |   8 +-
 src/tokens/reapit/tokens.css                  |   8 +-
 src/tokens/reapit/tokens.ts                   |   8 +-
 src/tokens/tokens.json                        |   6 +-
 40 files changed, 460 insertions(+), 401 deletions(-)
 delete mode 100644 src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap
 delete mode 100644 src/components/badge/__tests__/badge.test.tsx
 delete mode 100644 src/components/badge/badge.stories.tsx
 delete mode 100644 src/components/badge/badge.tsx
 rename src/components/{badge => deprecated-badge}/__styles__/index.ts (86%)
 create mode 100644 src/components/deprecated-badge/__tests__/__snapshots__/badge.test.tsx.snap
 create mode 100644 src/components/deprecated-badge/__tests__/badge.test.tsx
 rename src/components/{badge => deprecated-badge}/badge.mdx (94%)
 create mode 100644 src/components/deprecated-badge/badge.stories.tsx
 create mode 100644 src/components/deprecated-badge/badge.tsx
 rename src/components/{badge => deprecated-badge}/index.ts (100%)
 rename src/components/{tag => deprecated-tag}/__styles__/index.ts (89%)
 rename src/components/{tag => deprecated-tag}/__tests__/__snapshots__/tag.test.tsx.snap (71%)
 rename src/components/{tag => deprecated-tag}/__tests__/tag.test.tsx (54%)
 rename src/components/{tag => deprecated-tag}/index.ts (100%)
 rename src/components/{tag => deprecated-tag}/tag.mdx (98%)
 rename src/components/{tag => deprecated-tag}/tag.stories.tsx (55%)
 create mode 100644 src/components/deprecated-tag/tag.tsx
 create mode 100644 src/components/status-indicator/index.ts
 delete mode 100644 src/components/tag/tag.tsx

diff --git a/src/components/avatar/styles.ts b/src/components/avatar/styles.ts
index f1d6ca2d..933d26b4 100644
--- a/src/components/avatar/styles.ts
+++ b/src/components/avatar/styles.ts
@@ -30,7 +30,7 @@ export const ElAvatar = styled.span`
   text-align: center;
   font-family: var(--font-family);
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 
   ${baseColourDefaultStyle}
   ${baseCircleStyle}
diff --git a/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap
deleted file mode 100644
index 73bb47e1..00000000
--- a/src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap
+++ /dev/null
@@ -1,114 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Badge component > should match a snapshot 1`] = `
-<DocumentFragment>
-  <span
-    class="mocked-styled-0 el-badge"
-    role="status"
-  >
-    50%
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 1`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-primary el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 2`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-neutral el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 3`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-danger el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 4`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-success el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 5`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-warning el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 6`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-pending el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`Badge component > should match a snapshot for intent 7`] = `
-<DocumentFragment>
-  <span
-    class="el-intent-default el-badge"
-    role="status"
-  >
-    Some Content
-  </span>
-</DocumentFragment>
-`;
-
-exports[`BadgeGroup component > should match a snapshot 1`] = `
-<DocumentFragment>
-  <div
-    class="mocked-styled-1 el-badge-group"
-  >
-    <div
-      class="mocked-styled-2 el-badge-group-inner"
-    >
-      <span
-        class="el-intent-default el-badge"
-        role="status"
-      >
-        Some Content
-      </span>
-      <span
-        class="el-intent-primary el-badge"
-        role="status"
-      >
-        Some Content
-      </span>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/components/badge/__tests__/badge.test.tsx b/src/components/badge/__tests__/badge.test.tsx
deleted file mode 100644
index 0b018aad..00000000
--- a/src/components/badge/__tests__/badge.test.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { render } from '@testing-library/react'
-import { Badge, BadgeGroup } from '..'
-
-describe('Badge component', () => {
-  it('should match a snapshot', () => {
-    const wrapper = render(<Badge>50%</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="primary">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="neutral">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="danger">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="success">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="warning">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="pending">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-
-  it('should match a snapshot for intent', () => {
-    const wrapper = render(<Badge intent="default">Some Content</Badge>)
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-})
-
-describe('BadgeGroup component', () => {
-  it('should match a snapshot', () => {
-    const wrapper = render(
-      <BadgeGroup>
-        <Badge intent="default">Some Content</Badge>
-        <Badge intent="primary">Some Content</Badge>
-      </BadgeGroup>,
-    )
-    expect(wrapper.asFragment()).toMatchSnapshot()
-  })
-})
diff --git a/src/components/badge/badge.stories.tsx b/src/components/badge/badge.stories.tsx
deleted file mode 100644
index 6a1adb6b..00000000
--- a/src/components/badge/badge.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Badge, BadgeGroup } from '.'
-
-export default {
-  title: 'Badge',
-  component: Badge,
-}
-
-export const BasicUsage = {
-  render: ({}) => (
-    <BadgeGroup>
-      <Badge>100</Badge>
-    </BadgeGroup>
-  ),
-}
-
-export const WithIntent = {
-  render: ({}) => (
-    <BadgeGroup>
-      <Badge intent="primary">primary</Badge>
-      <Badge intent="neutral">neutral</Badge>
-      <Badge intent="success">success</Badge>
-      <Badge intent="pending">pending</Badge>
-      <Badge intent="warning">warning</Badge>
-      <Badge intent="danger">danger</Badge>
-      <Badge intent="default">default</Badge>
-    </BadgeGroup>
-  ),
-}
diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
deleted file mode 100644
index 0cd9cce0..00000000
--- a/src/components/badge/badge.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react'
-import { cx } from '@linaria/core'
-import { ElBadge, ElBadgeGroup, ElBadgeGroupInner } from './__styles__'
-import { Intent, getIntentClassName } from '../../helpers/intent'
-
-export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-  intent?: Intent
-}
-
-export const Badge: FC<BadgeProps> = ({ children, intent, className, ...rest }) => (
-  <ElBadge role="status" className={cx(className, intent && getIntentClassName(intent))} {...rest}>
-    {children}
-  </ElBadge>
-)
-
-export const BadgeGroup: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...rest }) => (
-  <ElBadgeGroup className={cx(className)} {...rest}>
-    <ElBadgeGroupInner>{children}</ElBadgeGroupInner>
-  </ElBadgeGroup>
-)
diff --git a/src/components/button/button.mdx b/src/components/button/button.mdx
index 13a99914..dad2fc04 100644
--- a/src/components/button/button.mdx
+++ b/src/components/button/button.mdx
@@ -58,6 +58,14 @@ With href prop, link can be displayed as button. Anchor attributes such as `targ
 <Canvas of={ButtonStories.ButtonWithHref} />
 <RenderHtmlMarkup of={ButtonStories.ButtonWithHref} />
 
+## Button With hasNoPadding
+
+The `hasNoPadding` prop is used with the `tertiary` variant of the button to demonstrate how removing padding and resetting the height can create a more minimalistic, compact button style.
+This is useful when you need a button with no extra spacing or fixed height, while maintaining the button's core functionality and appearance. The prop is designed exclusively for the tertiary variant and will not affect other button variant types.
+
+<Canvas of={ButtonStories.ButtonWithHasNoPadding} />
+<RenderHtmlMarkup of={ButtonStories.ButtonWithHasNoPadding} />
+
 ## Other attributes
 
 All other standard HTML attributes for `<button>` are supported and are passed through to the React component, e.g. type and onClick
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index 8752273f..4c8025fd 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -2,7 +2,9 @@ import { Meta } from '@storybook/react'
 import { Button } from './button'
 import { ButtonGroup } from '../button-group'
 import { action } from '@storybook/addon-actions'
-import { Icon } from '../icon'
+import { Icon, IconNames } from '../icon'
+
+const ICON_OPTIONS: IconNames[] = ['star', 'check', 'add', 'chevronDown', 'email']
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
@@ -13,8 +15,24 @@ const meta: Meta<typeof Button> = {
       options: ['primary', 'secondary', 'tertiary', 'destructive', 'busy'],
       description: 'Defines the button style variant.',
     },
-    iconLeft: { control: 'text', description: 'The icon displayed on the left side of the button.' },
-    iconRight: { control: 'text', description: 'The icon displayed on the right side of the button.' },
+    iconLeft: {
+      control: 'select', // Changed to select control
+      options: ICON_OPTIONS,
+      description: 'The icon displayed on the left side of the button.',
+      mapping: ICON_OPTIONS.reduce((acc, iconName) => {
+        acc[iconName] = <Icon icon={iconName} fontSize="1rem" />
+        return acc
+      }, {}),
+    },
+    iconRight: {
+      control: 'select', // Changed to select control
+      options: ICON_OPTIONS,
+      description: 'The icon displayed on the right side of the button.',
+      mapping: ICON_OPTIONS.reduce((acc, iconName) => {
+        acc[iconName] = <Icon icon={iconName} fontSize="1rem" />
+        return acc
+      }, {}),
+    },
     size: {
       control: 'select',
       options: ['small', 'medium', 'large'],
@@ -34,6 +52,11 @@ const meta: Meta<typeof Button> = {
       control: 'text',
       description: 'CSS class for additional styling',
     },
+    hasNoPadding: {
+      control: 'boolean',
+      description:
+        'Set this prop to true to remove the padding and height adjustments for the tertiary variant of the button. This will apply no padding and reset the height, giving a more compact button appearance. It is only applicable when the button variant is tertiary.',
+    },
   },
 }
 
@@ -127,6 +150,15 @@ export const ButtonWithHref = {
   ),
 }
 
+export const ButtonWithHasNoPadding = {
+  name: 'Button With HasNoPadding',
+  args: {
+    children: 'Button Text',
+    variant: 'tertiary',
+    hasNoPadding: true,
+  },
+}
+
 export const StandardAttributes = {
   name: 'Standard attributes',
 
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index c5e2ac01..151139d2 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,12 +1,4 @@
-import {
-  HTMLAttributes,
-  AnchorHTMLAttributes,
-  ButtonHTMLAttributes,
-  FC,
-  MouseEvent,
-  MouseEventHandler,
-  ReactNode,
-} from 'react'
+import { HTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, FC, MouseEventHandler, ReactNode } from 'react'
 import {
   ElButton,
   elButtonSizeLarge,
@@ -33,7 +25,6 @@ type ButtonAsAnchorVariant = Exclude<ButtonAsButtonVariant, 'busy'>
 
 interface CommonButtonProps {
   children?: ReactNode
-  variant?: ButtonAsButtonVariant
   size?: ButtonSize
   iconLeft?: ReactNode
   iconRight?: ReactNode
@@ -42,38 +33,51 @@ interface CommonButtonProps {
   className?: string
 }
 
-interface ButtonAsButtonElementProps extends CommonButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
-  href?: never
-  target?: never
-  disabled?: boolean
-  onClick?: MouseEventHandler<HTMLButtonElement>
+// Define a specialized type for tertiary variant for prop hasNoPadding
+type TertiaryButtonProps = {
+  variant: 'tertiary'
+  hasNoPadding?: boolean // Only tertiary buttons can use hasNoPadding
 }
 
-interface ButtonAsAnchorElementProps extends CommonButtonProps, AnchorHTMLAttributes<HTMLAnchorElement> {
-  variant?: ButtonAsAnchorVariant
-  /** Button styled <a> element should always have href */
-  href: string
-  target?: string
-  rel?: string
-  /** Anchor elements cannot be disabled. Use a button element if the component needs to be in a disabled state */
-  disabled?: never
-  onClick?: MouseEventHandler<HTMLAnchorElement>
+// Define the general type for non-tertiary variants
+type NonTertiaryButtonProps = {
+  variant?: Exclude<ButtonAsButtonVariant, 'tertiary'>
+  hasNoPadding?: never // Disallow hasNoPadding for other variants
 }
 
+// Combine the above two into a Variant-specific prop type
+type VariantSpecificProps = TertiaryButtonProps | NonTertiaryButtonProps
+
+type ButtonAsButtonElementProps = CommonButtonProps &
+  VariantSpecificProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never
+    target?: never
+    disabled?: boolean
+    onClick?: MouseEventHandler<HTMLButtonElement>
+  }
+
+type ButtonAsAnchorElementProps = CommonButtonProps &
+  VariantSpecificProps &
+  AnchorHTMLAttributes<HTMLAnchorElement> & {
+    variant?: ButtonAsAnchorVariant
+    /** Button styled <a> element should always have href */
+    href: string
+    target?: string
+    rel?: string
+    /** Anchor elements cannot be disabled. Use a button element if the component needs to be in a disabled state */
+    disabled?: never
+    onClick?: MouseEventHandler<HTMLAnchorElement>
+  }
+
 export type ButtonProps = ButtonAsButtonElementProps | ButtonAsAnchorElementProps
 
 function isButtonAsButtonElement(props: ButtonProps): props is ButtonAsButtonElementProps {
   return !props.href
 }
 
-export const handleButtonClick =
-  (onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>) =>
-  (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    if (onClick) onClick(e)
-  }
-
 /** @deprecated */
-export interface FloatingButtonProps extends ButtonAsButtonElementProps {
+export type FloatingButtonProps = ButtonAsButtonElementProps & {
   icon: IconNames
 }
 
@@ -87,21 +91,23 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
   alignment?: ButtonGroupAlignment
 }
 
-export const Button: FC<ButtonProps> = ({
-  children,
-  variant,
-  size = 'medium',
-  iconLeft,
-  iconRight,
-  onClick,
-  'aria-label': ariaLabel,
-  disabled = false,
-  href,
-  target,
-  rel,
-  className,
-  ...rest
-}) => {
+export const Button: FC<ButtonProps> = (props) => {
+  const {
+    children,
+    variant,
+    size = 'medium',
+    iconLeft,
+    iconRight,
+    'aria-label': ariaLabel,
+    disabled = false,
+    href,
+    target,
+    rel,
+    className,
+    hasNoPadding,
+    ...rest
+  } = props
+
   const sizeClass = cx(
     size === 'small' && elButtonSizeSmall,
     size === 'medium' && elButtonSizeMedium,
@@ -114,14 +120,17 @@ export const Button: FC<ButtonProps> = ({
 
   const combinedClassName = cx(className, sizeClass, miscellaneousClass)
 
-  if (!isButtonAsButtonElement({ href })) {
+  if (!isButtonAsButtonElement(props)) {
     return (
       <ElAnchorButton
         href={href}
         data-variant={variant}
+        data-has-no-padding={hasNoPadding}
         className={combinedClassName}
         onClick={(e) => {
-          handleButtonClick(onClick)(e)
+          if (props.onClick) {
+            props.onClick(e)
+          }
         }}
         aria-label={ariaLabel}
         role="button"
@@ -139,10 +148,13 @@ export const Button: FC<ButtonProps> = ({
     return (
       <ElButton
         data-variant={variant}
+        data-has-no-padding={hasNoPadding}
         className={combinedClassName}
         onClick={(e) => {
           if (!disabled) {
-            handleButtonClick(onClick)(e)
+            if (props.onClick) {
+              props.onClick(e)
+            }
           } else {
             e.preventDefault() // Explicitly prevent default if disabled
           }
diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
index 9e07fdd3..b0f793de 100644
--- a/src/components/button/styles.ts
+++ b/src/components/button/styles.ts
@@ -52,7 +52,8 @@ const baseButtonStyles = `
   text-align: left;
   color: var(--text-secondary);
   background: var(--fill-white);
-  padding: var(--spacing-2) var(--spacing-4);
+  height: var(--size-9);
+  padding: 0px var(--spacing-4);
   gap: var(--spacing-1);
   border-radius: var(--corner-default);
   border: 1px solid var(--outline-default);
@@ -72,19 +73,19 @@ const baseButtonStyles = `
   }
 
   &.${elButtonIconOnly} {
-    padding: var(--spacing-2);
+    padding: 0px;
+    width: var(--size-9);
     .${elButtonSpinner} {
       margin: 0 0.125rem;
     }
   }
 
   &.${elButtonSizeSmall} {
-    padding: var(--spacing-1) var(--spacing-3);
-    .${elButtonLabel} {
-      padding: var(--spacing-half)
-    }
+    padding: 0px var(--spacing-3);
+    height: var(--size-8);
     &.${elButtonIconOnly} {
-      padding: var(--spacing-1);
+      padding: 0px;
+      width: var(--size-8);
       .${elIcon} {
           padding: var(--spacing-1);
       }
@@ -92,6 +93,10 @@ const baseButtonStyles = `
   }
 
   &.${elButtonSizeLarge} {
+    height: var(--size-10);
+    &.${elButtonIconOnly} {
+      width: var(--size-10);
+    }
     .${elButtonLabel} {
       font-size: var(--font-size-base);
       line-height: var(--line-height-base);
@@ -138,6 +143,11 @@ const baseButtonStyles = `
         color: var(--icon-secondary);
       }
     }
+    &[data-has-no-padding='true'] {
+      height: unset;
+      width: unset; /* To unset width for iconOnly button */
+      padding: 0px;
+    }
   }
 
   &[data-variant='destructive'] {
diff --git a/src/components/badge/__styles__/index.ts b/src/components/deprecated-badge/__styles__/index.ts
similarity index 86%
rename from src/components/badge/__styles__/index.ts
rename to src/components/deprecated-badge/__styles__/index.ts
index 737ed72f..2e7684b8 100644
--- a/src/components/badge/__styles__/index.ts
+++ b/src/components/deprecated-badge/__styles__/index.ts
@@ -9,7 +9,8 @@ import {
   elIntentDefault,
 } from '../../../styles/intent'
 
-export const ElBadge = styled.span`
+/** @deprecated */
+export const ElDeprecatedBadge = styled.span`
   border-radius: 0.75rem;
   display: inline-block;
   font-size: var(--font-size-small);
@@ -54,11 +55,13 @@ export const ElBadge = styled.span`
   }
 `
 
-export const ElBadgeGroup = styled.div`
+/** @deprecated */
+export const ElDeprecatedBadgeGroup = styled.div`
   display: grid;
 `
 
-export const ElBadgeGroupInner = styled.div`
+/** @deprecated */
+export const ElDeprecatedBadgeGroupInner = styled.div`
   display: flex;
   flex-wrap: wrap;
   grid-auto-flow: column;
diff --git a/src/components/deprecated-badge/__tests__/__snapshots__/badge.test.tsx.snap b/src/components/deprecated-badge/__tests__/__snapshots__/badge.test.tsx.snap
new file mode 100644
index 00000000..d8a9685e
--- /dev/null
+++ b/src/components/deprecated-badge/__tests__/__snapshots__/badge.test.tsx.snap
@@ -0,0 +1,114 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeprecatedBadge component > should match a snapshot 1`] = `
+<DocumentFragment>
+  <span
+    class="mocked-styled-0 el-deprecated-badge"
+    role="status"
+  >
+    50%
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 1`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-primary el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 2`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-neutral el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 3`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-danger el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 4`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-success el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 5`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-warning el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 6`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-pending el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadge component > should match a snapshot for intent 7`] = `
+<DocumentFragment>
+  <span
+    class="el-intent-default el-deprecated-badge"
+    role="status"
+  >
+    Some Content
+  </span>
+</DocumentFragment>
+`;
+
+exports[`DeprecatedBadgeGroup component > should match a snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="mocked-styled-1 el-deprecated-badge-group"
+  >
+    <div
+      class="mocked-styled-2 el-deprecated-badge-group-inner"
+    >
+      <span
+        class="el-intent-default el-deprecated-badge"
+        role="status"
+      >
+        Some Content
+      </span>
+      <span
+        class="el-intent-primary el-deprecated-badge"
+        role="status"
+      >
+        Some Content
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/components/deprecated-badge/__tests__/badge.test.tsx b/src/components/deprecated-badge/__tests__/badge.test.tsx
new file mode 100644
index 00000000..a2b7f2b4
--- /dev/null
+++ b/src/components/deprecated-badge/__tests__/badge.test.tsx
@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react'
+import { DeprecatedBadge, DeprecatedBadgeGroup } from '..'
+
+describe('DeprecatedBadge component', () => {
+  it('should match a snapshot', () => {
+    const wrapper = render(<DeprecatedBadge>50%</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="primary">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="neutral">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="danger">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="success">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="warning">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="pending">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+
+  it('should match a snapshot for intent', () => {
+    const wrapper = render(<DeprecatedBadge intent="default">Some Content</DeprecatedBadge>)
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+})
+
+describe('DeprecatedBadgeGroup component', () => {
+  it('should match a snapshot', () => {
+    const wrapper = render(
+      <DeprecatedBadgeGroup>
+        <DeprecatedBadge intent="default">Some Content</DeprecatedBadge>
+        <DeprecatedBadge intent="primary">Some Content</DeprecatedBadge>
+      </DeprecatedBadgeGroup>,
+    )
+    expect(wrapper.asFragment()).toMatchSnapshot()
+  })
+})
diff --git a/src/components/badge/badge.mdx b/src/components/deprecated-badge/badge.mdx
similarity index 94%
rename from src/components/badge/badge.mdx
rename to src/components/deprecated-badge/badge.mdx
index 4520ab4f..b9ed2936 100644
--- a/src/components/badge/badge.mdx
+++ b/src/components/deprecated-badge/badge.mdx
@@ -1,11 +1,10 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
-import { Badge } from '.'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import * as BadgeStories from './badge.stories'
 
 <Meta of={BadgeStories} />
 
-# Badge
+# DeprecatedBadge
 
 A simple low impact visual indicator label. The component simply renders children and does not have any additional props.
 
diff --git a/src/components/deprecated-badge/badge.stories.tsx b/src/components/deprecated-badge/badge.stories.tsx
new file mode 100644
index 00000000..c4b8aa09
--- /dev/null
+++ b/src/components/deprecated-badge/badge.stories.tsx
@@ -0,0 +1,28 @@
+import { DeprecatedBadge, DeprecatedBadgeGroup } from '.'
+
+export default {
+  title: 'DeprecatedBadge',
+  component: DeprecatedBadge,
+}
+
+export const BasicUsage = {
+  render: ({}) => (
+    <DeprecatedBadgeGroup>
+      <DeprecatedBadge>100</DeprecatedBadge>
+    </DeprecatedBadgeGroup>
+  ),
+}
+
+export const WithIntent = {
+  render: ({}) => (
+    <DeprecatedBadgeGroup>
+      <DeprecatedBadge intent="primary">primary</DeprecatedBadge>
+      <DeprecatedBadge intent="neutral">neutral</DeprecatedBadge>
+      <DeprecatedBadge intent="success">success</DeprecatedBadge>
+      <DeprecatedBadge intent="pending">pending</DeprecatedBadge>
+      <DeprecatedBadge intent="warning">warning</DeprecatedBadge>
+      <DeprecatedBadge intent="danger">danger</DeprecatedBadge>
+      <DeprecatedBadge intent="default">default</DeprecatedBadge>
+    </DeprecatedBadgeGroup>
+  ),
+}
diff --git a/src/components/deprecated-badge/badge.tsx b/src/components/deprecated-badge/badge.tsx
new file mode 100644
index 00000000..bba7ede2
--- /dev/null
+++ b/src/components/deprecated-badge/badge.tsx
@@ -0,0 +1,23 @@
+import React, { FC, HTMLAttributes } from 'react'
+import { cx } from '@linaria/core'
+import { ElDeprecatedBadge, ElDeprecatedBadgeGroup, ElDeprecatedBadgeGroupInner } from './__styles__'
+import { Intent, getIntentClassName } from '../../helpers/intent'
+
+/** @deprecated */
+export interface DeprecatedBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  intent?: Intent
+}
+
+/** @deprecated */
+export const DeprecatedBadge: FC<DeprecatedBadgeProps> = ({ children, intent, className, ...rest }) => (
+  <ElDeprecatedBadge role="status" className={cx(className, intent && getIntentClassName(intent))} {...rest}>
+    {children}
+  </ElDeprecatedBadge>
+)
+
+/** @deprecated */
+export const DeprecatedBadgeGroup: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...rest }) => (
+  <ElDeprecatedBadgeGroup className={cx(className)} {...rest}>
+    <ElDeprecatedBadgeGroupInner>{children}</ElDeprecatedBadgeGroupInner>
+  </ElDeprecatedBadgeGroup>
+)
diff --git a/src/components/badge/index.ts b/src/components/deprecated-badge/index.ts
similarity index 100%
rename from src/components/badge/index.ts
rename to src/components/deprecated-badge/index.ts
diff --git a/src/components/tag/__styles__/index.ts b/src/components/deprecated-tag/__styles__/index.ts
similarity index 89%
rename from src/components/tag/__styles__/index.ts
rename to src/components/deprecated-tag/__styles__/index.ts
index d8148367..74a3b1e5 100644
--- a/src/components/tag/__styles__/index.ts
+++ b/src/components/deprecated-tag/__styles__/index.ts
@@ -9,7 +9,8 @@ import {
   elIntentNeutral,
 } from '../../../styles/intent'
 
-export const ElTag = styled.span`
+/** @deprecated */
+export const ElDeprecatedTag = styled.span`
   border-radius: 3rem;
   display: inline-block;
   font-size: var(--font-size-smallest);
@@ -53,11 +54,13 @@ export const ElTag = styled.span`
   }
 `
 
-export const ElTagGroup = styled.div`
+/** @deprecated */
+export const ElDeprecatedTagGroup = styled.div`
   display: grid;
 `
 
-export const ElTagGroupInner = styled.div`
+/** @deprecated */
+export const ElDeprecatedTagGroupInner = styled.div`
   display: flex;
   flex-wrap: wrap;
   grid-auto-flow: column;
diff --git a/src/components/tag/__tests__/__snapshots__/tag.test.tsx.snap b/src/components/deprecated-tag/__tests__/__snapshots__/tag.test.tsx.snap
similarity index 71%
rename from src/components/tag/__tests__/__snapshots__/tag.test.tsx.snap
rename to src/components/deprecated-tag/__tests__/__snapshots__/tag.test.tsx.snap
index 9a533d08..3647baa3 100644
--- a/src/components/tag/__tests__/__snapshots__/tag.test.tsx.snap
+++ b/src/components/deprecated-tag/__tests__/__snapshots__/tag.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tag component > should match a snapshot 1`] = `
 <DocumentFragment>
   <span
-    class="el-intent-primary el-tag"
+    class="el-intent-primary el-deprecated-tag"
   >
     Some Content
   </span>
@@ -13,7 +13,7 @@ exports[`Tag component > should match a snapshot 1`] = `
 exports[`Tag component > should match a snapshot for intent 1`] = `
 <DocumentFragment>
   <span
-    class="el-intent-primary el-tag"
+    class="el-intent-primary el-deprecated-tag"
   >
     Some Content
   </span>
@@ -23,7 +23,7 @@ exports[`Tag component > should match a snapshot for intent 1`] = `
 exports[`Tag component > should match a snapshot for intent 2`] = `
 <DocumentFragment>
   <span
-    class="el-intent-neutral el-tag"
+    class="el-intent-neutral el-deprecated-tag"
   >
     Some Content
   </span>
@@ -33,7 +33,7 @@ exports[`Tag component > should match a snapshot for intent 2`] = `
 exports[`Tag component > should match a snapshot for intent 3`] = `
 <DocumentFragment>
   <span
-    class="el-intent-danger el-tag"
+    class="el-intent-danger el-deprecated-tag"
   >
     Some Content
   </span>
@@ -43,7 +43,7 @@ exports[`Tag component > should match a snapshot for intent 3`] = `
 exports[`Tag component > should match a snapshot for intent 4`] = `
 <DocumentFragment>
   <span
-    class="el-intent-success el-tag"
+    class="el-intent-success el-deprecated-tag"
   >
     Some Content
   </span>
@@ -53,7 +53,7 @@ exports[`Tag component > should match a snapshot for intent 4`] = `
 exports[`Tag component > should match a snapshot for intent 5`] = `
 <DocumentFragment>
   <span
-    class="el-intent-warning el-tag"
+    class="el-intent-warning el-deprecated-tag"
   >
     Some Content
   </span>
@@ -63,7 +63,7 @@ exports[`Tag component > should match a snapshot for intent 5`] = `
 exports[`Tag component > should match a snapshot for intent 6`] = `
 <DocumentFragment>
   <span
-    class="el-intent-pending el-tag"
+    class="el-intent-pending el-deprecated-tag"
   >
     Some Content
   </span>
@@ -73,7 +73,7 @@ exports[`Tag component > should match a snapshot for intent 6`] = `
 exports[`Tag component > should match a snapshot for intent 7`] = `
 <DocumentFragment>
   <span
-    class="el-intent-default el-tag"
+    class="el-intent-default el-deprecated-tag"
   >
     Some Content
   </span>
@@ -83,18 +83,18 @@ exports[`Tag component > should match a snapshot for intent 7`] = `
 exports[`TagGroup component > should match a snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="mocked-styled-1 el-tag-group"
+    class="mocked-styled-1 el-deprecated-tag-group"
   >
     <div
-      class="mocked-styled-2 el-tag-group-inner"
+      class="mocked-styled-2 el-deprecated-tag-group-inner"
     >
       <span
-        class="el-intent-default el-tag"
+        class="el-intent-default el-deprecated-tag"
       >
         Some Content
       </span>
       <span
-        class="el-intent-primary el-tag"
+        class="el-intent-primary el-deprecated-tag"
       >
         Some Content
       </span>
diff --git a/src/components/tag/__tests__/tag.test.tsx b/src/components/deprecated-tag/__tests__/tag.test.tsx
similarity index 54%
rename from src/components/tag/__tests__/tag.test.tsx
rename to src/components/deprecated-tag/__tests__/tag.test.tsx
index 405410ad..72e50fc2 100644
--- a/src/components/tag/__tests__/tag.test.tsx
+++ b/src/components/deprecated-tag/__tests__/tag.test.tsx
@@ -1,44 +1,44 @@
 import { render } from '@testing-library/react'
-import { Tag, TagGroup } from '..'
+import { DeprecatedTag, DeprecatedTagGroup } from '..'
 
 describe('Tag component', () => {
   it('should match a snapshot', () => {
-    const wrapper = render(<Tag>Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag>Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="primary">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="primary">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="neutral">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="neutral">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="danger">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="danger">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="success">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="success">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="warning">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="warning">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="pending">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="pending">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 
   it('should match a snapshot for intent', () => {
-    const wrapper = render(<Tag intent="default">Some Content</Tag>)
+    const wrapper = render(<DeprecatedTag intent="default">Some Content</DeprecatedTag>)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 })
@@ -46,10 +46,10 @@ describe('Tag component', () => {
 describe('TagGroup component', () => {
   it('should match a snapshot', () => {
     const wrapper = render(
-      <TagGroup>
-        <Tag intent="default">Some Content</Tag>
-        <Tag intent="primary">Some Content</Tag>
-      </TagGroup>,
+      <DeprecatedTagGroup>
+        <DeprecatedTag intent="default">Some Content</DeprecatedTag>
+        <DeprecatedTag intent="primary">Some Content</DeprecatedTag>
+      </DeprecatedTagGroup>,
     )
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
diff --git a/src/components/tag/index.ts b/src/components/deprecated-tag/index.ts
similarity index 100%
rename from src/components/tag/index.ts
rename to src/components/deprecated-tag/index.ts
diff --git a/src/components/tag/tag.mdx b/src/components/deprecated-tag/tag.mdx
similarity index 98%
rename from src/components/tag/tag.mdx
rename to src/components/deprecated-tag/tag.mdx
index c7d6adde..11c5a475 100644
--- a/src/components/tag/tag.mdx
+++ b/src/components/deprecated-tag/tag.mdx
@@ -5,7 +5,7 @@ import * as TagStories from './tag.stories'
 
 <Meta of={TagStories} />
 
-# Tag
+# Deprecated Tag
 
 A multi purpose visual indicator label to alert users to the status of an item or action.
 
diff --git a/src/components/tag/tag.stories.tsx b/src/components/deprecated-tag/tag.stories.tsx
similarity index 55%
rename from src/components/tag/tag.stories.tsx
rename to src/components/deprecated-tag/tag.stories.tsx
index 75fba019..901b04c1 100644
--- a/src/components/tag/tag.stories.tsx
+++ b/src/components/deprecated-tag/tag.stories.tsx
@@ -1,14 +1,14 @@
-import { Tag, TagGroup } from '.'
+import { DeprecatedTag, DeprecatedTagGroup } from '.'
 
 export default {
   title: 'Tag',
-  component: Tag,
+  component: DeprecatedTag,
 }
 
 export const BasicUsage = {
   render: ({}) => (
     <div>
-      <Tag>Some Content</Tag>
+      <DeprecatedTag>Some Content</DeprecatedTag>
     </div>
   ),
 }
@@ -16,7 +16,7 @@ export const BasicUsage = {
 export const IntentPrimary = {
   render: ({}) => (
     <div>
-      <Tag intent="primary">Primary</Tag>
+      <DeprecatedTag intent="primary">Primary</DeprecatedTag>
     </div>
   ),
 
@@ -26,7 +26,7 @@ export const IntentPrimary = {
 export const IntentNeutral = {
   render: ({}) => (
     <div>
-      <Tag intent="neutral">Neutral</Tag>
+      <DeprecatedTag intent="neutral">Neutral</DeprecatedTag>
     </div>
   ),
 
@@ -36,7 +36,7 @@ export const IntentNeutral = {
 export const IntentSuccess = {
   render: ({}) => (
     <div>
-      <Tag intent="success">Success</Tag>
+      <DeprecatedTag intent="success">Success</DeprecatedTag>
     </div>
   ),
 
@@ -46,7 +46,7 @@ export const IntentSuccess = {
 export const IntentPending = {
   render: ({}) => (
     <div>
-      <Tag intent="pending">Pending</Tag>
+      <DeprecatedTag intent="pending">Pending</DeprecatedTag>
     </div>
   ),
 
@@ -56,7 +56,7 @@ export const IntentPending = {
 export const IntentWarning = {
   render: ({}) => (
     <div>
-      <Tag intent="warning">Warning</Tag>
+      <DeprecatedTag intent="warning">Warning</DeprecatedTag>
     </div>
   ),
 
@@ -66,7 +66,7 @@ export const IntentWarning = {
 export const IntentDanger = {
   render: ({}) => (
     <div>
-      <Tag intent="danger">Danger</Tag>
+      <DeprecatedTag intent="danger">Danger</DeprecatedTag>
     </div>
   ),
 
@@ -76,7 +76,7 @@ export const IntentDanger = {
 export const IntentDefault = {
   render: ({}) => (
     <div>
-      <Tag intent="default">Default</Tag>
+      <DeprecatedTag intent="default">Default</DeprecatedTag>
     </div>
   ),
 
@@ -85,9 +85,9 @@ export const IntentDefault = {
 
 export const TagGroupUsage = {
   render: ({}) => (
-    <TagGroup>
-      <Tag intent="primary">Some Content</Tag>
-      <Tag intent="default">Some Content</Tag>
-    </TagGroup>
+    <DeprecatedTagGroup>
+      <DeprecatedTag intent="primary">Some Content</DeprecatedTag>
+      <DeprecatedTag intent="default">Some Content</DeprecatedTag>
+    </DeprecatedTagGroup>
   ),
 }
diff --git a/src/components/deprecated-tag/tag.tsx b/src/components/deprecated-tag/tag.tsx
new file mode 100644
index 00000000..27c62f36
--- /dev/null
+++ b/src/components/deprecated-tag/tag.tsx
@@ -0,0 +1,23 @@
+import { cx } from '@linaria/core'
+import { FC, HTMLAttributes } from 'react'
+import { Intent, getIntentClassName } from '../../helpers/intent'
+import { ElDeprecatedTag, ElDeprecatedTagGroup, ElDeprecatedTagGroupInner } from './__styles__'
+
+/** @deprecated will be replaced by new v5 TagProps */
+export interface DeprecatedTagProps extends HTMLAttributes<HTMLSpanElement> {
+  intent?: Intent
+}
+
+/** @deprecated will be replaced by new v5 Tag */
+export const DeprecatedTag: FC<DeprecatedTagProps> = ({ intent = 'primary', children, className, ...rest }) => (
+  <ElDeprecatedTag className={cx(intent && getIntentClassName(intent), className)} {...rest}>
+    {children}
+  </ElDeprecatedTag>
+)
+
+/** @deprecated will be replaced by new v5 TagGroup */
+export const DeprecatedTagGroup: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...rest }) => (
+  <ElDeprecatedTagGroup className={cx(className)} {...rest}>
+    <ElDeprecatedTagGroupInner>{children}</ElDeprecatedTagGroupInner>
+  </ElDeprecatedTagGroup>
+)
diff --git a/src/components/deprecated-tool-tip/__tests__/__snapshots__/tool-tip.test.tsx.snap b/src/components/deprecated-tool-tip/__tests__/__snapshots__/tool-tip.test.tsx.snap
index b12b21c9..c5a79c94 100644
--- a/src/components/deprecated-tool-tip/__tests__/__snapshots__/tool-tip.test.tsx.snap
+++ b/src/components/deprecated-tool-tip/__tests__/__snapshots__/tool-tip.test.tsx.snap
@@ -15,19 +15,3 @@ exports[`DeprecatedToolTip > should match a snapshot and render children 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`ToolTip > should match a snapshot and render children 1`] = `
-<DocumentFragment>
-  <div
-    class="mocked-styled-1 el-tool-tip-container"
-  >
-    Hover here
-    <div
-      class="el-tool-tip-active el-tool-tip-child"
-      role="tooltip"
-    >
-      hello there
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/src/components/dialog/styles.ts b/src/components/dialog/styles.ts
index f293e0ef..67946a05 100644
--- a/src/components/dialog/styles.ts
+++ b/src/components/dialog/styles.ts
@@ -99,7 +99,7 @@ export const ElDialogTitle = styled.h2`
   font-family: var(--font-family, Inter);
   font-size: var(--font-size-lg, 18px);
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-lg, 24px);
   letter-spacing: var(--letter-spacing-lg, -0.18px);
 `
diff --git a/src/components/menu/styles.ts b/src/components/menu/styles.ts
index e9eaad00..8dcb25bb 100644
--- a/src/components/menu/styles.ts
+++ b/src/components/menu/styles.ts
@@ -40,7 +40,7 @@ const baseMenuItemStyles = `
   gap: var(--spacing-4);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
   color: var(--text-primary);
@@ -72,7 +72,7 @@ export const ElMenuItemGroupTitle = styled.div`
   font-family: var(--font-family);
   font-size: var(--font-size-2xs);
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-2xs);
   letter-spacing: var(--letter-spacing-2xs);
   color: var(--text-placeholder);
diff --git a/src/components/nav-dropdown-button/styles.ts b/src/components/nav-dropdown-button/styles.ts
index d5164d8c..3a5c48a3 100644
--- a/src/components/nav-dropdown-button/styles.ts
+++ b/src/components/nav-dropdown-button/styles.ts
@@ -14,7 +14,7 @@ export const ElNavDropdownButton = styled.button`
   align-items: center;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
 
diff --git a/src/components/nav-item/styles.ts b/src/components/nav-item/styles.ts
index 37a1ef7c..31e1b03a 100644
--- a/src/components/nav-item/styles.ts
+++ b/src/components/nav-item/styles.ts
@@ -8,7 +8,7 @@ export const ElNavItemLabelContainer = styled.span`
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
 `
diff --git a/src/components/nav-search-button/styles.ts b/src/components/nav-search-button/styles.ts
index d6b85e2e..bc34e733 100644
--- a/src/components/nav-search-button/styles.ts
+++ b/src/components/nav-search-button/styles.ts
@@ -59,7 +59,7 @@ const basePlaceholderStyle = `
 export const ElNavSearchButtonPlaceholder = styled.span`
   ${basePlaceholderStyle}
   font-size: var(--font-size-xs);
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   line-height: var(--line-height-xs);
   letter-spacing: var(--letter-spacing-xs);
 
@@ -70,7 +70,7 @@ export const ElNavSearchButtonPlaceholder = styled.span`
 export const ElNavSearchButtonShortcutText = styled.span`
   ${basePlaceholderStyle}
   font-size: var(--font-size-2xs);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   line-height: var(--line-height-2xs);
   letter-spacing: var(--letter-spacing-2xs);
 `
diff --git a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
index e0b92a8b..2878184a 100644
--- a/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
+++ b/src/components/page-header/__tests__/__snapshots__/page-header.test.tsx.snap
@@ -152,18 +152,18 @@ exports[`PageHeader component > should match a snapshot 1`] = `
                 Page Title
               </h1>
               <div
-                class="mocked-styled-8 el-tag-group"
+                class="mocked-styled-8 el-deprecated-tag-group"
               >
                 <div
-                  class="mocked-styled-9 el-tag-group-inner"
+                  class="mocked-styled-9 el-deprecated-tag-group-inner"
                 >
                   <span
-                    class="el-intent-primary el-tag"
+                    class="el-intent-primary el-deprecated-tag"
                   >
                     Tag 1
                   </span>
                   <span
-                    class="el-intent-primary el-tag"
+                    class="el-intent-primary el-deprecated-tag"
                   >
                     Tag 2
                   </span>
diff --git a/src/components/page-header/page-header.tsx b/src/components/page-header/page-header.tsx
index 797ac5da..2eeb131c 100644
--- a/src/components/page-header/page-header.tsx
+++ b/src/components/page-header/page-header.tsx
@@ -11,7 +11,7 @@ import {
 import { Text2XL, TextL, TextBase, TypographyProps } from '../typography'
 import { FlexContainer } from '../layout'
 import { DeprecatedAvatar, DeprecatedAvatarProps } from '../deprecated-avatar'
-import { Tag, TagGroup, TagProps } from '../tag'
+import { DeprecatedTag, DeprecatedTagGroup, DeprecatedTagProps } from '../deprecated-tag'
 import { Button, DeprecatedButtonGroup, ButtonProps } from '../button'
 import { BreadCrumb, BreadCrumbProps } from '../breadcrumb'
 import { elMb3, elMb6, elMr3 } from '../../styles/spacing'
@@ -23,7 +23,7 @@ export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {
   pageSubtitle?: TypographyProps
   pageInfo?: TypographyProps[]
   breadcrumb?: BreadCrumbProps
-  tags?: TagProps[]
+  tags?: DeprecatedTagProps[]
   buttons?: ButtonProps[]
   tabs?: TabsProps
   hasMaxWidth?: boolean
@@ -76,13 +76,13 @@ export const PageHeader: FC<PageHeaderProps> = ({
               <PageHeaderTitleContainer>
                 {pageTitle && <Text2XL className={elMr3} tag="h1" hasBoldText {...pageTitle} />}
                 {tags && (
-                  <TagGroup>
+                  <DeprecatedTagGroup>
                     {tags.map(({ children, ...rest }, index) => (
-                      <Tag key={index} {...rest}>
+                      <DeprecatedTag key={index} {...rest}>
                         {children}
-                      </Tag>
+                      </DeprecatedTag>
                     ))}
-                  </TagGroup>
+                  </DeprecatedTagGroup>
                 )}
               </PageHeaderTitleContainer>
               {pageSubtitle && <TextL tag="h2" hasBoldText {...pageSubtitle} />}
diff --git a/src/components/status-indicator/index.ts b/src/components/status-indicator/index.ts
new file mode 100644
index 00000000..b9554e5f
--- /dev/null
+++ b/src/components/status-indicator/index.ts
@@ -0,0 +1 @@
+export * from './status-indicator'
diff --git a/src/components/table/table-toolbar/styles.ts b/src/components/table/table-toolbar/styles.ts
index 8a113ca2..daa93215 100644
--- a/src/components/table/table-toolbar/styles.ts
+++ b/src/components/table/table-toolbar/styles.ts
@@ -13,7 +13,7 @@ export const ElTableToolbar = styled.div`
 export const ElTableToolbarDescription = styled.div`
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   color: var(--text-colour-text-primary);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
diff --git a/src/components/tag/tag.tsx b/src/components/tag/tag.tsx
deleted file mode 100644
index 2b0501bd..00000000
--- a/src/components/tag/tag.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { FC, HTMLAttributes } from 'react'
-import { cx } from '@linaria/core'
-import { ElTag, ElTagGroup, ElTagGroupInner } from './__styles__'
-import { Intent, getIntentClassName } from '../../helpers/intent'
-
-export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-  intent?: Intent
-}
-
-export const Tag: FC<TagProps> = ({ intent = 'primary', children, className, ...rest }) => (
-  <ElTag className={cx(intent && getIntentClassName(intent), className)} {...rest}>
-    {children}
-  </ElTag>
-)
-
-export const TagGroup: FC<HTMLAttributes<HTMLDivElement>> = ({ children, className, ...rest }) => (
-  <ElTagGroup className={cx(className)} {...rest}>
-    <ElTagGroupInner>{children}</ElTagGroupInner>
-  </ElTagGroup>
-)
diff --git a/src/index.ts b/src/index.ts
index a73f0378..7ecf8406 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -31,6 +31,7 @@ export * from './components/select'
 export * from './components/searchable-dropdown'
 export * from './components/snack'
 export * from './components/deprecated-status-indicator'
+export * from './components/status-indicator'
 export * from './components/steps'
 export * from './components/deprecated-table'
 export * from './components/tabs'
@@ -45,8 +46,8 @@ export * from './components/placeholder-image'
 export * from './components/mobile-controls'
 export * from './components/drawer'
 export * from './components/accordion'
-export * from './components/tag'
-export * from './components/badge'
+export * from './components/deprecated-tag'
+export * from './components/deprecated-badge'
 export * from './components/chip'
 export * from './components/tile'
 export * from './components/deprecated-avatar'
diff --git a/src/tokens/payprop/tokens.css b/src/tokens/payprop/tokens.css
index cda5f97b..651fb8be 100644
--- a/src/tokens/payprop/tokens.css
+++ b/src/tokens/payprop/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 06:57:57 GMT
+ * Generated on Thu, 09 Jan 2025 07:23:22 GMT
  */
 
 :root {
@@ -103,9 +103,9 @@
   --plum-200: #d0a0da;
   --plum-100: #e6d2f0;
   --plum-050: #faf4ff;
-  --font-weight-regular: Regular;
-  --font-weight-medium: Medium;
-  --font-weight-semibold: Semi Bold;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   --font-family: Inter;
   --unit-0: 0rem;
   --unit-px: 0.0625rem;
diff --git a/src/tokens/payprop/tokens.ts b/src/tokens/payprop/tokens.ts
index 50b6fe64..2794b0cf 100644
--- a/src/tokens/payprop/tokens.ts
+++ b/src/tokens/payprop/tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 06:57:57 GMT
+ * Generated on Thu, 09 Jan 2025 07:23:22 GMT
  */
 
 export const neutral900 = '#222b33'
@@ -102,9 +102,9 @@ export const plum300 = '#bd78cc'
 export const plum200 = '#d0a0da'
 export const plum100 = '#e6d2f0'
 export const plum050 = '#faf4ff'
-export const fontWeightRegular = 'Regular'
-export const fontWeightMedium = 'Medium'
-export const fontWeightSemibold = 'Semi Bold'
+export const fontWeightRegular = '400'
+export const fontWeightMedium = '500'
+export const fontWeightSemibold = '600'
 export const fontFamily = 'Inter'
 export const unit0 = '0rem'
 export const unitPx = '0.0625rem'
diff --git a/src/tokens/reapit/tokens.css b/src/tokens/reapit/tokens.css
index cda5f97b..651fb8be 100644
--- a/src/tokens/reapit/tokens.css
+++ b/src/tokens/reapit/tokens.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 06:57:57 GMT
+ * Generated on Thu, 09 Jan 2025 07:23:22 GMT
  */
 
 :root {
@@ -103,9 +103,9 @@
   --plum-200: #d0a0da;
   --plum-100: #e6d2f0;
   --plum-050: #faf4ff;
-  --font-weight-regular: Regular;
-  --font-weight-medium: Medium;
-  --font-weight-semibold: Semi Bold;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
   --font-family: Inter;
   --unit-0: 0rem;
   --unit-px: 0.0625rem;
diff --git a/src/tokens/reapit/tokens.ts b/src/tokens/reapit/tokens.ts
index 50b6fe64..2794b0cf 100644
--- a/src/tokens/reapit/tokens.ts
+++ b/src/tokens/reapit/tokens.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Dec 2024 06:57:57 GMT
+ * Generated on Thu, 09 Jan 2025 07:23:22 GMT
  */
 
 export const neutral900 = '#222b33'
@@ -102,9 +102,9 @@ export const plum300 = '#bd78cc'
 export const plum200 = '#d0a0da'
 export const plum100 = '#e6d2f0'
 export const plum050 = '#faf4ff'
-export const fontWeightRegular = 'Regular'
-export const fontWeightMedium = 'Medium'
-export const fontWeightSemibold = 'Semi Bold'
+export const fontWeightRegular = '400'
+export const fontWeightMedium = '500'
+export const fontWeightSemibold = '600'
 export const fontFamily = 'Inter'
 export const unit0 = '0rem'
 export const unitPx = '0.0625rem'
diff --git a/src/tokens/tokens.json b/src/tokens/tokens.json
index 77f2056a..05350b56 100644
--- a/src/tokens/tokens.json
+++ b/src/tokens/tokens.json
@@ -1366,19 +1366,19 @@
       "description": ""
     },
     "font-weight-regular": {
-      "value": "Regular",
+      "value": "400",
       "type": "text",
       "parent": "_Primitives/Value",
       "description": ""
     },
     "font-weight-medium": {
-      "value": "Medium",
+      "value": "500",
       "type": "text",
       "parent": "_Primitives/Value",
       "description": ""
     },
     "font-weight-semibold": {
-      "value": "Semi Bold",
+      "value": "600",
       "type": "text",
       "parent": "_Primitives/Value",
       "description": ""

From 34ffb4b7c27084fcbd2811e3bd444d5275b3af72 Mon Sep 17 00:00:00 2001
From: ss-dimasm <dimas.m@softwareseni.com>
Date: Thu, 16 Jan 2025 16:23:15 +0700
Subject: [PATCH 5/5] chore: to use font weight css variable

---
 src/components/status-indicator/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status-indicator/styles.ts b/src/components/status-indicator/styles.ts
index 4eb6fcfd..d364d354 100644
--- a/src/components/status-indicator/styles.ts
+++ b/src/components/status-indicator/styles.ts
@@ -47,7 +47,7 @@ export const ElStatusIndicator = styled.div`
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
 `