@ledgerhq/react-ui 0.2.0 → 0.5.0

package/components/form/Radio/RadioListElement.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from "react";
+import styled from "styled-components";
+import Text from "../../asorted/Text";
+import Flex from "../../layout/Flex";
+import { rgba } from "../../../styles/helpers";
+import { RadioContext } from "./index";
+export const Label = styled(Text) `
+  color: ${(p) => p.disabled
+    ? p.theme.colors.neutral.c50
+    : p.checked
+        ? p.theme.colors.primary.c90
+        : p.theme.colors.neutral.c100};
+`;
+const Container = styled(Flex) `
+  cursor: ${(p) => (p.disabled ? "" : "pointer")};
+  justify-content: center;
+  align-items: center;
+  background-color: ${(p) => (p.checked ? p.theme.colors.primary.c20 : "")};
+  border: 1px solid ${(p) => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};
+  border-radius: ${(p) => `${p.theme.radii[2]}px`};
+  padding: ${(p) => p.theme.space[6]}px;
+
+  :hover {
+    border-color: ${(p) => (p.disabled || p.checked ? "" : p.theme.colors.primary.c80)};
+  }
+`;
+const Input = styled.input `
+  position: relative;
+  appearance: none;
+  &:focus ~ ${Container} {
+    box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};
+  }
+`;
+const RadioListElement = styled.label.attrs({ tabIndex: -1 }) `
+  display: inline-flex;
+  align-items: center;
+`;
+const ListElement = (_a) => {
+    var { label, value, disabled, containerProps } = _a, props = __rest(_a, ["label", "value", "disabled", "containerProps"]);
+    const context = useContext(RadioContext);
+    if (context === undefined)
+        throw new Error("RadioElement must be used within a RadioProvider");
+    const isChecked = context.currentValue === value;
+    const handleChange = (event) => {
+        context.onChange(event.target.value);
+    };
+    return (React.createElement(RadioListElement, null,
+        React.createElement(Input, Object.assign({ type: "radio", checked: isChecked, disabled: disabled, onChange: handleChange, value: value, name: context.name }, props)),
+        React.createElement(Container, Object.assign({ checked: isChecked, disabled: disabled }, containerProps), typeof label === "string" ? (React.createElement(Label, { checked: isChecked, disabled: disabled, variant: "paragraph" }, label)) : (React.createElement(label, { checked: isChecked, disabled })))));
+};
+ListElement.displayName = "Radio.ListElement"; // For easy identification in the React devtools & in storybook
+export default ListElement;

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

@@ -10,6 +10,13 @@ export declare type RadioProps = {
 export declare const RadioContext: React.Context<Omit<RadioProps, "children" | "containerProps">>;
 declare const Radio: {
     ({ currentValue, name, onChange, children, containerProps, }: RadioProps): JSX.Element;
-    Element: ({ label, value, disabled, variant, ...props }: import("./RadioElement").RadioElementProps) => JSX.Element;
+    Element: {
+        ({ label, value, disabled, variant, ...props }: import("./RadioElement").RadioElementProps): JSX.Element;
+        displayName: string;
+    };
+    ListElement: {
+        ({ label, value, disabled, containerProps, ...props }: import("./RadioListElement").RadioListElementProps): JSX.Element;
+        displayName: string;
+    };
 };
 export default Radio;

package/components/form/Radio/index.js

@@ -1,5 +1,6 @@
 import React from "react";
 import RadioElement from "./RadioElement";
+import RadioListElement from "./RadioListElement";
 import Flex from "../../layout/Flex";
 export const RadioContext = React.createContext({
     name: "",
@@ -10,4 +11,5 @@ const Radio = ({ currentValue, name, onChange, children, containerProps, }) => {
         React.createElement(RadioContext.Provider, { value: { currentValue, name, onChange } }, children)));
 };
 Radio.Element = RadioElement;
+Radio.ListElement = RadioListElement;
 export default Radio;

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

package/components/form/SelectInput/Control.js

@@ -1,16 +1,12 @@
 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 },
