@ledgerhq/react-ui 0.1.1 → 0.4.0

package/README.md

@@ -1,14 +1,16 @@
 # `@ledgerhq/react-ui`
 
-![build](https://github.com/LedgerHQ/ui/actions/workflows/react.yml/badge.svg)
+[![build](https://github.com/LedgerHQ/ui/actions/workflows/react.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/react.yml)
+[![npm](https://img.shields.io/npm/v/@ledgerhq/react-ui)](https://www.npmjs.com/package/@ledgerhq/react-ui)
+[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-react.vercel.app)
 
-#### Design and interface resources
+### Design and interface resources for React
 
-This package contains [React](https://reactjs.org/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).
+#### This package contains [React](https://reactjs.org/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).
 
 ## Reference
 
-[📚 The storybook is hosted here.](https://ledger-live-ui-react.vercel.app/)
+**[🔗 Storybook](https://ledger-live-ui-react.vercel.app/)**
 
 ## Installation
 
@@ -18,7 +20,15 @@ This package contains [React](https://reactjs.org/) components and styles built
 npm i @ledgerhq/react-ui
 ```
 
-_If the `react` packages are not installed yet:_
+### Peer dependencies
+
+This library uses [styled components](https://styled-components.com/) heavily and relies on it being installed separately (to avoid package duplication).
+
+```sh
+npm i styled-components
+```
+
+And (obviously) if React packages are not already installed:
 
 ```sh
 npm i react react-dom
@@ -49,12 +59,10 @@ import { Text, Flex, Logos } from "@ledgerhq/react-ui";
 function Hello() {
   return (
     <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-      <Text color="palette.neutral.c100">
+      <Text color="neutral.c100">
         <Logos.LedgerLiveRegular />
       </Text>
-      <Text type="h1" ff="Alpha|Medium">
-        Hello, world!
-      </Text>
+      <Text variant="h1">Hello, world!</Text>
     </Flex>
   );
 }
@@ -92,6 +100,41 @@ With webpack 5 the rule below will process the font files and save them in the `
 },
 ```
 
+#### Scoped Imports
+
+If you are using a loader that saves the fonts with custom names (for instance when using `create-react-app`), you can use the `fontMappings` prop to map the font names.
+
+```js
+// These imports return the path to the public folder where the loader saves the fonts during the build.
+import HMAlphaMono from "@ledgerhq/react-ui/assets/fonts/HMAlphaMono-Medium.woff2";
+import InterBold from "@ledgerhq/react-ui/assets/fonts/Inter-Bold.woff2";
+import InterExtraBold from "@ledgerhq/react-ui/assets/fonts/Inter-ExtraBold.woff2";
+import InterExtraLight from "@ledgerhq/react-ui/assets/fonts/Inter-ExtraLight-BETA.woff2";
+import InterLight from "@ledgerhq/react-ui/assets/fonts/Inter-Light-BETA.woff2";
+import InterMedium from "@ledgerhq/react-ui/assets/fonts/Inter-Medium.woff2";
+import InterRegular from "@ledgerhq/react-ui/assets/fonts/Inter-Regular.woff2";
+import InterSemiBold from "@ledgerhq/react-ui/assets/fonts/Inter-SemiBold.woff2";
+
+// Map the font names with the file path.
+const fontMap = {
+  "HMAlphaMono-Medium": HMAlphaMono,
+  "Inter-Bold": InterBold,
+  "Inter-ExtraBold": InterExtraBold,
+  "Inter-ExtraLight-BETA": InterExtraLight,
+  "Inter-Light-BETA": InterLight,
+  "Inter-Medium": InterMedium,
+  "Inter-Regular": InterRegular,
+  "Inter-SemiBold": InterSemiBold,
+};
+
+// The substring call is used to make the path relative (removes the prepending /).
+const fontMappings = (name) => fontMap[name].substring(1);
+
+/* … */
+
+<StyleProvider fontPath="path/to/fonts" fontMappings={fontMappings}>
+```
+
 #### Manually
 
 The `.woff2` font files are located in the `src/assets/fonts` folder.
@@ -129,12 +172,10 @@ function Root() {
   return (
     <StyleProvider fontsPath="assets" selectedPalette={palette}>
       <Flex flexDirection="column" alignItems="center" rowGap={12} p={12}>
-        <Text color="palette.neutral.c100">
+        <Text color="neutral.c100">
           <Logos.LedgerLiveRegular />
         </Text>
-        <Text type="h1" ff="Alpha|Medium">
-          Hello, world!
-        </Text>
+        <Text variant="h1">Hello, world!</Text>
         <Switch
           name="select-theme"
           checked={isLight}

package/assets/icons.d.ts

@@ -0,0 +1 @@
+export * from "@ledgerhq/icons-ui/react";

package/assets/icons.js

@@ -0,0 +1 @@
+export * from "@ledgerhq/icons-ui/react";

package/components/Chart/index.js

@@ -72,7 +72,7 @@ const defaultValue = {
 export default (_a) => {
     var { data, color, variant = defaultValue.variant, valueKey = defaultValue.valueKey, timeOptions = defaultValue.timeOptions } = _a, chartProps = __rest(_a, ["data", "color", "variant", "valueKey", "timeOptions"]);
     const theme = useTheme();
-    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.palette.neutral.c40, timeOptions }), [variant, theme.colors.palette.neutral.c40, timeOptions]);
+    const config = useMemo(() => getConfig(variant, { gridColor: theme.colors.neutral.c40, timeOptions }), [variant, theme.colors.neutral.c40, timeOptions]);
     // inject default font configuration at mount
     useEffect(() => {
         defaults.font = fontConfig;

package/components/Table/Columns.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { Props as IconProps } from "../asorted/Icon";
-import Text, { BaseTextProps } from "../asorted/Text";
+import Text, { TextProps } from "../asorted/Text";
 export interface CellProps<T> {
     elt: T;
     rowIndex: number;
@@ -16,7 +16,7 @@ export interface Column<T> {
  * A column which contains a single icon and that has a fixed width.
  */
 export declare function IconColumn<T>({ props, header, layout, }: {
-    props: (elt: T) => Pick<IconProps, "name" | "weight"> & BaseTextProps;
+    props: (elt: T) => Pick<IconProps, "name" | "weight"> & TextProps;
     header?: HeaderFn;
     layout?: string;
 }): Column<T>;

package/components/Table/Columns.js

@@ -46,8 +46,8 @@ subtitleProps, }) {
     return {
         layout: layout || "auto",
         render: ({ elt }) => (React.createElement(FlexBox, { flexDirection: "column" },
-            title && (React.createElement(Text, Object.assign({ ff: "Inter|Medium", fontSize: 4, textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
-            subtitle && (React.createElement(Text, Object.assign({ ff: "Inter|Medium", fontSize: 3, textOverflow: "ellipsis", overflow: "hidden", color: "palette.neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
+            title && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "body", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c100" }, ((titleProps && titleProps(elt)) || {})), title(elt))),
+            subtitle && (React.createElement(Text, Object.assign({ fontWeight: "medium", variant: "paragraph", textOverflow: "ellipsis", overflow: "hidden", color: "neutral.c80" }, ((subtitleProps && subtitleProps(elt)) || {})), subtitle(elt))))),
         header,
     };
 }

package/components/Table/index.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
-import { SpaceProps, ColorProps, BorderProps, FlexboxProps, GridColumnProps } from "styled-system";
+import { BorderProps, GridColumnProps } from "styled-system";
 import { Props as GridProps } from "../layout/Grid";
 import type { Column } from "./Columns";
+import { BaseStyledProps } from "../styled";
 export type { Column };
-export interface ContainerExtraProps extends SpaceProps, ColorProps, BorderProps, FlexboxProps {
+export interface ContainerExtraProps extends BorderProps, BaseStyledProps {
 }
 export interface ContainerProps extends ContainerExtraProps, GridProps {
 }

package/components/Table/index.js

@@ -11,13 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { memo, useMemo } from "react";
 import styled from "styled-components";
-import { space, color, border, flexbox, gridColumn, } from "styled-system";
+import { border, gridColumn } from "styled-system";
 import Grid from "../layout/Grid";
 export const Container = styled(Grid) `
-  ${space}
-  ${color}
   ${border}
-  ${flexbox}
 `;
 export const ExtraRowContainer = styled.div `
   ${gridColumn}

package/components/Table/stories.helper.js

@@ -4,7 +4,7 @@ import Text from "../asorted/Text";
 import { IconColumn, TextColumn } from "./Columns";
 function Header({ children }) {
     const theme = useTheme();
-    return (React.createElement(Text, { ff: "Inter|SemiBold", fontSize: 13, style: { borderBottom: `1px solid ${theme.colors.palette.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
+    return (React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", style: { borderBottom: `1px solid ${theme.colors.neutral.c40}` }, mx: -4, px: 4, pb: 8 }, children));
 }
 export const balance = {
     data: [
@@ -59,14 +59,14 @@ export const balance = {
             header: () => React.createElement(Header, null, "Evolution"),
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
-                color: elt.evolution < 0 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
         IconColumn({
             header: () => React.createElement(Header, null, "\u00A0"),
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],
@@ -145,7 +145,7 @@ export const accounts = {
         IconColumn({
             props: (elt) => ({
                 name: elt.synchronized ? "CircledCheck" : "Clock",
-                color: elt.synchronized ? "palette.success.c100" : "palette.neutral.c80",
+                color: elt.synchronized ? "success.c100" : "neutral.c80",
             }),
         }),
         TextColumn({
@@ -160,13 +160,13 @@ export const accounts = {
             layout: "1fr",
             subtitle: (elt) => (elt.evolution > 0 ? "+" : "") + elt.evolution,
             subtitleProps: (elt) => ({
-                color: elt.evolution < 0 ? "palette.error.c100" : "palette.success.c100",
+                color: elt.evolution < 0 ? "error.c100" : "success.c100",
             }),
         }),
         IconColumn({
             props: (elt) => ({
                 name: "StarSolid",
-                color: elt.starred ? "palette.neutral.c100" : "palette.neutral.c70",
+                color: elt.starred ? "neutral.c100" : "neutral.c70",
             }),
         }),
     ],

package/components/Tag/index.d.ts

@@ -1,6 +1,10 @@
 import React from "react";
-import { BorderProps, ColorProps } from "styled-system";
-export declare type Props = React.PropsWithChildren<{
+import { BorderProps } from "styled-system";
+import { TextProps } from "../asorted/Text";
+import { BaseStyledProps } from "../styled";
+export declare type Size = "large" | "medium" | "small";
+export declare type Type = "plain" | "opacity" | "outlined" | "outlinedOpacity";
+export declare type TagProps = BaseStyledProps & BorderProps & React.PropsWithChildren<{
     /**
      * Changes the appearance based on the active state.
      */
@@ -8,6 +12,15 @@ export declare type Props = React.PropsWithChildren<{
     /**
      * Tag style.
      */
-    type?: "plain" | "opacity" | "outlined";
-} & BorderProps & ColorProps>;
-export default function Tag({ children, ...props }: Props): JSX.Element;
+    type?: Type;
+    /**
+     * Size of the tag, affects the padding and the casing (uppercase for small and medium)
+     */
+    size?: Size;
+    /**
+     * Props passed to the text component, overriding props set internally by Tag component
+     */
+    textProps?: TextProps;
+    disabled?: boolean;
+}>;
+export default function Tag({ children, textProps, size, ...props }: TagProps): JSX.Element;

package/components/Tag/index.js

@@ -10,50 +10,83 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import styled from "styled-components";
-import { border, space, color } from "styled-system";
+import { border } from "styled-system";
 import Text from "../asorted/Text";
-function getColor({ type, active }) {
+import baseStyled from "../styled";
+function getColor({ type, active, disabled }) {
     switch (type) {
-        case "opacity":
-        case "outlined":
-            return "palette.primary.c90";
+        case "plain":
+            if (disabled)
+                return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
         default:
-            return active ? "palette.neutral.c00" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
     }
 }
-function getBgColor({ type, active }) {
+function getBgColor({ type, active, disabled }) {
     switch (type) {
+        case "plain":
+            return active ? (disabled ? "neutral.c70" : "primary.c90") : undefined;
         case "opacity":
-            return active ? "palette.primary.c20" : undefined;
-        case "outlined":
+            return active ? (disabled ? "neutral.c30" : "primary.c20") : undefined;
+        default:
             return;
+    }
+}
+function getBorderColor({ type, active, disabled }) {
+    if (!active)
+        return;
+    switch (type) {
+        case "outlined":
+            return disabled ? "neutral.c70" : "primary.c90";
+        case "outlinedOpacity":
+            return disabled ? "neutral.c40" : "primary.c40";
+    }
+}
+function getPadding({ size }) {
+    switch (size) {
+        case "small":
+            return "3px 5px";
+        case "medium":
+            return "6px 8px";
+        case "large":
         default:
-            return active ? "palette.primary.c90" : undefined;
+            return "9px 10px 10px";
     }
 }
-function getBorderColor({ type, active }) {
-    if (type === "outlined" && active) {
-        return "palette.primary.c90";
+function getTextProps({ size }) {
+    switch (size) {
+        case "small":
+        case "medium":
+            return {
+                variant: "tiny",
+                fontWeight: "semiBold",
+                uppercase: true,
+            };
+        case "large":
+        default:
+            return {
+                variant: "extraSmall",
+                fontWeight: "semiBold",
+            };
     }
 }
-const TagContainer = styled.div.attrs((props) => ({
+const TagContainer = baseStyled.div.attrs((props) => ({
     backgroundColor: props.bg || props.backgroundColor || getBgColor(props),
     color: props.color || getColor(props),
     borderColor: getBorderColor(props),
-    p: "7px", // TODO: use spacing from the theme when it gets updated
 })) `
   display: inline-flex;
   justify-content: center;
   border: 1px solid transparent;
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  padding: ${(p) => getPadding(p)};
   ${border}
-  ${space}
-  ${color}
 `;
 export default function Tag(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children, textProps, size = "large" } = _a, props = __rest(_a, ["children", "textProps", "size"]);
     const textColor = getColor(props);
-    return (React.createElement(TagContainer, Object.assign({}, props),
-        React.createElement(Text, { type: "tag", color: textColor }, children)));
+    const baseTextProps = getTextProps(Object.assign({ size }, props));
+    return (React.createElement(TagContainer, Object.assign({ size: size }, props),
+        React.createElement(Text, Object.assign({}, baseTextProps, { color: textColor }, (textProps ? textProps : {})), children)));
 }

package/components/animations/GlitchText/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface GlitchTextProps {
+    text: string;
+    duration?: number;
+    delay?: number;
+}
+export default function GlitchText({ text, duration, delay }: GlitchTextProps): JSX.Element;

package/components/animations/GlitchText/index.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+function makeRandomString(length) {
+    let result = "";
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+const INTERVAL = 77;
+export default function GlitchText({ text, duration = 800, delay = 500 }) {
+    const [shownText, setShownText] = useState(text);
+    useEffect(() => {
+        let frameT = 0;
+        const startFrame = Math.floor((1 + delay) / INTERVAL);
+        const totalFrames = Math.floor((delay + duration) / INTERVAL);
+        const interval = setInterval(() => {
+            if (frameT >= startFrame) {
+                if (frameT >= totalFrames) {
+                    setShownText(text);
+                    clearInterval(interval);
+                    frameT = 0;
+                    return;
+                }
+                const t1 = text.substr(0, -totalFrames + frameT + text.length);
+                const t2 = t1.length > 0 ? text.substr(t1.length, text.length) : text;
+                setShownText(t1 + makeRandomString(t2.length));
+            }
+            frameT++;
+        }, INTERVAL);
+        return () => interval && clearInterval(interval);
+    }, [delay, duration, text]);
+    return React.createElement(React.Fragment, null, shownText);
+}

package/components/asorted/Divider/index.js

@@ -2,11 +2,11 @@ import React from "react";
 import styled from "styled-components";
 const Divider = styled.div `
   display: block;
-  background: ${(p) => p.theme.colors.palette.neutral.c90};
+  background: ${(p) => p.theme.colors.neutral.c90};
   height: 1px;
 
   &[data-variant="light"] {
-    background: ${(p) => p.theme.colors.palette.neutral.c40};
+    background: ${(p) => p.theme.colors.neutral.c40};
   }
 `;
 export default ({ variant = "default" }) => React.createElement(Divider, { "data-variant": variant });

package/components/asorted/Icon/Icon.d.ts

@@ -7,4 +7,5 @@ export declare type Props = {
 };
 export declare const iconNames: string[];
 declare const Icon: ({ name, size, color, weight, }: Props) => JSX.Element | null;
+export declare const IconBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export default Icon;

package/components/asorted/Icon/Icon.js

@@ -1,5 +1,6 @@
 import * as icons from "@ledgerhq/icons-ui/react";
 import React from "react";
+import styled from "styled-components";
 export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
     const key = rawKey
         .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
@@ -8,7 +9,7 @@ export const iconNames = Array.from(Object.keys(icons).reduce((set, rawKey) => {
         set.add(key);
     return set;
 }, new Set()));
-const Icon = ({ name, size = 16, color = "currentColor", weight = "Regular", }) => {
+const Icon = ({ name, size = 16, color = "currentColor", weight = "Medium", }) => {
     const maybeIconName = `${name}${weight}`;
     if (maybeIconName in icons) {
         // @ts-expect-error FIXME I don't know how to make you happy ts
@@ -17,4 +18,10 @@ const Icon = ({ name, size = 16, color = "currentColor", weight = "Regular", })
     }
     return null;
 };
+export const IconBox = styled.div `
+  padding: ${(p) => p.theme.space[6]}px;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c40};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  display: inline-flex;
+`;
 export default Icon;

package/components/asorted/Icon/index.d.ts

@@ -1,2 +1,2 @@
-export { default, iconNames } from "./Icon";
+export { default, iconNames, IconBox } from "./Icon";
 export type { Props } from "./Icon";

package/components/asorted/Icon/index.js

@@ -1 +1 @@
-export { default, iconNames } from "./Icon";
+export { default, iconNames, IconBox } from "./Icon";

package/components/asorted/Text/index.d.ts

@@ -1,41 +1,19 @@
-import React from "react";
-import { SpaceProps, LayoutProps } from "styled-system";
-import type { Theme } from "../../../styles/theme";
+import { BaseStyledProps } from "../../styled";
+import { TextVariants } from "../../../styles/theme";
 declare type FontFamilies = "Inter|ExtraLight" | "Inter|Light" | "Inter|Regular" | "Inter|Medium" | "Inter|SemiBold" | "Inter|Bold" | "Inter|ExtraBold" | "Alpha|Medium";
-export declare type TextTypes = "h1" | "h2" | "h3" | "highlight" | "emphasis" | "body" | "cta" | "link" | "small" | "tiny" | "subTitle" | "navigation" | "tag" | "large" | "paragraph";
-export interface TextProps {
+declare type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+export interface TextProps extends BaseStyledProps {
     fontFamily?: string;
     ff?: FontFamilies;
-    fontSize?: number | string;
+    fontSize?: number | string | TextVariants;
+    variant?: TextVariants;
     textAlign?: string;
-    textTransform?: string;
-    color?: string;
-    fontWeight?: string;
-    mt?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mr?: number | string;
-    lineHeight?: string;
-    bracket?: boolean;
-    type?: TextTypes;
-    children: React.ReactNode;
-}
-export interface BaseTextProps extends SpaceProps, LayoutProps {
-    fontFamily?: string;
-    ff?: FontFamilies;
-    fontSize?: number | string;
-    textAlign?: string;
-    color?: string;
     fontWeight?: string;
     lineHeight?: string;
-    type?: TextTypes;
     textTransform?: string;
     textOverflow?: string;
+    uppercase?: boolean;
+    whiteSpace?: WhiteSpace;
 }
-declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
-    color: string;
-    className: string;
-} & BaseTextProps & {
-    theme: Theme;
-}, "className" | "color">;
+declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextProps, keyof TextProps>;
 export default Text;

package/components/asorted/Text/index.js

@@ -1,29 +1,23 @@
-import styled from "styled-components";
-import { fontSize, fontWeight, textAlign, color, space, lineHeight, letterSpacing, system, layout, } from "styled-system";
+import baseStyled from "../../styled";
+import { compose, fontSize, fontWeight, textAlign, lineHeight, letterSpacing, system, } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
+import { textVariantStyle } from "./styles";
 const uppercase = system({
     uppercase: {
         property: "textTransform",
         transform: (value) => (value ? "uppercase" : "none"),
     },
 });
-const Text = styled.span.attrs((p) => ({
-    color: p.color || p.theme.colors.palette.neutral.c100,
-    className: `${p.type ? `ll-text_${p.type} ` : ""}`,
+const Text = baseStyled.span.attrs(({ variant = "body", fontSize, color }) => ({
+    fontSize: fontSize ? fontSize : variant,
+    color: color || "neutral.c100",
 })) `
-  ${uppercase};
-  ${lineHeight};
-  ${fontFamily};
-  ${fontSize};
-  ${textAlign};
-  ${color};
-  ${fontWeight};
-  ${space};
-  ${letterSpacing};
-  ${layout}
-  ${system({
+  font-weight: 500;
+  white-space: ${(props) => { var _a; return (_a = props.whiteSpace) !== null && _a !== void 0 ? _a : "normal"; }};
+  ${(p) => textVariantStyle[p.variant || "body"]}
+  ${compose(uppercase, lineHeight, fontFamily, fontSize, textAlign, fontWeight, letterSpacing, system({
     textOverflow: true,
-})}
+}))}
   ${(p) => (p.textTransform ? `text-transform: ${p.textTransform};` : "")}
 `;
 export default Text;

package/components/asorted/Text/styles.d.ts

@@ -1,4 +1,9 @@
 import { GlobalStyleProps } from "../../../styles/global";
+import { TextVariants } from "../../../styles/theme";
 export declare const fontStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<GlobalStyleProps, import("styled-components").DefaultTheme>>;
-declare const _default: import("styled-components").FlattenSimpleInterpolation;
-export default _default;
+export declare const textVariantStyle: Record<TextVariants, {
+    fontFamily: string;
+    lineHeight?: string | number;
+    fontWeight?: number;
+    "text-transform"?: string;
+}>;