@ledgerhq/react-ui 0.1.1 → 0.4.0

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

@@ -1,33 +1,104 @@
 import { TypographyProps } from "styled-system";
 import React, { InputHTMLAttributes } from "react";
+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: React.ChangeEvent<HTMLInputElement>) => 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, {
-    color: string;
-    className: string;
-} & import("../../asorted/Text").BaseTextProps & {
-    theme: import("../../../styles/theme").Theme;
-}, "className" | "color">;
-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").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;
-}, "alignItems" | "pl">;
-export declare const InputRenderRightContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../layout/Flex").FlexBoxProps & {
+}, "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>>> & {
+    columnGap?: string | number | undefined;
+    rowGap?: string | number | undefined;
+    color?: string | undefined;
+    display?: string | undefined;
+    position?: string | undefined;
+    maxHeight?: number | undefined;
+} & {
     alignItems: string;
     pr: string;
-}, "alignItems" | "pr">;
-export default function Input(props: InputProps): JSX.Element;
+}, "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;
+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?: React.ReactNode;
+    })) & {
+        as?: string | React.ComponentType<any> | undefined;
+        forwardedAs?: string | 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;

package/components/form/BaseInput/index.js

@@ -11,50 +11,62 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import styled, { css } from "styled-components";
 import { typography } from "styled-system";
-import React from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import { rgba } from "../../../styles/helpers";
 export const InputContainer = styled.div `
   display: flex;
   height: 48px;
-  border: ${(p) => `1px solid ${p.theme.colors.palette.neutral.c40}`};
+  border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};
   border-radius: 24px;
   transition: all 0.2s ease;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 
   ${(p) => p.focus &&
     !p.error &&
+    !p.warning &&
     css `
-      border: 1px solid ${p.theme.colors.palette.primary.c80};
-      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      border: 1px solid ${p.theme.colors.primary.c80};
+      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.48)};
     `};
 
   ${(p) => p.error &&
     !p.disabled &&
     css `
-      border: 1px solid ${p.theme.colors.palette.error.c100};
+      border: 1px solid ${p.theme.colors.error.c100};
     `};
 
   ${(p) => !p.error &&
+    p.warning &&
+    !p.disabled &&
+    css `
+      border: 1px solid ${p.theme.colors.warning.c80};
+    `};
+
+  ${(p) => !p.error &&
+    !p.warning &&
     !p.disabled &&
     css `
       &:hover {
-        border: ${!p.disabled && `1px solid ${p.theme.colors.palette.primary.c80}`};
+        border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};
       }
     `};
 
   ${(p) => p.disabled &&
     css `
-      color: ${p.theme.colors.palette.neutral.c60};
-      background: ${(p) => p.theme.colors.palette.neutral.c20};
+      color: ${p.theme.colors.neutral.c60};
+      background: ${(p) => p.theme.colors.neutral.c20};
     `};
 `;
-export const BaseInput = styled.input `
+export const BaseInput = styled.input.attrs({
+    fontSize: "paragraph",
+    fontWeight: "medium",
+}) `
   height: 100%;
   width: 100%;
   border: 0;
-  caret-color: ${(p) => p.error ? p.theme.colors.palette.error.c100 : p.theme.colors.palette.primary.c80};
+  caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};
   background: none;
   outline: none;
   cursor: ${(p) => (p.disabled ? "not-allowed" : "text")};
