@ledgerhq/react-ui 0.3.1 → 0.7.0

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

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

package/components/asorted/Icon/index.js

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

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

@@ -1,6 +1,7 @@
 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";
+declare type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
 export interface TextProps extends BaseStyledProps {
     fontFamily?: string;
     ff?: FontFamilies;
@@ -12,6 +13,7 @@ export interface TextProps extends BaseStyledProps {
     textTransform?: string;
     textOverflow?: string;
     uppercase?: boolean;
+    whiteSpace?: WhiteSpace;
 }
 declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextProps, keyof TextProps>;
 export default Text;

package/components/asorted/Text/index.js

@@ -10,9 +10,10 @@ const uppercase = system({
 });
 const Text = baseStyled.span.attrs(({ variant = "body", fontSize, color }) => ({
     fontSize: fontSize ? fontSize : variant,
-    color: color || "palette.neutral.c100",
+    color: color || "neutral.c100",
 })) `
   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,

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, BoxedIcon } 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, BoxedIcon } 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, { variant: "tiny", color: "palette.neutral.c00", fontWeight: "regular" }, title),
-        React.createElement(Text, { variant: "h5", color: "palette.neutral.c00", textTransform: "uppercase" }, 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", fontWeight: "medium", variant: "paragraph" }, dismissText),
+        React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
         React.createElement(Flex, { columnGap: 5 },
-            React.createElement(Button, { color: "palette.neutral.c100", backgroundColor: "palette.neutral.c00", onClick: onDismiss }, dismissConfirmText),
-            React.createElement(Button, { outline: true, color: "palette.neutral.c00", backgroundColor: "palette.neutral.c100", borderColor: "palette.neutral.c00", onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
+            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

@@ -14,28 +14,30 @@ interface BaseProps extends BaseStyledProps, BordersProps {
     iconButton?: boolean;
     disabled?: boolean;
 }
-export interface ButtonProps extends BaseProps {
+export interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
     children?: React.ReactNode;
-    onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
+    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;
+    fontFamily: string;
     fontSize: number;
-} & BaseProps, "fontSize" | "ff">;
-declare const Button: {
-    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
+} & BaseProps, "fontFamily" | "fontSize">;
+declare const ButtonWithRef: {
+    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps, ref?: React.ForwardedRef<HTMLButtonElement> | undefined): React.ReactElement;
     Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+    Expand: React.ForwardRefExoticComponent<Pick<ButtonProps & {
+        onToggle?: ((arg0: boolean) => void) | undefined;
+    }, "overflow" | "p" | "style" | "key" | "color" | "children" | "onClick" | "variant" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontSize" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "outline" | "padding" | "disabled" | "onToggle" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY" | "Icon" | "iconSize" | "ff" | "iconPosition" | "iconButton"> & React.RefAttributes<HTMLButtonElement>>;
 };
-export declare type ExpandButtonProps = React.PropsWithChildren<{
+export declare type ButtonExpandProps = React.PropsWithChildren<ButtonProps & {
     onToggle?: (arg0: boolean) => void;
-    onClick?: (arg0: React.SyntheticEvent<HTMLButtonElement>) => void;
 }>;
-export declare const ExpandButton: ({ onToggle, onClick, ...props }: ExpandButtonProps) => React.ReactElement;
-export default Button;
+export declare function ButtonExpand({ onToggle, onClick, ...props }: ButtonExpandProps, ref?: React.ForwardedRef<HTMLButtonElement>): React.ReactElement;
+export default ButtonWithRef;

package/components/cta/Button/index.js

@@ -15,6 +15,7 @@ import baseStyled from "../../styled";
 import { fontSize, border, compose } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { fontSizes } from "../../../styles/theme";
+import { rgba } from "../../../styles/helpers";
 import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomRegular";
 const IconContainer = styled.div `
   display: inline-block;
@@ -24,93 +25,93 @@ const IconContainer = styled.div `
 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};
+        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.palette.neutral.c20};
+          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};
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
         &:hover, &:focus {
-          background-color: ${p.theme.colors.palette.neutral.c90};
+          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, &:focus {
-        background-color: ${p.theme.colors.palette.neutral.c20};
+        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.palette.neutral.c100};
+    color: ${p.theme.colors.neutral.c100};
     background-color: transparent;
     &:hover {
       text-decoration: underline;
@@ -128,7 +129,7 @@ export const ButtonUnstyled = styled.button `
 export const Base = baseStyled.button.attrs((p) => {
     var _a;
     return ({
-        ff: "Inter|SemiBold",
+        fontFamily: "Inter",
         fontSize: (_a = p.fontSize) !== null && _a !== void 0 ? _a : 4,
     });
 }) `
@@ -137,6 +138,7 @@ export const Base = baseStyled.button.attrs((p) => {
   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;
@@ -152,7 +154,7 @@ export const Base = baseStyled.button.attrs((p) => {
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:active {
-    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.palette.primary.c60};
+    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
 
   ${(p) => {
@@ -187,19 +189,20 @@ export const Base = baseStyled.button.attrs((p) => {
           }
         `
     : ""}
