@ledgerhq/react-ui 0.7.2 → 0.7.5-monorepo.0

package/lib/cjs/components/cta/Button/index.js

@@ -0,0 +1,262 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Base: () => Base,
+  ButtonExpand: () => ButtonExpand,
+  ButtonUnstyled: () => ButtonUnstyled,
+  default: () => Button_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_styled = __toModule(require("../../styled"));
+var import_styled_system = __toModule(require("styled-system"));
+var import_fontFamily = __toModule(require("../../../styles/styled/fontFamily"));
+var import_theme = __toModule(require("../../../styles/theme"));
+var import_helpers = __toModule(require("../../../styles/helpers"));
+var import_ChevronBottomRegular = __toModule(require("@ledgerhq/icons-ui/react/ChevronBottomRegular"));
+var import_Icon = __toModule(require("../../asorted/Icon"));
+const IconContainer = import_styled_components.default.div`
+  display: inline-block;
+  ${(p) => `${p.iconPosition === "left" ? "margin-right" : "margin-left"}: ${p.theme.space[4]}px;`}
+  padding-top: 0.2em;
+`;
+const getVariantColors = (p) => ({
+  main: {
+    outline: `
+        border-color: ${p.theme.colors.neutral.c100};
+        color: ${p.theme.colors.neutral.c100};
+        background-color: transparent;
+        &:hover, &:focus {
+          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.03)};
+        }
+        &:active {
+          background-color: ${(0, import_helpers.rgba)(p.theme.colors.neutral.c100, 0.05)};
+        }
+      `,
+    filled: `
+        color: ${p.theme.colors.neutral.c00};
+        background-color: ${p.theme.colors.neutral.c100};
+        &:hover, &:focus {
+          background-color: ${p.theme.colors.neutral.c90};
+        }
+      `
+  },
+  shade: `
+      border-color: ${p.theme.colors.neutral.c40};
+      color: ${p.theme.colors.neutral.c100};
+      background-color: ${p.theme.colors.neutral.c00};
+      &:focus {
+        border-color: ${p.theme.colors.primary.c80};
+      }
+
+      &:hover, &:focus {
+        background-color: ${p.theme.colors.neutral.c20};
+      }
+
+      &:active {
+        background-color: ${p.theme.colors.neutral.c30};
+      }
+    `,
+  error: {
+    outline: `
+      border-color: ${p.theme.colors.error.c100};
+      color: ${p.theme.colors.error.c100};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c100, 0.02)};
+      }
+      &:active {
+        background-color: ${(0, import_helpers.rgba)(p.theme.colors.error.c100, 0.05)};
+      }
+    `,
+    filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.error.c100};
+      &:hover {
+        background-color: ${p.theme.colors.error.c80};
+      }
+    `
+  },
+  color: {
+    outline: `
+      border-color: ${p.theme.colors.primary.c80};
+      color: ${p.theme.colors.primary.c80};
+      background-color: transparent;
+      &:hover {
+        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.02)};
+      }
+      &:active {
+        background-color: ${(0, import_helpers.rgba)(p.theme.colors.primary.c100, 0.05)};
+      }
+    `,
+    filled: `
+      color: ${p.theme.colors.neutral.c00};
+      background-color: ${p.theme.colors.primary.c80};
+      &:hover {
+        background-color: ${p.theme.colors.primary.c70};
+      }
+    `
+  },
+  disabled: {
+    outline: `
+        border-color: ${p.theme.colors.neutral.c50};
+        color: ${p.theme.colors.neutral.c50};
+        background-color: transparent;
+      `,
+    filled: `
+        color: ${p.theme.colors.neutral.c50};
+        background-color: ${p.theme.colors.neutral.c30};
+      `
+  },
+  default: `
+    color: ${p.theme.colors.neutral.c100};
+    background-color: transparent;
+    &:hover {
+      text-decoration: underline;
+    }
+  `
+});
+const ButtonUnstyled = import_styled.default.button`
+  all: unset;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+  }
+`;
+const Base = import_styled.default.button.attrs((p) => ({
+  fontFamily: "Inter",
+  fontSize: p.fontSize ?? 4
+}))`
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: ${(p) => p.theme.space[13]}px;
+  border-style: solid;
+  border-width: ${(p) => p.outline || p.variant === "shade" ? 1 : 0}px;
+  font-weight: 600;
+  ${(0, import_styled_system.compose)(import_fontFamily.default, import_styled_system.fontSize, import_styled_system.border)};
+  height: ${(p) => p.theme.space[13]}px;
+  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  position: relative;
+  cursor: ${(p) => p.disabled ? "default" : "pointer"};
+  &:active {
+    box-shadow: 0 0 0 4px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+  &:focus, &:hover {
+    box-shadow: 0 0 0 2px ${(p) => (0, import_helpers.rgba)(p.theme.colors.primary.c60, 0.4)};
+  }
+
+  ${(p) => {
+  const variants = getVariantColors(p);
+  if (p.disabled) {
+    return p.outline || p.variant === "shade" ? variants.disabled.outline : variants.disabled.filled;
+  }
+  const variant = p.variant ?? "default";
+  switch (variant) {
+    case "main":
+      return p.outline ? variants.main.outline : variants.main.filled;
+    case "shade":
+      return variants.shade;
+    case "error":
+      return p.outline ? variants.error.outline : variants.error.filled;
+    case "color":
+      return p.outline ? variants.color.outline : variants.color.filled;
+    case "default":
+    default:
+      return variants.default;
+  }
+}}
+  ${(p) => p.iconButton ? import_styled_components.css`
+          width: ${p.theme.space[13]}px;
+          padding: 0;
+          ${IconContainer} {
+            margin: 0;
+          }
+        ` : ""}
+  ${(p) => p.theme.transition(["background-color", "color", "border-color", "box-shadow"], "0.2s")}
+`;
+const ContentContainer = import_styled_components.default.div``;
+const Button = ({
+  Icon,
+  iconPosition = "right",
+  iconSize = 16,
+  children,
+  onClick,
+  iconName,
+  ...props
+}, ref) => {
+  const iconNodeSize = iconSize || import_theme.fontSizes[props.fontSize ?? 4];
+  const IconNode = (0, import_react.useMemo)(() => iconName && /* @__PURE__ */ import_react.default.createElement(import_Icon.default, {
+    name: iconName,
+    size: iconNodeSize
+  }) || Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
+    size: iconNodeSize
+  }), [iconName, iconNodeSize, Icon]);
+  return /* @__PURE__ */ import_react.default.createElement(Base, {
+    ...props,
+    ref,
+    iconButton: !(Icon == null) && !children,
+    onClick
+  }, iconPosition === "right" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null, IconNode && /* @__PURE__ */ import_react.default.createElement(IconContainer, {
+    iconPosition
+  }, IconNode), iconPosition === "left" ? /* @__PURE__ */ import_react.default.createElement(ContentContainer, null, children) : null);
+};
+const ButtonWithRef = import_react.default.forwardRef(Button);
+const StyledButtonExpand = (0, import_styled_components.default)(ButtonWithRef).attrs((props) => ({
+  Icon: props.Icon != null || import_ChevronBottomRegular.default,
+  iconPosition: props.iconPosition || "right"
+}))`
+  ${IconContainer} {
+    transition: transform 0.25s;
+    ${(p) => p.expanded ? "transform: rotate(180deg)" : ""}
+  }
+`;
+function ButtonExpand({ onToggle, onClick, ...props }, ref) {
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement(StyledButtonExpand, {
+    ...props,
+    ref,
+    expanded,
+    onClick: (event) => {
+      setExpanded((expanded2) => !expanded2);
+      onToggle != null && onToggle(!expanded);
+      onClick != null && onClick(event);
+    }
+  });
+}
+Button.Unstyled = ButtonUnstyled;
+Button.Expand = import_react.default.forwardRef(ButtonExpand);
+ButtonWithRef.Unstyled = Button.Unstyled;
+ButtonWithRef.Expand = Button.Expand;
+var Button_default = ButtonWithRef;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/cta/Button/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Button/index.tsx"],
+  "sourcesContent": ["import React, { useState, useMemo } from \"react\";\nimport styled, { css, StyledProps } from \"styled-components\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\nimport { fontSize, border, BordersProps, compose } from \"styled-system\";\nimport fontFamily from \"../../../styles/styled/fontFamily\";\nimport { fontSizes } from \"../../../styles/theme\";\nimport { rgba } from \"../../../styles/helpers\";\nimport ChevronBottom from \"@ledgerhq/icons-ui/react/ChevronBottomRegular\";\nimport IconComponent from \"../../asorted/Icon\";\n\nexport type ButtonVariants = \"main\" | \"shade\" | \"error\" | \"color\";\nexport type IconPosition = \"right\" | \"left\";\ninterface BaseProps extends BaseStyledProps, BordersProps {\n  ff?: string;\n  color?: string;\n  backgroundColor?: string;\n  fontSize?: number;\n  variant?: ButtonVariants;\n  outline?: boolean;\n  iconPosition?: IconPosition;\n  iconButton?: boolean;\n  disabled?: boolean;\n}\n\nexport interface ButtonProps extends BaseProps, React.RefAttributes<HTMLButtonElement> {\n  iconName?: string;\n  Icon?: React.ComponentType<{ size: number; color?: string }>;\n  children?: React.ReactNode;\n  onClick?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;\n  iconSize?: number;\n  style?: React.CSSProperties;\n}\nconst IconContainer = styled.div<{\n  iconPosition: IconPosition;\n}>`\n  display: inline-block;\n  ${(p) => `${p.iconPosition === \"left\" ? \"margin-right\" : \"margin-left\"}: ${p.theme.space[4]}px;`}\n  padding-top: 0.2em;\n`;\n\nconst getVariantColors = (p: StyledProps<BaseProps>) => ({\n  main: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c100};\n        color: ${p.theme.colors.neutral.c100};\n        background-color: transparent;\n        &:hover, &:focus {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.03)};\n        }\n        &:active {\n          background-color: ${rgba(p.theme.colors.neutral.c100, 0.05)};\n        }\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c00};\n        background-color: ${p.theme.colors.neutral.c100};\n        &:hover, &:focus {\n          background-color: ${p.theme.colors.neutral.c90};\n        }\n      `,\n  },\n  shade: `\n      border-color: ${p.theme.colors.neutral.c40};\n      color: ${p.theme.colors.neutral.c100};\n      background-color: ${p.theme.colors.neutral.c00};\n      &:focus {\n        border-color: ${p.theme.colors.primary.c80};\n      }\n\n      &:hover, &:focus {\n        background-color: ${p.theme.colors.neutral.c20};\n      }\n\n      &:active {\n        background-color: ${p.theme.colors.neutral.c30};\n      }\n    `,\n  error: {\n    outline: `\n      border-color: ${p.theme.colors.error.c100};\n      color: ${p.theme.colors.error.c100};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.error.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.error.c100};\n      &:hover {\n        background-color: ${p.theme.colors.error.c80};\n      }\n    `,\n  },\n  color: {\n    outline: `\n      border-color: ${p.theme.colors.primary.c80};\n      color: ${p.theme.colors.primary.c80};\n      background-color: transparent;\n      &:hover {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.02)};\n      }\n      &:active {\n        background-color: ${rgba(p.theme.colors.primary.c100, 0.05)};\n      }\n    `,\n    filled: `\n      color: ${p.theme.colors.neutral.c00};\n      background-color: ${p.theme.colors.primary.c80};\n      &:hover {\n        background-color: ${p.theme.colors.primary.c70};\n      }\n    `,\n  },\n  disabled: {\n    outline: `\n        border-color: ${p.theme.colors.neutral.c50};\n        color: ${p.theme.colors.neutral.c50};\n        background-color: transparent;\n      `,\n    filled: `\n        color: ${p.theme.colors.neutral.c50};\n        background-color: ${p.theme.colors.neutral.c30};\n      `,\n  },\n  default: `\n    color: ${p.theme.colors.neutral.c100};\n    background-color: transparent;\n    &:hover {\n      text-decoration: underline;\n    }\n  `,\n});\n\nexport const ButtonUnstyled = baseStyled.button`\n  all: unset;\n  cursor: pointer;\n\n  &:disabled {\n    cursor: default;\n  }\n`;\n\nexport const Base = baseStyled.button.attrs((p: BaseProps) => ({\n  fontFamily: \"Inter\",\n  fontSize: p.fontSize ?? 4,\n}))<BaseProps>`\n  background-color: transparent;\n  border-color: transparent;\n  border-radius: ${(p) => p.theme.space[13]}px;\n  border-style: solid;\n  border-width: ${(p) => (p.outline || p.variant === \"shade\" ? 1 : 0)}px;\n  font-weight: 600;\n  ${compose(fontFamily, fontSize, border)};\n  height: ${(p) => p.theme.space[13]}px;\n  line-height: ${(p) => p.theme.fontSizes[p.fontSize]}px;\n  text-align: center;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 2em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  position: relative;\n  cursor: ${(p) => (p.disabled ? \"default\" : \"pointer\")};\n  &:active {\n    box-shadow: 0 0 0 4px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n  &:focus, &:hover {\n    box-shadow: 0 0 0 2px ${(p) => rgba(p.theme.colors.primary.c60, 0.4)};\n  }\n\n  ${(p) => {\n    const variants = getVariantColors(p);\n    if (p.disabled) {\n      return p.outline || p.variant === \"shade\"\n        ? variants.disabled.outline\n        : variants.disabled.filled;\n    }\n\n    const variant: ButtonVariants | \"default\" =\n      p.variant ?? (\"default\" as ButtonVariants | \"default\");\n    switch (variant) {\n      case \"main\":\n        return p.outline ? variants.main.outline : variants.main.filled;\n      case \"shade\":\n        return variants.shade;\n\n      case \"error\":\n        return p.outline ? variants.error.outline : variants.error.filled;\n\n      case \"color\":\n        return p.outline ? variants.color.outline : variants.color.filled;\n\n      case \"default\":\n      default:\n        return variants.default;\n    }\n  }}\n  ${(p) =>\n    p.iconButton\n      ? css`\n          width: ${p.theme.space[13]}px;\n          padding: 0;\n          ${IconContainer} {\n            margin: 0;\n          }\n        `\n      : \"\"}\n  ${(p) => p.theme.transition([\"background-color\", \"color\", \"border-color\", \"box-shadow\"], \"0.2s\")}\n`;\n\nconst ContentContainer = styled.div``;\n\nconst Button = (\n  {\n    Icon,\n    iconPosition = \"right\",\n    iconSize = 16,\n    children,\n    onClick,\n    iconName,\n    ...props\n  }: ButtonProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement => {\n  const iconNodeSize = iconSize || fontSizes[props.fontSize ?? 4];\n  const IconNode = useMemo(\n    () =>\n      (iconName && <IconComponent name={iconName} size={iconNodeSize} />) ||\n      (Icon && <Icon size={iconNodeSize} />),\n    [iconName, iconNodeSize, Icon],\n  );\n\n  return (\n    <Base {...props} ref={ref} iconButton={!(Icon == null) && !children} onClick={onClick}>\n      {iconPosition === \"right\" ? <ContentContainer>{children}</ContentContainer> : null}\n      {IconNode && <IconContainer iconPosition={iconPosition}>{IconNode}</IconContainer>}\n      {iconPosition === \"left\" ? <ContentContainer>{children}</ContentContainer> : null}\n    </Base>\n  );\n};\nconst ButtonWithRef = React.forwardRef(Button) as unknown as typeof Button;\n\nexport type ButtonExpandProps = React.PropsWithChildren<\n  ButtonProps & {\n    onToggle?: (arg0: boolean) => void;\n  }\n>;\n\nconst StyledButtonExpand = styled(ButtonWithRef).attrs((props) => ({\n  Icon: props.Icon != null || ChevronBottom,\n  iconPosition: props.iconPosition || \"right\",\n}))<{ expanded: boolean }>`\n  ${IconContainer} {\n    transition: transform 0.25s;\n    ${(p) => (p.expanded ? \"transform: rotate(180deg)\" : \"\")}\n  }\n`;\nexport function ButtonExpand(\n  { onToggle, onClick, ...props }: ButtonExpandProps,\n  ref?: React.ForwardedRef<HTMLButtonElement>,\n): React.ReactElement {\n  const [expanded, setExpanded] = useState(false);\n  return (\n    <StyledButtonExpand\n      {...props}\n      ref={ref}\n      expanded={expanded}\n      onClick={(event: React.SyntheticEvent<HTMLButtonElement>) => {\n        setExpanded((expanded) => !expanded);\n        onToggle != null && onToggle(!expanded);\n        onClick != null && onClick(event);\n      }}\n    />\n  );\n}\n\nButton.Unstyled = ButtonUnstyled;\nButton.Expand = React.forwardRef(ButtonExpand);\nButtonWithRef.Unstyled = Button.Unstyled;\nButtonWithRef.Expand = Button.Expand;\nexport default ButtonWithRef;\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/cjs/components/cta/Link/Link.stories.js

@@ -0,0 +1,89 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Default: () => Default,
+  WithIcon: () => WithIcon,
+  default: () => Link_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_index = __toModule(require("./index"));
+var import_react2 = __toModule(require("@ledgerhq/icons-ui/react"));
+var Link_stories_default = {
+  title: "cta/Link",
+  component: import_index.default,
+  parameters: { actions: { argTypesRegex: false } },
+  argTypes: {
+    Icon: {
+      control: false
+    },
+    type: {
+      options: ["main", "shade", "color", void 0],
+      defaultValue: import_index.DEFAULT_TYPE,
+      control: {
+        type: "radio"
+      }
+    },
+    size: {
+      options: ["small", "medium", "large", void 0],
+      defaultValue: import_index.DEFAULT_SIZE,
+      control: {
+        type: "radio"
+      }
+    },
+    children: {
+      type: "text"
+    },
+    iconPosition: {
+      defaultValue: import_index.DEFAULT_ICON_POSITION,
+      options: ["left", "right", void 0]
+    },
+    textProps: {},
+    disabled: {
+      type: "boolean"
+    },
+    color: {
+      type: "string",
+      control: { control: "color" }
+    },
+    alwaysUnderline: {
+      type: "boolean"
+    }
+  }
+};
+const Default = ({ ...args }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    href: "https://www.ledger.com"
+  });
+};
+const WithIcon = ({ ...args }) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    href: "https://www.ledger.com",
+    Icon: import_react2.PlusMedium
+  });
+};
+Default.args = { children: "Hello world" };
+WithIcon.args = { children: "Hello world" };
+//# sourceMappingURL=Link.stories.js.map

