@ledgerhq/react-ui 0.3.1 → 0.7.0

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,
-            React.createElement(SearchMedium, { color: props.disabled ? theme.colors.palette.neutral.c50 : theme.colors.palette.neutral.c70 })) })));
+    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/DropdownIndicator.js

@@ -10,7 +10,7 @@ export function DropdownIndicator(props) {
     const theme = useTheme();
     const { isDisabled } = props.selectProps;
     const ChevronIcon = props.selectProps.menuIsOpen ? ChevronTopMedium : ChevronBottomMedium;
-    const color = isDisabled ? theme.colors.palette.neutral.c60 : theme.colors.palette.neutral.c100;
+    const color = isDisabled ? theme.colors.neutral.c60 : theme.colors.neutral.c100;
     return (React.createElement(components.DropdownIndicator, Object.assign({}, props),
         React.createElement(Text, { as: "div", color: color, style: { display: "flex" } },
             React.createElement(ChevronIcon, { size: 12 }))));

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,7 @@
 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.palette.neutral.c20}`, borderRadius: "8px", boxShadow: `0px 2px 12px rgba(0, 0, 0, 0.04)`, background: theme.colors.palette.neutral.c00, color: theme.colors.palette.neutral.c80 }));
+    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 }));
 }
 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/Option.js

@@ -26,34 +26,34 @@ const Wrapper = styled(Text).attrs({ as: "div" }) `
     const { theme, selected, focus, disabled } = props;
     if (selected) {
         return `
-        color: ${theme.colors.palette.primary.c90};
-        background: ${theme.colors.palette.primary.c20};
+        color: ${theme.colors.primary.c90};
+        background: ${theme.colors.primary.c20};
       `;
     }
     if (disabled) {
         return `
-        color: ${theme.colors.palette.neutral.c50};
+        color: ${theme.colors.neutral.c50};
         ${focus
             ? `&:not(:active) {
-            background: ${theme.colors.palette.neutral.c20};
+            background: ${theme.colors.neutral.c20};
           }`
             : ""}
       `;
     }
     return `
-      color: ${theme.colors.palette.neutral.c80};
+      color: ${theme.colors.neutral.c80};
       &:hover {
-        color: ${theme.colors.palette.neutral.c100};
-        background: ${theme.colors.palette.primary.c10};
+        color: ${theme.colors.neutral.c100};
+        background: ${theme.colors.primary.c10};
       }
       &:active {
-        color: ${theme.colors.palette.neutral.c100};
-        background: ${theme.colors.palette.primary.c30};
+        color: ${theme.colors.neutral.c100};
+        background: ${theme.colors.primary.c30};
       }
       ${focus
         ? `&:not(:active) {
-          color: ${theme.colors.palette.neutral.c100};
-          background: ${theme.colors.palette.primary.c10};
+          color: ${theme.colors.neutral.c100};
+          background: ${theme.colors.primary.c10};
         }`
         : ""}
     `;

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

@@ -5,7 +5,7 @@ export function getStyles() {
     return (provided) => (Object.assign(Object.assign({}, provided), { padding: 0 }));
 }
 export function ValueContainer(props) {
-    const color = props.selectProps.isDisabled ? "palette.neutral.c60" : "palette.neutral.c100";
+    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,22 +1,14 @@
 import React from "react";
-import { Props as SelectProps, OptionTypeBase } 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: 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, ...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,22 +20,30 @@ 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),
     option: OptionModule.getStyles(),
