@app-studio/web 0.1.0

package/src/components/Svg/ArrowDown.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const ArrowDownSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg viewBox="0 -4.5 20 20" version="1.1" fill="#000000" {...props}>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <title>arrow_down [#338]</title> <desc>Created with Sketch.</desc>
+        <defs> </defs>
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g id="Dribbble-Light-Preview" transform="translate(-220.000000, -6684.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+              <path
+                d="M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583"
+                id="arrow_down-[#338]"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/ArrowUp.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const ArrowUpSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg width={`${size}px`} height={`${size}px`} viewBox="0 -4.5 20 20" version="1.1" fill="#000000" {...props}>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <title>arrow_up [#337]</title> <desc>Created with Sketch.</desc>
+        <defs> </defs>
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g id="Dribbble-Light-Preview" transform="translate(-260.000000, -6684.000000)" fill="#000000">
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+              <path
+                d="M223.707692,6534.63378 L223.707692,6534.63378 C224.097436,6534.22888 224.097436,6533.57338 223.707692,6533.16951 L215.444127,6524.60657 C214.66364,6523.79781 213.397472,6523.79781 212.616986,6524.60657 L204.29246,6533.23165 C203.906714,6533.6324 203.901717,6534.27962 204.282467,6534.68555 C204.671211,6535.10081 205.31179,6535.10495 205.70653,6534.69695 L213.323521,6526.80297 C213.714264,6526.39807 214.346848,6526.39807 214.737591,6526.80297 L222.294621,6534.63378 C222.684365,6535.03868 223.317949,6535.03868 223.707692,6534.63378"
+                id="arrow_up-[#337]"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/Check.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const CheckSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0" />
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round" stroke="#CCCCCC" strokeWidth="0.048" />
+      <g id="SVGRepo_iconCarrier">
+        <path d="M17.0001 9L10 16L7 13" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/Close.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const CloseSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path
+          fill={color}
+          d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+        ></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/CloseEye.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const CloseEyeSvg: React.FC<SvgProps> = ({ size = 64, color = '#2F4858', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z"
+          fill={color}
+        ></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/DustBin.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  [x: string]: any;
+}
+
+export const DustBinSvg: React.FC<SvgProps> = ({ size = 64, ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      fill="#ffffff"
+      width={`${size}px`}
+      height={`${size}px`}
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 197.516 197.516"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path d="M68.758,170.083V72.649h15v97.434H68.758z M128.758,72.649h-15v97.434h15V72.649z M140.539,0v12.631h34.885v47.746h-10.525 v137.139H32.617V60.377H22.092V12.631h34.883V0H140.539z M149.898,60.377H47.617v122.139h102.281V60.377z M125.539,27.631V15H71.975 v12.631H37.092v17.585h123.332V27.631H125.539z"></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/Edit.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const EditSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M18.3785 8.44975L8.9636 17.8648C8.6844 18.144 8.3288 18.3343 7.94161 18.4117L4.99988 19.0001L5.58823 16.0583C5.66566 15.6711 5.85597 15.3155 6.13517 15.0363L15.5501 5.62132M18.3785 8.44975L19.7927 7.03553C20.1832 6.64501 20.1832 6.01184 19.7927 5.62132L18.3785 4.20711C17.988 3.81658 17.3548 3.81658 16.9643 4.20711L15.5501 5.62132M18.3785 8.44975L15.5501 5.62132"
+          stroke={color}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        ></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/ExternalLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const ExternalLinkSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      fill={color}
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 50 50"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path d="M38.288 10.297l1.414 1.415-14.99 14.99-1.414-1.414z"></path>
+        <path d="M40 20h-2v-8h-8v-2h10z"></path>
+        <path d="M35 38H15c-1.7 0-3-1.3-3-3V15c0-1.7 1.3-3 3-3h11v2H15c-.6 0-1 .4-1 1v20c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V24h2v11c0 1.7-1.3 3-3 3z"></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/Indeterminate.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const IndeterminateSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path d="M7 12L17 12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"></path>{' '}
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/OpenEye.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const OpenEyeSvg: React.FC<SvgProps> = ({ size = 64, color = '#2F4858', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M6.30147 15.5771C4.77832 14.2684 3.6904 12.7726 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C14.1843 6 16.1261 7.07185 17.6986 8.42294C19.2218 9.73158 20.3097 11.2274 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18C9.81574 18 7.87402 16.9282 6.30147 15.5771ZM12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C2.00757 13.8624 3.23268 15.5772 4.99812 17.0941C6.75717 18.6054 9.14754 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C21.9925 10.1376 20.7674 8.42276 19.002 6.90595C17.2429 5.39462 14.8525 4 12 4ZM10 12C10 10.8954 10.8955 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8955 14 10 13.1046 10 12ZM12 8C9.7909 8 8.00004 9.79086 8.00004 12C8.00004 14.2091 9.7909 16 12 16C14.2092 16 16 14.2091 16 12C16 9.79086 14.2092 8 12 8Z"
+          fill={color}
+        ></path>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/Profile.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const ProfileSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 20 20"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <title>profile_round [#1342]</title> <desc>Created with Sketch.</desc>
+        <defs> </defs>
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g id="Dribbble-Light-Preview" transform="translate(-140.000000, -2159.000000)" fill={color}>
+            <g id="icons" transform="translate(56.000000, 160.000000)">
+              <path
+                d="M100.562548,2016.99998 L87.4381713,2016.99998 C86.7317804,2016.99998 86.2101535,2016.30298 86.4765813,2015.66198 C87.7127655,2012.69798 90.6169306,2010.99998 93.9998492,2010.99998 C97.3837885,2010.99998 100.287954,2012.69798 101.524138,2015.66198 C101.790566,2016.30298 101.268939,2016.99998 100.562548,2016.99998 M89.9166645,2004.99998 C89.9166645,2002.79398 91.7489936,2000.99998 93.9998492,2000.99998 C96.2517256,2000.99998 98.0830339,2002.79398 98.0830339,2004.99998 C98.0830339,2007.20598 96.2517256,2008.99998 93.9998492,2008.99998 C91.7489936,2008.99998 89.9166645,2007.20598 89.9166645,2004.99998 M103.955674,2016.63598 C103.213556,2013.27698 100.892265,2010.79798 97.837022,2009.67298 C99.4560048,2008.39598 100.400241,2006.33098 100.053171,2004.06998 C99.6509769,2001.44698 97.4235996,1999.34798 94.7348224,1999.04198 C91.0232075,1998.61898 87.8750721,2001.44898 87.8750721,2004.99998 C87.8750721,2006.88998 88.7692896,2008.57398 90.1636971,2009.67298 C87.1074334,2010.79798 84.7871636,2013.27698 84.044024,2016.63598 C83.7745338,2017.85698 84.7789973,2018.99998 86.0539717,2018.99998 L101.945727,2018.99998 C103.221722,2018.99998 104.226185,2017.85698 103.955674,2016.63598"
+                id="profile_round-[#1342]"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/RightArrow.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Center } from '../Layout/Center/Center';
+
+interface SvgProps {
+  size?: number;
+  color?: string;
+  [x: string]: any;
+}
+
+export const RightArrowSvg: React.FC<SvgProps> = ({ size = 64, color = 'white', ...props }) => (
+  <Center width={`${size}px`} height={`${size}px`}>
+    <svg
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 -6.5 36 36"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#000000"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <title>right-arrow</title> <desc>Created with Sketch.</desc>
+        <g id="icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+          <g
+            id="ui-gambling-website-lined-icnos-casinoshunter"
+            transform="translate(-212.000000, -159.000000)"
+            fill={color}
+            fillRule="nonzero"
+          >
+            <g id="square-filled" transform="translate(50.000000, 120.000000)">
+              <path
+                d="M187.108012,39.2902857 L197.649804,49.7417043 L197.708994,49.7959169 C197.889141,49.9745543 197.986143,50.2044182 198,50.4382227 L198,50.5617773 C197.986143,50.7955818 197.889141,51.0254457 197.708994,51.2040831 L197.6571,51.2479803 L187.108012,61.7097143 C186.717694,62.0967619 186.084865,62.0967619 185.694547,61.7097143 C185.30423,61.3226668 185.30423,60.6951387 185.694547,60.3080911 L194.702666,51.3738496 L162.99947,51.3746291 C162.447478,51.3746291 162,50.9308997 162,50.3835318 C162,49.8361639 162.447478,49.3924345 162.99947,49.3924345 L194.46779,49.3916551 L185.694547,40.6919089 C185.30423,40.3048613 185.30423,39.6773332 185.694547,39.2902857 C186.084865,38.9032381 186.717694,38.9032381 187.108012,39.2902857 Z M197.115357,50.382693 L186.401279,61.0089027 L197.002151,50.5002046 L197.002252,50.4963719 L196.943142,50.442585 L196.882737,50.382693 L197.115357,50.382693 Z"
+                id="right-arrow"
+              ></path>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </Center>
+);

package/src/components/Svg/index.tsx

@@ -0,0 +1,12 @@
+export * from './ArrowDown';
+export * from './ArrowUp';
+export * from './Check';
+export * from './Close';
+export * from './CloseEye';
+export * from './DustBin';
+export * from './Edit';
+export * from './ExternalLink';
+export * from './Indeterminate';
+export * from './OpenEye';
+export * from './Profile';
+export * from './RightArrow';

package/src/components/Text/Text/Text.props.ts

@@ -0,0 +1,84 @@
+import { CSSProperties } from 'react';
+import type { TextProps as TextAppProps } from 'app-studio';
+
+import { Headings, Size, TextWeights } from './Text.type';
+
+export interface TextProps extends Omit<TextAppProps, 'children' | 'style' | 'pointerEvents'>, CSSProperties {
+  /**
+   * The content of the text.
+   */
+  children: React.ReactNode;
+  /**
+   * Specifies the HTML heading tag to use.
+   */
+  heading?: Headings;
+  /**
+   * Determines whether the text should be displayed in italic style.
+   */
+  isItalic?: boolean;
+  /**
+   * Indicates that the text is no longer valid by applying a strikethrough style.
+   */
+  isStriked?: boolean;
+  /**
+   * Adds an underline to the text.
+   */
+  isUnderlined?: boolean;
+  /**
+   * Truncates the text and adds an ellipsis at the end if it exceeds the available space.
+   */
+  isTruncated?: boolean;
+  /**
+   * Displays the text slightly below the baseline of the surrounding text.
+   */
+  isSub?: boolean;
+  /**
+   * Displays the text slightly above the surrounding text.
+   */
+  isSup?: boolean;
+  /**
+   * The maximum number of lines to display when using text truncation.
+   */
+  maxLines?: number;
+  /**
+   * Adjusts the size of the text. Can be a predefined size or a custom number.
+   */
+  size?: Size;
+  /**
+   * Specifies the font weight of the text.
+   */
+  weight?: TextWeights;
+  /**
+   * Additional properties for customization and extension.
+   */
+  [x: string]: any;
+}
+
+export interface ContentProps {
+  /**
+   * The content to be rendered within the component.
+   */
+  children: React.ReactNode | string;
+
+  /**
+   * Optional prop indicating if the content should be displayed as a subtext.
+   */
+  isSub?: boolean;
+
+  /**
+   * Optional prop indicating if the content should be displayed as a supertext.
+   */
+  isSup?: boolean;
+}
+
+export interface TruncateTextProps {
+  /**
+   * The text to be truncated.
+   */
+  text: string;
+
+  /**
+   * The maximum number of lines to display before truncating the text.
+   */
+  maxLines?: number;
+}

package/src/components/Text/Text/Text.style.ts

@@ -0,0 +1,34 @@
+import { Headings } from './Text.type';
+
+export const HeadingSizes: Record<Headings, Record<string, number | string>> = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5,
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5,
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0,
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0,
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+};

package/src/components/Text/Text/Text.type.d.ts

@@ -0,0 +1,14 @@
+export type TextWeights =
+  | 'hairline'
+  | 'thin'
+  | 'light'
+  | 'normal'
+  | 'medium'
+  | 'semiBold'
+  | 'bold'
+  | 'extraBold'
+  | 'black';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/Text/Text/Text.view.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Element,Typography } from 'app-studio';
+
+import { ContentProps, TextProps, TruncateTextProps } from './Text.props';
+import { HeadingSizes } from './Text.style';
+
+const TextContent: React.FC<ContentProps> = ({ children, isSub, isSup }) => (
+  <>
+    {typeof children === 'string' ? (
+      <>
+        {isSub && <sup>{children}</sup>}
+        {isSup && <sup>{children}</sup>}
+        {!isSub && !isSup && <>{children}</>}
+      </>
+    ) : (
+      children
+    )}
+  </>
+);
+
+const TruncateText: React.FC<TruncateTextProps> = ({ text, maxLines = 1 }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [content, setContent] = useState(text);
+
+  useEffect(() => {
+    let textContent = content;
+    const textNode = containerRef.current;
+
+    if (textNode) {
+      const contentHeight = textNode.offsetHeight;
+
+      const comLineHeight = getComputedStyle(textNode).lineHeight;
+
+      const lineHeight: number = comLineHeight !== 'normal' ? parseFloat(comLineHeight) : 20;
+
+      const maxHeight = Math.ceil(lineHeight * maxLines);
+
+      if (contentHeight > maxHeight) {
+        textContent = textContent.slice(0, -1);
+      } else if (contentHeight === maxHeight) {
+        if (content.length !== text.length) {
+          textContent = textContent.slice(0, -3) + '...';
+        }
+      }
+
+      setContent(textContent);
+    }
+  }, [maxLines, text, containerRef, content]);
+
+  return <div ref={containerRef}>{content}</div>;
+};
+
+const TextView: React.FC<TextProps> = ({
+  children,
+  heading,
+  maxLines,
+  isItalic = false,
+  isUnderlined = false,
+  isSub = false,
+  isSup = false,
+  isStriked = false,
+  isTruncated = false,
+  weight = 'normal',
+  size = 'md',
+  ...props
+}) => {
+  const headingStyles = heading ? HeadingSizes[heading] : {};
+
+  const noLineBreak = isSub || isSup ? { display: 'inline' } : {};
+
+  const fontSize = Typography.fontSizes[size];
+
+  return (
+    <Element
+      role="text"
+      fontSize={fontSize}
+      lineHeight={Typography.lineHeights[size]}
+      fontStyle={isItalic ? 'italic' : 'normal'}
+      fontWeight={Typography.fontWeights[weight]}
+      textDecoration={isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'}
+      {...noLineBreak}
+      {...headingStyles}
+      {...props}
+    >
+      {isTruncated && maxLines && typeof children === 'string' ? (
+        <TruncateText text={children} maxLines={maxLines} />
+      ) : (
+        <TextContent isSub={isSub} isSup={isSup} {...props}>
+          {children}
+        </TextContent>
+      )}
+    </Element>
+  );
+};
+
+export default TextView;