@@ -64,7 +76,7 @@ export const BaseInput = styled.input `
   padding-left: 20px;
   padding-right: 20px;
   &::placeholder {
-    color: ${(p) => p.disabled ? p.theme.colors.palette.neutral.c50 : p.theme.colors.palette.neutral.c70};
+    color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};
   }
 
   /* Hide type=number arrow for Chrome, Safari, Edge, Opera */
@@ -82,7 +94,11 @@ export const BaseInput = styled.input `
   ${typography}
 `;
 export const InputErrorContainer = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.error.c100};
+  color: ${(p) => p.theme.colors.error.c100};
+  margin-left: 12px;
+`;
+export const InputWarningContainer = styled(Text) `
+  color: ${(p) => p.theme.colors.warning.c80};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
@@ -93,23 +109,34 @@ export const InputRenderRightContainer = styled(FlexBox).attrs(() => ({
     alignItems: "center",
     pr: "16px",
 })) ``;
-export default function Input(props) {
-    const { value, disabled, error, onChange, renderLeft, renderRight, unwrapped } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "onChange", "renderLeft", "renderRight", "unwrapped"]);
-    const [focus, setFocus] = React.useState(false);
+// Yes, this is dirty. If you can figure out a better way please change the code :).
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const IDENTITY = (_) => _;
+function Input(props, ref) {
+    const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize"]);
+    const [focus, setFocus] = useState(false);
+    const inputValue = useMemo(() => serialize(value), [serialize, value]);
+    const handleChange = useCallback((e) => {
+        onChange && onChange(deserialize(e.target.value));
+        onChangeEvent && onChangeEvent(e);
+    }, [onChange, onChangeEvent, deserialize]);
     const inner = (React.createElement(React.Fragment, null,
         typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
-        React.createElement(BaseInput, Object.assign({}, htmlInputProps, { disabled: disabled, error: error, onChange: onChange, value: value, onFocus: (event) => {
+        React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
                 setFocus(true);
                 htmlInputProps.onFocus && htmlInputProps.onFocus(event);
             }, onBlur: (event) => {
                 setFocus(false);
                 htmlInputProps.onBlur && htmlInputProps.onBlur(event);
-            }, className: "ll-text_body" })),
+            } })),
         typeof renderRight === "function" ? renderRight(props) : renderRight));
     if (unwrapped) {
         return (React.createElement(FlexBox, { alignItems: "stretch", style: { height: "100%" } }, inner));
     }
     return (React.createElement("div", null,
-        React.createElement(InputContainer, { disabled: disabled, focus: focus, error: error }, inner),
-        error && !disabled && React.createElement(InputErrorContainer, { type: "navigation" }, error)));
+        React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
+        (error || warning) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 },
+            error && React.createElement(InputErrorContainer, { variant: "small" }, error),
+            warning && React.createElement(InputWarningContainer, { variant: "small" }, warning)))));
 }
+export default React.forwardRef(Input);

package/components/form/Checkbox/Checkbox.js

@@ -3,7 +3,10 @@ import styled from "styled-components";
 import Text from "../../asorted/Text";
 import CheckAloneRegular from "@ledgerhq/icons-ui/react/CheckAloneRegular";
 import { renderToStaticMarkup } from "react-dom/server";
-const Icon = styled(CheckAloneRegular).attrs({ size: 13, color: "white" }) ``;
+const Icon = () => React.cloneElement(CheckAloneRegular({ size: 13, color: "white" }), {
+    // the xmlns attribute is required to properly display the checkbox
+    xmlns: "http://www.w3.org/2000/svg",
+});
 const CheckMarkIcon = encodeURIComponent(renderToStaticMarkup(React.createElement(Icon, null)));
 const Input = styled.input `
   background-color: transparent;
@@ -14,7 +17,7 @@ const Input = styled.input `
   width: ${(p) => p.theme.space[7]}px;
   height: ${(p) => p.theme.space[7]}px;
   appearance: none;
-  border: 1px solid ${(props) => props.theme.colors.palette.neutral.c90};
+  border: 1px solid ${(props) => props.theme.colors.neutral.c90};
   box-shadow: none;
 
   &:checked {
@@ -39,7 +42,7 @@ const Input = styled.input `
   }
 `;
 const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
-  color: ${(props) => props.theme.colors.palette.neutral.c80};
+  color: ${(props) => props.theme.colors.neutral.c80};
 
   /* Version when the input is checked */
   ${Input}:checked + & {
@@ -52,7 +55,7 @@ const Label = styled(Text).attrs({ type: "body", fontWeight: "500" }) `
 `;
 const Container = styled.div `
   --ll-checkbox-color: unset;
-  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.palette.primary.c90});
+  color: var(--ll-checkbox-color, ${(props) => props.theme.colors.primary.c90});
 
   display: inline-flex;
   column-gap: ${(p) => p.theme.space[5]}px;
@@ -60,23 +63,23 @@ const Container = styled.div `
   cursor: pointer;
 
   &[data-variant="default"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.primary.c90};
+    --ll-checkbox-color: ${(props) => props.theme.colors.primary.c90};
   }
 
   &[data-variant="success"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.success.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.success.c100};
   }
 
   &[data-variant="error"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.error.c100};
+    --ll-checkbox-color: ${(props) => props.theme.colors.error.c100};
   }
 
   &[data-disabled="true"] {
-    --ll-checkbox-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    --ll-checkbox-color: ${(props) => props.theme.colors.neutral.c80};
     cursor: unset;
   }
 `;
 const Checkbox = ({ isDisabled = false, variant = "default", label, isChecked, name, onChange, }) => (React.createElement(Container, { "data-variant": variant, "data-disabled": isDisabled },
     React.createElement(Input, { type: "checkbox", name: name, id: name, checked: isChecked, disabled: isDisabled, onChange: onChange }),
-    label ? (React.createElement(Label, { forwardedAs: "label", htmlFor: name }, label)) : null));
+    label ? (React.createElement(Label, { as: "label", htmlFor: name }, label)) : null));
 export default Checkbox;

