@ledgerhq/react-ui 0.3.0 → 0.6.0

package/components/form/BaseInput/index.js

@@ -18,30 +18,30 @@ 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.4)};
     `};
 
   ${(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.palette.warning.c80};
+      border: 1px solid ${p.theme.colors.warning.c80};
     `};
 
   ${(p) => !p.error &&
@@ -49,14 +49,14 @@ export const InputContainer = styled.div `
     !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.attrs({
@@ -66,7 +66,7 @@ export const BaseInput = styled.input.attrs({
   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")};
@@ -76,7 +76,7 @@ export const BaseInput = styled.input.attrs({
   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 */
@@ -94,11 +94,11 @@ export const BaseInput = styled.input.attrs({
   ${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.palette.warning.c80};
+  color: ${(p) => p.theme.colors.warning.c80};
   margin-left: 12px;
 `;
 export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({

package/components/form/Checkbox/Checkbox.js

@@ -17,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 {
@@ -42,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 + & {
@@ -55,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;
@@ -63,19 +63,19 @@ 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;
   }
 `;

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { GroupBase } from "react-select";
 import { Props as SelectInputProps } from "../../form/SelectInput";
-export declare type Props = SelectInputProps & {
+export declare type Props<O> = SelectInputProps<O, false, GroupBase<O>> & {
     label: string;
 };
-export default function Dropdown(props: Props): JSX.Element;
+export default function Dropdown<O>(props: Props<O>): JSX.Element;

package/components/form/Dropdown/index.js

@@ -18,9 +18,10 @@ import { ValueContainer } from "../../form/SelectInput/ValueContainer";
 import { ChevronBottomMedium, ChevronTopMedium } from "@ledgerhq/icons-ui/react";
 import FlexBox from "../../layout/Flex";
 function DropdownControl(props) {
-    const { selectProps: { label }, children, } = props;
+    const { selectProps, children } = props;
+    const { label } = selectProps;
     return (React.createElement(components.Control, Object.assign({}, props),
-        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "palette.neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { fontWeight: "semiBold", variant: "paragraph", color: "neutral.c80", mr: 2 }, label),
         children));
 }
 function DropdownValueContainer(props) {
@@ -37,7 +38,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.d.ts

@@ -1,6 +1,30 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
 export declare type Props = InputProps & {
     legend: string;
 };
-export default function LegendInput({ legend, ...inputProps }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => 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;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    legend: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/LegendInput/index.js

@@ -14,14 +14,15 @@ 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) {
+function LegendInput(_a, ref) {
     var { legend } = _a, inputProps = __rest(_a, ["legend"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(InputRenderRightContainer, null,
             React.createElement(Legend, { variant: "body", "data-disabled": inputProps.disabled }, legend)) })));
 }
+export default React.forwardRef(LegendInput);

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

@@ -1,5 +1,27 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
-export default function NumberInput({ value, onPercentClick, max, disabled, ...inputProps }: InputProps<number | undefined> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: number | undefined;
+    onChange?: ((value: number | undefined) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<number | undefined>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<number | undefined>) => 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;
+    serialize?: ((value: number | undefined) => string) | undefined;
+    deserialize?: ((value: string) => number | undefined) | undefined;
+} & {
     onPercentClick: (percent: number) => void;
-}): JSX.Element;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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,8 +26,8 @@ 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;
   }
 `;
@@ -42,10 +42,11 @@ function deserialize(value) {
         return undefined;
     }
 }
-export default function NumberInput(_a) {
+function NumberInput(_a, ref) {
     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 },
+    return (React.createElement(Input, Object.assign({ ref: ref, 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,
                 "%"))))) })));
 }
+export default React.forwardRef(NumberInput);

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

