@ledgerhq/react-ui 0.2.0 → 0.5.0

package/components/Tag/index.js

@@ -10,50 +10,83 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from "react";
-import styled from "styled-components";
-import { border, space, color } from "styled-system";
+import { border } from "styled-system";
 import Text from "../asorted/Text";
-function getColor({ type, active }) {
+import baseStyled from "../styled";
+function getColor({ type, active, disabled }) {
     switch (type) {
-        case "opacity":
-        case "outlined":
-            return "palette.primary.c90";
+        case "plain":
+            if (disabled)
+                return active ? "neutral.c00" : "neutral.c70";
+            return active ? "neutral.c00" : "primary.c90";
         default:
-            return active ? "palette.neutral.c00" : "palette.primary.c90";
+            return disabled ? "neutral.c70" : "primary.c90";
     }
 }
-function getBgColor({ type, active }) {
+function getBgColor({ type, active, disabled }) {
     switch (type) {
+        case "plain":
+            return active ? (disabled ? "neutral.c70" : "primary.c90") : undefined;
         case "opacity":
-            return active ? "palette.primary.c20" : undefined;
-        case "outlined":
+            return active ? (disabled ? "neutral.c30" : "primary.c20") : undefined;
+        default:
             return;
+    }
+}
+function getBorderColor({ type, active, disabled }) {
+    if (!active)
+        return;
+    switch (type) {
+        case "outlined":
+            return disabled ? "neutral.c70" : "primary.c90";
+        case "outlinedOpacity":
+            return disabled ? "neutral.c40" : "primary.c40";
+    }
+}
+function getPadding({ size }) {
+    switch (size) {
+        case "small":
+            return "3px 5px";
+        case "medium":
+            return "6px 8px";
+        case "large":
         default:
-            return active ? "palette.primary.c90" : undefined;
+            return "9px 10px 10px";
     }
 }
-function getBorderColor({ type, active }) {
-    if (type === "outlined" && active) {
-        return "palette.primary.c90";
+function getTextProps({ size }) {
+    switch (size) {
+        case "small":
+        case "medium":
+            return {
+                variant: "tiny",
+                fontWeight: "semiBold",
+                uppercase: true,
+            };
+        case "large":
+        default:
+            return {
+                variant: "extraSmall",
+                fontWeight: "semiBold",
+            };
     }
 }
-const TagContainer = styled.div.attrs((props) => ({
+const TagContainer = baseStyled.div.attrs((props) => ({
     backgroundColor: props.bg || props.backgroundColor || getBgColor(props),
     color: props.color || getColor(props),
     borderColor: getBorderColor(props),
-    p: "7px", // TODO: use spacing from the theme when it gets updated
 })) `
   display: inline-flex;
   justify-content: center;
   border: 1px solid transparent;
   border-radius: ${(p) => `${p.theme.radii[1]}px`};
+  padding: ${(p) => getPadding(p)};
   ${border}
-  ${space}
-  ${color}
 `;
 export default function Tag(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children, textProps, size = "large" } = _a, props = __rest(_a, ["children", "textProps", "size"]);
     const textColor = getColor(props);
-    return (React.createElement(TagContainer, Object.assign({}, props),
-        React.createElement(Text, { variant: "tiny", color: textColor }, children)));
+    const baseTextProps = getTextProps(Object.assign({ size }, props));
+    return (React.createElement(TagContainer, Object.assign({ size: size }, props),
+        React.createElement(Text, Object.assign({}, baseTextProps, { color: textColor }, (textProps ? textProps : {})), children)));
 }

package/components/animations/GlitchText/index.d.ts

@@ -0,0 +1,6 @@
+export interface GlitchTextProps {
+    text: string;
+    duration?: number;
+    delay?: number;
+}
+export default function GlitchText({ text, duration, delay }: GlitchTextProps): JSX.Element;

package/components/animations/GlitchText/index.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react";
+function makeRandomString(length) {
+    let result = "";
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}
+const INTERVAL = 77;
+export default function GlitchText({ text, duration = 800, delay = 500 }) {
+    const [shownText, setShownText] = useState(text);
+    useEffect(() => {
+        let frameT = 0;
+        const startFrame = Math.floor((1 + delay) / INTERVAL);
+        const totalFrames = Math.floor((delay + duration) / INTERVAL);
+        const interval = setInterval(() => {
+            if (frameT >= startFrame) {
+                if (frameT >= totalFrames) {
+                    setShownText(text);
+                    clearInterval(interval);
+                    frameT = 0;
+                    return;
+                }
+                const t1 = text.substr(0, -totalFrames + frameT + text.length);
+                const t2 = t1.length > 0 ? text.substr(t1.length, text.length) : text;
+                setShownText(t1 + makeRandomString(t2.length));
+            }
+            frameT++;
+        }, INTERVAL);
+        return () => interval && clearInterval(interval);
+    }, [delay, duration, text]);
+    return React.createElement(React.Fragment, null, shownText);
+}

package/components/asorted/Divider/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare type Props = {
     variant: "default" | "light";
 };

package/components/asorted/Divider/index.js

@@ -2,11 +2,11 @@ import React from "react";
 import styled from "styled-components";
 const Divider = styled.div `
   display: block;
-  background: ${(p) => p.theme.colors.palette.neutral.c90};
+  background: ${(p) => p.theme.colors.neutral.c90};
   height: 1px;
 
   &[data-variant="light"] {
-    background: ${(p) => p.theme.colors.palette.neutral.c40};
+    background: ${(p) => p.theme.colors.neutral.c40};
   }
 `;
 export default ({ variant = "default" }) => React.createElement(Divider, { "data-variant": variant });

package/components/asorted/Icon/BoxedIcon.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+export declare const DEFAULT_BOX_SIZE = 40;
+export declare const DEFAULT_ICON_SIZE = 16;
+export declare const DEFAULT_BADGE_SIZE = 20;
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconBoxProps = {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `badgeSize` or a default size.
+     */
+    Badge?: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Color of the border
+     */
+    borderColor?: string;
+    /**
+     * Badge color, will be applied to the component provided in the `Badge` prop
+     */
+    badgeColor?: string;
+    /**
+     * Badge size, will be applied to the component provided in the `Badge` prop
+     */
+    badgeSize?: number;
+    children?: JSX.Element;
+    /**
+     * Box size for preview
+     */
+    size?: number;
+};
+export declare type BoxedIconProps = IconBoxProps & {
+    /**
+     * Component that takes `{size?: number; color?: string}` as props. Will be rendered at the top right with the size provided in `iconSize` or a default size.
+     */
+    Icon: React.ComponentType<IconProps> | ((props: IconProps) => JSX.Element);
+    /**
+     * Icon size, will be applied to the component provided in the `Icon` prop
+     */
+    iconSize?: number;
+    /**
+     * Icon color, will be applied to the component provided in the `Icon` prop
+     */
+    iconColor?: string;
+};
+export declare const IconBox: ({ Badge, size, children, borderColor, badgeColor, badgeSize, }: IconBoxProps) => JSX.Element;
+declare const BoxedIcon: ({ Icon, iconSize, iconColor, ...iconBoxProps }: BoxedIconProps) => JSX.Element;
+export default BoxedIcon;

package/components/asorted/Icon/BoxedIcon.js

@@ -0,0 +1,58 @@
+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 Flex from "../../layout/Flex";
+export const DEFAULT_BOX_SIZE = 40;
+export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_BADGE_SIZE = 20;
+const getTopRightSquareClippedPolygon = (boxSize, rectangleSize) => {
+    // clipping path that hides top right square of size `${rectangleSize}px`
+    const diff = boxSize - rectangleSize;
+    return `polygon(0 0, 0 0, 0 0, ${diff}px 0, ${diff}px ${rectangleSize}px, 100% ${rectangleSize}px, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 100%)`;
+};
+const Container = styled(Flex).attrs((p) => ({
+    heigth: p.size,
+    width: p.size,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+})) ``;
+const IconBoxBackground = styled(Flex) `
+  position: absolute;
+  height: ${(p) => p.size}px;
+  width: ${(p) => p.size}px;
+  ${(p) => {
+    return p.hasBadge && `clip-path: ${getTopRightSquareClippedPolygon(p.size, 15)};`;
+}};
+  border-radius: ${(p) => p.theme.radii[2]}px;
+`;
+const BadgeContainer = styled.div `
+  position: absolute;
+  ${(p) => `
+    top: -${p.badgeSize / 2 - 2}px;
+    right: -${p.badgeSize / 2 - 2}px;`}
+`;
+export const IconBox = ({ Badge, size = DEFAULT_BOX_SIZE, children, borderColor = "neutral.c40", badgeColor, badgeSize = DEFAULT_BADGE_SIZE, }) => {
+    const hasBadge = !!Badge;
+    return (React.createElement(Container, { size: size },
+        React.createElement(IconBoxBackground, { size: size, hasBadge: hasBadge, border: "1px solid", borderColor: borderColor }),
+        children,
+        hasBadge && (React.createElement(BadgeContainer, { badgeSize: badgeSize },
+            React.createElement(Badge, { size: badgeSize, color: badgeColor })))));
+};
+const BoxedIcon = (_a) => {
+    var { Icon, iconSize = DEFAULT_ICON_SIZE, iconColor } = _a, iconBoxProps = __rest(_a, ["Icon", "iconSize", "iconColor"]);
+    return (React.createElement(IconBox, Object.assign({}, iconBoxProps),
+        React.createElement(Icon, { size: iconSize || DEFAULT_ICON_SIZE, color: iconColor })));
+};
+export default BoxedIcon;

package/components/asorted/Icon/Icon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Props = {
     name: string;
     size?: number;

package/components/asorted/Icon/index.d.ts

@@ -1,2 +1,4 @@
 export { default, iconNames } from "./Icon";
+import BoxedIcon, { IconBox } from "./BoxedIcon";
+export { BoxedIcon, IconBox };
 export type { Props } from "./Icon";

package/components/asorted/Icon/index.js

@@ -1 +1,3 @@
 export { default, iconNames } from "./Icon";
+import BoxedIcon, { IconBox } from "./BoxedIcon";
+export { BoxedIcon, IconBox };

package/components/asorted/Text/index.d.ts

@@ -1,35 +1,19 @@
-import React from "react";
-import { SpaceProps, LayoutProps } from "styled-system";
+import { BaseStyledProps } from "../../styled";
 import { TextVariants } from "../../../styles/theme";
 declare type FontFamilies = "Inter|ExtraLight" | "Inter|Light" | "Inter|Regular" | "Inter|Medium" | "Inter|SemiBold" | "Inter|Bold" | "Inter|ExtraBold" | "Alpha|Medium";
-export interface TextProps {
+declare type WhiteSpace = "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
+export interface TextProps extends BaseStyledProps {
     fontFamily?: string;
     ff?: FontFamilies;
     fontSize?: number | string | TextVariants;
     variant?: TextVariants;
     textAlign?: string;
-    textTransform?: string;
-    color?: string;
-    fontWeight?: string;
-    mt?: number | string;
-    mb?: number | string;
-    ml?: number | string;
-    mr?: number | string;
-    lineHeight?: string;
-    bracket?: boolean;
-    children: React.ReactNode;
-}
-export interface BaseTextProps extends SpaceProps, LayoutProps {
-    fontFamily?: string;
-    ff?: FontFamilies;
-    fontSize?: number | string | TextVariants;
-    variant?: TextVariants;
-    textAlign?: string;
-    color?: string;
     fontWeight?: string;
     lineHeight?: string;
     textTransform?: string;
     textOverflow?: string;
+    uppercase?: boolean;
+    whiteSpace?: WhiteSpace;
 }
-declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BaseTextProps, never>;
+declare const Text: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TextProps, keyof TextProps>;
 export default Text;

package/components/asorted/Text/index.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { fontSize, fontWeight, textAlign, color, space, lineHeight, letterSpacing, system, layout, } from "styled-system";
+import baseStyled from "../../styled";
+import { compose, fontSize, fontWeight, textAlign, lineHeight, letterSpacing, system, } from "styled-system";
 import fontFamily from "../../../styles/styled/fontFamily";
 import { textVariantStyle } from "./styles";
 const uppercase = system({
@@ -8,25 +8,16 @@ const uppercase = system({
         transform: (value) => (value ? "uppercase" : "none"),
     },
 });
-const Text = styled.span.attrs(({ variant = "body", fontSize, color }) => ({
+const Text = baseStyled.span.attrs(({ variant = "body", fontSize, color }) => ({
     fontSize: fontSize ? fontSize : variant,
-    color: color || "palette.neutral.c100",
+    color: color || "neutral.c100",
 })) `
   font-weight: 500;
+  white-space: ${(props) => { var _a; return (_a = props.whiteSpace) !== null && _a !== void 0 ? _a : "normal"; }};
   ${(p) => textVariantStyle[p.variant || "body"]}
-  ${uppercase};
-  ${lineHeight};
-  ${fontFamily};
-  ${fontSize};
-  ${textAlign};
-  ${color};
-  ${fontWeight};
-  ${space};
-  ${letterSpacing};
-  ${layout}
-  ${system({
+  ${compose(uppercase, lineHeight, fontFamily, fontSize, textAlign, fontWeight, letterSpacing, system({
     textOverflow: true,
-})}
+}))}
   ${(p) => (p.textTransform ? `text-transform: ${p.textTransform};` : "")}
 `;
 export default Text;

package/components/asorted/Text/styles.d.ts

@@ -3,6 +3,7 @@ import { TextVariants } from "../../../styles/theme";
 export declare const fontStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<GlobalStyleProps, import("styled-components").DefaultTheme>>;
 export declare const textVariantStyle: Record<TextVariants, {
     fontFamily: string;
-    lineHeight?: string;
+    lineHeight?: string | number;
     fontWeight?: number;
+    "text-transform"?: string;
 }>;

package/components/asorted/Text/styles.js

@@ -1,7 +1,9 @@
 import { css } from "styled-components";
 const getFontSource = (name) => (props) => {
-    const fontsPath = props.fontsPath || "assets/fonts";
-    return `url("${fontsPath}/${name}.woff2") format("woff2")`;
+    var _a;
+    const fontsPath = (_a = props.fontsPath) !== null && _a !== void 0 ? _a : "assets/fonts";
+    const fontName = (props.fontMappings && props.fontMappings(name)) || `${name}.woff2`;
+    return `url("${fontsPath}/${fontName}") format("woff2")`;
 };
 export const fontStyles = css `
   @font-face {
@@ -57,39 +59,48 @@ export const textVariantStyle = {
     h1: {
         fontFamily: "Alpha",
         fontWeight: 500,
+        "text-transform": "uppercase",
     },
     h2: {
         fontFamily: "Alpha",
         fontWeight: 500,
+        "text-transform": "uppercase",
     },
     h3: {
         fontFamily: "Alpha",
         fontWeight: 500,
+        "text-transform": "uppercase",
     },
     h4: {
-        fontFamily: "Inter",
+        fontFamily: "Alpha",
         fontWeight: 500,
+        "text-transform": "uppercase",
     },
     h5: {
         fontFamily: "Alpha",
         fontWeight: 500,
+        "text-transform": "uppercase",
     },
     large: {
         fontFamily: "Inter",
     },
+    largeLineHeight: {
+        fontFamily: "Inter",
+        lineHeight: 1.7,
+    },
     body: {
         fontFamily: "Inter",
     },
     bodyLineHeight: {
         fontFamily: "Inter",
-        lineHeight: "20px",
+        lineHeight: 1.7,
     },
     paragraph: {
         fontFamily: "Inter",
     },
     paragraphLineHeight: {
         fontFamily: "Inter",
-        lineHeight: "18px",
+        lineHeight: 1.7,
     },
     small: {
         fontFamily: "Inter",
@@ -97,14 +108,15 @@ export const textVariantStyle = {
     extraSmall: {
         fontFamily: "Inter",
     },
-    subtitle: {
-        fontFamily: "Inter",
-        fontWeight: 600,
-    },
     tiny: {
         fontFamily: "Inter",
     },
     micro: {
         fontFamily: "Inter",
     },
+    subtitle: {
+        fontFamily: "Inter",
+        fontWeight: 600,
+        "text-transform": "uppercase",
+    },
 };

package/components/asorted/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/asorted/index.js

@@ -1,3 +1,3 @@
 export { default as Divider } from "./Divider";
-export { default as Icon } from "./Icon";
+export { default as Icon, IconBox } from "./Icon";
 export { default as Text } from "./Text";

package/components/cards/Carousel/Slide.js

@@ -10,13 +10,13 @@ const Wrapper = styled(Flex) `
   padding: ${(p) => p.theme.space[8]}px ${(p) => p.theme.space[10]}px;
   padding-right: 280px; // Nb gives air to not overlap the illustration
   z-index: ${(p) => p.theme.zIndexes[8]};
-  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.palette.neutral.c100};
+  background: url(${(p) => p.image}) no-repeat ${(p) => p.theme.colors.neutral.c100};
   background-size: contain;
   background-position: right 60px bottom;
 `;
 const Slide = ({ title, description, image, onClick }) => {
     return (React.createElement(Wrapper, { key: "key", image: image, onClick: onClick },
-        React.createElement(Text, { variant: "tiny", color: "palette.neutral.c00", fontWeight: "regular" }, title),
-        React.createElement(Text, { variant: "h5", color: "palette.neutral.c00", textTransform: "uppercase" }, description)));
+        React.createElement(Text, { variant: "tiny", color: "neutral.c00", fontWeight: "regular" }, title),
+        React.createElement(Text, { variant: "h5", color: "neutral.c00", textTransform: "uppercase" }, description)));
 };
 export default Slide;

package/components/cards/Carousel/index.js

@@ -17,7 +17,7 @@ const CarouselWrapper = styled.div `
   cursor: pointer;
   position: relative;
   flex: 1;
-  background: ${(p) => p.theme.colors.palette.neutral.c100};
+  background: ${(p) => p.theme.colors.neutral.c100};
 `;
 const Controllers = styled(Flex) `
   position: absolute;
@@ -25,7 +25,7 @@ const Controllers = styled(Flex) `
   right: ${(p) => p.theme.space[5]}px;
   bottom: ${(p) => p.theme.space[4]}px;
   column-gap: ${(p) => p.theme.space[4]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
 
   > div {
     &:hover {
@@ -45,7 +45,7 @@ const Bullets = styled.div `
     position: relative;
     height: ${(p) => p.theme.space[1]}px;
     width: ${(p) => p.theme.space[8]}px;
-    background: ${(p) => p.theme.colors.palette.neutral.c00};
+    background: ${(p) => p.theme.colors.neutral.c00};
     opacity: 0.5;
     &:hover {
       opacity: 0.75;
@@ -71,7 +71,7 @@ const Close = styled.div `
   position: absolute;
   top: ${(p) => p.theme.space[7]}px;
   right: ${(p) => p.theme.space[5]}px;
-  color: ${(p) => p.theme.colors.palette.neutral.c00};
+  color: ${(p) => p.theme.colors.neutral.c00};
   &:hover {
     opacity: 0.5;
   }
@@ -124,10 +124,10 @@ const Carousel = ({ timeout = DEFAULT_TIMEOUT, queue, isDismissed, onDismiss, di
     if (!(queue === null || queue === void 0 ? void 0 : queue.length) || isDismissed)
         return null;
     return (React.createElement(CarouselWrapper, { id: "carousel", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, wantToDismiss ? (React.createElement(DismissWrapper, null,
-        React.createElement(Text, { color: "palette.neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
-        React.createElement(Flex, null,
-            React.createElement(Button, { color: "palette.neutral.c00", type: "color", onClick: onDismiss }, dismissConfirmText),
-            React.createElement(Button, { color: "palette.neutral.c00", type: "main", outline: true, onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
+        React.createElement(Text, { color: "neutral.c00", fontWeight: "medium", variant: "paragraph" }, dismissText),
+        React.createElement(Flex, { columnGap: 5 },
+            React.createElement(Button, { color: "neutral.c100", backgroundColor: "neutral.c00", onClick: onDismiss }, dismissConfirmText),
+            React.createElement(Button, { outline: true, color: "neutral.c00", backgroundColor: "neutral.c100", borderColor: "neutral.c00", onClick: onCancelDismiss }, dismissCancelText)))) : (React.createElement("div", null,
         React.createElement(TransitionGroup, { component: null, childFactory: childFactory },
             React.createElement(TransitionSlide, { key: index, direction: direction },
                 React.createElement(Slide, Object.assign({}, queue[index])))),

package/components/cta/Button/index.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
-declare type ButtonTypes = "main" | "shade" | "error" | "color";
-interface BaseProps {
+import { BaseStyledProps } from "../../styled";
+import { BordersProps } from "styled-system";
+export declare type ButtonVariants = "main" | "shade" | "error" | "color";
+export declare type IconPosition = "right" | "left";
+interface BaseProps extends BaseStyledProps, BordersProps {
     ff?: string;
     color?: string;
+    backgroundColor?: string;
     fontSize?: number;
-    type?: ButtonTypes;
+    variant?: ButtonVariants;
     outline?: boolean;
-    iconPosition?: "right" | "left";
+    iconPosition?: IconPosition;
     iconButton?: boolean;
     disabled?: boolean;
 }
@@ -18,13 +22,17 @@ export interface ButtonProps extends BaseProps {
     children?: React.ReactNode;
     onClick: (event?: React.SyntheticEvent<HTMLButtonElement>) => void;
     iconSize?: number;
+    style?: React.CSSProperties;
 }
+export declare const ButtonUnstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const Base: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    ff: string;
-    color: string;
+    fontFamily: string;
     fontSize: number;
-} & BaseProps, "color" | "fontSize" | "ff">;
-declare const Button: ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps) => React.ReactElement;
+} & BaseProps, "fontFamily" | "fontSize">;
+declare const Button: {
+    ({ Icon, iconPosition, iconSize, children, onClick, ...props }: ButtonProps): React.ReactElement;
+    Unstyled: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+};
 export declare type ExpandButtonProps = React.PropsWithChildren<{
     onToggle?: (arg0: boolean) => void;
     onClick?: (arg0: React.SyntheticEvent<HTMLButtonElement>) => void;