package/components/form/Dropdown/index.js

@@ -20,13 +20,13 @@ import FlexBox from "../../layout/Flex";
 function DropdownControl(props) {
     const { selectProps: { label }, children, } = props;
     return (React.createElement(components.Control, Object.assign({}, props),
-        React.createElement(Text, { ff: "Inter|SemiBold", fontSize: 3, color: "palette.neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "neutral.c80", mr: 2 }, label),
         children));
 }
 function DropdownValueContainer(props) {
     const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;
     return (React.createElement(ValueContainer, Object.assign({}, props, { render: () => (React.createElement(FlexBox, null,
-            React.createElement(Text, { ff: "Inter|SemiBold", fontSize: 3, mr: 2 },
+            React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", mr: 2 },
                 React.createElement(FlexBox, null, props.children)),
             React.createElement(FlexBox, { alignItems: "center" },
                 React.createElement(ChevronIcon, { size: 12 })))) })));
@@ -37,7 +37,7 @@ function DropdownIndicatorsContainer() {
 export default function Dropdown(props) {
     const theme = useTheme();
     const { styles } = props, rest = __rest(props, ["styles"]);
-    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.palette.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
+    return (React.createElement(SelectInput, Object.assign({ placeholder: "", isSearchable: false, styles: Object.assign({ singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100, margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined })), input: () => ({ display: "none" }), menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none", width: "auto", minWidth: "200px" })) }, styles) }, rest, { components: {
             Control: DropdownControl,
             ValueContainer: DropdownValueContainer,
             IndicatorsContainer: DropdownIndicatorsContainer,

package/components/form/LegendInput/index.js

@@ -14,14 +14,14 @@ import Input, { InputRenderRightContainer } from "../BaseInput";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const Legend = styled(Text) `
-  color: ${(props) => props.theme.colors.palette.neutral.c70};
+  color: ${(props) => props.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(props) => props.theme.colors.palette.neutral.c50};
+    color: ${(props) => props.theme.colors.neutral.c50};
   }
 `;
 export default function LegendInput(_a) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
     return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
-            React.createElement(Legend, { type: "body", "data-disabled": inputProps.disabled }, legend)) })));
+            React.createElement(Legend, { variant: "body", "data-disabled": inputProps.disabled }, legend)) })));
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ onPercentClick, max, value, disabled, ...inputProps }: InputProps & {
+export default function NumberInput({ value, onPercentClick, max, disabled, ...inputProps }: InputProps<number | undefined> & {
     onPercentClick: (percent: number) => void;
 }): JSX.Element;

package/components/form/NumberInput/index.js

@@ -16,8 +16,8 @@ import Text from "../../asorted/Text";
 import styled from "styled-components";
 // TODO: Replace me with a real button as soon as they are designed
 const MaxButton = styled.button `
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;
@@ -26,15 +26,26 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
-    background-color: ${(p) => (p.active ? p.theme.colors.palette.neutral.c30 : "transparent")};
+    color: ${(p) => p.theme.colors.neutral.c50};
+    background-color: ${(p) => (p.active ? p.theme.colors.neutral.c30 : "transparent")};
     cursor: unset;
   }
 `;
+function serialize(value) {
+    return value ? "" + value : "";
+}
+function deserialize(value) {
+    try {
+        return parseFloat(value);
+    }
+    catch (error) {
+        return undefined;
+    }
+}
 export default function NumberInput(_a) {
-    var { onPercentClick, max, value, disabled } = _a, inputProps = __rest(_a, ["onPercentClick", "max", "value", "disabled"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { value: value, max: max, disabled: disabled, type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
-            React.createElement(Text, { type: "cta", color: "inherit" },
+    var { value, onPercentClick, max, disabled } = _a, inputProps = __rest(_a, ["value", "onPercentClick", "max", "disabled"]);
+    return (React.createElement(Input, Object.assign({ serialize: serialize, deserialize: deserialize }, inputProps, { type: "number", value: value, max: max, disabled: disabled, renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", py: "3px", mr: "8px" }, [0.25, 0.5, 0.75, 1].map((percent) => (React.createElement(MaxButton, { key: percent, onClick: () => onPercentClick(percent), active: !!value && !!max && Number(value) === percent * Number(max), disabled: disabled },
+            React.createElement(Text, { variant: "tiny", color: "inherit" },
                 percent * 100,
                 "%"))))) })));
 }

package/components/form/QrCodeInput/index.js

@@ -22,13 +22,13 @@ const QrCodeButton = styled.button `
   height: 32px;
   border-radius: 50%;
   border-width: 0;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;

package/components/form/QuantityInput/index.js

@@ -15,8 +15,8 @@ import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const MaxButton = styled.button `
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   border-radius: 100px;
   border-width: 0;
   padding-left: 14px;
@@ -25,22 +25,22 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;
 const Legend = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    color: ${(p) => p.theme.colors.neutral.c50};
   }
 `;
 export default function QuantityInput(_a) {
     var { onMaxClick, price } = _a, inputProps = __rest(_a, ["onMaxClick", "price"]);
     return (React.createElement(Input, Object.assign({}, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
-            price && (React.createElement(Legend, { type: "body", pr: "12px", "data-disabled": inputProps.disabled }, price)),
+            price && (React.createElement(Legend, { variant: "body", pr: "12px", "data-disabled": inputProps.disabled }, price)),
             React.createElement(MaxButton, { onClick: onMaxClick, disabled: inputProps.disabled },
-                React.createElement(Text, { type: "tiny", color: "currentColor" }, "Max"))) })));
+                React.createElement(Text, { variant: "tiny", color: "currentColor" }, "Max"))) })));
 }

package/components/form/Radio/RadioElement.d.ts

@@ -4,5 +4,8 @@ export declare type RadioElementProps = InputAttributes & {
     variant?: "default" | "success" | "error";
     label: string;
 };
-declare const _default: ({ label, value, disabled, variant, ...props }: RadioElementProps) => JSX.Element;
-export default _default;
+declare const Element: {
+    ({ label, value, disabled, variant, ...props }: RadioElementProps): JSX.Element;
+    displayName: string;
+};
+export default Element;

package/components/form/Radio/RadioElement.js

@@ -15,10 +15,10 @@ import { rgba } from "../../../styles/helpers";
 import Text from "../../asorted/Text";
 import { RadioContext } from "./index";
 const Label = styled(Text) `
