@ledgerhq/react-ui 0.5.0 → 0.7.2

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

@@ -1,10 +1,4 @@
-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

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

package/components/layout/Drawer/index.js

@@ -13,29 +13,25 @@ import React, { useCallback } from "react";
 import ReactDOM from "react-dom";
 import styled from "styled-components";
 import FlexBox from "../Flex";
-import Close from "@ledgerhq/icons-ui/react/CloseRegular";
+import Divider from "../../asorted/Divider";
+import Close from "@ledgerhq/icons-ui/react/CloseMedium";
 import ArrowLeft from "@ledgerhq/icons-ui/react/ArrowLeftRegular";
 import TransitionSlide from "../../transitions/TransitionSlide";
 import TransitionInOut from "../../transitions/TransitionInOut";
 import Text from "../../asorted/Text";
+export var Direction;
+(function (Direction) {
+    Direction["Left"] = "left";
+    Direction["Right"] = "right";
+})(Direction || (Direction = {}));
 const Container = styled(FlexBox) `
   width: 100%;
   height: 100%;
   flex-direction: column;
-  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) `
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: ${(p) => p.theme.space[15]}px;
-`;
-const Wrapper = styled.div `
+const Wrapper = styled(FlexBox) `
   height: 100%;
   width: ${(p) => p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;
-  display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: space-between;
@@ -44,19 +40,15 @@ const Wrapper = styled.div `
 const Overlay = styled.div `
   display: flex;
   position: fixed;
-  justify-content: flex-end;
+  justify-content: ${(p) => (p.direction === Direction.Left ? "flex-end" : "flex-start")};
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 999;
-  background-color: ${(p) => p.theme.colors.neutral.c100a07};
+  background-color: ${(p) => p.theme.colors.constant.overlay};
 `;
-const ScrollWrapper = styled.div `
-  overflow: scroll;
-  position: relative;
-  flex: 1;
-
+const ScrollWrapper = styled(FlexBox) `
   &::-webkit-scrollbar {
     display: none;
   }
@@ -70,27 +62,44 @@ const Button = styled.button `
   cursor: pointer;
   color: ${(p) => p.theme.colors.neutral.c100};
 `;
