@ledgerhq/react-ui 0.5.0 → 0.7.2

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

@@ -1,4 +1,4 @@
-declare type Props = {
+export declare type Props = {
     variant: "default" | "light";
 };
 declare const _default: ({ variant }: Props) => JSX.Element;

package/components/asorted/Icon/BoxedIcon.js

@@ -15,6 +15,9 @@ import Flex from "../../layout/Flex";
 export const DEFAULT_BOX_SIZE = 40;
 export const DEFAULT_ICON_SIZE = 16;
 export const DEFAULT_BADGE_SIZE = 20;
+function getClipRectangleSize(badgeSize) {
+    return (3 / 4) * badgeSize;
+}
 const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
     // clipping path that hides top right square of size `${rectangleSize}px`
     const diff = boxSize - rectangleSize;
@@ -32,7 +35,8 @@ const IconBoxBackground = styled(Flex) `
   height: ${(p) => p.size}px;
   width: ${(p) => p.size}px;
   ${(p) => {
-    return p.hasBadge && `clip-path: ${getTopRightSquareClippedPolygon(p.size, 15)};`;
+    return (p.hasBadge &&
+        `clip-path: ${getTopRightSquareClippedPolygon(p.size, getClipRectangleSize(p.badgeSize))};`);
 }};
   border-radius: ${(p) => p.theme.radii[2]}px;
 `;
@@ -45,7 +49,7 @@ const BadgeContainer = styled.div `
 export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
     const hasBadge = !!Badge;
     return (React.createElement(Container, { size: size },
-        React.createElement(IconBoxBackground, { size: size, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
+        React.createElement(IconBoxBackground, { size: size, badgeSize: badgeSize, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
         children,
         hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
             React.createElement(Badge, { size: badgeSize, color: badgeColor })))));

package/components/asorted/index.d.ts

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

package/components/asorted/index.js

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

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

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

package/components/cta/Button/index.js

@@ -9,13 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import styled, { css } from "styled-components";
 import baseStyled from "../../styled";
 import { fontSize, border, compose } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { fontSizes } from "../../../styles/theme";
+import { rgba } from "../../../styles/helpers";
 import ChevronBottom from "@ledgerhq/icons-ui/react/ChevronBottomRegular";
+import IconComponent from "../../asorted/Icon";
 const IconContainer = styled.div `
   display: inline-block;
   ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
@@ -26,12 +28,12 @@ const getVariantColors = (p) => ({
         outline: `
         border-color: ${p.theme.colors.neutral.c100};
         color: ${p.theme.colors.neutral.c100};
-        background-color: ${p.theme.colors.neutral.c00};
+        background-color: transparent;
         &:hover, &:focus {
-          background-color: ${p.theme.colors.neutral.c20};
+          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};
         }
         &:active {
-          background-color: ${p.theme.colors.neutral.c30};
+          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};
         }
       `,
         filled: `
@@ -62,12 +64,12 @@ const getVariantColors = (p) => ({
         outline: `
       border-color: ${p.theme.colors.error.c100};
       color: ${p.theme.colors.error.c100};
-      background-color: ${p.theme.colors.neutral.c00};
+      background-color: transparent;
       &:hover {
-        background-color: ${p.theme.colors.error.c10};
+        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};
       }
       &:active {
-        background-color: ${p.theme.colors.error.c30};
+        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};
       }
     `,
         filled: `
@@ -82,12 +84,12 @@ const getVariantColors = (p) => ({
         outline: `
       border-color: ${p.theme.colors.primary.c80};
       color: ${p.theme.colors.primary.c80};
-      background-color: ${p.theme.colors.neutral.c00};
+      background-color: transparent;
       &:hover {
-        background-color: ${p.theme.colors.primary.c10};
+        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};
       }
       &:active {
-        background-color: ${p.theme.colors.primary.c20};
+        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};
       }
     `,
         filled: `
@@ -102,7 +104,7 @@ const getVariantColors = (p) => ({
         outline: `
         border-color: ${p.theme.colors.neutral.c50};
         color: ${p.theme.colors.neutral.c50};
-        background-color: ${p.theme.colors.neutral.c00};
+        background-color: transparent;
       `,
         filled: `
         color: ${p.theme.colors.neutral.c50};
@@ -153,7 +155,10 @@ export const Base = baseStyled.button.attrs((p) => {
   position: relative;
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:active {
-    box-shadow: 0 0 0 4px ${(p) => p.theme.colors.primary.c60};
+    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};
   }
 
   ${(p) => {
@@ -188,19 +193,22 @@ export const Base = baseStyled.button.attrs((p) => {
           }
         `
     : ""}
-  ${(p) => p.theme.transition(["background-color", "color", "border-color"])}
+  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
 `;
 const ContentContainer = styled.div ``;
-const Button = (_a) => {
+const Button = (_a, ref) => {
     var _b;
-    var { Icon, iconPosition = "right", iconSize = 16, children, onClick } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick"]);
-    return (React.createElement(Base, Object.assign({}, props, { iconButton: !(Icon == null) && !children, onClick: onClick }),
+    var { Icon, iconPosition = "right", iconSize = 16, children, onClick, iconName } = _a, props = __rest(_a, ["Icon", "iconPosition", "iconSize", "children", "onClick", "iconName"]);
+    const iconNodeSize = iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4];
+    const IconNode = useMemo(() => (iconName && React.createElement(IconComponent, { name: iconName, size: iconNodeSize })) ||
+        (Icon && React.createElement(Icon, { size: iconNodeSize })), [iconName, iconNodeSize, Icon]);
+    return (React.createElement(Base, Object.assign({}, props, { ref: ref, iconButton: !(Icon == null) && !children, onClick: onClick }),
         iconPosition === "right" ? React.createElement(ContentContainer, null, children) : null,
-        Icon != null ? (React.createElement(IconContainer, { iconPosition: iconPosition },
-            React.createElement(Icon, { size: iconSize || fontSizes[(_b = props.fontSize) !== null && _b !== void 0 ? _b : 4] }))) : null,
+        IconNode && React.createElement(IconContainer, { iconPosition: iconPosition }, IconNode),
         iconPosition === "left" ? React.createElement(ContentContainer, null, children) : null));
 };
-const StyledExpandButton = styled(Button).attrs((props) => ({
+const ButtonWithRef = React.forwardRef(Button);
+const StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({
     Icon: props.Icon != null || ChevronBottom,
     iconPosition: props.iconPosition || "right",
 })) `
@@ -209,14 +217,17 @@ const StyledExpandButton = styled(Button).attrs((props) => ({
     ${(p) => (p.expanded ? "transform: rotate(180deg)" : "")}
   }
 `;
-export const ExpandButton = function ExpandButton(_a) {
+export function ButtonExpand(_a, ref) {
     var { onToggle, onClick } = _a, props = __rest(_a, ["onToggle", "onClick"]);
     const [expanded, setExpanded] = useState(false);
-    return (React.createElement(StyledExpandButton, Object.assign({}, props, { expanded: expanded, onClick: (event) => {
+    return (React.createElement(StyledButtonExpand, Object.assign({}, props, { ref: ref, expanded: expanded, onClick: (event) => {
             setExpanded((expanded) => !expanded);
             onToggle != null && onToggle(!expanded);
             onClick != null && onClick(event);
         } })));
-};
+}
 Button.Unstyled = ButtonUnstyled;
-export default Button;
+Button.Expand = React.forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+export default ButtonWithRef;

package/components/form/BaseInput/index.js

@@ -28,7 +28,7 @@ export const InputContainer = styled.div `
     !p.warning &&
     css `
       border: 1px solid ${p.theme.colors.primary.c80};
-      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.48)};
+      box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};
     `};
 
   ${(p) => p.error &&

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

@@ -1,5 +1,6 @@
+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

@@ -14,22 +14,23 @@ import { components } from "react-select";
 import { useTheme } from "styled-components";
 import SelectInput from "../../form/SelectInput";
 import Text from "../../asorted/Text";
+import { Icons } from "../../../";
 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: "neutral.c80", mr: 2 }, label),
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", 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, { fontWeight: "semiBold", variant: "paragraph", mr: 2 },
+    const isOpen = props.selectProps.menuIsOpen;
+    return (React.createElement(ValueContainer, Object.assign({}, props, { render: () => (React.createElement(FlexBox, { alignItems: "center" },
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", mr: 2 },
                 React.createElement(FlexBox, null, props.children)),
-            React.createElement(FlexBox, { alignItems: "center" },
-                React.createElement(ChevronIcon, { size: 12 })))) })));
+            React.createElement(FlexBox, { alignItems: "center", style: { transform: isOpen ? "rotate(180deg)" : "" } },
+                React.createElement(Icons.DropdownMedium, { size: 20 })))) })));
 }
 function DropdownIndicatorsContainer() {
     return null;

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

@@ -0,0 +1,42 @@
+import React from "react";
+export declare const placements: readonly ["bottom-start", "bottom", "bottom-end"];
+declare type Placement = typeof placements[number];
+export declare type Props = {
+    /**
+     * Label of the dropdown button, displayed before the dropdown icon.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Controls whether the dropdown can be open.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening outside of this component.
+     * Defaults to true.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Controls whether the dropdown will close on a click event happening inside the dropdown.
+     * Defaults to false.
+     */
+    closeOnClickInside?: boolean;
+    /**
+     * Content of the dropdown.
+     */
+    children: React.ReactNode;
+    /**
+     * Vertical alignment of the dropdown relative to the dropdown button.
+     * Will automatically adjust to the document to avoid overflowing.
+     * Defaults to "bottom".
+     */
+    placement?: Placement;
+    /**
+     * Controls whether the dropdown will flip its side to keep it in view
+     * in case there isn't enough space available. See https://floating-ui.com/docs/flip
+     * Defaults to false.
+     */
+    flipDisabled?: boolean;
+};
+declare const DropdownGeneric: ({ label, closeOnClickOutside, closeOnClickInside, disabled, placement, flipDisabled, children, }: Props) => JSX.Element;
+export default DropdownGeneric;

package/components/form/DropdownGeneric/index.js

@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useFloating, getScrollParents, shift, size, flip } from "@floating-ui/react-dom";
+import styled from "styled-components";
+import { Icons } from "../../../";
+import Flex from "../../layout/Flex";
+import Box from "../../layout/Flex";
+import Text from "../../asorted/Text";
+const ButtonContainer = styled(Box).attrs({
+    flexDirection: "row",
+    width: "auto",
+    alignItems: "center",
+    height: "36px",
+}) `
+  cursor: ${(p) => !p.disabled && "pointer"};
+  > :last-child {
+    /* targeting the dropdown icon */
+    ${(p) => p.opened && "transform: rotate(180deg);"}
+    margin-left: ${(p) => p.theme.space[3]}px;
+  }
+`;
+const DropdownContainer = styled(Flex).attrs(({ theme }) => {
+    const isLight = theme.colors.type === "light";
+    return {
+        zIndex: 1,
+        flexDirection: "column",
+        padding: 3,
+        border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`,
+        borderRadius: "8px",
+        backgroundColor: isLight ? "neutral.c00" : "neutral.c20",
+        color: theme.colors.neutral.c80,
+    };
+}) `
+  overflow-y: auto;
+  box-shadow: 0px 6px 12px rgba(0, 0, 0, ${(p) => (p.theme.colors.type === "light" ? 0.04 : 0.08)});
+`;
+export const placements = ["bottom-start", "bottom", "bottom-end"];
+const DropdownGeneric = ({ label, closeOnClickOutside = true, closeOnClickInside = false, disabled = false, placement = "bottom", flipDisabled = false, children, }) => {
+    const divRef = useRef(null);
+    const [maxHeight, setMaxHeight] = useState();
+    const [maxWidth, setMaxWidth] = useState();
+    const [opened, setOpened] = useState(false);
+    const handleClickButton = useCallback(() => {
+        if (!disabled)
+            setOpened(!opened);
+    }, [opened, disabled]);
+    const handleClickInside = useCallback(() => {
+        if (closeOnClickInside)
+            setOpened(false);
+    }, [setOpened, closeOnClickInside]);
+    const { x, y, reference, floating, strategy, update, refs } = useFloating({
+        placement: placements.includes(placement) ? placement : "bottom",
+        middleware: [
+            shift(),
+            ...(flipDisabled ? [] : [flip()]),
+            size({
+                padding: 6,
+                apply({ height, width }) {
+                    setMaxHeight(height);
+                    setMaxWidth(width);
+                },
+            }),
+        ],
+    });
+    const handleResizeOrScroll = useCallback(() => {
+        if (opened && !disabled)
+            update();
+    }, [opened, disabled, update]);
+    useEffect(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        const parents = [
+            ...getScrollParents(refs.reference.current),
+            ...getScrollParents(refs.floating.current),
+        ];
+        parents.forEach((parent) => {
+            parent.addEventListener("scroll", handleResizeOrScroll);
+            parent.addEventListener("resize", handleResizeOrScroll);
+        });
+        return () => {
+            parents.forEach((parent) => {
+                parent.removeEventListener("scroll", handleResizeOrScroll);
+                parent.removeEventListener("resize", handleResizeOrScroll);
+            });
+        };
+    }, [flipDisabled, refs.reference, refs.floating, handleResizeOrScroll]);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (closeOnClickOutside &&
+                opened &&
+                divRef.current &&
+                !divRef.current.contains(event.target)) {
+                setOpened(false);
+            }
+        }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [closeOnClickOutside, opened, setOpened, divRef]);
+    const color = disabled ? "neutral.c50" : "neutral.c100";
+    return (React.createElement(Box, { ref: divRef },
+        React.createElement(ButtonContainer, { ref: reference, onClick: handleClickButton, disabled: disabled, opened: opened && !disabled },
+            React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: color }, label),
+            React.createElement(Icons.DropdownMedium, { size: 20, color: color })),
+        opened && !disabled && (React.createElement(DropdownContainer, { ref: floating, style: {
+                position: strategy,
+                top: y !== null && y !== void 0 ? y : "",
+                left: x !== null && x !== void 0 ? x : "",
+                maxHeight: maxHeight ? `${maxHeight}px` : "",
+                maxWidth: maxWidth ? "" : "",
+                // maxWidth: maxWidth ? `${maxWidth}px` : "", /* TODO: fix this */
+            }, onClick: handleClickInside }, children))));
+};
+export default DropdownGeneric;

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,7 +10,7 @@ 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";
@@ -25,6 +25,7 @@ const Input = styled.input `
   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;
@@ -60,6 +61,20 @@ const Input = styled.input `
     }
   }
 
+  &[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)};
+    }
+  }
+
   &[data-variant="success"] {
     :hover,
     :checked:not([disabled]),
@@ -88,13 +103,67 @@ const Input = styled.input `
     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 {
+      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 {
+    border-color: ${(p) => p.theme.colors.neutral.c40};
+    cursor: unset;
+  }
+`;
 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/index.d.ts

@@ -11,7 +11,7 @@ export declare const RadioContext: React.Context<Omit<RadioProps, "children" | "
 declare const Radio: {
     ({ currentValue, name, onChange, children, containerProps, }: RadioProps): JSX.Element;
     Element: {
-        ({ label, value, disabled, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
+        ({ label, value, disabled, outlined, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
         displayName: string;
     };
     ListElement: {

package/components/form/SelectInput/Control.d.ts

@@ -1,10 +1,4 @@
-import { Styles, ControlProps, OptionTypeBase } from "react-select";
+import { GroupBase, StylesConfig, ControlProps } from "react-select";
 import { DefaultTheme } from "styled-components";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(theme: DefaultTheme): NonNullable<Styles<T, M>["control"]>;
-export declare function Control<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: ControlProps<T, M>): JSX.Element;
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(theme: DefaultTheme): NonNullable<StylesConfig<O, M, G>["control"]>;
+export declare function Control<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: ControlProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/Control.js

@@ -5,7 +5,8 @@ export function getStyles(theme) {
     return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", alignItems: "center", width: "100%", border: 0, padding: `0px ${theme.space[7]}px`, boxShadow: "none", borderRadius: "inherit", background: "transparent" }));
 }
 export function Control(props) {
-    const { isFocused, selectProps: { isDisabled, error, renderLeft }, children, } = props;
+    const { isFocused, selectProps, children } = props;
+    const { isDisabled, error, renderLeft } = selectProps;
     return (React.createElement(InputContainer, { disabled: isDisabled, error: error, focus: isFocused },
         React.createElement(components.Control, Object.assign({}, props),
             renderLeft ? renderLeft(props) : null,

package/components/form/SelectInput/DropdownIndicator.d.ts

@@ -1,9 +1,3 @@
-import { Styles, IndicatorProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): NonNullable<Styles<T, M>["dropdownIndicator"]>;
-export declare function DropdownIndicator<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: IndicatorProps<T, M>): JSX.Element;
+import { GroupBase, StylesConfig, DropdownIndicatorProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): NonNullable<StylesConfig<O, M, G>["dropdownIndicator"]>;
+export declare function DropdownIndicator<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: DropdownIndicatorProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/IndicatorsContainer.d.ts

@@ -1,5 +1,2 @@
-import { IndicatorContainerProps, OptionTypeBase } from "react-select";
-export declare function IndicatorsContainer<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: IndicatorContainerProps<T, M>): JSX.Element;
+import { GroupBase, IndicatorsContainerProps } from "react-select";
+export declare function IndicatorsContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: IndicatorsContainerProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/IndicatorsContainer.js

@@ -2,7 +2,7 @@ import React from "react";
 import { components } from "react-select";
 import FlexBox from "../../layout/Flex";
 export function IndicatorsContainer(props) {
-    const { selectProps: { renderRight }, } = props;
+    const { renderRight } = props.selectProps;
     return (React.createElement(FlexBox, { alignItems: "center" },
         renderRight ? renderRight(props) : null,
         React.createElement(components.IndicatorsContainer, Object.assign({}, props))));