@daimo/pay 1.19.2 → 1.19.4

package/build/connectkit/src/components/Common/Alert/index.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertContainer, IconContainer } from './styles.js';
+
+const Alert = ({ children, error, icon }) => {
+  return /* @__PURE__ */ jsxs(AlertContainer, { $error: error, children: [
+    icon && /* @__PURE__ */ jsx(IconContainer, { children: icon }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+};
+Alert.displayName = "Alert";
+
+export { Alert as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Alert/index.tsx"],"sourcesContent":["import { AlertContainer, IconContainer } from \"./styles\";\nimport { AlertProps } from \"./types\";\n\nconst Alert = ({ children, error, icon }: AlertProps) => {\n  return (\n    <AlertContainer $error={error}>\n      {icon && <IconContainer>{icon}</IconContainer>}\n      <div>{children}</div>\n    </AlertContainer>\n  );\n};\nAlert.displayName = \"Alert\";\n\nexport default Alert;\n"],"names":[],"mappings":";;;AAGA,MAAM,QAAQ,CAAC,EAAE,QAAU,EAAA,KAAA,EAAO,MAAuB,KAAA;AACvD,EACE,uBAAA,IAAA,CAAC,cAAe,EAAA,EAAA,MAAA,EAAQ,KACrB,EAAA,QAAA,EAAA;AAAA,IAAQ,IAAA,oBAAA,GAAA,CAAC,iBAAe,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,oBAC9B,GAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,GACjB,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,KAAA,CAAM,WAAc,GAAA,OAAA;;;;"}

package/build/connectkit/src/components/Common/Alert/styles.js

@@ -0,0 +1,55 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const AlertContainer = styled(motion.div)`
+  display: flex;
+  gap: 8px;
+  position: relative;
+  border-radius: 9px;
+  margin: 0 auto;
+  padding: 10px;
+  text-align: left;
+  font-size: 14px;
+  line-height: 17px;
+  font-weight: 400;
+  max-width: 260px;
+  min-width: 100%;
+
+  border-radius: var(--ck-alert-border-radius, 12px);
+  color: var(--ck-alert-color, var(--ck-body-color-muted));
+  background: var(--ck-alert-background, var(--ck-body-background-secondary));
+  box-shadow: var(--ck-alert-box-shadow, var(--ck-body-box-shadow));
+
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    padding: 16px;
+    font-size: 16px;
+    line-height: 21px;
+    border-radius: 24px;
+    text-align: center;
+  }
+
+  ${($error) => {
+  if ($error)
+    return css`
+        color: #fff;
+        background: var(--ck-body-color-danger, red);
+      `;
+}}
+`;
+const IconContainer = styled(motion.div)`
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+`;
+
+export { AlertContainer, IconContainer };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Common/Alert/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/Alert/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"./../../../styles/styled\";\n\nexport const AlertContainer = styled(motion.div)<{ $error?: boolean }>`\n  display: flex;\n  gap: 8px;\n  position: relative;\n  border-radius: 9px;\n  margin: 0 auto;\n  padding: 10px;\n  text-align: left;\n  font-size: 14px;\n  line-height: 17px;\n  font-weight: 400;\n  max-width: 260px;\n  min-width: 100%;\n\n  border-radius: var(--ck-alert-border-radius, 12px);\n  color: var(--ck-alert-color, var(--ck-body-color-muted));\n  background: var(--ck-alert-background, var(--ck-body-background-secondary));\n  box-shadow: var(--ck-alert-box-shadow, var(--ck-body-box-shadow));\n\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    padding: 16px;\n    font-size: 16px;\n    line-height: 21px;\n    border-radius: 24px;\n    text-align: center;\n  }\n\n  ${($error) => {\n    if ($error)\n      return css`\n        color: #fff;\n        background: var(--ck-body-color-danger, red);\n      `;\n  }}\n`;\n\nexport const IconContainer = styled(motion.div)`\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg {\n    display: block;\n    width: 100%;\n    height: auto;\n  }\n`;\n"],"names":[],"mappings":";;;;;AAKa,MAAA,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAAA,EAmBR,aAAa,WAAW,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAQ3D,CAAC,MAAW,KAAA;AACZ,EAAI,IAAA,MAAA;AACF,IAAO,OAAA,GAAA,CAAA;AAAA;AAAA;AAAA,MAAA,CAAA,CAAA;AAIX,CAAC,CAAA;AAAA,EAAA;AAGU,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/connectkit/src/components/Common/AmountInput/AmountInputField.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+import { ModalBody } from '../Modal/styles.js';
+
+const Container = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: transparent;
+`;
+const InputField = styled.input`
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 30px;
+  font-weight: var(--ck-modal-h1-font-weight, 600);
+  color: var(--ck-body-color);
+  width: ${(props) => {
+  const length = props.value?.length ?? 0;
+  if (length === 0) return "3.55ch";
+  const numPunctuations = (props.value?.match(/[.,]/g) || []).length;
+  const adjustedLength = length - numPunctuations * 0.55;
+  return `${Math.min(adjustedLength, 10)}ch`;
+}};
+  min-width: 1ch;
+  max-width: 10ch;
+`;
+const AnimatedCurrency = styled(ModalBody)`
+  @keyframes fadeInDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  animation: fadeInDown 0.3s ease-out forwards;
+  font-size: ${(props) => props.$small ? "16px" : "24px"};
+`;
+const AmountInputField = ({ value, onChange, currency = "$", onKeyDown }) => {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [value]);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    currency === "$" && /* @__PURE__ */ jsx(AnimatedCurrency, { children: currency }),
+    /* @__PURE__ */ jsx(
+      InputField,
+      {
+        ref: inputRef,
+        type: "text",
+        inputMode: "decimal",
+        value,
+        onChange,
+        placeholder: "0.00",
+        onKeyDown
+      }
+    ),
+    currency !== "$" && /* @__PURE__ */ jsx(AnimatedCurrency, { $small: true, children: currency })
+  ] });
+};
+
+export { AmountInputField as default };
+//# sourceMappingURL=AmountInputField.js.map

package/build/connectkit/src/components/Common/AmountInput/AmountInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInputField.js","sources":["../../../../../../src/components/Common/AmountInput/AmountInputField.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport styled from \"../../../styles/styled\";\nimport { ModalBody } from \"../Modal/styles\";\n\nconst Container = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  background: transparent;\n`;\n\nconst InputField = styled.input`\n  margin: 0;\n  padding: 0;\n  background: none;\n  border: none;\n  outline: none;\n  font-size: 30px;\n  font-weight: var(--ck-modal-h1-font-weight, 600);\n  color: var(--ck-body-color);\n  width: ${(props) => {\n    const length = props.value?.length ?? 0;\n    // Placeholder is \"0.00\", 3ch for digits + 0.55ch for decimal point\n    if (length === 0) return \"3.55ch\";\n    // Reduce width when decimal or commas are present since they're smaller than normal chars\n    const numPunctuations = (props.value?.match(/[.,]/g) || []).length;\n    const adjustedLength = length - numPunctuations * 0.55;\n    return `${Math.min(adjustedLength, 10)}ch`;\n  }};\n  min-width: 1ch;\n  max-width: 10ch;\n`;\n\nconst AnimatedCurrency = styled(ModalBody)<{ $small?: boolean }>`\n  @keyframes fadeInDown {\n    from {\n      opacity: 0;\n      transform: translateY(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  animation: fadeInDown 0.3s ease-out forwards;\n  font-size: ${(props) => (props.$small ? \"16px\" : \"24px\")};\n`;\n\nconst AmountInputField: React.FC<{\n  value: string;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  currency?: string;\n  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}> = ({ value, onChange, currency = \"$\", onKeyDown }) => {\n  // Focus the input when the component mounts so the user can start typing immediately\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, [value]);\n\n  return (\n    <Container>\n      {currency === \"$\" && <AnimatedCurrency>{currency}</AnimatedCurrency>}\n      <InputField\n        ref={inputRef}\n        type=\"text\"\n        inputMode=\"decimal\"\n        value={value}\n        onChange={onChange}\n        placeholder=\"0.00\"\n        onKeyDown={onKeyDown}\n      />\n      {currency !== \"$\" && (\n        <AnimatedCurrency $small>{currency}</AnimatedCurrency>\n      )}\n    </Container>\n  );\n};\n\nexport default AmountInputField;\n"],"names":[],"mappings":";;;;;AAIA,MAAM,YAAY,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQzB,MAAM,aAAa,MAAO,CAAA,KAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAAA,EASf,CAAC,KAAU,KAAA;AAClB,EAAM,MAAA,MAAA,GAAS,KAAM,CAAA,KAAA,EAAO,MAAU,IAAA,CAAA,CAAA;AAEtC,EAAI,IAAA,MAAA,KAAW,GAAU,OAAA,QAAA,CAAA;AAEzB,EAAA,MAAM,mBAAmB,KAAM,CAAA,KAAA,EAAO,MAAM,OAAO,CAAA,IAAK,EAAI,EAAA,MAAA,CAAA;AAC5D,EAAM,MAAA,cAAA,GAAiB,SAAS,eAAkB,GAAA,IAAA,CAAA;AAClD,EAAA,OAAO,CAAG,EAAA,IAAA,CAAK,GAAI,CAAA,cAAA,EAAgB,EAAE,CAAC,CAAA,EAAA,CAAA,CAAA;AACxC,CAAC,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKH,MAAM,gBAAA,GAAmB,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAa1B,CAAC,KAAA,KAAW,KAAM,CAAA,MAAA,GAAS,SAAS,MAAO,CAAA;AAAA,CAAA,CAAA;AAGpD,MAAA,gBAAA,GAKD,CAAC,EAAE,KAAA,EAAO,UAAU,QAAW,GAAA,GAAA,EAAK,WAAgB,KAAA;AAEvD,EAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA,CAAA;AAC9C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA,CAAA;AAAA,GAC1B,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,4BACG,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAa,QAAA,KAAA,GAAA,oBAAQ,GAAA,CAAA,gBAAA,EAAA,EAAkB,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,oBACjD,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAK,EAAA,QAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,QACL,SAAU,EAAA,SAAA;AAAA,QACV,KAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAY,EAAA,MAAA;AAAA,QACZ,SAAA;AAAA,OAAA;AAAA,KACF;AAAA,IACC,aAAa,GACZ,oBAAA,GAAA,CAAC,gBAAiB,EAAA,EAAA,MAAA,EAAM,MAAE,QAAS,EAAA,QAAA,EAAA,CAAA;AAAA,GAEvC,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/connectkit/src/components/Common/AmountInput/index.js

@@ -0,0 +1,159 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalBody } from '../Modal/styles.js';
+import { parseUnits } from 'viem';
+import styled from '../../../styles/styled/index.js';
+import { formatUsd, usdToRoundedTokenAmount, USD_DECIMALS, tokenAmountToRoundedUsd, roundUsd, roundTokenAmount, roundTokenAmountUnits } from '../../../utils/format.js';
+import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
+import Button from '../Button/index.js';
+import SwitchButton from '../SwitchButton/index.js';
+import TokenLogoSpinner from '../../Spinners/TokenLogoSpinner/index.js';
+import AmountInputField from './AmountInputField.js';
+
+const MultiCurrencySelectAmount = ({ selectedTokenOption, setSelectedTokenOption, nextPage }) => {
+  const { paymentState, setRoute, triggerResize } = usePayContext();
+  const maxUsdLimit = paymentState.getOrderUsdLimit();
+  const balanceToken = selectedTokenOption.balance.token;
+  const minimumMessage = selectedTokenOption.minimumRequired.usd > 0 ? `Minimum 
+  ${formatUsd(selectedTokenOption.minimumRequired.usd, "up")}` : null;
+  const [usdValue, setUsdValue] = useState("");
+  const [tokenValue, setTokenValue] = useState(
+    usdToRoundedTokenAmount(0, balanceToken)
+  );
+  const [isEditingUsd, setIsEditingUsd] = useState(true);
+  const [message, setMessage] = useState(minimumMessage);
+  const [continueDisabled, setContinueDisabled] = useState(true);
+  useEffect(() => {
+    triggerResize();
+  }, [message]);
+  const updateValues = (newUsdValue, newTokenValue, newIsEditingUsd) => {
+    const sanitizedUsdValue = sanitizeNumber(newUsdValue);
+    const sanitizedTokenValue = sanitizeNumber(newTokenValue);
+    setUsdValue(
+      newIsEditingUsd ? newUsdValue : roundUsd(Number(sanitizedUsdValue))
+    );
+    setTokenValue(
+      newIsEditingUsd ? roundTokenAmountUnits(Number(sanitizedTokenValue), balanceToken) : newTokenValue
+    );
+    setIsEditingUsd(newIsEditingUsd);
+    setContinueDisabled(
+      Number(sanitizedUsdValue) <= 0 || Number(sanitizedUsdValue) < selectedTokenOption.minimumRequired.usd || Number(sanitizedUsdValue) > selectedTokenOption.balance.usd || Number(sanitizedUsdValue) > maxUsdLimit
+    );
+    if (Number(sanitizedUsdValue) > selectedTokenOption.balance.usd) {
+      setMessage(
+        `Amount exceeds your balance: 
+  ${formatUsd(selectedTokenOption.balance.usd)}`
+      );
+    } else if (Number(usdValue) > maxUsdLimit) {
+      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
+    } else {
+      setMessage(minimumMessage);
+    }
+  };
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    const maxDecimals = isEditingUsd ? USD_DECIMALS : balanceToken.displayDecimals;
+    if (value !== "" && !isValidNumber(value, maxDecimals)) return;
+    const sanitizedValue = sanitizeNumber(value);
+    const newUsdValue = isEditingUsd ? value : tokenAmountToRoundedUsd(
+      parseUnits(sanitizedValue, balanceToken.decimals),
+      balanceToken
+    );
+    const newTokenValue = isEditingUsd ? usdToRoundedTokenAmount(Number(sanitizedValue), balanceToken) : value;
+    updateValues(newUsdValue, newTokenValue, isEditingUsd);
+  };
+  const handleMax = () => {
+    const usdValue2 = roundUsd(Number(selectedTokenOption.balance.usd));
+    const tokenValue2 = roundTokenAmount(
+      selectedTokenOption.balance.amount,
+      balanceToken
+    );
+    updateValues(usdValue2, tokenValue2, isEditingUsd);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !continueDisabled) {
+      handleContinue();
+    }
+  };
+  const handleSwitchCurrency = () => {
+    updateValues(usdValue, tokenValue, !isEditingUsd);
+  };
+  const handleContinue = () => {
+    const usd = Number(sanitizeNumber(usdValue));
+    const amountUnits = usd / balanceToken.usd;
+    const amount = parseUnits(amountUnits.toString(), balanceToken.decimals);
+    setSelectedTokenOption({
+      ...selectedTokenOption,
+      required: {
+        token: balanceToken,
+        amount: amount.toString(),
+        usd
+      }
+    });
+    paymentState.setChosenUsd(usd);
+    setRoute(nextPage, {
+      amountUsd: usd,
+      amountUnits,
+      tokenSymbol: balanceToken.symbol
+    });
+  };
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(TokenLogoSpinner, { token: balanceToken }),
+    /* @__PURE__ */ jsxs(ModalContent, { $preserveDisplay: true, children: [
+      /* @__PURE__ */ jsxs(AmountInputContainer, { children: [
+        /* @__PURE__ */ jsx(MaxButton, { style: { visibility: "hidden" }, children: "Max" }),
+        /* @__PURE__ */ jsx(
+          AmountInputField,
+          {
+            value: isEditingUsd ? usdValue : tokenValue,
+            onChange: handleAmountChange,
+            currency: isEditingUsd ? "$" : balanceToken.symbol,
+            onKeyDown: handleKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx(MaxButton, { onClick: handleMax, children: "Max" })
+      ] }),
+      balanceToken.fiatISO !== "USD" && /* @__PURE__ */ jsx(SwitchContainer, { children: /* @__PURE__ */ jsx(SwitchButton, { onClick: handleSwitchCurrency, children: /* @__PURE__ */ jsx(SecondaryAmount, { children: isEditingUsd ? `${tokenValue} ${balanceToken.symbol}` : `$${usdValue}` }) }) }),
+      message && /* @__PURE__ */ jsx(ModalBody, { children: message }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })
+    ] })
+  ] });
+};
+const AmountInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+`;
+const SecondaryAmount = styled.div`
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  color: var(--ck-body-color-muted);
+  strong {
+    font-weight: 500;
+    color: var(--ck-body-color);
+  }
+`;
+const MaxButton = styled.button`
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: var(--ck-primary-button-border-radius);
+  font-size: 14px;
+  font-weight: 400;
+  background: var(
+    --ck-secondary-button-background,
+    var(--ck-body-background-secondary)
+  );
+  color: var(--ck-body-color-secondary);
+  cursor: pointer;
+`;
+const SwitchContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { MultiCurrencySelectAmount as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/AmountInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/AmountInput/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { ROUTES } from \"../../../constants/routes\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  ModalBody,\n  ModalContent,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport { WalletPaymentOption } from \"@daimo/pay-common\";\nimport { parseUnits } from \"viem\";\nimport styled from \"../../../styles/styled\";\nimport {\n  formatUsd,\n  roundTokenAmount,\n  roundTokenAmountUnits,\n  roundUsd,\n  tokenAmountToRoundedUsd,\n  USD_DECIMALS,\n  usdToRoundedTokenAmount,\n} from \"../../../utils/format\";\nimport { isValidNumber, sanitizeNumber } from \"../../../utils/validateInput\";\nimport Button from \"../../Common/Button\";\nimport SwitchButton from \"../../Common/SwitchButton\";\nimport TokenLogoSpinner from \"../../Spinners/TokenLogoSpinner\";\nimport AmountInputField from \"./AmountInputField\";\n\nconst MultiCurrencySelectAmount: React.FC<{\n  selectedTokenOption: WalletPaymentOption;\n  setSelectedTokenOption: (option: WalletPaymentOption) => void;\n  nextPage: ROUTES;\n}> = ({ selectedTokenOption, setSelectedTokenOption, nextPage }) => {\n  const { paymentState, setRoute, triggerResize } = usePayContext();\n  const maxUsdLimit = paymentState.getOrderUsdLimit();\n\n  const balanceToken = selectedTokenOption.balance.token;\n\n  const minimumMessage =\n    selectedTokenOption.minimumRequired.usd > 0\n      ? `Minimum \n  ${formatUsd(selectedTokenOption.minimumRequired.usd, \"up\")}`\n      : null;\n\n  const [usdValue, setUsdValue] = useState(\"\");\n  const [tokenValue, setTokenValue] = useState(\n    usdToRoundedTokenAmount(0, balanceToken),\n  );\n  const [isEditingUsd, setIsEditingUsd] = useState(true);\n  const [message, setMessage] = useState<string | null>(minimumMessage);\n  const [continueDisabled, setContinueDisabled] = useState(true);\n\n  useEffect(() => {\n    triggerResize();\n  }, [message]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  /**\n   * Update the editable value and secondary value, taking into account whether\n   * the user is currently editing the USD value or the token value.\n   */\n  const updateValues = (\n    newUsdValue: string,\n    newTokenValue: string,\n    newIsEditingUsd: boolean,\n  ) => {\n    const sanitizedUsdValue = sanitizeNumber(newUsdValue);\n    const sanitizedTokenValue = sanitizeNumber(newTokenValue);\n\n    // Update the state. Don't sanitize the value if the user is editing it.\n    setUsdValue(\n      newIsEditingUsd ? newUsdValue : roundUsd(Number(sanitizedUsdValue)),\n    );\n    setTokenValue(\n      newIsEditingUsd\n        ? roundTokenAmountUnits(Number(sanitizedTokenValue), balanceToken)\n        : newTokenValue,\n    );\n    setIsEditingUsd(newIsEditingUsd);\n\n    setContinueDisabled(\n      Number(sanitizedUsdValue) <= 0 ||\n        Number(sanitizedUsdValue) < selectedTokenOption.minimumRequired.usd ||\n        Number(sanitizedUsdValue) > selectedTokenOption.balance.usd ||\n        Number(sanitizedUsdValue) > maxUsdLimit,\n    );\n\n    if (Number(sanitizedUsdValue) > selectedTokenOption.balance.usd) {\n      setMessage(\n        `Amount exceeds your balance: \n  ${formatUsd(selectedTokenOption.balance.usd)}`,\n      );\n    } else if (Number(usdValue) > maxUsdLimit) {\n      setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);\n    } else {\n      setMessage(minimumMessage);\n    }\n  };\n\n  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    const maxDecimals = isEditingUsd\n      ? USD_DECIMALS\n      : balanceToken.displayDecimals;\n    if (value !== \"\" && !isValidNumber(value, maxDecimals)) return;\n\n    const sanitizedValue = sanitizeNumber(value);\n\n    const newUsdValue = isEditingUsd\n      ? value\n      : tokenAmountToRoundedUsd(\n          parseUnits(sanitizedValue, balanceToken.decimals),\n          balanceToken,\n        );\n    const newTokenValue = isEditingUsd\n      ? usdToRoundedTokenAmount(Number(sanitizedValue), balanceToken)\n      : value;\n    updateValues(newUsdValue, newTokenValue, isEditingUsd);\n  };\n\n  const handleMax = () => {\n    const usdValue = roundUsd(Number(selectedTokenOption.balance.usd));\n    const tokenValue = roundTokenAmount(\n      selectedTokenOption.balance.amount,\n      balanceToken,\n    );\n    updateValues(usdValue, tokenValue, isEditingUsd);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" && !continueDisabled) {\n      handleContinue();\n    }\n  };\n\n  const handleSwitchCurrency = () => {\n    updateValues(usdValue, tokenValue, !isEditingUsd);\n  };\n\n  const handleContinue = () => {\n    const usd = Number(sanitizeNumber(usdValue));\n    const amountUnits = usd / balanceToken.usd;\n    const amount = parseUnits(amountUnits.toString(), balanceToken.decimals);\n    setSelectedTokenOption({\n      ...selectedTokenOption,\n      required: {\n        token: balanceToken,\n        amount: amount.toString() as `${bigint}`,\n        usd,\n      },\n    });\n    paymentState.setChosenUsd(usd);\n    setRoute(nextPage, {\n      amountUsd: usd,\n      amountUnits,\n      tokenSymbol: balanceToken.symbol,\n    });\n  };\n\n  return (\n    <PageContent>\n      <TokenLogoSpinner token={balanceToken} />\n      <ModalContent $preserveDisplay={true}>\n        <AmountInputContainer>\n          {/* Invisible div to balance spacing */}\n          <MaxButton style={{ visibility: \"hidden\" }}>Max</MaxButton>\n          <AmountInputField\n            value={isEditingUsd ? usdValue : tokenValue}\n            onChange={handleAmountChange}\n            currency={isEditingUsd ? \"$\" : balanceToken.symbol}\n            onKeyDown={handleKeyDown}\n          />\n          <MaxButton onClick={handleMax}>Max</MaxButton>\n        </AmountInputContainer>\n\n        {balanceToken.fiatISO !== \"USD\" && (\n          <SwitchContainer>\n            <SwitchButton onClick={handleSwitchCurrency}>\n              <SecondaryAmount>\n                {isEditingUsd\n                  ? `${tokenValue} ${balanceToken.symbol}`\n                  : `$${usdValue}`}\n              </SecondaryAmount>\n            </SwitchButton>\n          </SwitchContainer>\n        )}\n\n        {message && <ModalBody>{message}</ModalBody>}\n\n        <Button onClick={handleContinue} disabled={continueDisabled}>\n          Continue\n        </Button>\n      </ModalContent>\n    </PageContent>\n  );\n};\n\nconst AmountInputContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n`;\nconst SecondaryAmount = styled.div`\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 21px;\n  color: var(--ck-body-color-muted);\n  strong {\n    font-weight: 500;\n    color: var(--ck-body-color);\n  }\n`;\nconst MaxButton = styled.button`\n  display: inline-block;\n  padding: 3px 8px;\n  border-radius: var(--ck-primary-button-border-radius);\n  font-size: 14px;\n  font-weight: 400;\n  background: var(\n    --ck-secondary-button-background,\n    var(--ck-body-background-secondary)\n  );\n  color: var(--ck-body-color-secondary);\n  cursor: pointer;\n`;\nconst SwitchContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport default MultiCurrencySelectAmount;\n"],"names":["usdValue","tokenValue"],"mappings":"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"}

package/build/connectkit/src/components/Common/Avatar/index.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { EnsAvatar, ImageContainer } from './styles.js';
+import { normalize } from 'viem/ens';
+import { useEnsAddress, useEnsName, useEnsAvatar } from 'wagmi';
+import { useEnsFallbackConfig } from '../../../hooks/useEnsFallbackConfig.js';
+import useIsMounted from '../../../hooks/useIsMounted.js';
+import { ResetContainer } from '../../../styles/index.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+
+const Avatar = ({ address, name, size = 96, radius = 96 }) => {
+  const isMounted = useIsMounted();
+  const context = usePayContext();
+  const imageRef = useRef(null);
+  const [loaded, setLoaded] = useState(true);
+  const ensFallbackConfig = useEnsFallbackConfig();
+  const { data: ensAddress } = useEnsAddress({
+    chainId: 1,
+    name,
+    config: ensFallbackConfig
+  });
+  const { data: ensName } = useEnsName({
+    chainId: 1,
+    address: address ?? ensAddress ?? void 0,
+    config: ensFallbackConfig
+  });
+  const { data: ensAvatar } = useEnsAvatar({
+    chainId: 1,
+    name: normalize(ensName ?? ""),
+    config: ensFallbackConfig
+  });
+  const ens = {
+    address: ensAddress ?? address,
+    name: ensName ?? name,
+    avatar: ensAvatar ?? void 0
+  };
+  useEffect(() => {
+    if (!(imageRef.current && imageRef.current.complete && imageRef.current.naturalHeight !== 0)) {
+      setLoaded(false);
+    }
+  }, [ensAvatar]);
+  if (!isMounted)
+    return /* @__PURE__ */ jsx("div", { style: { width: size, height: size, borderRadius: radius } });
+  if (context.options?.customAvatar)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: size,
+          height: size,
+          borderRadius: radius,
+          overflow: "hidden"
+        },
+        children: context.options?.customAvatar({
+          address: address ?? ens?.address,
+          ensName: name ?? ens?.name,
+          ensImage: ens?.avatar,
+          size,
+          radius
+        })
+      }
+    );
+  if (!ens.name || !ens.avatar)
+    return /* @__PURE__ */ jsx(ResetContainer, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(EnsAvatar, { $size: size, $seed: ens.address, $radius: radius }) });
+  return /* @__PURE__ */ jsx(ResetContainer, { style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(EnsAvatar, { $size: size, $seed: ens.address, $radius: radius, children: /* @__PURE__ */ jsx(
+    ImageContainer,
+    {
+      ref: imageRef,
+      src: ens.avatar,
+      alt: ens.name,
+      onLoad: () => setLoaded(true),
+      $loaded: loaded
+    }
+  ) }) });
+};
+
+export { Avatar as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Avatar/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\n\nimport { EnsAvatar, ImageContainer } from \"./styles\";\n\nimport { normalize } from \"viem/ens\";\nimport { useEnsAddress, useEnsAvatar, useEnsName } from \"wagmi\";\nimport { useEnsFallbackConfig } from \"../../../hooks/useEnsFallbackConfig\";\nimport useIsMounted from \"../../../hooks/useIsMounted\";\nimport { ResetContainer } from \"../../../styles\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\ntype Hash = `0x${string}`;\n\nexport type CustomAvatarProps = {\n  address?: Hash | undefined;\n  ensName?: string | undefined;\n  ensImage?: string;\n  size: number;\n  radius: number;\n};\n\n/** Icon for an Ethereum address. Supports ENS names and avatars. */\nconst Avatar: React.FC<{\n  address?: Hash | undefined;\n  name?: string | undefined;\n  size?: number;\n  radius?: number;\n}> = ({ address, name, size = 96, radius = 96 }) => {\n  const isMounted = useIsMounted();\n  const context = usePayContext();\n\n  const imageRef = useRef<any>(null);\n  const [loaded, setLoaded] = useState(true);\n\n  const ensFallbackConfig = useEnsFallbackConfig();\n  const { data: ensAddress } = useEnsAddress({\n    chainId: 1,\n    name: name,\n    config: ensFallbackConfig,\n  });\n  const { data: ensName } = useEnsName({\n    chainId: 1,\n    address: address ?? ensAddress ?? undefined,\n    config: ensFallbackConfig,\n  });\n  const { data: ensAvatar } = useEnsAvatar({\n    chainId: 1,\n    name: normalize(ensName ?? \"\"),\n    config: ensFallbackConfig,\n  });\n\n  const ens = {\n    address: ensAddress ?? address,\n    name: ensName ?? name,\n    avatar: ensAvatar ?? undefined,\n  };\n\n  useEffect(() => {\n    if (\n      !(\n        imageRef.current &&\n        imageRef.current.complete &&\n        imageRef.current.naturalHeight !== 0\n      )\n    ) {\n      setLoaded(false);\n    }\n  }, [ensAvatar]);\n\n  if (!isMounted)\n    return <div style={{ width: size, height: size, borderRadius: radius }} />;\n\n  if (context.options?.customAvatar)\n    return (\n      <div\n        style={{\n          width: size,\n          height: size,\n          borderRadius: radius,\n          overflow: \"hidden\",\n        }}\n      >\n        {context.options?.customAvatar({\n          address: address ?? ens?.address,\n          ensName: name ?? ens?.name,\n          ensImage: ens?.avatar,\n          size,\n          radius,\n        })}\n      </div>\n    );\n\n  if (!ens.name || !ens.avatar)\n    return (\n      <ResetContainer style={{ pointerEvents: \"none\" }}>\n        <EnsAvatar $size={size} $seed={ens.address} $radius={radius} />\n      </ResetContainer>\n    );\n  return (\n    <ResetContainer style={{ pointerEvents: \"none\" }}>\n      <EnsAvatar $size={size} $seed={ens.address} $radius={radius}>\n        <ImageContainer\n          ref={imageRef}\n          src={ens.avatar}\n          alt={ens.name}\n          onLoad={() => setLoaded(true)}\n          $loaded={loaded}\n        />\n      </EnsAvatar>\n    </ResetContainer>\n  );\n};\n\nexport default Avatar;\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Common/Avatar/styles.js

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+function addressToNumber(address) {
+  return address.split("").map((l) => l.charCodeAt(0)).reduce((a, b) => a + b) % 100 / 100;
+}
+const EnsAvatar = styled(motion.div)`
+  will-change: transform; // Needed for Safari
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  overflow: hidden;
+  margin: 0;
+  border-radius: ${(props) => `${props.$radius}px`};
+  width: ${(props) => `${props.$size}px`};
+  height: ${(props) => `${props.$size}px`};
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
+  &:before {
+    content: "";
+    z-index: 1;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  }
+  ${(props) => {
+  if (props.$seed) {
+    const id = Math.ceil(addressToNumber(props.$seed) * 8);
+    const ensColor = `0${id === 0 ? 1 : id}`;
+    return css`
+        background: var(--ck-ens-${ensColor}-start);
+        background: linear-gradient(
+          180deg,
+          var(--ck-ens-${ensColor}-start) 0%,
+          var(--ck-ens-${ensColor}-stop) 100%
+        );
+      `;
+  }
+}}
+`;
+const ImageContainer = styled(motion.img)`
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: ${(props) => props.$loaded ? 1 : 0};
+  will-change: opacity; // Needed for Safari
+  transition: opacity 500ms ease;
+  transform: scale(1.01); // fixes background color bleeding
+`;
+
+export { EnsAvatar, ImageContainer };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Common/Avatar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/Avatar/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nfunction addressToNumber(address: string) {\n  return (\n    (address\n      .split(\"\")\n      .map((l) => l.charCodeAt(0))\n      .reduce((a, b) => a + b) %\n      100) /\n    100\n  );\n}\n\nexport const EnsAvatar = styled(motion.div)<{\n  $seed?: string;\n  $size?: number;\n  $radius?: number;\n}>`\n  will-change: transform; // Needed for Safari\n  pointer-events: none;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  margin: 0;\n  border-radius: ${(props) => `${props.$radius}px`};\n  width: ${(props) => `${props.$size}px`};\n  height: ${(props) => `${props.$size}px`};\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);\n  &:before {\n    content: \"\";\n    z-index: 1;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);\n  }\n  ${(props) => {\n    if (props.$seed) {\n      const id = Math.ceil(addressToNumber(props.$seed) * 8);\n      const ensColor = `0${id === 0 ? 1 : id}`; // No zero ID in ENS color list.. 🤷‍♀️\n      return css`\n        background: var(--ck-ens-${ensColor}-start);\n        background: linear-gradient(\n          180deg,\n          var(--ck-ens-${ensColor}-start) 0%,\n          var(--ck-ens-${ensColor}-stop) 100%\n        );\n      `;\n    }\n  }}\n`;\n\nexport const ImageContainer = styled(motion.img)<{ $loaded: boolean }>`\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n  opacity: ${(props) => (props.$loaded ? 1 : 0)};\n  will-change: opacity; // Needed for Safari\n  transition: opacity 500ms ease;\n  transform: scale(1.01); // fixes background color bleeding\n`;\n"],"names":[],"mappings":";;;;AAIA,SAAS,gBAAgB,OAAiB,EAAA;AACxC,EAAA,OACG,QACE,KAAM,CAAA,EAAE,EACR,GAAI,CAAA,CAAC,MAAM,CAAE,CAAA,UAAA,CAAW,CAAC,CAAC,CAAA,CAC1B,OAAO,CAAC,CAAA,EAAG,MAAM,CAAI,GAAA,CAAC,IACvB,GACF,GAAA,GAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,SAAA,GAAY,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAWvB,CAAC,KAAA,KAAU,CAAG,EAAA,KAAA,CAAM,OAAO,CAAI,EAAA,CAAA,CAAA;AAAA,SAAA,EACvC,CAAC,KAAA,KAAU,CAAG,EAAA,KAAA,CAAM,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA,UAAA,EAC5B,CAAC,KAAA,KAAU,CAAG,EAAA,KAAA,CAAM,KAAK,CAAI,EAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAUrC,CAAC,KAAU,KAAA;AACX,EAAA,IAAI,MAAM,KAAO,EAAA;AACf,IAAA,MAAM,KAAK,IAAK,CAAA,IAAA,CAAK,gBAAgB,KAAM,CAAA,KAAK,IAAI,CAAC,CAAA,CAAA;AACrD,IAAA,MAAM,QAAW,GAAA,CAAA,CAAA,EAAI,EAAO,KAAA,CAAA,GAAI,IAAI,EAAE,CAAA,CAAA,CAAA;AACtC,IAAO,OAAA,GAAA,CAAA;AAAA,iCAAA,EACsB,QAAQ,CAAA;AAAA;AAAA;AAAA,uBAAA,EAGlB,QAAQ,CAAA;AAAA,uBAAA,EACR,QAAQ,CAAA;AAAA;AAAA,MAAA,CAAA,CAAA;AAAA,GAG7B;AACF,CAAC,CAAA;AAAA,EAAA;AAGU,MAAA,cAAA,GAAiB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAKlC,CAAC,KAAA,KAAW,KAAM,CAAA,OAAA,GAAU,IAAI,CAAE,CAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/connectkit/src/components/Common/BrowserIcon/index.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { BrowserIconContainer } from './styles.js';
+import browsers from '../../../assets/browsers.js';
+import { detectBrowser } from '../../../utils/index.js';
+
+const BrowserIcon = React.forwardRef(
+  ({ browser }, ref) => {
+    const currentBrowser = browser ?? detectBrowser();
+    let icon;
+    switch (currentBrowser) {
+      case "chrome":
+        icon = browsers.Chrome;
+        break;
+      case "firefox":
+        icon = browsers.FireFox;
+        break;
+      case "edge":
+        icon = browsers.Edge;
+        break;
+    }
+    if (!icon) return /* @__PURE__ */ jsx(Fragment, {});
+    return /* @__PURE__ */ jsx(BrowserIconContainer, { children: icon });
+  }
+);
+BrowserIcon.displayName = "BrowserIcon";
+
+export { BrowserIcon as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/BrowserIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/BrowserIcon/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { BrowserIconContainer } from \"./styles\";\nimport { BrowserIconProps } from \"./types\";\n\nimport browsers from \"../../../assets/browsers\";\nimport { detectBrowser } from \"../../../utils\";\n\nconst BrowserIcon = React.forwardRef(\n  ({ browser }: BrowserIconProps, ref: React.Ref<HTMLElement>) => {\n    const currentBrowser = browser ?? detectBrowser();\n\n    let icon;\n    switch (currentBrowser) {\n      case \"chrome\":\n        icon = browsers.Chrome;\n        break;\n      case \"firefox\":\n        icon = browsers.FireFox;\n        break;\n      case \"edge\":\n        icon = browsers.Edge;\n        break;\n      case \"brave\":\n        //   icon = browsers.Brave;\n        break;\n    }\n    if (!icon) return <></>;\n    return <BrowserIconContainer>{icon}</BrowserIconContainer>;\n  },\n);\nBrowserIcon.displayName = \"BrowserIcon\";\n\nexport default BrowserIcon;\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,OAAQ,EAAA,EAAqB,GAAgC,KAAA;AAC9D,IAAM,MAAA,cAAA,GAAiB,WAAW,aAAc,EAAA,CAAA;AAEhD,IAAI,IAAA,IAAA,CAAA;AACJ,IAAA,QAAQ,cAAgB;AAAA,MACtB,KAAK,QAAA;AACH,QAAA,IAAA,GAAO,QAAS,CAAA,MAAA,CAAA;AAChB,QAAA,MAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,IAAA,GAAO,QAAS,CAAA,OAAA,CAAA;AAChB,QAAA,MAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,IAAA,GAAO,QAAS,CAAA,IAAA,CAAA;AAChB,QAAA,MAAA;AAGA,KACJ;AACA,IAAI,IAAA,CAAC,IAAM,EAAA,uBAAS,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA,CAAA;AACpB,IAAO,uBAAA,GAAA,CAAC,wBAAsB,QAAK,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,GACrC;AACF,EAAA;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/build/connectkit/src/components/Common/BrowserIcon/styles.js

@@ -0,0 +1,20 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+
+const BrowserIconContainer = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 32px;
+  max-height: 32px;
+  width: 100%;
+  height: 100%;
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { BrowserIconContainer };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Common/BrowserIcon/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/BrowserIcon/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"./../../../styles/styled\";\n\nexport const BrowserIconContainer = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 32px;\n  max-height: 32px;\n  width: 100%;\n  height: 100%;\n  svg {\n    display: block;\n    width: 100%;\n    height: 100%;\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,oBAAA,GAAuB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}