@cleartrip/ct-design-typography 4.0.0 → 5.1.0

package/dist/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAmB,mBAAmB,EAAqB,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAExG,eAAO,MAAM,oBAAoB,UAAW,KAAK,WAAW,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkKhF,CAAC;AAEF,eAAO,MAAM,kBAAkB,UAAW,KAAK,SAAS,mBAAmB,WA6C1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,eAAgB,MAAM;;;;;;;;;;CAWpD,CAAC;AAEF,eAAO,MAAM,mBAAmB;WAWvB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBb,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAEvD,eAAO,MAAM,oBAAoB,GAAI,OAAO,KAAK,EAAE,SAAS,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKhF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,EAAE,OAAO,mBAAmB,WAmE1E,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,YAAY,MAAM;aAGvB,SAAS,CAAC,SAAS,CAAC;;;;;;;;;CAQjD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,OAAO,KAAK,EAAE,SAAS,qBAAqB,EAAE,eAAe,OAAO,qCAmBhH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,iEAOjC;IACD,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;;;eAMqD,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;;;;eAAtB,SAAS,CAAC,WAAW,CAAC;;;;;;CAE3E,CAAC"}

package/dist/type.d.ts

@@ -1,65 +1,27 @@
 import { ReactNode } from 'react';
-import { HtmlCompositeAttributes, TypographyStyleConfigProps } from '@cleartrip/ct-design-types';
-import { CSSProperties } from 'styled-components';
-export declare enum TypographyVariant {
-    HD1 = "HD1",
-    HD2 = "HD2",
-    HD3 = "HD3",
-    HM1 = "HM1",
-    HM2 = "HM2",
-    HM3 = "HM3",
-    HM4 = "HM4",
-    B1 = "B1",
-    B2 = "B2",
-    B3 = "B3",
-    B3CAPS = "B3CAPS",
-    B4 = "B4",
-    B4CAPS = "B4CAPS",
-    P1 = "P1",
-    P2 = "P2",
-    P3 = "P3",
-    L1 = "L1",
-    L2 = "L2",
-    L3 = "L3",
-    OVERLINE = "OVERLINE",
-    TAG = "TAG"
-}
+import { TextStyle, Styles } from '@cleartrip/ct-design-types';
+import { TypographyVariant, TypographyColor } from './constants';
 export type TypographyVariantType = `${TypographyVariant}`;
-export declare enum TypographyColor {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary",
-    HEADING = "heading",
-    SUBHEADING = "subheading",
-    SUCCESS = "success",
-    ALERT = "alert",
-    WARNING = "warning",
-    DISABLED = "disabled",
-    LINK = "link",
-    NEUTRAL = "neutral",
-    LINK2 = "link2",
-    PRIMARY2 = "primary2"
-}
 export type TypographyColorType = `${TypographyColor}`;
 export type TypographyNodeElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'li';