package/lib/cjs/components/cta/Link/Link.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Link/Link.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport Link, { LinkProps, DEFAULT_ICON_POSITION, DEFAULT_SIZE, DEFAULT_TYPE } from \"./index\";\nimport { PlusMedium } from \"@ledgerhq/icons-ui/react\";\n\nexport default {\n  title: \"cta/Link\",\n  component: Link,\n  parameters: { actions: { argTypesRegex: false } },\n  argTypes: {\n    Icon: {\n      control: false,\n    },\n    type: {\n      options: [\"main\", \"shade\", \"color\", undefined],\n      defaultValue: DEFAULT_TYPE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    size: {\n      options: [\"small\", \"medium\", \"large\", undefined],\n      defaultValue: DEFAULT_SIZE,\n      control: {\n        type: \"radio\",\n      },\n    },\n    children: {\n      type: \"text\",\n    },\n    iconPosition: {\n      defaultValue: DEFAULT_ICON_POSITION,\n      options: [\"left\", \"right\", undefined],\n    },\n    textProps: {},\n    disabled: {\n      type: \"boolean\",\n    },\n    color: {\n      type: \"string\",\n      control: { control: \"color\" },\n    },\n    alwaysUnderline: {\n      type: \"boolean\",\n    },\n  },\n};\n\nexport const Default = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} />;\n};\n\nexport const WithIcon = ({ ...args }: LinkProps) => {\n  return <Link {...args} href={\"https://www.ledger.com\"} Icon={PlusMedium} />;\n};\n\nDefault.args = { children: \"Hello world\" };\nWithIcon.args = { children: \"Hello world\" };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,mBAAmF;AACnF,oBAA2B;AAE3B,IAAO,uBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY,EAAE,SAAS,EAAE,eAAe;AAAA,EACxC,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA;AAAA,IAEX,MAAM;AAAA,MACJ,SAAS,CAAC,QAAQ,SAAS,SAAS;AAAA,MACpC,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,MAAM;AAAA,MACJ,SAAS,CAAC,SAAS,UAAU,SAAS;AAAA,MACtC,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA;AAAA;AAAA,IAGV,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,cAAc;AAAA,MACZ,cAAc;AAAA,MACd,SAAS,CAAC,QAAQ,SAAS;AAAA;AAAA,IAE7B,WAAW;AAAA,IACX,UAAU;AAAA,MACR,MAAM;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,EAAE,SAAS;AAAA;AAAA,IAEtB,iBAAiB;AAAA,MACf,MAAM;AAAA;AAAA;AAAA;AAKL,MAAM,UAAU,CAAC,KAAK,WAAsB;AACjD,SAAO,mDAAC,sBAAD;AAAA,OAAU;AAAA,IAAM,MAAM;AAAA;AAAA;AAGxB,MAAM,WAAW,CAAC,KAAK,WAAsB;AAClD,SAAO,mDAAC,sBAAD;AAAA,OAAU;AAAA,IAAM,MAAM;AAAA,IAA0B,MAAM;AAAA;AAAA;AAG/D,QAAQ,OAAO,EAAE,UAAU;AAC3B,SAAS,OAAO,EAAE,UAAU;",
+  "names": []
+}

