@ledgerhq/react-ui 0.3.1 → 0.7.0

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;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type TipType = "success" | "warning" | "error";
 export interface TipProps {
     type?: TipType;

package/components/message/Tip/index.js

@@ -13,19 +13,19 @@ const StyledIconContainer = styled.div `
     switch (p.type) {
         case "warning":
             return css `
-          background: ${p.theme.colors.palette.warning.c10};
-          color: ${p.theme.colors.palette.warning.c100};
+          background: ${p.theme.colors.warning.c10};
+          color: ${p.theme.colors.warning.c100};
         `;
         case "error":
             return css `
-          background: ${p.theme.colors.palette.error.c10};
-          color: ${p.theme.colors.palette.error.c100};
+          background: ${p.theme.colors.error.c10};
+          color: ${p.theme.colors.error.c100};
         `;
         case "success":
         default:
             return css `
-          background: ${p.theme.colors.palette.success.c30};
-          color: ${p.theme.colors.palette.success.c100};
+          background: ${p.theme.colors.success.c30};
+          color: ${p.theme.colors.success.c100};
         `;
     }
 }}
@@ -39,5 +39,5 @@ const StyledIconContainer = styled.div `
 export default function Tip({ type, label }) {
     return (React.createElement(Flex, { alignItems: "center" },
         type && React.createElement(StyledIconContainer, { type: type }, icons[type]),
-        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "palette.neutral.c100", flexShrink: 1 }, label)));
+        React.createElement(Text, { variant: "paragraph", fontWeight: "medium", color: "neutral.c100", flexShrink: 1 }, label)));
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TippyProps } from "@tippyjs/react";
 declare type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "auto" | "auto-start" | "auto-end";
 export interface Props extends TippyProps {

package/components/message/Tooltip/index.js

@@ -36,6 +36,6 @@ const Wrapper = forwardRef((props, ref) => {
 });
 export default function Tooltip(props) {
     const { content, placement = "auto", children } = props, rest = __rest(props, ["content", "placement", "children"]);
-    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "palette.neutral.c00" }, content) }),
+    return (React.createElement(Tippy, Object.assign({}, rest, { placement: placement, content: React.createElement(Text, { fontWeight: "medium", variant: "paragraph", color: "neutral.c00" }, content) }),
         React.createElement(Wrapper, { children: children })));
 }

package/components/message/Tooltip/styles.js

@@ -10,8 +10,8 @@ export default css `
 
   .tippy-box {
     position: relative;
-    background-color: ${(p) => p.theme.colors.palette.neutral.c100};
-    color: ${(p) => p.theme.colors.palette.neutral.c00};
+    background-color: ${(p) => p.theme.colors.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c00};
     border-radius: 4px;
     font-size: 14px;
     line-height: 1.4;
@@ -72,7 +72,7 @@ export default css `
   .tippy-arrow {
     width: 16px;
     height: 16px;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
   }
 
   .tippy-arrow:before {

package/components/message/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

package/components/message/index.js

@@ -1,5 +1,7 @@
 export { default as Alert } from "./Alert";
 export { default as Log } from "./Log";
 export { default as Notification } from "./Notification";
+export { default as Badge } from "./Notification/Badge";
 export { default as Tooltip } from "./Tooltip";
 export { default as Tip } from "./Tip";
+export { default as StatusNotification } from "./StatusNotification";

package/components/navigation/Aside/index.d.ts

@@ -6,13 +6,10 @@ export declare type Props = React.PropsWithChildren<{
 }> & React.ComponentProps<typeof Wrapper>;
 interface ExtraWrapperProps extends ColorProps, LayoutProps, TypographyProps {
 }
-declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+declare const Wrapper: 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>>> & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     columnGap?: string | number | undefined;
     rowGap?: string | number | undefined;
     color?: string | undefined;
-    display?: string | undefined;
-    position?: string | undefined;
-    maxHeight?: number | undefined;
-} & ExtraWrapperProps, "overflow" | "p" | "color" | "left" | "right" | "bottom" | "top" | "size" | "flex" | "padding" | "rowGap" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "verticalAlign" | "width" | "zIndex" | "margin" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "bg">;
+} & ExtraWrapperProps, "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 function Aside({ header, footer, children, ...props }: Props): JSX.Element;
 export {};