-  ${(p) => p.theme.transition(["background-color", "color", "border-color"])}
+  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
 `;
 const ContentContainer = styled.div ``;
-const Button = (_a) => {
+const Button = (_a, ref) => {
     var _b;
     var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
-    return (React.createElement(Base, Object.assign({}, props, { iconButton: !(Icon == null) && !children, onClick: onClick }),
+    return (React.createElement(Base, Object.assign({}, props, { ref: ref, 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,
         iconPosition === "left" ? React.createElement(ContentContainer, null, children) : null));
 };
-const StyledExpandButton = styled(Button).attrs((props) => ({
+const ButtonWithRef = React.forwardRef(Button);
+const StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({
     Icon: props.Icon != null || ChevronBottom,
     iconPosition: props.iconPosition || "right",
 })) `
@@ -208,14 +211,17 @@ const StyledExpandButton = styled(Button).attrs((props) => ({
     ${(p) => (p.expanded ? "transform: rotate(180deg)" : "")}
   }
 `;
-export const ExpandButton = function ExpandButton(_a) {
+export function ButtonExpand(_a, ref) {
     var { onToggle, onClick } = _a, props = __rest(_a, ["onToggle", "onClick"]);
     const [expanded, setExpanded] = useState(false);
-    return (React.createElement(StyledExpandButton, Object.assign({}, props, { expanded: expanded, onClick: (event) => {
+    return (React.createElement(StyledButtonExpand, Object.assign({}, props, { ref: ref, expanded: expanded, onClick: (event) => {
             setExpanded((expanded) => !expanded);
             onToggle != null && onToggle(!expanded);
             onClick != null && onClick(event);
         } })));
-};
+}
 Button.Unstyled = ButtonUnstyled;
-export default Button;
+Button.Expand = React.forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+export default ButtonWithRef;

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

@@ -1,30 +1,79 @@
 import React from "react";
+import { TextProps } from "../../asorted/Text";
 import { BaseStyledProps } from "../../styled";
 export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & BaseStyledProps & {
+    /**
+     * Component that takes `{size: number; color?: string}` as props
+     */
     Icon?: React.ComponentType<{
         size: number;
         color?: string;
     }>;
+    /**
+     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop
+     */
     type?: "main" | "shade" | "color";
+    /**
+     * Affect the font variant & icon size
+     */
     size?: "small" | "medium" | "large";
+    /**
+     * Color of the link, overrides colors defined by the `type` prop
+     */
+    color?: string;
+    /**
+     * Props passed to the rendered text
+     */
+    textProps?: TextProps;
+    /**
+     * If true text will always be underlined, else it will be underlined only on hover
+     */
+    alwaysUnderline?: boolean;
+    /**
+     * Position of the icon relative to the text
+     */
     iconPosition?: "right" | "left";
     disabled?: boolean;
     children?: React.ReactNode;
 };
-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>>> & {
+export declare const DEFAULT_ICON_POSITION = "right";
+export declare const DEFAULT_SIZE = "medium";
+export declare const DEFAULT_TYPE = "main";
+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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<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;
 } & {
+    /**
+     * Component that takes `{size: number; color?: string}` as props
+     */
     Icon?: React.ComponentType<{
         size: number;
         color?: string | undefined;
     }> | undefined;
+    /**
+     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop
+     */
     type?: "main" | "color" | "shade" | undefined;
+    /**
+     * Affect the font variant & icon size
+     */
     size?: "small" | "medium" | "large" | undefined;
+    /**
+     * Color of the link, overrides colors defined by the `type` prop
+     */
+    color?: string | undefined;
+    /**
+     * Props passed to the rendered text
+     */
+    textProps?: TextProps | undefined;
+    /**
+     * If true text will always be underlined, else it will be underlined only on hover
+     */
+    alwaysUnderline?: boolean | undefined;
+    /**
+     * Position of the icon relative to the text
+     */
     iconPosition?: "left" | "right" | undefined;
     disabled?: boolean | undefined;
     children?: React.ReactNode;

package/components/cta/Link/index.js

@@ -4,6 +4,9 @@ import { getLinkColors } from "./getLinkStyle";
 import { ctaIconSize, ctaTextType } from "../getCtaStyle";
 import { Text } from "../../asorted";
 import baseStyled from "../../styled";
+export const DEFAULT_ICON_POSITION = "right";
+export const DEFAULT_SIZE = "medium";
+export const DEFAULT_TYPE = "main";
 const IconContainer = styled.div `
   ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
   display: flex;
@@ -11,7 +14,7 @@ const IconContainer = styled.div `
   justify-content: center;
 `;
 export const Base = baseStyled.a `
-  color: ${({ theme, disabled, type = "main" }) => getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
+  color: ${({ color, theme, disabled, type = "main" }) => color || getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
   cursor: pointer;
   display: inline-flex;
   flex-direction: row;
@@ -19,27 +22,28 @@ export const Base = baseStyled.a `
   align-items: center;
   justify-content: center;
 
-  text-decoration: none;
-
   :hover {
     text-decoration: underline;
   }
   :active {
-    color: ${({ theme, type = "main" }) => getLinkColors(theme.colors)[type]["pressed"]};
+    color: ${({ color, theme, type = "main" }) => color || getLinkColors(theme.colors)[type]["pressed"]};
     text-decoration: underline;
   }
+
+  text-decoration: ${(p) => (p.alwaysUnderline ? "underline" : "none")};
+
 `;
-const LinkContainer = (props) => {
-    const { Icon, iconPosition = "right", children, size = "medium" } = props;
+const LinkContainer = ({ Icon, iconPosition = DEFAULT_ICON_POSITION, children, color, size = DEFAULT_SIZE, textProps, }) => {
+    const text = (React.createElement(Text, Object.assign({ variant: ctaTextType[size], fontWeight: "semiBold", color: color || "inherit" }, textProps), children));
     return (React.createElement(React.Fragment, null,
-        iconPosition === "right" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null,
+        iconPosition === "right" && children ? text : null,
         Icon ? (React.createElement(IconContainer, { iconLink: !children, iconPosition: iconPosition },
-            React.createElement(Icon, { size: ctaIconSize[size], color: "currentcolor" }))) : null,
-        iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: "inherit" }, children)) : null));
+            React.createElement(Icon, { size: ctaIconSize[size], color: color || "currentcolor" }))) : null,
+        iconPosition === "left" && children ? text : null));
 };
 const Link = (props) => {
-    const { type = "main", size = "medium" } = props;
-    return (React.createElement(Base, Object.assign({}, props),
+    const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;
+    return (React.createElement(Base, Object.assign({ color: color }, props),
         React.createElement(LinkContainer, Object.assign({}, props, { type: type, size: size }))));
 };
 export default Link;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ButtonProps } from "../Button";
 export interface ToggleProps extends Omit<ButtonProps, "type"> {
     checked?: boolean;

package/components/form/BaseInput/index.d.ts

@@ -40,29 +40,23 @@ export declare const BaseInput: import("styled-components").StyledComponent<"inp
 } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
 export declare const InputErrorContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
 export declare const InputWarningContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, 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>>> & {
+export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<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;
 } & {
     alignItems: string;
     pl: string;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, 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>>> & {
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, 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").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<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;
 } & {
     alignItems: string;
     pr: string;
-}, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
-declare function Input<T = ValueType>(props: InputProps<T>, ref: React.ForwardedRef<HTMLInputElement>): JSX.Element;
+}, "overflow" | "p" | "color" | "size" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "top" | "verticalAlign" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "margin" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
+declare function Input<T = ValueType>(props: InputProps<T>, ref?: React.ForwardedRef<HTMLInputElement>): JSX.Element;
 declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     value: T;
     onChange?: ((value: T) => void) | undefined;
@@ -77,10 +71,10 @@ declare const _default: <T>(props: Omit<CommonProps, "onChange" | "value"> & {
     } & {
         theme?: import("styled-components").DefaultTheme | undefined;
     } & ({} | {
-        children?: React.ReactNode;
+        children?: import("react").ReactNode;
     })) & {
-        as?: string | React.ComponentType<any> | undefined;
-        forwardedAs?: string | React.ComponentType<any> | undefined;
+        as?: string | import("react").ComponentType<any> | undefined;
+        forwardedAs?: string | import("react").ComponentType<any> | undefined;
     }) | undefined;
     /**
      * A function can be provided to serialize a value of any type to a string.