package/lib/cjs/components/cta/Link/getLinkStyle.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+__export(exports, {
+  getLinkColors: () => getLinkColors
+});
+function getLinkColors({
+  palette
+}) {
+  return {
+    disabled: {
+      default: palette.neutral.c50,
+      pressed: palette.neutral.c50
+    },
+    main: {
+      default: palette.neutral.c100,
+      pressed: palette.neutral.c80
+    },
+    color: {
+      default: palette.primary.c80,
+      pressed: palette.primary.c70
+    },
+    shade: {
+      default: palette.neutral.c70,
+      pressed: palette.neutral.c80
+    }
+  };
+}
+//# sourceMappingURL=getLinkStyle.js.map

package/lib/cjs/components/cta/Link/getLinkStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Link/getLinkStyle.ts"],
+  "sourcesContent": ["import { Theme } from \"../../../styles/theme\";\n\nexport function getLinkColors({\n  palette,\n}: Theme[\"colors\"]): Record<\n  \"disabled\" | \"main\" | \"color\" | \"shade\",\n  Record<\"default\" | \"pressed\", string>\n> {\n  return {\n    disabled: {\n      default: palette.neutral.c50,\n      pressed: palette.neutral.c50,\n    },\n    main: {\n      default: palette.neutral.c100,\n      pressed: palette.neutral.c80,\n    },\n    color: {\n      default: palette.primary.c80,\n      pressed: palette.primary.c70,\n    },\n    shade: {\n      default: palette.neutral.c70,\n      pressed: palette.neutral.c80,\n    },\n  };\n}\n"],
+  "mappings": ";;;;;;;AAAA;AAAA;AAAA;AAEO,uBAAuB;AAAA,EAC5B;AAAA,GAIA;AACA,SAAO;AAAA,IACL,UAAU;AAAA,MACR,SAAS,QAAQ,QAAQ;AAAA,MACzB,SAAS,QAAQ,QAAQ;AAAA;AAAA,IAE3B,MAAM;AAAA,MACJ,SAAS,QAAQ,QAAQ;AAAA,MACzB,SAAS,QAAQ,QAAQ;AAAA;AAAA,IAE3B,OAAO;AAAA,MACL,SAAS,QAAQ,QAAQ;AAAA,MACzB,SAAS,QAAQ,QAAQ;AAAA;AAAA,IAE3B,OAAO;AAAA,MACL,SAAS,QAAQ,QAAQ;AAAA,MACzB,SAAS,QAAQ,QAAQ;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/lib/cjs/components/cta/Link/index.js