+    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,4 +1,3 @@
-/// <reference types="react" />
 import { Styles, IndicatorProps, OptionTypeBase } from "react-select";
 export declare function getStyles<T extends OptionTypeBase = {
     label: string;

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,4 +1,3 @@
-/// <reference types="react" />
 import { IndicatorContainerProps, OptionTypeBase } from "react-select";
 export declare function IndicatorsContainer<T extends OptionTypeBase = {
     label: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Styles, MenuListComponentProps, OptionTypeBase } from "react-select";
 import { DefaultTheme } from "styled-components";
 export declare function getStyles<T extends OptionTypeBase = {

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.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.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)));
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props as SelectProps, OptionTypeBase } from "react-select";
+import { Props as SelectProps, OptionTypeBase, Styles } from "react-select";
 export declare type SelfProps<T extends OptionTypeBase = {
     label: string;
     value: string;
@@ -9,6 +9,7 @@ export declare type SelfProps<T extends OptionTypeBase = {
     renderRight?: (props: Props<T, M>) => React.ReactNode;
     rowHeight?: number;
     unwrapped?: boolean;
+    extendStyles?: (styles: Styles<T, M>) => Styles<T, M>;
 };
 export declare type Props<T extends OptionTypeBase = {
     label: string;
@@ -17,6 +18,6 @@ export declare type Props<T extends OptionTypeBase = {
 declare function SelectInput<T extends OptionTypeBase = {
     label: string;
     value: string;
-}, M extends boolean = false>({ error, rowHeight, unwrapped, ...props }: Props<T, M>): JSX.Element;
+}, M extends boolean = false>({ error, rowHeight, unwrapped, extendStyles, ...props }: Props<T, M>): JSX.Element;
 declare const _default: typeof SelectInput;
 export default _default;

package/components/form/SelectInput/index.js

@@ -20,20 +20,20 @@ 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" })),
     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) })));
     if (unwrapped)

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

@@ -0,0 +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").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;
+}, never>;
+export default Box;

package/components/layout/Box/index.js

@@ -0,0 +1,3 @@
+import baseStyled from "../../styled";
+const Box = baseStyled.div ``;
+export default Box;

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface DrawerProps {
+    isOpen: boolean;
+    children: React.ReactNode;
+    title?: React.ReactNode;
+    big?: boolean;
+    onClose: () => void;
+    onBack?: () => void;
+    setTransitionsEnabled?: (arg0: boolean) => void;
+    hideNavigation?: boolean;
+}
+declare const Drawer: ({ children, ...sideProps }: DrawerProps) => React.ReactElement;
+export default Drawer;

package/components/layout/{Side/Side.js → Drawer/index.js}

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
-import FlexBox from "../../layout/Flex";
+import FlexBox from "../Flex";
 import Close from "@ledgerhq/icons-ui/react/CloseRegular";
 import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
 import TransitionSlide from "../../transitions/TransitionSlide";
@@ -22,7 +22,7 @@ const Container = styled(FlexBox) `
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c00};
   padding: ${(p) => p.theme.space[6]}px ${(p) => p.theme.space[12]}px;
 `;
 const Header = styled(FlexBox) `
@@ -30,7 +30,7 @@ const Header = styled(FlexBox) `
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  height: ${(p) => p.theme.space[15]}px;
+  min-height: ${(p) => p.theme.space[15]}px;
 `;
 const Wrapper = styled.div `
   height: 100%;
