@ledgerhq/react-ui 0.4.0 → 0.7.1

package/components/form/NumberInput/index.js

@@ -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

@@ -32,9 +32,10 @@ const QrCodeButton = styled.button `
     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

@@ -37,10 +37,11 @@ const Legend = styled(Text) `
     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,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/SearchInput/index.d.ts

@@ -1,3 +1,25 @@
-/// <reference types="react" />
+import React from "react";
 import { InputProps } from "../BaseInput";
-export default function SearchInput(props: InputProps): 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;
+} & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/components/form/SearchInput/index.js

@@ -2,8 +2,9 @@ import React from "react";
 import { useTheme } from "styled-components";
 import Input, { InputRenderLeftContainer } from "../BaseInput";
 import SearchMedium from "@ledgerhq/icons-ui/react/SearchMedium";
-export default function SearchInput(props) {
+function SearchInput(props, ref) {
     const theme = useTheme();
-    return (React.createElement(Input, Object.assign({}, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
+    return (React.createElement(Input, Object.assign({ ref: ref }, props, { renderLeft: React.createElement(InputRenderLeftContainer, null,
             React.createElement(SearchMedium, { color: props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70 })) })));
 }
+export default React.forwardRef(SearchInput);

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

@@ -1,10 +1,4 @@
-/// <reference types="react" />
-import { Styles, ControlProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): 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;
+import { GroupBase, StylesConfig, ControlProps } from "react-select";
+import { DefaultTheme } from "styled-components";
+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

@@ -1,16 +1,13 @@
 import React from "react";
 import { components } from "react-select";
-import styled from "styled-components";
 import { InputContainer } from "../BaseInput";
-export function getStyles() {
-    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", alignItems: "center", width: "100%", border: 0, boxShadow: "none", borderRadius: "inherit", background: "transparent" }));
+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" }));
 }
-const Container = styled(InputContainer) `
-  padding: 0 ${(p) => p.theme.space[7]}px;
-`;
 export function Control(props) {
-    const { isFocused, selectProps: { isDisabled, error, renderLeft }, children, } = props;
-    return (React.createElement(Container, { disabled: isDisabled, error: error, focus: isFocused },
+    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,
             children)));

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

@@ -1,10 +1,3 @@
-/// <reference types="react" />
-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,6 +1,2 @@
-/// <reference types="react" />
-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))));

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

@@ -1,11 +1,4 @@
-/// <reference types="react" />
-import { Styles, MenuListComponentProps, OptionTypeBase } from "react-select";
+import { GroupBase, StylesConfig, MenuListProps } 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>["menuList"]>;
-export declare function MenuList<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: MenuListComponentProps<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>["menuList"]>;
+export declare function MenuList<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MenuListProps<O, M, G>): JSX.Element;

package/components/form/SelectInput/MenuList.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { components } from "react-select";
 export function getStyles(theme) {
-    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", flexDirection: "column", gap: theme.space[2], padding: theme.space[3], border: `1px solid ${theme.colors.neutral.c20}`, borderRadius: "8px", boxShadow: `0px 2px 12px rgba(0, 0, 0, 0.04)`, background: theme.colors.neutral.c00, color: theme.colors.neutral.c80 }));
+    const isLight = theme.colors.type === "light";
+    return (provided) => (Object.assign(Object.assign({}, provided), { display: "flex", flexDirection: "column", gap: theme.space[2], padding: theme.space[3], border: `1px solid ${theme.colors.neutral[isLight ? "c20" : "c30"]}`, borderRadius: "8px", boxShadow: `0px 6px 12px rgba(0, 0, 0, ${isLight ? 0.04 : 0.08})`, background: theme.colors.neutral[isLight ? "c00" : "c20"], color: theme.colors.neutral.c80 }));
 }
 export function MenuList(props) {
     return React.createElement(components.MenuList, Object.assign({}, props), props.children);

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

@@ -1,20 +1,8 @@
 import React from "react";
-import { Styles, OptionProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): NonNullable<Styles<T, M>["option"]>;
-export declare type ExtraProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
-    render?: (props: React.PropsWithChildren<OptionProps<T, M>>) => React.ReactNode;
+import { GroupBase, StylesConfig, OptionProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): NonNullable<StylesConfig<O, M, G>["option"]>;
+export declare type ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {
+    render?: (props: React.PropsWithChildren<OptionProps<O, M, G>>) => React.ReactNode;
 };
-export declare type Props<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = OptionProps<T, M> & ExtraProps<T, M>;
-export declare function Option<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: Props<T, M>): JSX.Element;
+export declare type Props<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = OptionProps<O, M, G> & ExtraProps<O, M, G>;
+export declare function Option<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: Props<O, M, G>): JSX.Element;

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

