feat: add warning text variation

src/design-system/text/text.css.ts

@@ -44,6 +44,7 @@ export const typography = recipe({
       highlight: sx({ color: '$data_blue' }),
       success: sx({ color: '$data_green' }),
       error: sx({ color: '$data_pink' }),
+      warning: sx({ color: '$data_orange' }),
     },
   },
 });

src/design-system/text/text.stories.tsx

@@ -86,6 +86,7 @@ const colors: TypographyVariants['color'][] = [
   'error',
   'success',
   'accent',
+  'warning',
 ];
 
 export const Overview = (): JSX.Element => (

src/icons/WarningIconCircleComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgWarningIconCirclecomponent = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M10 6v4m0 4h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0"
+    />
+  </svg>
+);
+export default SvgWarningIconCirclecomponent;

src/icons/index.ts

@@ -59,4 +59,5 @@ export { default as UserGroupGradientComponent } from './UserGroupGradientCompon
 export { default as UserGroupComponent } from './UserGroupComponent';
 export { default as VideoGradientComponent } from './VideoGradientComponent';
 export { default as WalletComponent } from './WalletComponent';
+export { default as WarningIconCircleComponent } from './WarningIconCircleComponent';
 export { default as WarningIconTriangleComponent } from './WarningIconTriangleComponent';