@@ -50,7 +50,7 @@ const Overlay = styled.div `
   width: 100vw;
   height: 100vh;
   z-index: 999;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100a07};
+  background-color: ${(p) => p.theme.colors.neutral.c100a07};
 `;
 const ScrollWrapper = styled.div `
   overflow: scroll;
@@ -68,9 +68,9 @@ const Button = styled.button `
   background: unset;
   border: unset;
   cursor: pointer;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const Drawer = ({ isOpen, title, children, big, onClose, setTransitionsEnabled, onBack, }) => {
+const DrawerContent = ({ isOpen, title, children, big, onClose, setTransitionsEnabled = () => 0, onBack, hideNavigation = true, }) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
     const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
     return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
@@ -79,18 +79,18 @@ const Drawer = ({ isOpen, title, children, big, onClose, setTransitionsEnabled,
                 React.createElement(Wrapper, { big: big },
                     React.createElement(Container, null,
                         React.createElement(Header, null,
-                            onBack != null ? (React.createElement(Button, { onClick: onBack },
-                                React.createElement(ArrowLeft, { size: 21 }))) : (React.createElement(ButtonPlaceholder, null)),
-                            React.createElement(Text, null, title) || React.createElement("div", null),
+                            !hideNavigation && (React.createElement(React.Fragment, null, onBack != null ? (React.createElement(Button, { onClick: onBack },
+                                React.createElement(ArrowLeft, { size: 21 }))) : (React.createElement(ButtonPlaceholder, null)))),
+                            (React.createElement(Text, { variant: "h5", flexShrink: 1 }, title)) || React.createElement("div", null),
                             React.createElement(Button, { onClick: onClose },
                                 React.createElement(Close, null))),
                         React.createElement(ScrollWrapper, null, children)))))));
 };
-const DrawerWrapper = (_a) => {
+const Drawer = (_a) => {
     var { children } = _a, sideProps = __rest(_a, ["children"]);
     const $root = React.useMemo(() => document.querySelector("#ll-side-root"), []);
     if ($root === null)
         throw new Error("side root cannot be found");
-    return ReactDOM.createPortal(React.createElement(Drawer, Object.assign({}, sideProps), children), $root);
+    return ReactDOM.createPortal(React.createElement(DrawerContent, Object.assign({}, sideProps), children), $root);
 };
-export default DrawerWrapper;
+export default Drawer;

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

@@ -1,8 +1,8 @@
-import { SpaceProps, FlexboxProps as FlexProps, PositionProps, ColorProps } from "styled-system";
-export interface FlexBoxProps extends FlexProps, SpaceProps, PositionProps, ColorProps {
-    columnGap?: string | number;
-    rowGap?: string | number;
-    color?: string;
-}
-declare const FlexBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FlexBoxProps, never>;
+import { BaseStyledProps } from "../../styled";
+export declare type FlexBoxProps = BaseStyledProps;
+declare const FlexBox: 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;
+}, "overflow" | "p" | "color" | "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" | "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" | "padding" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg" | "borderX" | "borderY">;
 export default FlexBox;

package/components/layout/Flex/index.js

@@ -1,12 +1,3 @@
-import { flexbox, compose, space, position, color, } from "styled-system";
-import styled from "styled-components";
-import gapsSystem from "../../../styles/system/gaps";
-const FlexBox = styled.div `
-  display: flex;
-  ${flexbox};
-  ${space};
-  ${position};
-  ${compose(gapsSystem, flexbox)};
-  ${color};
-`;
+import baseStyled from "../../styled";
+const FlexBox = baseStyled.div.attrs({ display: "flex" }) ``;
 export default FlexBox;

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

@@ -1,5 +1,6 @@
-import { GridProps, SpaceProps, PositionProps, ColorProps } from "styled-system";
-export interface Props extends GridProps, SpaceProps, PositionProps, ColorProps {
+import { GridProps } from "styled-system";
+import { BaseStyledProps } from "../../styled";
+export interface Props extends GridProps, BaseStyledProps {
     columns?: number | string;
     rows?: number | string;
 }

package/components/layout/Grid/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { grid, space, position, color, } from "styled-system";
+import { grid } from "styled-system";
+import baseStyled from "../../styled";
 function getColumns(props) {
     const { columns } = props;
     return columns === "none" ? columns : `repeat(${columns || 12}, minmax(0, 1fr));`;
@@ -8,13 +8,10 @@ function getRows(props) {
     const { rows } = props;
     return !rows ? "initial" : rows === "none" ? rows : `repeat(${rows}, minmax(0, 1fr));`;
 }
-const Grid = styled.div `
+const Grid = baseStyled.div `
   display: grid;
   grid-template-columns: ${getColumns};
   grid-template-rows: ${getRows};
   ${grid};
-  ${space};
-  ${position};
-  ${color};
 `;
 export default Grid;