@@ -0,0 +1,100 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Base: () => Base,
+  DEFAULT_ICON_POSITION: () => DEFAULT_ICON_POSITION,
+  DEFAULT_SIZE: () => DEFAULT_SIZE,
+  DEFAULT_TYPE: () => DEFAULT_TYPE,
+  default: () => Link_default
+});
+var import_react = __toModule(require("react"));
+var import_styled_components = __toModule(require("styled-components"));
+var import_getLinkStyle = __toModule(require("./getLinkStyle"));
+var import_getCtaStyle = __toModule(require("../getCtaStyle"));
+var import_asorted = __toModule(require("../../asorted"));
+var import_styled = __toModule(require("../../styled"));
+const DEFAULT_ICON_POSITION = "right";
+const DEFAULT_SIZE = "medium";
+const DEFAULT_TYPE = "main";
+const IconContainer = import_styled_components.default.div`
+  ${(p) => p.iconLink ? "" : p.iconPosition === "left" ? `margin-right: 6px;` : `margin-left: 6px;`}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Base = import_styled.default.a`
+  color: ${({ color, theme, disabled, type = "main" }) => color || (0, import_getLinkStyle.getLinkColors)(theme.colors)[disabled ? "disabled" : type]["default"]};
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+
+  :hover {
+    text-decoration: underline;
+  }
+  :active {
+    color: ${({ color, theme, type = "main" }) => color || (0, import_getLinkStyle.getLinkColors)(theme.colors)[type]["pressed"]};
+    text-decoration: underline;
+  }
+
+  text-decoration: ${(p) => p.alwaysUnderline ? "underline" : "none"};
+
+`;
+const LinkContainer = ({
+  Icon,
+  iconPosition = DEFAULT_ICON_POSITION,
+  children,
+  color,
+  size = DEFAULT_SIZE,
+  textProps
+}) => {
+  const text = /* @__PURE__ */ import_react.default.createElement(import_asorted.Text, {
+    variant: import_getCtaStyle.ctaTextType[size],
+    fontWeight: "semiBold",
+    color: color || "inherit",
+    ...textProps
+  }, children);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, iconPosition === "right" && children ? text : null, Icon ? /* @__PURE__ */ import_react.default.createElement(IconContainer, {
+    iconLink: !children,
+    iconPosition
+  }, /* @__PURE__ */ import_react.default.createElement(Icon, {
+    size: import_getCtaStyle.ctaIconSize[size],
+    color: color || "currentcolor"
+  })) : null, iconPosition === "left" && children ? text : null);
+};
+const Link = (props) => {
+  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;
+  return /* @__PURE__ */ import_react.default.createElement(Base, {
+    color,
+    ...props
+  }, /* @__PURE__ */ import_react.default.createElement(LinkContainer, {
+    ...props,
+    type,
+    size
+  }));
+};
+var Link_default = Link;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/cta/Link/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Link/index.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { getLinkColors } from \"./getLinkStyle\";\nimport { ctaIconSize, ctaTextType } from \"../getCtaStyle\";\nimport { Text } from \"../../asorted\";\nimport { TextProps } from \"../../asorted/Text\";\nimport baseStyled, { BaseStyledProps } from \"../../styled\";\n\nexport type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &\n  BaseStyledProps & {\n    /**\n     * Component that takes `{size: number; color?: string}` as props\n     */\n    Icon?: React.ComponentType<{ size: number; color?: string }>;\n    /**\n     * Affects the colors of the text, icon & underline, can be overriden by the `color` prop\n     */\n    type?: \"main\" | \"shade\" | \"color\";\n    /**\n     * Affect the font variant & icon size\n     */\n    size?: \"small\" | \"medium\" | \"large\";\n    /**\n     * Color of the link, overrides colors defined by the `type` prop\n     */\n    color?: string;\n    /**\n     * Props passed to the rendered text\n     */\n    textProps?: TextProps;\n    /**\n     * If true text will always be underlined, else it will be underlined only on hover\n     */\n    alwaysUnderline?: boolean;\n    /**\n     * Position of the icon relative to the text\n     */\n    iconPosition?: \"right\" | \"left\";\n    disabled?: boolean;\n    children?: React.ReactNode;\n  };\n\nexport const DEFAULT_ICON_POSITION = \"right\";\nexport const DEFAULT_SIZE = \"medium\";\nexport const DEFAULT_TYPE = \"main\";\n\nconst IconContainer = styled.div<{\n  iconPosition: \"right\" | \"left\";\n  iconLink?: boolean;\n}>`\n  ${(p) =>\n    p.iconLink ? \"\" : p.iconPosition === \"left\" ? `margin-right: 6px;` : `margin-left: 6px;`}\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Base = baseStyled.a<LinkProps>`\n  color: ${({ color, theme, disabled, type = \"main\" }) =>\n    color || getLinkColors(theme.colors)[disabled ? \"disabled\" : type][\"default\"]};\n  cursor: pointer;\n  display: inline-flex;\n  flex-direction: row;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n\n  :hover {\n    text-decoration: underline;\n  }\n  :active {\n    color: ${({ color, theme, type = \"main\" }) =>\n      color || getLinkColors(theme.colors)[type][\"pressed\"]};\n    text-decoration: underline;\n  }\n\n  text-decoration: ${(p) => (p.alwaysUnderline ? \"underline\" : \"none\")};\n\n`;\n\nconst LinkContainer = ({\n  Icon,\n  iconPosition = DEFAULT_ICON_POSITION,\n  children,\n  color,\n  size = DEFAULT_SIZE,\n  textProps,\n}: LinkProps): React.ReactElement => {\n  const text = (\n    <Text\n      variant={ctaTextType[size]}\n      fontWeight=\"semiBold\"\n      color={color || \"inherit\"}\n      {...textProps}\n    >\n      {children}\n    </Text>\n  );\n\n  return (\n    <>\n      {iconPosition === \"right\" && children ? text : null}\n      {Icon ? (\n        <IconContainer iconLink={!children} iconPosition={iconPosition}>\n          <Icon size={ctaIconSize[size]} color={color || \"currentcolor\"} />\n        </IconContainer>\n      ) : null}\n      {iconPosition === \"left\" && children ? text : null}\n    </>\n  );\n};\n\nconst Link = (props: LinkProps): React.ReactElement => {\n  const { type = DEFAULT_TYPE, size = DEFAULT_SIZE, color } = props;\n  return (\n    <Base color={color} {...props}>\n      <LinkContainer {...props} type={type} size={size} />\n    </Base>\n  );\n};\n\nexport default Link;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,0BAA8B;AAC9B,yBAAyC;AACzC,qBAAqB;AAErB,oBAA4C;AAoCrC,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,eAAe;AAE5B,MAAM,gBAAgB,iCAAO;AAAA,IAIzB,CAAC,MACD,EAAE,WAAW,KAAK,EAAE,iBAAiB,SAAS,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAMlE,MAAM,OAAO,sBAAW;AAAA,WACpB,CAAC,EAAE,OAAO,OAAO,UAAU,OAAO,aACzC,SAAS,uCAAc,MAAM,QAAQ,WAAW,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAY1D,CAAC,EAAE,OAAO,OAAO,OAAO,aAC/B,SAAS,uCAAc,MAAM,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA,qBAI5B,CAAC,MAAO,EAAE,kBAAkB,cAAc;AAAA;AAAA;AAI/D,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,MACmC;AACnC,QAAM,OACJ,mDAAC,qBAAD;AAAA,IACE,SAAS,+BAAY;AAAA,IACrB,YAAW;AAAA,IACX,OAAO,SAAS;AAAA,OACZ;AAAA,KAEH;AAIL,SACE,wFACG,iBAAiB,WAAW,WAAW,OAAO,MAC9C,OACC,mDAAC,eAAD;AAAA,IAAe,UAAU,CAAC;AAAA,IAAU;AAAA,KAClC,mDAAC,MAAD;AAAA,IAAM,MAAM,+BAAY;AAAA,IAAO,OAAO,SAAS;AAAA,QAE/C,MACH,iBAAiB,UAAU,WAAW,OAAO;AAAA;AAKpD,MAAM,OAAO,CAAC,UAAyC;AACrD,QAAM,EAAE,OAAO,cAAc,OAAO,cAAc,UAAU;AAC5D,SACE,mDAAC,MAAD;AAAA,IAAM;AAAA,OAAkB;AAAA,KACtB,mDAAC,eAAD;AAAA,OAAmB;AAAA,IAAO;AAAA,IAAY;AAAA;AAAA;AAK5C,IAAO,eAAQ;",
+  "names": []
+}

