@ledgerhq/react-ui 0.3.1 → 0.4.0

package/components/form/NumberInput/index.js

@@ -16,8 +16,8 @@ import Text from "../../asorted/Text";
 import styled from "styled-components";
 // TODO: Replace me with a real button as soon as they are designed
 const MaxButton = styled.button `
-  color: ${(p) => p.active ? p.theme.colors.palette.neutral.c00 : p.theme.colors.palette.neutral.c70};
-  background-color: ${(p) => p.active ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c00};
+  color: ${(p) => (p.active ? p.theme.colors.neutral.c00 : p.theme.colors.neutral.c70)};
+  background-color: ${(p) => (p.active ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c00)};
   border-radius: 100px;
   border-width: 0;
   height: 31px;
@@ -26,8 +26,8 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
-    background-color: ${(p) => (p.active ? p.theme.colors.palette.neutral.c30 : "transparent")};
+    color: ${(p) => p.theme.colors.neutral.c50};
+    background-color: ${(p) => (p.active ? p.theme.colors.neutral.c30 : "transparent")};
     cursor: unset;
   }
 `;

package/components/form/QrCodeInput/index.js

@@ -22,13 +22,13 @@ const QrCodeButton = styled.button `
   height: 32px;
   border-radius: 50%;
   border-width: 0;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;

package/components/form/QuantityInput/index.js

@@ -15,8 +15,8 @@ import FlexBox from "../../layout/Flex";
 import Text from "../../asorted/Text";
 import styled from "styled-components";
 const MaxButton = styled.button `
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
-  background-color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c00};
+  background-color: ${(p) => p.theme.colors.neutral.c100};
   border-radius: 100px;
   border-width: 0;
   padding-left: 14px;
@@ -25,16 +25,16 @@ const MaxButton = styled.button `
   cursor: pointer;
 
   &:disabled {
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
+    color: ${(p) => p.theme.colors.neutral.c50};
     cursor: unset;
   }
 `;
 const Legend = styled(Text) `
-  color: ${(p) => p.theme.colors.palette.neutral.c70};
+  color: ${(p) => p.theme.colors.neutral.c70};
 
   &[data-disabled="true"] {
-    color: ${(p) => p.theme.colors.palette.neutral.c50};
+    color: ${(p) => p.theme.colors.neutral.c50};
   }
 `;
 export default function QuantityInput(_a) {

package/components/form/Radio/RadioElement.js

@@ -15,10 +15,10 @@ import { rgba } from "../../../styles/helpers";
 import Text from "../../asorted/Text";
 import { RadioContext } from "./index";
 const Label = styled(Text) `
-  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.palette.neutral.c100});
+  color: var(--ledger-ui-checkbox-color, ${(p) => p.theme.colors.neutral.c100});
 `;
 const Input = styled.input `
-  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c50};
+  --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c50};
   --ledger-ui-checkbox-size: 1.25rem;
 
   position: relative;
@@ -46,17 +46,17 @@ const Input = styled.input `
 
   &[data-variant="default"] {
     :hover {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c90};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c90};
     }
     :active {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c100};
     }
     :checked,
     :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.primary.c80};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.primary.c80};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.primary.c60, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};
     }
   }
 
@@ -64,10 +64,10 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.success.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.success.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.success.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.success.c100, 0.48)};
     }
   }
 
@@ -75,17 +75,17 @@ const Input = styled.input `
     :hover,
     :checked:not([disabled]),
     :checked:not([disabled]) + ${Label}, :focus {
-      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.error.c100};
+      --ledger-ui-checkbox-color: ${(p) => p.theme.colors.error.c100};
     }
     :focus {
-      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.palette.error.c100, 0.48)};
+      box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.error.c100, 0.48)};
     }
   }
 
   &[data-variant]:disabled {
-    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.palette.neutral.c40};
+    --ledger-ui-checkbox-color: ${(p) => p.theme.colors.neutral.c40};
     cursor: unset;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c30};
+    background-color: ${(p) => p.theme.colors.neutral.c30};
   }
 `;
 const RadioElement = styled.label.attrs({ tabIndex: -1 }) `

package/components/form/Radio/RadioListElement.js

@@ -17,30 +17,29 @@ import { rgba } from "../../../styles/helpers";
 import { RadioContext } from "./index";
 export const Label = styled(Text) `
   color: ${(p) => p.disabled
-    ? p.theme.colors.palette.neutral.c50
+    ? p.theme.colors.neutral.c50
     : p.checked
-        ? p.theme.colors.palette.primary.c90
-        : p.theme.colors.palette.neutral.c100};
+        ? 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.palette.primary.c20 : "")};
-  border: 1px solid
-    ${(p) => (p.checked ? p.theme.colors.palette.primary.c50 : p.theme.colors.palette.neutral.c40)};
+  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.palette.primary.c80)};
+    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.palette.primary.c60, 0.48)};
+    box-shadow: 0px 0px 0px 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.48)};
   }
 `;
 const RadioListElement = styled.label.attrs({ tabIndex: -1 }) `