-  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.palette.neutral.c100});
+  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
 `;
 const Input = styled.input `
-  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c50};
+  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
   --ledger-ui-checkbox-size: 1.25rem;
 
   position: relative;
@@ -46,17 +46,17 @@ const Input = styled.input `
 
   &[data-variant="default"] {
     :hover {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c90};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};
     }
     :active {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};
     }
     :checked,
     :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c80};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};
     }
   }
 
@@ -64,10 +64,10 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.success.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.success.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};
     }
   }
 
@@ -75,17 +75,17 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.error.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.error.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};
     }
   }
 
   &[data-variant]:disabled {
-    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};
     cursor: unset;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
   }
 `;
 const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
@@ -93,7 +93,7 @@ const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
   column-gap: 0.75rem;
   align-items: center;
 `;
-export default (_a) => {
+const Element = (_a) => {
     var { label, value, disabled, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "variant"]);
     const context = useContext(RadioContext);
     if (context === undefined)
@@ -105,5 +105,7 @@ export default (_a) => {
     };
     return (React.createElement(RadioElement, null,
         React.createElement(Input, Object.assign({ type: "radio", "data-variant": variant, checked: isChecked, disabled: disabled, onChange: handleChange, value: value, name: context.name }, props)),
-        React.createElement(Label, { type: "paragraph" }, label)));
+        React.createElement(Label, { variant: "paragraph" }, label)));
 };
+Element.displayName = "Radio.Element"; // For easy identification in the React devtools & in storybook
+export default Element;

package/components/form/Radio/RadioListElement.d.ts

@@ -0,0 +1,22 @@
+import React, { InputHTMLAttributes } from "react";
+import { FlexBoxProps } from "../../layout/Flex";
+declare type ElementState = {
+    checked: boolean;
+    disabled: boolean | undefined;
+};
+export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps & ElementState, keyof import("../../asorted/Text").TextProps>;
+declare type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "name">;
+export declare type RadioListElementProps = InputAttributes & {
+    /**
+     * The string or component that will be rendered as label of this radio element
+     * If it's a component, it's rendered with these props: { checked:boolean; disabled:boolean }
+     * */
+    label: string | React.ComponentType<ElementState> | ((arg1: ElementState) => JSX.Element);
+    /** Flex props to pass to the container */
+    containerProps?: FlexBoxProps;
+};
+declare const ListElement: {
+    ({ label, value, disabled, containerProps, ...props }: RadioListElementProps): JSX.Element;
+    displayName: string;
+};
+export default ListElement;