@ledgerhq/react-ui 0.1.1 → 0.4.0

package/components/asorted/Text/styles.js

@@ -1,7 +1,9 @@
 import { css } from "styled-components";
 const getFontSource = (name) => (props) => {
-    const fontsPath = props.fontsPath || "assets/fonts";
-    return `url("${fontsPath}/${name}.woff2") format("woff2")`;
+    var _a;
+    const fontsPath = (_a = props.fontsPath) !== null && _a !== void 0 ? _a : "assets/fonts";
+    const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;
+    return `url("${fontsPath}/${fontName}") format("woff2")`;
 };
 export const fontStyles = css `
   @font-face {
@@ -53,86 +55,68 @@ export const fontStyles = css `
     font-style: normal;
   }
 `;
-export default css `
-  .ll-text_h1 {
-    font-family: Alpha, Arial;
-    font-size: 36px;
-    line-height: 43.2px;
-  }
-  .ll-text_h2 {
-    font-family: Alpha, Arial;
-    font-size: 28px;
-    line-height: 33.6px;
-  }
-  .ll-text_h3 {
-    font-family: Alpha, Arial;
-    font-size: 20px;
-    line-height: 24px;
-  }
-  .ll-text_h3 {
-    font-family: Alpha, Arial;
-    font-size: 20px;
-    line-height: 24px;
-  }
-  .ll-text_large {
-    font-family: Inter, Arial;
-    font-size: 16px;
-    line-height: normal;
-  }
-  .ll-text_highlight {
-    font-family: Inter, Arial;
-    font-size: 16px;
-    line-height: 19.36px;
-  }
-  .ll-text_emphasis {
-    font-family: Inter, Arial;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .ll-text_body {
-    font-family: Inter, Arial;
-    font-size: 13px;
-    line-height: 20px;
-  }
-  .ll-text_cta {
-    font-family: Inter, Arial;
-    font-size: 13px;
-    line-height: 15.73px;
-  }
-  .ll-text_link {
-    font-family: Inter, Arial;
-    font-size: 13px;
-    line-height: 16px;
-    text-decoration: underline;
-    cursor: pointer;
-  }
-  .ll-text_small {
-    font-family: Inter, Arial;
-    font-size: 12px;
-    line-height: normal;
-  }
-  .ll-text_tiny {
-    font-family: Inter, Arial;
-    font-size: 12px;
-    line-height: 16px;
-  }
-  .ll-text_navigation {
-    font-family: Inter, Arial;
-    font-size: 12px;
-    line-height: 14.52px;
-  }
-  .ll-text_subTitle {
-    font-family: Inter, Arial;
-    font-size: 11px;
-    line-height: 13.31px;
-  }
-  .ll-text_tag {
-    font-family: Inter, Arial;
-    font-size: 10px;
-    line-height: 12.1px;
-  }
-  .ll-text_paragraph {
-    font-family: Inter, Arial;
-    font-size: 13px;
-  }
-`;
+export const textVariantStyle = {
+    h1: {
+        fontFamily: "Alpha",
+        fontWeight: 500,
+        "text-transform": "uppercase",
+    },
+    h2: {
+        fontFamily: "Alpha",
+        fontWeight: 500,
+        "text-transform": "uppercase",
+    },
+    h3: {
+        fontFamily: "Alpha",
+        fontWeight: 500,
+        "text-transform": "uppercase",
+    },
+    h4: {
+        fontFamily: "Alpha",
+        fontWeight: 500,
+        "text-transform": "uppercase",
+    },
+    h5: {
+        fontFamily: "Alpha",
+        fontWeight: 500,
+        "text-transform": "uppercase",
+    },
+    large: {
+        fontFamily: "Inter",
+    },
+    largeLineHeight: {
+        fontFamily: "Inter",
+        lineHeight: 1.7,
+    },
+    body: {
+        fontFamily: "Inter",
+    },
+    bodyLineHeight: {
+        fontFamily: "Inter",
+        lineHeight: 1.7,
+    },
+    paragraph: {
+        fontFamily: "Inter",
+    },
+    paragraphLineHeight: {
+        fontFamily: "Inter",
+        lineHeight: 1.7,
+    },
+    small: {
+        fontFamily: "Inter",
+    },
+    extraSmall: {
+        fontFamily: "Inter",
+    },
+    tiny: {
+        fontFamily: "Inter",
+    },
+    micro: {
+        fontFamily: "Inter",
+    },
+    subtitle: {
+        fontFamily: "Inter",
+        fontWeight: 600,
+        "text-transform": "uppercase",
+    },
+};

package/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/cards/Carousel/Slide.js

@@ -10,13 +10,13 @@ const Wrapper = styled(Flex) `
   padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
   padding-right: 280px; // Nb gives air to not overlap the illustration
   z-index: ${(p) => p.theme.zIndexes[8]};
-  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.palette.neutral.c100};
+  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
   background-size: contain;
   background-position: right 60px bottom;
 `;
 const Slide = ({ title, description, image, onClick }) => {
     return (React.createElement(Wrapper, { key: "key", image: image, onClick: onClick },
-        React.createElement(Text, { color: "palette.neutral.c00", ff: "Inter|Regular", fontSize: 10 }, title),
-        React.createElement(Text, { color: "palette.neutral.c00", ff: "Alpha|Medium", textTransform: "uppercase", fontSize: 20 }, description)));
+        React.createElement(Text, { variant: "tiny", color: "neutral.c00", fontWeight: "regular" }, title),
+        React.createElement(Text, { variant: "h5", color: "neutral.c00", textTransform: "uppercase" }, description)));
 };
 export default Slide;

package/components/cards/Carousel/index.js

@@ -17,7 +17,7 @@ const CarouselWrapper = styled.div `
   cursor: pointer;
   position: relative;
   flex: 1;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
 `;
 const Controllers = styled(Flex) `
   position: absolute;