package/components/navigation/Breadcrumb/index.js

@@ -7,14 +7,14 @@ import * as ControlModule from "../../form/SelectInput/Control";
 const Link = styled(Text).attrs({
     ff: "Inter|SemiBold",
     fontSize: 3,
-    color: "palette.neutral.c80",
+    color: "neutral.c80",
     tabIndex: 0,
 }) `
   cursor: pointer;
   :hover,
   :active,
   :focus {
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
+    color: ${(p) => p.theme.colors.neutral.c100};
     text-decoration: underline;
   }
 `;
@@ -26,11 +26,11 @@ export default memo(function Breadcrumb({ segments, onChange }) {
     const [contents] = segments.reduce(([renderArray, valuesArray], segment, index) => {
         const values = [...valuesArray];
         renderArray.push(React.createElement(React.Fragment, null,
-            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "palette.neutral.c40", variant: "paragraph" }, "/")) : null,
+            index > 0 ? (React.createElement(Text, { fontWeight: "semiBold", color: "neutral.c40", variant: "paragraph" }, "/")) : null,
             isMultiSegment(segment) ? (React.createElement(Dropdown, { label: "", options: segment.options, value: segment.value, onChange: (elt) => elt && onChange([...values, elt.value]), styles: {
-                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles()(provided, state)), { cursor: "pointer" })),
-                    singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.palette.neutral.c80, ":hover": {
-                            color: theme.colors.palette.neutral.c100,
+                    control: (provided, state) => (Object.assign(Object.assign({}, ControlModule.getStyles(theme)(provided, state)), { cursor: "pointer" })),
+                    singleValue: (provided) => (Object.assign(Object.assign({}, provided), { margin: 0, top: undefined, position: undefined, overflow: undefined, maxWidth: undefined, transform: undefined, color: theme.colors.neutral.c80, ":hover": {
+                            color: theme.colors.neutral.c100,
                             textDecoration: "underline",
                         } })),
                 } })) : (React.createElement(Link, { onKeyDown: (event) => ["Enter", " "].includes(event.key) && onChange([...values, segment.value]), onClick: () => onChange([...values, segment.value]) }, segment.label))));

package/components/navigation/FlowStepper/index.d.ts

