Bugfix 22 11 23

package.json

@@ -62,6 +62,7 @@
     "@reach/portal": "^0.18.0",
     "@real-wagmi/sdk": "^1.1.6",
     "@storybook/addon-themes": "^7.5.3",
+    "@styled-system/should-forward-prop": "^5.1.5",
     "@types/styled-system": "^5.1.15",
     "framer-motion": "10.11.2",
     "react": "^18.2.0",

src/__tests__/components/breadcrumbs.test.tsx

@@ -113,7 +113,7 @@ it("should render breadcrumbs and redirect with click", async () => {
           />
         </svg>
         <div
-          class="c3 css-ldvhnx"
+          class="c3 css-vurnku"
         >
           ${label}
         </div>

src/__tests__/components/tabs.test.tsx

@@ -37,7 +37,7 @@ it("should render tabs and call onChange function with correct argument", () =>
      display: -ms-flexbox;
      display: flex;
    }
-
+   
    .c1 {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
@@ -48,16 +48,16 @@ it("should render tabs and call onChange function with correct argument", () =>
      outline-offset: -1px;
      background: rgba(97,105,113,0.08);
      border-radius: 32px;
-     padding: 5px 10px;
+     padding: 3px 10px;
    }
-
+   
    .c2 {
-     padding: 10px;
+     padding: 9px 10px;
      border: none;
      border-radius: 32px;
-     font-size: 16px;
+     font-size: 14px;
      font-weight: 400;
-     line-height: 11px;
+     line-height: 10px;
      min-width: 62px;
      cursor: pointer;
      outline: none;
@@ -66,21 +66,21 @@ it("should render tabs and call onChange function with correct argument", () =>
      -webkit-transition: background 0.2s;
      transition: background 0.2s;
    }
-
+   
    .c2:disabled {
      color: #5d93b2;
    }
-
+   
    .c2:not(:last-child) {
      margin-right: 16px;
    }
-
+   
    .c2:hover,
    .c2:focus,
    .c2:disabled {
      background: rgba(175,182,201,0.08);
    }
-
+   
    <div
        class="c0 c1"
        data-testid="tabs"

src/components/Dropdown/index.tsx

@@ -1 +1,2 @@
 export { default as Dropdown } from "./Dropdown";
+export type { IDropdownProps } from "./types";

src/components/RadioButton/index.tsx

@@ -1 +1,2 @@
 export { default as RadioButton } from "./RadioButton";
+export type { IRadioButtonProps } from "./types";

src/components/Table/index.tsx

@@ -1 +1,2 @@
 export { default as Table } from "./Table";
+export type { ITableHeader, ITableProps } from "./types";

src/components/Tabs/index.tsx

@@ -1 +1,2 @@
 export { default as Tabs } from "./Tabs";
+export type { ITabsProps } from "./types";

src/components/Tabs/styles.ts

@@ -13,16 +13,16 @@ export const TabsWrap = styled(Flex)`
   outline-offset: -1px;
   background: ${({ theme }) => rgba(theme.colors.strokeGray, 0.08)};
   border-radius: 32px;
-  padding: 5px 10px;
+  padding: 3px 10px;
 `;
 
 export const TabWrap = styled.button`
-  padding: 10px;
+  padding: 9px 10px;
   border: none;
   border-radius: 32px;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 11px;
+  line-height: 10px;
   min-width: 62px;
   cursor: pointer;
   outline: none;

src/components/Text/Text.tsx

@@ -5,15 +5,18 @@ import { variant } from "styled-system";
 import { typographyVariants } from "./theme";
 import { typographies } from "./types";
 import { ReactNode } from "react";
+import shouldForwardProp from "@styled-system/should-forward-prop";
 
 type TextProps = Omit<TextPropsOriginal, "variant" | "color"> & {
-  color?: keyof ThemeColors;
+  color?: keyof ThemeColors | string;
   variant?: (typeof typographies)[keyof typeof typographies];
   children?: ReactNode;
 };
 
-const TextWrap = styled(TextOrig)<TextProps>`
-  color: ${({ theme, color }) => theme.colors[color as string] || color || theme.colors.white};
+const TextWrap = styled(TextOrig).withConfig({
+  shouldForwardProp,
+})<TextProps>`
+  color: ${({ theme, color }) => theme.colors[color] || color || theme.colors.white};
   ${variant({
     prop: "variant",
     variants: typographyVariants,

src/components/Text/index.stories.tsx

@@ -24,6 +24,8 @@ export const Text: React.FC<React.PropsWithChildren> = () => {
       <TextComponent variant="button">Button/Regular</TextComponent>
       <TextComponent variant="caption">Caption/Regular</TextComponent>
       <TextComponent variant="overline">Overline/Regular</TextComponent>
+
+      <TextComponent color="red">Red text</TextComponent>
     </Grid>
   );
 };

src/components/Tooltip/styles.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Z_INDEX } from "../../constants";
 
 export const Arrow = styled.div`
   width: 8px;
@@ -48,4 +49,6 @@ export const TooltipContainer = styled.div<{ show: boolean }>`
   word-break: break-word;
   background: ${({ theme }) => theme.colors.darkBg};
   border-radius: 8px;
+
+  z-index: ${Z_INDEX.TOOLTIP};
 `;

src/constants/index.ts

@@ -9,4 +9,5 @@ export enum SCREEN_WIDTH {
 
 export enum Z_INDEX {
   DROPDOWN = 100,
+  TOOLTIP = 1000
 }

yarn.lock

@@ -3045,7 +3045,7 @@
   dependencies:
     "@styled-system/core" "^5.1.2"
 
-"@styled-system/should-forward-prop@^5.0.0":
+"@styled-system/should-forward-prop@^5.0.0", "@styled-system/should-forward-prop@^5.1.5":
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76"
   integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q==