@@ -25,7 +25,7 @@ const Controllers = styled(Flex) `
   right: ${(p) => p.theme.space[5]}px;
   bottom: ${(p) => p.theme.space[4]}px;
   column-gap: ${(p) => p.theme.space[4]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
 
   > div {
     &:hover {
@@ -45,7 +45,7 @@ const Bullets = styled.div `
     position: relative;
     height: ${(p) => p.theme.space[1]}px;
     width: ${(p) => p.theme.space[8]}px;
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    background: ${(p) => p.theme.colors.neutral.c00};
     opacity: 0.5;
     &:hover {
       opacity: 0.75;
@@ -71,7 +71,7 @@ const Close = styled.div `
   position: absolute;
   top: ${(p) => p.theme.space[7]}px;
   right: ${(p) => p.theme.space[5]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
   &:hover {
     opacity: 0.5;
   }
@@ -124,10 +124,10 @@ const Carousel = ({ timeout = DEFAULT_TIMEOUT, queue, isDismissed, onDismiss, di
     if (!(queue === null || queue === void 0 ? void 0 : queue.length) || isDismissed)
         return null;
     return (React.createElement(CarouselWrapper, { id: "carousel", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, wantToDismiss ? (React.createElement(DismissWrapper, null,
-        React.createElement(Text, { color: "palette.neutral.c00", type: "cta" }, dismissText),
-        React.createElement(Flex, null,
-            React.createElement(Button, { color: "palette.neutral.c00", type: "color", onClick: onDismiss }, dismissConfirmText),
-            React.createElement(Button, { color: "palette.neutral.c00", type: "main", outline: true, onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
+        React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
+        React.createElement(Flex, { columnGap: 5 },
+            React.createElement(Button, { color: "neutral.c100", backgroundColor: "neutral.c00", onClick: onDismiss }, dismissConfirmText),
+            React.createElement(Button, { outline: true, color: "neutral.c00", backgroundColor: "neutral.c100", borderColor: "neutral.c00", onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
         React.createElement(TransitionGroup, { component: null, childFactory: childFactory },
             React.createElement(TransitionSlide, { key: index, direction: direction },
                 React.createElement(Slide, Object.assign({}, queue[index])))),

package/components/cta/Button/index.d.ts

@@ -1,29 +1,41 @@
 import React from "react";
-declare type ButtonTypes = "main" | "shade" | "error" | "color";
-interface BaseProps {
+import { BaseStyledProps } from "../../styled";
+import { BordersProps } from "styled-system";
+export declare type ButtonVariants = "main" | "shade" | "error" | "color";
+export declare type IconPosition = "right" | "left";
+interface BaseProps extends BaseStyledProps, BordersProps {
     ff?: string;
     color?: string;
+    backgroundColor?: string;
     fontSize?: number;
-    type?: ButtonTypes;
+    variant?: ButtonVariants;
     outline?: boolean;
-    iconPosition?: "right" | "left";
+    iconPosition?: IconPosition;
     iconButton?: boolean;
     disabled?: boolean;
 }
-export interface ButtonProps<I = any> extends BaseProps {
-    Icon?: React.ComponentType<I>;
+export interface ButtonProps extends BaseProps {
+    Icon?: React.ComponentType<{
+        size: number;
+        color?: string;
+    }>;
     children?: React.ReactNode;
     onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
     iconSize?: number;
+    style?: React.CSSProperties;
 }
+export declare const ButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    ff: string;
-    color: string;
+    fontFamily: string;
     fontSize: number;
-} & BaseProps, "color" | "fontSize" | "ff">;
-declare const Button: ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps) => React.ReactElement;
-export declare const ExpandButton: ({ onToggle, onClick, ...props }: React.PropsWithChildren<{
-    onToggle?: ((arg0: boolean) => void) | undefined;
-    onClick?: ((arg0: React.SyntheticEvent<HTMLButtonElement>) => void) | undefined;
-}>) => React.ReactElement;
+} & BaseProps, "fontFamily" | "fontSize">;
+declare const Button: {
+    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
+    Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+};
+export declare type ExpandButtonProps = React.PropsWithChildren<{
+    onToggle?: (arg0: boolean) => void;
+    onClick?: (arg0: React.SyntheticEvent<HTMLButtonElement>) => void;
+}>;
+export declare const ExpandButton: ({ onToggle, onClick, ...props }: ExpandButtonProps) => React.ReactElement;
 export default Button;

package/components/cta/Button/index.js

@@ -11,145 +11,161 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useState } from "react";
 import styled, { css } from "styled-components";
-import { fontSize, color } from "styled-system";
+import baseStyled from "../../styled";
+import { fontSize, border, compose } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { fontSizes } from "../../../styles/theme";
 import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomRegular";
 const IconContainer = styled.div `
   display: inline-block;
-  margin-${(p) => (p.iconPosition === "left" ? "right" : "left")}: ${(p) => p.theme.space[4]}px;
+  ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
   padding-top: 0.2em;
 `;
 const getVariantColors = (p) => ({
     main: {
         outline: `
-        border-color: ${p.theme.colors.palette.neutral.c100};
-        color: ${p.theme.colors.palette.neutral.c100};
-        background-color: ${p.theme.colors.palette.neutral.c00};          
-        &:hover {
-          background-color: ${p.theme.colors.palette.neutral.c20};
+        border-color: ${p.theme.colors.neutral.c100};
+        color: ${p.theme.colors.neutral.c100};
+        background-color: ${p.theme.colors.neutral.c00};
+        &:hover, &:focus {
+          background-color: ${p.theme.colors.neutral.c20};
         }
         &:active {
-          background-color: ${p.theme.colors.palette.neutral.c30};
+          background-color: ${p.theme.colors.neutral.c30};
         }
       `,
         filled: `
-        color: ${p.theme.colors.palette.neutral.c00};
-        background-color: ${p.theme.colors.palette.neutral.c100};
-        &:hover {
-          background-color: ${p.theme.colors.palette.neutral.c90};
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
+        &:hover, &:focus {
+          background-color: ${p.theme.colors.neutral.c90};
         }
       `,
     },
     shade: `
-      border-color: ${p.theme.colors.palette.neutral.c40};
-      color: ${p.theme.colors.palette.neutral.c100};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.neutral.c40};
+      color: ${p.theme.colors.neutral.c100};
+      background-color: ${p.theme.colors.neutral.c00};
       &:focus {
-        border-color: ${p.theme.colors.palette.primary.c80};
+        border-color: ${p.theme.colors.primary.c80};
       }
 
-      &:hover {
-        background-color: ${p.theme.colors.palette.neutral.c20};
+      &:hover, &:focus {
+        background-color: ${p.theme.colors.neutral.c20};
       }
 
       &:active {
-        background-color: ${p.theme.colors.palette.neutral.c30};
-      }          
+        background-color: ${p.theme.colors.neutral.c30};
+      }
     `,
     error: {
         outline: `
-      border-color: ${p.theme.colors.palette.error.c100};
-      color: ${p.theme.colors.palette.error.c100};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.error.c100};
+      color: ${p.theme.colors.error.c100};
+      background-color: ${p.theme.colors.neutral.c00};
       &:hover {
-        background-color: ${p.theme.colors.palette.error.c10};
+        background-color: ${p.theme.colors.error.c10};
       }
       &:active {
-        background-color: ${p.theme.colors.palette.error.c30};
+        background-color: ${p.theme.colors.error.c30};
       }
     `,
         filled: `
-      color: ${p.theme.colors.palette.neutral.c00};
-      background-color: ${p.theme.colors.palette.error.c100};
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.error.c100};
       &:hover {
-        background-color: ${p.theme.colors.palette.error.c80};
+        background-color: ${p.theme.colors.error.c80};
       }
     `,
     },
     color: {
         outline: `