@@ -1,17 +1,8 @@
 import React from "react";
-import { Styles, ValueContainerProps, OptionTypeBase } from "react-select";
-export declare function getStyles<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(): Styles<T, M>["valueContainer"];
-declare type ExtraProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
-    render?: (props: React.PropsWithChildren<ValueContainerProps<T, M>>) => React.ReactNode;
+import { GroupBase, StylesConfig, ValueContainerProps } from "react-select";
+export declare function getStyles<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(): StylesConfig<O, M, G>["valueContainer"];
+declare type ExtraProps<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = {
+    render?: (props: React.PropsWithChildren<ValueContainerProps<O, M, G>>) => React.ReactNode;
 };
-export declare function ValueContainer<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: ValueContainerProps<T, M> & ExtraProps<T, M>): JSX.Element;
+export declare function ValueContainer<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: ValueContainerProps<O, M, G> & ExtraProps<O, M, G>): JSX.Element;
 export {};

package/components/form/SelectInput/ValueContainer.js

@@ -7,5 +7,5 @@ export function getStyles() {
 export function ValueContainer(props) {
     const color = props.selectProps.isDisabled ? "neutral.c60" : "neutral.c100";
     return (React.createElement(components.ValueContainer, Object.assign({}, props),
-        React.createElement(Text, { as: "div", variant: "paragraph", color: color }, props.render ? props.render(props) : props.children)));
+        React.createElement(Text, { as: "div", variant: "paragraph", color: color, style: { display: "inherit", alignItems: "center" } }, props.render ? props.render(props) : props.children)));
 }

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

@@ -1,10 +1,7 @@
 import React from "react";
-import { MenuListComponentProps, OptionTypeBase } from "react-select";
+import { GroupBase, MenuListProps } from "react-select";
 export declare type RowProps = React.PropsWithChildren<{
     style: React.CSSProperties;
 }>;
 export declare const VirtualRow: React.MemoExoticComponent<({ style, children }: RowProps) => JSX.Element>;
-export declare function VirtualMenuList<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>(props: MenuListComponentProps<T, M>): React.ReactElement;
+export declare function VirtualMenuList<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>>(props: MenuListProps<O, M, G>): React.ReactElement;

package/components/form/SelectInput/VirtualMenuList.js