-const DrawerContent = ({ isOpen, title, children, big, onClose, setTransitionsEnabled = () => 0, onBack, hideNavigation = true, }) => {
+const DrawerContent = React.forwardRef(({ isOpen, title, children, footer, big, onClose, backgroundColor, setTransitionsEnabled = () => 0, onBack, extraContainerProps, extraHeaderProps, extraFooterProps, extraFooterDividerProps, ignoreBackdropClick = false, hideNavigation = true, direction = Direction.Left, }, ref) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);
     const enableChildAnimations = useCallback(() => setTransitionsEnabled(true), [setTransitionsEnabled]);
+    const handleBackdropClick = useCallback(() => {
+        if (!ignoreBackdropClick) {
+            onClose();
+        }
+    }, [onClose, ignoreBackdropClick]);
+    const stopClickPropagation = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
     return (React.createElement(TransitionInOut, { in: isOpen, appear: true, mountOnEnter: true, unmountOnExit: true, onEntering: disableChildAnimations, onEntered: enableChildAnimations, onExiting: disableChildAnimations },
-        React.createElement(Overlay, null,
-            React.createElement(TransitionSlide, { in: isOpen, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
-                React.createElement(Wrapper, { big: big },
+        React.createElement(Overlay, { direction: direction, onClick: handleBackdropClick, ref: ref },
+            React.createElement(TransitionSlide, { in: isOpen, direction: direction, fixed: true, reverseExit: true, appear: true, mountOnEnter: true, unmountOnExit: true },
+                React.createElement(Wrapper, { big: big, onClick: stopClickPropagation, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "neutral.c00" },
                     React.createElement(Container, null,
-                        React.createElement(Header, null,
+                        React.createElement(FlexBox, Object.assign({ justifyContent: "space-between", alignItems: "center", p: 12, pb: 10 }, extraHeaderProps),
                             !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 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(DrawerContent, Object.assign({}, sideProps), children), $root);
+                            (React.createElement(Text, { variant: "h3", flex: 1, textAlign: "center" }, title)) || React.createElement("div", null),
+                            React.createElement(FlexBox, { alignSelf: "flex-start" },
+                                React.createElement(Button, { onClick: onClose },
+                                    React.createElement(Close, null)))),
+                        React.createElement(ScrollWrapper, Object.assign({ flexDirection: "column", alignItems: "stretch", overflow: "scroll", position: "relative", p: 12, pt: 0, flex: 1 }, extraContainerProps), children),
+                        footer && (React.createElement(React.Fragment, null,
+                            React.createElement(Divider, Object.assign({ variant: "light" }, extraFooterDividerProps)),
+                            React.createElement(FlexBox, Object.assign({ alignItems: "center", py: 8, px: 12 }, extraFooterProps), footer)))))))));
+});
+const Drawer = (_a, ref) => {
+    var { children, menuPortalTarget } = _a, sideProps = __rest(_a, ["children", "menuPortalTarget"]);
+    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== undefined
+        ? document.querySelector("body")
+        : menuPortalTarget, [menuPortalTarget]);
+    if (!$root) {
+        return (React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children));
+    }
+    else {
+        return ReactDOM.createPortal(React.createElement(DrawerContent, Object.assign({ ref: ref }, sideProps), children), $root);
+    }
 };
-export default Drawer;
+export default React.forwardRef(Drawer);

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

@@ -3,6 +3,7 @@ import { BaseStyledProps } from "../../styled";
 export interface PopinProps extends BaseStyledProps {
     isOpen: boolean;
     children: React.ReactNode;
+    menuPortalTarget?: Element | null;
 }
 export declare type PopinHeaderProps = BaseStyledProps & {
     onClose?: () => void;
@@ -10,7 +11,7 @@ export declare type PopinHeaderProps = BaseStyledProps & {
     children: React.ReactNode;
 };
 declare const PopinWrapper: {
-    ({ children, ...popinProps }: PopinProps): React.ReactElement;
+    ({ children, menuPortalTarget, ...popinProps }: PopinProps): React.ReactElement;
     Header: ({ children, onClose, onBack, ...props }: PopinHeaderProps) => JSX.Element;
     Body: 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;

package/components/layout/Popin/index.js

@@ -82,11 +82,16 @@ const Popin = (_a) => {
                 React.createElement(Wrapper, Object.assign({ width: width, height: height }, props), children)))));
 };
 const PopinWrapper = (_a) => {
-    var { children } = _a, popinProps = __rest(_a, ["children"]);
-    const $root = React.useMemo(() => document.querySelector("#ll-popin-root"), []);
-    if ($root === null)
-        throw new Error("popin root cannot be found");
-    return ReactDOM.createPortal(React.createElement(Popin, Object.assign({}, popinProps), children), $root);
+    var { children, menuPortalTarget } = _a, popinProps = __rest(_a, ["children", "menuPortalTarget"]);
+    const $root = React.useMemo(() => menuPortalTarget === undefined && typeof document !== undefined
+        ? document.querySelector("body")
+        : menuPortalTarget, [menuPortalTarget]);
+    if (!$root) {
+        return React.createElement(Popin, Object.assign({}, popinProps), children);
+    }
+    else {
+        return ReactDOM.createPortal(React.createElement(Popin, Object.assign({}, popinProps), children), $root);
+    }
 };
 PopinWrapper.Header = PopinHeader;
 PopinWrapper.Body = PopinBody;

package/components/loaders/InfiniteLoader/index.d.ts