@@ -0,0 +1,76 @@
+import React from "react";
+import { FlexBoxProps as FlexProps } from "../../layout/Flex";
+export declare type StepProps = {
+    /**
+     * The label of the step.
+     */
+    label: string;
+    /**
+     * A specific index, can be used to explicitely order steps.
+     */
+    index?: number;
+    /**
+     * Hides the step from the progress stepper.
+     */
+    hidden?: boolean;
+    /**
+     * The step contents.
+     */
+    children: React.ReactNode;
+};
+interface InnerProps {
+    /**
+     * The active index.
+     */
+    activeIndex: number;
+    /**
+     * The total number of steps.
+     */
+    stepsLength: number;
+}
+export interface Props<ExtraProps> {
+    /**
+     * The index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * An optional header displayed above the stepper.
+     */
+    header?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * An optional footer displayed below the body.
+     */
+    footer?: (props: InnerProps & ExtraProps) => React.ReactNode;
+    /**
+     * Extra props that are passed to the header and footer render functions.
+     */
+    extraProps?: ExtraProps;
+    /**
+     * Extra props that are passed to the container `Flex` element.
+     */
+    extraContainerProps?: FlexProps;
+    /**
+     * Extra props that are passed to the stepper component.
+     */
+    extraStepperProps?: FlexProps;
+    /**
+     * Extra props that are passed to the stepper `Flex` wrapper.
+     */
+    extraStepperContainerProps?: FlexProps;
+    /**
+     * Custom rendering function to wrap children.
+     */
+    renderChildren?: (args: {
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+    /**
+     * A list of children representing each step of the flow.
+     */
+    children: React.ReactElement<StepProps> | React.ReactElement<StepProps>[];
+}
+declare function FlowStepper<ExtraProps>({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }: Props<ExtraProps>): JSX.Element;
+declare namespace FlowStepper {
+    var Step: ({ children }: StepProps) => JSX.Element;
+}
+export default FlowStepper;

package/components/navigation/FlowStepper/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { isElement } from "react-is";
+import Flex from "../../layout/Flex";
+import { Stepper } from "..";
+function FlowStepper({ activeIndex, header, footer, extraProps, extraContainerProps, extraStepperProps, extraStepperContainerProps, renderChildren, children, }) {
+    const { steps, innerContents } = React.Children.toArray(children).reduce((acc, child, idx) => {
+        var _a;
+        const index = (_a = (isElement(child) && child.props.index)) !== null && _a !== void 0 ? _a : idx;
+        const label = isElement(child) && child.props.label;
+        const hidden = isElement(child) && child.props.hidden;
+        if (label && !hidden) {
+            acc.steps[index] = label;
+        }
+        if (index === activeIndex) {
+            acc.innerContents = child;
+        }
+        return acc;
+    }, {
+        steps: [],
+        innerContents: null,
+    });
+    return (React.createElement(Flex, Object.assign({ flex: 1, flexDirection: "column" }, extraContainerProps),
+        header &&
+            header(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length })),
+        React.createElement(Flex, Object.assign({ my: 8, justifyContent: "center" }, extraStepperContainerProps),
+            React.createElement(Stepper, Object.assign({ activeIndex: activeIndex, steps: steps, flex: 1 }, extraStepperProps))),
+        React.createElement(Flex, { flex: 1, flexDirection: "column", position: "relative" }, renderChildren ? renderChildren({ children: innerContents }) : innerContents),
+        footer &&
+            footer(Object.assign(Object.assign({}, extraProps), { activeIndex, stepsLength: steps.length }))));
+}
+function Step({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+FlowStepper.Step = Step;
+export default FlowStepper;

package/components/navigation/index.d.ts

@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
 export { default as Header } from "./Header";
 export * from "./progress";
 export { default as SideBar } from "./sideBar/SideBar";
+export { default as FlowStepper } from "./FlowStepper";

package/components/navigation/index.js

@@ -3,3 +3,4 @@ export { default as Breadcrumb } from "./Breadcrumb";
 export { default as Header } from "./Header";
 export * from "./progress";
 export { default as SideBar } from "./sideBar/SideBar";
+export { default as FlowStepper } from "./FlowStepper";

package/components/navigation/progress/ProgressBar/Onboarding.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Step {
     key: string;
     label: string;

package/components/navigation/progress/ProgressBar/Onboarding.js

@@ -15,12 +15,12 @@ const Bar = styled.div `
   border-top-${(p) => (p.on ? "right" : "left")}-radius: 0;
   border-bottom-${(p) => (p.on ? "right" : "left")}-radius: 0;
   flex: ${(p) => p.fill};
-  background: ${(p) => p.on ? p.theme.colors.palette.neutral.c100 : p.theme.colors.palette.neutral.c40};
+  background: ${(p) => (p.on ? p.theme.colors.neutral.c100 : p.theme.colors.neutral.c40)};
 `;
 const Handler = styled.div `
   transition: all 600ms linear;
   padding: 4px;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
 
   display: flex;
@@ -35,8 +35,8 @@ const Handler = styled.div `
     width: 16px;
     justify-content: center;
     align-items: center;
-    color: ${(p) => p.theme.colors.palette.neutral.c100};
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    color: ${(p) => p.theme.colors.neutral.c100};
+    background: ${(p) => p.theme.colors.neutral.c00};
   }
 `;
 const Onboarding = ({ steps, currentIndex }) => {
@@ -45,8 +45,8 @@ const Onboarding = ({ steps, currentIndex }) => {
     return (React.createElement(Container, null,
         React.createElement(Bar, { on: true, fill: fill }),
         React.createElement(Handler, { key: currentStep.key },
-            React.createElement(Text, { className: "index", color: "palette.neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
-            React.createElement(Text, { color: "palette.neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
+            React.createElement(Text, { className: "index", color: "neutral.c00", fontWeight: "medium", variant: "micro" }, currentIndex + 1),
+            React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", textTransform: "uppercase", variant: "micro" }, currentStep.label)),
         React.createElement(Bar, { fill: 100 - Number(fill) })));
 };
 export default Onboarding;

package/components/navigation/progress/Stepper/index.d.ts

@@ -1,10 +1,20 @@
 import React from "react";
 import { BorderProps, ColorProps, SpaceProps } from "styled-system";
+/**
+ * The state of a progress bar step.
+ */
+export declare type StepState = "pending" | "current" | "completed" | "errored" | "disabled";
+declare type LabelType = string | React.ComponentType<{
+    state: StepState;
+}>;
 export interface Props {
     /**
      * An array of labels that will determine the progress bar steps.
+     *  A label is either a string or a component that will be rendered with the
+     *  prop `state: "pending" | "current" | "completed" | "errored"`.
+     *  A styled StepText component is exported to allow easy styling of such a custom label.
      */
-    steps: string[];
+    steps: LabelType[];
     /**
      * Index of the active step, starting at zero and defaulting to 0 if omitted.
      */
@@ -13,20 +23,22 @@ export interface Props {
      * If true the current step is considered as a failure.
      */
     errored?: boolean;
+    /**
+     * Steps with indexes contained inside the array will be shown as disabled.
+     */
+    disabledIndexes?: number[];
 }
-/**
- * The state of a progress bar step.
- */
-declare type StepState = "pending" | "current" | "completed" | "errored";
 export declare type StepProps = {
     /**
      * State of the step.
      */
     state: StepState;
     /**
-     * The label to display.
+     * The label to display. To display more than text, this can be a component that will be rendered with the
+     *  prop `state: "pending" | "current" | "completed" | "errored" | "disabled"`.
+     *  A styled StepText component is exported to allow easy styling of such a custom Label
      */
-    label: string;
+    label: LabelType;
     /**
      * If true, hides the left "separator" bar that bridges the gap between the wider separator and the item.
      */
@@ -48,9 +60,13 @@ export declare const Item: {
         backgroundColor: string;
     } & ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "backgroundColor">;
     Completed: () => JSX.Element;
+    Disabled: () => JSX.Element;
     Errored: () => JSX.Element;
 };
+export declare const StepText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps & {
+    state: StepState;
+}, keyof import("../../../asorted/Text").TextProps>;
 export declare const Step: React.NamedExoticComponent<StepProps>;
-declare function ProgressSteps({ steps, activeIndex, errored }: Props): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ProgressSteps>;
+declare function Stepper({ steps, activeIndex, errored, disabledIndexes, ...extraProps }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Stepper>;
 export default _default;

package/components/navigation/progress/Stepper/index.js

@@ -1,8 +1,18 @@
-import React, { memo } from "react";
+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, { memo, Fragment } from "react";
 import styled from "styled-components";
 import { border, color, space } from "styled-system";
-import CheckAlone from "@ledgerhq/icons-ui/react/CheckAloneMedium";
-import CloseMedium from "@ledgerhq/icons-ui/react/CloseMedium";
+import { Icons } from "../../../../index";
 import Text from "../../../asorted/Text";
 import Flex from "../../../layout/Flex";
 export const Item = {
@@ -24,7 +34,7 @@ export const Item = {
     ${space}
   `,
     Current: styled.div.attrs({
-        backgroundColor: "palette.primary.c90",
+        backgroundColor: "primary.c90",
     }) `
     width: 6px;
     height: 6px;
@@ -32,32 +42,36 @@ export const Item = {
     ${color}
   `,
     Pending: styled.div.attrs({
-        backgroundColor: "palette.neutral.c70",
+        backgroundColor: "neutral.c70",
     }) `
     width: ${(p) => p.theme.space[2]}px;
     height: ${(p) => p.theme.space[2]}px;
     border-radius: ${(p) => p.theme.space[2]}px;
     ${color}
   `,
-    Completed: () => React.createElement(CheckAlone, { size: 16 }),
-    Errored: () => React.createElement(CloseMedium, { size: 16 }),
+    Completed: () => React.createElement(Icons.CheckAloneMedium, { size: 16 }),
+    Disabled: () => React.createElement(Icons.CloseMedium, { size: 16 }),
+    Errored: () => React.createElement(Icons.CloseMedium, { size: 16 }),
 };
-const StepText = styled(Text) `
+export const StepText = styled(Text) `
   color: ${(p) => {
-    if (p.errored) {
-        return p.theme.colors.palette.error.c100;
+    if (p.state === "errored") {
+        return p.theme.colors.error.c100;
+    }
+    if (p.state === "disabled") {
+        return p.theme.colors.neutral.c50;
     }
-    if (p.inactive) {
-        return p.theme.colors.palette.neutral.c70;
+    if (p.state === "pending") {
+        return p.theme.colors.neutral.c70;
     }
-    return p.theme.colors.palette.neutral.c100;
+    return p.theme.colors.neutral.c100;
 }};
 `;
 const BaseSeparator = styled.div `
   flex: 1;
   position: relative;
   overflow-x: hidden;
-  background-color: ${(p) => p.theme.colors.palette.neutral.c40};
+  background-color: ${(p) => p.theme.colors.neutral.c40};
   height: 1px;
   top: ${(p) => p.theme.space[5]}px;
 `;
@@ -68,25 +82,29 @@ const Separator = {
 const stepContentsByState = {
     pending: (React.createElement(Item.Container, null,
         React.createElement(Item.Pending, null))),
-    current: (React.createElement(Item.Container, { backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    current: (React.createElement(Item.Container, { backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Current, null))),
-    completed: (React.createElement(Item.Container, { color: "palette.primary.c90", backgroundColor: "palette.primary.c20", borderRadius: "8px" },
+    completed: (React.createElement(Item.Container, { color: "primary.c90", backgroundColor: "primary.c20", borderRadius: "8px" },
         React.createElement(Item.Completed, null))),
-    errored: (React.createElement(Item.Container, { color: "palette.error.c100", backgroundColor: "palette.warning.c30", borderRadius: "8px" },
+    errored: (React.createElement(Item.Container, { color: "error.c100", backgroundColor: "warning.c30", borderRadius: "8px" },
         React.createElement(Item.Errored, null))),
+    disabled: (React.createElement(Item.Container, { color: "neutral.c50" },
+        React.createElement(Item.Disabled, null))),
 };
-export const Step = memo(function Step({ state, label, hideLeftSeparator, nextState, }) {
+export const Step = memo(function Step({ state, label: Label, hideLeftSeparator, nextState, }) {
     const inactive = state === "pending";
-    const nextInactive = nextState === "pending";
-    const errored = state === "errored";
+    const nextInactive = state === "pending";
     return (React.createElement(Flex, { flexDirection: "column", alignItems: "center" },
         React.createElement(Item.Spacer, { mb: 5 },
             (!hideLeftSeparator && React.createElement(Separator.Item, { inactive: inactive, position: "left" })) || (React.createElement(Flex, { flex: "1" })),
             stepContentsByState[state],
             (nextState && React.createElement(Separator.Item, { inactive: nextInactive, position: "right" })) || (React.createElement(Flex, { flex: "1" }))),
-        React.createElement(StepText, { inactive: inactive, errored: errored, variant: "small" }, label)));
+        typeof Label === "string" ? (React.createElement(StepText, { state: state, variant: "small" }, Label)) : (React.createElement(Label, { state: state }))));
 });
-function getState(activeIndex, index, errored) {
+function getState(activeIndex, index, errored, disabled) {
+    if (disabled) {
+        return "disabled";
+    }
     if (activeIndex < index) {
         return "pending";
     }
@@ -95,13 +113,14 @@ function getState(activeIndex, index, errored) {
     }
     return "completed";
 }
-function ProgressSteps({ steps, activeIndex = 0, errored }) {
-    return (React.createElement(Flex, { flexWrap: "nowrap", justifyContent: "space-between" }, steps.map((step, idx) => {
-        const state = getState(activeIndex, idx, errored);
+function Stepper(_a) {
+    var { steps, activeIndex = 0, errored, disabledIndexes } = _a, extraProps = __rest(_a, ["steps", "activeIndex", "errored", "disabledIndexes"]);
+    return (React.createElement(Flex, Object.assign({ flexWrap: "nowrap", justifyContent: "space-between" }, extraProps), steps.map((step, idx) => {
+        const state = getState(activeIndex, idx, errored, disabledIndexes === null || disabledIndexes === void 0 ? void 0 : disabledIndexes.includes(idx));
         const nextState = idx < steps.length - 1 ? getState(activeIndex, idx + 1) : undefined;
-        return (React.createElement(React.Fragment, null,
+        return (React.createElement(Fragment, { key: idx },
             idx > 0 && React.createElement(Separator.Step, { inactive: state === "pending" }),
             React.createElement(Step, { label: step, state: state, nextState: nextState, hideLeftSeparator: idx === 0 })));
     })));
 }
-export default memo(ProgressSteps);
+export default memo(Stepper);

package/components/navigation/sideBar/Item/Item.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const ItemLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../../asorted/Text").TextProps, keyof import("../../../asorted/Text").TextProps>;
 export declare type ItemType = {
     label: string;

package/components/navigation/sideBar/Item/Item.js

@@ -6,8 +6,8 @@ import TransitionInOut from "../../../transitions/TransitionInOut";
 import Flex from "../../../layout/Flex";
 const ItemWrapper = styled.li `
   /** DEFAULT VARIANT **/
-  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+  --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+  --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
   --ll-sidebar-item-background-color: unset;
 
   display: flex;
@@ -26,8 +26,8 @@ const ItemWrapper = styled.li `
 
   /** HOVER VARIANT **/
   &:hover {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c80};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
     --ll-sidebar-item-background-color: unset;
   }
 
@@ -39,15 +39,15 @@ const ItemWrapper = styled.li `
 
   /** ACTIVE VARIANT **/
   &[data-active="true"] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c100};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.primary.c80};
-    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.palette.primary.c20};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c100};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.primary.c80};
+    --ll-sidebar-item-background-color: ${(props) => props.theme.colors.primary.c20};
   }
 
   /** DISABLE VARIANT **/
   &[data-disable="true"] {
-    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.palette.neutral.c80};
-    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.palette.neutral.c80};
+    --ll-sidebar-item-label-color: ${(props) => props.theme.colors.neutral.c80};
+    --ll-sidebar-item-icon-color: ${(props) => props.theme.colors.neutral.c80};
     --ll-sidebar-item-background-color: unset;
     opacity: 0.3;
     cursor: unset;
@@ -63,7 +63,7 @@ const DefaultBadge = styled.div `
   height: ${(p) => p.theme.space[4]}px;
   width: ${(p) => p.theme.space[4]}px;
   border-radius: ${(p) => p.theme.radii[2]}px;
-  background-color: ${(p) => p.theme.colors.palette.primary.c80};
+  background-color: ${(p) => p.theme.colors.primary.c80};
 `;
 export const ItemLabel = styled(Text) `
   display: inline-block;

package/components/navigation/sideBar/Logo/Logo.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Logo: () => JSX.Element;
 export default Logo;

package/components/navigation/sideBar/SideBar/SideBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type SideBarProps = {
     children: Array<JSX.Element>;
     onToggle: () => void;