@@ -1,5 +1,27 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QrCodeInput({ onQrCodeClick, ...inputProps }: InputProps & {
-    onQrCodeClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => 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;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onQrCodeClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/QrCodeInput/index.js

@@ -22,19 +22,20 @@ 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;
   }
 `;
-export default function QrCodeInput(_a) {
+function QrCodeInput(_a, ref) {
     var { onQrCodeClick } = _a, inputProps = __rest(_a, ["onQrCodeClick"]);
-    return (React.createElement(Input, Object.assign({}, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "8px" },
             React.createElement(QrCodeButton, { onClick: onQrCodeClick, disabled: inputProps.disabled },
                 React.createElement(QrCodeMedium, { size: "20px" }))) })));
 }
+export default React.forwardRef(QrCodeInput);

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

@@ -1,6 +1,28 @@
 import React from "react";
 import { InputProps } from "../BaseInput";
-export default function QuantityInput({ onMaxClick, price, ...inputProps }: InputProps & {
-    onMaxClick?: (e: React.FormEvent<HTMLButtonElement>) => void;
-    price?: string;
-}): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("../BaseInput").CommonProps, "onChange" | "value"> & {
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeEvent?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    renderLeft?: React.ReactNode | ((props: InputProps<string>) => React.ReactNode);
+    renderRight?: React.ReactNode | ((props: InputProps<string>) => 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;
+    serialize?: ((value: string) => string) | undefined;
+    deserialize?: ((value: string) => string) | undefined;
+} & {
+    onMaxClick?: ((e: React.FormEvent<HTMLButtonElement>) => void) | undefined;
+    price?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

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,23 @@ 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) {
+function QuantityInput(_a, ref) {
     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" },
+    return (React.createElement(Input, Object.assign({ ref: ref }, inputProps, { type: "number", renderRight: React.createElement(FlexBox, { alignItems: "center", justifyContent: "center", pr: "3px", py: "3px" },
             price && (React.createElement(Legend, { variant: "body", pr: "12px", "data-disabled": inputProps.disabled }, price)),
             React.createElement(MaxButton, { onClick: onMaxClick, disabled: inputProps.disabled },
                 React.createElement(Text, { variant: "tiny", color: "currentColor" }, "Max"))) })));
 }
+export default React.forwardRef(QuantityInput);

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

@@ -1,11 +1,12 @@
 import { InputHTMLAttributes } from "react";
 declare type InputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange" | "name">;
 export declare type RadioElementProps = InputAttributes & {
-    variant?: "default" | "success" | "error";
+    variant?: "default" | "main" | "success" | "error";
     label: string;
+    outlined?: boolean;
 };
 declare const Element: {
-    ({ label, value, disabled, variant, ...props }: RadioElementProps): JSX.Element;
+    ({ label, value, disabled, outlined, variant, ...props }: RadioElementProps): JSX.Element;
     displayName: string;
 };
 export default Element;

package/components/form/Radio/RadioElement.js

@@ -10,21 +10,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useContext, useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 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;
   appearance: none;
   width: var(--ledger-ui-checkbox-size);
   height: var(--ledger-ui-checkbox-size);
+  flex-shrink: 0;
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
   border: 1px solid var(--ledger-ui-checkbox-color);
   cursor: pointer;
@@ -46,17 +47,31 @@ 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)};
+    }
+  }
+
+  &[data-variant="main"] {
+    :hover {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    :active,
+    :checked,
+    :focus {
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+    :focus {
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.neutral.c60, 0.48)};
     }
   }
 
@@ -64,10 +79,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,26 +90,80 @@ 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.error.c100, 0.48)};
+    }
+  }
+
+  &[data-variant]:disabled {
+    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};
+    cursor: unset;
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+  }
+`;
+const outlinedCSS = css `
+  padding: 20px;
+  border: 1px solid ${(p) => p.theme.colors.neutral.c50};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+  &[data-variant="default"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.primary.c90};
+    }
+    &[data-checked] :active {
+      border-color: ${(p) => p.theme.colors.primary.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.error.c100, 0.48)};
+      border-color: ${(p) => p.theme.colors.primary.c80};
+    }
+  }
+
+  &[data-variant="main"] {
+    :hover {
+      border-color: ${(p) => p.theme.colors.neutral.c90};
+    }
+    &[data-checked],
+    :active :focus {
+      border-color: ${(p) => p.theme.colors.neutral.c100};
+    }
+  }
+
+  &[data-variant="success"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.success.c100};
+    }
+  }
+
+  &[data-variant="error"] {
+    &[data-checked]:not([disabled]) {
+      border-color: ${(p) => p.theme.colors.error.c100};
+    }
+    :hover {
+      border-color: ${(p) => p.theme.colors.error.c100};
     }
   }
 
   &[data-variant]:disabled {
-    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    border-color: ${(p) => p.theme.colors.neutral.c40};
     cursor: unset;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
   }
 `;
 const RadioElement = styled.label.attrs({ tabIndex: -1 }) `
   display: inline-flex;
   column-gap: 0.75rem;
   align-items: center;
+  cursor: pointer;
+  &[data-variant]:disabled {
+    cursor: unset;
+  }
+  ${(p) => p.outlined && outlinedCSS}
 `;
 const Element = (_a) => {
-    var { label, value, disabled, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "variant"]);
+    var { label, value, disabled, outlined, variant = "default" } = _a, props = __rest(_a, ["label", "value", "disabled", "outlined", "variant"]);
     const context = useContext(RadioContext);
     if (context === undefined)
         throw new Error("RadioElement must be used within a RadioProvider");
@@ -103,7 +172,7 @@ const Element = (_a) => {
     const handleChange = (event) => {
         context.onChange(event.target.value);
     };
-    return (React.createElement(RadioElement, null,
+    return (React.createElement(RadioElement, Object.assign({ "data-variant": variant }, (isChecked ? { "data-checked": true } : {}), { outlined: outlined }),
         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, { variant: "paragraph" }, label)));
 };

package/components/form/Radio/RadioListElement.js

@@ -17,30 +17,29 @@ import { rgba } from "../../../styles/helpers";
 import { RadioContext } from "./index";
 export const Label = styled(Text) `
   color: ${(p) => p.disabled
-    ? p.theme.colors.palette.neutral.c50
+    ? p.theme.colors.neutral.c50
     : p.checked
-        ? p.theme.colors.palette.primary.c90
-        : p.theme.colors.palette.neutral.c100};
+        ? p.theme.colors.primary.c90
+        : p.theme.colors.neutral.c100};
 `;
 const Container = styled(Flex) `
   cursor: ${(p) => (p.disabled ? "" : "pointer")};
   justify-content: center;
   align-items: center;
-  background-color: ${(p) => (p.checked ? p.theme.colors.palette.primary.c20 : "")};
-  border: 1px solid
-    ${(p) => (p.checked ? p.theme.colors.palette.primary.c50 : p.theme.colors.palette.neutral.c40)};
+  background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : "")};
+  border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};
   border-radius: ${(p) => `${p.theme.radii[2]}px`};
   padding: ${(p) => p.theme.space[6]}px;
 
   :hover {
-    border-color: ${(p) => (p.disabled || p.checked ? "" : p.theme.colors.palette.primary.c80)};
+    border-color: ${(p) => (p.disabled || p.checked ? "" : p.theme.colors.primary.c80)};
   }
 `;
 const Input = styled.input `
   position: relative;
   appearance: none;
   &:focus ~ ${Container} {
-    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)};
   }
 `;
 const RadioListElement = styled.label.attrs({ tabIndex: -1 }) `