-    input: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.palette.neutral.c100 })),
-    placeholder: (provided) => (Object.assign(Object.assign({}, provided), { color: theme.colors.palette.neutral.c60 })),
+    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) {
-    var { error, rowHeight = 48, unwrapped } = _a, props = __rest(_a, ["error", "rowHeight", "unwrapped"]);
+    var { error, rowHeight = 48, unwrapped, extendStyles } = _a, props = __rest(_a, ["error", "rowHeight", "unwrapped", "extendStyles"]);
     const theme = useTheme();
-    const styles = useMemo(() => stylesFn(theme), [theme]);
+    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/SplitInput/index.js

@@ -4,19 +4,19 @@ import { InputContainer, InputErrorContainer } from "../BaseInput";
 function getDividerColor(props) {
     var _a, _b, _c, _d;
     if (props.disabled) {
-        return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.colors.palette.neutral.c40;
+        return (_a = props.theme) === null || _a === void 0 ? void 0 : _a.colors.neutral.c40;
     }
     if (props.error) {
-        return (_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors.palette.error.c100;
+        return (_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors.error.c100;
     }
     if (props.focus) {
-        return (_c = props.theme) === null || _c === void 0 ? void 0 : _c.colors.palette.primary.c80;
+        return (_c = props.theme) === null || _c === void 0 ? void 0 : _c.colors.primary.c80;
     }
-    return (_d = props.theme) === null || _d === void 0 ? void 0 : _d.colors.palette.neutral.c40;
+    return (_d = props.theme) === null || _d === void 0 ? void 0 : _d.colors.neutral.c40;
 }
 function getHoverBolderColor(props) {
     var _a;
-    return props.disabled || props.error ? "inherit" : (_a = props.theme) === null || _a === void 0 ? void 0 : _a.colors.palette.primary.c80;
+    return props.disabled || props.error ? "inherit" : (_a = props.theme) === null || _a === void 0 ? void 0 : _a.colors.primary.c80;
 }
 const Divider = styled.div `
   border-right: 1px solid;

package/components/form/Switch/Switch.js

@@ -33,7 +33,7 @@ const Switcher = styled.div `
   position: relative;
   display: inline-block;
 
-  background: ${(props) => props.theme.colors.palette.neutral.c60};
+  background: ${(props) => props.theme.colors.neutral.c60};
   border-radius: ${(p) => p.theme.space[6]}px;
   width: var(--ll-switch-width);
   height: var(--ll-switch-height);
@@ -47,7 +47,7 @@ const Switcher = styled.div `
 
   &:focus {
     outline-style: auto;
-    outline: 1px solid ${(props) => props.theme.colors.palette.neutral.c90};
+    outline: 1px solid ${(props) => props.theme.colors.neutral.c90};
     outline-offset: ${(p) => p.theme.space[1]}px;
   }
 
@@ -55,7 +55,7 @@ const Switcher = styled.div `
   &:before {
     position: absolute;
     display: block;
-    background: ${(props) => props.theme.colors.palette.constant.white};
+    background: ${(props) => props.theme.colors.constant.white};
     border-radius: ${(p) => p.theme.space[12]}px;
 
     width: calc(calc(var(--ll-switch-width) / 2) - var(--ll-switch-padding));
@@ -72,27 +72,27 @@ const Switcher = styled.div `
   }
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.palette.neutral.c70};
+    background-color: ${(props) => props.theme.colors.neutral.c70};
   }
 
   &:active {
-    background-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    background-color: ${(props) => props.theme.colors.neutral.c80};
   }
 
   /* CHECKED VARIANT */
   ${Input}:checked ~ & {
-    background: ${(props) => props.theme.colors.palette.primary.c80};
+    background: ${(props) => props.theme.colors.primary.c80};
 
     &:before {
       transform: translateX(calc(var(--ll-switch-width) / 2));
     }
 
     &:hover {
-      background: ${(props) => props.theme.colors.palette.primary.c90};
+      background: ${(props) => props.theme.colors.primary.c90};
     }
 
     :active {
-      background: ${(props) => props.theme.colors.palette.primary.c100};
+      background: ${(props) => props.theme.colors.primary.c100};
     }
   }
 `;

package/components/helpers.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 export declare const lipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi varius sollicitudin lectus vel finibus. Praesent eu leo nec libero interdum sodales et eget nulla. Donec tincidunt posuere sem vel porttitor. Nullam maximus urna non elit tempor, ut fermentum metus euismod. Quisque et rutrum arcu. Etiam nisl elit, tincidunt volutpat libero sed, imperdiet mollis risus. Maecenas imperdiet lectus id sapien tempus, eget fringilla nisl lacinia. Sed sem velit, egestas nec imperdiet ac, lobortis vel lectus. Curabitur dui orci, aliquam sit amet metus ut, sollicitudin fermentum erat. Curabitur id purus eget lectus varius congue. Donec eu auctor augue. Ut eleifend arcu nisl, volutpat fringilla quam cursus sit amet. Praesent leo enim, cursus vel egestas sed, vestibulum imperdiet diam. Etiam a diam lectus. Suspendisse aliquam imperdiet ultrices. Phasellus eget nulla eros. Nullam semper porta pulvinar. Duis maximus, lectus ac fringilla interdum, lacus ex cursus tellus, et dapibus est nisi id dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla gravida elit turpis, ac condimentum velit placerat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In dolor tellus, semper id pulvinar eget, ornare bibendum justo. Sed in libero nisl. Morbi tincidunt sollicitudin nunc, vel imperdiet nisi iaculis vel. Nam viverra lorem vel ligula varius, lacinia maximus metus porta. Sed vitae vehicula leo. Proin sed lectus in lorem laoreet iaculis sed ut eros. Pellentesque et rhoncus sapien. Nam fringilla mauris nec tellus vestibulum, vel convallis mauris sagittis. Vivamus et lacinia dui. Sed pharetra vitae lacus vel facilisis. Nullam et sollicitudin risus. Curabitur egestas bibendum neque, sed lacinia nisi cursus nec. Quisque sed diam congue, luctus magna eget, convallis lectus. Cras ut tellus imperdiet, blandit magna non, auctor felis. Suspendisse potenti. Nulla volutpat felis vitae ante blandit tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sagittis scelerisque magna quis ultrices";
 export declare type StoryTemplate<Args> = {
-    (args: Args): JSX.Element;
+    (args: Args): React.ReactNode;
     args?: Partial<Args>;
     parameters?: unknown;
 };

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,14 +1,22 @@
 import React from "react";
+export declare enum Direction {
+    Left = "left",
+    Right = "right"
+}
 export interface DrawerProps {
     isOpen: boolean;
     children: React.ReactNode;
     title?: React.ReactNode;
+    footer?: React.ReactNode;
     big?: boolean;
-    small?: boolean;
+    ignoreBackdropClick?: boolean;
+    backgroundColor?: string;
     onClose: () => void;
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;
     hideNavigation?: boolean;
+    menuPortalTarget?: Element | null;
+    direction?: Direction;
 }
-declare const Drawer: ({ children, ...sideProps }: DrawerProps) => React.ReactElement;
-export default Drawer;
+declare const _default: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;