@@ -1,7 +1,8 @@
-declare const InfiniteLoader: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
-    alt: "loading...";
-    src: "data:image/png;base64,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";
-    width: "28";
-    height: "28";
-}, "height" | "width" | "alt" | "src">;
-export default InfiniteLoader;
+import React from "react";
+import { SizeProps } from "styled-system";
+declare const Loader: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, SizeProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Height<import("styled-system").TLengthStyledSystem>>, never>;
+export declare type Props = React.ComponentProps<typeof Loader> & {
+    color?: string;
+};
+export default function InfiniteLoader({ size, color, ...extraProps }: Props): JSX.Element;
+export {};

package/components/loaders/InfiniteLoader/index.js

@@ -1,5 +1,17 @@
+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 from "react";
 import styled, { keyframes } from "styled-components";
-import image from "./image";
+import { system, size } from "styled-system";
 const rotate = keyframes `
   0% {
     transform: rotate(0deg);
@@ -8,13 +20,27 @@ const rotate = keyframes `
     transform: rotate(360deg);
   }
 `;
-const InfiniteLoader = styled.img.attrs({
-    alt: "loading...",
-    src: `data:image/png;base64,${image}`,
-    width: "28",
-    height: "28",
-}) `
+const Loader = styled.svg `
   animation: ${rotate} 1s linear infinite;
-  transition: 100ms linear transform;
+  ${size}
+  ${system({
+    stroke: {
+        property: "stroke",
+        scale: "colors",
+    },
+})}
 `;
