chore: Fixed LpTag

src/components/Tag/LpTag.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import { useTheme } from "styled-components";
 import { StyledLpTag, LightText, DarkText } from "./styles";
-import { LpTypeVariants } from "./types";
+import { LpTagProps } from "./types";
 
-export interface LpTagProps {
-  variant?: LpTypeVariants;
-}
-
-const LpTag: React.FC<LpTagProps> = ({ variant = LpTypeVariants.APE, ...props }) => {
+const LpTag: React.FC<LpTagProps> = ({ variant, ...props }) => {
   const { isDark } = useTheme();
 
   return (

src/components/Tag/index.stories.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import { Meta } from "@storybook/react/types-6-0";
 import { CommunityIcon, RemoveIcon } from "../Svg";
 import Tag from "./Tag";
-import { LpTypeVariants, variants } from "./types";
+import { variants } from "./types";
 import LpTag from "./LpTag";
 
 const Row = styled.div`
@@ -39,8 +39,8 @@ export const Default: React.FC = () => {
         ))}
       </Row>
       <Row>
-        <LpTag variant={LpTypeVariants.APE} />
-        <LpTag variant={LpTypeVariants.UNI} />
+        <LpTag variant="ape" />
+        <LpTag variant="uni" />
       </Row>
     </>
   );

src/components/Tag/index.tsx

@@ -1,4 +1,4 @@
 export { default as Tag } from "./Tag";
 export { default as LpTag } from "./LpTag";
 export type { TagProps, Variants as TagVariants } from "./types";
-export { LpTypeVariants } from "./types";
+export type { LpTagVariants } from "./types";

src/components/Tag/styles.tsx

@@ -1,6 +1,6 @@
 import styled, { DefaultTheme } from "styled-components";
 import getColor from "../../util/getColor";
-import { LpTypeVariants, TagProps } from "./types";
+import { LpTagProps, TagProps } from "./types";
 
 interface ThemedProps extends TagProps {
   theme: DefaultTheme;
@@ -29,17 +29,21 @@ export const StyledTag = styled.div<ThemedProps>`
   }
 `;
 
-export const StyledLpTag = styled.div<{ variant: LpTypeVariants }>`
+interface CustomProps extends LpTagProps {
+  theme: DefaultTheme;
+}
+
+export const StyledLpTag = styled.div<CustomProps>`
   align-items: center;
-  background: ${({ theme, variant }) => theme?.colors?.lpTagBg[variant]};
+  background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagBg?.[variant]};
   border-radius: 6px;
   display: inline-flex;
   height: 15px;
   padding: 0 5px;
 `;
 
-export const LightText = styled.div<{ variant: LpTypeVariants }>`
-  background: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]};
+export const LightText = styled.div<CustomProps>`
+  background: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]};
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-transform: uppercase;
@@ -48,8 +52,8 @@ export const LightText = styled.div<{ variant: LpTypeVariants }>`
   line-height: 15px;
 `;
 
-export const DarkText = styled.div<{ variant: LpTypeVariants }>`
-  color: ${({ theme, variant }) => theme?.colors?.lpTagText[variant]};
+export const DarkText = styled.div<CustomProps>`
+  color: ${({ theme, variant = "ape" }) => theme?.colors?.lpTagText?.[variant]};
   text-transform: uppercase;
   font-size: 10px;
   font-weight: 500;

src/components/Tag/types.ts

@@ -20,7 +20,13 @@ export interface TagProps extends SpaceProps {
   outline?: boolean;
 }
 
-export enum LpTypeVariants {
-  APE = "ape",
-  UNI = "uni",
+export const lpTagVariants = {
+  APE: "ape",
+  UNI: "uni",
+} as const;
+
+export type LpTagVariants = typeof lpTagVariants[keyof typeof lpTagVariants];
+
+export interface LpTagProps extends SpaceProps {
+  variant?: LpTagVariants;
 }