@@ -3,7 +3,8 @@ import { components } from "react-select";
 import { FixedSizeList as List } from "react-window";
 export const VirtualRow = memo(({ style, children }) => (React.createElement("div", { style: style }, children)));
 export function VirtualMenuList(props) {
-    const { children, options, maxHeight, getValue, getStyles, selectProps: { noOptionsMessage, rowHeight }, } = props;
+    const { children, options, maxHeight, getValue, getStyles, selectProps } = props;
+    const { noOptionsMessage, rowHeight = 0 } = selectProps;
     const listRef = useRef();
     const [value] = getValue();
     const initialOffset = options.indexOf(value) * rowHeight;

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

@@ -1,23 +1,14 @@
 import React from "react";
-import { Props as SelectProps, OptionTypeBase, Styles } from "react-select";
-export declare type SelfProps<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = {
+import { Props as SelectProps, ControlProps, IndicatorsContainerProps, GroupBase, StylesConfig } from "react-select";
+export declare type SelfProps<O, M extends boolean, G extends GroupBase<O>> = {
     error?: string;
-    renderLeft?: (props: Props<T, M>) => React.ReactNode;
-    renderRight?: (props: Props<T, M>) => React.ReactNode;
+    renderLeft?: (props: ControlProps<O, M, G>) => React.ReactNode;
+    renderRight?: (props: IndicatorsContainerProps<O, M, G>) => React.ReactNode;
     rowHeight?: number;
     unwrapped?: boolean;
-    extendStyles?: (styles: Styles<T, M>) => Styles<T, M>;
+    extendStyles?: (styles: StylesConfig<O, M, G>) => StylesConfig<O, M, G>;
 };
-export declare type Props<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false> = SelectProps<T, M> & SelfProps<T, M>;
-declare function SelectInput<T extends OptionTypeBase = {
-    label: string;
-    value: string;
-}, M extends boolean = false>({ error, rowHeight, unwrapped, extendStyles, ...props }: Props<T, M>): JSX.Element;
+export declare type Props<O = unknown, M extends boolean = false, G extends GroupBase<O> = GroupBase<O>> = SelectProps<O, M, G> & SelfProps<O, M, G>;
+declare function SelectInput<O, M extends boolean, G extends GroupBase<O>>({ error, rowHeight, unwrapped, extendStyles, ...props }: Props<O, M, G>): JSX.Element;
 declare const _default: typeof SelectInput;
 export default _default;

package/components/form/SelectInput/index.js

@@ -20,7 +20,7 @@ import * as OptionModule from "./Option";
 import { IndicatorsContainer } from "./IndicatorsContainer";
 import { InputErrorContainer } from "../BaseInput";
 const stylesFn = (theme) => ({
-    control: ControlModule.getStyles(),
+    control: ControlModule.getStyles(theme),
     valueContainer: ValueContainerModule.getStyles(),
     dropdownIndicator: DropdownIndicatorModule.getStyles(),
     menuList: MenuListModule.getStyles(theme),
@@ -28,6 +28,12 @@ const stylesFn = (theme) => ({
     input: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
     placeholder: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c60 })),
     singleValue: (provided) => (Object.assign(Object.assign({}, provided), { color: "inherit" })),
+    multiValue: (provided) => (Object.assign(Object.assign({}, provided), { backgroundColor: theme.colors.primary.c20, borderRadius: theme.radii[1] })),
+    multiValueLabel: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.neutral.c100 })),
+    multiValueRemove: (provided) => (Object.assign(Object.assign({}, provided), { cursor: "pointer", ":hover": {
+            color: theme.colors.error.c100,
+            backgroundColor: theme.colors.error.c30,
+        } })),
     menu: (provided) => (Object.assign(Object.assign({}, provided), { border: 0, boxShadow: "none", background: "none" })),
 });
 function SelectInput(_a) {
@@ -35,7 +41,9 @@ function SelectInput(_a) {
     const theme = useTheme();
     const styles = useMemo(() => (extendStyles ? extendStyles(stylesFn(theme)) : stylesFn(theme)), [theme, extendStyles]);
     const { isDisabled, components = {} } = props;
-    const innerContent = (React.createElement(Select, Object.assign({}, props, { error: error, styles: Object.assign(Object.assign({}, styles), props.styles), classNamePrefix: "react-select", rowHeight: rowHeight, components: Object.assign({ Control: ControlModule.Control, ValueContainer: ValueContainerModule.ValueContainer, IndicatorsContainer, DropdownIndicator: DropdownIndicatorModule.DropdownIndicator, MenuList: MenuListModule.MenuList, Option: OptionModule.Option, IndicatorSeparator: null }, components) })));
+    const innerContent = (React.createElement(Select, Object.assign({}, props, { styles: Object.assign(Object.assign({}, styles), props.styles), classNamePrefix: "react-select", components: Object.assign({ Control: ControlModule.Control, ValueContainer: ValueContainerModule.ValueContainer, IndicatorsContainer, DropdownIndicator: DropdownIndicatorModule.DropdownIndicator, MenuList: MenuListModule.MenuList, Option: OptionModule.Option, IndicatorSeparator: null }, components), 
+        // @ts-expect-error We want to be able to pass extra props here…
+        rowHeight: rowHeight })));
     if (unwrapped)
         return innerContent;
     return (React.createElement("div", null,

package/components/form/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

package/components/form/index.js

@@ -1,6 +1,7 @@
 export { default as Input } from "./BaseInput";
 export { default as Checkbox } from "./Checkbox";
 export { default as Dropdown } from "./Dropdown";
+export { default as DropdownGeneric } from "./DropdownGeneric";
 export { default as LegendInput } from "./LegendInput";
 export { default as NumberInput } from "./NumberInput";
 export { default as QrCodeInput } from "./QrCodeInput";

package/components/layout/Box/index.d.ts

@@ -1,11 +1,8 @@
 import { BaseStyledProps } from "../../styled";
 export declare type BoxProps = BaseStyledProps;
-declare const Box: 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>>> & {
+declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
 }, never>;
 export default Box;

package/components/layout/Drawer/index.d.ts

@@ -1,13 +1,28 @@
 import React from "react";
+import { FlexBoxProps } from "../Flex";
+import { Props as DividerProps } from "../../asorted/Divider";
+export declare enum Direction {
+    Left = "left",
+    Right = "right"
+}
 export interface DrawerProps {
     isOpen: boolean;
     children: React.ReactNode;
     title?: React.ReactNode;
+    footer?: React.ReactNode;
     big?: boolean;
+    ignoreBackdropClick?: boolean;
+    backgroundColor?: string;
     onClose: () => void;
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;
     hideNavigation?: boolean;
+    menuPortalTarget?: Element | null;
+    direction?: Direction;
+    extraContainerProps?: Partial<FlexBoxProps>;
+    extraHeaderProps?: Partial<FlexBoxProps>;
+    extraFooterProps?: Partial<FlexBoxProps>;
+    extraFooterDividerProps?: Partial<DividerProps>;
 }
-declare const Drawer: ({ children, ...sideProps }: DrawerProps) => React.ReactElement;
-export default Drawer;
+declare const _default: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;