@multiplatform.one/connectkit 6.0.0

package/dist/esm/components/Common/Button/index.mjs

@@ -0,0 +1,129 @@
+import { ButtonContainer, InnerContainer, IconContainer, Arrow, ArrowLine, ArrowChevron, DownloadArrow, DownloadArrowInner, ButtonContainerInner, SpinnerContainer } from "./styles.mjs";
+import { AnimatePresence } from "framer-motion";
+import { flattenChildren } from "../../../utils/index.mjs";
+import FitText from "../FitText/index.mjs";
+import { Spinner } from "../Spinner/index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
+};
+const Button = ({
+  children,
+  variant = "secondary",
+  // unique aspect to how we're handling buttons
+  disabled,
+  icon,
+  iconPosition = "left",
+  roundedIcon,
+  waiting,
+  arrow,
+  download,
+  href,
+  style,
+  onClick
+}) => {
+  const key = typeof children === "string" ? children : flattenChildren(children).join("");
+  const hrefUrl = href && (typeof href === "string" ? href : flattenChildren(href).join(""));
+  return /* @__PURE__ */jsx(ButtonContainer, {
+    as: href ? "a" : void 0,
+    type: href ? void 0 : "button",
+    onClick: event => {
+      if (!disabled && onClick) onClick(event);
+    },
+    href: hrefUrl,
+    target: href && "_blank",
+    rel: href && "noopener noreferrer",
+    disabled,
+    $variant: variant,
+    style,
+    children: /* @__PURE__ */jsxs(AnimatePresence, {
+      initial: false,
+      children: [/* @__PURE__ */jsxs(ButtonContainerInner, {
+        initial: {
+          opacity: 0,
+          y: -10
+        },
+        animate: {
+          opacity: 1,
+          y: -1
+        },
+        exit: {
+          position: "absolute",
+          opacity: 0,
+          y: 10,
+          transition: {
+            ...transition
+          }
+        },
+        transition: {
+          ...transition,
+          delay: 0.2
+        },
+        children: [icon && iconPosition === "left" && /* @__PURE__ */jsx(IconContainer, {
+          $rounded: roundedIcon,
+          children: icon
+        }), download && /* @__PURE__ */jsx(DownloadArrow, {
+          children: /* @__PURE__ */jsx(DownloadArrowInner, {
+            children: /* @__PURE__ */jsxs(Arrow, {
+              width: "13",
+              height: "12",
+              viewBox: "0 0 13 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [/* @__PURE__ */jsx(ArrowLine, {
+                stroke: "currentColor",
+                x1: "1",
+                y1: "6",
+                x2: "12",
+                y2: "6",
+                strokeWidth: "var(--stroke-width)",
+                strokeLinecap: "round"
+              }), /* @__PURE__ */jsx(ArrowChevron, {
+                stroke: "currentColor",
+                d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+                strokeWidth: "var(--stroke-width)",
+                strokeLinecap: "round"
+              })]
+            })
+          })
+        }), /* @__PURE__ */jsx(InnerContainer, {
+          style: {
+            paddingLeft: arrow ? 6 : 0
+          },
+          children: /* @__PURE__ */jsx(FitText, {
+            children
+          })
+        }), icon && iconPosition === "right" && /* @__PURE__ */jsx(IconContainer, {
+          $rounded: roundedIcon,
+          children: icon
+        }), arrow && /* @__PURE__ */jsxs(Arrow, {
+          width: "13",
+          height: "12",
+          viewBox: "0 0 13 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/* @__PURE__ */jsx(ArrowLine, {
+            stroke: "currentColor",
+            x1: "1",
+            y1: "6",
+            x2: "12",
+            y2: "6",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }), /* @__PURE__ */jsx(ArrowChevron, {
+            stroke: "currentColor",
+            d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          })]
+        })]
+      }, key), waiting && /* @__PURE__ */jsx(SpinnerContainer, {
+        children: /* @__PURE__ */jsx(Spinner, {})
+      })]
+    })
+  });
+};
+var Button_default = Button;
+export { Button_default as default };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Common/Button/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["ButtonContainer","InnerContainer","IconContainer","Arrow","ArrowLine","ArrowChevron","DownloadArrow","DownloadArrowInner","ButtonContainerInner","SpinnerContainer","AnimatePresence","flattenChildren","FitText","Spinner","jsx","jsxs","transition","duration","ease","Button","children","variant","disabled","icon","iconPosition","roundedIcon","waiting","arrow","download","href","style","onClick","key","join","hrefUrl","as","type","event","target","rel","$variant","initial","opacity","y","animate","exit","position","delay","$rounded","width","height","viewBox","fill","xmlns","stroke","x1","y1","x2","y2","strokeWidth","strokeLinecap","d","paddingLeft","Button_default"],"sources":["../../../../../src/components/Common/Button/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Common/Button/index.native.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ButtonContainer, InnerContainer, IconContainer, Arrow, ArrowLine, ArrowChevron, DownloadArrow, DownloadArrowInner, ButtonContainerInner, SpinnerContainer } from "./styles.native.js";
+import { AnimatePresence } from "framer-motion";
+import { flattenChildren } from "../../../utils/index.native.js";
+import FitText from "../FitText/index.native.js";
+import { Spinner } from "../Spinner/index.native.js";
+var transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
+};
+var Button = function Button2(param) {
+  var {
+    children,
+    variant = "secondary",
+    // unique aspect to how we're handling buttons
+    disabled,
+    icon,
+    iconPosition = "left",
+    roundedIcon,
+    waiting,
+    arrow,
+    download,
+    href,
+    style,
+    onClick
+  } = param;
+  var key = typeof children === "string" ? children : flattenChildren(children).join("");
+  var hrefUrl = href && (typeof href === "string" ? href : flattenChildren(href).join(""));
+  return /* @__PURE__ */_jsx(ButtonContainer, {
+    as: href ? "a" : void 0,
+    // Never submit a surrounding <form> (e.g. when the modal/buttons are rendered
+    // inside a host login form). Anchors don't take a type.
+    type: href ? void 0 : "button",
+    onClick: function onClick1(event) {
+      if (!disabled && onClick) onClick(event);
+    },
+    href: hrefUrl,
+    target: href && "_blank",
+    rel: href && "noopener noreferrer",
+    disabled,
+    $variant: variant,
+    style,
+    children: /* @__PURE__ */_jsxs(AnimatePresence, {
+      initial: false,
+      children: [/* @__PURE__ */_jsxs(ButtonContainerInner, {
+        initial: {
+          opacity: 0,
+          y: -10
+        },
+        animate: {
+          opacity: 1,
+          y: -1
+        },
+        exit: {
+          position: "absolute",
+          opacity: 0,
+          y: 10,
+          transition: {
+            ...transition
+          }
+        },
+        transition: {
+          ...transition,
+          delay: 0.2
+        },
+        children: [icon && iconPosition === "left" && /* @__PURE__ */_jsx(IconContainer, {
+          $rounded: roundedIcon,
+          children: icon
+        }), download && /* @__PURE__ */_jsx(DownloadArrow, {
+          children: /* @__PURE__ */_jsx(DownloadArrowInner, {
+            children: /* @__PURE__ */_jsxs(Arrow, {
+              width: "13",
+              height: "12",
+              viewBox: "0 0 13 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [/* @__PURE__ */_jsx(ArrowLine, {
+                stroke: "currentColor",
+                x1: "1",
+                y1: "6",
+                x2: "12",
+                y2: "6",
+                strokeWidth: "var(--stroke-width)",
+                strokeLinecap: "round"
+              }), /* @__PURE__ */_jsx(ArrowChevron, {
+                stroke: "currentColor",
+                d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+                strokeWidth: "var(--stroke-width)",
+                strokeLinecap: "round"
+              })]
+            })
+          })
+        }), /* @__PURE__ */_jsx(InnerContainer, {
+          style: {
+            paddingLeft: arrow ? 6 : 0
+          },
+          children: /* @__PURE__ */_jsx(FitText, {
+            children
+          })
+        }), icon && iconPosition === "right" && /* @__PURE__ */_jsx(IconContainer, {
+          $rounded: roundedIcon,
+          children: icon
+        }), arrow && /* @__PURE__ */_jsxs(Arrow, {
+          width: "13",
+          height: "12",
+          viewBox: "0 0 13 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [/* @__PURE__ */_jsx(ArrowLine, {
+            stroke: "currentColor",
+            x1: "1",
+            y1: "6",
+            x2: "12",
+            y2: "6",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }), /* @__PURE__ */_jsx(ArrowChevron, {
+            stroke: "currentColor",
+            d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          })]
+        })]
+      }, key), waiting && /* @__PURE__ */_jsx(SpinnerContainer, {
+        children: /* @__PURE__ */_jsx(Spinner, {})
+      })]
+    })
+  });
+};
+var Button_default = Button;
+export { Button_default as default };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/Common/Button/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","ButtonContainer","InnerContainer","IconContainer","Arrow","ArrowLine","ArrowChevron","DownloadArrow","DownloadArrowInner","ButtonContainerInner","SpinnerContainer","AnimatePresence","flattenChildren","FitText","Spinner","transition","duration","ease","Button","Button2","param","children","variant","disabled","icon","iconPosition","roundedIcon","waiting","arrow","download","href","style","onClick","key","join","hrefUrl","as","type","onClick1","event","target","rel","$variant","initial","opacity","y","animate","exit","position","delay","$rounded","width","height","viewBox","fill","xmlns","stroke","x1","y1","x2","y2","strokeWidth","strokeLinecap","d","paddingLeft","Button_default","default"],"sources":["../../../../../src/components/Common/Button/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Common/Button/styles.mjs