-export default InfiniteLoader;
+export default function InfiniteLoader(_a) {
+    var { size = 38, color = "primary.c50" } = _a, extraProps = __rest(_a, ["size", "color"]);
+    return (React.createElement(Loader, Object.assign({ size: size, stroke: color, viewBox: "0 0 38 38", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, extraProps),
+        React.createElement("linearGradient", { id: "gradient-start", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "1" })),
+        React.createElement("linearGradient", { id: "gradient-end", gradientUnits: "userSpaceOnUse", gradientTransform: "rotate(-20)" },
+            React.createElement("stop", { offset: "0", stopColor: "white", stopOpacity: "0.5" }),
+            React.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })),
+        React.createElement("mask", { id: "gradient-mask", maskUnits: "userSpaceOnUse" },
+            React.createElement("rect", { x: "-0", y: "-4", width: "44", height: "22", strokeWidth: "0", fill: "url(#gradient-start)", transform: "rotate(10)" }),
+            React.createElement("rect", { x: "0", y: "18", width: "44", height: "21", strokeWidth: "0", fill: "url(#gradient-end)", transform: "rotate(10)" })),
+        React.createElement("path", { d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526", strokeWidth: "6", strokeLinecap: "round", strokeLinejoin: "round", mask: "url(#gradient-mask)" })));
+}

package/components/loaders/ProgressLoader/index.d.ts

@@ -11,5 +11,26 @@ export interface Props {
      * Progress of the loader, in percent, between 0 and 100.
      */
     progress?: number;
+    /**
+     * Whether to display the progress, defaults to true.
+     */
+    showPercentage?: boolean;
+    /**
+     * Percentage text color
+     */
+    textColor?: string;
+    /**
+     * Front stroke color.
+     */
+    frontStrokeColor?: string;
+    /**
+     * Front stroke linecap.
+     * https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-linecap
+     */
+    frontStrokeLinecap?: "butt" | "round";
+    /**
+     * Background stroke color.
+     */
+    backgroundStrokeColor?: string;
 }
-export default function ProgressLoader({ radius, stroke, progress, }: Props): JSX.Element;
+export default function ProgressLoader({ radius, stroke, progress, showPercentage, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }: Props): JSX.Element;

package/components/loaders/ProgressLoader/index.js

@@ -11,14 +11,12 @@ const StyledCircle = styled.circle.attrs({
   transform-origin: 50% 50%;
 `;
 const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.primary.c20,
+    stroke: props.stroke || props.theme.colors.primary.c20,
 })) ``;
 const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.primary.c60,
+    stroke: props.stroke || props.theme.colors.primary.c60,
 })) ``;
-const StyledCenteredText = styled(Text).attrs({
-    color: "primary.c80",
-}) `
+const StyledCenteredText = styled(Text) `
   position: absolute;
   top: 50%;
   left: 50%;
@@ -29,18 +27,18 @@ const StyledProgressLoaderContainer = styled.div `
   display: flex;
   position: absolute;
 `;
-function ProgressCircleSvg({ radius, stroke, progress, }) {
+function ProgressCircleSvg({ radius, stroke, progress, backgroundStrokeColor, frontStrokeColor, frontStrokeLinecap, }) {
     const normalizedRadius = radius - stroke / 2;
     const circumference = normalizedRadius * 2 * Math.PI;
     const strokeDashoffset = circumference - (progress / 100) * circumference;
     return (React.createElement("svg", { height: radius * 2, width: radius * 2 },
-        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, r: normalizedRadius }),
-        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, r: normalizedRadius })));
+        React.createElement(StyledCircleBackground, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset: 0 }, stroke: backgroundStrokeColor, r: normalizedRadius }),
+        React.createElement(StyledCircleFront, { strokeWidth: stroke, strokeDasharray: circumference + " " + circumference, style: { strokeDashoffset }, stroke: frontStrokeColor, strokeLinecap: frontStrokeLinecap, r: normalizedRadius })));
 }
-export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, }) {
+export default function ProgressLoader({ radius = 32, stroke = 6, progress = 0, showPercentage = true, textColor, frontStrokeColor, frontStrokeLinecap, backgroundStrokeColor, }) {
     return (React.createElement(StyledProgressLoaderContainer, null,
-        React.createElement(StyledCenteredText, { variant: "body" },
+        showPercentage && (React.createElement(StyledCenteredText, { variant: "body", color: textColor || "primary.c80" },
             progress,
-            "%"),
-        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress })));
+            "%")),
+        React.createElement(ProgressCircleSvg, { radius: radius, stroke: stroke, progress: progress, frontStrokeColor: frontStrokeColor, frontStrokeLinecap: frontStrokeLinecap, backgroundStrokeColor: backgroundStrokeColor })));
 }

package/components/message/Alert/index.d.ts

@@ -1,28 +1,37 @@
 import { TextVariants } from "../../../styles/theme";
 declare type AlertType = "info" | "warning" | "error";
+declare type RenderProps = (props: {
+    color: string;
+    textProps: {
+        variant?: TextVariants;
+        fontWeight?: string;
+    };
+}) => JSX.Element;
 export interface AlertProps {
     /**
-     * Affects the colors of the background & text and what icon can be displayed
+     * Affects the colors of the background & text and what icon can be displayed.
      */
     type?: AlertType;
     /**
-     * Title of the Alert
+     * Title of the Alert.
      */
     title?: string;
     /**
-     * Method for rendering additional content under the title `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements
+     * Method for rendering additional content under the title. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.
      */
-    renderContent?: (props: {
-        color: string;
-        textProps: {
-            variant?: TextVariants;
-            fontWeight?: string;
-        };
-    }) => JSX.Element;
+    renderContent?: RenderProps;
+    /**
+     * Method for rendering additional content to the right. `{ color: string; textProps: { variant?: TextVariants; fontWeight?: string } }` is passed as props to easily style text elements.
+     */
+    renderRight?: RenderProps;
+    /**
+     * Additional props to be passed to the top level container (containing icon + content).
+     */
+    containerProps?: Record<string, unknown>;
     /**
      * Whether or not to display an icon
      */
     showIcon?: boolean;
 }
-export default function Alert({ type, title, showIcon, renderContent, }: AlertProps): JSX.Element;
+export default function Alert({ type, title, showIcon, renderContent, renderRight, containerProps, }: AlertProps): JSX.Element;
 export {};