package/lib/cjs/components/cta/Toggle/Toggle.stories.js

@@ -0,0 +1,57 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  __markAsModule(target);
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && key !== "default")
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toModule = (module2) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+__export(exports, {
+  Default: () => Default,
+  default: () => Toggle_stories_default
+});
+var import_react = __toModule(require("react"));
+var import_client_api = __toModule(require("@storybook/client-api"));
+var import_index = __toModule(require("./index"));
+var Toggle_stories_default = {
+  title: "cta/Toggle",
+  component: import_index.default,
+  argTypes: {
+    checked: {
+      type: "boolean",
+      description: "Control if the component is checked or not",
+      required: true,
+      control: { type: "boolean" }
+    }
+  },
+  parameters: { controls: { exclude: /^(?!.*(checked))/ } }
+};
+const Template = (args) => {
+  const [currentArgs, updateArgs] = (0, import_client_api.useArgs)();
+  const handleClick = () => updateArgs({ checked: !currentArgs.checked });
+  return /* @__PURE__ */ import_react.default.createElement(import_index.default, {
+    ...args,
+    onClick: handleClick
+  }, args.children);
+};
+const Default = Template.bind({});
+Default.args = {
+  children: "Max",
+  checked: true
+};
+//# sourceMappingURL=Toggle.stories.js.map