@@ -0,0 +1,247 @@
+import { motion } from "framer-motion";
+import styled from "./../../../styles/styled/index.mjs";
+import { css } from "styled-components";
+import defaultTheme from "../../../constants/defaultTheme.mjs";
+const SpinnerContainer = styled(motion.div)`
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Arrow = styled.svg`
+  --x: -3px;
+  --stroke-width: 2;
+  position: relative;
+  top: 1px;
+  left: -0.5px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 1px;
+  transition: all 100ms ease;
+  transform: translateX(var(--x, -3px));
+  color: currentColor;
+  opacity: 0.4;
+`;
+const ArrowChevron = styled.path``;
+const ArrowLine = styled.line`
+  transition: inherit;
+  transition-property: transform;
+  transform-origin: 90% 50%;
+  transform: scaleX(0.1);
+`;
+const DownloadArrow = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin-right: 6px;
+  color: currentColor;
+`;
+const DownloadArrowInner = styled.div`
+  transform: rotate(90deg);
+  ${Arrow} {
+    margin: 0 auto;
+  }
+`;
+const ButtonContainerInner = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+const ButtonContainer = styled.button`
+
+  ${({
+  disabled
+}) => disabled && css`
+      cursor: not-allowed;
+      pointer-events: none;
+      ${InnerContainer} {
+        opacity: 0.4;
+      }
+    `}
+
+  ${({
+  $variant
+}) => {
+  if ($variant === "primary") {
+    return css`
+        --color: var(--ck-primary-button-color, var(--ck-body-color));
+        --background: var(--ck-primary-button-background, var(--ck-body-background-primary));
+        --box-shadow: var(--ck-primary-button-box-shadow);
+        --border-radius: var(--ck-primary-button-border-radius);
+        --font-weight: var(--ck-primary-button-font-weight, 500);
+
+        --hover-color: var(--ck-button-primary-hover-color, var(--color));
+        --hover-background: var(--ck-primary-button-hover-background, var(--background));
+        --hover-box-shadow: var(--ck-primary-button-hover-box-shadow, var(--box-shadow));
+        --hover-border-radius: var(--ck-primary-button-hover-border-radius, var(--border-radius));
+        --hover-font-weight: var(--ck-primary-button-font-weight, var(--font-weight));
+      `;
+  } else if ($variant === "secondary") {
+    return css`
+        --color: var(--ck-secondary-button-color, var(--ck-body-color));
+        --background: var(--ck-secondary-button-background, var(--ck-body-background-secondary));
+        --box-shadow: var(--ck-secondary-button-box-shadow);
+        --border-radius: var(--ck-secondary-button-border-radius);
+        --font-weight: var(--ck-secondary-button-font-weight, 500);
+
+        --hover-color: var(--ck-secondary-button-hover-color, var(--color));
+        --hover-background: var(--ck-secondary-button-hover-background, var(--background));
+        --hover-box-shadow: var(--ck-secondary-button-hover-box-shadow, var(--box-shadow));
+        --hover-border-radius: var(--ck-secondary-button-hover-border-radius, var(--border-radius));
+        --hover-font-weight: var(--ck-secondary-button-font-weight, var(--font-weight));
+      `;
+  } else if ($variant === "tertiary") {
+    return css`
+        --color: var(--ck-tertiary-button-color, var(--ck-secondary-button-color));
+        --background: var(--ck-tertiary-button-background, var(--ck-secondary-button-background));
+        --box-shadow: var(--ck-tertiary-button-box-shadow, var(--ck-secondary-button-box-shadow));
+        --border-radius: var(
+          --ck-tertiary-button-border-radius,
+          var(--ck-secondary-button-border-radius)
+        );
+        --font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+
+        --hover-color: var(--button-tertiary-hover-color, var(--ck-tertiary-button-color));
+        --hover-background: var(
+          --ck-tertiary-button-hover-background,
+          var(--ck-tertiary-button-background)
+        );
+        --hover-box-shadow: var(
+          --ck-tertiary-button-hover-box-shadow,
+          var(--ck-tertiary-button-box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-tertiary-button-hover-border-radius,
+          var(--ck-tertiary-button-border-radius, var(--border-radius))
+        );
+        --hover-font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+      `;
+  }
+}}
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display:block;
+  text-align: center;
+  height: 48px;
+  margin: 12px 0 0;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight,500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+
+  ${DownloadArrow} {
+    ${Arrow} {
+      transform: translateX(0);
+      ${ArrowLine} {
+        transform: none;
+      }
+      ${ArrowChevron} {
+      }
+    }
+  }
+}
+
+  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+    &:hover,
+    &:focus-visible {
+      color: var(--ck-accent-text-color, var(--hover-color));
+      background: var(--ck-accent-color, var(--hover-background));
+      border-radius: var(--hover-border-radius);
+      box-shadow: var(--hover-box-shadow);
+
+      ${Arrow} {
+        transform: translateX(0);
+        ${ArrowLine} {
+          transform: none;
+        }
+        ${ArrowChevron} {
+        }
+      }
+      ${DownloadArrow} {
+        ${Arrow} {
+          transform: translateX(var(--x));
+          ${ArrowLine} {
+            transform: scaleX(0.1);
+          }
+          ${ArrowChevron} {
+          }
+        }
+      }
+    }
+    &:active {
+      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));
+    }
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    transition: transform 100ms ease;
+    transform: scale(1);
+    font-size: 17px;
+    &:active {
+    }
+  }
+`;
+const InnerContainer = styled.div`
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+`;
+const IconContainer = styled(motion.div)`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 10px;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+  ${props => {
+  return props.$rounded && css`
+        overflow: hidden;
+        border-radius: 5px;
+      `;
+}}
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;
+export { Arrow, ArrowChevron, ArrowLine, ButtonContainer, ButtonContainerInner, DownloadArrow, DownloadArrowInner, IconContainer, InnerContainer, SpinnerContainer };
+//# sourceMappingURL=styles.mjs.map

package/dist/esm/components/Common/Button/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["motion","styled","css","defaultTheme","SpinnerContainer","div","Arrow","svg","ArrowChevron","path","ArrowLine","line","DownloadArrow","DownloadArrowInner","ButtonContainerInner","ButtonContainer","button","disabled","InnerContainer","$variant","mobileWidth","IconContainer","props","$rounded"],"sources":["../../../../../src/components/Common/Button/styles.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}