-export interface OwnTypographyProps {
-    children?: ReactNode;
+export interface TypographyStyleConfigProps {
+    root?: TextStyle[];
+    container?: Styles[];
+}
+export interface ITypography {
+    children: ReactNode;
     variant: TypographyVariantType;
     color?: TypographyColorType;
+    isUnderlined?: boolean;
     isStriked?: boolean;
     isClickable?: boolean;
     onClick?: () => void;
-    className?: string;
-    containerClassName?: string;
     colorCode?: string;
     showInItalics?: boolean;
-    width?: string;
+    width?: TextStyle['width'];
     lineClamp?: number;
     isDisabled?: boolean;
     componentNode?: TypographyNodeElementType;
-    css?: CSSProperties;
     styleConfig?: TypographyStyleConfigProps;
 }
-export interface TypographyProps extends HtmlCompositeAttributes<OwnTypographyProps, 'P' | 'Heading' | 'Span' | 'Div' | 'LI'>, OwnTypographyProps {
-}
 //# sourceMappingURL=type.d.ts.map

package/dist/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,oBAAY,iBAAiB;IAC3B,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,MAAM,WAAW;IACjB,EAAE,OAAO;IACT,MAAM,WAAW;IACjB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,QAAQ,aAAa;IACrB,GAAG,QAAQ;CACZ;AAED,MAAM,MAAM,qBAAqB,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAE3D,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,GAAG,eAAe,EAAE,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE9G,MAAM,WAAW,kBAAkB;IAIjC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,OAAO,EAAE,qBAAqB,CAAC;IAK/B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAK5B,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAMrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAMnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAK5B,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAM1C,GAAG,CAAC,EAAE,aAAa,CAAC;IAKpB,WAAW,CAAC,EAAE,0BAA0B,CAAC;CAC1C;AAED,MAAM,WAAW,eACf,SAAQ,uBAAuB,CAAC,kBAAkB,EAAE,GAAG,GAAG,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,EAC1F,kBAAkB;CAAG"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../packages/components/Typography/src/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEjE,MAAM,MAAM,qBAAqB,GAAG,GAAG,iBAAiB,EAAE,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,GAAG,eAAe,EAAE,CAAC;AAEvD,MAAM,MAAM,yBAAyB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE9G,MAAM,WAAW,0BAA0B;IAIzC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IAInB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IAI1B,QAAQ,EAAE,SAAS,CAAC;IAKpB,OAAO,EAAE,qBAAqB,CAAC;IAK/B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAK5B,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,WAAW,CAAC,EAAE,OAAO,CAAC;IAKtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAKrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAK3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAK1C,WAAW,CAAC,EAAE,0BAA0B,CAAC;CAC1C"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@cleartrip/ct-design-typography",
-  "version": "4.0.0",
-  "description": "",
+  "version": "5.1.0",
+  "description": "Typography component with enhanced styleConfig support for RNW compatibility",
   "types": "dist/index.d.ts",
   "main": "dist/ct-design-typography.cjs.js",
+  "react-native": "src/index.ts",
   "jsnext:main": "dist/ct-design-typography.esm.js",
   "module": "dist/ct-design-typography.esm.js",
   "sideEffects": false,
@@ -12,19 +13,26 @@
     "./dist/ct-design-typography.cjs.js": "./dist/ct-design-typography.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-types": "4.0.0",
-    "@cleartrip/ct-design-theme": "4.0.0",
-    "@cleartrip/ct-design-conditional-wrap": "4.0.0",
-    "@cleartrip/ct-design-container": "4.0.0"
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@cleartrip/ct-design-theme": "5.1.0",
+    "@cleartrip/ct-design-types": "5.1.0",
+    "@cleartrip/ct-design-container": "5.1.0",
+    "@cleartrip/ct-design-conditional-wrap": "5.1.0",
+    "@cleartrip/ct-design-event-propagation": "5.1.0",
+    "@cleartrip/ct-design-common-utils": "5.1.0",
+    "@cleartrip/ct-design-style-manager": "5.1.0"
+  },
+  "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "styled-components": "^5.3.6"
+    "react-dom": ">=16.8.0"
   },
   "publishConfig": {
     "access": "public"
@@ -34,6 +42,8 @@
   "scripts": {
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Typography.native.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef } from 'react';
+
+import { Text } from 'react-native';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useNativeMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { getAccessibilityProps } from '@cleartrip/ct-design-common-utils';
+import EventCollectorProvider, { useMergeEvents } from '@cleartrip/ct-design-event-propagation';
+import { useTriggerEvents } from '@cleartrip/ct-design-event-propagation';
+import Conditional from '@cleartrip/ct-design-conditional-wrap';
+
+import { ITypography, TypographyVariantType } from './type';
+import { TypographyColor } from './constants';
+import { getTypographyStyles } from './style';
+
+const getTextType = (variant: TypographyVariantType) => {
+  const variantMapper = {
+    HD1: 'h1',
+    HD2: 'h2',
+    HD3: 'h3',
+    HM1: 'h1',
+    HM2: 'h2',
+    HM3: 'h3',
+    HM4: 'h4',
+    B1: 'p',
+    B2: 'p',
+    B3: 'p',
+    B4: 'p',
+    P1: 'p',
+    P2: 'p',
+    P3: 'p',
+    P4: 'p',
+    L1: 'p',
+    L2: 'p',
+    L3: 'p',
+    OVERLINE: 'p',
+    M4BOLD: 'p',
+    WRAPPER: 'wrapper',
+  };
+  return variantMapper[variant as keyof typeof variantMapper] as keyof HTMLElementTagNameMap;
+};
+
+const Typography = forwardRef<Text, ITypography>(
+  (
+    {
+      children,
+      color = TypographyColor.PRIMARY,
+      variant,
+      styleConfig,
+      isStriked = false,
+      lineClamp,
+      onClick,
+      isDisabled = false,
+      colorCode = '',
+    }: ITypography,
+    ref: React.ForwardedRef<Text>,
+  ) => {
+    const accessibilityProps = getAccessibilityProps(getTextType(variant));
+
+    const typographyStyles = useStyles(
+      (theme) => {
+        return {
+          root: getTypographyStyles({
+            theme: theme,
+            color,
+            variant,
+            isStriked,
+            lineClamp,
+            colorCode,
+          }),
+        };
+      },
+      [color, variant, isStriked, colorCode],
+    );
+
+    const { root: rootStyles = [] } = styleConfig || {};
+
+    const mergedTypographyStyles = useNativeMergeStyles(
+      [typographyStyles.root, ...rootStyles],
+      [typographyStyles, styleConfig?.root],
+    );
+
+    const mergedEvents = useMergeEvents({ onClick: [onClick] });
+    const { onClick: onClickEvent } = useTriggerEvents(mergedEvents);
+
+    return (
+      <Conditional
+        condition={!!onClick}
+        wrap={(children) => <EventCollectorProvider value={mergedEvents}>{children}</EventCollectorProvider>}
+      >
+        <Text
+          ref={ref}
+          {...accessibilityProps}
+          style={mergedTypographyStyles}
+          numberOfLines={lineClamp}
+          onPress={onClick ? onClickEvent : undefined}
+          allowFontScaling={false}
+          suppressHighlighting
+          disabled={isDisabled}
+        >
+          {children}
+        </Text>
+      </Conditional>
+    );
+  },
+);
+
+Typography.displayName = 'Typography';
+
+export default Typography;

package/src/Typography.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
+import { Container, IContainer } from '@cleartrip/ct-design-container';
+import ConditionalWrap from '@cleartrip/ct-design-conditional-wrap';
+import { getLineClampStyles, getTypographyStyles } from './style';
+import { TypographyVariantType, ITypography, TypographyNodeElementType } from './type';
+import { TypographyColor } from './constants';
+import { css } from '@emotion/css';
+
+const getTextType = (variant: TypographyVariantType): TypographyNodeElementType => {
+  const variantMapper = {
+    HD1: 'h1',
+    HD2: 'h2',
+    HD3: 'h3',
+    HM1: 'h1',
+    HM2: 'h2',
+    HM3: 'h3',
+    HM4: 'h4',
+    B1: 'p',
+    B2: 'p',
+    B3: 'p',
+    B4: 'p',
+    P1: 'p',
+    P2: 'p',
+    P3: 'p',
+    P4: 'p',
+    L1: 'p',
+    L2: 'p',
+    L3: 'p',
+    B4CAPS: 'p',
+    OVERLINE: 'p',
+    B3CAPS: 'p',
+    M4BOLD: 'p',
+    TAG: 'p',
+  };
+  return variantMapper[variant];
+};
+
+const Typography: React.FC<ITypography> = ({
+  children = null,
+  variant,
+  color = TypographyColor.PRIMARY,
+  isClickable,
+  isStriked = false,
+  isUnderlined = false,
+  onClick,
+  colorCode = '',
+  showInItalics = false,
+  lineClamp,
+  componentNode,
+  isDisabled = false,
+  styleConfig = {},
+}) => {
+  const theme = useTheme();
+  const parsedIsClickable = typeof isClickable === 'boolean' ? isClickable : !!onClick;
+
+  const typographyStyles = useStyles(
+    (theme) => {
+      return {
+        root: getTypographyStyles({
+          theme: theme,
+          variant,
+          color,
+          isClickable: parsedIsClickable,
+          isStriked,
+          isUnderlined,
+          colorCode,
+          showInItalics,
+          lineClamp,
+          isDisabled,
+        }),
+      };
+    },
+    [
+      variant,
+      color,
+      parsedIsClickable,
+      isStriked,
+      isUnderlined,
+      colorCode,
+      showInItalics,
+      lineClamp,
+      isDisabled,
+      theme,
+    ],
+  );
+
+  const { root: customRootStyles = [], container: customContainerStyles = [] } = styleConfig || {};
+
+  const clampClass = useMemo(() => {
+    return css(getLineClampStyles(lineClamp));
+  }, [lineClamp]);
+
+  const mergedRootStyles = useWebMergeStyles(
+    [typographyStyles.root, clampClass, ...customRootStyles],
+    [typographyStyles.root, clampClass, customRootStyles],
+  );
+
+  const ComponentToRender = componentNode || getTextType(variant);
+
+  const containerAsSupportedValues: readonly IContainer['as'][] = ['p', 'main', 'section', 'article', 'div'] as const;
+  const containerAs: IContainer['as'] =
+    componentNode && (containerAsSupportedValues as readonly string[]).includes(componentNode)
+      ? (componentNode as IContainer['as'])
+      : 'div';
+
+  return (
+    <ConditionalWrap
+      condition={parsedIsClickable}
+      wrap={(children) => (
+        <Container onClick={onClick} styleConfig={{ root: customContainerStyles }} as={containerAs}>
+          {children}
+        </Container>
+      )}
+    >
+      <ComponentToRender className={mergedRootStyles}>{children}</ComponentToRender>
+    </ConditionalWrap>
+  );
+};
+
+export default Typography;

package/src/constants.ts

@@ -0,0 +1,53 @@
+export enum TypographyVariant {
+  HD1 = 'HD1',
+  HD2 = 'HD2',
+  HD3 = 'HD3',
+  HM1 = 'HM1',
+  HM2 = 'HM2',
+  HM3 = 'HM3',
+  HM4 = 'HM4',
+  B1 = 'B1',
+  B2 = 'B2',
+  B3 = 'B3',
+  B3CAPS = 'B3CAPS',
+  B4 = 'B4',
+  B4CAPS = 'B4CAPS',
+  P1 = 'P1',
+  P2 = 'P2',
+  P3 = 'P3',
+  P4 = 'P4',
+  L1 = 'L1',
+  L2 = 'L2',
+  L3 = 'L3',
+  OVERLINE = 'OVERLINE',
+  TAG = 'TAG',
+  M4BOLD = 'M4BOLD',
+  WRAPPER = 'WRAPPER',
+}
+
+export enum TypographyColor {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  HEADING = 'heading',
+  SUBHEADING = 'subheading',
+  SUCCESS = 'success',
+  ALERT = 'alert',
+  WARNING = 'warning',
+  DISABLED = 'disabled',
+  LINK = 'link',
+  NEUTRAL = 'neutral',
+  LINK2 = 'link2',
+  PRIMARY2 = 'primary2',
+  SECONDARY2 = 'secondary2',
+  GRAPETINI = 'grapetini900',
+  PINA_COLADA750 = 'pinacolada750',
+  BRAND = 'brand',
+  ALERT500 = 'alert500',
+  NEUTRAL50 = 'neutral50',
+  MARGARITA750 = 'margarita750',
+  GREEN100 = 'green100',
+  RED100 = 'red100',
+  CORALPINK = 'coralpink',
+  WARNING500 = 'warning500',
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Typography } from './Typography';
+export type * from './type';
+export * from './constants';
+export { getTypographyStyles, getTypographyVariant } from './style';