package/lib/cjs/components/cta/Toggle/Toggle.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/cta/Toggle/Toggle.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/client-api\";\n\nimport Toggle from \"./index\";\nimport type { ToggleProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n  title: \"cta/Toggle\",\n  component: Toggle,\n  argTypes: {\n    checked: {\n      type: \"boolean\",\n      description: \"Control if the component is checked or not\",\n      required: true,\n      control: { type: \"boolean\" },\n    },\n  },\n  parameters: { controls: { exclude: /^(?!.*(checked))/ } },\n};\n\nconst Template = (args: ToggleProps) => {\n  const [currentArgs, updateArgs] = useArgs();\n\n  const handleClick = () => updateArgs({ checked: !currentArgs.checked });\n\n  return (\n    <Toggle {...args} onClick={handleClick}>\n      {args.children}\n    </Toggle>\n  );\n};\n\nexport const Default: StoryTemplate<ToggleProps> = Template.bind({});\nDefault.args = {\n  children: \"Max\",\n  checked: true,\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,wBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM;AAAA;AAAA;AAAA,EAGrB,YAAY,EAAE,UAAU,EAAE,SAAS;AAAA;AAGrC,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,cAAc;AAElC,QAAM,cAAc,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY;AAE7D,SACE,mDAAC,sBAAD;AAAA,OAAY;AAAA,IAAM,SAAS;AAAA,KACxB,KAAK;AAAA;AAKL,MAAM,UAAsC,SAAS,KAAK;AACjE,QAAQ,OAAO;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AAAA;",
+  "names": []
+}