package/components/form/SearchInput/index.js

@@ -5,5 +5,5 @@ import SearchMedium from "@ledgerhq/icons-ui/react/SearchMedium";
 export default function SearchInput(props) {
     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 })) })));
+            React.createElement(SearchMedium, { color: props.disabled ? theme.colors.neutral.c50 : theme.colors.neutral.c70 })) })));
 }

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

@@ -25,15 +25,15 @@ const stylesFn = (theme) => ({
     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/Drawer/index.d.ts

@@ -4,7 +4,6 @@ export interface DrawerProps {
     children: React.ReactNode;
     title?: React.ReactNode;
     big?: boolean;
-    small?: boolean;
     onClose: () => void;
     onBack?: () => void;
     setTransitionsEnabled?: (arg0: boolean) => void;

package/components/layout/Drawer/index.js

@@ -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) `
@@ -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,7 +68,7 @@ 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 DrawerContent = ({ isOpen, title, children, big, onClose, setTransitionsEnabled = () => 0, onBack, hideNavigation = true, }) => {
     const disableChildAnimations = useCallback(() => setTransitionsEnabled(false), [setTransitionsEnabled]);

package/components/layout/Popin/index.js

@@ -33,7 +33,7 @@ const Wrapper = styled(Flex).attrs((p) => ({
     zIndex: p.theme.zIndexes[8],
     p: p.p !== undefined ? p.p : p.theme.space[10],
     rowGap: 6,
-    backgroundColor: p.theme.colors.palette.neutral.c00,
+    backgroundColor: p.theme.colors.neutral.c00,
 })) ``;
 const Overlay = styled(Flex).attrs((p) => ({
     justifyContent: "center",
@@ -44,7 +44,7 @@ const Overlay = styled(Flex).attrs((p) => ({
     position: "fixed",
     top: 0,
     left: 0,
-    backgroundColor: p.theme.colors.palette.neutral.c100a07,
+    backgroundColor: p.theme.colors.neutral.c100a07,
 })) ``;
 const Header = baseStyled.section `
   display: grid;
@@ -69,10 +69,10 @@ const PopinHeader = (_a) => {
     var { children, onClose, onBack } = _a, props = __rest(_a, ["children", "onClose", "onBack"]);
     return (React.createElement(Header, Object.assign({}, props),
         React.createElement(Flex, null, onBack ? (React.createElement(IconContainer, { onClick: onBack },
-            React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "palette.neutral.c100" }))) : null),
+            React.createElement(ArrowLeftIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null),
         React.createElement(HeaderTitleContainer, null, children),
         React.createElement(Flex, null, onClose ? (React.createElement(IconContainer, { onClick: onClose },
-            React.createElement(CloseIcon, { size: ICON_SIZE, color: "palette.neutral.c100" }))) : null)));
+            React.createElement(CloseIcon, { size: ICON_SIZE, color: "neutral.c100" }))) : null)));
 };
 const Popin = (_a) => {
     var { isOpen, children, width, height } = _a, props = __rest(_a, ["isOpen", "children", "width", "height"]);

package/components/loaders/ProgressLoader/index.js

@@ -11,13 +11,13 @@ const StyledCircle = styled.circle.attrs({
   transform-origin: 50% 50%;
 `;
 const StyledCircleBackground = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c20,
+    stroke: props.theme.colors.primary.c20,
 })) ``;
 const StyledCircleFront = styled(StyledCircle).attrs((props) => ({
-    stroke: props.theme.colors.palette.primary.c60,
+    stroke: props.theme.colors.primary.c60,
 })) ``;
 const StyledCenteredText = styled(Text).attrs({
-    color: "palette.primary.c80",
+    color: "primary.c80",
 }) `
   position: absolute;
   top: 50%;

package/components/message/Alert/index.js

@@ -19,19 +19,19 @@ const StyledAlertContainer = styled.div `
     switch (p.type) {
         case "warning":
             return css `
-          background: ${p.theme.colors.palette.warning.c30};
-          color: ${p.theme.colors.palette.warning.c100};
+          background: ${p.theme.colors.warning.c30};
+          color: ${p.theme.colors.warning.c100};
         `;
         case "error":
             return css `
-          background: ${p.theme.colors.palette.error.c30};
-          color: ${p.theme.colors.palette.error.c100};
+          background: ${p.theme.colors.error.c30};
+          color: ${p.theme.colors.error.c100};
         `;
         case "info":
         default:
             return css `
-          background: ${p.theme.colors.palette.primary.c20};
-          color: ${p.theme.colors.palette.primary.c90};
+          background: ${p.theme.colors.primary.c20};
+          color: ${p.theme.colors.primary.c90};
         `;
     }
 }}

package/components/message/Log/index.js

@@ -19,7 +19,7 @@ const Container = styled(FlexBox) `
   flex-wrap: wrap;
   align-items: stretch;
   min-height: ${(p) => p.theme.space[12]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c100};
+  color: ${(p) => p.theme.colors.neutral.c100};
 `;
 const TextContainer = styled(FlexBox).attrs(() => ({
     flex: "1",

package/components/message/Notification/Badge.js

@@ -20,14 +20,14 @@ const ActiveCircle = styled.div `
   width: 10px;
   border-radius: 9999px;
   box-sizing: content-box;
-  background-color: ${(p) => p.theme.colors.palette.error.c100};
+  background-color: ${(p) => p.theme.colors.error.c100};
 
   border: 2px solid
     var(
       --notification-badge-border,
       ${(p) => {
     /* The CSS variable is dynamically set by the Notification component */
-    return p.theme.colors.palette.background.main;
+    return p.theme.colors.background.main;
 }}
     );
 `;

package/components/message/Notification/index.js

@@ -23,11 +23,9 @@ const Container = styled(FlexBox).attrs({
 }) `
   --notification-badge-border: ${(p) => {
     /* Set a CSS variable that will be consumed by the Badge component */
-    return p.hasBackground
-        ? p.theme.colors.palette.neutral.c30
-        : p.theme.colors.palette.background.main;
+    return p.hasBackground ? p.theme.colors.neutral.c30 : p.theme.colors.background.main;
 }};
-  background-color: ${(p) => p.hasBackground ? p.theme.colors.palette.neutral.c30 : "transparent"};
+  background-color: ${(p) => (p.hasBackground ? p.theme.colors.neutral.c30 : "transparent")};
 
   border-radius: 8px;
 `;
@@ -36,8 +34,8 @@ function Notification(_a) {
     return (React.createElement(Container, Object.assign({ hasBackground: hasBackground }, containerProps),
         badge,
         React.createElement(FlexBox, { flexDirection: "column", rowGap: 3, flex: "auto" },
-            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "palette.neutral.c100" }, title),
-            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c80" }, description)),
+            React.createElement(Text, { variant: "large", fontWeight: "medium", color: "neutral.c100" }, title),
+            description && (React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c80", whiteSpace: "pre-wrap" }, description)),
             link && (React.createElement(FlexBox, { justifyContent: "flex-start" },
                 React.createElement(Link, { onClick: (event) => onLinkClick && onLinkClick(event), Icon: ExternalLinkMedium }, link))))));
 }

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { FlexBoxProps } from "../../layout/Flex";
+interface ContainerProps extends FlexBoxProps {
+    hasBorder?: boolean;
+}
+export interface Props extends ContainerProps {
+    text: string;
+    badge: React.ReactNode;
+}
+declare function StatusNotification({ text, badge, hasBorder, ...containerProps }: Props): JSX.Element;
+export default StatusNotification;

package/components/message/StatusNotification/index.js

@@ -0,0 +1,33 @@
+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 from "styled-components";
+import FlexBox from "../../layout/Flex";
+import Log from "../Log/";
+const Container = styled(FlexBox).attrs({
+    p: 8,
+    rowGap: 9,
+    alignItems: "center",
+    flexDirection: "column",
+}) `
+  border-width: 1px;
+  border-style: ${(p) => (p.hasBorder ? "solid" : "none")};
+  border-radius: 8px;
+  border-color: ${(p) => p.theme.colors.neutral.c40};
+`;
+function StatusNotification(_a) {
+    var { text, badge, hasBorder = false } = _a, containerProps = __rest(_a, ["text", "badge", "hasBorder"]);
+    return (React.createElement(Container, Object.assign({ hasBorder: hasBorder }, containerProps),
+        badge,
+        React.createElement(Log, null, text)));
+}
+export default StatusNotification;