-      border-color: ${p.theme.colors.palette.primary.c80};
-      color: ${p.theme.colors.palette.primary.c80};
-      background-color: ${p.theme.colors.palette.neutral.c00};
+      border-color: ${p.theme.colors.primary.c80};
+      color: ${p.theme.colors.primary.c80};
+      background-color: ${p.theme.colors.neutral.c00};
       &:hover {
-        background-color: ${p.theme.colors.palette.primary.c10};
+        background-color: ${p.theme.colors.primary.c10};
       }
       &:active {
-        background-color: ${p.theme.colors.palette.primary.c20};
+        background-color: ${p.theme.colors.primary.c20};
       }
     `,
         filled: `
-      color: ${p.theme.colors.palette.neutral.c00};
-      background-color: ${p.theme.colors.palette.primary.c80};
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.primary.c80};
       &:hover {
-        background-color: ${p.theme.colors.palette.primary.c70};
+        background-color: ${p.theme.colors.primary.c70};
       }
     `,
     },
     disabled: {
         outline: `
-        border-color: ${p.theme.colors.palette.neutral.c50};
-        color: ${p.theme.colors.palette.neutral.c50};
-        background-color: ${p.theme.colors.palette.neutral.c00};          
+        border-color: ${p.theme.colors.neutral.c50};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c00};
       `,
         filled: `
