@ledgerhq/react-ui 0.2.0 → 0.5.0

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,22 +1,79 @@
 import React from "react";
-export declare type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+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> & {
+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;
+} & {
+    /**
+     * 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

@@ -3,14 +3,18 @@ import styled from "styled-components";
 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;
   align-items: center;
   justify-content: center;
 `;
-export const Base = styled.a `
-  color: ${({ theme, disabled, type = "main" }) => getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
+export const Base = baseStyled.a `
+  color: ${({ color, theme, disabled, type = "main" }) => color || getLinkColors(theme.colors)[disabled ? "disabled" : type]["default"]};
   cursor: pointer;
   display: inline-flex;
   flex-direction: row;
@@ -18,27 +22,28 @@ export const Base = styled.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/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/form/BaseInput/index.d.ts

@@ -1,28 +1,98 @@
 import { TypographyProps } from "styled-system";
 import React, { InputHTMLAttributes } from "react";
-export declare type CommonProps = Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> & TypographyProps & {
+declare type ValueType = HTMLInputElement["value"];
+export declare type CommonProps = InputHTMLAttributes<HTMLInputElement> & TypographyProps & {
     disabled?: boolean;
     error?: string;
+    warning?: string;
 };
-export declare type InputProps = CommonProps & {
-    onChange: (e: string) => void;
-    renderLeft?: ((props: CommonProps) => React.ReactNode) | React.ReactNode;
-    renderRight?: ((props: CommonProps) => React.ReactNode) | React.ReactNode;
+export declare type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onChange"> & {
+    value: T;
+    onChange?: (value: T) => void;
+    onChangeEvent?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+    renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
+    renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;
     unwrapped?: boolean;
+    containerProps?: InputContainerProps;
+    /**
+     * A function can be provided to serialize a value of any type to a string.
+     *
+     * This can be useful to wrap the `<BaseInput />` component (which expects a string)
+     * and create higher-level components that will automatically perform the input/output
+     * conversion to other types.
+     *
+     * *A serializer function should always be used in conjunction with a deserializer function.*
+     */
+    serialize?: (value: T) => ValueType;
+    /**
+     * A deserializer can be provided to convert the html input value from a string to any other type.
+     *
+     * *A deserializer function should always be used in conjunction with a serializer function.*
+     */
+    deserialize?: (value: ValueType) => T;
 };
+export declare type InputContainerProps = React.ComponentProps<typeof InputContainer>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<CommonProps> & {
     focus?: boolean | undefined;
 }, never>;
 export declare const BaseInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, Partial<CommonProps> & {
     focus?: boolean | undefined;
 } & 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").BaseTextProps, never>;
-export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../layout/Flex").FlexBoxProps & {
+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").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;
+} & {
     alignItems: string;
     pl: string;
-}, "alignItems" | "pl">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../layout/Flex").FlexBoxProps & {
+}, "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;
+} & {
     alignItems: string;
     pr: string;
-}, "alignItems" | "pr">;
-export default function Input(props: InputProps): 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;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<T>) => React.ReactNode);
+    unwrapped?: boolean | undefined;
+    containerProps?: (({
+        [x: string]: any;
+        [x: number]: any;
+        [x: symbol]: any;
+    } & {
+        theme?: import("styled-components").DefaultTheme | undefined;
+    } & ({} | {
+        children?: import("react").ReactNode;
+    })) & {
+        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.
+     *
+     * This can be useful to wrap the `<BaseInput />` component (which expects a string)
+     * and create higher-level components that will automatically perform the input/output
+     * conversion to other types.
+     *
+     * *A serializer function should always be used in conjunction with a deserializer function.*
+     */
+    serialize?: ((value: T) => string) | undefined;
+    /**
+     * A deserializer can be provided to convert the html input value from a string to any other type.
+     *
+     * *A deserializer function should always be used in conjunction with a serializer function.*
+     */
+    deserialize?: ((value: string) => T) | undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+}) => ReturnType<typeof Input>;
+export default _default;