-        color: ${p.theme.colors.palette.neutral.c50};
-        background-color: ${p.theme.colors.palette.neutral.c30};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c30};
       `,
     },
+    default: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: transparent;
+    &:hover {
+      text-decoration: underline;
+    }
+  `,
 });
-export const Base = styled.button.attrs((p) => {
-    var _a, _b;
+export const ButtonUnstyled = styled.button `
+  all: unset;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+export const Base = baseStyled.button.attrs((p) => {
+    var _a;
     return ({
-        ff: "Inter|SemiBold",
-        color: (_a = p.color) !== null && _a !== void 0 ? _a : "palette.neutral.c100",
-        fontSize: (_b = p.fontSize) !== null && _b !== void 0 ? _b : 4,
+        fontFamily: "Inter",
+        fontSize: (_a = p.fontSize) !== null && _a !== void 0 ? _a : 4,
     });
 }) `
-  ${fontFamily};
-  ${fontSize};
-  ${color};
+  background-color: transparent;
+  border-color: transparent;
   border-radius: ${(p) => p.theme.space[13]}px;
+  border-style: solid;
+  border-width: ${(p) => (p.outline || p.variant === "shade" ? 1 : 0)}px;
+  font-weight: 600;
+  ${compose(fontFamily, fontSize, border)};
   height: ${(p) => p.theme.space[13]}px;
   line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
-  border-style: solid;
-  border-width: ${(p) => (p.outline || p.type === "shade" ? 1 : 0)}px;
   text-align: center;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 2em;
-  background-color: transparent;
-  border-color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
-  &:focus {
-    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.palette.primary.c60};
+  &:active {
+    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.primary.c60};
   }
 
   ${(p) => {
     var _a;
     const variants = getVariantColors(p);
     if (p.disabled) {
-        return p.outline || p.type === "shade" ? variants.disabled.outline : variants.disabled.filled;
+        return p.outline || p.variant === "shade"
+            ? variants.disabled.outline
+            : variants.disabled.filled;
     }
-    const type = (_a = p.type) !== null && _a !== void 0 ? _a : "default";
-    switch (type) {
+    const variant = (_a = p.variant) !== null && _a !== void 0 ? _a : "default";
+    switch (variant) {
         case "main":
             return p.outline ? variants.main.outline : variants.main.filled;
         case "shade":
@@ -160,11 +176,7 @@ export const Base = styled.button.attrs((p) => {
             return p.outline ? variants.color.outline : variants.color.filled;
         case "default":
         default:
-            return `
-              &:hover {
-                text-decoration: underline;
-              }
-            `;
+            return variants.default;
     }
 }}
   ${(p) => p.iconButton
@@ -182,9 +194,7 @@ const ContentContainer = styled.div ``;
 const Button = (_a) => {
     var _b;
     var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
-    return (
-    // @ts-expect-error FIXME type button conflict
-    React.createElement(Base, Object.assign({}, props, { iconButton: !(Icon == null) && !children, onClick: onClick }),
+    return (React.createElement(Base, Object.assign({}, props, { iconButton: !(Icon == null) && !children, onClick: onClick }),
         iconPosition === "right" ? React.createElement(ContentContainer, null, children) : null,
         Icon != null ? (React.createElement(IconContainer, { iconPosition: iconPosition },
             React.createElement(Icon, { size: iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4] }))) : null,
@@ -208,4 +218,5 @@ export const ExpandButton = function ExpandButton(_a) {
             onClick != null && onClick(event);
         } })));
 };
+Button.Unstyled = ButtonUnstyled;
 export default Button;

package/components/cta/Link/index.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+import { BaseStyledProps } from "../../styled";
+export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseStyledProps & {
     Icon?: React.ComponentType<{
         size: number;
-        color: string;
+        color?: string;
     }>;
     type?: "main" | "shade" | "color";
     size?: "small" | "medium" | "large";
@@ -10,10 +11,17 @@ export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
     disabled?: boolean;
     children?: React.ReactNode;
 };
-export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export declare const Base: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, React.AnchorHTMLAttributes<HTMLAnchorElement> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+} & {
     Icon?: React.ComponentType<{
         size: number;
-        color: string;
+        color?: string | undefined;
     }> | undefined;
     type?: "main" | "color" | "shade" | undefined;
     size?: "small" | "medium" | "large" | undefined;

package/components/cta/Link/index.js

@@ -3,13 +3,14 @@ import styled from "styled-components";
 import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 import { Text } from "../../asorted";
+import baseStyled from "../../styled";
 const IconContainer = styled.div `
   ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
   display: flex;
   align-items: center;
   justify-content: center;
 `;
-export const Base = styled.a `
+export const Base = baseStyled.a `
   color: ${({ theme, disabled, type = "main" }) => getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
   cursor: pointer;
   display: inline-flex;
@@ -31,10 +32,10 @@ export const Base = styled.a `
 const LinkContainer = (props) => {
     const { Icon, iconPosition = "right", children, size = "medium" } = props;
     return (React.createElement(React.Fragment, null,
-        iconPosition === "right" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: "inherit" }, children)) : null,
+        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null,
         Icon ? (React.createElement(IconContainer, { iconLink: !children, iconPosition: iconPosition },
             React.createElement(Icon, { size: ctaIconSize[size], color: "currentcolor" }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { type: ctaTextType[size], fontWeight: "semibold", color: "inherit" }, children)) : null));
+        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null));
 };
 const Link = (props) => {
     const { type = "main", size = "medium" } = props;

package/components/cta/Toggle/index.js

@@ -19,6 +19,6 @@ var TypeEnum;
 const Toggle = (_a) => {
     var { checked = true } = _a, buttonProps = __rest(_a, ["checked"]);
     const type = useMemo(() => (checked ? TypeEnum.ENABLED : TypeEnum.DISABLED), [checked]);
-    return React.createElement(Button, Object.assign({ type: type, outline: type === TypeEnum.ENABLED }, buttonProps));
+    return React.createElement(Button, Object.assign({ variant: type, outline: type === TypeEnum.ENABLED }, buttonProps));
 };
 export default Toggle;

package/components/cta/getCtaStyle.d.ts

@@ -1,6 +1,6 @@
-import { TextTypes } from "../asorted/Text";
+import { TextVariants } from "../../styles/theme";
 export declare const ctaTextType: {
-    [index: string]: TextTypes;
+    [index: string]: TextVariants;
 };
 export declare const ctaIconSize: {
     [index: string]: number;

package/components/cta/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button";
 export { default as Toggle } from "./Toggle";
+export { default as Link } from "./Link";

package/components/cta/index.js

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button";
 export { default as Toggle } from "./Toggle";
+export { default as Link } from "./Link";